feat(canonical-bridge-widget): Update widget ui

bnb-chain · Nov 1, 2024 · c80c95e · c80c95e
1 parent 7df2257
commit c80c95e
Show file tree

Hide file tree

Showing 53 changed files with 641 additions and 234 deletions.
diff --git a/.release/.changeset/chilled-lizards-compare.md b/.release/.changeset/chilled-lizards-compare.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/cyan-boxes-judge.md b/.release/.changeset/cyan-boxes-judge.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/dirty-shoes-tap.md b/.release/.changeset/dirty-shoes-tap.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/early-drinks-bathe.md b/.release/.changeset/early-drinks-bathe.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/fuzzy-houses-complain.md b/.release/.changeset/fuzzy-houses-complain.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/long-ears-press.md b/.release/.changeset/long-ears-press.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/nasty-candles-marry.md b/.release/.changeset/nasty-candles-marry.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget
diff --git a/.release/.changeset/nice-boxes-taste.md b/.release/.changeset/nice-boxes-taste.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
@@ -6,9 +6,26 @@
     "@bnb-chain/canonical-bridge-widget": "0.1.4"
   },
   "changesets": [
+    "chilled-lizards-compare",
+    "cyan-boxes-judge",
+    "dirty-shoes-tap",
+    "early-drinks-bathe",
+    "fuzzy-houses-complain",
+    "long-ears-press",
     "metal-steaks-drive",
+    "nasty-candles-marry",
+    "nice-boxes-taste",
     "polite-monkeys-share",
     "rare-grapes-act",
-    "sixty-scissors-protect"
+    "rotten-nails-drop",
+    "silly-lions-clap",
+    "sixty-scissors-protect",
+    "slimy-clocks-rule",
+    "spotty-trainers-kick",
+    "swift-rivers-accept",
+    "swift-suits-worry",
+    "tasty-pianos-raise",
+    "thin-snakes-cheat",
+    "tough-colts-compare"
   ]
 }
diff --git a/.release/.changeset/rotten-nails-drop.md b/.release/.changeset/rotten-nails-drop.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/silly-lions-clap.md b/.release/.changeset/silly-lions-clap.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/slimy-clocks-rule.md b/.release/.changeset/slimy-clocks-rule.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/spotty-trainers-kick.md b/.release/.changeset/spotty-trainers-kick.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widge ui
diff --git a/.release/.changeset/swift-rivers-accept.md b/.release/.changeset/swift-rivers-accept.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/swift-suits-worry.md b/.release/.changeset/swift-suits-worry.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/tasty-pianos-raise.md b/.release/.changeset/tasty-pianos-raise.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/thin-snakes-cheat.md b/.release/.changeset/thin-snakes-cheat.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/.release/.changeset/tough-colts-compare.md b/.release/.changeset/tough-colts-compare.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update widget ui
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md
@@ -1,5 +1,107 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.3.2-alpha.18
+
+### Patch Changes
+
+- Update widget
+
+## 0.3.2-alpha.17
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.16
+
+### Patch Changes
+
+- Update widge ui
+
+## 0.3.2-alpha.15
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.14
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.13
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.12
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.11
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.10
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.9
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.8
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.7
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.6
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.5
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.4
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.3
+
+### Patch Changes
+
+- Update widget ui
+
+## 0.3.2-alpha.2
+
+### Patch Changes
+
+- Update widget ui
+
 ## 0.3.2-alpha.1
 
 ### 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.3.2-alpha.1",
+  "version": "0.3.2-alpha.18",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

