SOV-1141: fixing the transak integration (#2461)

* feat: refactor transak deposits * fix: review comments * fix: design issues with transak Co-authored-by: Pietro Maximoff <[email protected]>
DistributedCollective · Dec 8, 2022 · 5e0b427 · 5e0b427
1 parent 631ff18
commit 5e0b427
Show file tree

Hide file tree

Showing 13 changed files with 199 additions and 89 deletions.
diff --git a/src/app/components/Form/AddressQrCode/index.tsx b/src/app/components/Form/AddressQrCode/index.tsx
@@ -16,6 +16,7 @@ type AddressQrCodeProps = {
   address: string;
   uri?: URIType;
   hideClickToCopy?: boolean;
+  hideQr?: boolean;
 };
 
 const CopySuccess = ({ copied }) => {
@@ -24,7 +25,7 @@ const CopySuccess = ({ copied }) => {
   return (
     <div
       className={classNames(
-        'tw-absolute tw--bottom-2 tw-left-0 tw-transform tw-translate-y-full tw-border tw-border-secondary tw-text-sov-white tw-bg-secondary tw-bg-opacity-70 tw-px-6 tw-py-2 tw-text-center tw-w-full tw-transition-opacity tw-rounded-sm',
+        'tw-absolute tw--bottom-2 tw-left-0 tw-transform tw-translate-y-full tw-border tw-border-secondary tw-text-sov-white tw-bg-secondary tw-bg-opacity-70 tw-px-6 tw-py-2 tw-text-center tw-w-full tw-transition-opacity tw-rounded-sm tw-z-10',
         {
           'tw-opacity-100': copied,
           'tw-opacity-0': !copied,
@@ -42,6 +43,7 @@ export const AddressQrCode: React.FC<AddressQrCodeProps> = ({
   address,
   uri,
   hideClickToCopy,
+  hideQr,
 }) => {
   const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
@@ -50,18 +52,20 @@ export const AddressQrCode: React.FC<AddressQrCodeProps> = ({
       <div className="tw-font-semibold tw-text-sov-white tw-text-center tw-mb-4">
         {t(translations.fastBtcPage.deposit.qr.title)}
       </div>
-      <div className="tw-qrcode-container">
+      <div className="tw-qrcode-container tw-w-full">
         {label && <div className="tw-qrcode-label">{label}</div>}
-        <div className="tw-qrcode-wrapper">
-          <QRCode
-            value={`${uri || ''}${address}`}
-            renderAs="svg"
-            bgColor="var(--white)"
-            fgColor="var(--gray-1)"
-            includeMargin={false}
-            className="rounded"
-          />
-        </div>
+        {!hideQr && (
+          <div className="tw-qrcode-wrapper">
+            <QRCode
+              value={`${uri || ''}${address}`}
+              renderAs="svg"
+              bgColor="var(--white)"
+              fgColor="var(--gray-1)"
+              includeMargin={false}
+              className="rounded"
+            />
+          </div>
+        )}
         {!hideClickToCopy && (
           <div className="tw-qrcode-clipboard">
             <CopySuccess copied={copied} />

diff --git a/src/app/components/TransakDialog/TransakScreen.tsx b/src/app/components/TransakDialog/TransakScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Trans } from 'react-i18next';
 
@@ -15,6 +15,10 @@ export const TransakScreen: React.FC = () => {
 
   const { handleClick, isWrongChainId } = useTransak();
 
+  const handleTransakClick = useCallback(() => handleClick('BTC'), [
+    handleClick,
+  ]);
+
   return (
     <>
       <h2 className={styles.title}>
@@ -51,7 +55,7 @@ export const TransakScreen: React.FC = () => {
           ready
           loading={false}
           disabled={isWrongChainId}
-          onClick={handleClick}
+          onClick={handleTransakClick}
         />
       </div>
     </>

diff --git a/src/app/components/TransakDialog/useTransak.ts b/src/app/components/TransakDialog/useTransak.ts
@@ -11,6 +11,11 @@ export const useTransak = () => {
   const account = useAccount();
   const [open, setOpen] = useState(false);
 
+  const [config, setConfig] = useState<{ address: string; currency: string }>({
+    address: account,
+    currency: 'BTC',
+  });
+
   const isWrongChainId = useMemo(
     () =>
       connected &&
@@ -20,12 +25,12 @@ export const useTransak = () => {
   );
 
   useEffect(() => {
-    if (open && account !== '') {
+    if (open && config.address !== '') {
       const transakSettings = {
         apiKey: process.env.REACT_APP_TRANSAK_API_KEY, // Your API Key
         environment: process.env.REACT_APP_TRANSAK_ENV, // STAGING/PRODUCTION
-        defaultCryptoCurrency: 'RBTC',
-        walletAddress: account, // Your customer's wallet address
+        defaultCryptoCurrency: config.currency,
+        walletAddress: config.address, // Your customer's wallet address
         themeColor: '000000', // App theme color
         fiatCurrency: '', // INR/GBP
         email: '', // Your customer's email address
@@ -34,23 +39,30 @@ export const useTransak = () => {
         widgetHeight: '550px',
         widgetWidth: '450px',
         disableWalletAddressForm: true,
-        cryptoCurrencyCode: 'RBTC',
-        cryptoCurrencyList: 'RBTC',
+        cryptoCurrencyCode: config.currency,
+        cryptoCurrencyList: config.currency,
         hideMenu: true,
       };
       const transak = new transakSDK(transakSettings);
       transak.init();
-      // This will trigger when the user marks payment is made.
-      transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, orderData => {
-        // transak.close();
-      });
+
       transak.on(transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
+        transak.close();
         setOpen(false);
       });
     }
-  }, [account, open]);
+  }, [config, open]);
 
-  const handleClick = useCallback(() => setOpen(true), []);
+  const handleClick = useCallback(
+    (defaultCurrency: string, depositAddress?: string) => {
+      setConfig({
+        currency: defaultCurrency,
+        address: depositAddress || account,
+      });
+      setOpen(true);
+    },
+    [account],
+  );
 
   return { handleClick, isWrongChainId };
 };
diff --git a/src/app/pages/FastBtcPage/components/Deposit/AddressForm.tsx b/src/app/pages/FastBtcPage/components/Deposit/AddressForm.tsx
@@ -1,16 +1,50 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { DepositDetails } from './DepositDetails';
 import { AddressQrCode, URIType } from 'app/components/Form/AddressQrCode';
 import { DepositContext } from '../../contexts/deposit-context';
+import { FastBtcDirectionType } from '../../types';
+import { FastBtcButton } from '../FastBtcButton';
+import { useTranslation } from 'react-i18next';
+import { translations } from 'locales/i18n';
+import { useTransak } from 'app/components/TransakDialog/useTransak';
 
-export const AddressForm: React.FC = () => {
+type AddressFormProps = {
+  type: FastBtcDirectionType;
+};
+
+export const AddressForm: React.FC<AddressFormProps> = ({ type }) => {
   const { address } = useContext(DepositContext);
+  const { t } = useTranslation();
+  const { handleClick, isWrongChainId } = useTransak();
+
+  const isTransakDeposit = useMemo(
+    () => type === FastBtcDirectionType.TRANSAK,
+    [type],
+  );
+
+  const handleTransakClick = useCallback(() => handleClick('BTC', address), [
+    address,
+    handleClick,
+  ]);
 
   return (
     <>
-      <div className="tw-full tw-mb-8">
+      <div className="tw-w-full tw-mb-8">
         <DepositDetails />
-        <AddressQrCode uri={URIType.BITCOIN} address={address} />
+        <AddressQrCode
+          uri={URIType.BITCOIN}
+          address={address}
+          hideQr={isTransakDeposit}
+        />
+
+        {isTransakDeposit && (
+          <FastBtcButton
+            className="tw-absolute tw-right-0 tw-left-0 tw-bottom-8 tw-mx-auto"
+            text={t(translations.fastBtcPage.transak.validationScreen.cta)}
+            disabled={isWrongChainId}
+            onClick={handleTransakClick}
+          />
+        )}
       </div>
     </>
   );

diff --git a/src/app/pages/FastBtcPage/components/Deposit/DepositDetails.tsx b/src/app/pages/FastBtcPage/components/Deposit/DepositDetails.tsx
@@ -57,7 +57,7 @@ export const DepositDetails: React.FC = () => {
                   maxDecimals={8}
                   mode={AssetValueMode.auto}
                   assetString="BTC"
-                />
+                />{' '}
                 +{' '}
                 <AssetValue
                   value={(limits.dynamicFee / DYNAMIC_FEE_DIVISOR) * 100}

diff --git a/src/app/pages/FastBtcPage/components/Deposit/SidebarStepsDeposit.tsx b/src/app/pages/FastBtcPage/components/Deposit/SidebarStepsDeposit.tsx
@@ -7,7 +7,7 @@ import { prettyTx } from 'utils/helpers';
 import addressIcon from 'assets/images/fast-btc/address-icon.svg';
 import successIcon from 'assets/images/fast-btc/success-icon.svg';
 import { DepositContext, DepositStep } from '../../contexts/deposit-context';
-import { NetworkAwareComponentProps } from '../../types';
+import { FastBtcDirectionType, NetworkAwareComponentProps } from '../../types';
 import { TxStatus } from 'store/global/transactions-store/types';
 import { Stepper, StepItem } from 'app/components/Stepper';
 
@@ -21,7 +21,13 @@ const stepOrder = [
 const isBehindStep = (current: DepositStep, needed: DepositStep) =>
   stepOrder.indexOf(current) > stepOrder.indexOf(needed);
 
-export const SidebarStepsDeposit: React.FC<NetworkAwareComponentProps> = () => {
+type SidebarStepsDepositProps = NetworkAwareComponentProps & {
+  type: FastBtcDirectionType;
+};
+
+export const SidebarStepsDeposit: React.FC<SidebarStepsDepositProps> = ({
+  type,
+}) => {
   const { t } = useTranslation();
   const { step, set, address, depositTx } = useContext(DepositContext);
 
@@ -35,32 +41,53 @@ export const SidebarStepsDeposit: React.FC<NetworkAwareComponentProps> = () => {
         ),
         value: DepositStep.VALIDATION,
       },
-      {
-        stepTitle: (
-          <Trans
-            i18nKey={translations.fastBtcPage.deposit.sidebarSteps.address}
-          />
-        ),
-        value: DepositStep.ADDRESS,
-      },
-      {
-        stepTitle: (
-          <Trans
-            i18nKey={translations.fastBtcPage.deposit.sidebarSteps.processing}
-          />
-        ),
-        value: DepositStep.PROCESSING,
-      },
-      {
-        stepTitle: (
-          <Trans
-            i18nKey={translations.fastBtcPage.deposit.sidebarSteps.completed}
-          />
-        ),
-        value: DepositStep.COMPLETED,
-      },
+      ...(type === FastBtcDirectionType.DEPOSIT
+        ? [
+            {
+              stepTitle: (
+                <Trans
+                  i18nKey={
+                    translations.fastBtcPage.deposit.sidebarSteps.address
+                  }
+                />
+              ),
+              value: DepositStep.ADDRESS,
+            },
+            {
+              stepTitle: (
+                <Trans
+                  i18nKey={
+                    translations.fastBtcPage.deposit.sidebarSteps.processing
+                  }
+                />
+              ),
+              value: DepositStep.PROCESSING,
+            },
+            {
+              stepTitle: (
+                <Trans
+                  i18nKey={
+                    translations.fastBtcPage.deposit.sidebarSteps.completed
+                  }
+                />
+              ),
+              value: DepositStep.COMPLETED,
+            },
+          ]
+        : [
+            {
+              stepTitle: (
+                <Trans
+                  i18nKey={
+                    translations.fastBtcPage.transak.sidebarSteps.address
+                  }
+                />
+              ),
+              value: DepositStep.ADDRESS,
+            },
+          ]),
     ],
-    [],
+    [type],
   );
 
   const steps = useMemo<StepItem[]>(() => {

diff --git a/src/app/pages/FastBtcPage/components/Deposit/SignatureValidation/index.tsx b/src/app/pages/FastBtcPage/components/Deposit/SignatureValidation/index.tsx
@@ -11,15 +11,18 @@ import { FastBtcButton } from '../../FastBtcButton';
 import { TxStatus } from 'store/global/transactions-store/types';
 import styles from './index.module.scss';
 import { StatusComponent } from 'app/components/Dialogs/StatusComponent';
+import { FastBtcDirectionType } from 'app/pages/FastBtcPage/types';
 
 const multisigAddress = getContract('fastBtcMultisig').address;
 
 interface ISignatureValidationProps {
   onClick: () => void;
+  type: FastBtcDirectionType;
 }
 
 export const SignatureValidation: React.FC<ISignatureValidationProps> = ({
   onClick,
+  type,
 }) => {
   const { address, signatures } = useContext(DepositContext);
   const { t } = useTranslation();
@@ -72,7 +75,7 @@ export const SignatureValidation: React.FC<ISignatureValidationProps> = ({
       <div className="tw-mb-5 tw-text-gray-8 tw-text-center">
         {t(translations.fastBtcPage.deposit.validationScreen.description)}
       </div>
-      <div className="tw-full tw-mb-12">
+      <div className="tw-w-full tw-mb-12">
         <StatusComponent status={pageStatus} showLabel={false} />
         <div className={styles.status}>{statusText}</div>
         <div className={styles.download}>
@@ -86,7 +89,11 @@ export const SignatureValidation: React.FC<ISignatureValidationProps> = ({
         </div>
         <FastBtcButton
           className="tw-absolute tw-right-0 tw-left-0 tw-bottom-8 tw-mx-auto"
-          text={t(translations.fastBtcPage.deposit.validationScreen.cta)}
+          text={t(
+            type === FastBtcDirectionType.TRANSAK
+              ? translations.fastBtcPage.transak.validationScreen.cta
+              : translations.fastBtcPage.deposit.validationScreen.cta,
+          )}
           disabled={!isSignatureValid || loading}
           loading={loading}
           onClick={onClick}

diff --git a/src/app/pages/FastBtcPage/components/FastBtcButton.tsx b/src/app/pages/FastBtcPage/components/FastBtcButton.tsx
@@ -19,7 +19,10 @@ export const FastBtcButton: React.FC<FastBtcButtonProps> = ({
 }) => {
   return (
     <Button
-      className={classNames('tw-w-42 tw-font-semibold', className)}
+      className={classNames(
+        'tw-max-w-xs tw-font-semibold tw-whitespace-nowrap',
+        className,
+      )}
       size={ButtonSize.sm}
       text={text}
       disabled={disabled}