feat: Add AddressDisplayer for mobile, closes LEA-1638

[tigranpetrossian]

Adds native version of AddressDisplayer, adds Fira Code and addresses some minor font/styling issues as a prerequisite:

1. Added Fira Code for mobile, new and correct weights for the web (had to compile woff2 and otf myself from source, as they weren't present in the official build 😬), updated references everywhere.
2. Update storybook for native, update the build to make sure all fonts are displayed correctly.
3. Add address textStyle to tokens, as code that's currently used for the web version of the AddressDisplayer doesn't match the new designs. I'm not extremely happy with the text style name this specific, brought this up with the design team to see if it's worth using something more generic.
4. Refactored the AddressDisplayer for web to match the current designs:
   1. Used the new text style
   2. Added a flexbox wrapper to correct line height (didn't work with inline context), replaced margin with 1ch wide gaps to avoid trailing spaces.
   3. Had to merge into a single component, the layout pattern didn't make sense after doing the above, thankfully this is a fairly small component.
5. Added native version of the component

@edgarkhanzadian I would really appreciate your help double checking the config and all the artifacts expo generated after running prebuild to bundle fonts. I'm way out of my depth when it comes to this kind of thing.

[linear]

LEA-1638 Address component

[tigranpetrossian]

@kyranjamie Missed an important part: extension will likely need a small PR to address the changes to the component here. Two questions:

1. Is there script that pulls the base.css and font files from the UI package automatically, or is it done manually?
2. How do we typically orchestrate releases when there's a potentially breaking change in the monorepo that affects the extension?

[kyranjamie]

Is there script that pulls the base.css and font files from the UI package automatically, or is it done manually?

No, and I didn't realise they were copied. We shouldn't have duplicates of this file, ideally the base.css in the extension reads this one in the mono.

How do we typically orchestrate releases when there's a potentially breaking change in the monorepo that affects the extension?

This is a mostly manual process currently. Suggest linking the packages locally, making a PR in the extension (with a broken build because the package hasn't been released yet), then updating the PR when you've released the monorepo changes.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 24.23%. Comparing base (58fc169) to head (7acca95).

Additional details and impacted files

@@           Coverage Diff           @@
##              dev     #603   +/-   ##
=======================================
  Coverage   24.23%   24.23%           
=======================================
  Files         155      155           
  Lines        5847     5847           
  Branches      324      324           
=======================================
  Hits         1417     1417           
  Misses       4430     4430           

Components	Coverage Δ
bitcoin	62.04% <ø> (ø)
query	12.49% <ø> (ø)
utils	48.31% <ø> (ø)
crypto	68.21% <ø> (ø)
stacks	54.71% <ø> (ø)

[pete-watters]

Nice work here @tigranpetrossian , this is a really clean and valuable PR 🚀

If you run pnpm syncpack:format it should fix your lint error

[pete-watters]

@kyranjamie Missed an important part: extension will likely need a small PR to address the changes to the component here. Two questions:

1. Is there script that pulls the base.css and font files from the UI package automatically, or is it done manually?
2. How do we typically orchestrate releases when there's a potentially breaking change in the monorepo that affects the extension?

When originally building the UI package we decided against hosting the font files and static assets in there and instead keeping them local to the extension. That's the reason for this base.css duplication.

It could be better to remove that duplication and keep everything in the UI library but we would need to do some work on bundling the font files for export with the UI package. We also have other static assets in extension/public anyway so I think it's OK to have small duplication here to avoid more complication.

[tigranpetrossian]

Nice work here @tigranpetrossian , this is a really clean and valuable PR 🚀

If you run pnpm syncpack:format it should fix your lint error

Thanks! Did this and it seems fine. I suspect the errors are either because I either modified the history of the branch too much or we need to add a pnpm install prior to running these scripts. Will investigate.

[tigranpetrossian]

When originally building the UI package we decided against hosting the font files and static assets in there and instead keeping them local to the extension. That's the reason for this base.css duplication.

It could be better to remove that duplication and keep everything in the UI library but we would need to do some work on bundling the font files for export with the UI package. We also have other static assets in extension/public anyway so I think it's OK to have small duplication here to avoid more complication.

@pete-watters Agreed. I'm looking into this. If it turns out to be too complicated we'll tackle it separately or worst case scenario stick with duplication.

[edgarkhanzadian]

Looks amazing ! 🚀

I've flagged a few more lines that prebuild has automatically added to the ios folder.

[fbwoolf]

Lgtm @tigranpetrossian 👍

[camerow]

I saw this was sitting in the merge queue for ~6 hours. Not sure what is going on but tried removing/readding it.

[fbwoolf]

Trying again.