From 7c65fb35621a6988ea2d8c34f862640aad28f55e Mon Sep 17 00:00:00 2001 From: fbwoolf Date: Fri, 27 Oct 2023 14:10:49 -0500 Subject: [PATCH] refactor: swap asset list display name, closes #4421 --- src/app/common/utils.ts | 8 ++++++++ .../components/psbt-address-receive-totals.tsx | 3 +-- .../family/stacks/hooks/use-stacks-transaction-summary.ts | 2 +- src/app/pages/swap/hooks/use-alex-swap.tsx | 7 +++++-- src/app/pages/swap/hooks/use-swap-form.tsx | 2 ++ .../swap/swap-choose-asset/components/swap-asset-item.tsx | 8 +++++++- src/shared/utils.ts | 8 -------- 7 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/app/common/utils.ts b/src/app/common/utils.ts index a715451fe58..9c9c9779f09 100644 --- a/src/app/common/utils.ts +++ b/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('-', ''); +} diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-receive-totals.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-receive-totals.tsx index 77641c80c81..09933f8365f 100644 --- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-receive-totals.tsx +++ b/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'; diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-transaction-summary.ts b/src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-transaction-summary.ts index baed2213cf2..fd3c3c1aa7d 100644 --- a/src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-transaction-summary.ts +++ b/src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-transaction-summary.ts @@ -11,7 +11,6 @@ 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, @@ -19,6 +18,7 @@ import { } 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'; diff --git a/src/app/pages/swap/hooks/use-alex-swap.tsx b/src/app/pages/swap/hooks/use-alex-swap.tsx index eee4fdb2a2a..21f95a8bd08 100644 --- a/src/app/pages/swap/hooks/use-alex-swap.tsx +++ b/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,17 +47,19 @@ 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 { @@ -64,7 +67,7 @@ export function useAlexSwap() { 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 index b506650391b..f5604065e1a 100644 --- 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 index 42e4d9baea0..06b608c7194 100644 --- 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,6 +15,10 @@ 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 ( - {asset.name} + {displayName} {formatMoneyWithoutSymbol(asset.balance)} diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 1f14fb31521..5d525aaac8f 100644 --- a/src/shared/utils.ts +++ b/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('-', ''); -}