feat: add mobile AddressDisplayer

packages/ui/native.ts

@@ -8,6 +8,7 @@ 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 } from './src/components/address-displayer/address-displayer.native';
 export {
   AnimatedButton,
   Button,

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 { groupByFour } from './address-displayer.utils.shared';
+
+interface AddressDisplayerProps extends BoxProps {
+  address: string;
+}
+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/box/box.native.tsx

@@ -1,5 +1,6 @@
-import { createBox } from '@shopify/restyle';
+import { BoxProps as RestyleBoxProps, createBox } from '@shopify/restyle';
 
 import { type Theme } from '../../theme-native';
 
 export const Box = createBox<Theme>();
+export type BoxProps = RestyleBoxProps<Theme>;