refactor: swap asset list display name, closes #4421

src/app/common/utils.ts

@@ -299,3 +299,11 @@ interface LinearInterpolation {
 export function linearInterpolation({ start, end, t }: LinearInterpolation) {
   return (1 - t) * start + t * end;
 }
+
+export function removeTrailingNullCharacters(s: string) {
+  return s.replace(/\0*$/g, '');
+}
+
+export function removeMinusSign(value: string) {
+  return value.replace('-', '');
+}

src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-receive-totals.tsx

@@ -1,8 +1,7 @@
 import { truncateMiddle } from '@stacks/ui-utils';
 
-import { removeMinusSign } from '@shared/utils';
-
 import { formatMoney, i18nFormatCurrency } from '@app/common/money/format-money';
+import { removeMinusSign } from '@app/common/utils';
 import { usePsbtSignerContext } from '@app/features/psbt-signer/psbt-signer.context';
 import { useCalculateBitcoinFiatValue } from '@app/query/common/market-data/market-data.hooks';
 

src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-transaction-summary.ts

@@ -11,14 +11,14 @@ import BigNumber from 'bignumber.js';
 
 import { CryptoCurrencies } from '@shared/models/currencies.model';
 import { createMoney } from '@shared/models/money.model';
-import { removeTrailingNullCharacters } from '@shared/utils';
 
 import {
   baseCurrencyAmountInQuote,
   convertToMoneyTypeWithDefaultOfZero,
 } from '@app/common/money/calculate-money';
 import { formatMoney, i18nFormatCurrency } from '@app/common/money/format-money';
 import { getEstimatedConfirmationTime } from '@app/common/transactions/stacks/transaction.utils';
+import { removeTrailingNullCharacters } from '@app/common/utils';
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
 import { useStacksBlockTime } from '@app/query/stacks/info/info.hooks';
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';

src/app/pages/swap/hooks/use-alex-swap.tsx

@@ -9,6 +9,7 @@ import { createMoney } from '@shared/models/money.model';
 
 import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
 import { convertAmountToFractionalUnit } from '@app/common/money/calculate-money';
+import { pullContractIdFromIdentity } from '@app/common/utils';
 import { useSwappableCurrencyQuery } from '@app/query/common/alex-swaps/swappable-currency.query';
 import { useTransferableStacksFungibleTokenAssetBalances } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
@@ -46,25 +47,27 @@ export function useAlexSwap() {
         icon: tokenInfo.icon,
         name: tokenInfo.name,
         price: createMoney(price, 'USD'),
+        principal: pullContractIdFromIdentity(tokenInfo.contractAddress),
       };
 
       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(

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 {

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">

src/shared/utils.ts

@@ -70,11 +70,3 @@ export function closeWindow() {
   // eslint-disable-next-line no-restricted-properties
   window.close();
 }
-
-export function removeTrailingNullCharacters(s: string) {
-  return s.replace(/\0*$/g, '');
-}
-
-export function removeMinusSign(value: string) {
-  return value.replace('-', '');
-}