Merge pull request #1198 from interlay/rui/fix-banxa

fix: fund wallet links

src/components/FundWallet/FundWallet.tsx

@@ -58,7 +58,12 @@ const FundWallet = forwardRef<HTMLButtonElement, FundWalletProps>(
                       {description}
                       <StyledEntities>
                         {entities.map((entity, key) => (
-                          <StyledEntitiesItem key={key} target='_blank' rel='noopener noreferrer' to={entity.link}>
+                          <StyledEntitiesItem
+                            key={key}
+                            target='_blank'
+                            rel='noopener noreferrer'
+                            to={{ pathname: entity.pathname, search: entity.search }}
+                          >
                             {entity.icon}
                           </StyledEntitiesItem>
                         ))}

src/components/FundWallet/use-entities.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { LinkProps } from 'react-router-dom';
 
 import BANXA_INTERLAY from '@/assets/img/banxa-dark.png';
 import BANXA_KITNSUGI from '@/assets/img/banxa-white.png';
@@ -11,14 +10,14 @@ import { ReactComponent as MexcLogoForInterlayIcon } from '@/assets/img/exchange
 import { ReactComponent as MexcLogoForKintsugiIcon } from '@/assets/img/exchanges/mexc-logo-for-kintsugi.svg';
 import { ReactComponent as StellaSwapLogoIcon } from '@/assets/img/exchanges/stellaswap-logo.svg';
 import { ReactComponent as ZenlinkLogoIcon } from '@/assets/img/exchanges/zenlink-logo.svg';
-import { BANXA_LINK, LINK_QUERY_PARAMETERS } from '@/config/links';
 import { GOVERNANCE_TOKEN } from '@/config/relay-chains';
+import { EXTERNAL_PAGES, EXTERNAL_QUERY_PARAMETERS } from '@/utils/constants/links';
 import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names';
 import { useWallet } from '@/utils/hooks/use-wallet';
 
 const queryString = require('query-string');
 
-type FundWalletEntities = { link: LinkProps['to']; icon: ReactNode };
+type FundWalletEntities = { pathname: string; search?: string; icon: ReactNode };
 
 type UseEntitiesResult = {
   exchanges: FundWalletEntities[];
@@ -29,43 +28,48 @@ const useEntities = (): UseEntitiesResult => {
   const wallet = useWallet();
 
   const banxaLink = {
-    pathname: BANXA_LINK,
+    pathname: EXTERNAL_PAGES.BANXA,
     search: queryString.stringify({
-      [LINK_QUERY_PARAMETERS.BANXA.WALLET_ADDRESS]: wallet.getRelayChainAddress(),
-      [LINK_QUERY_PARAMETERS.BANXA.FIAT_TYPE]: 'EUR',
-      [LINK_QUERY_PARAMETERS.BANXA.COIN_TYPE]: GOVERNANCE_TOKEN.ticker
+      [EXTERNAL_QUERY_PARAMETERS.BANXA.WALLET_ADDRESS]: wallet.account?.toString(),
+      [EXTERNAL_QUERY_PARAMETERS.BANXA.FIAT_TYPE]: 'EUR',
+      [EXTERNAL_QUERY_PARAMETERS.BANXA.COIN_TYPE]: GOVERNANCE_TOKEN.ticker
     })
   };
 
   if (process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT) {
     const exchanges = [
       {
-        link: 'https://acala.network/',
+        pathname: 'https://acala.network/',
         icon: <AcalaLogoIcon width={122} height={48} />
       },
       {
-        link: 'https://stellaswap.com/',
+        pathname: 'https://stellaswap.com/',
         icon: <StellaSwapLogoIcon width={122} height={25} />
       },
       {
-        link: 'https://trade.kraken.com/charts/KRAKEN:INTR-USD',
+        pathname: 'https://trade.kraken.com/charts/KRAKEN:INTR-USD',
         icon: <KrakenLogoIcon width={122} height={20} />
       },
       {
-        link: 'https://www.gate.io/trade/INTR_USDT',
+        pathname: 'https://www.gate.io/trade/INTR_USDT',
         icon: <GateLogoIcon width={122} height={37} />
       },
       {
-        link: 'https://www.mexc.com/exchange/INTR_USDT',
+        pathname: 'https://www.mexc.com/exchange/INTR_USDT',
         icon: <MexcLogoForInterlayIcon width={148} height={18} />
       },
       {
-        link: 'https://www.lbank.info/exchange/intr/usdt',
+        pathname: 'https://www.lbank.info/exchange/intr/usdt',
         icon: <LbankLogoIcon width={117} height={22} />
       }
     ];
 
-    const payments = [{ link: banxaLink, icon: <img src={BANXA_INTERLAY} alt='banxa' /> }];
+    const payments = [
+      {
+        ...banxaLink,
+        icon: <img src={BANXA_INTERLAY} alt='banxa' />
+      }
+    ];
 
     return {
       exchanges,
@@ -74,24 +78,24 @@ const useEntities = (): UseEntitiesResult => {
   } else if (process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA) {
     const exchanges = [
       {
-        link: 'https://www.kraken.com/en-gb/prices/kint-kintsugi-price-chart/usd-us-dollar?interval=1m',
+        pathname: 'https://www.kraken.com/en-gb/prices/kint-kintsugi-price-chart/usd-us-dollar?interval=1m',
         icon: <KrakenLogoIcon width={122} height={20} />
       },
       {
-        link: 'https://www.gate.io/de/trade/kint_usdt',
+        pathname: 'https://www.gate.io/de/trade/kint_usdt',
         icon: <GateLogoIcon width={122} height={37} />
       },
       {
-        link: 'https://dex.zenlink.pro/#/swap',
+        pathname: 'https://dex.zenlink.pro/#/swap',
         icon: <ZenlinkLogoIcon width={119} height={35} />
       },
       {
-        link: 'https://www.mexc.com/de-DE/exchange/KINT_USDT',
+        pathname: 'https://www.mexc.com/de-DE/exchange/KINT_USDT',
         icon: <MexcLogoForKintsugiIcon width={167} height={21} />
       }
     ];
 
-    const payments = [{ link: banxaLink, icon: <img src={BANXA_KITNSUGI} alt='banxa' /> }];
+    const payments = [{ ...banxaLink, icon: <img src={BANXA_KITNSUGI} alt='banxa' /> }];
 
     return {
       exchanges,

src/config/links.ts

@@ -19,14 +19,6 @@ const KINTSUGI_SUBSCAN_LINK = 'https://kintsugi.subscan.io';
 const INTERLAY_VAULT_DOCS_LINK = 'https://docs.interlay.io/#/vault/overview';
 const INTERLAY_DOS_AND_DONTS_DOCS_LINK = 'https://docs.interlay.io/#/vault/installation?id=dos-and-donts';
 
-const LINK_QUERY_PARAMETERS = {
-  BANXA: {
-    WALLET_ADDRESS: 'walletAddress',
-    FIAT_TYPE: 'fiatType',
-    COIN_TYPE: 'coinType'
-  }
-};
-
 const BANXA_LINK = 'http://talisman.banxa.com/';
 
 export {
@@ -48,6 +40,5 @@ export {
   KINTSUGI_GOVERNANCE_LINK,
   KINTSUGI_SUBSCAN_LINK,
   KINTSUGI_TERMS_AND_CONDITIONS_LINK,
-  KINTSUGI_USE_WRAPPED_CURRENCY_LINK,
-  LINK_QUERY_PARAMETERS
+  KINTSUGI_USE_WRAPPED_CURRENCY_LINK
 };

src/utils/constants/links.ts

@@ -1,3 +1,5 @@
+import { BANXA_LINK } from '@/config/links';
+
 const URL_PARAMETERS = Object.freeze({
   VAULT: {
     ACCOUNT: 'vaultAccount',
@@ -32,6 +34,10 @@ const PAGES = Object.freeze({
   WALLET: '/wallet'
 });
 
+const EXTERNAL_PAGES = Object.freeze({
+  BANXA: `${BANXA_LINK}`
+});
+
 const QUERY_PARAMETERS = Object.freeze({
   TAB: 'tab',
   PAGE: 'page',
@@ -45,4 +51,12 @@ const QUERY_PARAMETERS = Object.freeze({
   }
 });
 
-export { PAGES, QUERY_PARAMETERS, URL_PARAMETERS };
+const EXTERNAL_QUERY_PARAMETERS = Object.freeze({
+  BANXA: {
+    WALLET_ADDRESS: 'walletAddress',
+    FIAT_TYPE: 'fiatType',
+    COIN_TYPE: 'coinType'
+  }
+});
+
+export { EXTERNAL_PAGES, EXTERNAL_QUERY_PARAMETERS, PAGES, QUERY_PARAMETERS, URL_PARAMETERS };