feat: Add AddressDisplayer for mobile, closes LEA-1638

apps/mobile/android/app/src/main/AndroidManifest.xml

@@ -1,12 +1,12 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
   <uses-permission android:name="android.permission.USE_BIOMETRIC"/>
   <uses-permission android:name="android.permission.USE_FINGERPRINT"/>
   <uses-permission android:name="android.permission.VIBRATE"/>
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <queries>
     <intent>
       <action android:name="android.intent.action.VIEW"/>

apps/mobile/app.json

@@ -50,11 +50,12 @@
         "expo-font",
         {
           "fonts": [
-            "node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/SpaceMono-Regular.ttf",
-            "node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Regular.otf",
-            "node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Light.otf",
-            "node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Medium.otf",
-            "node_modules/@leather.io/ui/src/assets-native/fonts/MarchePro-Super.otf"
+            "node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/FiraCode-Retina.otf",
+            "node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/FiraCode-Medium.otf",
+            "node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/ABCDiatype-Regular.otf",
+            "node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/ABCDiatype-Light.otf",
+            "node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/ABCDiatype-Medium.otf",
+            "node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/MarchePro-Super.otf"
           ]
         }
       ],

apps/mobile/ios/leatherwalletmobile.xcodeproj/project.pbxproj

@@ -20,6 +20,8 @@
 		B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */; };
 		BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
 		EC07C78F575D4480A1321AFF /* SpaceMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3F6687E7CB2942B0929D7833 /* SpaceMono-Regular.ttf */; };
+		639E76F5C6DD4F95BB83688D /* FiraCode-Retina.otf in Resources */ = {isa = PBXBuildFile; fileRef = 76B2513BA2D94EB6BA0D6194 /* FiraCode-Retina.otf */; };
+		1B12FD95F6504898B7BE8160 /* FiraCode-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = B66C2888E3BB47F7A5A88DEB /* FiraCode-Medium.otf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -43,6 +45,8 @@
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		F520EA8A657049D4A3392B8B /* ABCDiatype-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ABCDiatype-Regular.otf"; path = "../node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Regular.otf"; sourceTree = "<group>"; };
 		FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-leatherwalletmobile/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
+		76B2513BA2D94EB6BA0D6194 /* FiraCode-Retina.otf */ = {isa = PBXFileReference; name = "FiraCode-Retina.otf"; path = "../node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/FiraCode-Retina.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		B66C2888E3BB47F7A5A88DEB /* FiraCode-Medium.otf */ = {isa = PBXFileReference; name = "FiraCode-Medium.otf"; path = "../node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/FiraCode-Medium.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -81,6 +85,8 @@
 				A6CFA460F0F340ED95800EF2 /* ABCDiatype-Light.otf */,
 				6B54D2785B5E48D281A8E3C8 /* ABCDiatype-Medium.otf */,
 				CFE8092428C64AA0AFE1A346 /* MarchePro-Super.otf */,
+				76B2513BA2D94EB6BA0D6194 /* FiraCode-Retina.otf */,
+				B66C2888E3BB47F7A5A88DEB /* FiraCode-Medium.otf */,
 			);
 			name = Resources;
 			path = "";
@@ -230,6 +236,8 @@
 				3319885B547C452A9C635C5C /* ABCDiatype-Light.otf in Resources */,
 				322D7CDF54DE4002AED225F1 /* ABCDiatype-Medium.otf in Resources */,
 				08C9598C54FA4F959A4FFBC0 /* MarchePro-Super.otf in Resources */,
