refactor: swap asset list display name, closes #4421

leather-io · Oct 27, 2023 · a5e86e4 · a5e86e4
1 parent c5cf61c
commit a5e86e4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/app/pages/swap/hooks/use-alex-swap.tsx b/src/app/pages/swap/hooks/use-alex-swap.tsx
@@ -46,25 +46,27 @@ export function useAlexSwap() {
         icon: tokenInfo.icon,
         name: tokenInfo.name,
         price: createMoney(price, 'USD'),
+        principal: tokenInfo.contractAddress.split('::')[0],
       };
 
       if (currency === Currency.STX) {
         return {
           ...swapAsset,
           balance: availableStxBalance,
+          displayName: 'Stacks',
         };
       }
 
       const fungibleTokenBalance =
-        stacksFtAssetBalances.find(x => alexSDK.getAddressFrom(currency) === x.asset.contractId)
+        stacksFtAssetBalances.find(x => tokenInfo.contractAddress === x.asset.contractId)
           ?.balance ?? createMoney(0, tokenInfo.name, tokenInfo.decimals);
 
       return {
         ...swapAsset,
         balance: fungibleTokenBalance,
       };
     },
-    [alexSDK, availableStxBalance, prices, stacksFtAssetBalances]
+    [availableStxBalance, prices, stacksFtAssetBalances]
   );
 
   async function fetchToAmount(

diff --git a/src/app/pages/swap/hooks/use-swap-form.tsx b/src/app/pages/swap/hooks/use-swap-form.tsx
@@ -13,9 +13,11 @@ import { useNextNonce } from '@app/query/stacks/nonce/account-nonces.hooks';
 export interface SwapAsset {
   balance: Money;
   currency: Currency;
+  displayName?: string;
   icon: string;
   name: string;
   price: Money;
+  principal: string;
 }
 
 export interface SwapFormValues extends StacksTransactionFormValues {

diff --git a/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx b/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
@@ -2,6 +2,8 @@ import { HStack, styled } from 'leather-styles/jsx';
 
 import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
 import { usePressable } from '@app/components/item-hover';
+import { useGetFungibleTokenMetadataQuery } from '@app/query/stacks/tokens/fungible-tokens/fungible-token-metadata.query';
+import { isFtAsset } from '@app/query/stacks/tokens/token-metadata.utils';
 
 import { useAlexSdkBalanceAsFiat } from '../../hooks/use-alex-sdk-fiat-price';
 import { SwapAsset } from '../../hooks/use-swap-form';
@@ -13,14 +15,18 @@ interface SwapAssetItemProps {
 export function SwapAssetItem({ asset }: SwapAssetItemProps) {
   const [component, bind] = usePressable(true);
   const balanceAsFiat = useAlexSdkBalanceAsFiat(asset.balance, asset.price);
+  const { data: ftMetadata } = useGetFungibleTokenMetadataQuery(asset.principal);
+
+  const ftMetadataName = ftMetadata && isFtAsset(ftMetadata) ? ftMetadata.name : asset.name;
+  const displayName = asset.displayName ?? ftMetadataName;
 
   return (
     <SwapAssetItemLayout
       icon={<styled.img src={asset.icon} width="40px" height="40px" alt="Swap asset" />}
       {...bind}
     >
       <HStack alignItems="center" justifyContent="space-between">
-        <styled.span textStyle="label.01">{asset.name}</styled.span>
+        <styled.span textStyle="label.01">{displayName}</styled.span>
         <styled.span textStyle="label.01">{formatMoneyWithoutSymbol(asset.balance)}</styled.span>
       </HStack>
       <HStack alignItems="center" justifyContent="space-between">