From 7af1ec841d80e0f805384fc31beefaf820ecf9f3 Mon Sep 17 00:00:00 2001
From: Tal Derei <70081547+TalDerei@users.noreply.github.com>
Date: Tue, 10 Dec 2024 12:25:18 -0800
Subject: [PATCH] feat(ui): updates for address view  (#1941)

* address view v2 scaffolding

* changeset:

* apply truncation to parent and pass props to text component

* add padding to storybook componenet

* tailwind css linting
---
 .changeset/real-goats-cover.md                |  5 ++
 packages/ui/src/AddressView/index.stories.tsx | 17 +++--
 packages/ui/src/AddressView/index.tsx         | 62 +++++++++++++++----
 packages/ui/src/utils/bufs/address-view.ts    |  4 +-
 .../ui/src/utils/bufs/balances-responses.ts   |  4 +-
 5 files changed, 69 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/real-goats-cover.md

diff --git a/.changeset/real-goats-cover.md b/.changeset/real-goats-cover.md
new file mode 100644
index 0000000000..58ff3ea9f7
--- /dev/null
+++ b/.changeset/real-goats-cover.md
@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': minor
+---
+
+Update Address View component to match the latest designs
diff --git a/packages/ui/src/AddressView/index.stories.tsx b/packages/ui/src/AddressView/index.stories.tsx
index cafe0b3a25..e8b9bd7e94 100644
--- a/packages/ui/src/AddressView/index.stories.tsx
+++ b/packages/ui/src/AddressView/index.stories.tsx
@@ -1,23 +1,28 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { AddressViewComponent } from '.';
-import { ADDRESS_VIEW_DECODED, ADDRESS_VIEW_OPAQUE } from '../utils/bufs';
+import { ADDRESS_VIEW_DECODED, ADDRESS1_VIEW_DECODED, ADDRESS_VIEW_OPAQUE } from '../utils/bufs';
 
 const meta: Meta<typeof AddressViewComponent> = {
   component: AddressViewComponent,
-  tags: ['autodocs', '!dev'],
+  tags: ['autodocs', '!dev', 'density'],
   argTypes: {
     addressView: {
-      options: ['Sample decoded address view', 'Sample opaque address view'],
+      options: [
+        'Decoded: main-account address view',
+        'Decoded: sub-account address view',
+        'Opaque: account address view',
+      ],
       mapping: {
-        'Sample decoded address view': ADDRESS_VIEW_DECODED,
-        'Sample opaque address view': ADDRESS_VIEW_OPAQUE,
+        'Decoded: main-account address view': ADDRESS_VIEW_DECODED,
+        'Decoded: sub-account address view': ADDRESS1_VIEW_DECODED,
+        'Opaque: account address view': ADDRESS_VIEW_OPAQUE,
       },
     },
   },
   decorators: [
     Story => (
-      <div className='w-full overflow-hidden'>
+      <div className='w-full overflow-hidden p-4'>
         <Story />
       </div>
     ),
diff --git a/packages/ui/src/AddressView/index.tsx b/packages/ui/src/AddressView/index.tsx
index a93e95605d..11ff36a919 100644
--- a/packages/ui/src/AddressView/index.tsx
+++ b/packages/ui/src/AddressView/index.tsx
@@ -4,49 +4,85 @@ import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 import { CopyToClipboardButton } from '../CopyToClipboardButton';
 import { AddressIcon } from './AddressIcon';
 import { Text } from '../Text';
+import { Density, useDensity } from '../utils/density';
 
 export interface AddressViewProps {
   addressView: AddressView | undefined;
   copyable?: boolean;
   hideIcon?: boolean;
+  truncate?: boolean;
 }
 
+export const getIconSize = (density: Density): number => {
+  if (density === 'compact') {
+    return 16;
+  }
+  if (density === 'slim') {
+    return 12;
+  }
+  return 24;
+};
+
 // Renders an address or an address view.
 // If the view is given and is "visible", the account information will be displayed instead.
 export const AddressViewComponent = ({
   addressView,
   copyable = true,
   hideIcon,
+  truncate = false,
 }: AddressViewProps) => {
+  const density = useDensity();
+
   if (!addressView?.addressView.value?.address) {
     return null;
   }
 
   const addressIndex = getAddressIndex.optional(addressView);
 
-  // a randomized index has nonzero randomizer bytes
+  // A randomized index has nonzero randomizer bytes
   const isRandomized = addressIndex?.randomizer.some(v => v);
 
   const encodedAddress = bech32mAddress(addressView.addressView.value.address);
 
+  // Sub-account selector logic
+  const getAccountLabel = (index: number) =>
+    index === 0 ? 'Main Account' : `Sub-Account ${index}`;
+
   return (
-    <div className='flex items-center gap-2 text-text-primary'>
+    <div className={'flex items-center gap-2 text-text-primary'}>
       {!hideIcon && (
         <div className='shrink'>
-          <AddressIcon address={addressView.addressView.value.address} size={24} />
+          <AddressIcon
+            address={addressView.addressView.value.address}
+            size={getIconSize(density)}
+          />
         </div>
       )}
 
-      {addressIndex ? (
-        <Text strong truncate>
-          {isRandomized && 'IBC Deposit Address for '}
-          {`Sub-Account #${addressIndex.account}`}
-        </Text>
-      ) : (
-        <Text technical truncate>
-          {encodedAddress}
-        </Text>
-      )}
+      <div className={truncate ? 'max-w-[150px] truncate' : ''}>
+        {/* eslint-disable-next-line no-nested-ternary -- can alternatively use dynamic prop object like {...fontProps} */}
+        {addressIndex ? (
+          density === 'sparse' ? (
+            <Text strong-bold truncate={truncate}>
+              {isRandomized && 'IBC Deposit Address for '}
+              {getAccountLabel(addressIndex.account)}
+            </Text>
+          ) : (
+            <Text small truncate={truncate}>
+              {isRandomized && 'IBC Deposit Address for '}
+              {getAccountLabel(addressIndex.account)}
+            </Text>
+          )
+        ) : density === 'sparse' ? (
+          <Text strong-bold truncate={truncate}>
+            {encodedAddress}
+          </Text>
+        ) : (
+          <Text small truncate={truncate}>
+            {encodedAddress}
+          </Text>
+        )}
+      </div>
 
       {copyable && !isRandomized && (
         <div className='shrink'>
diff --git a/packages/ui/src/utils/bufs/address-view.ts b/packages/ui/src/utils/bufs/address-view.ts
index 500ce31f81..68e1947eda 100644
--- a/packages/ui/src/utils/bufs/address-view.ts
+++ b/packages/ui/src/utils/bufs/address-view.ts
@@ -14,13 +14,13 @@ export const ADDRESS_VIEW_DECODED = new AddressView({
   },
 });
 
-export const ADDRESS2_VIEW_DECODED = new AddressView({
+export const ADDRESS1_VIEW_DECODED = new AddressView({
   addressView: {
     case: 'decoded',
     value: {
       address: { inner: new Uint8Array(80) },
       index: {
-        account: 2,
+        account: 1,
         randomizer: new Uint8Array([0, 0, 0]),
       },
     },
diff --git a/packages/ui/src/utils/bufs/balances-responses.ts b/packages/ui/src/utils/bufs/balances-responses.ts
index d28ed43357..dd98855d32 100644
--- a/packages/ui/src/utils/bufs/balances-responses.ts
+++ b/packages/ui/src/utils/bufs/balances-responses.ts
@@ -1,6 +1,6 @@
 import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
 import { OSMO_VALUE_VIEW, PENUMBRA_VALUE_VIEW } from './value-view.ts';
-import { ADDRESS2_VIEW_DECODED, ADDRESS_VIEW_DECODED } from './address-view.ts';
+import { ADDRESS1_VIEW_DECODED, ADDRESS_VIEW_DECODED } from './address-view.ts';
 
 export const PENUMBRA_BALANCE = new BalancesResponse({
   balanceView: PENUMBRA_VALUE_VIEW,
@@ -9,7 +9,7 @@ export const PENUMBRA_BALANCE = new BalancesResponse({
 
 export const PENUMBRA2_BALANCE = new BalancesResponse({
   balanceView: PENUMBRA_VALUE_VIEW,
-  accountAddress: ADDRESS2_VIEW_DECODED,
+  accountAddress: ADDRESS1_VIEW_DECODED,
 });
 
 export const OSMO_BALANCE = new BalancesResponse({