fix(minifront): #1897: sub account terminology (#1905)

* fix(ui-deprecated): update terminology to use Sub-Account * fix(minifront): #1897: use Sub-Account terminology * chore: changeset
penumbra-zone · Nov 11, 2024 · ebdacb9 · ebdacb9
1 parent 7835f5c
commit ebdacb9
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 63 deletions.
diff --git a/.changeset/friendly-dolphins-invite.md b/.changeset/friendly-dolphins-invite.md
@@ -0,0 +1,5 @@
+---
+'minifront': patch
+---
+
+Use Sub-Account terminology
diff --git a/apps/minifront/src/components/dashboard/assets-table/index.tsx b/apps/minifront/src/components/dashboard/assets-table/index.tsx
@@ -87,7 +87,7 @@ export default function AssetsTable() {
                     <div className='flex items-center justify-center gap-2'>
                       <AddressIcon address={account.address} size={20} />
                       <h2 className='whitespace-nowrap font-bold md:text-base xl:text-xl'>
-                        Account #{account.account}
+                        {account.account === 0 ? 'Main Account' : `Sub-Account ${account.account}`}
                       </h2>
                     </div>
 

diff --git a/apps/minifront/src/components/shared/selectors/balance-item.tsx b/apps/minifront/src/components/shared/selectors/balance-item.tsx
@@ -43,7 +43,9 @@ export const BalanceItem = ({ asset, value, onSelect }: BalanceItemProps) => {
           isSelected && 'bg-light-brown',
         )}
       >
-        <TableCell className='pl-4'>{account}</TableCell>
+        <TableCell className='pl-4'>
+          {account !== undefined && (account === 0 ? 'Main' : account)}
+        </TableCell>
 
         <TableCell>
           <div className='col-span-2 flex items-center justify-start gap-1'>

