Merge pull request #235 from bnb-chain/feat/sendConfirmPopup1230

feat: Send confirm popup
bnb-chain · Jan 3, 2025 · a7b2314 · a7b2314
2 parents 449fa8e + 2179e93
commit a7b2314
Show file tree

Hide file tree

Showing 35 changed files with 1,286 additions and 603 deletions.
diff --git a/.release/.changeset/hot-knives-pay.md b/.release/.changeset/hot-knives-pay.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+feat: Send confirm popup
diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
@@ -0,0 +1,11 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "@bnb-chain/canonical-bridge-sdk": "0.4.6",
+    "@bnb-chain/canonical-bridge-widget": "0.5.16"
+  },
+  "changesets": [
+    "hot-knives-pay"
+  ]
+}
diff --git a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
@@ -24,6 +24,9 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
       global: ({ colorMode }: { colorMode: ColorMode }) => ({
         body: {
           bg: theme.colors[colorMode].background[3],
+          '.bccb-widget-transaction-summary-modal-overlap': {
+            opacity: '0.88 !important',
+          },
         },
       }),
     },

diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.5.17-alpha.0
+
+### Patch Changes
+
+- feat: Send confirm popup
+
 ## 0.5.16
 
 ### Patch Changes

diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-widget",
-  "version": "0.5.16",
+  "version": "0.5.17-alpha.0",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

diff --git a/packages/canonical-bridge-widget/src/core/components/icons/InfoIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/InfoIcon.tsx
@@ -1,6 +1,11 @@
 import { Icon, IconProps } from '@bnb-chain/space';
 
