diff --git a/src/config/links.ts b/src/config/links.ts index f4d6699528..d5b7affca1 100644 --- a/src/config/links.ts +++ b/src/config/links.ts @@ -28,8 +28,11 @@ const GEOBLOCK_REDIRECTION_LINK = 'https://www.interlay.io/geoblock'; const FORMS_STRATEGIES_LINK = 'https://forms.gle/Ue7NQ81j2u5oNDey6'; +const BIFROST_SWAP_LINK = 'https://bifrost.app/swap'; + export { BANXA_LINK, + BIFROST_SWAP_LINK, FORMS_STRATEGIES_LINK, GEOBLOCK_API_ENDPOINT, GEOBLOCK_REDIRECTION_LINK, diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx index 7aec2bbd23..aa52542d17 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx @@ -6,24 +6,30 @@ import { useDispatch } from 'react-redux'; import { showBuyModal } from '@/common/actions/general.actions'; import { CTA, CTALink, CTAProps, Divider, Flex, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; +import { BIFROST_SWAP_LINK } from '@/config/links'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; import { Transaction, useTransaction } from '@/hooks/transaction'; import { usePageQueryParams } from '@/hooks/use-page-query-params'; +import { BIFROST_RELAY_CHAIN_NATIVE_TOKEN } from '@/utils/constants/currency'; import { PAGES, QUERY_PARAMETERS, QUERY_PARAMETERS_VALUES } from '@/utils/constants/links'; +const EXTERNAL_SWAP_LINKS = { + [BIFROST_RELAY_CHAIN_NATIVE_TOKEN]: BIFROST_SWAP_LINK +}; + type ActionsCellProps = { currency: CurrencyExt; isWrappedToken: boolean; isRedeemable: boolean; - isPooledAsset: boolean; isGovernanceToken: boolean; isVestingClaimable: boolean; + swappableToken?: 'internal' | 'external'; }; const ActionsCell = ({ currency, + swappableToken, isGovernanceToken, - isPooledAsset, isRedeemable, isVestingClaimable, isWrappedToken @@ -76,7 +82,7 @@ const ActionsCell = ({ {t('redeem')} )} - {isPooledAsset && ( + {swappableToken === 'internal' ? ( {t('amm.swap')} - )} + ) : swappableToken === 'external' ? ( + + {t('amm.swap')} + + ) : undefined} {isGovernanceToken && ( <> @@ -118,5 +128,5 @@ const ActionsCell = ({ ); }; -export { ActionsCell }; +export { ActionsCell, EXTERNAL_SWAP_LINKS }; export type { ActionsCellProps }; diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx index 96a9548a34..1fbfcbe7e9 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx @@ -17,7 +17,7 @@ import { EXTERNAL_QUERY_PARAMETERS } from '@/utils/constants/links'; import { getCoinIconProps } from '@/utils/helpers/coin-icon'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { ActionsCell } from './ActionsCell'; +import { ActionsCell, EXTERNAL_SWAP_LINKS } from './ActionsCell'; const queryString = require('query-string'); @@ -102,15 +102,19 @@ const AvailableAssetsTable = ({ balances, pooledTickers }: AvailableAssetsTableP const isWrappedToken = isCurrencyEqual(currency, WRAPPED_TOKEN); const isRedeemable = isWrappedToken && !transferable.isZero(); - const isPooledAsset = !!pooledTickers?.has(currency.ticker); + const swappableToken = pooledTickers?.has(currency.ticker) + ? 'internal' + : Object.keys(EXTERNAL_SWAP_LINKS).includes(currency.ticker) + ? 'external' + : undefined; const isGovernanceToken = isCurrencyEqual(currency, GOVERNANCE_TOKEN); const isVestingClaimable = isGovernanceToken && !!vestingData?.isClaimable; - const hasActions = isRedeemable || isPooledAsset || isVestingClaimable; + const hasActions = isRedeemable || !!swappableToken || isVestingClaimable; const actions = hasActions ? ( = - process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT ? [Polkadot, InterBtc, Interlay] : [KBtc, Kintsugi, Kusama]; +const NATIVE_CURRENCIES: Array = isPolkadotChain + ? [Polkadot, InterBtc, Interlay] + : [KBtc, Kintsugi, Kusama]; const FEE_TICKERS = [...NATIVE_CURRENCIES.map(({ ticker }) => ticker), 'USDT']; +const BIFROST_RELAY_CHAIN_NATIVE_TOKEN = isPolkadotChain ? 'VDOT' : 'VKSM'; + const COINGECKO_ID_BY_CURRENCY_TICKER: Record = Object.freeze({ [Bitcoin.ticker]: 'bitcoin', [Kintsugi.ticker]: 'kintsugi', @@ -34,6 +39,7 @@ const COINGECKO_ID_BY_CURRENCY_TICKER: Record