address view v2 scaffolding

penumbra-zone · Dec 10, 2024 · d80a198 · d80a198
1 parent be8b50c
commit d80a198
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 16 deletions.
diff --git a/packages/ui/src/AddressView/index.stories.tsx b/packages/ui/src/AddressView/index.stories.tsx
@@ -1,17 +1,22 @@
 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,
       },
     },
   },

diff --git a/packages/ui/src/AddressView/index.tsx b/packages/ui/src/AddressView/index.tsx
@@ -4,46 +4,79 @@ 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';
+import cn from 'clsx';
 
 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;
+};
+
+export const getFont = (density: Density): string => {
+  if (density === 'compact') {
+    return cn('flex items-center gap-1.5 text-sm text-text-primary');
+  }
+  if (density === 'slim') {
+    return cn('flex items-center gap-1 text-xs text-text-primary');
+  }
+  return cn('flex items-center gap-2 text-base text-text-primary');
+};
+
 // 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={cn(getFont(density))}>
       {!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>
+        <Text strong truncate={truncate}>
           {isRandomized && 'IBC Deposit Address for '}
-          {`Sub-Account #${addressIndex.account}`}
+          {getAccountLabel(addressIndex.account)}
         </Text>
       ) : (
-        <Text technical truncate>
+        <Text technical truncate={truncate}>
           {encodedAddress}
         </Text>
       )}

diff --git a/packages/ui/src/Text/index.tsx b/packages/ui/src/Text/index.tsx
@@ -102,7 +102,9 @@ const getTextOptionClasses = ({
   break: breakProp,
   whitespace,
 }: TextProps): string => {
-  const truncateClass = truncate ? cn('truncate') : '';
+  const truncateClass = truncate
+    ? cn('truncate max-w-[150px] overflow-hidden whitespace-nowrap')
+    : ''; // Adds max-width for aggressive truncation
   const alignClass = align && ALIGN_MAP[align];
   const decorationClass = decoration && DECORATION_MAP[decoration];
   const transformClass = transform && TRANSFORM_MAP[transform];

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({