refactor FundWalletContent

pendulum-chain · Oct 22, 2024 · 37c26b4 · 37c26b4
1 parent 8b732d9
commit 37c26b4
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 113 deletions.
diff --git a/src/pages/fund-wallet/FundWalletTabsContent/FundWalletTabsContentCard/index.tsx b/src/pages/fund-wallet/FundWalletTabsContent/FundWalletTabsContentCard/index.tsx
diff --git a/src/pages/fund-wallet/FundWalletTabsContent/helpers.tsx b/src/pages/fund-wallet/FundWalletTabsContent/helpers.tsx
@@ -0,0 +1,80 @@
+import banxaIcon from '../../../assets/exchange/banxa-gradient.png';
+import mexcIcon from '../../../assets/exchange/mexc.svg';
+import zenlinkIcon from '../../../assets/exchange/zenlink.svg';
+import zenlinkDarkIcon from '../../../assets/exchange/zenlink-dark-mode.svg';
+import stellaswapIcon from '../../../assets/exchange/stellaswap.svg';
+import alchemyPayIcon from '../../../assets/alchemypay.svg';
+import { config } from '../../../config';
+
+import { TenantName } from '../../../models/Tenant';
+import { CardExternalLinkProps } from '../../../components/CardExternalLink';
+
+import { FundWalletTab } from '..';
+
+type FundSupportedTenants = Exclude<TenantName, TenantName.Foucoco | TenantName.Local>;
+
+const EXCHANGE_LIST: Record<FundSupportedTenants, { buy: CardExternalLinkProps[]; exchange: CardExternalLinkProps[] }> =
+  {
+    pendulum: {
+      buy: [
+        {
+          title: 'AlchemyPay',
+          children: <img src={alchemyPayIcon} className="ml-6 w-40" />,
+          href: config.alchemyPay.encodeUrlWithRedirection(config.alchemyPay.prodUrl, window.location.href),
+        },
+      ],
+      exchange: [
+        {
+          title: 'MEXC',
+          children: <img src={mexcIcon} className="ml-6 w-40" />,
+          href: 'https://www.mexc.com/exchange/PEN_USDT',
+        },
+        {
+          title: 'StellaSwap',
+          children: <img src={stellaswapIcon} className="ml-6 w-40" />,
+          href: 'https://app.stellaswap.com/exchange/swap',
+        },
+        {
+          title: 'Zenlink',
+          children: <img src={zenlinkIcon} className="ml-6 w-40" />,
+          href: 'https://app.zenlink.pro/swap',
+        },
+        {
+          title: 'Banxa',
+          children: <img src={banxaIcon} className="ml-2 w-40" />,
+          href: 'https://checkout.banxa.com/',
+        },
+      ],
+    },
+    amplitude: {
+      buy: [],
+      exchange: [
+        {
+          title: 'Zenlink',
+          children: <img src={zenlinkDarkIcon} className="ml-6 w-40" />,
+          href: 'https://app.zenlink.pro/swap',
+        },
+      ],
+    },
+  };
+
+export function getExchangeList(tenantName: FundSupportedTenants, activeTab: FundWalletTab) {
+  return EXCHANGE_LIST[tenantName][activeTab];
+}
+
+const BuyingTextMap: Record<FundSupportedTenants, string> = {
+  [TenantName.Amplitude]: 'Currently no options available, try Exchange!',
+  [TenantName.Pendulum]:
+    'Purchase PEN through AlchemyPay, a payment system that enables users to easily buy cryptocurrencies using traditional payment methods such as credit cards, bank transfers, or mobile wallets.',
+};
+
+const ExchangeTextMap: Record<FundSupportedTenants, string> = {
+  [TenantName.Amplitude]:
+    'Before buying or trading AMPE, make sure to review the specific terms and conditions of each exchange.',
+  [TenantName.Pendulum]:
+    'Before buying or trading PEN, make sure to review the specific terms and conditions of each exchange.',
+};
+
+export function getActiveText(tenantName: FundSupportedTenants, activeTab: FundWalletTab) {
+  return activeTab === FundWalletTab.Buy ? BuyingTextMap[tenantName] : ExchangeTextMap[tenantName];
+}
diff --git a/src/pages/fund-wallet/FundWalletTabsContent/index.tsx b/src/pages/fund-wallet/FundWalletTabsContent/index.tsx
@@ -1,101 +1,30 @@
 import { useGlobalState } from '../../../GlobalStateProvider';
 import { TenantName } from '../../../models/Tenant';
