From 3cee4e992296dd326d2cb67a0f90ea1762a3bfff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rui=20Sim=C3=A3o?= Date: Tue, 16 May 2023 14:17:07 +0100 Subject: [PATCH 1/2] fix: fund wallet links --- src/components/FundWallet/FundWallet.tsx | 7 +++- src/components/FundWallet/use-entities.tsx | 42 ++++++++++++---------- src/config/links.ts | 11 +----- src/utils/constants/links.ts | 16 ++++++++- 4 files changed, 45 insertions(+), 31 deletions(-) diff --git a/src/components/FundWallet/FundWallet.tsx b/src/components/FundWallet/FundWallet.tsx index 08be16e11e..5dc156e1ad 100644 --- a/src/components/FundWallet/FundWallet.tsx +++ b/src/components/FundWallet/FundWallet.tsx @@ -58,7 +58,12 @@ const FundWallet = forwardRef( {description} {entities.map((entity, key) => ( - + {entity.icon} ))} diff --git a/src/components/FundWallet/use-entities.tsx b/src/components/FundWallet/use-entities.tsx index 38915363d7..e189dba8c6 100644 --- a/src/components/FundWallet/use-entities.tsx +++ b/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.getRelayChainAddress(), + [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: }, { - link: 'https://stellaswap.com/', + pathname: 'https://stellaswap.com/', icon: }, { - link: 'https://trade.kraken.com/charts/KRAKEN:INTR-USD', + pathname: 'https://trade.kraken.com/charts/KRAKEN:INTR-USD', icon: }, { - link: 'https://www.gate.io/trade/INTR_USDT', + pathname: 'https://www.gate.io/trade/INTR_USDT', icon: }, { - link: 'https://www.mexc.com/exchange/INTR_USDT', + pathname: 'https://www.mexc.com/exchange/INTR_USDT', icon: }, { - link: 'https://www.lbank.info/exchange/intr/usdt', + pathname: 'https://www.lbank.info/exchange/intr/usdt', icon: } ]; - const payments = [{ link: banxaLink, icon: banxa }]; + const payments = [ + { + ...banxaLink, + icon: 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: }, { - link: 'https://www.gate.io/de/trade/kint_usdt', + pathname: 'https://www.gate.io/de/trade/kint_usdt', icon: }, { - link: 'https://dex.zenlink.pro/#/swap', + pathname: 'https://dex.zenlink.pro/#/swap', icon: }, { - link: 'https://www.mexc.com/de-DE/exchange/KINT_USDT', + pathname: 'https://www.mexc.com/de-DE/exchange/KINT_USDT', icon: } ]; - const payments = [{ link: banxaLink, icon: banxa }]; + const payments = [{ ...banxaLink, icon: banxa }]; return { exchanges, diff --git a/src/config/links.ts b/src/config/links.ts index 7e5ed0781d..8f1d7557b1 100644 --- a/src/config/links.ts +++ b/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 }; diff --git a/src/utils/constants/links.ts b/src/utils/constants/links.ts index 852612b127..7c64f49388 100644 --- a/src/utils/constants/links.ts +++ b/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 }; From d9d50f8c312bc75103365f1a56389b5c5cfc77a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rui=20Sim=C3=A3o?= Date: Tue, 16 May 2023 15:31:38 +0100 Subject: [PATCH 2/2] fix: code review --- src/components/FundWallet/use-entities.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FundWallet/use-entities.tsx b/src/components/FundWallet/use-entities.tsx index e189dba8c6..afb4868502 100644 --- a/src/components/FundWallet/use-entities.tsx +++ b/src/components/FundWallet/use-entities.tsx @@ -30,7 +30,7 @@ const useEntities = (): UseEntitiesResult => { const banxaLink = { pathname: EXTERNAL_PAGES.BANXA, search: queryString.stringify({ - [EXTERNAL_QUERY_PARAMETERS.BANXA.WALLET_ADDRESS]: wallet.getRelayChainAddress(), + [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 })