herald-exchange-glide-widget 1.0.0

package/src/components/SellField.tsx

@@ -0,0 +1,705 @@
+import React, { useEffect, useState } from "react";
+import CustomSelect from "./CustomeSelect";
+import WidgetSuccesDetails from "./WidgetSuccesDetails";
+import WidgetBankDetails from "./WidgetBankDetails";
+import SellAdminCryptoAccount from "./SellAdminCryptoAccount";
+import { useToast } from "../hooks/toastProvider";
+import Loader from "./loader";
+import { useExchangeSocket } from "../hooks/useSocketExchange";
+import DotLoader from "./DotLoader";
+import { handleApiCall } from "./api";
+import { getBaseUrl, isValidDecimal } from "./utils";
+import type {
+  comissionAPIResponse,
+  ConfigurationAPIResponse,
+  CurrenciesAPIResponse,
+  CustomOption,
+  OfframpTransactionAPIResponse,
+  rulesType,
+  SellParamsType,
+} from "./types";
+
+type SellFieldProps = {
+  apiKey: string;
+  parameters: SellParamsType;
+  clientReferenceID: string;
+  css: any;
+  mode: string;
+};
+
+export type tokenSellDataType = {
+  from_amount: string;
+  selectedCrypto: string;
+  selectedFiat: string;
+  to_currency_conversion_value: number;
+  exchange_rate: number;
+  minAmount: string;
+  maxAmount: string;
+  network_type: string;
+  selectedBeneficiary: string;
+  transaction_hash?: string;
+  response?: OfframpTransactionAPIResponse["data"];
+};
+
+// Sell Crypto and receive Fiat
+const SellField = ({ apiKey, parameters, clientReferenceID, css, mode }: SellFieldProps) => {
+  const { addToast } = useToast(); // to show toast
+  const exchangeSocket: any = useExchangeSocket({}); // socket connevction to fetch exchange rate
+
+  const [step, setStep] = useState(1); // used to render components
+
+  const [currenciesLoading, setCurrenciesLoading] = useState(false);
+  const [currencies, setCurrencies] = useState<CurrenciesAPIResponse["data"] | null>(null);
+  const [tokenSellData, setTokenSellData] = useState<tokenSellDataType>({
+    from_amount:
+      parameters?.from_amount && parseFloat(parameters?.from_amount) > 0
+        ? parameters.from_amount
+        : "0",
+    selectedCrypto: parameters?.from_currency || "",
+    selectedFiat: parameters?.to_currency || "",
+    to_currency_conversion_value: 0,
+    exchange_rate: 0,
+    minAmount: "0.0000001",
+    maxAmount: "100000.0000",
+    network_type: "",
+    selectedBeneficiary: "",
+  });
+  // From
+  const [selectedCrypto, setSelectedCrypto] = useState<CustomOption | null>(null);
+  // TO
+  const [selectedFiat, setSelectedFiat] = useState<CustomOption | null>(null);
+
+  // Options
+  const [cryptoCurrencyOptions, setCryptoCurrencyOptions] = useState<CustomOption[] | []>([]); //  crypto currency options
+  const [fiatCurrencyOptions, setFiatCurrencyOptions] = useState<CustomOption[] | []>([]); //  fiat currency options
+  const [networkOptions, setNetworkOptions] = useState<CustomOption[] | []>([]); //  network options
+
+  // Comissions
+  const [commissionApiResponse, setComissionApiResponse] = useState<
+    comissionAPIResponse["data"] | null
+  >(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [commissionForThisUser, setCommissionForThisUser] = useState(0);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [actualCommission, setActualCommission] = useState(0); // original commission
+  // Exchange rate
+  const [exchangeRate, setExchangeRate] = useState(0); // actual exchange rate
+  const [exchangeRateForThisUser, setExchangeRateForThisUser] = useState(0); // exchange rate shown to user
+  const [userReceivableFiatValue, setUserReceivableFiatValue] = useState(0); //fiat value shown to user
+  const [isRangeComissionEnabled, setIsRangeComissionEnabled] = useState<boolean>(false);
+  // Fot loaders and to disable fields
+  const [isFetchingExchangeRate, setIsFetchingExchangeRate] = useState(true);
+  // Validation
+  const [inputRules, setInputRules] = useState<rulesType | null>(null);
+  const [invalidAmount, setInvalidAmount] = useState({
+    min: false,
+    max: false,
+  });
+
+  const [commissionData, setCommissionData] = useState<any>({
+    admin_commission: 0,
+    merchant_commission: 0,
+  });
+
+  useEffect(() => {
+    fetchCurrencies();
+    // fetchCommissionRanges();
+    fetchCommissions();
+    fetchConfiguration();
+  }, []);
+
+  const fetchConfiguration = () => {
+    const baseUrl = getBaseUrl(mode);
+    handleApiCall({
+      url: `${baseUrl}/api/lookup/configurations`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: ConfigurationAPIResponse) => {
+        if (result?.success) {
+          setIsRangeComissionEnabled(result?.data?.merchant_configuration?.range_calculation === 1);
+        }
+      },
+      onError: () => {
+        addToast("Error fetching configuration", "error");
+      },
+    });
+  };
+
+  const fetchCommissions = () => {
+    const baseUrl = getBaseUrl(mode);
+
+    handleApiCall({
+      url: `${baseUrl}/api/lookup/commissions`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: comissionAPIResponse) => {
+        if (result?.success) {
+          setComissionApiResponse(result?.data);
+        }
+      },
+      onError: () => {
+        addToast("Error fetching comission", "error");
+      },
+    });
+  };
+
+  const fetchCurrencies = () => {
+    const baseUrl = getBaseUrl(mode);
+    setCurrenciesLoading(true);
+    handleApiCall({
+      url: `${baseUrl}/api/lookup/currencies`,
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+        "User-Id": clientReferenceID,
+      },
+      onSuccess: (result: CurrenciesAPIResponse) => {
+        if (result?.success) {
+          setCurrencies(result?.data);
+        }
+        setCurrenciesLoading(false);
+      },
+
+      onError: () => {
+        addToast("Error fetching currency", "error");
+        setCurrenciesLoading(false);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (currencies) {
+      const fiatCurrencyOptions =
+        currencies?.currencies
+          ?.filter(
+            (item) => item?.supported_currency?.type === "FIAT" && item?.service === "stream"
+          )
+          ?.map((item) => ({
+            label: item?.supported_currency?.code,
+            value: item?.unique_id,
+            icon: item?.supported_currency?.icon,
+          })) || [];
+
+      setFiatCurrencyOptions(fiatCurrencyOptions);
+
+      const selected_forex = tokenSellData?.selectedFiat
+        ? currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === tokenSellData?.selectedFiat
+          ) ||
+          currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === fiatCurrencyOptions?.[0]?.label
+          )
+        : currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === fiatCurrencyOptions?.[0]?.label
+          );
+
+      const selectedFiat = tokenSellData.selectedFiat
+        ? fiatCurrencyOptions.find((fiat) => fiat.label === tokenSellData.selectedFiat) ||
+          fiatCurrencyOptions?.[0]
+        : fiatCurrencyOptions?.[0];
+
+      setSelectedFiat(selectedFiat);
+
+      const cryptoOptions =
+        currencies?.currencies
+          ?.filter(
+            (item) => item?.supported_currency?.type === "CRYPTO" && item?.service === "stream"
+          )
+          ?.map((item) => ({
+            label: item?.supported_currency?.code,
+            value: item?.unique_id,
+            icon: item?.supported_currency?.icon,
+          })) || [];
+
+      setCryptoCurrencyOptions(cryptoOptions);
+
+      const networkOptions =
+        currencies?.currencies
+          ?.filter(
+            (item) =>
+              item?.supported_currency?.type === "CRYPTO" &&
+              item?.service === "stream" &&
+              !["USDT", "USDC"].includes(item?.supported_currency?.code)
+          )
+          ?.map((item) => ({
+            label: item?.supported_currency?.code,
+            value: item?.supported_currency?.code,
+            icon: item?.supported_currency?.icon,
+          })) || [];
+
+      setNetworkOptions(networkOptions);
+
+      const selected_crypto = parameters?.from_currency
+        ? currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === parameters?.from_currency
+          ) ||
+          currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === cryptoOptions?.[0]?.label
+          )
+        : currencies?.currencies?.find(
+            (currency) => currency?.supported_currency?.code === cryptoOptions?.[0]?.label
+          );
+
+      setSelectedCrypto(
+        parameters?.from_currency
+          ? cryptoOptions.find((currency) => currency.label === parameters?.from_currency) ||
+              cryptoOptions?.[0]
+          : cryptoOptions?.[0] || []
+      );
+
+      setTokenSellData((prev) => ({
+        ...prev,
+        selectedCrypto: selected_crypto?.supported_currency?.code || "",
+        selectedFiat: selected_forex?.supported_currency?.code || "",
+      }));
+    }
+  }, [currencies]);
+
+  useEffect(() => {
+    if (commissionApiResponse && currencies) {
+      const rules = commissionApiResponse?.rules?.find((item) => item?.service === "stream");
+      if (rules) {
+        setInputRules(rules);
+      }
+      const commission = commissionApiResponse?.commission?.find(
+        (item) => item?.service == "stream"
+      );
+      setActualCommission(commission?.commission ? parseFloat(commission?.commission) : 0);
+
+      setCommissionData({
+        admin_commission: commission?.admin_commission
+          ? parseFloat(commission?.admin_commission)
+          : 0,
+        merchant_commission: commission?.commission ? parseFloat(commission?.commission) : 0,
+      });
+
+      if (rules) {
+        setTokenSellData((prev) => ({
+          ...prev,
+          minAmount:
+            parseFloat(rules?.schema?.min) <= 0
+              ? "0.0000001"
+              : parseFloat(rules?.schema?.min)?.toFixed(8),
+          maxAmount:
+            parseFloat(rules?.schema?.max) <= 0
+              ? "100000"
+              : parseFloat(rules?.schema?.max)?.toFixed(8),
+          // buy_commission: commission,
+        }));
+      }
+    }
+  }, [commissionApiResponse, currencies]);
+
+  useEffect(() => {
+    if (exchangeSocket && selectedFiat && selectedCrypto) {
+      setExchangeRateForThisUser(0);
+      fetchExchangeRate();
+    }
+  }, [selectedCrypto, selectedFiat]);
+
+  useEffect(() => {
+    if (exchangeSocket) {
+      exchangeSocket.on("getSDKExchangeRate", (data: string) => {
+        console.log("ex rate :", data);
+        setExchangeRate(parseFloat(data));
+        setIsFetchingExchangeRate(false);
+      });
+    }
+  }, [exchangeSocket]);
+
+  const fetchExchangeRate = () => {
+    setExchangeRate(0);
+    setIsFetchingExchangeRate(true);
+    exchangeSocket.emit("fetchSDKExchangeRate", {
+      pair: `${selectedFiat?.label}-${selectedCrypto?.label}`,
+      user_id: "",
+      type: "sell",
+      apiKey: apiKey,
+      userId: clientReferenceID,
+    });
+  };
+
+  const handleCryptoCurrencyChange = (selectedOption: CustomOption | null) => {
+    const fiat = currencies?.currencies?.find((fiat) => fiat.unique_id === selectedOption?.value);
+    setTokenSellData({
+      ...tokenSellData,
+      selectedCrypto: fiat?.supported_currency?.code || "",
+    });
+    setSelectedCrypto(selectedOption);
+  };
+
+  const handleCryptoCurrencyValueChange = (value: string) => {
+    if (value.includes(".")) {
+      if (inputRules && !isValidDecimal(value, inputRules?.schema?.decimal)) {
+        addToast(`You can input upto ${inputRules?.schema?.decimal} decimal places.`, "error");
+        return;
+      } else {
+        if (value === "") {
+          setTokenSellData({
+            ...tokenSellData,
+            from_amount: "",
+          });
+        } else {
+          if (!isNaN(Number(value))) {
+            setTokenSellData({
+              ...tokenSellData,
+              from_amount: value,
+            });
+          }
+        }
+      }
+    } else {
+      if (value === "") {
+        setTokenSellData({
+          ...tokenSellData,
+          from_amount: "",
+        });
+      } else {
+        if (!isNaN(Number(value))) {
+          setTokenSellData({
+            ...tokenSellData,
+            from_amount: value,
+          });
+        }
+      }
+    }
+  };
+
+  const onComplete = () => {
+    if (parseFloat(tokenSellData.from_amount) > 0) {
+      setTokenSellData({
+        ...tokenSellData,
+        to_currency_conversion_value: userReceivableFiatValue,
+        exchange_rate: exchangeRateForThisUser,
+      });
+
+      setStep(2);
+    } else {
+      addToast("Please enter valid amount", "error");
+    }
+  };
+
+  useEffect(() => {
+    setInvalidAmount({
+      min:
+        parseFloat(tokenSellData.from_amount) < parseFloat(tokenSellData.minAmount) ||
+        tokenSellData.from_amount === "" ||
+        parseFloat(tokenSellData.from_amount) <= 0,
+      max: parseFloat(tokenSellData.from_amount) > parseFloat(tokenSellData.maxAmount),
+    });
+  }, [exchangeRateForThisUser, tokenSellData]);
+
+  useEffect(() => {
+    if (tokenSellData) {
+      const actualExchangeRate = exchangeRate;
+
+      const range = isRangeComissionEnabled
+        ? commissionApiResponse?.commission_ranges?.find(
+            (item) =>
+              parseFloat(item.from_amount) <=
+                parseFloat(tokenSellData.from_amount) * actualExchangeRate &&
+              parseFloat(item.to_amount) >=
+                parseFloat(tokenSellData.from_amount) * actualExchangeRate &&
+              item.currency === selectedFiat?.label &&
+              item.type === "c-f"
+          )
+        : null;
+
+      const from_commission = range ? parseFloat(range?.from_commission) : 0;
+      const to_commission = range ? parseFloat(range?.to_commission) : 0;
+      const token_from_amount = tokenSellData.from_amount
+        ? parseFloat(tokenSellData.from_amount)
+        : 0;
+      const range_from_amount = range ? parseFloat(range.from_amount) : 0;
+      const range_to_amount = range ? parseFloat(range.to_amount) : 0;
+
+      const additonalCommissionRate = range
+        ? parseFloat(range.from_commission) -
+          ((from_commission - to_commission) / (range_to_amount - range_from_amount)) *
+            (token_from_amount * actualExchangeRate - range_from_amount)
+        : 0;
+
+      const ceffective: number = totalEffectiveCommission(
+        commissionData?.admin_commission + additonalCommissionRate,
+        commissionData?.merchant_commission
+      );
+      // let commissionEffective:any = ((ceffective/100) * actualExchangeRate)
+      // console.log("Effective Commission", ceffective, commissionEffective);
+      const userCommission = ceffective || 0;
+
+      const newCommission = (userCommission / 100) * actualExchangeRate;
+      setCommissionForThisUser(newCommission || 0);
+
+      const newExchangeRate = parseFloat((actualExchangeRate - newCommission).toFixed(6));
+
+      setExchangeRateForThisUser(newExchangeRate || 0);
+
+      setUserReceivableFiatValue(token_from_amount * newExchangeRate);
+    }
+  }, [exchangeRate, tokenSellData, commissionApiResponse]);
+
+  function totalEffectiveCommission(c1: number, c2: number) {
+    const factor = (1 - c1 / 100) * (1 - c2 / 100);
+    return 100 * (1 - factor);
+  }
+
+  useEffect(() => {
+    if (networkOptions?.length > 0) {
+      if (["USDT", "USDC"].includes(tokenSellData.selectedCrypto) && !tokenSellData.network_type) {
+        setTokenSellData((prev) => ({ ...prev, network_type: networkOptions[0].value }));
+      }
+    }
+  }, [tokenSellData, networkOptions]);
+
+  const onFiatChange = (selectedOption: CustomOption | null) => {
+    const fiat = currencies?.currencies?.find(
+      (crypto) => crypto?.unique_id === selectedOption?.value
+    );
+    setTokenSellData({
+      ...tokenSellData,
+      selectedFiat: fiat?.supported_currency?.code || "",
+    });
+    setSelectedFiat(selectedOption);
+  };
+
+  console.log({ cryptoCurrencyOptions });
+
+  return (
+    <>
+      {step === 1 ? (
+        <>
+          {" "}
+          <div className={css.gilde_field_card}>
+            <div className={css.gilde_field_box}>
+              <div className={css.gilde_field_label}>You Pay</div>
+              <div className={css.gilde_field_form}>
+                <input
+                  type="text"
+                  className={css.input_control}
+                  value={tokenSellData.from_amount}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    handleCryptoCurrencyValueChange(newValue);
+                  }}
+                />
+              </div>
+            </div>
+            <div className={css.gilde_field_select_card}>
+              <div className={css.gilde_field_select}>
+                {cryptoCurrencyOptions?.length > 0 ? (
+                  <CustomSelect
+                    backgroundColor="#DECFFF"
+                    placeholder="Select"
+                    image={true}
+                    singleicons={true}
+                    value={selectedCrypto}
+                    isSearchable={false}
+                    onChange={(selectedOption) => {
+                      // setExchangeRate(0);
+                      handleCryptoCurrencyChange(selectedOption);
+                    }}
+                    isDisabled={currenciesLoading}
+                    options={cryptoCurrencyOptions}
+                  />
+                ) : (
+                  <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+                    <Loader />
+                  </div>
+                )}
+              </div>
+              {networkOptions?.length > 0 &&
+                ["USDT", "USDC"].includes(tokenSellData.selectedCrypto) && (
+                  <div className={css.gilde_selected_two}>
+                    <CustomSelect
+                      backgroundColor="#fff"
+                      placeholder="Select"
+                      options={networkOptions}
+                      image={true}
+                      singleicons={true}
+                      isSearchable={false}
+                      onChange={(select) => {
+                        setTokenSellData({
+                          ...tokenSellData,
+                          network_type: select?.value || "",
+                        });
+                      }}
+                      value={networkOptions.find(
+                        (item) => item.value == tokenSellData.network_type
+                      )}
+                      isDisabled={currenciesLoading}
+                    />
+                  </div>
+                )}
+            </div>
+          </div>
+          {invalidAmount?.min && (
+            <p>Invalid, Min : {parseFloat(tokenSellData?.minAmount)?.toFixed(8)}</p>
+          )}
+          {invalidAmount?.max && (
+            <p>Invalid, Max : {parseFloat(tokenSellData?.maxAmount)?.toString()}</p>
+          )}
+          <div className={css.gilde_info_box}>
+            <div className={` ${css.gilde_label_card} ${css.gilde_space} `}>
+              <div className={css.gilde_label_icons}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlSpace="preserve"
+                  width="12"
+                  height="12"
+                  viewBox="0 0 300 300"
+                >
+                  <path
+                    d="M240.3 171.5H59.7c-11.9 0-21.5-9.6-21.5-21.5s9.6-21.5 21.5-21.5h180.6c11.9 0 21.5 9.6 21.5 21.5s-9.6 21.5-21.5 21.5"
+                    data-original="#000000"
+                  ></path>
+                  <circle cx="150" cy="65.5" r="30.5" data-original="#000000"></circle>
+                  <circle cx="150.5" cy="234.5" r="30.5" data-original="#000000"></circle>
+                </svg>
+              </div>
+              <div className={css.gilde_label_value}>
+                <span style={{ marginRight: 10 }}>Rate :</span>
+                {isFetchingExchangeRate ? (
+                  <DotLoader />
+                ) : (
+                  `1 ${tokenSellData.selectedCrypto} = ${
+                    exchangeRateForThisUser?.toFixed(4) || 0
+                  } ${tokenSellData.selectedFiat}`
+                )}
+              </div>
+            </div>
+
+            <div className={` ${css.gilde_label_titles} ${css.gilde_space_top} `}>
+              <div className={css.gilde_label_dots}></div>
+              <div className={css.gilde_ramp_details}>
+                <div className={css.gilde_off_head}>Withdrawal Method</div>
+                <div className={css.gilde_payment_box}>
+                  <div className={` ${css.gilde_payment_check_card} ${css.selected} `}>
+                    <input type="radio" name="radioDefault" id="radioDefault1" value="0.10234" />
+                    <div>Bank Transfer</div>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 408.576 408.576"
+                    >
+                      <g>
+                        <path
+                          d="M204.288 0C91.648 0 0 91.648 0 204.288s91.648 204.288 204.288 204.288 204.288-91.648 204.288-204.288S316.928 0 204.288 0zm114.176 150.528-130.56 129.536c-7.68 7.68-19.968 8.192-28.16.512L90.624 217.6c-8.192-7.68-8.704-20.48-1.536-28.672 7.68-8.192 20.48-8.704 28.672-1.024l54.784 50.176L289.28 121.344c8.192-8.192 20.992-8.192 29.184 0s8.192 20.992 0 29.184z"
+                          fill="var(--primary-color-des)"
+                        ></path>
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={css.gilde_field_card}>
+            <div className={css.gilde_field_box}>
+              <div className={css.gilde_field_label}>You Receive ( estimate )</div>
+              <div className={css.gilde_field_form}>
+                {isFetchingExchangeRate ? (
+                  <DotLoader size={20} />
+                ) : (
+                  <input
+                    type="text"
+                    className={css.input_control}
+                    value={
+                      invalidAmount?.min || invalidAmount?.max
+                        ? 0
+                        : Number(userReceivableFiatValue) && Number(userReceivableFiatValue) > 0
+                        ? userReceivableFiatValue?.toFixed(4)
+                        : 0
+                    }
+                    disabled
+                  />
+                )}
+              </div>
+            </div>
+            <div className={css.gilde_field_select_card}>
+              <div className={css.gilde_field_select}>
+                {fiatCurrencyOptions?.length > 0 ? (
+                  <CustomSelect
+                    backgroundColor="#DECFFF"
+                    placeholder="Select"
+                    borderColor="var(--no-color)"
+                    image={true}
+                    singleicons={true}
+                    options={fiatCurrencyOptions}
+                    value={selectedFiat}
+                    isSearchable={false}
+                    onChange={(selectedOption) => {
+                      // setExchangeRate(0);
+                      onFiatChange(selectedOption);
+                    }}
+                    isDisabled={currenciesLoading || isFetchingExchangeRate}
+                  />
+                ) : (
+                  <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+                    <Loader />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          <div style={{ marginTop: 20 }} className={css.gilde_info_card}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32">
+              <g id="Layer_20" data-name="Layer 20">
+                <path fill="#fbd63b" d="M28 28H4L16 6z"></path>
+                <path fill="#f8be31" d="m16 6 12 22H16z"></path>
+                <path fill="#333" d="m16 21-2-7h4z"></path>
+                <circle cx="16" cy="25" r="1" fill="#333"></circle>
+                <path d="M16 14h2l-2 7zM16 24a1 1 0 0 1 0 2z"></path>
+              </g>
+            </svg>
+            <div className={css.caution_info}>
+              Cryptocurrencies are volatile, and prices can change rapidly, make sure to research
+              and understand the market risks.
+            </div>
+          </div>
+          <div className={css.gilde_ramp_action}>
+            <button
+              className={` ${css.action_btn} ${css.primary} `}
+              onClick={onComplete}
+              disabled={
+                currenciesLoading || !(exchangeRate > 0) || invalidAmount.min || invalidAmount.max
+              }
+            >
+              Sell Now
+            </button>
+          </div>
+        </>
+      ) : step === 2 ? (
+        <WidgetBankDetails
+          setStep={setStep}
+          data={tokenSellData}
+          apiKey={apiKey}
+          clientReferenceID={clientReferenceID}
+          setTokenSellData={setTokenSellData}
+          css={css}
+          mode={mode}
+        />
+      ) : step === 3 ? (
+        <SellAdminCryptoAccount
+          tokenSellData={tokenSellData}
+          setTokenSellData={setTokenSellData}
+          apiKey={apiKey}
+          clientReferenceID={clientReferenceID}
+          setStep={setStep}
+          css={css}
+          mode={mode}
+        />
+      ) : step === 4 ? (
+        <WidgetSuccesDetails css={css} tokenSellData={tokenSellData} />
+      ) : null}
+    </>
+  );
+};
+
+export default SellField;