feat(Wallet): add bitforst token swap link (#1594)

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,

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')}
           </CTALink>
         )}
-        {isPooledAsset && (
+        {swappableToken === 'internal' ? (
           <CTALink
             {...mergeProps(
               commonCTAProps,
@@ -88,7 +94,11 @@ const ActionsCell = ({
           >
             {t('amm.swap')}
           </CTALink>
-        )}
+        ) : swappableToken === 'external' ? (
+          <CTALink external {...mergeProps(commonCTAProps, { to: EXTERNAL_SWAP_LINKS[currency.ticker] })}>
+            {t('amm.swap')}
+          </CTALink>
+        ) : undefined}
         {isGovernanceToken && (
           <>
             <CTA {...commonCTAProps} onPress={handlePressBuyGovernance}>
@@ -118,5 +128,5 @@ const ActionsCell = ({
   );
 };
 
-export { ActionsCell };
+export { ActionsCell, EXTERNAL_SWAP_LINKS };
 export type { ActionsCellProps };

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 ? (
           <ActionsCell
-            isPooledAsset={isPooledAsset}
+            swappableToken={swappableToken}
             isRedeemable={isRedeemable}
             isGovernanceToken={isGovernanceToken}
             isWrappedToken={isWrappedToken}

src/utils/constants/currency.ts

@@ -17,12 +17,17 @@ import { POLKADOT } from './relay-chain-names';
 const ZERO_VOTE_GOVERNANCE_TOKEN_AMOUNT = newMonetaryAmount(0, VOTE_GOVERNANCE_TOKEN, true);
 const ZERO_GOVERNANCE_TOKEN_AMOUNT = newMonetaryAmount(0, GOVERNANCE_TOKEN, true);
 
+const isPolkadotChain = process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT;
+
 // TODO: Pull values in from lib, as we do with vault collaterals
-const NATIVE_CURRENCIES: Array<CurrencyExt> =
-  process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT ? [Polkadot, InterBtc, Interlay] : [KBtc, Kintsugi, Kusama];
+const NATIVE_CURRENCIES: Array<CurrencyExt> = 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<string, typeof COINGECKO_IDS[number]> = Object.freeze({
   [Bitcoin.ticker]: 'bitcoin',
   [Kintsugi.ticker]: 'kintsugi',
@@ -34,6 +39,7 @@ const COINGECKO_ID_BY_CURRENCY_TICKER: Record<string, typeof COINGECKO_IDS[numbe
 });
 
 export {
+  BIFROST_RELAY_CHAIN_NATIVE_TOKEN,
   COINGECKO_ID_BY_CURRENCY_TICKER,
   FEE_TICKERS,
   NATIVE_CURRENCIES,