diff --git a/apps/minifront/src/components/shared/selectors/balance-selector.tsx b/apps/minifront/src/components/shared/selectors/balance-selector.tsx
@@ -117,7 +117,7 @@ export default function BalanceSelector({
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead className='pl-4'>Account</TableHead>
+                    <TableHead className='pl-4'>Sub-Account</TableHead>
                     <TableHead>Asset</TableHead>
                     <TableHead className='pr-4 text-right'>Balance</TableHead>
                   </TableRow>

diff --git a/apps/minifront/src/components/swap/swap-form/token-swap-input.tsx b/apps/minifront/src/components/swap/swap-form/token-swap-input.tsx
@@ -66,6 +66,7 @@ export const TokenSwapInput = () => {
 
   const maxAmount = getAmount.optional(assetIn);
   const maxAmountAsString = maxAmount ? joinLoHiAmount(maxAmount).toString() : undefined;
+  const assetInAccount = assetIn && getAddressIndex(assetIn.accountAddress).account;
 
   const setInputToBalanceMax = () => {
     if (assetIn?.balanceView) {
@@ -93,7 +94,7 @@ export const TokenSwapInput = () => {
           {assetIn && (
             <div className='ml-auto hidden h-full flex-col justify-end self-end sm:flex'>
               <span className='mr-2 block whitespace-nowrap text-xs text-muted-foreground'>
-                Account #{getAddressIndex(assetIn.accountAddress).account}
+                {assetInAccount === 0 ? 'Main Account' : `Sub-Account #${assetInAccount}`}
               </span>
             </div>
           )}

diff --git a/packages/ui-deprecated/components/ui/account-switcher/account-switcher.test.tsx b/packages/ui-deprecated/components/ui/account-switcher/account-switcher.test.tsx
@@ -6,7 +6,7 @@ describe('<AccountSwitcher />', () => {
   it('renders the current account', () => {
     const { getByLabelText } = render(<AccountSwitcher account={123} onChange={vi.fn()} />);
 
-    expect(getByLabelText('Account #123')).toHaveValue(123);
+    expect(getByLabelText('Sub-Account #123')).toHaveValue(123);
   });
 
   describe('changing the account via the input field', () => {
@@ -15,14 +15,14 @@ describe('<AccountSwitcher />', () => {
       const { getByLabelText } = render(<AccountSwitcher account={123} onChange={onChange} />);
 
       expect(onChange).not.toHaveBeenCalled();
-      fireEvent.change(getByLabelText('Account #123'), { target: { value: 456 } });
+      fireEvent.change(getByLabelText('Sub-Account #123'), { target: { value: 456 } });
       expect(onChange).toHaveBeenCalledWith(456);
     });
 
     it('has aria-disabled=false', () => {
       const { getByLabelText } = render(<AccountSwitcher account={123} onChange={vi.fn()} />);
 
-      expect(getByLabelText('Account #123')).toHaveAttribute('aria-disabled', 'false');
+      expect(getByLabelText('Sub-Account #123')).toHaveAttribute('aria-disabled', 'false');
     });
 
     describe('when a filter has been passed', () => {
@@ -32,7 +32,7 @@ describe('<AccountSwitcher />', () => {
           <AccountSwitcher account={123} onChange={onChange} filter={[1, 2, 3]} />,
         );
 
-        fireEvent.change(getByLabelText('Account #123'), { target: { value: 456 } });
+        fireEvent.change(getByLabelText('Sub-Account #123'), { target: { value: 456 } });
         expect(onChange).not.toHaveBeenCalled();
       });
 
@@ -41,7 +41,7 @@ describe('<AccountSwitcher />', () => {
           <AccountSwitcher account={123} onChange={vi.fn()} filter={[1, 2, 3]} />,
         );
 
-        expect(getByLabelText('Account #123')).toHaveAttribute('aria-disabled', 'true');
+        expect(getByLabelText('Sub-Account #123')).toHaveAttribute('aria-disabled', 'true');
       });
     });
   });
@@ -52,14 +52,14 @@ describe('<AccountSwitcher />', () => {
       const { getByLabelText } = render(<AccountSwitcher account={123} onChange={onChange} />);
 
       expect(onChange).not.toHaveBeenCalled();
-      fireEvent.click(getByLabelText('Previous account'));
+      fireEvent.click(getByLabelText('Previous sub-account'));
       expect(onChange).toHaveBeenCalledWith(122);
     });
 
     it("is disabled when we're at account 0", () => {
       const { queryByLabelText } = render(<AccountSwitcher account={0} onChange={vi.fn()} />);
 
-      expect(queryByLabelText('Previous account')?.parentElement).toBeDisabled();
+      expect(queryByLabelText('Previous sub-account')?.parentElement).toBeDisabled();
     });
 
     describe('when a filter has been passed', () => {
@@ -70,7 +70,7 @@ describe('<AccountSwitcher />', () => {
         );
 
         expect(onChange).not.toHaveBeenCalled();
-        fireEvent.click(getByLabelText('Previous account'));
+        fireEvent.click(getByLabelText('Previous sub-account'));
         expect(onChange).toHaveBeenCalledWith(100);
       });
 
@@ -79,7 +79,7 @@ describe('<AccountSwitcher />', () => {
           <AccountSwitcher account={100} onChange={vi.fn()} filter={[123, 100]} />,
         );
 
-        expect(queryByLabelText('Previous account')?.parentElement).toBeDisabled();
+        expect(queryByLabelText('Previous sub-account')?.parentElement).toBeDisabled();
       });
     });
   });
@@ -90,14 +90,14 @@ describe('<AccountSwitcher />', () => {
       const { getByLabelText } = render(<AccountSwitcher account={123} onChange={onChange} />);
 
       expect(onChange).not.toHaveBeenCalled();
-      fireEvent.click(getByLabelText('Next account'));
+      fireEvent.click(getByLabelText('Next sub-account'));
       expect(onChange).toHaveBeenCalledWith(124);
     });
 
     it("is disabled when we're at the maximum account index", () => {
       const { queryByLabelText } = render(<AccountSwitcher account={2 ** 32} onChange={vi.fn()} />);
 
-      expect(queryByLabelText('Next account')?.parentElement).toBeDisabled();
+      expect(queryByLabelText('Next sub-account')?.parentElement).toBeDisabled();
     });
 
     describe('when a filter has been passed', () => {
@@ -108,7 +108,7 @@ describe('<AccountSwitcher />', () => {
         );
 
         expect(onChange).not.toHaveBeenCalled();
-        fireEvent.click(getByLabelText('Next account'));
+        fireEvent.click(getByLabelText('Next sub-account'));
         expect(onChange).toHaveBeenCalledWith(123);
       });
 
@@ -117,7 +117,7 @@ describe('<AccountSwitcher />', () => {
           <AccountSwitcher account={123} onChange={vi.fn()} filter={[123, 100]} />,
         );
 
-        expect(queryByLabelText('Next account')?.parentElement).toBeDisabled();
+        expect(queryByLabelText('Next sub-account')?.parentElement).toBeDisabled();
       });
     });
   });