+				639E76F5C6DD4F95BB83688D /* FiraCode-Retina.otf in Resources */,
+				1B12FD95F6504898B7BE8160 /* FiraCode-Medium.otf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

apps/mobile/ios/leatherwalletmobile/Info.plist

@@ -54,15 +54,6 @@
     <key>NSUserActivityTypes</key>
     <array>
       <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
-      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
-      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
-      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
-      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
-      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
-      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
-      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
-      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
-      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
     </array>
     <key>UIAppFonts</key>
     <array>
@@ -71,6 +62,8 @@
       <string>ABCDiatype-Light.otf</string>
       <string>ABCDiatype-Medium.otf</string>
       <string>MarchePro-Super.otf</string>
+      <string>FiraCode-Retina.otf</string>
+      <string>FiraCode-Medium.otf</string>
     </array>
     <key>UILaunchStoryboardName</key>
     <string>SplashScreen</string>
@@ -99,4 +92,4 @@
     <key>UIViewControllerBasedStatusBarAppearance</key>
     <false/>
   </dict>
-</plist>
+</plist>

packages/tokens/src/typography.ts

@@ -7,7 +7,7 @@ const fontMap = {
   mobile: {
     // please, remember to use PostScript name of the font on mobile
     // Ref: https://docs.expo.dev/develop/user-interface/fonts/#what-is-postscript-name-of-a-font
-    firaCode: '<Need to use PostScript name here> Fira Code',
+    firaCode: 'FiraCode-Retina',
     diatype: 'ABCDiatype-Regular',
     spaceMono: 'SpaceMono-Regular',
     marchePro: 'MarchePro-Super',
@@ -133,6 +133,13 @@ function getTextVariants({ platform }: { platform: Platform }) {
     fontWeight: transformWeight(450),
   };
 
+  const address = {
+    ...commonFiracodeStyles,
+    fontSize: transformSize(14),
+    lineHeight: transformSize(24),
+    fontWeight: transformWeight(500),
+  };
+
   const textVariants = {
     display01,
     display02,
@@ -148,6 +155,7 @@ function getTextVariants({ platform }: { platform: Platform }) {
     body02,
     caption01,
     code,
+    address,
     defaults: body01,
   };
 
@@ -219,6 +227,11 @@ export function getWebTextVariants() {
       description: 'code',
       value: textVariants.code,
     },
+
+    address: {
+      description: 'address',
+      value: textVariants.address,
+    },
   } as const;
 }
 

packages/ui/app.config.js

@@ -7,11 +7,11 @@ export default ({ config }) => ({
   },
   version: '1.0.0',
   orientation: 'portrait',
-  icon: './src/assets-native/icon.png',
+  icon: './src/assets-native/images/icon.png',
   scheme: 'myapp',
   userInterfaceStyle: 'automatic',
   splash: {
-    image: './src/assets-native/splash.png',
+    image: './src/assets-native/images/splash.png',
     resizeMode: 'contain',
     backgroundColor: '#ffffff',
   },
@@ -26,13 +26,13 @@ export default ({ config }) => ({
   },
   android: {
     adaptiveIcon: {
-      foregroundImage: './src/assets-native/adaptive-icon.png',
+      foregroundImage: './src/assets-native/images/adaptive-icon.png',
       backgroundColor: '#ffffff',
     },
     package: 'io.leather.mobilewallet',
   },
   web: {
-    favicon: './src/assets-native/favicon.png',
+    favicon: './src/assets-native/images/favicon.png',
   },
   plugins: ['expo-font'],
 });

packages/ui/native.ts

@@ -8,6 +8,10 @@ export { BlurView } from './src/components/blur-view/blur-view.native';
 export { Chip } from './src/components/chip/chip.native';
 export { HStack } from './src/components/box/hstack.native';
 export { Stack } from './src/components/box/stack.native';
+export {
+  AddressDisplayer,
+  type AddressDisplayerProps,
+} from './src/components/address-displayer/address-displayer.native';
 export {
   AnimatedButton,
   Button,

packages/ui/package.json

@@ -59,6 +59,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
+    "react-native-gesture-handler": "2.16.1",
     "react-native-reanimated": "3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-svg": "15.2.0",

packages/ui/src/app.tsx

@@ -1,12 +1,25 @@
 import { useColorScheme } from 'react-native';
 
 import { ThemeProvider } from '@shopify/restyle';
+import { useFonts } from 'expo-font';
 
 import StorybookUIRoot from './.storybook-native';
 import { generateTheme } from './theme-native';
 
 function RootLayout() {
   const colorScheme = useColorScheme();
+  const [loaded, error] = useFonts({
+    'FiraCode-Retina': require('./assets-native/fonts/FiraCode-Retina.otf'),
+    'FiraCode-Medium': require('./assets-native/fonts/FiraCode-Medium.otf'),
+    'ABCDiatype-Light': require('./assets-native/fonts/ABCDiatype-Light.otf'),
+    'ABCDiatype-Regular': require('./assets-native/fonts/ABCDiatype-Regular.otf'),
+    'ABCDiatype-Medium': require('./assets-native/fonts/ABCDiatype-Medium.otf'),
+    'MarchePro-Super': require('./assets-native/fonts/MarchePro-Super.otf'),
+  });
+
+  if (!loaded || error) {
+    return null;
+  }
 
   return (
     <ThemeProvider theme={generateTheme(colorScheme)}>

packages/ui/src/assets-web/base.css

@@ -22,26 +22,21 @@
 @font-face {
   font-family: 'Marche';
   src: url('/fonts/marche/marche-super-pro.woff2') format('woff2');
-  line-height: 44px;
   font-weight: 800;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Fira Code';
-  src:
-    url('/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'),
-    url('/fonts/fira-code/woff/FiraCode-Light.woff') format('woff');
-  font-weight: 300;
+  src: url('/fonts/fira-code/FiraCode-Retina.woff2') format('woff2');
+  font-weight: 450;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Fira Code';
-  src:
-    url('/fonts/fira-code/woff2/FiraCode-Regular.woff2') format('woff2'),
-    url('/fonts/fira-code/woff/FiraCode-Regular.woff') format('woff');
-  font-weight: 400;
+  src: url('/fonts/fira-code/FiraCode-Medium.woff2') format('woff2');
+  font-weight: 500;
   font-style: normal;
 }
 

packages/ui/src/components/address-displayer/address-displayer.native.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BtcAvatarIcon } from '../avatar/btc-avatar-icon.native';
+import { StxAvatarIcon } from '../avatar/stx-avatar-icon.native';
+import { Box } from '../box/box.native';
+import { Flag } from '../flag/flag.native';
+import { AddressDisplayer as Component } from './address-displayer.native';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  title: 'AddressDisplayer',
+};
+
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const Bitcoin: Story = {
+  args: {
+    address: 'bc1pmzfrwwndsqmk5yh69yjr5lfgfg4ev8c0tsc06e',
+  },
+};
+
+export const Stacks: Story = {
+  args: {
+    address: 'SP3XKZE32KZ925AAAGWPG1W66YP5BM2RD73T6AJHS',
+  },
+};
+
+export const WithBtcIcon: Story = {
+  args: {
+    address: 'bc1pmzfrwwndsqmk5yh69yjr5lfgfg4ev8c0tsc06e',
+  },
+  render: args => (
+    <Flag img={<BtcAvatarIcon />}>
+      <Box flexDirection="row" flexWrap="wrap">
+        <Component address={args.address} />
+      </Box>
+    </Flag>
+  ),
+};
+
+export const WithStxIcon: Story = {
+  args: {
+    address: 'SP3XKZE32KZ925AAAGWPG1W66YP5BM2RD73T6AJHS',
+  },
+  render: args => (
+    <Flag img={<StxAvatarIcon />}>
+      <Box flexDirection="row" flexWrap="wrap">
+        <Component address={args.address} />
+      </Box>
+    </Flag>
+  ),
+};

packages/ui/src/components/address-displayer/address-displayer.native.tsx

@@ -0,0 +1,25 @@
+import { isEven } from '@leather.io/utils';
+
+import { Box, BoxProps } from '../box/box.native';
+import { Text } from '../text/text.native';
+import { AddressDisplayerBaseProps } from './address-displayer.types.shared';
+import { groupByFour } from './address-displayer.utils.shared';
+
+export type AddressDisplayerProps = AddressDisplayerBaseProps & BoxProps;
+
+export function AddressDisplayer({ address, ...props }: AddressDisplayerProps) {
+  return (
+    <Box flexDirection="row" columnGap="2" flexWrap="wrap">
+      {groupByFour(address).map((letterGroup, index) => (
+        <Text
+          key={index}
+          variant="address"
+          color={isEven(index) ? 'ink.text-primary' : 'ink.text-subdued'}
+          {...props}
+        >
+          {letterGroup}
+        </Text>
+      ))}
+    </Box>
+  );
+}

packages/ui/src/components/address-displayer/address-displayer.types.shared.ts

@@ -0,0 +1,3 @@
+export interface AddressDisplayerBaseProps {
+  address: string;
+}