From 05276d67982d70fefa8b3a68bb93eec79e16e845 Mon Sep 17 00:00:00 2001
From: fbwoolf <fwoolf@blockstack.com>
Date: Wed, 8 Jun 2022 14:26:58 -0500
Subject: [PATCH] refactor: fund account tile

---
 config/wallet-config.json                     | 33 ++++++++++++-------
 .../fund/components/fiat-provider-item.tsx    | 19 +++++++++--
 .../fund/components/fiat-providers-list.tsx   |  1 +
 .../fund/components/fiat-providers.utils.ts   |  6 ++--
 .../query/hiro-config/hiro-config.query.ts    |  1 +
 5 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/config/wallet-config.json b/config/wallet-config.json
index 336e7ed5..a8b3e80b 100644
--- a/config/wallet-config.json
+++ b/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": {
diff --git a/src/app/pages/fund/components/fiat-provider-item.tsx b/src/app/pages/fund/components/fiat-provider-item.tsx
index 1b0b9865..4811222a 100644
--- a/src/app/pages/fund/components/fiat-provider-item.tsx
+++ b/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}
diff --git a/src/app/pages/fund/components/fiat-providers-list.tsx b/src/app/pages/fund/components/fiat-providers-list.tsx
index c65f287f..c34e2e02 100644
--- a/src/app/pages/fund/components/fiat-providers-list.tsx
+++ b/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}
           />
         );
diff --git a/src/app/pages/fund/components/fiat-providers.utils.ts b/src/app/pages/fund/components/fiat-providers.utils.ts
index 40ee4959..b7b1595f 100644
--- a/src/app/pages/fund/components/fiat-providers.utils.ts
+++ b/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);
   }
 }
diff --git a/src/app/query/hiro-config/hiro-config.query.ts b/src/app/query/hiro-config/hiro-config.query.ts
index fba1a8bf..dfc18261 100644
--- a/src/app/query/hiro-config/hiro-config.query.ts
+++ b/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 {