feat: address displayer

src/app/components/address-displayer/form-address-displayer.tsx

@@ -1,7 +1,7 @@
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 import { Box, BoxProps } from 'leather-styles/jsx';
 
-import { AddressDisplayer } from './address-displayer';
+import { AddressDisplayer } from '@app/ui/components/address-displayer/address-displayer';
 
 interface FormAddressDisplayerProps extends BoxProps {
   address: string;

src/app/components/app-version.tsx

@@ -15,7 +15,8 @@ const AppVersionLabel = forwardRef<HTMLSpanElement, AppVersionLabelProps>(
   ({ children, isLatestVersion, ...props }: AppVersionLabelProps, ref) => (
     <styled.span
       ref={ref}
-      textStyle="mono.02"
+      textStyle="code"
+      fontSize="10px"
       marginRight="10px"
       mb="-4px"
       ml="space.02"

src/app/pages/receive/components/receive-tokens.layout.tsx

@@ -4,9 +4,9 @@ import { SharedComponentsSelectors } from '@tests/selectors/shared-component.sel
 import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { useLocationState } from '@app/common/hooks/use-location-state';
-import { AddressDisplayer } from '@app/components/address-displayer/address-displayer';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
 import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
+import { AddressDisplayer } from '@app/ui/components/address-displayer/address-displayer';
 import { Button } from '@app/ui/components/button/button';
 
 import { QrCode } from './address-qr-code';

src/app/pages/send/broadcast-error/components/broadcast-error.layout.tsx

@@ -43,7 +43,8 @@ export function BroadcastErrorLayout(props: BroadcastErrorProps) {
           mx="space.05"
           p="space.04"
           textAlign="left"
-          textStyle="mono.02"
+          textStyle="code"
+          fontSize="10px"
           wordBreak="break-all"
         >
           {errorPayload}

src/app/components/address-displayer/address-displayer.layout.tsx → src/app/ui/components/address-displayer/address-displayer.layout.tsx

@@ -1,6 +1,6 @@
-import { styled } from 'leather-styles/jsx';
+import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
 
-interface AddressDisplayerLayoutProps {
+interface AddressDisplayerLayoutProps extends HTMLStyledProps<'span'> {
   isEven: boolean;
   children: React.ReactNode;
 }
@@ -9,7 +9,7 @@ export function AddressDisplayerLayout({ isEven, ...props }: AddressDisplayerLay
     <styled.span
       color={isEven ? 'ink.text-primary' : 'ink.text-subdued'}
       mr="space.02"
-      textStyle="mono.01"
+      textStyle="code"
       {...props}
     />
   );

src/app/ui/components/address-displayer/address-displayer.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Flex } from 'leather-styles/jsx';
+
+import { BtcAvatarIcon } from '../avatar/btc-avatar-icon';
+import { StxAvatarIcon } from '../avatar/stx-avatar-icon';
+import { Flag } from '../flag/flag';
+import { AddressDisplayer as Component } from './address-displayer';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'AddressDisplayer',
+  parameters: {
+    controls: { include: ['address'] },
+  },
+};
+
+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 />}>
+      <Flex flexWrap="wrap" maxWidth="400px">
+        <Component address={args.address} />
+      </Flex>
+    </Flag>
+  ),
+};
+
+export const WithSTXIcon: Story = {
+  args: {
+    address: 'SP3XKZE32KZ925AAAGWPG1W66YP5BM2RD73T6AJHS',
+  },
+  render: args => (
+    <Flag img={<StxAvatarIcon />}>
+      <Flex flexWrap="wrap" maxWidth="400px">
+        <Component address={args.address} />
+      </Flex>
+    </Flag>
+  ),
+};

src/app/components/address-displayer/address-displayer.tsx → src/app/ui/components/address-displayer/address-displayer.tsx

@@ -1,25 +1,18 @@
+import type { HTMLStyledProps } from 'leather-styles/types';
+
 import { isEven } from '@app/common/math/helpers';
 
 import { AddressDisplayerLayout } from './address-displayer.layout';
+import { groupByFour } from './address-displayer.utils';
 
-function groupByFour(text: string) {
-  const result = [];
-
-  for (let i = 0; i < text.length; i += 4) {
-    result.push(text.slice(i, i + 4));
-  }
-
-  return result;
-}
-
-interface AddressDisplayerProps {
+interface AddressDisplayerProps extends HTMLStyledProps<'span'> {
   address: string;
 }
-export function AddressDisplayer({ address }: AddressDisplayerProps) {
+export function AddressDisplayer({ address, ...props }: AddressDisplayerProps) {
   return (
     <>
       {groupByFour(address).map((letterGroup, index) => (
-        <AddressDisplayerLayout key={index} isEven={isEven(index + 1)}>
+        <AddressDisplayerLayout key={index} isEven={isEven(index + 1)} {...props}>
           {letterGroup}
         </AddressDisplayerLayout>
       ))}

src/app/ui/components/address-displayer/address-displayer.utils.ts

@@ -0,0 +1,7 @@
+export function groupByFour(text: string) {
+  const result = [];
+  for (let i = 0; i < text.length; i += 4) {
+    result.push(text.slice(i, i + 4));
+  }
+  return result;
+}