diff --git a/packages/ui-deprecated/components/ui/account-switcher/index.tsx b/packages/ui-deprecated/components/ui/account-switcher/index.tsx
@@ -73,7 +73,7 @@ export const AccountSwitcher = ({
         disabled={!previousButtonEnabled}
       >
         <ArrowLeftIcon
-          aria-label='Previous account'
+          aria-label='Previous sub-account'
           role='button'
           onClick={handleClickPrevious}
           className={cn(compact ? 'size-4' : 'size-6', 'hover:cursor-pointer')}
@@ -86,45 +86,52 @@ export const AccountSwitcher = ({
         )}
       >
         <label className='flex flex-row flex-wrap items-end gap-[6px]'>
-          <span>Account</span>
-          <div className='flex items-end gap-0'>
-            <p>#</p>
-            <div className='relative w-min min-w-[24px]'>
-              <Input
-                aria-label={`Account #${account}`}
-                aria-disabled={!!filter}
-                variant='transparent'
-                type='number'
-                className={cn(
-                  compact ? 'text-base' : 'font-headline text-xl',
-                  'mb-[3px] h-6 py-[2px] font-semibold leading-[30px]',
-                )}
-                onChange={e => {
-                  /**
-                   * Don't allow manual account number entry when there's a
-                   * filter.
-                   *
-                   * @todo: Change this to only call `handleChange()` when the
-                   * user presses Enter? Then it could validate that the entered
-                   * account index is in the filter.
-                   */
-                  if (filter) {
-                    return;
-                  }
+          {account === 0 ? (
+            <span>Main Account</span>
+          ) : (
+            <>
+              <span>Sub-Account</span>
 
-                  const value = Number(e.target.value);
-                  const valueLength = e.target.value.replace(/^0+/, '').length;
+              <div className='flex items-end gap-0'>
+                <p>#</p>
+                <div className='relative w-min min-w-[24px]'>
+                  <Input
+                    aria-label={`Sub-Account #${account}`}
+                    aria-disabled={!!filter}
+                    variant='transparent'
+                    type='number'
+                    className={cn(
+                      compact ? 'text-base' : 'font-headline text-xl',
+                      'mb-[3px] h-6 py-[2px] font-semibold leading-[30px]',
+                    )}
+                    onChange={e => {
+                      /**
+                       * Don't allow manual account number entry when there's a
+                       * filter.
+                       *
+                       * @todo: Change this to only call `handleChange()` when the
+                       * user presses Enter? Then it could validate that the entered
+                       * account index is in the filter.
+                       */
+                      if (filter) {
+                        return;
+                      }
 
-                  if (value > MAX_INDEX || valueLength > MAX_INDEX.toString().length) {
-                    return;
-                  }
-                  handleChange(value);
-                }}
-                style={{ width: `${inputCharWidth}ch` }}
-                value={account ? account.toString().replace(/^0+/, '') : '0'} // Removes leading zeros (e.g. 00123 -> 123
-              />
-            </div>
-          </div>
+                      const value = Number(e.target.value);
+                      const valueLength = e.target.value.replace(/^0+/, '').length;
+
+                      if (value > MAX_INDEX || valueLength > MAX_INDEX.toString().length) {
+                        return;
+                      }
+                      handleChange(value);
+                    }}
+                    style={{ width: `${inputCharWidth}ch` }}
+                    value={account ? account.toString().replace(/^0+/, '') : '0'} // Removes leading zeros (e.g. 00123 -> 123
+                  />
+                </div>
+              </div>
+            </>
+          )}
         </label>
       </div>
       <Button
@@ -138,7 +145,7 @@ export const AccountSwitcher = ({
         disabled={!nextButtonEnabled}
       >
         <ArrowRightIcon
-          aria-label='Next account'
+          aria-label='Next sub-account'
           role='button'
           onClick={handleClickNext}
           className={cn(compact ? 'size-4' : 'size-6', 'hover:cursor-pointer')}

diff --git a/packages/ui-deprecated/components/ui/address-view/index.tsx b/packages/ui-deprecated/components/ui/address-view/index.tsx
@@ -24,22 +24,21 @@ export const AddressViewComponent = ({ view, copyable }: AddressViewProps) => {
     view.addressView.case === 'decoded'
       ? !view.addressView.value.index?.randomizer.every(v => v === 0) // Randomized (and thus, a one-time address) if the randomizer is not all zeros.
       : undefined;
-
-  const addressIndexLabel = isOneTimeAddress ? 'IBC Deposit Address for Account #' : 'Account #';
-
   const isCopyable = isOneTimeAddress ? false : (copyable ?? true);
 
+  const accountIndexLabel = accountIndex === 0 ? 'Main Account' : `Sub-Account #${accountIndex}`;
+  const addressIndexLabel = isOneTimeAddress
+    ? `IBC Deposit Address for ${accountIndexLabel}`
+    : accountIndexLabel;
+
   return (
     <div className='flex items-center gap-2 overflow-hidden'>
       {accountIndex !== undefined ? (
         <>
           <div className='shrink-0'>
             <AddressIcon address={view.addressView.value.address} size={14} />
           </div>
-          <span className='break-keep font-bold'>
-            {addressIndexLabel}
-            {accountIndex}
-          </span>
+          <span className='break-keep font-bold'>{addressIndexLabel}</span>
         </>
       ) : (
         <AddressComponent address={view.addressView.value.address} />