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
penumbra-zone · Dec 10, 2024 · 7af1ec8 · 7af1ec8
1 parent 0cadc3c
commit 7af1ec8
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 23 deletions.
diff --git a/.changeset/real-goats-cover.md 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
@@ -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
@@ -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
@@ -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
@@ -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({