-
-import banxaIcon from '../../../assets/exchange/banxa-gradient.png';
-import mexcIcon from '../../../assets/exchange/mexc.svg';
-import zenlinkIcon from '../../../assets/exchange/zenlink.svg';
-import zenlinkDarkIcon from '../../../assets/exchange/zenlink-dark-mode.svg';
-import stellaswapIcon from '../../../assets/exchange/stellaswap.svg';
-import alchemyPayIcon from '../../../assets/alchemypay.svg';
-import { config } from '../../../config';
+import { CardExternalLink } from '../../../components/CardExternalLink';
 
 import { FundWalletTab } from '..';
-import { FundWalletTabsContentCard, FundWalletTabsContentCardProps } from './FundWalletTabsContentCard';
-
-type CardDetail = Omit<FundWalletTabsContentCardProps, 'tenantName'>;
-type FundSupportedTenants = Exclude<TenantName, TenantName.Foucoco | TenantName.Local>;
-
-const CARD_DATA: Record<FundSupportedTenants, { buy: CardDetail[]; exchange: CardDetail[] }> = {
-  pendulum: {
-    buy: [
-      {
-        title: 'AlchemyPay',
-        image: <img src={alchemyPayIcon} className="ml-6 w-40" />,
-        href: config.alchemyPay.encodeUrlWithRedirection(config.alchemyPay.prodUrl, window.location.href),
-      },
-    ],
-    exchange: [
-      {
-        title: 'MEXC',
-        image: <img src={mexcIcon} className="ml-6 w-40" />,
-        href: 'https://www.mexc.com/exchange/PEN_USDT',
-      },
-      {
-        title: 'StellaSwap',
-        image: <img src={stellaswapIcon} className="ml-6 w-40" />,
-        href: 'https://app.stellaswap.com/exchange/swap',
-      },
-      {
-        title: 'Zenlink',
-        image: <img src={zenlinkIcon} className="ml-6 w-40" />,
-        href: 'https://app.zenlink.pro/swap',
-      },
-      {
-        title: 'Banxa',
-        image: <img src={banxaIcon} className="ml-2 w-40" />,
-        href: 'https://checkout.banxa.com/',
-      },
-    ],
-  },
-  amplitude: {
-    buy: [],
-    exchange: [
-      {
-        title: 'Zenlink',
-        image: <img src={zenlinkDarkIcon} className="ml-6 w-40" />,
-        href: 'https://app.zenlink.pro/swap',
-      },
-    ],
-  },
-};
+import { getActiveText, getExchangeList } from './helpers';
 
 interface FundWalletTabsContentProps {
   activeTab: FundWalletTab;
 }
 
-const BuyingTextMap: Record<FundSupportedTenants, string> = {
-  [TenantName.Amplitude]: 'Currently no options available, try Exchange!',
-  [TenantName.Pendulum]:
-    'Purchase PEN through AlchemyPay, a payment system that enables users to easily buy cryptocurrencies using traditional payment methods such as credit cards, bank transfers, or mobile wallets.',
-};
-
-const ExchangeTextMap: Record<FundSupportedTenants, string> = {
-  [TenantName.Amplitude]:
-    'Before buying or trading AMPE, make sure to review the specific terms and conditions of each exchange.',
-  [TenantName.Pendulum]:
-    'Before buying or trading PEN, make sure to review the specific terms and conditions of each exchange.',
-};
-
 export function FundWalletTabsContent({ activeTab }: FundWalletTabsContentProps) {
   const { tenantName } = useGlobalState();
 
   if (tenantName === TenantName.Foucoco || tenantName === TenantName.Local) return <></>;
 
-  const BuyingText = BuyingTextMap[tenantName];
-  const ExchangeText = ExchangeTextMap[tenantName];
+  const activeText = getActiveText(tenantName, activeTab);
+  const exchangeList = getExchangeList(tenantName, activeTab);
 
   return (
     <div className="my-4 text-sm text-secondary-content">
-      {activeTab === FundWalletTab.Buy ? BuyingText : ExchangeText}
+      {activeText}
       <div className="mt-4">
-        {CARD_DATA[tenantName][activeTab].map((data, index) => (
-          <FundWalletTabsContentCard
-            key={index}
-            title={data.title}
-            image={data.image}
-            href={data.href}
-            tenantName={tenantName}
-          />
+        {exchangeList.map(({ title, href, children }) => (
+          <CardExternalLink key={title} title={title} href={href}>
+            {children}
+          </CardExternalLink>
         ))}
       </div>
     </div>