-export function InfoIcon(props: IconProps) {
+interface InfoIconProps extends IconProps {
+  iconcolor?: string;
+  iconbgcolor?: string;
+}
+
+export function InfoIcon(props: InfoIconProps) {
   return (
     <Icon
       width="24px"
@@ -12,11 +17,11 @@ export function InfoIcon(props: IconProps) {
     >
       <path
         d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"
-        fill="#E1E2E5"
+        fill={props.iconbgcolor ?? '#E1E2E5'}
       />
       <path
         d="M11.9982 8.59998C11.7513 8.59998 11.5454 8.51695 11.3806 8.35088C11.2158 8.18483 11.1334 7.97835 11.1334 7.73145C11.1334 7.48455 11.2164 7.27869 11.3825 7.11387C11.5485 6.94906 11.755 6.86665 12.0019 6.86665C12.2488 6.86665 12.4547 6.94968 12.6195 7.11573C12.7843 7.2818 12.8667 7.48828 12.8667 7.73518C12.8667 7.98208 12.7837 8.18794 12.6176 8.35277C12.4516 8.51758 12.2451 8.59998 11.9982 8.59998ZM12.0001 17.1333C11.8519 17.1333 11.726 17.0815 11.6223 16.9778C11.5186 16.8741 11.4667 16.7481 11.4667 16.6V11.2C11.4667 11.0518 11.5186 10.9259 11.6223 10.8222C11.726 10.7185 11.8519 10.6667 12.0001 10.6667C12.1482 10.6667 12.2741 10.7185 12.3778 10.8222C12.4815 10.9259 12.5334 11.0518 12.5334 11.2V16.6C12.5334 16.7481 12.4815 16.8741 12.3778 16.9778C12.2741 17.0815 12.1482 17.1333 12.0001 17.1333Z"
-        fill="#373943"
+        fill={props.iconcolor ?? '#373943'}
       />
     </Icon>
   );

diff --git a/packages/canonical-bridge-widget/src/core/components/icons/TransferToIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/TransferToIcon.tsx
@@ -1,6 +1,10 @@
 import { Icon, IconProps } from '@bnb-chain/space';
 
-export function TransferToIcon(props: IconProps) {
+interface TransferToIconProps extends IconProps {
+  iconopacity?: string;
+}
+
+export function TransferToIcon(props: TransferToIconProps) {
   return (
     <Icon
       xmlns="http://www.w3.org/2000/svg"
@@ -13,7 +17,7 @@ export function TransferToIcon(props: IconProps) {
       <path
         d="M24.5304 6.52734C24.8233 6.23441 24.8232 5.75953 24.5303 5.46668L19.7567 0.694287C19.4638 0.40143 18.9889 0.401488 18.6961 0.694417C18.4032 0.987346 18.4033 1.46222 18.6962 1.75508L22.9393 5.9972L18.6972 10.2404C18.4044 10.5333 18.4044 11.0082 18.6973 11.301C18.9903 11.5939 19.4651 11.5938 19.758 11.3009L24.5304 6.52734ZM9.15527e-05 6.75L24.0001 6.74707L23.9999 5.24707L-9.15527e-05 5.25L9.15527e-05 6.75Z"
         fill={`url(#paint0_linear_2473_21184_)`}
-        fillOpacity="0.3"
+        fillOpacity={props?.iconopacity ?? '0.3'}
       />
     </Icon>
   );

diff --git a/packages/canonical-bridge-widget/src/core/locales/en.ts b/packages/canonical-bridge-widget/src/core/locales/en.ts
@@ -62,6 +62,12 @@ export const en = {
   'transfer.button.switch-network': 'Switch Network in Wallet',
   'transfer.button.wallet-connect': 'Connect Wallet',
   'transfer.button.switch-wallet': 'Switch Wallet',
+  'transfer.button.confirm-summary': 'Confirm Transfer',
+  'transfer.button.confirm-loading': 'Reloading Quotation',
+
+  'transfer.warning.confirm.to.address': 'Please double check the received token address:',
+  'transfer.warning.sol.balance':
+    'At least {min} SOL is required to proceed with this transaction.',
 
   'modal.approve.title': 'Approve Token',
   'modal.approve.desc.1': 'Please approve at least ',
@@ -81,6 +87,13 @@ export const en = {
   'modal.confirm.title': 'Waiting for Confirmation',
   'modal.confirm.desc': 'Confirm this transaction in your wallet',
 
+  'modal.summary.title': 'Confirm Transaction',
+
+  'modal.quote.error.title': 'Failed to Get the Quotation',
+  'modal.quote.error.desc':
+    'We’ve encountered an unknown issue on this route. Please try again later.',
+  'modal.quote.error.button.close': 'OK',
+
   'select-modal.tag.incompatible': 'Incompatible',
   'select-modal.search.no-result.title': 'No result found',
   'select-modal.search.no-result.warning':

diff --git a/...onical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx b/...onical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx
@@ -25,7 +25,6 @@ export const CBridgeOption = () => {
   const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount);
   const sendValue = useAppSelector((state) => state.transfer.sendValue);
   const routeError = useAppSelector((state) => state.transfer.routeError);
-  const routeFees = useAppSelector((state) => state.transfer.routeFees);
 
   const receiveAmt = useMemo(() => {
     return estimatedAmount &&
@@ -89,12 +88,7 @@ export const CBridgeOption = () => {
         toTokenInfo={toTokenInfo?.['cBridge']}
       />
       <EstimatedArrivalTime isError={isError} bridgeType={'cBridge'} />
-      <FeesInfo
-        isError={isError}
-        bridgeType="cBridge"
-        summary={routeFees?.['cBridge']?.summary ?? '--'}
-        breakdown={routeFees?.['cBridge']?.breakdown}
-      />
+      <FeesInfo isError={isError} bridgeType="cBridge" />
       <AllowedSendAmount
         position={'static'}
         isError={isAllowSendError}

diff --git a/...ical-bridge-widget/src/modules/aggregator/adapters/deBridge/components/DeBridgeOption.tsx b/...ical-bridge-widget/src/modules/aggregator/adapters/deBridge/components/DeBridgeOption.tsx
@@ -23,7 +23,6 @@ export const DeBridgeOption = ({}: DeBridgeOptionProps) => {
   const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo);
   const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount);
   const routeError = useAppSelector((state) => state.transfer.routeError);
-  const routeFees = useAppSelector((state) => state.transfer.routeFees);
 
   const receiveAmt = useMemo(() => {
     return estimatedAmount?.['deBridge'] &&
@@ -79,12 +78,7 @@ export const DeBridgeOption = ({}: DeBridgeOptionProps) => {
         toTokenInfo={toTokenInfo?.['deBridge']}
       />
       <EstimatedArrivalTime isError={isError} bridgeType={'deBridge'} />
-      <FeesInfo
-        isError={isError}
-        bridgeType="deBridge"
-        summary={routeFees?.['deBridge']?.summary ?? '--'}
-        breakdown={routeFees?.['deBridge']?.breakdown}
-      />
+      <FeesInfo isError={isError} bridgeType="deBridge" />
       <OtherRouteError bridgeType={'deBridge'} />
     </RouteWrapper>
   );

diff --git a/...al-bridge-widget/src/modules/aggregator/adapters/layerZero/components/LayerZeroOption.tsx b/...al-bridge-widget/src/modules/aggregator/adapters/layerZero/components/LayerZeroOption.tsx
@@ -22,7 +22,6 @@ export const LayerZeroOption = () => {
   const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo);
   const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount);
   const routeError = useAppSelector((state) => state.transfer.routeError);
-  const routeFees = useAppSelector((state) => state.transfer.routeFees);
 
   const receiveAmt = useMemo(() => {
     return estimatedAmount &&
@@ -33,6 +32,7 @@ export const LayerZeroOption = () => {
       ? `${formatNumber(
           Number(formatUnits(BigInt(estimatedAmount?.['layerZero']), getToDecimals()['layerZero'])),
           8,
+          false,
         )}`
       : '--';
   }, [estimatedAmount, toTokenInfo, sendValue, getToDecimals]);
@@ -70,12 +70,7 @@ export const LayerZeroOption = () => {
         toTokenInfo={toTokenInfo?.['layerZero']}
       />
       <EstimatedArrivalTime bridgeType={'layerZero'} />
-      <FeesInfo
-        isError={isError}
-        bridgeType="layerZero"
-        summary={routeFees?.['layerZero']?.summary ?? '--'}
-        breakdown={routeFees?.['layerZero']?.breakdown}
-      />
+      <FeesInfo isError={isError} bridgeType="layerZero" />
       <OtherRouteError bridgeType={'layerZero'} />
     </RouteWrapper>
   );

diff --git a/.../canonical-bridge-widget/src/modules/aggregator/adapters/meson/components/MesonOption.tsx b/.../canonical-bridge-widget/src/modules/aggregator/adapters/meson/components/MesonOption.tsx
@@ -19,7 +19,6 @@ export const MesonOption = () => {
   const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo);
   const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount);
   const routeError = useAppSelector((state) => state.transfer.routeError);
-  const routeFees = useAppSelector((state) => state.transfer.routeFees);
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
 
   const receiveAmt = useMemo(() => {
@@ -55,12 +54,7 @@ export const MesonOption = () => {
       <RouteName isError={isError} bridgeType="meson" />
       <RouteTitle isError={isError} receiveAmt={receiveAmt} toTokenInfo={toTokenInfo?.['meson']} />
       <EstimatedArrivalTime isError={isError} bridgeType={'meson'} />
-      <FeesInfo
-        isError={isError}
-        bridgeType="meson"
-        summary={routeFees?.meson?.summary ?? '--'}
-        breakdown={routeFees?.meson?.breakdown}
-      />
+      <FeesInfo isError={isError} bridgeType="meson" />
       {/* <AllowedSendAmount
         position={'static'}
         isError={isAllowSendError}

diff --git a/...ical-bridge-widget/src/modules/aggregator/adapters/stargate/components/StarGateOption.tsx b/...ical-bridge-widget/src/modules/aggregator/adapters/stargate/components/StarGateOption.tsx
@@ -25,7 +25,6 @@ export const StarGateOption = () => {
   const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo);
   const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount);
   const routeError = useAppSelector((state) => state.transfer.routeError);
-  const routeFees = useAppSelector((state) => state.transfer.routeFees);
 
   const receiveAmt = useMemo(() => {
     return estimatedAmount &&
@@ -79,12 +78,7 @@ export const StarGateOption = () => {
         toTokenInfo={toTokenInfo?.['stargate']}
       />
       <EstimatedArrivalTime isError={isError} bridgeType={'stargate'} />
-      <FeesInfo
-        isError={isError}
-        bridgeType="stargate"
-        summary={routeFees?.stargate?.summary ?? '--'}
-        breakdown={routeFees?.stargate?.breakdown}
-      />
+      <FeesInfo isError={isError} bridgeType="stargate" />
       <AllowedSendAmount
         position={'static'}
         isError={isAllowSendError}

diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useHandleTxFailure.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useHandleTxFailure.ts
@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { reportEvent } from '@/core/utils/gtm';
+import { useAppSelector } from '@/modules/store/StoreProvider';
+
+export const useHandleTxFailure = ({ onOpenFailedModal }: { onOpenFailedModal: () => void }) => {
+  const fromChain = useAppSelector((state) => state.transfer.fromChain);
+  const toChain = useAppSelector((state) => state.transfer.toChain);
+  const selectedToken = useAppSelector((state) => state.transfer.selectedToken);
+  const sendValue = useAppSelector((state) => state.transfer.sendValue);
+  const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo);
+
+  const handleFailure = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (e: any) => {
+      reportEvent({
+        id: 'transaction_bridge_fail',
+        params: {
+          item_category: fromChain?.name,
+          item_category2: toChain?.name,
+          token: selectedToken?.displaySymbol,
+          value: sendValue,
+          item_variant: transferActionInfo?.bridgeType,
+          message: JSON.stringify(e.message || e),
+          page_location: JSON.stringify(e.message || e),
+        },
+      });
+      onOpenFailedModal();
+    },
+    [
+      fromChain?.name,
+      onOpenFailedModal,
+      selectedToken?.displaySymbol,
+      sendValue,
+      toChain?.name,
+      transferActionInfo?.bridgeType,
+    ],
+  );
+
+  return { handleFailure };
+};
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/BridgeRoutes.tsx b/packages/canonical-bridge-widget/src/modules/transfer/BridgeRoutes.tsx
@@ -1,18 +1,77 @@
 import { useBreakpointValue, useIntl } from '@bnb-chain/space';
+import { useEffect } from 'react';
 
 import { TransferOverview } from '@/modules/transfer/components/TransferOverview';
 import { RoutesModal } from '@/modules/transfer/components/TransferOverview/modal/RoutesModal';
 import { useBridgeConfig } from '@/CanonicalBridgeProvider';
 import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider';
-import { setIsRoutesModalOpen } from '@/modules/transfer/action';
+import {
+  setIsGlobalFeeLoading,
+  setIsManuallyReload,
+  setIsRefreshing,
+  setIsRoutesModalOpen,
+} from '@/modules/transfer/action';
+import { TriggerType, useLoadingBridgeFees } from '@/modules/transfer/hooks/useLoadingBridgeFees';
 
 export function BridgeRoutes() {
   const { formatMessage } = useIntl();
   const dispatch = useAppDispatch();
 
   const isBase = useBreakpointValue({ base: true, lg: false }) ?? false;
   const { routeContentBottom } = useBridgeConfig();
+  const { loadingBridgeFees } = useLoadingBridgeFees();
+  const bridgeConfig = useBridgeConfig();
   const isRoutesModalOpen = useAppSelector((state) => state.transfer.isRoutesModalOpen);
+  const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo);
+  const isManuallyReload = useAppSelector((state) => state.transfer.isManuallyReload);
+
+  // Load estimated bridge fees every 30 seconds when there is bridge route available
+  useEffect(() => {
+    let mount = true;
+    if (!mount) return;
+    if (transferActionInfo) {
+      const params = {
+        triggerType: 'refresh' as TriggerType,
+      };
+
+      let interval = setInterval(() => {
+        dispatch(setIsGlobalFeeLoading(true));
+        loadingBridgeFees(params);
+      }, bridgeConfig.http.refetchingInterval ?? 30000);
+
+      // Stop and restart fee loading
+      if (isManuallyReload === true) {
+        dispatch(setIsManuallyReload(false));
+        dispatch(setIsRefreshing(true));
+        if (interval) {
+          clearInterval(interval);
+          dispatch(setIsGlobalFeeLoading(true));
+          loadingBridgeFees(params);
+          dispatch(setIsRefreshing(false));
+          interval = setInterval(() => {
+            dispatch(setIsGlobalFeeLoading(true));
+            loadingBridgeFees(params);
+          }, bridgeConfig.http?.refetchingInterval ?? 30000);
+        }
+      }
+
+      return () => {
+        mount = false;
+        interval && clearInterval(interval);
+        dispatch(setIsManuallyReload(false));
+      };
+    } else {
+      dispatch(setIsManuallyReload(false));
+      mount = false;
+      dispatch(setIsManuallyReload(false));
+    }
+  }, [
+    transferActionInfo,
+    loadingBridgeFees,
+    dispatch,
+    bridgeConfig.http.refetchingInterval,
+    isManuallyReload,
+  ]);
 
   if (isBase) {
     return (

diff --git a/packages/canonical-bridge-widget/src/modules/transfer/action.ts b/packages/canonical-bridge-widget/src/modules/transfer/action.ts
@@ -47,3 +47,14 @@ export const setIsToAddressChecked = createAction<ITransferState['isToAddressChe
 export const setIsRoutesModalOpen = createAction<ITransferState['isRoutesModalOpen']>(
   'transfer/setIsRoutesModalOpen',
 );
+
+export const setIsManuallyReload = createAction<ITransferState['isManuallyReload']>(
+  'transfer/setIsManuallyReload',
+);
+
+export const setIsFailedGetQuoteModalOpen = createAction<
+  ITransferState['isFailedGetQuoteModalOpen']
+>('transfer/setIsFailedGetQuoteModalOpen');
+export const setIsSummaryModalOpen = createAction<ITransferState['isSummaryModalOpen']>(
+  'transfer/setIsSummaryModalOpen',
+);