feat: Inform users about bridge withdrawal queue (#2118)

immutable · Aug 29, 2024 · 41cfffc · 41cfffc
1 parent f2cde24
commit 41cfffc
Show file tree

Hide file tree

Showing 6 changed files with 253 additions and 0 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/WithdrawalQueueDrawer/WithdrawalQueueDrawer.tsx b/packages/checkout/widgets-lib/src/components/WithdrawalQueueDrawer/WithdrawalQueueDrawer.tsx
@@ -0,0 +1,139 @@
+import {
+  Body,
+  Box,
+  Button,
+  CloudImage,
+  Drawer,
+  Heading,
+} from '@biom3/react';
+import { Checkout } from '@imtbl/checkout-sdk';
+import { Environment } from '@imtbl/config';
+import { useTranslation } from 'react-i18next';
+import { getRemoteImage } from '../../lib/utils';
+
+export enum WithdrawalQueueWarningType {
+  TYPE_THRESHOLD = 'exceedsThreshold',
+  TYPE_ACTIVE_QUEUE = 'queueActivated',
+}
+
+export interface WithdrawalQueueDrawerProps {
+  visible: boolean;
+  checkout: Checkout;
+  onCloseDrawer: () => void;
+  warningType?: WithdrawalQueueWarningType;
+  onAdjustAmount?: () => void;
+  threshold?: number;
+}
+export function WithdrawalQueueDrawer({
+  visible,
+  checkout,
+  warningType,
+  onCloseDrawer,
+  onAdjustAmount,
+  threshold,
+}: WithdrawalQueueDrawerProps) {
+  const { t } = useTranslation();
+
+  const bridgeWarningUrl = getRemoteImage(
+    checkout.config.environment ?? Environment.PRODUCTION,
+    '/notenougheth.svg',
+  );
+
+  return (
+    warningType && (
+      <Drawer
+        size={warningType === WithdrawalQueueWarningType.TYPE_THRESHOLD ? 'full' : 'threeQuarter'}
+        visible={visible}
+        onCloseDrawer={onCloseDrawer}
+        showHeaderBar={false}
+      >
+        <Drawer.Content
+          testId="withdraway-queue-bottom-sheet"
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <CloudImage
+              sx={{ paddingTop: 'base.spacing.x4', paddingBottom: 'base.spacing.x9' }}
+              use={(
+                <img
+                  src={bridgeWarningUrl}
+                  alt={t(`drawers.withdrawalQueue.${warningType}.heading`, { threshold })}
+                />
+              )}
+            />
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 'base.spacing.x4',
+                paddingX: 'base.spacing.x6',
+              }}
+            >
+              <Heading
+                size="small"
+                weight="bold"
+                sx={{ textAlign: 'center', paddingX: 'base.spacing.x6' }}
+              >
+                {t(`drawers.withdrawalQueue.${warningType}.heading`, { threshold })}
+              </Heading>
+
+              <Body
+                size="medium"
+                weight="regular"
+                sx={{
+                  color: 'base.color.text.body.secondary',
+                  textAlign: 'center',
+                  paddingX: 'base.spacing.x6',
+                }}
+              >
+                {t(`drawers.withdrawalQueue.${warningType}.body`, { threshold })}
+              </Body>
+            </Box>
+          </Box>
+
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              paddingX: 'base.spacing.x6',
+              width: '100%',
+            }}
+          >
+            {warningType === WithdrawalQueueWarningType.TYPE_THRESHOLD && (
+              <Button
+                size="large"
+                variant="primary"
+                sx={{ width: '100%', marginBottom: 'base.spacing.x5' }}
+                onClick={onAdjustAmount}
+              >
+                {t('drawers.withdrawalQueue.exceedsThreshold.buttons.cancel')}
+              </Button>
+            )}
+
+            <Button
+              size="large"
+              variant="primary"
+              sx={{ width: '100%', marginBottom: 'base.spacing.x10' }}
+              onClick={onCloseDrawer}
+            >
+              {t(`drawers.withdrawalQueue.${warningType}.buttons.proceed`)}
+            </Button>
+          </Box>
+        </Drawer.Content>
+      </Drawer>
+    )
+  );
+}
diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -797,6 +797,23 @@
         "body": "Make sure pop ups are enabled and follow the prompts in your wallet to connect",
         "actionButtonText": "Try again"
       }
+    },
+    "withdrawalQueue": {
+      "exceedsThreshold": {
+        "heading": "This withdraw will trigger a 24h delay. Withdraw less than {{threshold}} to avoid this.",
+        "body": "This withdrawal is over a security threshold that will trigger a 24hr delay. Withdraw an amount lower than {{threshold}} to have it actioned in ~20 minutes. Alternatively you can proceed and receive funds in 24hrs. ",
+        "buttons": {
+          "cancel": "Lower amount",
+          "proceed": "I understand"
+        }
+      },
+      "queueActivated": {
+        "heading": "This withdrawal will take 24hrs.",
+        "body": "We’re experiencing higher than normal congestion and wanted to let you know before you proceed.",
+        "buttons": {
+          "proceed": "I understand"
+        }
+      }
     }
   }
 }
diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -763,6 +763,23 @@
         "body": "ポップアップが有効になっていることを確認し、ウォレットのプロンプトに従って接続してください。",
         "actionButtonText": "もう一度試す"
       }
