display token symbol in asset selector (#664)

* display token symbol in asset selector * Swap out selector as well --------- Co-authored-by: Gabe Rodriguez <[email protected]>
penumbra-zone · Mar 8, 2024 · c6581a2 · c6581a2
1 parent 6c91054
commit c6581a2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/apps/minifront/src/components/shared/select-token-modal.tsx b/apps/minifront/src/components/shared/select-token-modal.tsx
@@ -9,9 +9,8 @@ import {
   Input,
 } from '@penumbra-zone/ui';
 import { cn } from '@penumbra-zone/ui/lib/utils';
-import { AssetIcon } from '@penumbra-zone/ui/components/ui/tx/view/asset-icon';
 import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/tx/view/value';
-import { getAddressIndex, getDisplayDenomFromView, getMetadata } from '@penumbra-zone/getters';
+import { getAddressIndex } from '@penumbra-zone/getters';
 import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 
 interface SelectTokenModalProps {
@@ -27,17 +26,15 @@ export default function SelectTokenModal({
 }: SelectTokenModalProps) {
   const [search, setSearch] = useState('');
 
-  const displayDenom = getDisplayDenomFromView(selection?.balanceView);
-  const denomMetadata = getMetadata.optional()(selection?.balanceView);
-
   return (
     <Dialog>
       <DialogTrigger disabled={!balances.length}>
         <div className='flex h-9 min-w-[100px] max-w-[200px] items-center justify-center gap-2 rounded-lg bg-light-brown px-2'>
-          {denomMetadata && <AssetIcon metadata={denomMetadata} />}
-          <p className='shrink truncate font-bold text-light-grey md:text-sm xl:text-base'>
-            {displayDenom}
-          </p>
+          <ValueViewComponent
+            view={selection?.balanceView}
+            showValue={false}
+            showEquivalent={false}
+          />
         </div>
       </DialogTrigger>
       <DialogContent>

diff --git a/apps/minifront/src/components/swap/asset-out-box.tsx b/apps/minifront/src/components/swap/asset-out-box.tsx
@@ -58,7 +58,11 @@ export const AssetOutBox = ({ balances }: AssetOutBoxProps) => {
         ) : (
           <EstimateButton simulateFn={simulateSwap} />
         )}
-        <AssetOutSelector balances={balances} assetOut={assetOut} setAssetOut={setAssetOut} />
+        <AssetOutSelector
+          balances={balances}
+          assetOut={matchingBalance}
+          setAssetOut={setAssetOut}
+        />
       </div>
       <div className='mt-[6px] flex items-start justify-between'>
         <div />

diff --git a/apps/minifront/src/components/swap/asset-out-selector.tsx b/apps/minifront/src/components/swap/asset-out-selector.tsx
@@ -1,12 +1,16 @@
 import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTrigger } from '@penumbra-zone/ui';
 import { AssetIcon } from '@penumbra-zone/ui/components/ui/tx/view/asset-icon';
-import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
+import {
+  Metadata,
+  ValueView,
+} from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { localAssets } from '@penumbra-zone/constants';
 import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
+import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/tx/view/value';
 
 interface AssetOutSelectorProps {
   balances: BalancesResponse[];
-  assetOut: Metadata | undefined;
+  assetOut: ValueView | undefined;
   setAssetOut: (metadata: Metadata) => void;
 }
 
@@ -16,10 +20,7 @@ export const AssetOutSelector = ({ balances, setAssetOut, assetOut }: AssetOutSe
     <Dialog>
       <DialogTrigger disabled={!balances.length}>
         <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='truncate font-bold text-light-grey md:text-sm xl:text-base'>
-            {assetOut?.display}
-          </p>
+          <ValueViewComponent view={assetOut} showValue={false} showEquivalent={false} />
         </div>
       </DialogTrigger>
       <DialogContent>