diff --git a/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx b/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx
@@ -17,6 +17,7 @@ export const InfoTooltip = (props: InfoTooltipProps) => {
   const isBase = useBreakpointValue({ base: true, md: false }) ?? false;
   const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
 
+  if (!restProps.label) return null;
   return (
     <Tooltip
       hasArrow

diff --git a/packages/canonical-bridge-widget/src/core/components/icons/ExLinkIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/ExLinkIcon.tsx
@@ -10,23 +10,10 @@ export function ExLinkIcon(props: IconProps) {
       fill="none"
       {...props}
     >
-      <mask
-        id="mask0_26135_32330_ex_link"
-        style={{ maskType: 'alpha' }}
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="16"
-        height="16"
-      >
-        <rect width="16" height="16" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_26135_32330_ex_link)">
-        <path
-          d="M3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H7.33333C7.52222 2 7.68056 2.06389 7.80833 2.19167C7.93611 2.31944 8 2.47778 8 2.66667C8 2.85556 7.93611 3.01389 7.80833 3.14167C7.68056 3.26944 7.52222 3.33333 7.33333 3.33333H3.33333V12.6667H12.6667V8.66667C12.6667 8.47778 12.7306 8.31944 12.8583 8.19167C12.9861 8.06389 13.1444 8 13.3333 8C13.5222 8 13.6806 8.06389 13.8083 8.19167C13.9361 8.31944 14 8.47778 14 8.66667V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM12.6667 4.26667L6.93333 10C6.81111 10.1222 6.65556 10.1833 6.46667 10.1833C6.27778 10.1833 6.12222 10.1222 6 10C5.87778 9.87778 5.81667 9.72222 5.81667 9.53333C5.81667 9.34444 5.87778 9.18889 6 9.06667L11.7333 3.33333H10C9.81111 3.33333 9.65278 3.26944 9.525 3.14167C9.39722 3.01389 9.33333 2.85556 9.33333 2.66667C9.33333 2.47778 9.39722 2.31944 9.525 2.19167C9.65278 2.06389 9.81111 2 10 2H13.3333C13.5222 2 13.6806 2.06389 13.8083 2.19167C13.9361 2.31944 14 2.47778 14 2.66667V6C14 6.18889 13.9361 6.34722 13.8083 6.475C13.6806 6.60278 13.5222 6.66667 13.3333 6.66667C13.1444 6.66667 12.9861 6.60278 12.8583 6.475C12.7306 6.34722 12.6667 6.18889 12.6667 6V4.26667Z"
-          fill="currentColor"
-        />
-      </g>
+      <path
+        d="M3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H7.33333C7.52222 2 7.68056 2.06389 7.80833 2.19167C7.93611 2.31944 8 2.47778 8 2.66667C8 2.85556 7.93611 3.01389 7.80833 3.14167C7.68056 3.26944 7.52222 3.33333 7.33333 3.33333H3.33333V12.6667H12.6667V8.66667C12.6667 8.47778 12.7306 8.31944 12.8583 8.19167C12.9861 8.06389 13.1444 8 13.3333 8C13.5222 8 13.6806 8.06389 13.8083 8.19167C13.9361 8.31944 14 8.47778 14 8.66667V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM12.6667 4.26667L6.93333 10C6.81111 10.1222 6.65556 10.1833 6.46667 10.1833C6.27778 10.1833 6.12222 10.1222 6 10C5.87778 9.87778 5.81667 9.72222 5.81667 9.53333C5.81667 9.34444 5.87778 9.18889 6 9.06667L11.7333 3.33333H10C9.81111 3.33333 9.65278 3.26944 9.525 3.14167C9.39722 3.01389 9.33333 2.85556 9.33333 2.66667C9.33333 2.47778 9.39722 2.31944 9.525 2.19167C9.65278 2.06389 9.81111 2 10 2H13.3333C13.5222 2 13.6806 2.06389 13.8083 2.19167C13.9361 2.31944 14 2.47778 14 2.66667V6C14 6.18889 13.9361 6.34722 13.8083 6.475C13.6806 6.60278 13.5222 6.66667 13.3333 6.66667C13.1444 6.66667 12.9861 6.60278 12.8583 6.475C12.7306 6.34722 12.6667 6.18889 12.6667 6V4.26667Z"
+        fill="currentColor"
+      />
     </Icon>
   );
 }
