From 101199dd999c005e6ccaa505313697c572e26b5f Mon Sep 17 00:00:00 2001 From: aidencao Date: Wed, 23 Oct 2024 10:37:49 +0800 Subject: [PATCH 01/23] feat: Some ui updates & Header chain switch update --- .release/.changeset/big-spoons-clean.md | 5 + apps/canonical-bridge-ui/core/locales/en.ts | 1 + .../hooks/useDefaultSelectedInfo.ts | 4 +- .../modules/aggregator/hooks/useSelection.ts | 78 +++++---- .../components/Button/SwitchNetworkButton.tsx | 5 +- .../transfer/components/FromSection/index.tsx | 37 ++-- .../components/NetWorkSection/index.tsx | 66 ++++--- .../components/ReceiveInfo/ReceiveLoading.tsx | 68 ++++---- .../transfer/components/ReceiveInfo/index.tsx | 132 +++++++------- .../SendInput/InputValidationMessage.tsx | 5 +- .../transfer/components/ToSection/index.tsx | 37 ++-- .../components/TransferOverview/index.tsx | 52 +++--- .../src/modules/transfer/index.tsx | 15 +- .../wallet/components/NetworkStatus/index.tsx | 165 +++++++++++++----- 14 files changed, 380 insertions(+), 290 deletions(-) create mode 100644 .release/.changeset/big-spoons-clean.md diff --git a/.release/.changeset/big-spoons-clean.md b/.release/.changeset/big-spoons-clean.md new file mode 100644 index 00000000..ad2eb2a0 --- /dev/null +++ b/.release/.changeset/big-spoons-clean.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Some ui updates & Header chain switch update diff --git a/apps/canonical-bridge-ui/core/locales/en.ts b/apps/canonical-bridge-ui/core/locales/en.ts index 125000c6..2071c5a3 100644 --- a/apps/canonical-bridge-ui/core/locales/en.ts +++ b/apps/canonical-bridge-ui/core/locales/en.ts @@ -87,6 +87,7 @@ export const en = { 'select-modal.destination.incompatible.tooltip': 'The token you’ve selected is incompatible with this network. Please select another token.', + 'wallet.network.switch-network': 'Please switch the network', 'wallet.network.wrong-network': 'Wrong network', 'wallet.error.switch-network': 'An error occurred when attempting to switch the network. Please select another network or try again.', diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts index 4199d278..29f52dd5 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts @@ -1,4 +1,5 @@ import { useEffect } from 'react'; +import { useAccount } from 'wagmi'; import { useAppDispatch } from '@/modules/store/StoreProvider'; import { setSendValue } from '@/modules/transfer/action'; @@ -9,6 +10,7 @@ export function useDefaultSelectedInfo() { const { isReady, defaultSelectedInfo } = useAggregator(); const { selectDefault } = useSelection(); const dispatch = useAppDispatch(); + const { chainId } = useAccount(); useEffect(() => { if (isReady) { @@ -16,5 +18,5 @@ export function useDefaultSelectedInfo() { dispatch(setSendValue(defaultSelectedInfo.amount)); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isReady]); + }, [isReady, chainId]); } diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts index 36e622c3..94a34106 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts @@ -11,7 +11,9 @@ import { getTokenBalances } from '@/modules/aggregator/shared/getTokenBalances'; import { sortTokens } from '@/modules/aggregator/shared/sortTokens'; export function useSelection() { - const { getFromChains, getToChains, getTokens, getToToken, adapters } = useAggregator(); + const { chainId } = useAccount(); + const { getFromChains, getToChains, getTokens, getToToken, adapters, defaultSelectedInfo } = + useAggregator(); const fromChain = useAppSelector((state) => state.transfer.fromChain); const toChain = useAppSelector((state) => state.transfer.toChain); @@ -72,6 +74,38 @@ export function useSelection() { }); }; + const selectFromChain = async (tmpFromChain: IBridgeChain) => { + // After selecting fromChain, if toChain becomes incompatible, reselect the first compatible network in toChain list. + const toChains = getToChains({ + fromChainId: tmpFromChain.id, + }); + + const tmpToChain = + toChains.find((c) => isChainOrTokenCompatible(c) && c.id === toChain?.id) ?? + toChains.find((c) => isChainOrTokenCompatible(c) && c.chainType !== 'link'); + + const tmpTokens = await getSortedTokens({ + fromChainId: tmpFromChain.id, + tokens: getTokens({ + fromChainId: tmpFromChain.id, + toChainId: tmpToChain?.id, + }), + }); + + const newToken = + tmpTokens.find( + (t) => + isChainOrTokenCompatible(t) && + t.displaySymbol.toUpperCase() === selectedToken?.displaySymbol.toUpperCase(), + ) ?? tmpTokens.find((t) => isChainOrTokenCompatible(t)); + + updateSelectedInfo({ + tmpToken: newToken, + tmpFromChain, + tmpToChain, + }); + }; + return { async selectDefault({ fromChainId, @@ -87,6 +121,15 @@ export function useSelection() { bridgeTypes.map((item) => [item, { symbol: tokenSymbol }]), ) as any as IBridgeToken; + if (chainId && chainId !== defaultSelectedInfo.fromChainId) { + const fromChains = getFromChains({}); + const chain = fromChains.find((chain) => chain.id === chainId); + if (chain) { + selectFromChain(chain); + return; + } + } + const fromChains = getFromChains({ toChainId, token, @@ -116,38 +159,7 @@ export function useSelection() { token: newToken, }); }, - - async selectFromChain(tmpFromChain: IBridgeChain) { - // After selecting fromChain, if toChain becomes incompatible, reselect the first compatible network in toChain list. - const toChains = getToChains({ - fromChainId: tmpFromChain.id, - }); - const tmpToChain = - toChains.find((c) => isChainOrTokenCompatible(c) && c.id === toChain?.id) ?? - toChains.find((c) => isChainOrTokenCompatible(c) && c.chainType !== 'link'); - - const tmpTokens = await getSortedTokens({ - fromChainId: tmpFromChain.id, - tokens: getTokens({ - fromChainId: tmpFromChain.id, - toChainId: tmpToChain?.id, - }), - }); - - const newToken = - tmpTokens.find( - (t) => - isChainOrTokenCompatible(t) && - t.displaySymbol.toUpperCase() === selectedToken?.displaySymbol.toUpperCase(), - ) ?? tmpTokens.find((t) => isChainOrTokenCompatible(t)); - - updateSelectedInfo({ - tmpToken: newToken, - tmpFromChain, - tmpToChain, - }); - }, - + selectFromChain, async selectToChain(tmpToChain: IBridgeChain) { const fromChainId = fromChain!.id; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx index 4bde5ffe..afd5819e 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx @@ -1,10 +1,10 @@ -import { Button, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; +import { Button, useColorMode, useIntl, useTheme, ButtonProps } from '@bnb-chain/space'; import { useAppSelector } from '@/modules/store/StoreProvider'; import { useEvmSwitchChain } from '@/modules/wallet/hooks/useEvmSwitchChain'; import { reportEvent } from '@/core/utils/gtm'; -export const SwitchNetworkButton = () => { +export const SwitchNetworkButton = (props: ButtonProps) => { const { formatMessage } = useIntl(); const fromChain = useAppSelector((state) => state.transfer.fromChain); @@ -35,6 +35,7 @@ export const SwitchNetworkButton = () => { }); } }} + {...props} > {formatMessage({ id: 'transfer.button.switch-network' })} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx index c80b11ec..3f143046 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx @@ -1,12 +1,4 @@ -import { - Flex, - Typography, - useBreakpointValue, - useColorMode, - useDisclosure, - useIntl, - useTheme, -} from '@bnb-chain/space'; +import { Flex, Typography, useColorMode, useDisclosure, useIntl, useTheme } from '@bnb-chain/space'; import { SelectButton } from '@/modules/transfer/components/SelectButton'; import { useAppSelector } from '@/modules/store/StoreProvider'; @@ -16,7 +8,6 @@ import { SourceNetworkModal } from '@/modules/aggregator/components/SelectModal/ export function FromSection() { const { colorMode } = useColorMode(); const { isOpen, onClose, onOpen } = useDisclosure(); - const isBase = useBreakpointValue({ base: true, md: false }) ?? false; const { formatMessage } = useIntl(); const fromChain = useAppSelector((state) => state.transfer.fromChain); @@ -24,18 +15,20 @@ export function FromSection() { return ( - {isBase ? ( - - - {formatMessage({ id: 'from.section.title' })} - - - ) : null} + + + {formatMessage({ id: 'from.section.title' })} + + { const { formatMessage } = useIntl(); const { colorMode } = useColorMode(); const theme = useTheme(); - const isBase = useBreakpointValue({ base: true, md: false }) ?? false; return ( - {!isBase ? ( - <> - - - - {formatMessage({ id: 'from.section.title' })} - - - - - {formatMessage({ id: 'to.section.title' })} - - - {' '} - - ) : null} + + + + {formatMessage({ id: 'from.section.title' })} + + + + + {formatMessage({ id: 'to.section.title' })} + + + {' '} { gap={['16px', '16px', '16px', '12px']} > - + diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx index f34820c6..dd20ac3c 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx @@ -1,41 +1,45 @@ -import { Flex, Skeleton, SkeletonCircle, useBreakpointValue } from '@bnb-chain/space'; +import { Flex, Skeleton, SkeletonCircle } from '@bnb-chain/space'; export const ReceiveLoading = () => { - const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; - - return !isBase ? ( - - - - - - - - - ) : ( - - - - - - + return ( + <> + - - + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + - - - + ); }; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx index 4317d92c..63c9366f 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx @@ -1,4 +1,12 @@ -import { Box, Flex, useBreakpointValue, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; +import { + Box, + Flex, + useBreakpointValue, + useColorMode, + useIntl, + useTheme, + Collapse, +} from '@bnb-chain/space'; import { useEffect, useMemo } from 'react'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; @@ -116,13 +124,13 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { const isHideSection = useMemo(() => { // no receive amount and some routes are displayed + if (!Number(sendValue)) return true; if (isGlobalFeeLoading) return false; return ( - !Number(sendValue) || - (!isBase && - estimatedAmount && - !Object.values(estimatedAmount).every((element) => element === undefined) && - !receiveAmt) + !isBase && + estimatedAmount && + !Object.values(estimatedAmount).every((element) => element === undefined) && + !receiveAmt ); }, [sendValue, estimatedAmount, isBase, receiveAmt, isGlobalFeeLoading]); @@ -132,61 +140,65 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { ); }, [estimatedAmount]); - return !isHideSection ? ( - - - - {formatMessage({ id: 'you.receive.title' })} - - {isBase && !isHideRouteButton ? : null} - - - {debouncedSendValue === sendValue ? ( - receiveAmt && !isGlobalFeeLoading ? ( - <> - {isBase && } - {isBase && } - {bridgeType && ( - - )} - - - - - - - ) : !receiveAmt && !isGlobalFeeLoading ? ( - + return ( + + + + + {formatMessage({ id: 'you.receive.title' })} + + {isBase && !isHideRouteButton ? : null} + + + {debouncedSendValue === sendValue ? ( + receiveAmt && !isGlobalFeeLoading ? ( + <> + {isBase && } + {isBase && } + {bridgeType && ( + + )} + + + + + + + ) : !receiveAmt && !isGlobalFeeLoading ? ( + + ) : ( + + ) ) : ( - ) - ) : ( - - )} + )} + - - ) : null; + + ); }; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx index a89174be..b3068832 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx @@ -1,4 +1,4 @@ -import { Box, useBreakpointValue, useColorMode, useTheme } from '@bnb-chain/space'; +import { Box, useColorMode, useTheme } from '@bnb-chain/space'; import { useEffect, useState } from 'react'; import { useAccount } from 'wagmi'; @@ -13,7 +13,6 @@ export const InputValidationMessage = () => { const { validateInput } = useInputValidation(); const { chain } = useAccount(); const dispatch = useAppDispatch(); - const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo); const theme = useTheme(); @@ -65,7 +64,7 @@ export const InputValidationMessage = () => { fontSize={'12px'} fontWeight={400} lineHeight={'16px'} - position={isBase ? 'static' : 'absolute'} + position={{ base: 'static', lg: 'absolute' }} top={`calc(100% + ${'8px'})`} > {balanceInputError ?? error?.text} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx index d37568b3..ad33a7c6 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx @@ -1,12 +1,4 @@ -import { - Flex, - Typography, - theme, - useBreakpointValue, - useColorMode, - useDisclosure, - useIntl, -} from '@bnb-chain/space'; +import { Flex, Typography, theme, useColorMode, useDisclosure, useIntl } from '@bnb-chain/space'; import { SelectButton } from '@/modules/transfer/components/SelectButton'; import { useAppSelector } from '@/modules/store/StoreProvider'; @@ -16,25 +8,26 @@ import { DestinationNetworkModal } from '@/modules/aggregator/components/SelectM export function ToSection() { const { isOpen, onClose, onOpen } = useDisclosure(); const { formatMessage } = useIntl(); - const isBase = useBreakpointValue({ base: true, md: false }) ?? false; const { colorMode } = useColorMode(); const toChain = useAppSelector((state) => state.transfer.toChain); return ( - {isBase ? ( - - - {formatMessage({ id: 'to.section.title' })} - - - ) : null} + + + {formatMessage({ id: 'to.section.title' })} + + - {showRoute && ( + - {!isBase ? ( - - {formatMessage({ id: 'route.title' })} - {!options.length || isGlobalFeeLoading ? ( - - ) : !isBase ? ( - - ) : null} - - ) : null} + + {formatMessage({ id: 'route.title' })} + {!options.length || isGlobalFeeLoading ? ( + + ) : !isBase ? ( + + ) : null} + - )} + {routeContentBottom ? routeContentBottom : null} ); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx index 4ad1c877..d96138b4 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx @@ -53,12 +53,12 @@ export function TransferWidget() { {appearance.bridgeTitle && ( {appearance.bridgeTitle} @@ -70,11 +70,12 @@ export function TransferWidget() { - {isBase ? routeContentBottom : null} + {routeContentBottom} - {!isBase ? ( + - ) : ( + + {isBase && ( state.transfer.fromChain); - + const thresholdRef = useRef(false); const theme = useTheme(); const { colorMode } = useColorMode(); const { chain, chainId } = useAccount(); const { formatMessage } = useIntl(); const fromChains = useFromChains(); const { switchChain } = useEvmSwitchChain(); - const bridgeChains = useFromChains(); + useEffect(() => { + thresholdRef.current = true; + setTimeout(() => { + thresholdRef.current = false; + }, 1000); + }, [chainId]); + + const switchDropdown = (onClose: () => void) => ( + + + + + {formatMessage({ id: 'wallet.network.switch-network' })} + + + + + + + {fromChain!.name} + + + + + + + + + ); + if (!chain) { - return null; + if (!chainId || !fromChain) return null; + + return ( + + {({ isOpen, onClose }) => { + return ( + <> + + + + + Unknown + + + + + {switchDropdown(onClose)} + + ); + }} + + ); } - const isWrongNetwork = !!fromChain && fromChain.id !== chain.id; + const isWrongNetwork = !!fromChain && fromChain.id !== chain.id && !thresholdRef.current; const iconUrl = bridgeChains.find((e) => e.id === chain.id)?.icon; return ( - {({ isOpen }) => { + {({ isOpen, onClose }) => { return ( <> - + {isWrongNetwork ? ( + + ) : ( + + )} {chain.name} - {isWrongNetwork && ( - - {formatMessage({ id: 'wallet.network.wrong-network' })} - - )} - - {fromChains.map((item) => { - const isSelected = chainId === item.id; + {isWrongNetwork ? ( + switchDropdown(onClose) + ) : ( + + {fromChains.map((item) => { + const isSelected = chainId === item.id; - return ( - { - if (chainId !== item.id) { - switchChain({ - chainId: item.id, - }); + return ( + - - - {item.name} - - {isSelected && } - - ); - })} - + bg={isSelected ? theme.colors[colorMode].popover.selected : undefined} + onClick={() => { + if (chainId !== item.id) { + switchChain({ + chainId: item.id, + }); + } + }} + > + + + {item.name} + + {isSelected && } + + ); + })} + + )} ); }} From 36beeb4cd1172888c0e2ff2c8995f9d0bb94f063 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Wed, 23 Oct 2024 11:14:30 +0800 Subject: [PATCH 02/23] feat: Release new alpha version --- .gitignore | 1 + .release/.changeset/pre.json | 11 +++++++++++ packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- 4 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 .release/.changeset/pre.json diff --git a/.gitignore b/.gitignore index 70dc58c8..d1ee4618 100644 --- a/.gitignore +++ b/.gitignore @@ -73,3 +73,4 @@ common/autoinstallers/*/.npmrc .env*.local .pnpm-store +.release/.npmrc \ No newline at end of file diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json new file mode 100644 index 00000000..17a5b6a9 --- /dev/null +++ b/.release/.changeset/pre.json @@ -0,0 +1,11 @@ +{ + "mode": "pre", + "tag": "alpha", + "initialVersions": { + "@bnb-chain/canonical-bridge-sdk": "0.1.2", + "@bnb-chain/canonical-bridge-widget": "0.1.2" + }, + "changesets": [ + "big-spoons-clean" + ] +} diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 03e2d8ec..58ec0cf5 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.1.3-alpha.0 + +### Patch Changes + +- 101199d: Some ui updates & Header chain switch update + ## 0.1.2 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 5f586bf1..5a157408 100644 --- 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.1.2", + "version": "0.1.3-alpha.0", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, From 7271850a2337a278b64e914e289691347ecbee01 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Wed, 23 Oct 2024 11:28:36 +0800 Subject: [PATCH 03/23] chore: Add change log --- .release/.changeset/new-planets-relate.md | 5 +++++ .release/.changeset/pre.json | 3 ++- packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- 4 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 .release/.changeset/new-planets-relate.md diff --git a/.release/.changeset/new-planets-relate.md b/.release/.changeset/new-planets-relate.md new file mode 100644 index 00000000..fa638828 --- /dev/null +++ b/.release/.changeset/new-planets-relate.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Add change log diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 17a5b6a9..404f6b46 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -6,6 +6,7 @@ "@bnb-chain/canonical-bridge-widget": "0.1.2" }, "changesets": [ - "big-spoons-clean" + "big-spoons-clean", + "new-planets-relate" ] } diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 58ec0cf5..60fc3b13 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.1.3-alpha.1 + +### Patch Changes + +- Add change log + ## 0.1.3-alpha.0 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 5a157408..cadfc03a 100644 --- 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.1.3-alpha.0", + "version": "0.1.3-alpha.1", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, From 99e6e07bc133f63ab1d12a7bb0e308ef0d9153a0 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Wed, 23 Oct 2024 11:52:18 +0800 Subject: [PATCH 04/23] chore: Test release --- .release/.changeset/soft-kiwis-care.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .release/.changeset/soft-kiwis-care.md diff --git a/.release/.changeset/soft-kiwis-care.md b/.release/.changeset/soft-kiwis-care.md new file mode 100644 index 00000000..dd6e6641 --- /dev/null +++ b/.release/.changeset/soft-kiwis-care.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Test release From c090bb975f59514e93914404d0e0b9e7deb03d47 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Wed, 23 Oct 2024 12:20:46 +0800 Subject: [PATCH 05/23] chore: Test release --- .release/.changeset/new-planets-relate.md | 5 ----- .../{big-spoons-clean.md => plenty-sloths-hunt.md} | 0 .release/.changeset/pre.json | 5 +---- .release/.changeset/soft-kiwis-care.md | 5 ----- packages/canonical-bridge-widget/CHANGELOG.md | 12 ------------ 5 files changed, 1 insertion(+), 26 deletions(-) delete mode 100644 .release/.changeset/new-planets-relate.md rename .release/.changeset/{big-spoons-clean.md => plenty-sloths-hunt.md} (100%) delete mode 100644 .release/.changeset/soft-kiwis-care.md diff --git a/.release/.changeset/new-planets-relate.md b/.release/.changeset/new-planets-relate.md deleted file mode 100644 index fa638828..00000000 --- a/.release/.changeset/new-planets-relate.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@bnb-chain/canonical-bridge-widget": patch ---- - -Add change log diff --git a/.release/.changeset/big-spoons-clean.md b/.release/.changeset/plenty-sloths-hunt.md similarity index 100% rename from .release/.changeset/big-spoons-clean.md rename to .release/.changeset/plenty-sloths-hunt.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 404f6b46..f5904945 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -5,8 +5,5 @@ "@bnb-chain/canonical-bridge-sdk": "0.1.2", "@bnb-chain/canonical-bridge-widget": "0.1.2" }, - "changesets": [ - "big-spoons-clean", - "new-planets-relate" - ] + "changesets": [] } diff --git a/.release/.changeset/soft-kiwis-care.md b/.release/.changeset/soft-kiwis-care.md deleted file mode 100644 index dd6e6641..00000000 --- a/.release/.changeset/soft-kiwis-care.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@bnb-chain/canonical-bridge-widget": patch ---- - -Test release diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 60fc3b13..03e2d8ec 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,17 +1,5 @@ # @bnb-chain/canonical-bridge-widget -## 0.1.3-alpha.1 - -### Patch Changes - -- Add change log - -## 0.1.3-alpha.0 - -### Patch Changes - -- 101199d: Some ui updates & Header chain switch update - ## 0.1.2 ### Patch Changes From 5946352cd5c74b2f9959d27c8ac41d2e278706d3 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 23 Oct 2024 04:22:53 +0000 Subject: [PATCH 06/23] chore: Update versions (alpha) --- .release/.changeset/pre.json | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .release/.changeset/pre.json diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json new file mode 100644 index 00000000..f5904945 --- /dev/null +++ b/.release/.changeset/pre.json @@ -0,0 +1,9 @@ +{ + "mode": "pre", + "tag": "alpha", + "initialVersions": { + "@bnb-chain/canonical-bridge-sdk": "0.1.2", + "@bnb-chain/canonical-bridge-widget": "0.1.2" + }, + "changesets": [] +} From d2c4330c5189ff54a519fb71611d8a4eb3a1f441 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Wed, 23 Oct 2024 12:27:10 +0800 Subject: [PATCH 07/23] chore: Add change log --- .release/.changeset/pre.json | 9 --------- .../{plenty-sloths-hunt.md => rare-grapes-act.md} | 0 packages/canonical-bridge-widget/package.json | 2 +- 3 files changed, 1 insertion(+), 10 deletions(-) delete mode 100644 .release/.changeset/pre.json rename .release/.changeset/{plenty-sloths-hunt.md => rare-grapes-act.md} (100%) diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json deleted file mode 100644 index f5904945..00000000 --- a/.release/.changeset/pre.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "mode": "pre", - "tag": "alpha", - "initialVersions": { - "@bnb-chain/canonical-bridge-sdk": "0.1.2", - "@bnb-chain/canonical-bridge-widget": "0.1.2" - }, - "changesets": [] -} diff --git a/.release/.changeset/plenty-sloths-hunt.md b/.release/.changeset/rare-grapes-act.md similarity index 100% rename from .release/.changeset/plenty-sloths-hunt.md rename to .release/.changeset/rare-grapes-act.md diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index cadfc03a..e13fb891 100644 --- 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.1.3-alpha.1", + "version": "0.1.4", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, From da29147da2b4592bea5c7b0a51ed00bfd5169cb4 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Wed, 23 Oct 2024 14:37:13 +0800 Subject: [PATCH 08/23] chore: Add command to publish alpha packages --- .release/.changeset/pre.json | 11 +++++++++++ common/config/rush/command-line.json | 6 ++++++ packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- 4 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 .release/.changeset/pre.json diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json new file mode 100644 index 00000000..89f58c36 --- /dev/null +++ b/.release/.changeset/pre.json @@ -0,0 +1,11 @@ +{ + "mode": "pre", + "tag": "alpha", + "initialVersions": { + "@bnb-chain/canonical-bridge-sdk": "0.1.2", + "@bnb-chain/canonical-bridge-widget": "0.1.4" + }, + "changesets": [ + "rare-grapes-act" + ] +} diff --git a/common/config/rush/command-line.json b/common/config/rush/command-line.json index bfe3c58d..8b6a23ba 100644 --- a/common/config/rush/command-line.json +++ b/common/config/rush/command-line.json @@ -52,6 +52,12 @@ "commandKind": "global", "summary": "Create changeset", "shellCommand": "node .release/scripts/changeset.js" + }, + { + "name": "publish-alpha", + "commandKind": "global", + "summary": "Publish alpha packages", + "shellCommand": "cd .release && pnpm ci:alpha-version && pnpm ci:publish && cd -" } ], "parameters": [] diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 03e2d8ec..293a8015 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.1.5-alpha.0 + +### Patch Changes + +- d2c4330: Some ui updates & Header chain switch update + ## 0.1.2 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index e13fb891..868b2f29 100644 --- 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.1.4", + "version": "0.1.5-alpha.0", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, From 66ec1c052999a2437701f9e91860a04998009f9f Mon Sep 17 00:00:00 2001 From: aidencao Date: Wed, 23 Oct 2024 14:52:16 +0800 Subject: [PATCH 09/23] feat: Update switch network copy --- .release/.changeset/polite-monkeys-share.md | 5 +++++ .release/.changeset/pre.json | 1 + apps/canonical-bridge-ui/core/locales/en.ts | 1 + packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../src/modules/wallet/components/NetworkStatus/index.tsx | 2 +- 6 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 .release/.changeset/polite-monkeys-share.md diff --git a/.release/.changeset/polite-monkeys-share.md b/.release/.changeset/polite-monkeys-share.md new file mode 100644 index 00000000..65875796 --- /dev/null +++ b/.release/.changeset/polite-monkeys-share.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update unknown network title diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 89f58c36..b72e69f0 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -6,6 +6,7 @@ "@bnb-chain/canonical-bridge-widget": "0.1.4" }, "changesets": [ + "polite-monkeys-share", "rare-grapes-act" ] } diff --git a/apps/canonical-bridge-ui/core/locales/en.ts b/apps/canonical-bridge-ui/core/locales/en.ts index 2071c5a3..4e657828 100644 --- a/apps/canonical-bridge-ui/core/locales/en.ts +++ b/apps/canonical-bridge-ui/core/locales/en.ts @@ -88,6 +88,7 @@ export const en = { 'The token you’ve selected is incompatible with this network. Please select another token.', 'wallet.network.switch-network': 'Please switch the network', + 'wallet.network.unknown-network': 'Unsupported Network', 'wallet.network.wrong-network': 'Wrong network', 'wallet.error.switch-network': 'An error occurred when attempting to switch the network. Please select another network or try again.', diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 293a8015..f13bb8db 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.1.5-alpha.1 + +### Patch Changes + +- 8601541: Update unknown network title + ## 0.1.5-alpha.0 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 868b2f29..57e844d7 100644 --- 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.1.5-alpha.0", + "version": "0.1.5-alpha.1", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx index f89811de..d2e635cf 100644 --- a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx @@ -86,7 +86,7 @@ export function NetworkStatus() { /> - Unknown + {formatMessage({ id: 'wallet.network.unknown-network' })} From 50c8a09661abefdfd1c37dff8ffb13bc8884e72b Mon Sep 17 00:00:00 2001 From: chris Date: Fri, 25 Oct 2024 11:14:43 +1000 Subject: [PATCH 10/23] fix: Fix input focus issue --- .../src/modules/transfer/components/SendInput/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx index fcfa5c04..c4004e6b 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx @@ -1,5 +1,5 @@ import { Box, Flex, Input, useColorMode, useDisclosure, useIntl, useTheme } from '@bnb-chain/space'; -import { useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { setSendValue } from '@/modules/transfer/action'; @@ -85,6 +85,12 @@ export const SendInput: React.FC = () => { }, DEBOUNCE_DELAY); }; + useEffect(() => { + if (isGlobalFeeLoading && sendValue === debouncedSendValue) { + setIsFocused(false); + } + }, [isGlobalFeeLoading, debouncedSendValue, sendValue]); + return ( From 04279ef7e9135294d3127d2ce4edb0c11d47df04 Mon Sep 17 00:00:00 2001 From: chris Date: Fri, 25 Oct 2024 14:37:44 +1000 Subject: [PATCH 11/23] fix: Fix checkbox styling --- .../components/icons/ConfirmCheckIcon.tsx | 45 +++++++++++++++++++ .../transfer/components/ToAccount/index.tsx | 26 +++++------ 2 files changed, 55 insertions(+), 16 deletions(-) create mode 100644 packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx diff --git a/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx new file mode 100644 index 00000000..83260879 --- /dev/null +++ b/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx @@ -0,0 +1,45 @@ +import { Box, Icon, IconProps, useColorMode, useTheme } from '@bnb-chain/space'; + +export const UncheckedIcon = (props: IconProps) => { + return ( + + + + ); +}; + +export const CheckedIcon = (props: IconProps) => { + return ( + + + + ); +}; + +export const ToAccountCheckBox = (props: { onClick: () => void; isChecked: boolean }) => { + const { onClick, isChecked } = props; + const theme = useTheme(); + const { colorMode } = useColorMode(); + + return ( + + {isChecked ? ( + + ) : ( + + )} + + ); +}; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx index d35c00c5..13ae72e6 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx @@ -18,8 +18,8 @@ import { useTronTransferInfo } from '@/modules/transfer/hooks/tron/useTronTransf import { ErrorIcon } from '@/core/components/icons/ErrorIcon'; import { CorrectIcon } from '@/core/components/icons/CorrectIcon'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; -import { ConfirmCheckbox } from '@/core/components/ConfirmCheckbox'; import { useTronContract } from '@/modules/aggregator/adapters/meson/hooks/useTronContract'; +import { ToAccountCheckBox } from '@/core/components/icons/ConfirmCheckIcon'; export function ToAccount(props: FlexProps) { const { colorMode } = useColorMode(); @@ -67,13 +67,13 @@ export function ToAccount(props: FlexProps) { const isInvalid = (!isAvailableAccount && !!toAccount.address) || isTronContract === true || !!evmBytecode; - const onCheckboxChange = (e: React.ChangeEvent) => { - if (e.target.checked === true) { - setIsChecked(true); - dispatch(setIsToAddressChecked(true)); - } else { + const toggleChecked = () => { + if (isChecked) { setIsChecked(false); dispatch(setIsToAddressChecked(false)); + } else { + setIsChecked(true); + dispatch(setIsToAddressChecked(true)); } }; @@ -137,16 +137,10 @@ export function ToAccount(props: FlexProps) { )} - - {formatMessage({ id: 'to.section.confirm.text' })} - + + + {formatMessage({ id: 'to.section.confirm.text' })} + ); } From 8dc4f60e1b9410d35ed16caebbb34f1e55f8c0ce Mon Sep 17 00:00:00 2001 From: chris Date: Fri, 25 Oct 2024 17:03:14 +1000 Subject: [PATCH 12/23] chore: Update version --- .release/.changeset/metal-steaks-drive.md | 5 +++++ .release/.changeset/pre.json | 1 + packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- 4 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 .release/.changeset/metal-steaks-drive.md diff --git a/.release/.changeset/metal-steaks-drive.md b/.release/.changeset/metal-steaks-drive.md new file mode 100644 index 00000000..9fe5c3aa --- /dev/null +++ b/.release/.changeset/metal-steaks-drive.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Fix input and checkbox style diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 8328a880..8cf842fc 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -6,6 +6,7 @@ "@bnb-chain/canonical-bridge-widget": "0.1.4" }, "changesets": [ + "metal-steaks-drive", "polite-monkeys-share", "rare-grapes-act", "sixty-scissors-protect" diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 32ee0e03..2cf488f1 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.3.2-alpha.1 + +### Patch Changes + +- Fix input and checkbox style + ## 0.3.2-alpha.0 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 646695e6..2a6d62cc 100644 --- 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.0", + "version": "0.3.2-alpha.1", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, From a6f15d45acf9ed66a3bd2d366ce79773ef82cbbf Mon Sep 17 00:00:00 2001 From: chris Date: Tue, 29 Oct 2024 11:39:17 +1000 Subject: [PATCH 13/23] chore: Remove input icon --- .../src/modules/transfer/components/ToAccount/index.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx index 13ae72e6..29f1dabf 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx @@ -7,7 +7,6 @@ import { FlexProps, useIntl, InputGroup, - InputRightElement, } from '@bnb-chain/space'; import { ChangeEvent, useRef, useState } from 'react'; import { useEffect } from 'react'; @@ -15,8 +14,6 @@ import { useBytecode } from 'wagmi'; import { setIsToAddressChecked, setToAccount } from '@/modules/transfer/action'; import { useTronTransferInfo } from '@/modules/transfer/hooks/tron/useTronTransferInfo'; -import { ErrorIcon } from '@/core/components/icons/ErrorIcon'; -import { CorrectIcon } from '@/core/components/icons/CorrectIcon'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { useTronContract } from '@/modules/aggregator/adapters/meson/hooks/useTronContract'; import { ToAccountCheckBox } from '@/core/components/icons/ConfirmCheckIcon'; @@ -123,12 +120,6 @@ export function ToAccount(props: FlexProps) { borderColor: theme.colors[colorMode].text.danger, }} /> - {(isInvalid || isAvailableAccount) && ( - - {isInvalid && } - {isAvailableAccount && !isInvalid && } - - )} {isInvalid && ( From b53c9e6e4f03610532e5b3721f668c0d9fd4becf Mon Sep 17 00:00:00 2001 From: wenty22 Date: Thu, 24 Oct 2024 17:02:00 +0800 Subject: [PATCH 14/23] chore: Test server cicd --- apps/canonical-bridge-server/.eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/canonical-bridge-server/.eslintrc.js b/apps/canonical-bridge-server/.eslintrc.js index 1841b8bd..922ba5ef 100644 --- a/apps/canonical-bridge-server/.eslintrc.js +++ b/apps/canonical-bridge-server/.eslintrc.js @@ -14,9 +14,9 @@ module.exports = { }, ignorePatterns: ['.eslintrc.js'], rules: { + '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/interface-name-prefix': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', - '@typescript-eslint/no-explicit-any': 'off', }, }; From 7df2257cc24012576b74d5950c903e14eff77362 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Thu, 24 Oct 2024 18:42:40 +0800 Subject: [PATCH 15/23] chore: Update timeout to 30m --- .github/workflows/qa-deploy.yaml | 2 +- .github/workflows/release-server.yaml | 2 +- .github/workflows/release.yaml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/qa-deploy.yaml b/.github/workflows/qa-deploy.yaml index 7573c3b4..7c105162 100644 --- a/.github/workflows/qa-deploy.yaml +++ b/.github/workflows/qa-deploy.yaml @@ -23,7 +23,7 @@ jobs: cicd: needs: [pre-check] if: contains(needs.pre-check.outputs.codeowners, github.event.comment.user.login) - timeout-minutes: 10 + timeout-minutes: 30 runs-on: ubuntu-latest steps: - uses: actions/github-script@v3 diff --git a/.github/workflows/release-server.yaml b/.github/workflows/release-server.yaml index 8032d5ff..a966cab6 100644 --- a/.github/workflows/release-server.yaml +++ b/.github/workflows/release-server.yaml @@ -28,7 +28,7 @@ jobs: cicd: needs: [pre-check] if: contains(needs.pre-check.outputs.codeowners, github.event.pull_request.merged_by.login) - timeout-minutes: 10 + timeout-minutes: 30 runs-on: ubuntu-latest steps: diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 24670d35..9ca3173e 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -30,7 +30,7 @@ jobs: cicd: needs: [pre-check] if: contains(needs.pre-check.outputs.codeowners, github.event.pull_request.merged_by.login) - timeout-minutes: 10 + timeout-minutes: 30 runs-on: ubuntu-latest steps: - name: Checkout code repository From c80c95e23c90bda4637613a0ae811af17244cb14 Mon Sep 17 00:00:00 2001 From: aidencao Date: Tue, 29 Oct 2024 15:07:53 +0800 Subject: [PATCH 16/23] feat(canonical-bridge-widget): Update widget ui --- .../.changeset/chilled-lizards-compare.md | 5 + .release/.changeset/cyan-boxes-judge.md | 5 + .release/.changeset/dirty-shoes-tap.md | 5 + .release/.changeset/early-drinks-bathe.md | 5 + .release/.changeset/fuzzy-houses-complain.md | 5 + .release/.changeset/long-ears-press.md | 5 + .release/.changeset/nasty-candles-marry.md | 5 + .release/.changeset/nice-boxes-taste.md | 5 + .release/.changeset/pre.json | 19 ++- .release/.changeset/rotten-nails-drop.md | 5 + .release/.changeset/silly-lions-clap.md | 5 + .release/.changeset/slimy-clocks-rule.md | 5 + .release/.changeset/spotty-trainers-kick.md | 5 + .release/.changeset/swift-rivers-accept.md | 5 + .release/.changeset/swift-suits-worry.md | 5 + .release/.changeset/tasty-pianos-raise.md | 5 + .release/.changeset/thin-snakes-cheat.md | 5 + .release/.changeset/tough-colts-compare.md | 5 + common/config/rush/pnpm-lock.yaml | 2 +- packages/canonical-bridge-widget/CHANGELOG.md | 102 +++++++++++ packages/canonical-bridge-widget/package.json | 2 +- .../src/core/components/InfoTooltip/index.tsx | 1 + .../src/core/components/icons/ExLinkIcon.tsx | 21 +-- .../src/core/components/icons/WarningIcon.tsx | 15 ++ .../src/core/hooks/useDebounce.ts | 2 +- .../src/core/locales/en.ts | 3 +- .../src/modules/aggregator/action.ts | 4 + .../cBridge/components/CBridgeOption.tsx | 2 +- .../cBridge/components/CBridgeSendMaxMin.tsx | 18 ++ .../cBridge/hooks/useCBridgeSendMaxMin.ts | 3 +- .../cBridge/hooks/useGetCBridgeFees.ts | 24 ++- .../stargate/hooks/useGetStarGateFees.ts | 33 ++-- .../hooks/useDefaultSelectedInfo.ts | 9 +- .../modules/aggregator/hooks/useSelection.ts | 5 +- .../src/modules/aggregator/reducer.ts | 15 ++ .../components/Button/SwitchWalletButton.tsx | 5 +- .../components/Button/WalletButtonWrapper.tsx | 29 +++- .../components/NetWorkSection/index.tsx | 2 +- .../components/ReceiveInfo/ReceiveLoading.tsx | 10 +- .../transfer/components/ReceiveInfo/index.tsx | 159 ++++++++++-------- .../SelectButton/TokenSelectButton.tsx | 5 +- .../components/SelectButton/index.tsx | 2 +- .../transfer/components/SendInput/MaxLink.tsx | 2 +- .../transfer/components/SendInput/index.tsx | 7 +- .../TransferOverview/NoRouteFound.tsx | 5 +- .../RouteInfo/AllowedSendAmount.tsx | 5 + .../TransferOverview/RouteInfo/FeesInfo.tsx | 5 + .../RouteInfo/OtherRouteError.tsx | 11 +- .../RouteInfo/RouteName/index.tsx | 9 +- .../components/TransferOverview/index.tsx | 157 ++++++++++------- .../src/modules/transfer/index.tsx | 12 +- .../wallet/components/NetworkStatus/index.tsx | 73 ++++++-- .../wallet/components/ProfileMenu/index.tsx | 12 +- 53 files changed, 641 insertions(+), 234 deletions(-) create mode 100644 .release/.changeset/chilled-lizards-compare.md create mode 100644 .release/.changeset/cyan-boxes-judge.md create mode 100644 .release/.changeset/dirty-shoes-tap.md create mode 100644 .release/.changeset/early-drinks-bathe.md create mode 100644 .release/.changeset/fuzzy-houses-complain.md create mode 100644 .release/.changeset/long-ears-press.md create mode 100644 .release/.changeset/nasty-candles-marry.md create mode 100644 .release/.changeset/nice-boxes-taste.md create mode 100644 .release/.changeset/rotten-nails-drop.md create mode 100644 .release/.changeset/silly-lions-clap.md create mode 100644 .release/.changeset/slimy-clocks-rule.md create mode 100644 .release/.changeset/spotty-trainers-kick.md create mode 100644 .release/.changeset/swift-rivers-accept.md create mode 100644 .release/.changeset/swift-suits-worry.md create mode 100644 .release/.changeset/tasty-pianos-raise.md create mode 100644 .release/.changeset/thin-snakes-cheat.md create mode 100644 .release/.changeset/tough-colts-compare.md create mode 100644 packages/canonical-bridge-widget/src/core/components/icons/WarningIcon.tsx create mode 100644 packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx diff --git a/.release/.changeset/chilled-lizards-compare.md b/.release/.changeset/chilled-lizards-compare.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..b9260687 --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 index 8cf842fc..9e30164f 100644 --- 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..5bf157e0 --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 new file mode 100644 index 00000000..f14199cb --- /dev/null +++ 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 index d992b5b8..07d93356 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -7444,7 +7444,7 @@ packages: resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==} engines: {node: '>= 4.0'} os: [darwin] - deprecated: Upgrade to fsevents v2 to mitigate potential security issues + deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2 fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 2cf488f1..6e7dacda 100644 --- 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 index 2a6d62cc..65f7e7c2 100644 --- 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 index fc20b9e2..8dd5a9c8 100644 --- 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 ( - - - - - - + ); } diff --git a/packages/canonical-bridge-widget/src/core/components/icons/WarningIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/WarningIcon.tsx new file mode 100644 index 00000000..994a1df5 --- /dev/null +++ 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 ( + + + + + + ); +} diff --git a/packages/canonical-bridge-widget/src/core/hooks/useDebounce.ts b/packages/canonical-bridge-widget/src/core/hooks/useDebounce.ts index f57dec06..1bb9dcca 100644 --- 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(); useEffect(() => { diff --git a/packages/canonical-bridge-widget/src/core/locales/en.ts b/packages/canonical-bridge-widget/src/core/locales/en.ts index 58a35579..3fc37b62 100644 --- 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 index ecc15d0d..42698636 100644 --- 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( 'aggregator/setIsLoadingTokenBalances', ); + +export const setCBridgeMaxMinSendAmt = createAction( + 'aggregator/setCBridgeMaxMinSendAmt', +); diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx index ae851bfd..05755e7b 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx +++ b/packages/canonical-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/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx new file mode 100644 index 00000000..d6db61f3 --- /dev/null +++ b/packages/canonical-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(function CBridgeSendMaxMin() { + const { minMaxSendAmt: cBridgeAllowedAmt } = useCBridgeSendMaxMin(); + const dispatch = useAppDispatch(); + + useEffect(() => { + dispatch(setCBridgeMaxMinSendAmt(cBridgeAllowedAmt)); + }, [cBridgeAllowedAmt, dispatch]); + + return null; +}); diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts index 1de1b9af..2c012ae1 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts +++ b/packages/canonical-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}`, diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useGetCBridgeFees.ts b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useGetCBridgeFees.ts index 0b48a990..fb4a9981 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useGetCBridgeFees.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useGetCBridgeFees.ts @@ -1,11 +1,10 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useMemo } from 'react'; import { formatUnits, parseUnits } from 'viem'; import { useAccount, usePublicClient } from 'wagmi'; import { useIntl } from '@bnb-chain/space'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { useToTokenInfo } from '@/modules/transfer/hooks/useToTokenInfo'; -import { useCBridgeSendMaxMin } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin'; import { useCBridgeTransferParams } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeTransferParams'; import { useGetTokenBalance } from '@/core/contract/hooks/useGetTokenBalance'; import { formatNumber } from '@/core/utils/number'; @@ -17,7 +16,7 @@ import { ERC20_TOKEN } from '@/core/contract/abi'; export const useGetCBridgeFees = () => { const { toTokenInfo } = useToTokenInfo(); const { args, bridgeAddress } = useCBridgeTransferParams(); - const { minMaxSendAmt: cBridgeAllowedAmt } = useCBridgeSendMaxMin(); + const cBridgeAllowedAmt = useAppSelector((state) => state.aggregator.bridgeMaxMin.cBridge); const nativeToken = useGetNativeToken(); const { formatMessage } = useIntl(); const dispatch = useAppDispatch(); @@ -29,27 +28,24 @@ export const useGetCBridgeFees = () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any const publicClient = usePublicClient({ chainId: fromChain?.id }) as any; - const [isAllowSendError, setIsAllowSendError] = useState(false); const { balance } = useGetTokenBalance({ tokenAddress: selectedToken?.address as `0x${string}`, }); - useEffect(() => { + const isAllowSendError = useMemo(() => { if (!Number(sendValue) || !selectedToken || !toTokenInfo) { - setIsAllowSendError(false); - return; + return false; } if (!!Number(cBridgeAllowedAmt?.min) && !!Number(cBridgeAllowedAmt?.max)) { - if (Number(sendValue) <= Number(cBridgeAllowedAmt.min)) { - setIsAllowSendError(true); - } else if (Number(sendValue) >= Number(cBridgeAllowedAmt.max)) { - setIsAllowSendError(true); + if ( + Number(sendValue) <= Number(cBridgeAllowedAmt.min) || + Number(sendValue) >= Number(cBridgeAllowedAmt.max) + ) { + return true; } } - return () => { - setIsAllowSendError(false); - }; + return false; }, [cBridgeAllowedAmt, sendValue, selectedToken, toTokenInfo]); const cBridgeFeeSorting = useCallback( diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts index 425aa7ce..f8d5ad9f 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useMemo } from 'react'; import { useAccount, useBalance, usePublicClient } from 'wagmi'; import { formatUnits, parseUnits } from 'viem'; import { useIntl } from '@bnb-chain/space'; @@ -32,35 +32,34 @@ export const useGetStargateFees = () => { const publicClient = usePublicClient({ chainId: fromChain?.id }) as any; const sendValue = useAppSelector((state) => state.transfer.sendValue); const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount); - const [allowedSendAmount, setAllowedSendAmount] = useState<{ min: string; max: string } | null>( - null, - ); - const [isAllowSendError, setIsAllowSendError] = useState(false); const { balance } = useGetTokenBalance({ tokenAddress: selectedToken?.address as `0x${string}`, }); - useEffect(() => { + const allowedSendAmount = useMemo(() => { if (estimatedAmount?.stargate && estimatedAmount?.stargate?.[0]) { const fees = estimatedAmount?.stargate; const decimal = selectedToken?.stargate?.raw?.decimals ?? (18 as number); const allowedMin = Number(formatUnits(fees[0].minAmountLD, decimal)); const allowedMax = Number(formatUnits(fees[0].maxAmountLD, decimal)); - setAllowedSendAmount({ + return { min: formatNumber(allowedMin, 8), max: formatNumber(allowedMax, 8), - }); - if (Number(sendValue) < allowedMin || Number(sendValue) > allowedMax) { - setIsAllowSendError(true); - } else { - setIsAllowSendError(false); - } + }; + } + return null; + }, [estimatedAmount?.stargate, selectedToken?.stargate?.raw?.decimals]); + + const isAllowSendError = useMemo(() => { + if (estimatedAmount?.stargate && estimatedAmount?.stargate?.[0]) { + const fees = estimatedAmount?.stargate; + const decimal = selectedToken?.stargate?.raw?.decimals ?? (18 as number); + const allowedMin = Number(formatUnits(fees[0].minAmountLD, decimal)); + const allowedMax = Number(formatUnits(fees[0].maxAmountLD, decimal)); + return Number(sendValue) < allowedMin || Number(sendValue) > allowedMax; } - return () => { - setAllowedSendAmount(null); - setIsAllowSendError(false); - }; + return false; }, [estimatedAmount?.stargate, selectedToken?.stargate?.raw?.decimals, sendValue]); const stargateFeeSorting = useCallback( diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts index 29f52dd5..c61e0942 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts @@ -1,21 +1,22 @@ import { useEffect } from 'react'; -import { useAccount } from 'wagmi'; -import { useAppDispatch } from '@/modules/store/StoreProvider'; +import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { setSendValue } from '@/modules/transfer/action'; import { useSelection } from '@/modules/aggregator/hooks/useSelection'; import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; +import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider.tsx'; export function useDefaultSelectedInfo() { const { isReady, defaultSelectedInfo } = useAggregator(); const { selectDefault } = useSelection(); const dispatch = useAppDispatch(); - const { chainId } = useAccount(); + const { chainId } = useCurrentWallet(); + const sendValue = useAppSelector((state) => state.transfer.sendValue); useEffect(() => { if (isReady) { selectDefault(defaultSelectedInfo); - dispatch(setSendValue(defaultSelectedInfo.amount)); + dispatch(setSendValue(sendValue || defaultSelectedInfo.amount)); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isReady, chainId]); diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts index a22a793a..5a881b0a 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts @@ -1,4 +1,4 @@ -import { useChains, useAccount } from 'wagmi'; +import { useChains } from 'wagmi'; import { useCallback } from 'react'; import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; @@ -18,7 +18,7 @@ import { useTronWeb } from '@/core/hooks/useTronWeb'; import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider'; export function useSelection() { - const { chainId } = useAccount(); + const { chainId } = useCurrentWallet(); const { getFromChains, getToChains, getTokens, getToToken, adapters, defaultSelectedInfo } = useAggregator(); @@ -135,6 +135,7 @@ export function useSelection() { selectFromChain(chain); return; } + if (fromChain?.id) return; } const fromChains = getFromChains({ diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/reducer.ts b/packages/canonical-bridge-widget/src/modules/aggregator/reducer.ts index d9be0382..b267d1ea 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/reducer.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/reducer.ts @@ -1,5 +1,6 @@ import { createReducer } from '@/modules/store/createReducer'; import * as actions from '@/modules/aggregator/action'; +import { ICBridgeMaxMinSendAmt } from '@/modules/aggregator/adapters/cBridge/types'; export interface IAggregatorState { tokenPrices: { cmcPrices: Record; @@ -8,6 +9,9 @@ export interface IAggregatorState { tokenBalances: Record; isLoadingTokenPrices: boolean; isLoadingTokenBalances: boolean; + bridgeMaxMin: { + cBridge: ICBridgeMaxMinSendAmt; + }; } const initStates: IAggregatorState = { @@ -18,6 +22,9 @@ const initStates: IAggregatorState = { tokenBalances: {}, isLoadingTokenPrices: false, isLoadingTokenBalances: false, + bridgeMaxMin: { + cBridge: { max: '0', min: '0' }, + }, }; export default createReducer(initStates, (builder) => { @@ -43,4 +50,12 @@ export default createReducer(initStates, (builder) => { ...state, isLoadingTokenBalances: payload, })); + + builder.addCase(actions.setCBridgeMaxMinSendAmt, (state, { payload }) => ({ + ...state, + bridgeMaxMin: { + ...state.bridgeMaxMin, + cBridge: payload, + }, + })); }); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx index bf7ab95b..f19ba1a3 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx @@ -1,10 +1,10 @@ -import { Button, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; +import { Button, ButtonProps, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; import { reportEvent } from '@/core/utils/gtm'; import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider'; import { useAppSelector } from '@/modules/store/StoreProvider'; -export const SwitchWalletButton = () => { +export const SwitchWalletButton = (props: ButtonProps) => { const { formatMessage } = useIntl(); const { linkWallet } = useCurrentWallet(); @@ -36,6 +36,7 @@ export const SwitchWalletButton = () => { }, }); }} + {...props} > {formatMessage({ id: 'transfer.button.switch-wallet' })} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletButtonWrapper.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletButtonWrapper.tsx index a231a1d2..56e585fd 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletButtonWrapper.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletButtonWrapper.tsx @@ -1,22 +1,43 @@ -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, useEffect, useMemo, useState } from 'react'; import { useAppSelector } from '@/modules/store/StoreProvider'; import { WalletConnectButton } from '@/modules/transfer/components/Button/WalletConnectButton'; import { SwitchNetworkButton } from '@/modules/transfer/components/Button/SwitchNetworkButton'; import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider'; import { SwitchWalletButton } from '@/modules/transfer/components/Button/SwitchWalletButton'; +import { useDebounce } from '@/core/hooks/useDebounce'; export function WalletButtonWrapper(props: PropsWithChildren) { const { children } = props; const fromChain = useAppSelector((state) => state.transfer.fromChain); const { isConnected, chainId, walletType } = useCurrentWallet(); + const [delay, setDelay] = useState(false); - if (isConnected) { - if (walletType !== fromChain?.chainType) { + useEffect(() => { + setTimeout(() => setDelay(true), 3000); + }, []); + + const payload = useMemo(() => { + return { + _chainId: chainId, + _fromChainId: fromChain?.id, + _isConnected: isConnected, + _walletType: walletType, + _fromChainType: fromChain?.chainType, + }; + }, [chainId, fromChain?.id, isConnected, walletType, fromChain?.chainType]); + + const { _chainId, _fromChainId, _isConnected, _walletType, _fromChainType } = useDebounce( + payload, + delay ? 1200 : 0, + ); + + if (_isConnected) { + if (_walletType !== _fromChainType && _fromChainType) { return ; } else { - if (chainId !== fromChain.id) { + if (_chainId !== _fromChainId && _fromChainId) { return ; } return <>{children}; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx index 29dc6e06..6dc469af 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx @@ -43,7 +43,7 @@ export const NetWorkSection = () => { flexDir={['column', 'column', 'row']} justifyContent={'space-between'} alignItems={'center'} - gap={['16px', '16px', '16px', '12px']} + gap={{ base: '8px', md: '16px' }} minW={0} > diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx index dd20ac3c..3b2473f1 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx @@ -4,12 +4,12 @@ export const ReceiveLoading = () => { return ( <> - + - - + + { - - + + diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx index 5fb97061..ff9f5bba 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx @@ -1,13 +1,14 @@ import { Box, Flex, - useBreakpointValue, useColorMode, useIntl, useTheme, Collapse, + useBreakpointValue, } from '@bnb-chain/space'; -import { useEffect, useMemo } from 'react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { debounce } from 'lodash'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { useGetReceiveAmount } from '@/modules/transfer/hooks/useGetReceiveAmount'; @@ -46,7 +47,16 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { const { formatMessage } = useIntl(); const { loadingBridgeFees } = useLoadingBridgeFees(); const dispatch = useAppDispatch(); - const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; + const loadingBridgeFeesRef = useRef(loadingBridgeFees); + loadingBridgeFeesRef.current = loadingBridgeFees; + + // todo fix it + const debounceLoadingFee = useCallback( + debounce(() => { + loadingBridgeFeesRef.current(); + }, 300), + [], + ); const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo); const isGlobalFeeLoading = useAppSelector((state) => state.transfer.isGlobalFeeLoading); @@ -54,6 +64,7 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { const selectedToken = useAppSelector((state) => state.transfer.selectedToken); const routeFees = useAppSelector((state) => state.transfer.routeFees); const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount); + const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; const receiveAmt = useMemo(() => { if (!Number(sendValue)) return null; @@ -106,8 +117,8 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { const debouncedSendValue = useDebounce(sendValue, DEBOUNCE_DELAY); useEffect(() => { - // On mobile if (!isBase) return; + // On mobile if (sendValue === debouncedSendValue) { dispatch(setTransferActionInfo(undefined)); if (!selectedToken || !Number(debouncedSendValue)) { @@ -118,7 +129,7 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { } dispatch(setIsGlobalFeeLoading(true)); dispatch(setIsRefreshing(true)); - loadingBridgeFees(); + debounceLoadingFee(); dispatch(setIsRefreshing(false)); } else { dispatch(setIsGlobalFeeLoading(true)); @@ -130,12 +141,13 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { if (!Number(sendValue)) return true; if (isGlobalFeeLoading) return false; return ( - !isBase && - estimatedAmount && - !Object.values(estimatedAmount).every((element) => element === undefined) && - !receiveAmt + !Number(sendValue) || + (!isBase && + estimatedAmount && + !Object.values(estimatedAmount).every((element) => element === undefined) && + !receiveAmt) ); - }, [sendValue, estimatedAmount, isBase, receiveAmt, isGlobalFeeLoading]); + }, [sendValue, estimatedAmount, receiveAmt, isGlobalFeeLoading, isBase]); const isHideRouteButton = useMemo(() => { return ( @@ -144,64 +156,79 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { }, [estimatedAmount]); return ( - - - - - {formatMessage({ id: 'you.receive.title' })} - - {isBase && !isHideRouteButton ? : null} - - - {debouncedSendValue === sendValue ? ( - receiveAmt && !isGlobalFeeLoading ? ( - <> - {isBase && } - {isBase && } - {bridgeType && ( - - )} - - - - - - - ) : !receiveAmt && !isGlobalFeeLoading ? ( - + + + + + + {formatMessage({ id: 'you.receive.title' })} + + {!isHideRouteButton ? ( + + + + ) : null} + + + {debouncedSendValue === sendValue ? ( + receiveAmt && !isGlobalFeeLoading ? ( + <> + { + + + + } + { + + + + } + {bridgeType && ( + + )} + + + + + + + ) : !receiveAmt && !isGlobalFeeLoading ? ( + + ) : ( + + ) ) : ( - ) - ) : ( - - )} + )} + - - + + ); }; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx index a7333056..271da271 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx @@ -31,9 +31,10 @@ export function TokenSelectButton(props: SelectButtonProps) { p={'4px 8px 4px 4px'} justifyContent={'space-between'} gap={'8px'} - background={theme.colors[colorMode].button.select.background.default} + transition={'all .15s'} + background={theme.colors[colorMode].layer[4].default} _hover={{ - background: theme.colors[colorMode].button.select.background.hover, + background: theme.colors[colorMode].layer[4].hover, }} color={theme.colors[colorMode].text.primary} {...restProps} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx index b3643ba2..c62d4d1a 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx @@ -56,7 +56,7 @@ export function SelectButton(props: SelectButtonProps) { }} > - {chain?.name ?? 'Select Network'} + {chain?.name ?? ''} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx index 507f1681..256c86e1 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx @@ -53,7 +53,7 @@ export const MaxLink: React.FC = () => { cursor={!!balance ? 'pointer' : 'auto'} fontSize={'12px'} fontWeight={500} - pb={`1px`} + lineHeight={'16px'} transitionDuration="normal" sx={{ '@media (hover:hover)': { diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx index c4004e6b..0510e973 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx @@ -94,7 +94,12 @@ export const SendInput: React.FC = () => { return ( - + {formatMessage({ id: 'you.send.title' })} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx index 35ac3124..f7f82679 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx @@ -36,7 +36,7 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => { gap={'8px'} background={theme.colors[colorMode].receive.background} borderRadius={'8px'} - p={[0, 0, 0, '24px 16px']} + p={[0, 0, 0, '0 16px']} > @@ -56,8 +56,9 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => { ? formatMessage({ id: 'route.no-found.desc' }) : formatMessage({ id: !isNoRoute ? 'route.adjust.desc' : 'route.no-found.desc' })} - {isBase && !isNoRoute && ( + {!isNoRoute && ( svg': { + verticalAlign: '-3px', + }, + }} {...otherProps} > diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx index 9af5c0b3..1145390b 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx @@ -22,6 +22,11 @@ export const FeesInfo = ({ summary, breakdown, bridgeType, isError }: FeesInfoPr display={'inline-block'} lineHeight={'16px'} opacity={isError ? 0.5 : 1} + sx={{ + '>svg': { + verticalAlign: '-3px', + }, + }} > { const routeError = useAppSelector((state) => state.transfer.routeError); return routeError && routeError[bridgeType] ? ( - + svg': { + verticalAlign: '-3px', + }, + }} + > {routeError[bridgeType]} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx index 5598d3d0..deba3e0b 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx @@ -25,8 +25,15 @@ export const RouteName = React.memo( const receiveValue = getSortedReceiveAmount(); const bestTimeRoute = useGetBestTime(); const bestReturnRoute = getMaxValueKey(receiveValue); + return ( - + {bridgeType === 'cBridge' ? ( ) : bridgeType === 'deBridge' ? ( diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx index 600c68af..57d113e7 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx @@ -8,7 +8,8 @@ import { useTheme, Collapse, } from '@bnb-chain/space'; -import { ReactNode, useEffect, useMemo } from 'react'; +import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'; +import { debounce } from 'lodash'; import { setEstimatedAmount, @@ -28,12 +29,15 @@ import { DeBridgeOption } from '@/modules/aggregator/adapters/deBridge/component import { StarGateOption } from '@/modules/aggregator/adapters/stargate/components/StarGateOption'; import { LayerZeroOption } from '@/modules/aggregator/adapters/layerZero/components/LayerZeroOption'; import { MesonOption } from '@/modules/aggregator/adapters/meson/components/MesonOption'; +import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; +import { CBridgeSendMaxMin } from '@/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin'; export function TransferOverview({ routeContentBottom }: { routeContentBottom?: ReactNode }) { const dispatch = useAppDispatch(); const { formatMessage } = useIntl(); const { colorMode } = useColorMode(); const theme = useTheme(); + const { transferConfig } = useAggregator(); const { loadingBridgeFees } = useLoadingBridgeFees(); const { getSortedReceiveAmount } = useGetReceiveAmount(); @@ -43,6 +47,16 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: const sendValue = useAppSelector((state) => state.transfer.sendValue); const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount); const toTokenInfo = useAppSelector((state) => state.transfer.toToken); + const loadingBridgeFeesRef = useRef(loadingBridgeFees); + loadingBridgeFeesRef.current = loadingBridgeFees; + + // todo fix it + const debounceLoadingFee = useCallback( + debounce(() => { + loadingBridgeFeesRef.current(); + }, 300), + [], + ); const debouncedSendValue = useDebounce(sendValue, DEBOUNCE_DELAY); @@ -60,7 +74,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: } dispatch(setIsGlobalFeeLoading(true)); dispatch(setIsRefreshing(true)); - loadingBridgeFees(); + debounceLoadingFee(); dispatch(setIsRefreshing(false)); } else { dispatch(setIsGlobalFeeLoading(true)); @@ -103,71 +117,86 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: const showRoute = selectedToken && !!Number(sendValue) && toTokenInfo && options && !!options?.length; - return ( - - - - + const loading = !options || !options?.length || isGlobalFeeLoading; + const content = ( + + + + {formatMessage({ id: 'route.title' })} + {!options.length || isGlobalFeeLoading ? ( + + ) : !isBase ? ( + + ) : null} + + + {loading ? ( - - {formatMessage({ id: 'route.title' })} - {!options.length || isGlobalFeeLoading ? ( - - ) : !isBase ? ( - - ) : null} - - - {!options || !options?.length || isGlobalFeeLoading ? ( - - - - - - ) : ( - - {options?.map((bridge: ReactNode) => bridge)} - - )} - + + + - + ) : ( + + {options?.map((bridge: ReactNode) => bridge)} + + )} - - {routeContentBottom ? routeContentBottom : null} + + + ); + + const cBridgeSupport = 'cBridge' in transferConfig; + + return ( + + {cBridgeSupport && } + + {!routeContentBottom ? ( + content + ) : ( + + + {content} + + + )} + {routeContentBottom ? routeContentBottom : null} + ); } diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx index 12f6ab68..a3513f21 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx @@ -1,6 +1,7 @@ import { Box, Flex, + Typography, useBreakpointValue, useColorMode, useDisclosure, @@ -32,7 +33,6 @@ export function TransferWidget() { return ( {appearance.bridgeTitle && ( - {appearance.bridgeTitle} - + )} diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx index 5104f5a9..c1eaeb53 100644 --- a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx @@ -1,5 +1,5 @@ import { Flex, useColorMode, useIntl, useTheme, Text, Typography, Box } from '@bnb-chain/space'; -import { TickIcon, WarningTriangleSolidIcon, InfoCircleIcon } from '@bnb-chain/icons'; +import { TickIcon, InfoCircleIcon } from '@bnb-chain/icons'; import { useEffect, useRef } from 'react'; import { IconImage } from '@/core/components/IconImage'; @@ -13,6 +13,10 @@ import { useFromChains } from '@/modules/aggregator/hooks/useFromChains'; import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; import { TransferToIcon } from '@/core/components/icons/TransferToIcon'; import { SwitchNetworkButton } from '@/modules/transfer/components/Button/SwitchNetworkButton'; +import { WarningIcon } from '@/core/components/icons/WarningIcon.tsx'; +import { SwitchWalletButton } from '@/modules/transfer/components/Button/SwitchWalletButton'; +import { ExLinkIcon } from '@/core/components/icons/ExLinkIcon.tsx'; +import { openLink } from '@/core/utils/common.ts'; export function NetworkStatus() { const fromChain = useAppSelector((state) => state.transfer.fromChain); @@ -22,13 +26,11 @@ export function NetworkStatus() { const theme = useTheme(); const { colorMode } = useColorMode(); - const { chain, chainId, linkWallet } = useCurrentWallet(); + const { chain, chainId, linkWallet, walletType } = useCurrentWallet(); const fromChains = useFromChains(); const { chainConfigs } = useAggregator(); - const supportedChains = fromChains.filter( - (c) => chainConfigs.find((e) => c.id === e.id) && c.chainType !== 'link', - ); + const supportedChains = fromChains.filter((c) => chainConfigs.find((e) => c.id === e.id)); const bridgeChains = useFromChains(); useEffect(() => { @@ -65,13 +67,26 @@ export function NetworkStatus() { gap={'8px'} > - + {fromChain!.name} - + - + {walletType !== fromChain?.chainType ? ( + + ) : ( + + )} @@ -85,15 +100,32 @@ export function NetworkStatus() { {({ isOpen, onClose }) => { return ( <> - - + - + {formatMessage({ id: 'wallet.network.unknown-network' })} + + {formatMessage({ id: 'wallet.network.unknown-network-mobile' })} + @@ -113,9 +145,13 @@ export function NetworkStatus() { {({ isOpen, onClose }) => { return ( <> - + {isWrongNetwork ? ( - @@ -146,6 +182,10 @@ export function NetworkStatus() { } bg={isSelected ? theme.colors[colorMode].popover.selected : undefined} onClick={() => { + if (item.chainType === 'link') { + openLink(item.externalBridgeUrl); + return; + } linkWallet({ targetChainType: item.chainType, targetChainId: item.id, @@ -156,6 +196,13 @@ export function NetworkStatus() { {item.name} + {item.chainType === 'link' && ( + + )} {isSelected && } ); diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx index 33645d3c..ed5aabf9 100644 --- a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx @@ -1,4 +1,4 @@ -import { Box, Center, Flex, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; +import { Box, Center, Flex, Typography, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; import { DisconnectIcon } from '@bnb-chain/icons'; import { useWalletKit } from '@node-real/walletkit'; import { useMemo } from 'react'; @@ -10,6 +10,7 @@ import { Dropdown } from '@/modules/wallet/components/Dropdown/Dropdown'; import { DropdownButton } from '@/modules/wallet/components/Dropdown/DropdownButton'; import { DropdownList } from '@/modules/wallet/components/Dropdown/DropdownList'; import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider'; +import { WalletIcon } from '@/core/components/icons/WalletIcon'; export const ProfileMenu = () => { const { formatMessage } = useIntl(); @@ -23,6 +24,7 @@ export const ProfileMenu = () => { {({ isOpen, onClose }) => ( <> { {walletIcon} )} - {formatAppAddress({ address })} + + + {formatAppAddress({ address })} + + @@ -130,7 +136,7 @@ function useWalletIcon() { if (selectedWallet) { const { transparent: transparentLogos } = selectedWallet.logos ?? {}; const transparentLogo = (transparentLogos as any)?.[colorMode] ?? transparentLogos; - return transparentLogo; + return transparentLogo || ; } return null; From aed642a25743624ebd0d12979f2da00d27695f7e Mon Sep 17 00:00:00 2001 From: aidencao Date: Fri, 1 Nov 2024 17:24:05 +0800 Subject: [PATCH 17/23] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/pre.json | 1 + .release/.changeset/swift-dolls-yawn.md | 5 +++++ packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../src/modules/transfer/hooks/useLoadingBridgeFees.ts | 9 ++++++++- 5 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 .release/.changeset/swift-dolls-yawn.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 9e30164f..855f9cb1 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -22,6 +22,7 @@ "sixty-scissors-protect", "slimy-clocks-rule", "spotty-trainers-kick", + "swift-dolls-yawn", "swift-rivers-accept", "swift-suits-worry", "tasty-pianos-raise", diff --git a/.release/.changeset/swift-dolls-yawn.md b/.release/.changeset/swift-dolls-yawn.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/swift-dolls-yawn.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 6e7dacda..451c55b5 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.3.2-alpha.19 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.18 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 65f7e7c2..779d7028 100644 --- 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.18", + "version": "0.3.2-alpha.19", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts index da2e892c..be178996 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts +++ b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts @@ -27,6 +27,8 @@ import { useGetNativeToken } from '@/modules/transfer/hooks/useGetNativeToken'; import { useGetMesonFees } from '@/modules/aggregator/adapters/meson/hooks/useGetMesonFees'; import { formatNumber } from '@/core/utils/number'; +let lastTime = Date.now(); + export const useLoadingBridgeFees = () => { const dispatch = useAppDispatch(); const { preSelectRoute } = usePreSelectRoute(); @@ -84,6 +86,8 @@ export const useLoadingBridgeFees = () => { }); try { const amount = parseUnits(debouncedSendValue, selectedToken.decimals); + const now = Date.now(); + lastTime = now; const response = await bridgeSDK.loadBridgeFees({ bridgeType: bridgeTypeList, fromChainId: fromChain.id, @@ -126,6 +130,9 @@ export const useLoadingBridgeFees = () => { 'API response deBridge[0], cBridge[1], stargate[2], layerZero[3], meson[4]', response, ); + if (lastTime > now) { + return; + } // eslint-disable-next-line @typescript-eslint/no-explicit-any const [debridgeEst, cbridgeEst, stargateEst, layerZeroEst, mesonEst] = response as any; @@ -344,11 +351,11 @@ export const useLoadingBridgeFees = () => { preSelectRoute(response, highestValue.type as BridgeType); } } + dispatch(setIsGlobalFeeLoading(false)); // eslint-disable-next-line } catch (error: any) { // eslint-disable-next-line no-console console.log(error, error.message); - } finally { dispatch(setIsGlobalFeeLoading(false)); } }, [ From cf6063a056030065c602bd054623c3af44ae540b Mon Sep 17 00:00:00 2001 From: aidencao Date: Sun, 3 Nov 2024 21:14:56 +0800 Subject: [PATCH 18/23] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/khaki-bears-rhyme.md | 5 +++++ .release/.changeset/pre.json | 1 + packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../src/modules/aggregator/hooks/useSelection.ts | 5 ++--- 5 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 .release/.changeset/khaki-bears-rhyme.md diff --git a/.release/.changeset/khaki-bears-rhyme.md b/.release/.changeset/khaki-bears-rhyme.md new file mode 100644 index 00000000..c3960b3b --- /dev/null +++ b/.release/.changeset/khaki-bears-rhyme.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Fix switch to ethereum token diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 855f9cb1..0d68eb7a 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -11,6 +11,7 @@ "dirty-shoes-tap", "early-drinks-bathe", "fuzzy-houses-complain", + "khaki-bears-rhyme", "long-ears-press", "metal-steaks-drive", "nasty-candles-marry", diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 451c55b5..e1abceca 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.3.2-alpha.20 + +### Patch Changes + +- Fix switch to ethereum token + ## 0.3.2-alpha.19 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 779d7028..252cc642 100644 --- 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.19", + "version": "0.3.2-alpha.20", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts index 5a881b0a..73e2e88c 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts @@ -19,8 +19,7 @@ import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider'; export function useSelection() { const { chainId } = useCurrentWallet(); - const { getFromChains, getToChains, getTokens, getToToken, adapters, defaultSelectedInfo } = - useAggregator(); + const { getFromChains, getToChains, getTokens, getToToken, adapters } = useAggregator(); const fromChain = useAppSelector((state) => state.transfer.fromChain); const toChain = useAppSelector((state) => state.transfer.toChain); @@ -128,7 +127,7 @@ export function useSelection() { bridgeTypes.map((item) => [item, { symbol: tokenSymbol }]), ) as any as IBridgeToken; - if (chainId && chainId !== defaultSelectedInfo.fromChainId) { + if (chainId) { const fromChains = getFromChains({}); const chain = fromChains.find((chain) => chain.id === chainId); if (chain) { From ee4e63ec4deeb34e773cff0a7a14633591166e4f Mon Sep 17 00:00:00 2001 From: aidencao Date: Sun, 3 Nov 2024 22:33:59 +0800 Subject: [PATCH 19/23] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/pre.json | 1 + .release/.changeset/rude-tools-give.md | 5 ++ packages/canonical-bridge-widget/CHANGELOG.md | 6 ++ packages/canonical-bridge-widget/package.json | 2 +- .../cBridge/components/CBridgeSendMaxMin.tsx | 2 +- .../transfer/components/ReceiveInfo/index.tsx | 15 +---- .../components/TransferOverview/index.tsx | 17 +----- .../transfer/hooks/useLoadingBridgeFees.ts | 58 ++++++++++++------- 8 files changed, 55 insertions(+), 51 deletions(-) create mode 100644 .release/.changeset/rude-tools-give.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 0d68eb7a..571f33c7 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -19,6 +19,7 @@ "polite-monkeys-share", "rare-grapes-act", "rotten-nails-drop", + "rude-tools-give", "silly-lions-clap", "sixty-scissors-protect", "slimy-clocks-rule", diff --git a/.release/.changeset/rude-tools-give.md b/.release/.changeset/rude-tools-give.md new file mode 100644 index 00000000..c5a648be --- /dev/null +++ b/.release/.changeset/rude-tools-give.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Resolve multi loadingFee requst diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index e1abceca..793eaa91 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.3.2-alpha.21 + +### Patch Changes + +- Resolve multi loadingFee requst + ## 0.3.2-alpha.20 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 252cc642..a8ff588c 100644 --- 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.20", + "version": "0.3.2-alpha.21", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx index d6db61f3..eebebd3d 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx @@ -12,7 +12,7 @@ export const CBridgeSendMaxMin = memo(function CBridgeSe useEffect(() => { dispatch(setCBridgeMaxMinSendAmt(cBridgeAllowedAmt)); - }, [cBridgeAllowedAmt, dispatch]); + }, [cBridgeAllowedAmt.max, cBridgeAllowedAmt.min, dispatch]); return null; }); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx index ff9f5bba..a7249e30 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx @@ -7,8 +7,7 @@ import { Collapse, useBreakpointValue, } from '@bnb-chain/space'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; -import { debounce } from 'lodash'; +import { useEffect, useMemo } from 'react'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { useGetReceiveAmount } from '@/modules/transfer/hooks/useGetReceiveAmount'; @@ -47,16 +46,6 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { const { formatMessage } = useIntl(); const { loadingBridgeFees } = useLoadingBridgeFees(); const dispatch = useAppDispatch(); - const loadingBridgeFeesRef = useRef(loadingBridgeFees); - loadingBridgeFeesRef.current = loadingBridgeFees; - - // todo fix it - const debounceLoadingFee = useCallback( - debounce(() => { - loadingBridgeFeesRef.current(); - }, 300), - [], - ); const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo); const isGlobalFeeLoading = useAppSelector((state) => state.transfer.isGlobalFeeLoading); @@ -129,7 +118,7 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { } dispatch(setIsGlobalFeeLoading(true)); dispatch(setIsRefreshing(true)); - debounceLoadingFee(); + loadingBridgeFees(); dispatch(setIsRefreshing(false)); } else { dispatch(setIsGlobalFeeLoading(true)); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx index 57d113e7..1ecca835 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx @@ -8,8 +8,7 @@ import { useTheme, Collapse, } from '@bnb-chain/space'; -import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'; -import { debounce } from 'lodash'; +import { ReactNode, useEffect, useMemo } from 'react'; import { setEstimatedAmount, @@ -47,19 +46,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: const sendValue = useAppSelector((state) => state.transfer.sendValue); const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount); const toTokenInfo = useAppSelector((state) => state.transfer.toToken); - const loadingBridgeFeesRef = useRef(loadingBridgeFees); - loadingBridgeFeesRef.current = loadingBridgeFees; - - // todo fix it - const debounceLoadingFee = useCallback( - debounce(() => { - loadingBridgeFeesRef.current(); - }, 300), - [], - ); - const debouncedSendValue = useDebounce(sendValue, DEBOUNCE_DELAY); - const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; useEffect(() => { @@ -74,7 +61,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: } dispatch(setIsGlobalFeeLoading(true)); dispatch(setIsRefreshing(true)); - debounceLoadingFee(); + loadingBridgeFees(); dispatch(setIsRefreshing(false)); } else { dispatch(setIsGlobalFeeLoading(true)); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts index be178996..7fc828fe 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts +++ b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useRef } from 'react'; import { formatUnits, parseUnits } from 'viem'; import { useAccount, useBalance, usePublicClient } from 'wagmi'; import { BridgeType, DeBridgeCreateQuoteResponse } from '@bnb-chain/canonical-bridge-sdk'; @@ -40,11 +40,31 @@ export const useLoadingBridgeFees = () => { http: { deBridgeAccessToken }, } = useBridgeConfig(); const nativeToken = useGetNativeToken(); - const { deBridgeFeeSorting } = useGetDeBridgeFees(); - const { cBridgeFeeSorting, isAllowSendError } = useGetCBridgeFees(); - const { stargateFeeSorting } = useGetStargateFees(); - const { layerZeroFeeSorting } = useGetLayerZeroFees(); - const { mesonFeeSorting } = useGetMesonFees(); + const { deBridgeFeeSorting: _deBridgeFeeSorting } = useGetDeBridgeFees(); + const deBridgeFeeSorting = useRef(_deBridgeFeeSorting); + deBridgeFeeSorting.current = _deBridgeFeeSorting; + + const { cBridgeFeeSorting: _cBridgeFeeSorting, isAllowSendError: _isAllowSendError } = + useGetCBridgeFees(); + const cBridgeFeeSorting = useRef(_cBridgeFeeSorting); + cBridgeFeeSorting.current = _cBridgeFeeSorting; + + // todo ensure cbridge minmax range updates before loadingBridgeFees + const isAllowSendError = useRef(_isAllowSendError); + isAllowSendError.current = _isAllowSendError; + + const { stargateFeeSorting: _stargateFeeSorting } = useGetStargateFees(); + const stargateFeeSorting = useRef(_stargateFeeSorting); + stargateFeeSorting.current = _stargateFeeSorting; + + const { layerZeroFeeSorting: _layerZeroFeeSorting } = useGetLayerZeroFees(); + const layerZeroFeeSorting = useRef(_layerZeroFeeSorting); + layerZeroFeeSorting.current = _layerZeroFeeSorting; + + const { mesonFeeSorting: _mesonFeeSorting } = useGetMesonFees(); + const mesonFeeSorting = useRef(_mesonFeeSorting); + mesonFeeSorting.current = _mesonFeeSorting; + const { formatMessage } = useIntl(); const toToken = useAppSelector((state) => state.transfer.toToken); @@ -54,11 +74,15 @@ export const useLoadingBridgeFees = () => { const toChain = useAppSelector((state) => state.transfer.toChain); const max_slippage = useAppSelector((state) => state.transfer.slippage); + // todo ensure nativeBalance updates before loadingBridgeFees const { data: nativeBalance } = useBalance({ address, chainId: fromChain?.id }); + const nativeBalanceRef = useRef(nativeBalance); + nativeBalanceRef.current = nativeBalance; // eslint-disable-next-line @typescript-eslint/no-explicit-any const publicClient = usePublicClient({ chainId: fromChain?.id }) as any; const debouncedSendValue = useDebounce(sendValue, DEBOUNCE_DELAY); + const loadingBridgeFees = useCallback(async () => { dispatch(setRouteFees(undefined)); if (!selectedToken || !fromChain || !toChain || !debouncedSendValue) { @@ -174,7 +198,7 @@ export const useLoadingBridgeFees = () => { ); } } else { - const feeSortingRes = await mesonFeeSorting(mesonEst.value.result); + const feeSortingRes = await mesonFeeSorting.current(mesonEst.value.result); const decimals = selectedToken?.meson?.raw?.decimals || 6; const receiveMesonAmt = parseUnits(debouncedSendValue, decimals) - @@ -203,7 +227,7 @@ export const useLoadingBridgeFees = () => { // deBridge if (debridgeEst.status === 'fulfilled' && debridgeEst?.value) { - const feeSortingRes = await deBridgeFeeSorting( + const feeSortingRes = await deBridgeFeeSorting.current( debridgeEst.value as DeBridgeCreateQuoteResponse, ); if (!feeSortingRes?.isFailedToGetGas) { @@ -250,12 +274,12 @@ export const useLoadingBridgeFees = () => { } else { dispatch(setEstimatedAmount({ cBridge: cbridgeEst.value })); - const feeSortingRes = await cBridgeFeeSorting(cbridgeEst.value); + const feeSortingRes = await cBridgeFeeSorting.current(cbridgeEst.value); // Hide route on gas error if (feeSortingRes?.isFailedToGetGas) { dispatch(setEstimatedAmount({ cBridge: undefined })); } - if (!isAllowSendError && !feeSortingRes?.isFailedToGetGas) { + if (!isAllowSendError.current && !feeSortingRes?.isFailedToGetGas) { valueArr.push({ type: 'cBridge', value: formatUnits( @@ -278,7 +302,7 @@ export const useLoadingBridgeFees = () => { // stargate if (stargateEst.status === 'fulfilled' && stargateEst?.value) { - const feeSortingRes = await stargateFeeSorting(stargateEst.value); + const feeSortingRes = await stargateFeeSorting.current(stargateEst.value); // Hide route if we can not get gas fee. if (!feeSortingRes?.isFailedToGetGas) { dispatch(setEstimatedAmount({ stargate: toObject(stargateEst.value) })); @@ -307,11 +331,11 @@ export const useLoadingBridgeFees = () => { // layerZero if (layerZeroEst.status === 'fulfilled' && layerZeroEst?.value) { const nativeFee = layerZeroEst?.value[0]; - if (nativeBalance?.value && nativeBalance.value < Number(nativeFee)) { + if (nativeBalanceRef.current?.value && nativeBalanceRef.current.value < Number(nativeFee)) { dispatch(setRouteError({ layerZero: `Insufficient ${nativeToken} to cover native fee` })); dispatch(setEstimatedAmount({ layerZero: 'error' })); } else { - const feeSortingRes = await layerZeroFeeSorting(layerZeroEst.value); + const feeSortingRes = await layerZeroFeeSorting.current(layerZeroEst.value); if (!feeSortingRes?.isFailedToGetGas) { dispatch( setEstimatedAmount({ @@ -373,15 +397,7 @@ export const useLoadingBridgeFees = () => { max_slippage, bridgeSDK, deBridgeAccessToken, - nativeBalance?.value, - deBridgeFeeSorting, - cBridgeFeeSorting, - stargateFeeSorting, - layerZeroFeeSorting, - mesonFeeSorting, - preSelectRoute, - isAllowSendError, nativeToken, ]); From 743e39deca4bb4fc3d5fdbe6c38bfeff091708ba Mon Sep 17 00:00:00 2001 From: aidencao Date: Sun, 3 Nov 2024 23:10:52 +0800 Subject: [PATCH 20/23] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/big-ligers-stare.md | 5 ++ .release/.changeset/pre.json | 1 + common/config/rush/pnpm-lock.yaml | 49 ++++++++++++ packages/canonical-bridge-widget/CHANGELOG.md | 6 ++ packages/canonical-bridge-widget/package.json | 3 +- .../cBridge/components/CBridgeSendMaxMin.tsx | 76 +++++++++++++++++-- .../cBridge/hooks/useCBridgeSendMaxMin.ts | 20 ++++- .../SendInput/InputValidationMessage.tsx | 7 +- 8 files changed, 154 insertions(+), 13 deletions(-) create mode 100644 .release/.changeset/big-ligers-stare.md diff --git a/.release/.changeset/big-ligers-stare.md b/.release/.changeset/big-ligers-stare.md new file mode 100644 index 00000000..3de34771 --- /dev/null +++ b/.release/.changeset/big-ligers-stare.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Fix Cbridge send minmax multi call diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 571f33c7..944d9970 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -6,6 +6,7 @@ "@bnb-chain/canonical-bridge-widget": "0.1.4" }, "changesets": [ + "big-ligers-stare", "chilled-lizards-compare", "cyan-boxes-judge", "dirty-shoes-tap", diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 07d93356..33302965 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -315,6 +315,9 @@ importers: '@vitejs/plugin-react': specifier: ^4.3.1 version: 4.3.1(vite@4.5.3(@types/node@20.11.21)(terser@5.31.6)) + ahooks: + specifier: ~3.8.1 + version: 3.8.1(react@18.3.1) alchemy-sdk: specifier: ~3.4.1 version: 3.4.3(bufferutil@4.0.8)(utf-8-validate@5.0.9) @@ -5319,6 +5322,12 @@ packages: resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==} engines: {node: '>=8'} + ahooks@3.8.1: + resolution: {integrity: sha512-JoP9+/RWO7MnI/uSKdvQ8WB10Y3oo1PjLv+4Sv4Vpm19Z86VUMdXh+RhWvMGxZZs06sq2p0xVtFk8Oh5ZObsoA==} + engines: {node: '>=8.0.0'} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + airbnb-js-shims@2.2.1: resolution: {integrity: sha512-wJNXPH66U2xjgo1Zwyjf9EydvJ2Si94+vSdk6EERcBfB2VZkeltpqIats0cqIZMLCXP3zcyaUKGYQeIBT6XjsQ==} @@ -7930,6 +7939,9 @@ packages: resolution: {integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==} engines: {node: '>= 0.10'} + intersection-observer@0.12.2: + resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==} + intl-messageformat@10.1.0: resolution: {integrity: sha512-diGMDv9Zo2Mggf6AkJszq/BIR5+rarkwcr4g5JGgREwbwAHY9hR/dYd8FbIgQx2RTxhJsABfAWCiENFLbaTZjg==} @@ -8374,6 +8386,10 @@ packages: js-base64@3.7.7: resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==} + js-cookie@3.0.5: + resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==} + engines: {node: '>=14'} + js-sha3@0.8.0: resolution: {integrity: sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==} @@ -9909,6 +9925,9 @@ packages: react-fast-compare@3.2.1: resolution: {integrity: sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==} + react-fast-compare@3.2.2: + resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} + react-focus-lock@2.9.4: resolution: {integrity: sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==} peerDependencies: @@ -10187,6 +10206,9 @@ packages: require-main-filename@2.0.0: resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==} + resize-observer-polyfill@1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -10380,6 +10402,10 @@ packages: resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==} engines: {node: '>= 10.13.0'} + screenfull@5.2.0: + resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==} + engines: {node: '>=0.10.0'} + scrypt-js@3.0.1: resolution: {integrity: sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==} @@ -20711,6 +20737,19 @@ snapshots: clean-stack: 2.2.0 indent-string: 4.0.0 + ahooks@3.8.1(react@18.3.1): + dependencies: + '@babel/runtime': 7.25.0 + dayjs: 1.11.10 + intersection-observer: 0.12.2 + js-cookie: 3.0.5 + lodash: 4.17.21 + react: 18.3.1 + react-fast-compare: 3.2.2 + resize-observer-polyfill: 1.5.1 + screenfull: 5.2.0 + tslib: 2.7.0 + airbnb-js-shims@2.2.1: dependencies: array-includes: 3.1.8 @@ -24405,6 +24444,8 @@ snapshots: interpret@2.2.0: {} + intersection-observer@0.12.2: {} + intl-messageformat@10.1.0: dependencies: '@formatjs/ecma402-abstract': 1.11.7 @@ -24859,6 +24900,8 @@ snapshots: js-base64@3.7.7: {} + js-cookie@3.0.5: {} + js-sha3@0.8.0: {} js-string-escape@1.0.1: {} @@ -26540,6 +26583,8 @@ snapshots: react-fast-compare@3.2.1: {} + react-fast-compare@3.2.2: {} + react-focus-lock@2.9.4(@types/react@18.3.8)(react@18.3.1): dependencies: '@babel/runtime': 7.25.0 @@ -26920,6 +26965,8 @@ snapshots: require-main-filename@2.0.0: {} + resize-observer-polyfill@1.5.1: {} + resolve-from@4.0.0: {} resolve-from@5.0.0: {} @@ -27160,6 +27207,8 @@ snapshots: ajv: 6.12.6 ajv-keywords: 3.5.2(ajv@6.12.6) + screenfull@5.2.0: {} + scrypt-js@3.0.1: {} sdp@2.12.0: {} diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 793eaa91..8918813a 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.3.2-alpha.22 + +### Patch Changes + +- Fix Cbridge send minmax multi call + ## 0.3.2-alpha.21 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index a8ff588c..55f99f6a 100644 --- 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.21", + "version": "0.3.2-alpha.22", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, @@ -52,6 +52,7 @@ "@types/react": "^18", "@types/react-dom": "^18", "@vitejs/plugin-react": "^4.3.1", + "ahooks": "~3.8.1", "alchemy-sdk": "~3.4.1", "axios": "~1.6.8", "eslint": "^8.8.0", diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx index eebebd3d..f066e87f 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx @@ -1,18 +1,80 @@ import { memo, useEffect } from 'react'; +import { usePublicClient } from 'wagmi'; +import { useWhyDidYouUpdate } from 'ahooks'; +import { formatUnits } from 'viem'; -import { useCBridgeSendMaxMin } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin'; -import { useAppDispatch } from '@/modules/store/StoreProvider'; +import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { setCBridgeMaxMinSendAmt } from '@/modules/aggregator/action'; +import { useCBridgeTransferParams } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeTransferParams.ts'; +import { useBridgeSDK } from '@/core/hooks/useBridgeSDK.ts'; -interface CBridgeSendMaxMinProps {} +interface CBridgeSendMaxMinProps { + isDisabled: boolean; +} -export const CBridgeSendMaxMin = memo(function CBridgeSendMaxMin() { - const { minMaxSendAmt: cBridgeAllowedAmt } = useCBridgeSendMaxMin(); +export const CBridgeSendMaxMin = memo(function CBridgeSendMaxMin({ + isDisabled, +}) { + const { bridgeAddress } = useCBridgeTransferParams(); + const bridgeSDK = useBridgeSDK(); + const fromChain = useAppSelector((state) => state.transfer.fromChain); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const publicClient = usePublicClient({ chainId: fromChain?.id }) as any; + const selectedToken = useAppSelector((state) => state.transfer.selectedToken); const dispatch = useAppDispatch(); + useWhyDidYouUpdate('useWhyDidYouUpdate', { + selectedToken, + publicClient, + bridgeAddress, + isDisabled, + bridgeSDK: bridgeSDK?.cBridge, + }); + useEffect(() => { - dispatch(setCBridgeMaxMinSendAmt(cBridgeAllowedAmt)); - }, [cBridgeAllowedAmt.max, cBridgeAllowedAmt.min, dispatch]); + (async () => { + try { + if ( + selectedToken?.isPegged || + !publicClient || + !bridgeAddress || + !selectedToken?.address || + isDisabled || + !bridgeSDK?.cBridge + ) { + dispatch(setCBridgeMaxMinSendAmt({ min: '0', max: '0' })); + return; + } + + const { min, max } = await bridgeSDK.cBridge.getSendRange({ + bridgeAddress: bridgeAddress as `0x${string}`, + tokenAddress: selectedToken?.address as `0x${string}`, + client: publicClient, + }); + + dispatch( + setCBridgeMaxMinSendAmt({ + min: formatUnits(min, selectedToken?.decimals), + max: formatUnits(max, selectedToken?.decimals), + }), + ); + + // eslint-disable-next-line + } catch (error: any) { + // eslint-disable-next-line no-console + console.log('error', error); + } + })(); + }, [ + dispatch, + selectedToken?.address, + selectedToken?.isPegged, + selectedToken?.decimals, + publicClient, + bridgeAddress, + isDisabled, + bridgeSDK?.cBridge, + ]); return null; }); diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts index 2c012ae1..10f11e44 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { usePublicClient } from 'wagmi'; import { formatUnits } from 'viem'; +import { useWhyDidYouUpdate } from 'ahooks'; import { useAppSelector } from '@/modules/store/StoreProvider'; import { useCBridgeTransferParams } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeTransferParams'; @@ -19,6 +20,14 @@ export const useCBridgeSendMaxMin = (isDisabled = false) => { max: '0', }); + useWhyDidYouUpdate('useWhyDidYouUpdate', { + selectedToken, + publicClient, + bridgeAddress, + isDisabled, + bridgeSDK: bridgeSDK?.cBridge, + }); + useEffect(() => { (async () => { try { @@ -32,6 +41,7 @@ export const useCBridgeSendMaxMin = (isDisabled = false) => { ) { return setMinMaxSendAmt({ min: '0', max: '0' }); } + const { min, max } = await bridgeSDK.cBridge.getSendRange({ bridgeAddress: bridgeAddress as `0x${string}`, tokenAddress: selectedToken?.address as `0x${string}`, @@ -48,7 +58,15 @@ export const useCBridgeSendMaxMin = (isDisabled = false) => { console.log('error', error); } })(); - }, [selectedToken, publicClient, bridgeAddress, isDisabled, bridgeSDK?.cBridge]); + }, [ + selectedToken?.address, + selectedToken?.isPegged, + selectedToken?.decimals, + publicClient, + bridgeAddress, + isDisabled, + bridgeSDK?.cBridge, + ]); return { minMaxSendAmt, diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx index 38ef41a5..065c1289 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx @@ -5,7 +5,6 @@ import { useAccount } from 'wagmi'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { useInputValidation } from '@/modules/transfer/hooks/useInputValidation'; import { setError, setIsTransferable } from '@/modules/transfer/action'; -import { useCBridgeSendMaxMin } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin'; import { useTokenBalance } from '@/modules/aggregator/hooks/useTokenBalance'; export const InputValidationMessage = () => { @@ -20,11 +19,10 @@ export const InputValidationMessage = () => { const selectedToken = useAppSelector((state) => state.transfer.selectedToken); const sendValue = useAppSelector((state) => state.transfer.sendValue); const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount); + const minMaxSendAmt = useAppSelector((state) => state.aggregator.bridgeMaxMin.cBridge); const { getTokenBalance } = useTokenBalance(); - const { minMaxSendAmt } = useCBridgeSendMaxMin(); - const [balanceInputError, setBalanceInputError] = useState(''); useEffect(() => { @@ -54,7 +52,8 @@ export const InputValidationMessage = () => { sendValue, dispatch, estimatedAmount, - minMaxSendAmt, + minMaxSendAmt?.min, + minMaxSendAmt?.max, selectedToken?.decimals, selectedToken?.isPegged, transferActionInfo, From 0473c824efdaa2bdcc608181cbd372c7efd22e79 Mon Sep 17 00:00:00 2001 From: aidencao Date: Sun, 3 Nov 2024 23:26:35 +0800 Subject: [PATCH 21/23] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/pre.json | 1 + .release/.changeset/shy-lemons-grab.md | 5 ++ common/config/rush/pnpm-lock.yaml | 49 ------------------- packages/canonical-bridge-widget/CHANGELOG.md | 6 +++ packages/canonical-bridge-widget/package.json | 3 +- .../cBridge/components/CBridgeSendMaxMin.tsx | 9 ---- .../cBridge/hooks/useCBridgeSendMaxMin.ts | 9 ---- 7 files changed, 13 insertions(+), 69 deletions(-) create mode 100644 .release/.changeset/shy-lemons-grab.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 944d9970..00d5b14f 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -21,6 +21,7 @@ "rare-grapes-act", "rotten-nails-drop", "rude-tools-give", + "shy-lemons-grab", "silly-lions-clap", "sixty-scissors-protect", "slimy-clocks-rule", diff --git a/.release/.changeset/shy-lemons-grab.md b/.release/.changeset/shy-lemons-grab.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/shy-lemons-grab.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 index 33302965..07d93356 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -315,9 +315,6 @@ importers: '@vitejs/plugin-react': specifier: ^4.3.1 version: 4.3.1(vite@4.5.3(@types/node@20.11.21)(terser@5.31.6)) - ahooks: - specifier: ~3.8.1 - version: 3.8.1(react@18.3.1) alchemy-sdk: specifier: ~3.4.1 version: 3.4.3(bufferutil@4.0.8)(utf-8-validate@5.0.9) @@ -5322,12 +5319,6 @@ packages: resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==} engines: {node: '>=8'} - ahooks@3.8.1: - resolution: {integrity: sha512-JoP9+/RWO7MnI/uSKdvQ8WB10Y3oo1PjLv+4Sv4Vpm19Z86VUMdXh+RhWvMGxZZs06sq2p0xVtFk8Oh5ZObsoA==} - engines: {node: '>=8.0.0'} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - airbnb-js-shims@2.2.1: resolution: {integrity: sha512-wJNXPH66U2xjgo1Zwyjf9EydvJ2Si94+vSdk6EERcBfB2VZkeltpqIats0cqIZMLCXP3zcyaUKGYQeIBT6XjsQ==} @@ -7939,9 +7930,6 @@ packages: resolution: {integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==} engines: {node: '>= 0.10'} - intersection-observer@0.12.2: - resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==} - intl-messageformat@10.1.0: resolution: {integrity: sha512-diGMDv9Zo2Mggf6AkJszq/BIR5+rarkwcr4g5JGgREwbwAHY9hR/dYd8FbIgQx2RTxhJsABfAWCiENFLbaTZjg==} @@ -8386,10 +8374,6 @@ packages: js-base64@3.7.7: resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==} - js-cookie@3.0.5: - resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==} - engines: {node: '>=14'} - js-sha3@0.8.0: resolution: {integrity: sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==} @@ -9925,9 +9909,6 @@ packages: react-fast-compare@3.2.1: resolution: {integrity: sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==} - react-fast-compare@3.2.2: - resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} - react-focus-lock@2.9.4: resolution: {integrity: sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==} peerDependencies: @@ -10206,9 +10187,6 @@ packages: require-main-filename@2.0.0: resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==} - resize-observer-polyfill@1.5.1: - resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} - resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -10402,10 +10380,6 @@ packages: resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==} engines: {node: '>= 10.13.0'} - screenfull@5.2.0: - resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==} - engines: {node: '>=0.10.0'} - scrypt-js@3.0.1: resolution: {integrity: sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==} @@ -20737,19 +20711,6 @@ snapshots: clean-stack: 2.2.0 indent-string: 4.0.0 - ahooks@3.8.1(react@18.3.1): - dependencies: - '@babel/runtime': 7.25.0 - dayjs: 1.11.10 - intersection-observer: 0.12.2 - js-cookie: 3.0.5 - lodash: 4.17.21 - react: 18.3.1 - react-fast-compare: 3.2.2 - resize-observer-polyfill: 1.5.1 - screenfull: 5.2.0 - tslib: 2.7.0 - airbnb-js-shims@2.2.1: dependencies: array-includes: 3.1.8 @@ -24444,8 +24405,6 @@ snapshots: interpret@2.2.0: {} - intersection-observer@0.12.2: {} - intl-messageformat@10.1.0: dependencies: '@formatjs/ecma402-abstract': 1.11.7 @@ -24900,8 +24859,6 @@ snapshots: js-base64@3.7.7: {} - js-cookie@3.0.5: {} - js-sha3@0.8.0: {} js-string-escape@1.0.1: {} @@ -26583,8 +26540,6 @@ snapshots: react-fast-compare@3.2.1: {} - react-fast-compare@3.2.2: {} - react-focus-lock@2.9.4(@types/react@18.3.8)(react@18.3.1): dependencies: '@babel/runtime': 7.25.0 @@ -26965,8 +26920,6 @@ snapshots: require-main-filename@2.0.0: {} - resize-observer-polyfill@1.5.1: {} - resolve-from@4.0.0: {} resolve-from@5.0.0: {} @@ -27207,8 +27160,6 @@ snapshots: ajv: 6.12.6 ajv-keywords: 3.5.2(ajv@6.12.6) - screenfull@5.2.0: {} - scrypt-js@3.0.1: {} sdp@2.12.0: {} diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 8918813a..1f64c854 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.3.2-alpha.23 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.22 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 55f99f6a..9196ce79 100644 --- 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.22", + "version": "0.3.2-alpha.23", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, @@ -52,7 +52,6 @@ "@types/react": "^18", "@types/react-dom": "^18", "@vitejs/plugin-react": "^4.3.1", - "ahooks": "~3.8.1", "alchemy-sdk": "~3.4.1", "axios": "~1.6.8", "eslint": "^8.8.0", diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx index f066e87f..e5839cb3 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx @@ -1,6 +1,5 @@ import { memo, useEffect } from 'react'; import { usePublicClient } from 'wagmi'; -import { useWhyDidYouUpdate } from 'ahooks'; import { formatUnits } from 'viem'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; @@ -23,14 +22,6 @@ export const CBridgeSendMaxMin = memo(function CBridgeSe const selectedToken = useAppSelector((state) => state.transfer.selectedToken); const dispatch = useAppDispatch(); - useWhyDidYouUpdate('useWhyDidYouUpdate', { - selectedToken, - publicClient, - bridgeAddress, - isDisabled, - bridgeSDK: bridgeSDK?.cBridge, - }); - useEffect(() => { (async () => { try { diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts index 10f11e44..5439381a 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts @@ -1,7 +1,6 @@ import { useEffect, useState } from 'react'; import { usePublicClient } from 'wagmi'; import { formatUnits } from 'viem'; -import { useWhyDidYouUpdate } from 'ahooks'; import { useAppSelector } from '@/modules/store/StoreProvider'; import { useCBridgeTransferParams } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeTransferParams'; @@ -20,14 +19,6 @@ export const useCBridgeSendMaxMin = (isDisabled = false) => { max: '0', }); - useWhyDidYouUpdate('useWhyDidYouUpdate', { - selectedToken, - publicClient, - bridgeAddress, - isDisabled, - bridgeSDK: bridgeSDK?.cBridge, - }); - useEffect(() => { (async () => { try { From 8b2bcfe2a1a28c5b9e749feba9f97bde146579be Mon Sep 17 00:00:00 2001 From: aidencao Date: Mon, 4 Nov 2024 12:00:24 +0800 Subject: [PATCH 22/23] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/ninety-buckets-cough.md | 5 +++++ .release/.changeset/pre.json | 1 + packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../src/core/components/icons/ExchangeChainIcon.tsx | 7 +++++-- .../src/core/components/icons/ExpandDetails.tsx | 7 +++++-- .../src/core/components/icons/HideDetails.tsx | 7 +++++-- .../src/core/components/icons/NetworkIcon.tsx | 7 +++++-- .../src/core/components/icons/NoNetworkIcon.tsx | 7 +++++-- .../src/core/components/icons/NoResultIcon.tsx | 7 +++++-- .../src/core/components/icons/RouteNotFoundIcon.tsx | 7 +++++-- .../src/core/components/icons/WalletIcon.tsx | 7 +++++-- .../src/core/components/icons/brand/CBridgeLogo.tsx | 12 ++++++++---- .../cBridge/components/CBridgeSendMaxMin.tsx | 4 ++-- 14 files changed, 63 insertions(+), 23 deletions(-) create mode 100644 .release/.changeset/ninety-buckets-cough.md diff --git a/.release/.changeset/ninety-buckets-cough.md b/.release/.changeset/ninety-buckets-cough.md new file mode 100644 index 00000000..c2ed9d6e --- /dev/null +++ b/.release/.changeset/ninety-buckets-cough.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Fix svg icon mask duplicate id diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 00d5b14f..5de72f7c 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -17,6 +17,7 @@ "metal-steaks-drive", "nasty-candles-marry", "nice-boxes-taste", + "ninety-buckets-cough", "polite-monkeys-share", "rare-grapes-act", "rotten-nails-drop", diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 1f64c854..8b712433 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.3.2-alpha.24 + +### Patch Changes + +- Fix svg icon mask duplicate id + ## 0.3.2-alpha.23 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 9196ce79..73e8bde3 100644 --- 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.23", + "version": "0.3.2-alpha.24", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/core/components/icons/ExchangeChainIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/ExchangeChainIcon.tsx index bf60fea6..cb6c82b2 100644 --- a/packages/canonical-bridge-widget/src/core/components/icons/ExchangeChainIcon.tsx +++ b/packages/canonical-bridge-widget/src/core/components/icons/ExchangeChainIcon.tsx @@ -1,6 +1,9 @@ import { Icon, IconProps } from '@bnb-chain/space'; +import { useState } from 'react'; export function ExchangeChainIcon(props: IconProps) { + const [id1] = useState('mask0_2001_23666_exchangeIcon_' + Date.now()); + return ( - + { + const [id1] = useState('mask0_26135_32299_expand_details_' + Date.now()); + return ( { {...props} > { > - + { + const [id1] = useState('mask0_27981_20506_' + Date.now()); + return ( { {...props} > { > - + - + - + - + - + - + - + { + const [id1] = useState('mask0_26136_34658_no_route_found_' + Date.now()); + return ( { { > - + - + - + diff --git a/packages/canonical-bridge-widget/src/core/components/icons/brand/CBridgeLogo.tsx b/packages/canonical-bridge-widget/src/core/components/icons/brand/CBridgeLogo.tsx index f1b083bc..533ca4b7 100644 --- a/packages/canonical-bridge-widget/src/core/components/icons/brand/CBridgeLogo.tsx +++ b/packages/canonical-bridge-widget/src/core/components/icons/brand/CBridgeLogo.tsx @@ -1,6 +1,10 @@ import { Icon, IconProps } from '@bnb-chain/space'; +import { useState } from 'react'; export function CBridgeIcon(props: IconProps) { + const [id1] = useState('mask0_1455_365_' + Date.now()); + const [id2] = useState('mask1_1455_365_' + Date.now()); + return ( - + - + (function CBridgeSendMaxMin({ - isDisabled, + isDisabled = false, }) { const { bridgeAddress } = useCBridgeTransferParams(); const bridgeSDK = useBridgeSDK(); From 3f1f337e82829bbf04b589513e89c94d9095a30d Mon Sep 17 00:00:00 2001 From: aidencao Date: Mon, 4 Nov 2024 12:10:29 +0800 Subject: [PATCH 23/23] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/pre.json | 1 + .release/.changeset/six-turtles-prove.md | 5 +++++ packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../src/core/components/icons/AvatarIcon.tsx | 7 +++++-- .../src/core/components/icons/NoNetworkIcon.tsx | 5 +++-- .../src/core/components/icons/NoResultIcon.tsx | 5 +++-- .../src/core/components/icons/RouteNotFoundIcon.tsx | 5 +++-- .../src/core/components/icons/TransferToIcon.tsx | 7 +++++-- .../src/core/components/icons/brand/StargateLogo.tsx | 12 ++++++++---- 10 files changed, 40 insertions(+), 15 deletions(-) create mode 100644 .release/.changeset/six-turtles-prove.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 5de72f7c..e7298e20 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -24,6 +24,7 @@ "rude-tools-give", "shy-lemons-grab", "silly-lions-clap", + "six-turtles-prove", "sixty-scissors-protect", "slimy-clocks-rule", "spotty-trainers-kick", diff --git a/.release/.changeset/six-turtles-prove.md b/.release/.changeset/six-turtles-prove.md new file mode 100644 index 00000000..3d749878 --- /dev/null +++ b/.release/.changeset/six-turtles-prove.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update icon element id diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 8b712433..63bf16e3 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,11 @@ # @bnb-chain/canonical-bridge-widget +## 0.3.2-alpha.25 + +### Patch Changes + +- Update icon element id + ## 0.3.2-alpha.24 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 73e8bde3..d4ae2bd9 100644 --- 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.24", + "version": "0.3.2-alpha.25", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/core/components/icons/AvatarIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/AvatarIcon.tsx index bde5f6e7..1b844f28 100644 --- a/packages/canonical-bridge-widget/src/core/components/icons/AvatarIcon.tsx +++ b/packages/canonical-bridge-widget/src/core/components/icons/AvatarIcon.tsx @@ -1,9 +1,12 @@ import { Icon, IconProps } from '@bnb-chain/space'; +import { useState } from 'react'; export function AvatarIcon(props: IconProps) { + const [id1] = useState('clip0_26274_19335_' + Date.now()); + return ( - + @@ -14,7 +17,7 @@ export function AvatarIcon(props: IconProps) { - + diff --git a/packages/canonical-bridge-widget/src/core/components/icons/NoNetworkIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/NoNetworkIcon.tsx index d900d177..195d0974 100644 --- a/packages/canonical-bridge-widget/src/core/components/icons/NoNetworkIcon.tsx +++ b/packages/canonical-bridge-widget/src/core/components/icons/NoNetworkIcon.tsx @@ -3,10 +3,11 @@ import { useState } from 'react'; export function NoNetworkIcon(props: IconProps) { const [id1] = useState('mask0_27267_116884_' + Date.now()); + const [id2] = useState('clip0_27267_116884_' + Date.now()); return ( - + @@ -19,7 +20,7 @@ export function NoNetworkIcon(props: IconProps) { - + diff --git a/packages/canonical-bridge-widget/src/core/components/icons/NoResultIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/NoResultIcon.tsx index ef7a322b..48fe2658 100644 --- a/packages/canonical-bridge-widget/src/core/components/icons/NoResultIcon.tsx +++ b/packages/canonical-bridge-widget/src/core/components/icons/NoResultIcon.tsx @@ -3,10 +3,11 @@ import { useState } from 'react'; export function NoResultIcon(props: IconProps) { const [id1] = useState('mask0_26136_34623_' + Date.now()); + const [id2] = useState('clip0_26136_34623_' + Date.now()); return ( - + @@ -19,7 +20,7 @@ export function NoResultIcon(props: IconProps) { - + diff --git a/packages/canonical-bridge-widget/src/core/components/icons/RouteNotFoundIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/RouteNotFoundIcon.tsx index bc6c5b60..91a48aef 100644 --- a/packages/canonical-bridge-widget/src/core/components/icons/RouteNotFoundIcon.tsx +++ b/packages/canonical-bridge-widget/src/core/components/icons/RouteNotFoundIcon.tsx @@ -3,6 +3,7 @@ import { useState } from 'react'; export const RouteNotFoundIcon = (props: IconProps) => { const [id1] = useState('mask0_26136_34658_no_route_found_' + Date.now()); + const [id2] = useState('clip0_26136_34658_' + Date.now()); return ( { xmlns="http://www.w3.org/2000/svg" {...props} > - + { - + diff --git a/packages/canonical-bridge-widget/src/core/components/icons/TransferToIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/TransferToIcon.tsx index c95e834c..96259aca 100644 --- 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,9 @@ import { Icon, IconProps } from '@bnb-chain/space'; +import { useState } from 'react'; export function TransferToIcon(props: IconProps) { + const [id1] = useState('paint0_linear_2473_21184_' + Date.now()); + return ( - - + + - + - +