+    },
+    "withdrawalQueue": {
+      "exceedsThreshold": {
+        "heading": "この引き出しには 24 時間の遅延が発生します。これを回避するには、{{threshold}} 未満の引き出しを行ってください。",
+        "body": "この出金はセキュリティしきい値を超えているため、24 時間の遅延が発生します。{{threshold}} 未満の金額を出金すると、約 20 分で処理されます。または、続行して 24 時間以内に資金を受け取ることもできます。",
+        "buttons": {
+          "cancel": "低い金額",
+          "proceed": "わかりました"
+        }
+      },
+      "queueActivated": {
+        "heading": "この引き出しには24時間かかります。",
+        "body": "通常よりも混雑がひどいため、続行する前にお知らせします。",
+        "buttons": {
+          "proceed": "わかりました"
+        }
+      }
     }
   }
 }
diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -756,6 +756,23 @@
         "body": "팝업이 활성화되어 있는지 확인하고 지갑의 프롬프트를 따라 연결하세요.",
         "actionButtonText": "다시 시도"
       }
+    },
+    "withdrawalQueue": {
+      "exceedsThreshold": {
+        "heading": "이 인출은 24시간 지연을 유발합니다. 이를 피하려면 {{threshold}}보다 적게 인출하세요.",
+        "body": "이 출금은 보안 임계값을 초과하여 24시간 지연이 발생합니다. {{threshold}}보다 적은 금액을 출금하면 약 20분 내에 처리됩니다. 아니면 진행하여 24시간 내에 자금을 받을 수 있습니다.",
+        "buttons": {
+          "cancel": "낮은 금액",
+          "proceed": "이해합니다"
+        }
+      },
+      "queueActivated": {
+        "heading": "인출에는 24시간이 소요됩니다.",
+        "body": "평소보다 교통 체증이 심해 진행하기 전에 알려드리고자 합니다.",
+        "buttons": {
+          "proceed": "이해합니다"
+        }
+      }
     }
   }
 }
diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -756,6 +756,23 @@
         "body": "确保弹出窗口已启用，并按照钱包中的提示进行连接。",
         "actionButtonText": "重试"
       }
+    },
+    "withdrawalQueue": {
+      "exceedsThreshold": {
+        "heading": "此次提款将触发 24 小时延迟。提款金额不得超过 {{threshold}}，以避免出现此情况。",
+        "body": "此次提款超过安全阈值，将导致 24 小时延迟。提款金额低于 {{threshold}} 可在约 20 分钟内完成。或者，您也可以继续操作并在 24 小时内收到资金。",
+        "buttons": {
+          "cancel": "较低金额",
+          "proceed": "我明白"
+        }
+      },
+      "queueActivated": {
+        "heading": "此次提款将耗时 24 小时。",
+        "body": "我们正面临比平常更严重的拥堵，因此我们想在您继续前通知您。",
+        "buttons": {
+          "proceed": "我明白"
+        }
+      }
     }
   }
 }
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx
@@ -63,6 +63,10 @@ import { Fees } from '../../../components/Fees/Fees';
 import { formatBridgeFees } from '../functions/BridgeFees';
 import { RawImage } from '../../../components/RawImage/RawImage';
 import { getErc20Contract } from '../functions/TransferErc20';
+import {
+  WithdrawalQueueDrawer,
+  WithdrawalQueueWarningType,
+} from '../../../components/WithdrawalQueueDrawer/WithdrawalQueueDrawer';
 
 const testId = 'bridge-review-summary';
 
@@ -106,6 +110,12 @@ export function BridgeReviewSummary() {
   // Not enough ETH to cover gas
   const [showNotEnoughGasDrawer, setShowNotEnoughGasDrawer] = useState(false);
 
+  const [withdrawalQueueWarning, setWithdrawalQueueWarning] = useState<{
+    visible: boolean;
+    warningType?: WithdrawalQueueWarningType;
+    threshold?: number;
+  }>({ visible: false });
+
   const isTransfer = useMemo(() => from?.network === to?.network, [from, to]);
   const isDeposit = useMemo(
     () => (getL2ChainId(checkout.config) === to?.network),
@@ -204,6 +214,21 @@ export function BridgeReviewSummary() {
       gasMultiplier: 'auto',
     });
 
+    if (bundledTxn.withdrawalQueueActivated) {
+      setWithdrawalQueueWarning({
+        visible: true,
+        warningType: WithdrawalQueueWarningType.TYPE_ACTIVE_QUEUE,
+      });
+    } else if (bundledTxn.delayWithdrawalLargeAmount && bundledTxn.largeTransferThresholds) {
+      const threshold = utils.formatUnits(bundledTxn.largeTransferThresholds, token.decimals);
+
+      setWithdrawalQueueWarning({
+        visible: true,
+        warningType: WithdrawalQueueWarningType.TYPE_THRESHOLD,
+        threshold: parseInt(threshold, 10),
+      });
+    }
+
     const unsignedApproveTransaction = {
       contractToApprove: bundledTxn.contractToApprove,
       unsignedTx: bundledTxn.unsignedApprovalTx,
@@ -611,6 +636,27 @@ export function BridgeReviewSummary() {
           });
         }}
       />
+
+      <WithdrawalQueueDrawer
+        visible={withdrawalQueueWarning.visible}
+        warningType={withdrawalQueueWarning.warningType}
+        checkout={checkout}
+        onAdjustAmount={() => {
+          setWithdrawalQueueWarning({ visible: false });
+          viewDispatch({
+            payload: {
+              type: ViewActions.UPDATE_VIEW,
+              view: {
+                type: BridgeWidgetViews.BRIDGE_FORM,
+              },
+            },
+          });
+        }}
+        onCloseDrawer={() => {
+          setWithdrawalQueueWarning({ visible: false });
+        }}
+        threshold={withdrawalQueueWarning.threshold}
+      />
     </Box>
   );
 }