diff --git a/packages/canonical-bridge-widget/src/core/components/icons/WarningIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/WarningIcon.tsx
@@ -0,0 +1,15 @@
+import { Icon, IconProps } from '@bnb-chain/space';
+
+export function WarningIcon(props: IconProps) {
+  return (
+    <Icon width="24px" height="24px" viewBox="0 0 24 24" fill="none" {...props}>
+      <g id="warning-fill">
+        <path
+          id="warning"
+          d="M2.72674 21C2.54341 21 2.37674 20.9542 2.22674 20.8625C2.07674 20.7708 1.96008 20.65 1.87674 20.5C1.79341 20.35 1.74758 20.1875 1.73924 20.0125C1.73091 19.8375 1.77674 19.6667 1.87674 19.5L11.1267 3.5C11.2267 3.33333 11.3559 3.20833 11.5142 3.125C11.6726 3.04167 11.8351 3 12.0017 3C12.1684 3 12.3309 3.04167 12.4892 3.125C12.6476 3.20833 12.7767 3.33333 12.8767 3.5L22.1267 19.5C22.2267 19.6667 22.2726 19.8375 22.2642 20.0125C22.2559 20.1875 22.2101 20.35 22.1267 20.5C22.0434 20.65 21.9267 20.7708 21.7767 20.8625C21.6267 20.9542 21.4601 21 21.2767 21H2.72674ZM12.0017 18C12.2851 18 12.5226 17.9042 12.7142 17.7125C12.9059 17.5208 13.0017 17.2833 13.0017 17C13.0017 16.7167 12.9059 16.4792 12.7142 16.2875C12.5226 16.0958 12.2851 16 12.0017 16C11.7184 16 11.4809 16.0958 11.2892 16.2875C11.0976 16.4792 11.0017 16.7167 11.0017 17C11.0017 17.2833 11.0976 17.5208 11.2892 17.7125C11.4809 17.9042 11.7184 18 12.0017 18ZM12.0017 15C12.2851 15 12.5226 14.9042 12.7142 14.7125C12.9059 14.5208 13.0017 14.2833 13.0017 14V11C13.0017 10.7167 12.9059 10.4792 12.7142 10.2875C12.5226 10.0958 12.2851 10 12.0017 10C11.7184 10 11.4809 10.0958 11.2892 10.2875C11.0976 10.4792 11.0017 10.7167 11.0017 11V14C11.0017 14.2833 11.0976 14.5208 11.2892 14.7125C11.4809 14.9042 11.7184 15 12.0017 15Z"
+          fill="#FF8A38"
+        />
+      </g>
+    </Icon>
+  );
+}
diff --git a/packages/canonical-bridge-widget/src/core/hooks/useDebounce.ts b/packages/canonical-bridge-widget/src/core/hooks/useDebounce.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 export const useDebounce = (value: any, delay = 500) => {
-  const [debouncedValue, setDebouncedValue] = useState('');
+  const [debouncedValue, setDebouncedValue] = useState(value);
   const timerRef = useRef<any>();
 
   useEffect(() => {

diff --git a/packages/canonical-bridge-widget/src/core/locales/en.ts b/packages/canonical-bridge-widget/src/core/locales/en.ts
@@ -57,7 +57,7 @@ export const en = {
 
   'transfer.button.confirm': 'Send',
   'transfer.button.approve': 'Approve',
-  'transfer.button.switch-network': 'Switch Network',
+  'transfer.button.switch-network': 'Switch Network in Wallet',
   'transfer.button.wallet-connect': 'Connect Wallet',
   'transfer.button.switch-wallet': 'Switch Wallet',
 
@@ -98,6 +98,7 @@ export const en = {
 
   'wallet.network.switch-network': 'Please switch the network',
   'wallet.network.unknown-network': 'Unsupported Network',
+  'wallet.network.unknown-network-mobile': 'Network',
   'wallet.button.connect-wallet': 'Connect Wallet',
   'wallet.network.wrong-network': 'Wrong network',
   'wallet.error.switch-network':

diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/action.ts b/packages/canonical-bridge-widget/src/modules/aggregator/action.ts
@@ -16,3 +16,7 @@ export const setIsLoadingTokenPrices = createAction<IAggregatorState['isLoadingT
 export const setIsLoadingTokenBalances = createAction<IAggregatorState['isLoadingTokenBalances']>(
   'aggregator/setIsLoadingTokenBalances',
 );
+
+export const setCBridgeMaxMinSendAmt = createAction<IAggregatorState['bridgeMaxMin']['cBridge']>(
+  'aggregator/setCBridgeMaxMinSendAmt',
+);
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
@@ -54,7 +54,7 @@ export const CBridgeOption = () => {
         }),
       );
     }
-  }, [dispatch, estimatedAmount]);
+  }, [dispatch, estimatedAmount?.['cBridge']?.estimated_receive_amt]);
 
   const isError = useMemo(
     () =>

diff --git a/...al-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx b/...al-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx
@@ -0,0 +1,18 @@
+import { memo, useEffect } from 'react';
+
+import { useCBridgeSendMaxMin } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin';
+import { useAppDispatch } from '@/modules/store/StoreProvider';
+import { setCBridgeMaxMinSendAmt } from '@/modules/aggregator/action';
+
+interface CBridgeSendMaxMinProps {}
+
+export const CBridgeSendMaxMin = memo<CBridgeSendMaxMinProps>(function CBridgeSendMaxMin() {
+  const { minMaxSendAmt: cBridgeAllowedAmt } = useCBridgeSendMaxMin();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(setCBridgeMaxMinSendAmt(cBridgeAllowedAmt));
+  }, [cBridgeAllowedAmt, dispatch]);
+
+  return null;
+});
diff --git a/...nical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts b/...nical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts
@@ -18,6 +18,7 @@ export const useCBridgeSendMaxMin = (isDisabled = false) => {
     min: '0',
     max: '0',
   });
+
   useEffect(() => {
     (async () => {
       try {
@@ -29,7 +30,7 @@ export const useCBridgeSendMaxMin = (isDisabled = false) => {
           isDisabled ||
           !bridgeSDK?.cBridge
         ) {
-          return;
+          return setMinMaxSendAmt({ min: '0', max: '0' });
         }
         const { min, max } = await bridgeSDK.cBridge.getSendRange({
           bridgeAddress: bridgeAddress as `0x${string}`,
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,7 +54,7 @@ export const CBridgeOption = () => { @@
             }),
           );
         }
-      }, [dispatch, estimatedAmount]);
+      }, [dispatch, estimatedAmount?.['cBridge']?.estimated_receive_amt]);
       const isError = useMemo(
         () =>
@@ Expand Down @@