SOV-1804: split FastBTC "send" and "receive" maintenance modes (#2496)

* feat: split FastBTC "send" and "receive" maintenance modes * fix: send/receive button alignments * feat: update transak maintenance * fix: tooltip logic on fastbtc deposit, review comments * chore: resolve review comments --------- Co-authored-by: soulBit <[email protected]>
DistributedCollective · Mar 22, 2023 · 3c544eb · 3c544eb
1 parent 096291d
commit 3c544eb
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 92 deletions.
diff --git a/src/app/components/UserAssets/components/UserAssetsTableRow.tsx b/src/app/components/UserAssets/components/UserAssetsTableRow.tsx
@@ -26,7 +26,6 @@ import daiIcon from 'app/pages/BridgeDepositPage/dictionaries/assets/icons/dai.s
 
 interface IUserAssetsTableRow {
   item: AssetDetails;
-  onTransack: () => void;
   onConvert: (asset: Asset) => void;
   onUnWrap: () => void;
 }
@@ -44,7 +43,6 @@ const XUSD_ASSETS: {
 export const UserAssetsTableRow: React.FC<IUserAssetsTableRow> = ({
   item,
   onConvert,
-  onTransack,
   onUnWrap,
 }) => {
   const { t } = useTranslation();
@@ -58,7 +56,8 @@ export const UserAssetsTableRow: React.FC<IUserAssetsTableRow> = ({
   }, [item.asset]);
 
   const { checkMaintenance, States } = useMaintenance();
-  const fastBtcLocked = checkMaintenance(States.FASTBTC);
+  const fastBtcSendLocked = checkMaintenance(States.FASTBTC_SEND);
+  const fastBtcReceiveLocked = checkMaintenance(States.FASTBTC_RECEIVE);
 
   useEffect(() => {
     const get = async () => {
@@ -147,13 +146,14 @@ export const UserAssetsTableRow: React.FC<IUserAssetsTableRow> = ({
                 interactionKind="hover"
                 content={
                   <>
-                    {fastBtcLocked
+                    {fastBtcSendLocked
                       ? t(translations.maintenance.fastBTCPortfolio)
                       : t(translations.userAssets.sendMessage, { asset })}
                   </>
                 }
+                className="tw-flex tw-items-center"
               >
-                {fastBtcLocked ? (
+                {fastBtcSendLocked ? (
                   <div className="tw-cursor-not-allowed tw-opacity-25">
                     {t(translations.common.send)}
                   </div>
@@ -175,13 +175,14 @@ export const UserAssetsTableRow: React.FC<IUserAssetsTableRow> = ({
                 interactionKind="hover"
                 content={
                   <>
-                    {fastBtcLocked
+                    {fastBtcReceiveLocked
                       ? t(translations.maintenance.fastBTCPortfolio)
                       : t(translations.userAssets.receiveMessage, { asset })}
                   </>
                 }
+                className="tw-flex tw-items-center"
               >
-                {fastBtcLocked ? (
+                {fastBtcReceiveLocked ? (
                   <div className="tw-cursor-not-allowed tw-opacity-25">
                     {t(translations.common.receive)}
                   </div>

diff --git a/src/app/components/UserAssets/index.tsx b/src/app/components/UserAssets/index.tsx
@@ -1,28 +1,18 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import { AssetsDictionary } from 'utils/dictionaries/assets-dictionary';
 import { Asset } from 'types';
 import { Skeleton } from '../PageSkeleton';
 import { useAccount, useIsConnected } from 'app/hooks/useAccount';
-import { useMaintenance } from 'app/hooks/useMaintenance';
-import { Dialog } from 'app/containers/Dialog';
-import { Button, ButtonSize, ButtonStyle } from '../Button';
-import { discordInvite } from 'utils/classifiers';
 import { ConversionDialog } from './components/ConversionDialog';
 import { UnWrapDialog } from './components/UnWrapDialog';
-import { TransakDialog } from '../TransakDialog/TransakDialog';
 import { UserAssetsTableRow } from './components/UserAssetsTableRow';
 
 export const UserAssets: React.FC = () => {
   const { t } = useTranslation();
   const connected = useIsConnected();
   const account = useAccount();
-  const { checkMaintenances, States } = useMaintenance();
-  const {
-    [States.FASTBTC]: fastBtcLocked,
-    [States.TRANSACK]: transackLocked,
-  } = checkMaintenances();
 
   const assets = useMemo(
     () =>
@@ -32,7 +22,6 @@ export const UserAssets: React.FC = () => {
     [],
   );
 
-  const [transack, setTransack] = useState(false);
   const [conversionDialog, setConversionDialog] = useState(false);
   const [unwrapDialog, setUnwrapDialog] = useState(false);
   const [conversionToken, setConversionToken] = useState<Asset>(null!);
@@ -86,15 +75,13 @@ export const UserAssets: React.FC = () => {
                 <UserAssetsTableRow
                   key={item.asset}
                   item={item}
-                  onTransack={() => setTransack(true)}
                   onConvert={onConvertOpen}
                   onUnWrap={() => setUnwrapDialog(true)}
                 />
               ))}
           </tbody>
         </table>
       </div>
-      <TransakDialog isOpen={transack} onClose={() => setTransack(false)} />
       <ConversionDialog
         isOpen={conversionDialog}
         asset={conversionToken}
@@ -104,39 +91,6 @@ export const UserAssets: React.FC = () => {
         isOpen={unwrapDialog}
         onClose={() => setUnwrapDialog(false)}
       />
-      <Dialog
-        isOpen={(fastBtcLocked && transack) || (transackLocked && transack)}
-        onClose={() => setTransack(false)}
-      >
-        <div className="tw-mw-340 tw-mx-auto">
-          <h1 className="tw-mb-6 tw-text-sov-white tw-text-center">
-            {t(translations.common.maintenance)}
-          </h1>
-          <div className="tw-text-sm tw-font-normal tw-tracking-normal tw-text-center">
-            <Trans
-              i18nKey={translations.maintenance.transack}
-              components={[
-                <a
-                  href={discordInvite}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  className="tw-underline hover:tw-no-underline"
-                >
-                  x
-                </a>,
-              ]}
-            />
-          </div>
-          <div className="tw-text-center tw-mt-5">
-            <Button
-              text={t(translations.modal.close)}
-              size={ButtonSize.lg}
-              style={ButtonStyle.inverted}
-              onClick={() => setTransack(false)}
-            />
-          </div>
-        </div>
-      </Dialog>
     </>
   );
 };
diff --git a/src/app/hooks/useMaintenance.ts b/src/app/hooks/useMaintenance.ts
@@ -21,8 +21,9 @@ enum States {
   STOP_BORROW = 'stopBorrow',
   ADD_LIQUIDITY = 'addLiquidity',
   REMOVE_LIQUIDITY = 'removeLiquidity',
-  FASTBTC = 'fastBTC',
-  TRANSACK = 'transack',
+  FASTBTC_SEND = 'fastBTCSend',
+  FASTBTC_RECEIVE = 'fastBTCReceive',
+  TRANSAK = 'transak',
 
   BRIDGE = 'bridge',
   ETH_BRIDGE = 'ethBridge',

diff --git a/src/app/pages/FastBtcPage/components/Deposit/MainScreen.tsx b/src/app/pages/FastBtcPage/components/Deposit/MainScreen.tsx
@@ -8,15 +8,17 @@ import { DepositInstructions } from './DepositInstructions';
 import { FastBtcButton } from '../FastBtcButton';
 import { useAccount } from 'app/hooks/useAccount';
 import { ErrorBadge } from 'app/components/Form/ErrorBadge';
-import { NetworkAwareComponentProps } from '../../types';
+import { FastBtcDirectionType, NetworkAwareComponentProps } from '../../types';
 import { currentNetwork } from 'utils/classifiers';
 import { useMaintenance } from 'app/hooks/useMaintenance';
 import { discordInvite } from 'utils/classifiers';
 import { WalletContext } from '@sovryn/react-wallet';
 
-export const MainScreen: React.FC<NetworkAwareComponentProps> = ({
-  network,
-}) => {
+type MainScreenProps = NetworkAwareComponentProps & {
+  type: FastBtcDirectionType;
+};
+
+export const MainScreen: React.FC<MainScreenProps> = ({ network, type }) => {
   const account = useAccount();
   const {
     ready,
@@ -25,9 +27,13 @@ export const MainScreen: React.FC<NetworkAwareComponentProps> = ({
     addressError,
   } = useContext(DepositContext);
   const { t } = useTranslation();
-
   const { checkMaintenance, States } = useMaintenance();
-  const fastBtcLocked = checkMaintenance(States.FASTBTC);
+  const fastBtcReceiveLocked = checkMaintenance(States.FASTBTC_RECEIVE);
+  const transakLocked = checkMaintenance(States.TRANSAK);
+  const shouldDisableTransak = useMemo(
+    () => type === FastBtcDirectionType.TRANSAK && transakLocked,
+    [type, transakLocked],
+  );
 
   const { connect, connected, connecting } = useContext(WalletContext);
 
@@ -43,6 +49,13 @@ export const MainScreen: React.FC<NetworkAwareComponentProps> = ({
     [requestDepositAddress, account, prefix],
   );
 
+  const isDisabled = useMemo(() => {
+    if (fastBtcReceiveLocked || !ready || addressLoading) {
+      return true;
+    }
+    return shouldDisableTransak;
+  }, [addressLoading, fastBtcReceiveLocked, ready, shouldDisableTransak]);
+
   return (
     <>
       <div className="tw-w-full tw-mt-2.5 tw-px-2.5 tw-pb-8">
@@ -56,7 +69,7 @@ export const MainScreen: React.FC<NetworkAwareComponentProps> = ({
           {connected ? (
             <FastBtcButton
               text={t(translations.fastBtcPage.deposit.mainScreen.cta)}
-              disabled={!ready || addressLoading || fastBtcLocked}
+              disabled={isDisabled}
               loading={addressLoading}
               onClick={onContinueClick}
             />
@@ -69,11 +82,15 @@ export const MainScreen: React.FC<NetworkAwareComponentProps> = ({
             />
           )}
 
-          {fastBtcLocked && (
+          {(fastBtcReceiveLocked || shouldDisableTransak) && (
             <ErrorBadge
               content={
                 <Trans
-                  i18nKey={translations.maintenance.fastBTC}
+                  i18nKey={
+                    fastBtcReceiveLocked
+                      ? translations.maintenance.fastBTC
+                      : translations.maintenance.transack
+                  }
                   components={[
                     <a
                       href={discordInvite}

diff --git a/src/app/pages/FastBtcPage/components/Withdraw/AddressForm.tsx b/src/app/pages/FastBtcPage/components/Withdraw/AddressForm.tsx
@@ -34,7 +34,7 @@ export const AddressForm: React.FC = () => {
   const { address, set } = useContext(WithdrawContext);
   const { t } = useTranslation();
   const { checkMaintenance, States } = useMaintenance();
-  const fastBtcLocked = checkMaintenance(States.FASTBTC);
+  const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND);
 
   const [addressValidationState, setAddressValidationState] = useState(
     AddressValidationState.NONE,

diff --git a/src/app/pages/FastBtcPage/components/Withdraw/AmountForm.tsx b/src/app/pages/FastBtcPage/components/Withdraw/AmountForm.tsx
@@ -27,7 +27,7 @@ export const AmountForm: React.FC<NetworkAwareComponentProps> = ({
   const { amount, limits, set } = useContext(WithdrawContext);
   const { t } = useTranslation();
   const { checkMaintenance, States } = useMaintenance();
-  const fastBtcLocked = checkMaintenance(States.FASTBTC);
+  const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND);
 
   const balance = useBalance();
 

diff --git a/src/app/pages/FastBtcPage/components/Withdraw/MainScreen.tsx b/src/app/pages/FastBtcPage/components/Withdraw/MainScreen.tsx
@@ -17,7 +17,7 @@ export const MainScreen: React.FC<NetworkAwareComponentProps> = ({
   const { set } = useContext(WithdrawContext);
   const { t } = useTranslation();
   const { checkMaintenance, States } = useMaintenance();
-  const fastBtcLocked = checkMaintenance(States.FASTBTC);
+  const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND);
 
   const { connect, connected, connecting } = useContext(WalletContext);
 

diff --git a/src/app/pages/FastBtcPage/components/Withdraw/ReviewScreen.tsx b/src/app/pages/FastBtcPage/components/Withdraw/ReviewScreen.tsx
@@ -30,7 +30,7 @@ export const ReviewScreen: React.FC<ReviewScreenProps> = ({
   const { amount, address, aggregatorLimits } = useContext(WithdrawContext);
   const { t } = useTranslation();
   const { checkMaintenance, States } = useMaintenance();
-  const fastBtcLocked = checkMaintenance(States.FASTBTC);
+  const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND);
 
   const weiAmount = useWeiAmount(amount);
   const { value: calculateCurrentFeeWei, loading } = useCacheCallWithValue(

diff --git a/src/app/pages/FastBtcPage/containers/DepositContainer.tsx b/src/app/pages/FastBtcPage/containers/DepositContainer.tsx
@@ -237,7 +237,9 @@ export const DepositContainer: React.FC<DepositContainerProps> = ({
           )}
         >
           <div className={styles.container}>
-            {step === DepositStep.MAIN && <MainScreen network={network} />}
+            {step === DepositStep.MAIN && (
+              <MainScreen network={network} type={type} />
+            )}
             {step === DepositStep.VALIDATION && (
               <SignatureValidation onClick={handleValidation} type={type} />
             )}