Support Banxa on Interlay (#1458)

* refactor: remove redundant env variable and UI component

* refactor: remove redundant URL parameter

* update translation file

* revert change to wallet parameter

* update translation parameter

* fix: missed file save

.env.dev

@@ -1,6 +1,5 @@
 
 /* FEATURE FLAGS */
-REACT_APP_FEATURE_FLAG_BANXA=enabled
 REACT_APP_FEATURE_FLAG_STRATEGIES=enabled
 REACT_APP_FEATURE_FLAG_ONBOARDING=enabled
 

src/assets/locales/en/translation.json

@@ -632,10 +632,10 @@
   },
   "fund_wallet_modal": {
     "buy": "Buy",
-    "buy_via_banxa": "Purchase KINT via Banxa.",
+    "buy_via_banxa": "Purchase {{ticker}} via Banxa.",
     "banxa_leading_solution": "Banxa is the leading global Web3 on-and-off ramp solution.",
     "exchange": "Exchange",
-    "please_check_terms": "Please check the individual terms and conditions of each exchange before you buy / trade {{token}}."
+    "please_check_terms": "Please check the individual terms and conditions of each exchange before you buy / trade {{ticker}}."
   },
   "wallet": {
     "available_assets": "Available assets",

src/components/FundWallet/FundWallet.tsx

@@ -20,7 +20,7 @@ const getData = (method: FundWalletMethod, entities: UseEntitiesResult, t: TFunc
       title: t('fund_wallet_modal.buy'),
       description: (
         <Flex direction='column' gap='spacing1'>
-          <P color='tertiary'>{t('fund_wallet_modal.buy_via_banxa')}</P>
+          <P color='tertiary'>{t('fund_wallet_modal.buy_via_banxa', { ticker: GOVERNANCE_TOKEN.ticker })}</P>
           <P color='tertiary'>{t('fund_wallet_modal.banxa_leading_solution')}</P>
         </Flex>
       ),
@@ -29,7 +29,7 @@ const getData = (method: FundWalletMethod, entities: UseEntitiesResult, t: TFunc
     exchange: {
       title: t('fund_wallet_modal.exchange'),
       description: (
-        <P color='tertiary'>{t('fund_wallet_modal.please_check_terms', { token: GOVERNANCE_TOKEN.ticker })}</P>
+        <P color='tertiary'>{t('fund_wallet_modal.please_check_terms', { ticker: GOVERNANCE_TOKEN.ticker })}</P>
       ),
       entities: entities.exchanges
     }

src/config/links.ts

@@ -21,7 +21,7 @@ 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 INTERLAY_WHITEPAPPER = 'https://gateway.pinata.cloud/ipfs/QmWp62gdLssFpAoG2JqK8sy3m3rTRUa8LyzoSY8ZFisYNB';
 
-const BANXA_LINK = 'http://talisman.banxa.com/';
+const BANXA_LINK = 'http://checkout.banxa.com/';
 
 const GEOBLOCK_API_ENDPOINT = '/check_access';
 const GEOBLOCK_REDIRECTION_LINK = 'https://www.interlay.io/geoblock';

src/parts/Topbar/index.tsx

@@ -23,10 +23,8 @@ import { BitcoinNetwork } from '@/types/bitcoin';
 import { POLKADOT } from '@/utils/constants/relay-chain-names';
 import { NotificationToastType, useNotifications } from '@/utils/context/Notifications';
 import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances';
-import { FeatureFlags, useFeatureFlag } from '@/utils/hooks/use-feature-flag';
 import { useSignMessage } from '@/utils/hooks/use-sign-message';
 
-import GetGovernanceTokenUI from './GetGovernanceTokenUI';
 import ManualIssueExecutionActionsBadge from './ManualIssueExecutionActionsBadge';
 
 const SMALL_SIZE_BUTTON_CLASSES = clsx('leading-7', '!px-3');
@@ -36,7 +34,6 @@ const Topbar = (): JSX.Element => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const { getAvailableBalance } = useGetBalances();
-  const isBanxaEnabled = useFeatureFlag(FeatureFlags.BANXA);
   const { setSelectedAccount, removeSelectedAccount } = useSubstrate();
   const { selectProps } = useSignMessage();
   const notifications = useNotifications();
@@ -109,7 +106,7 @@ const Topbar = (): JSX.Element => {
     <>
       <div className={clsx('p-4', 'flex', 'items-center', 'justify-end', 'space-x-2')}>
         <ManualIssueExecutionActionsBadge />
-        {isBanxaEnabled ? <FundWallet /> : <GetGovernanceTokenUI className={SMALL_SIZE_BUTTON_CLASSES} />}
+        <FundWallet />
         {selectedAccount !== undefined && (
           <>
             {process.env.REACT_APP_FAUCET_URL && governanceTokenBalanceIsZero && (

src/utils/hooks/use-feature-flag.ts

@@ -1,12 +1,10 @@
 enum FeatureFlags {
-  BANXA = 'banxa',
   STRATEGIES = 'strategies',
   GEOBLOCK = 'geoblock',
   ONBOARDING = 'onboarding'
 }
 
 const featureFlags: Record<FeatureFlags, string | undefined> = {
-  [FeatureFlags.BANXA]: process.env.REACT_APP_FEATURE_FLAG_BANXA,
   [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES,
   [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK,
   [FeatureFlags.ONBOARDING]: process.env.REACT_APP_FEATURE_FLAG_ONBOARDING