refactor: fund account tile

config/wallet-config.json

@@ -7,67 +7,78 @@
       "enabled": true,
       "hasFastCheckoutProcess": true,
       "name": "MoonPay",
-      "hasTradingFees": false
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": true
     },
     "transak": {
       "enabled": true,
       "hasFastCheckoutProcess": true,
       "name": "Transak",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": true
     },
     "okcoin": {
       "enabled": true,
       "hasFastCheckoutProcess": true,
       "name": "Okcoin",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": true
     },
     "binance": {
       "enabled": true,
       "hasFastCheckoutProcess": false,
       "name": "Binance",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": true
     },
     "blockchainCom": {
       "enabled": true,
       "hasFastCheckoutProcess": false,
       "name": "Blockchain.com",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": true
     },
     "byBit": {
       "enabled": true,
       "hasFastCheckoutProcess": false,
       "name": "ByBit",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": false
     },
     "coinbase": {
       "enabled": true,
       "hasFastCheckoutProcess": false,
       "name": "Coinbase",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": true
     },
     "cryptoCom": {
       "enabled": true,
       "hasFastCheckoutProcess": false,
       "name": "Crypto.com",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": true
     },
     "gateIo": {
       "enabled": true,
       "hasFastCheckoutProcess": false,
       "name": "Gate.io",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": false
     },
     "kuCoin": {
       "enabled": true,
       "hasFastCheckoutProcess": false,
       "name": "KuCoin",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": false
     },
     "okx": {
       "enabled": true,
       "hasFastCheckoutProcess": false,
       "name": "OKX",
-      "hasTradingFees": true
+      "hasTradingFees": true,
+      "hasUnitedStatesAvailability": false
     }
   },
   "feeEstimations": {

src/app/pages/fund/components/fiat-provider-item.tsx

@@ -4,17 +4,26 @@ import { FastCheckoutBadge } from './fast-checkout-badge';
 import { ZeroPercentFeesBadge } from './zero-percent-fees-badge';
 import { FundAccountTile } from './fund-account-tile';
 
-const description = 'Available in the US, South Korea, Europe and +33 countries';
+const availableInsideUnitedStatesDescription = 'Available in the US and other countries';
+const availableOutsideUnitedStatesDescription = 'Available outside the US and other countries';
 
 interface FiatProviderProps {
   icon: string;
   onGoToProvider(): void;
   hasFastCheckoutProcess: boolean;
   hasTradingFees: boolean;
+  hasUnitedStatesAvailability: boolean;
   title: string;
 }
 export const FiatProviderItem = (props: FiatProviderProps) => {
-  const { icon, onGoToProvider, hasFastCheckoutProcess, hasTradingFees, title } = props;
+  const {
+    icon,
+    onGoToProvider,
+    hasFastCheckoutProcess,
+    hasTradingFees,
+    hasUnitedStatesAvailability,
+    title,
+  } = props;
 
   const Attributes = (
     <>
@@ -26,7 +35,11 @@ export const FiatProviderItem = (props: FiatProviderProps) => {
   return (
     <FundAccountTile
       attributes={Attributes}
-      description={description}
+      description={
+        hasUnitedStatesAvailability
+          ? availableInsideUnitedStatesDescription
+          : availableOutsideUnitedStatesDescription
+      }
       icon={icon}
       onClickTile={onGoToProvider}
       testId={FundPageSelectors.FiatProviderItem}

src/app/pages/fund/components/fiat-providers-list.tsx

@@ -52,6 +52,7 @@ export const FiatProvidersList = (props: FiatProvidersProps) => {
             onGoToProvider={() => goToProviderExternalWebsite(providerValue.name, providerUrl)}
             hasFastCheckoutProcess={providerValue.hasFastCheckoutProcess}
             hasTradingFees={providerValue.hasTradingFees}
+            hasUnitedStatesAvailability={providerValue.hasUnitedStatesAvailability}
             title={providerValue.name}
           />
         );

src/app/pages/fund/components/fiat-providers.utils.ts

@@ -67,8 +67,8 @@ function makeTransakUrl(address: string) {
   )}&defaultPaymentMethod=credit_debit_card&walletAddress=${address}`;
 }
 
-function makeGenericExternalUrl(address: string, provider: string) {
-  return `https://hiro.so/wallet-faq/exchange-purchase?provider=${provider}&address=${address}`;
+function makeFiatProviderFaqUrl(address: string, provider: string) {
+  return `https://hiro.so/wallet-faq/how-do-i-buy-stx-from-an-exchange?provider=${provider}&address=${address}`;
 }
 
 export function getProviderUrl(address: string, providerKey: string, providerName: string) {
@@ -80,6 +80,6 @@ export function getProviderUrl(address: string, providerKey: string, providerNam
     case ActiveFiatProviders.Transak:
       return makeTransakUrl(address);
     default:
-      return makeGenericExternalUrl(address, providerName);
+      return makeFiatProviderFaqUrl(address, providerName);
   }
 }

src/app/query/hiro-config/hiro-config.query.ts

@@ -18,6 +18,7 @@ export interface ActiveFiatProvider {
   hasFastCheckoutProcess: boolean;
   name: string;
   hasTradingFees: boolean;
+  hasUnitedStatesAvailability: boolean;
 }
 
 interface FeeEstimationsConfig {