From 7f72f15055518a5d2a2090ef61fbd81da9ecbeff Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Fri, 15 Mar 2024 12:29:14 -0500
Subject: [PATCH] feat: address displayer

---
 .../form-address-displayer.tsx                |  2 +-
 src/app/components/app-version.tsx            |  3 +-
 .../components/receive-tokens.layout.tsx      |  2 +-
 .../components/broadcast-error.layout.tsx     |  3 +-
 .../address-displayer.layout.tsx              |  6 +-
 .../address-displayer.stories.tsx             | 57 +++++++++++++++++++
 .../address-displayer/address-displayer.tsx   | 19 ++-----
 .../address-displayer.utils.ts                |  7 +++
 8 files changed, 79 insertions(+), 20 deletions(-)
 rename src/app/{ => ui}/components/address-displayer/address-displayer.layout.tsx (63%)
 create mode 100644 src/app/ui/components/address-displayer/address-displayer.stories.tsx
 rename src/app/{ => ui}/components/address-displayer/address-displayer.tsx (56%)
 create mode 100644 src/app/ui/components/address-displayer/address-displayer.utils.ts

diff --git a/src/app/components/address-displayer/form-address-displayer.tsx b/src/app/components/address-displayer/form-address-displayer.tsx
index 71fba94b964..e75e82cfa30 100644
--- a/src/app/components/address-displayer/form-address-displayer.tsx
+++ b/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;
diff --git a/src/app/components/app-version.tsx b/src/app/components/app-version.tsx
index c67990f8ffe..bb189a2877d 100644
--- a/src/app/components/app-version.tsx
+++ b/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"
diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx
index 3fc721c3bfc..63e70a2c2db 100644
--- a/src/app/pages/receive/components/receive-tokens.layout.tsx
+++ b/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';
diff --git a/src/app/pages/send/broadcast-error/components/broadcast-error.layout.tsx b/src/app/pages/send/broadcast-error/components/broadcast-error.layout.tsx
index bc76f414895..1e0fb732385 100644
--- a/src/app/pages/send/broadcast-error/components/broadcast-error.layout.tsx
+++ b/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}
diff --git a/src/app/components/address-displayer/address-displayer.layout.tsx b/src/app/ui/components/address-displayer/address-displayer.layout.tsx
similarity index 63%
rename from src/app/components/address-displayer/address-displayer.layout.tsx
rename to src/app/ui/components/address-displayer/address-displayer.layout.tsx
index cffba672651..151842aa23a 100644
--- a/src/app/components/address-displayer/address-displayer.layout.tsx
+++ b/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}
     />
   );
diff --git a/src/app/ui/components/address-displayer/address-displayer.stories.tsx b/src/app/ui/components/address-displayer/address-displayer.stories.tsx
new file mode 100644
index 00000000000..8c3f871cf44
--- /dev/null
+++ b/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>
+  ),
+};
diff --git a/src/app/components/address-displayer/address-displayer.tsx b/src/app/ui/components/address-displayer/address-displayer.tsx
similarity index 56%
rename from src/app/components/address-displayer/address-displayer.tsx
rename to src/app/ui/components/address-displayer/address-displayer.tsx
index 64c15a61904..160c66b0b12 100644
--- a/src/app/components/address-displayer/address-displayer.tsx
+++ b/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>
       ))}
diff --git a/src/app/ui/components/address-displayer/address-displayer.utils.ts b/src/app/ui/components/address-displayer/address-displayer.utils.ts
new file mode 100644
index 00000000000..9dc09d07e41
--- /dev/null
+++ b/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;
+}