Remove redundant icons in ui (#621)

penumbra-zone · Feb 28, 2024 · 408a402 · 408a402
1 parent 18e6071
commit 408a402
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 deletions.
diff --git a/apps/webapp/src/components/shared/input-token.tsx b/apps/webapp/src/components/shared/input-token.tsx
@@ -50,7 +50,7 @@ export default function InputToken({
       <div className='mt-[6px] flex items-center justify-between gap-2'>
         <div className='flex items-start gap-1 truncate'>
           <img src='./wallet.svg' alt='Wallet' className='size-5' />
-          <ValueViewComponent view={selection?.value} />
+          <ValueViewComponent view={selection?.value} showIcon={false} />
         </div>
       </div>
     </InputBlock>

diff --git a/apps/webapp/src/components/shared/select-token-modal.tsx b/apps/webapp/src/components/shared/select-token-modal.tsx
@@ -57,15 +57,13 @@ export default function SelectTokenModal({
             </div>
           </div>
           <div className='flex shrink flex-col gap-4 overflow-auto px-[30px]'>
-            <div className='mt-2 grid grid-cols-3 font-headline text-base font-semibold'>
+            <div className='mt-2 grid grid-cols-2 font-headline text-base font-semibold'>
               <p className='flex justify-start'>Account</p>
-              <p className='flex justify-start'>Token name</p>
-              <p className='flex justify-end'>Balance</p>
+              <p className='flex justify-start'>Asset</p>
             </div>
             <div className='flex flex-col gap-2'>
               {balances.map((b, i) => {
                 const index = getAddressIndex(b.address).account;
-                const metadata = getMetadata.optional()(b.value);
 
                 return (
                   <div key={i} className='flex flex-col'>
@@ -80,12 +78,8 @@ export default function SelectTokenModal({
                         onClick={() => setSelection(b)}
                       >
                         <p className='flex justify-start'>{index}</p>
-                        <div className='flex justify-start gap-[6px]'>
-                          {metadata && <AssetIcon metadata={metadata} />}
-                          <p className='truncate'>{getDisplayDenomFromView(b.value)}</p>
-                        </div>
-                        <div className='flex justify-end'>
-                          <ValueViewComponent view={b.value} showDenom={false} />
+                        <div className='flex justify-start'>
+                          <ValueViewComponent view={b.value} />
                         </div>
                       </div>
                     </DialogClose>

diff --git a/apps/webapp/src/components/swap/asset-out-box.tsx b/apps/webapp/src/components/swap/asset-out-box.tsx
@@ -16,17 +16,26 @@ import {
 import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/tx/view/value';
 import { groupByAsset } from '../../fetchers/balances/by-asset';
 import { cn } from '@penumbra-zone/ui/lib/utils';
+import { Amount } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/num/v1/num_pb';
 
 const findMatchingBalance = (
-  denom: Metadata | undefined,
+  metadata: Metadata | undefined,
   balances: AssetBalance[],
 ): ValueView | undefined => {
-  if (!denom?.penumbraAssetId) return undefined;
+  if (!metadata?.penumbraAssetId) return undefined;
 
-  return balances.reduce(groupByAsset, []).find(v => {
+  const foundMatch = balances.reduce(groupByAsset, []).find(v => {
     if (v.valueView.case !== 'knownAssetId') return false;
-    return v.valueView.value.metadata?.penumbraAssetId?.equals(denom.penumbraAssetId);
+    return v.valueView.value.metadata?.penumbraAssetId?.equals(metadata.penumbraAssetId);
   });
+
+  if (!foundMatch) {
+    return new ValueView({
+      valueView: { case: 'knownAssetId', value: { metadata, amount: new Amount() } },
+    });
+  }
+
+  return foundMatch;
 };
 
 interface AssetOutBoxProps {
@@ -45,7 +54,7 @@ export const AssetOutBox = ({ balances }: AssetOutBoxProps) => {
       </div>
       <div className='flex items-center justify-between gap-4'>
         {simulateOutResult ? (
-          <ValueViewComponent view={simulateOutResult} showDenom={false} />
+          <ValueViewComponent view={simulateOutResult} showDenom={false} showIcon={false} />
         ) : (
           <EstimateButton simulateFn={simulateSwap} />
         )}
@@ -55,7 +64,7 @@ export const AssetOutBox = ({ balances }: AssetOutBoxProps) => {
         <div />
         <div className='flex items-start gap-1'>
           <img src='./wallet.svg' alt='Wallet' className='size-5' />
-          {matchingBalance && <ValueViewComponent view={matchingBalance} />}
+          <ValueViewComponent view={matchingBalance} showIcon={false} />
         </div>
       </div>
     </div>

diff --git a/apps/webapp/src/components/swap/asset-out-selector.tsx b/apps/webapp/src/components/swap/asset-out-selector.tsx
@@ -15,9 +15,11 @@ export const AssetOutSelector = ({ balances, setAssetOut, assetOut }: AssetOutSe
   return (
     <Dialog>
       <DialogTrigger disabled={!balances.length}>
-        <div className='flex h-9 min-w-[100px] items-center justify-center gap-2 rounded-lg bg-light-brown px-2'>
+        <div className='flex h-9 min-w-[100px] max-w-[150px] items-center justify-center gap-2 rounded-lg bg-light-brown px-2'>
           {assetOut?.display && <AssetIcon metadata={assetOut} />}
-          <p className='font-bold text-light-grey md:text-sm xl:text-base'>{assetOut?.display}</p>
+          <p className='truncate font-bold text-light-grey md:text-sm xl:text-base'>
+            {assetOut?.display}
+          </p>
         </div>
       </DialogTrigger>
       <DialogContent className='max-w-[312px] bg-charcoal-secondary md:max-w-[400px]'>
@@ -29,7 +31,7 @@ export const AssetOutSelector = ({ balances, setAssetOut, assetOut }: AssetOutSe
                 <div key={d.display} className='flex flex-col'>
                   <DialogClose>
                     <div
-                      className='grid cursor-pointer grid-cols-3 py-[10px] font-bold text-muted-foreground hover:-mx-4 hover:bg-light-brown hover:px-4'
+                      className='grid cursor-pointer break-all py-[10px] font-bold text-muted-foreground hover:-mx-4 hover:bg-light-brown hover:px-4'
                       onClick={() => setAssetOut(d)}
                     >
                       <div className='flex justify-start gap-[6px]'>