TW-1096: Add new Alice-Bob exchange pairs

public/_locales/en/messages.json

@@ -2642,34 +2642,31 @@
   "enterCardNumber": {
     "message": "Enter card number"
   },
-  "onlyForUkrainianCards": {
-    "message": "Only for Ukrainian banking cards"
+  "onlyForCountryBankingCards": {
+    "message": "Only for $country$ banking cards",
+    "placeholders": {
+      "country": {
+        "content": "$1"
+      }
+    }
   },
   "buyWithCrypto": {
     "message": "Buy with Crypto"
   },
   "buyWithExolix": {
     "message": "Buy With Exolix"
   },
-  "buyWithExolixDescription": {
-    "message": "Exchange $number$ cryptocurrencies to TEZ or USDT Tezos instantly and without registration",
-    "placeholders": {
-      "number": {
-        "content": "$1"
-      }
-    }
-  },
   "buyWithRamp": {
     "message": "Buy With Ramp"
   },
   "buyWithRampDescription": {
     "message": "Buy TEZ  using Visa, Mastercard, and all major debit and credit cards. Ramp is available in 160+ countries and territories."
   },
   "sellWithAliceBob": {
-    "message": "Sell TEZ with Alice-Bob (UAH only)"
+    "message": "Sell TEZ with Alice-Bob"
   },
   "sellWithAliceBobDescription": {
-    "message": "Fast and cost-effective exchange of TEZ to UAH."
+    "message": "Fast and cost-effective exchange of TEZ."
   },
   "selectPaymentProvider": {
     "message": "Select payment provider"
@@ -2781,7 +2778,7 @@
     "message": "Sell TEZ details"
   },
   "sellDetailsDescription": {
-    "message": "Sell TEZ to fiat. Get fiat to Visa, Mastercard Ukrainian cards."
+    "message": "Sell TEZ to fiat. Get fiat to Visa, Mastercard cards."
   },
   "privacyAndPolicyLinks": {
     "message": "By clicking $buttonContent$ you agree with \n$termsOfUse$ and $privacyPolicy$",

src/app/hooks/AliceBob/useDisabledProceed.ts → src/app/hooks/AliceBob/use-disabled-proceed.ts

@@ -6,8 +6,8 @@ import { useAccount, useBalance } from 'lib/temple/front';
 
 export const useDisabledProceed = (
   inputAmount: number | undefined,
-  minExchangeAmount: number,
-  maxExchangeAmount: number,
+  minExchangeAmount = 0,
+  maxExchangeAmount = 0,
   isWithdraw = false
 ) => {
   const { publicKeyHash } = useAccount();

src/app/hooks/AliceBob/use-output-currencies.ts

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { getCurrencyNameByCode, knownAliceBobFiatCurrencies } from 'app/store/buy-with-credit-card/utils';
+import { getAliceBobPairsInfo } from 'lib/apis/temple';
+import { FIAT_ICONS_SRC } from 'lib/icons';
+
+export interface AliceBobWithdrawCurrency {
+  name: string;
+  code: string;
+  icon: string;
+  minAmount?: number;
+  maxAmount?: number;
+}
+
+export const DEFAULT_OUTPUT_CURRENCY = {
+  name: getCurrencyNameByCode('UAH'),
+  code: 'UAH',
+  icon: FIAT_ICONS_SRC.UAH
+};
+
+export const useOutputCurrencies = (
+  setIsApiError: (v: boolean) => void,
+  outputCurrency: AliceBobWithdrawCurrency,
+  setOutputCurrency: (currency: AliceBobWithdrawCurrency) => void
+) => {
+  const [isCurrenciesLoading, setIsCurrenciesLoading] = useState(false);
+
+  const [currencies, setCurrencies] = useState<AliceBobWithdrawCurrency[]>([]);
+
+  const getCurrenciesRequest = useCallback(() => {
+    setIsCurrenciesLoading(true);
+
+    getAliceBobPairsInfo(true)
+      .then(response => {
+        const newCurrencies = response.data.pairsInfo.map(pair => {
+          const code = pair.to.slice(-3);
+          const minAmount = Number(pair.minamount.split(' ')[0]);
+          const maxAmount = Number(pair.maxamount.split(' ')[0]);
+
+          if (knownAliceBobFiatCurrencies[code]) {
+            return {
+              ...knownAliceBobFiatCurrencies[code],
+              minAmount,
+              maxAmount
+            };
+          }
+
+          return {
+            name: getCurrencyNameByCode(code),
+            code,
+            icon: `https://static.moonpay.com/widget/currencies/${code.toLowerCase()}.svg`,
+            minAmount,
+            maxAmount
+          };
+        });
+
+        setCurrencies(newCurrencies);
+
+        if (!outputCurrency.minAmount) {
+          setOutputCurrency(newCurrencies.find(currency => currency.code === 'UAH') ?? DEFAULT_OUTPUT_CURRENCY);
+        }
+      })
+      .catch(() => setIsApiError(true))
+      .finally(() => setIsCurrenciesLoading(false));
+  }, [outputCurrency.minAmount, setIsApiError, setOutputCurrency]);
+
+  useEffect(() => {
+    getCurrenciesRequest();
+  }, [getCurrenciesRequest]);
+
+  return {
+    isCurrenciesLoading,
+    currencies
+  };
+};

src/app/hooks/AliceBob/useOutputEstimation.ts → src/app/hooks/AliceBob/use-output-estimation.ts

@@ -6,10 +6,10 @@ import { estimateAliceBobOutput } from 'lib/apis/temple';
 
 export const useOutputEstimation = (
   inputAmount = 0,
+  outputAssetCode: string,
   isMinAmountError: boolean,
   isMaxAmountError: boolean,
-  setIsApiError: (v: boolean) => void,
-  isWithdraw = false
+  setIsApiError: (v: boolean) => void
 ) => {
   const [outputAmount, setOutputAmount] = useState(0);
   const [estimationIsLoading, setLoading] = useState(false);
@@ -23,14 +23,14 @@ export const useOutputEstimation = (
     if (isValidInput) {
       setLoading(true);
 
-      estimateAliceBobOutput(isWithdraw, inputAmount.toString())
+      estimateAliceBobOutput(inputAmount.toString(), 'XTZ', outputAssetCode)
         .then(response => {
           setOutputAmount(new BigNumber(response.data.outputAmount).dp(2, BigNumber.ROUND_FLOOR).toNumber());
         })
         .catch(() => setIsApiError(true))
         .finally(() => setLoading(false));
     }
-  }, [inputAmount, isValidInput, isWithdraw, setIsApiError, setLoading]);
+  }, [inputAmount, isValidInput, outputAssetCode, setIsApiError]);
 
   useEffect(() => {
     getOutputEstimation();

src/app/pages/BuyWithCreditCard/BuyWithCreditCard.tsx

@@ -19,6 +19,7 @@ import { getAssetSymbolToDisplay } from 'lib/buy-with-credit-card/get-asset-symb
 import { TopUpInputInterface } from 'lib/buy-with-credit-card/topup.interface';
 import { shouldShowFieldError } from 'lib/form/should-show-field-error';
 import { t, T, toLocalFormat } from 'lib/i18n';
+import { FIAT_ICONS_SRC } from 'lib/icons';
 import { useInterval } from 'lib/ui/hooks';
 
 import { BuyWithCreditCardSelectors } from './BuyWithCreditCard.selectors';
@@ -32,7 +33,8 @@ import { usePaymentProviders } from './hooks/use-payment-providers';
 import { useUpdateCurrentProvider } from './hooks/use-update-current-provider';
 import { AmountErrorType } from './types/amount-error-type';
 
-const fitFiatIconFn = (currency: TopUpInputInterface) => !currency.icon.startsWith(MOONPAY_ASSETS_BASE_URL);
+const fitFiatIconFn = (currency: TopUpInputInterface) =>
+  !currency.icon.startsWith(MOONPAY_ASSETS_BASE_URL) && currency.icon !== FIAT_ICONS_SRC.UAH;
 
 export const BuyWithCreditCard: FC = () => {
   const dispatch = useDispatch();

src/app/pages/BuyWithCreditCard/hooks/use-buy-with-credit-card-form.ts

@@ -121,7 +121,13 @@ export const useBuyWithCreditCardForm = () => {
             url = await createUtorgOrder(outputAmount, inputCurrency.code, publicKeyHash, outputToken.code);
             break;
           case TopUpProviderId.AliceBob:
-            const { data } = await createAliceBobOrder(false, inputAmount.toFixed(), userId, publicKeyHash);
+            const { data } = await createAliceBobOrder(
+              inputAmount.toFixed(),
+              inputCurrency.code,
+              outputToken.code,
+              userId,
+              publicKeyHash
+            );
             url = data.orderInfo.payUrl;
             break;
           default:

src/app/pages/BuyWithCreditCard/hooks/use-one-payment-provider.ts

@@ -59,8 +59,8 @@ const getOutputAmountFunctions: Record<TopUpProviderId, getOutputAmountFunction>
   },
   [TopUpProviderId.Utorg]: async (inputAmount, inputAsset, outputAsset) =>
     convertFiatAmountToCrypto(inputAsset.code, outputAsset.code, inputAmount),
-  [TopUpProviderId.AliceBob]: async inputAmount => {
-    const response = await estimateAliceBobOutput(false, inputAmount.toString());
+  [TopUpProviderId.AliceBob]: async (inputAmount, inputAsset, outputAsset) => {
+    const response = await estimateAliceBobOutput(inputAmount.toString(), inputAsset.code, outputAsset.code);
 
     return response.data.outputAmount;
   }