From 101199dd999c005e6ccaa505313697c572e26b5f Mon Sep 17 00:00:00 2001 From: aidencao Date: Wed, 23 Oct 2024 10:37:49 +0800 Subject: [PATCH 01/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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/24] 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 b890d323080f0522b32f14c6de9e52717a44efb7 Mon Sep 17 00:00:00 2001 From: aidencao Date: Tue, 29 Oct 2024 15:07:53 +0800 Subject: [PATCH 16/24] feat(canonical-bridge-widget): Update widget ui --- .../.changeset/chilled-lizards-compare.md | 5 + .release/.changeset/pre.json | 5 +- .release/.changeset/slimy-clocks-rule.md | 5 + .release/.changeset/tasty-pianos-raise.md | 5 + packages/canonical-bridge-widget/CHANGELOG.md | 18 +++ packages/canonical-bridge-widget/package.json | 2 +- .../src/core/components/icons/WarningIcon.tsx | 15 ++ .../src/core/hooks/useDebounce.ts | 2 +- .../src/core/locales/en.ts | 3 +- .../hooks/useDefaultSelectedInfo.ts | 5 +- .../components/Button/SwitchWalletButton.tsx | 5 +- .../components/Button/WalletButtonWrapper.tsx | 18 ++- .../transfer/components/ReceiveInfo/index.tsx | 143 +++++++++--------- .../components/SelectButton/index.tsx | 2 +- .../TransferOverview/NoRouteFound.tsx | 3 +- .../components/TransferOverview/index.tsx | 131 ++++++++-------- .../src/modules/transfer/index.tsx | 1 - .../wallet/components/NetworkStatus/index.tsx | 35 ++++- 18 files changed, 249 insertions(+), 154 deletions(-) create mode 100644 .release/.changeset/chilled-lizards-compare.md create mode 100644 .release/.changeset/slimy-clocks-rule.md create mode 100644 .release/.changeset/tasty-pianos-raise.md create mode 100644 packages/canonical-bridge-widget/src/core/components/icons/WarningIcon.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/pre.json b/.release/.changeset/pre.json index 8cf842fc..5cc398f5 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -6,9 +6,12 @@ "@bnb-chain/canonical-bridge-widget": "0.1.4" }, "changesets": [ + "chilled-lizards-compare", "metal-steaks-drive", "polite-monkeys-share", "rare-grapes-act", - "sixty-scissors-protect" + "sixty-scissors-protect", + "slimy-clocks-rule", + "tasty-pianos-raise" ] } 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/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/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 2cf488f1..196423c3 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,23 @@ # @bnb-chain/canonical-bridge-widget +## 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..c63795ad 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.4", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, 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/hooks/useDefaultSelectedInfo.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts index 29f52dd5..4c200c98 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts @@ -1,7 +1,7 @@ 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'; @@ -11,11 +11,12 @@ export function useDefaultSelectedInfo() { const { selectDefault } = useSelection(); const dispatch = useAppDispatch(); const { chainId } = useAccount(); + 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/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..09068be8 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 @@ -5,6 +5,7 @@ import { WalletConnectButton } from '@/modules/transfer/components/Button/Wallet 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.ts'; export function WalletButtonWrapper(props: PropsWithChildren) { const { children } = props; @@ -12,11 +13,22 @@ export function WalletButtonWrapper(props: PropsWithChildren) { const fromChain = useAppSelector((state) => state.transfer.fromChain); const { isConnected, chainId, walletType } = useCurrentWallet(); - if (isConnected) { - if (walletType !== fromChain?.chainType) { + const { _chainId, _fromChainId, _isConnected, _walletType, _fromChainType } = useDebounce( + { + _chainId: chainId, + _fromChainId: fromChain?.id, + _isConnected: isConnected, + _walletType: walletType, + _fromChainType: fromChain?.chainType, + }, + 100, + ); + + if (_isConnected) { + if (_walletType !== _fromChainType) { return ; } else { - if (chainId !== fromChain.id) { + if (_chainId !== _fromChainId) { return ; } return <>{children}; 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..6e560465 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,12 +1,4 @@ -import { - Box, - Flex, - useBreakpointValue, - useColorMode, - useIntl, - useTheme, - Collapse, -} from '@bnb-chain/space'; +import { Box, Flex, useColorMode, useIntl, useTheme, Collapse } from '@bnb-chain/space'; import { useEffect, useMemo } from 'react'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; @@ -46,7 +38,6 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { const { formatMessage } = useIntl(); const { loadingBridgeFees } = useLoadingBridgeFees(); const dispatch = useAppDispatch(); - const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo); const isGlobalFeeLoading = useAppSelector((state) => state.transfer.isGlobalFeeLoading); @@ -107,7 +98,6 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { useEffect(() => { // On mobile - if (!isBase) return; if (sendValue === debouncedSendValue) { dispatch(setTransferActionInfo(undefined)); if (!selectedToken || !Number(debouncedSendValue)) { @@ -123,19 +113,18 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { } else { dispatch(setIsGlobalFeeLoading(true)); } - }, [selectedToken, debouncedSendValue, dispatch, sendValue, loadingBridgeFees, isBase]); + }, [selectedToken, debouncedSendValue, dispatch, sendValue, loadingBridgeFees]); const isHideSection = useMemo(() => { // no receive amount and some routes are displayed if (!Number(sendValue)) return true; if (isGlobalFeeLoading) return false; return ( - !isBase && estimatedAmount && !Object.values(estimatedAmount).every((element) => element === undefined) && !receiveAmt ); - }, [sendValue, estimatedAmount, isBase, receiveAmt, isGlobalFeeLoading]); + }, [sendValue, estimatedAmount, receiveAmt, isGlobalFeeLoading]); const isHideRouteButton = useMemo(() => { return ( @@ -144,64 +133,78 @@ 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 && !isHideSection ? ( + + ) : ( + + ) ) : ( - ) - ) : ( - - )} + )} + - - + + ); }; 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/TransferOverview/NoRouteFound.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx index 35ac3124..02f15487 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 @@ -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 && ( - - - - - - {formatMessage({ id: 'route.title' })} - {!options.length || isGlobalFeeLoading ? ( - - ) : !isBase ? ( - - ) : null} + + + + + + + + {formatMessage({ id: 'route.title' })} + {!options.length || isGlobalFeeLoading ? ( + + ) : !isBase ? ( + + ) : null} + + + {!options || !options?.length || isGlobalFeeLoading ? ( + + + + + + ) : ( + + {options?.map((bridge: ReactNode) => bridge)} + + )} + - - {!options || !options?.length || isGlobalFeeLoading ? ( - - - - - - ) : ( - - {options?.map((bridge: ReactNode) => bridge)} - - )} - - + - - - {routeContentBottom ? routeContentBottom : 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 12f6ab68..537c3e4d 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx @@ -32,7 +32,6 @@ export function TransferWidget() { return ( state.transfer.fromChain); @@ -22,7 +24,7 @@ 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(); @@ -71,7 +73,11 @@ export function NetworkStatus() { - + {walletType !== fromChain?.chainType ? ( + + ) : ( + + )} @@ -85,15 +91,28 @@ export function NetworkStatus() { {({ isOpen, onClose }) => { return ( <> - - + - + {formatMessage({ id: 'wallet.network.unknown-network' })} + + {formatMessage({ id: 'wallet.network.unknown-network-mobile' })} + @@ -113,9 +132,9 @@ export function NetworkStatus() { {({ isOpen, onClose }) => { return ( <> - + {isWrongNetwork ? ( - From 810033b5876f7ac6230f1628c5b71801e65c452f Mon Sep 17 00:00:00 2001 From: aidencao Date: Tue, 29 Oct 2024 15:43:29 +0800 Subject: [PATCH 17/24] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/pre.json | 1 + .release/.changeset/swift-rivers-accept.md | 5 + packages/canonical-bridge-widget/CHANGELOG.md | 6 + packages/canonical-bridge-widget/package.json | 2 +- .../components/TransferOverview/index.tsx | 138 +++++++++--------- 5 files changed, 85 insertions(+), 67 deletions(-) create mode 100644 .release/.changeset/swift-rivers-accept.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 5cc398f5..53b3293b 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -12,6 +12,7 @@ "rare-grapes-act", "sixty-scissors-protect", "slimy-clocks-rule", + "swift-rivers-accept", "tasty-pianos-raise" ] } 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/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 196423c3..a5fc06ad 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.5 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.4 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index c63795ad..f4908426 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.4", + "version": "0.3.2-alpha.5", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, 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 c6336438..7fad3417 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 @@ -103,77 +103,83 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: const showRoute = selectedToken && !!Number(sendValue) && toTokenInfo && options && !!options?.length; + const content = ( + + + + {formatMessage({ id: 'route.title' })} + {!options.length || isGlobalFeeLoading ? ( + + ) : !isBase ? ( + + ) : null} + + + {!options || !options?.length || isGlobalFeeLoading ? ( + + + + + + ) : ( + + {options?.map((bridge: ReactNode) => bridge)} + + )} + + + + ); + return ( - - - - - - - {formatMessage({ id: 'route.title' })} - {!options.length || isGlobalFeeLoading ? ( - - ) : !isBase ? ( - - ) : null} - - - {!options || !options?.length || isGlobalFeeLoading ? ( - - - - - - ) : ( - - {options?.map((bridge: ReactNode) => bridge)} - - )} - - - - - - {routeContentBottom ? routeContentBottom : null} + + {!routeContentBottom ? ( + showRoute ? ( + content + ) : null + ) : ( + + {content} + + )} + + {routeContentBottom ? routeContentBottom : null} + ); From c3618e5d64aec661efc5ef6308d0bc1f7e413546 Mon Sep 17 00:00:00 2001 From: aidencao Date: Tue, 29 Oct 2024 16:00:54 +0800 Subject: [PATCH 18/24] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/early-drinks-bathe.md | 5 +++++ .release/.changeset/pre.json | 1 + packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../components/TransferOverview/index.tsx | 16 ++++++++-------- 5 files changed, 21 insertions(+), 9 deletions(-) create mode 100644 .release/.changeset/early-drinks-bathe.md 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/pre.json b/.release/.changeset/pre.json index 53b3293b..d96ad785 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -7,6 +7,7 @@ }, "changesets": [ "chilled-lizards-compare", + "early-drinks-bathe", "metal-steaks-drive", "polite-monkeys-share", "rare-grapes-act", diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index a5fc06ad..b4c2fd64 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.6 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.5 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index f4908426..20b72cfa 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.5", + "version": "0.3.2-alpha.6", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, 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 7fad3417..f2ea5230 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 @@ -167,20 +167,20 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: transition={'width 0.15s'} overflow={['auto', 'auto', 'auto', 'hidden']} > - + {!routeContentBottom ? ( showRoute ? ( content ) : null ) : ( - - {content} - + + + {content} + + )} - - {routeContentBottom ? routeContentBottom : null} - - + {routeContentBottom ? routeContentBottom : null} + ); } From b7413e02f0c33d72c1eb9b10bc35ed95bea828aa Mon Sep 17 00:00:00 2001 From: aidencao Date: Tue, 29 Oct 2024 16:19:42 +0800 Subject: [PATCH 19/24] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/pre.json | 1 + .release/.changeset/rotten-nails-drop.md | 5 +++++ packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../transfer/components/TransferOverview/index.tsx | 8 +++----- 5 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 .release/.changeset/rotten-nails-drop.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index d96ad785..274fa60d 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -11,6 +11,7 @@ "metal-steaks-drive", "polite-monkeys-share", "rare-grapes-act", + "rotten-nails-drop", "sixty-scissors-protect", "slimy-clocks-rule", "swift-rivers-accept", 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/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index b4c2fd64..630ae57f 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.7 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.6 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 20b72cfa..ed82b231 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.6", + "version": "0.3.2-alpha.7", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, 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 f2ea5230..29fca30c 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 @@ -107,10 +107,11 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: {!routeContentBottom ? ( - showRoute ? ( - content - ) : null + content ) : ( From fc05f0637404ee8e9c9b1ca833307dd2da15662a Mon Sep 17 00:00:00 2001 From: aidencao Date: Tue, 29 Oct 2024 16:38:01 +0800 Subject: [PATCH 20/24] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/fuzzy-houses-complain.md | 5 +++++ .release/.changeset/pre.json | 1 + packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../wallet/components/NetworkStatus/index.tsx | 17 ++++++++++++++--- 5 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 .release/.changeset/fuzzy-houses-complain.md 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/pre.json b/.release/.changeset/pre.json index 274fa60d..b532be25 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -8,6 +8,7 @@ "changesets": [ "chilled-lizards-compare", "early-drinks-bathe", + "fuzzy-houses-complain", "metal-steaks-drive", "polite-monkeys-share", "rare-grapes-act", diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 630ae57f..365a8f70 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.8 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.7 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index ed82b231..bf32513e 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.7", + "version": "0.3.2-alpha.8", "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 7bddfde0..f50aa52a 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 @@ -15,6 +15,8 @@ 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); @@ -28,9 +30,7 @@ export function NetworkStatus() { 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(() => { @@ -165,6 +165,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, @@ -175,6 +179,13 @@ export function NetworkStatus() { {item.name} + {item.chainType === 'link' && ( + + )} {isSelected && } ); From a3ff27b5fb42d20d065fa8ae9aa7c6d8d0247492 Mon Sep 17 00:00:00 2001 From: aidencao Date: Tue, 29 Oct 2024 19:05:53 +0800 Subject: [PATCH 21/24] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/nice-boxes-taste.md | 5 +++++ .release/.changeset/pre.json | 1 + packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../components/ReceiveInfo/ReceiveLoading.tsx | 10 +++++----- .../transfer/components/ReceiveInfo/index.tsx | 3 ++- .../TransferOverview/RouteInfo/RouteName/index.tsx | 9 ++++++++- .../wallet/components/NetworkStatus/index.tsx | 13 +++++++++++-- 8 files changed, 39 insertions(+), 10 deletions(-) create mode 100644 .release/.changeset/nice-boxes-taste.md 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 b532be25..5304b878 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -10,6 +10,7 @@ "early-drinks-bathe", "fuzzy-houses-complain", "metal-steaks-drive", + "nice-boxes-taste", "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 365a8f70..119c07b5 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.9 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.8 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index bf32513e..67107ef9 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.8", + "version": "0.3.2-alpha.9", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, 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 6e560465..00aa317e 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 @@ -147,6 +147,7 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { ) : null} { } { - + } 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/wallet/components/NetworkStatus/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx index f50aa52a..a9bfba0b 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 @@ -67,9 +67,18 @@ export function NetworkStatus() { gap={'8px'} > - + {fromChain!.name} - + From 2b8c3efb35658369a4538b9f9c0ab068ec00bb94 Mon Sep 17 00:00:00 2001 From: aidencao Date: Wed, 30 Oct 2024 12:38:27 +0800 Subject: [PATCH 22/24] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/pre.json | 1 + .release/.changeset/swift-suits-worry.md | 5 ++++ packages/canonical-bridge-widget/CHANGELOG.md | 6 +++++ packages/canonical-bridge-widget/package.json | 2 +- .../src/core/components/icons/ExLinkIcon.tsx | 21 +++------------- .../components/Button/WalletButtonWrapper.tsx | 25 +++++++++++++------ .../components/TransferOverview/index.tsx | 20 +++++++-------- 7 files changed, 43 insertions(+), 37 deletions(-) create mode 100644 .release/.changeset/swift-suits-worry.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 5304b878..fde8aff8 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -17,6 +17,7 @@ "sixty-scissors-protect", "slimy-clocks-rule", "swift-rivers-accept", + "swift-suits-worry", "tasty-pianos-raise" ] } 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/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 119c07b5..b67b454a 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.10 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.9 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 67107ef9..9794824c 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.9", + "version": "0.3.2-alpha.10", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/core/components/icons/ExLinkIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/ExLinkIcon.tsx index 9b25aee0..c34a1f3c 100644 --- a/packages/canonical-bridge-widget/src/core/components/icons/ExLinkIcon.tsx +++ b/packages/canonical-bridge-widget/src/core/components/icons/ExLinkIcon.tsx @@ -10,23 +10,10 @@ export function ExLinkIcon(props: IconProps) { fill="none" {...props} > - - - - - - + ); } 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 09068be8..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,34 +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.ts'; +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); - const { _chainId, _fromChainId, _isConnected, _walletType, _fromChainType } = useDebounce( - { + useEffect(() => { + setTimeout(() => setDelay(true), 3000); + }, []); + + const payload = useMemo(() => { + return { _chainId: chainId, _fromChainId: fromChain?.id, _isConnected: isConnected, _walletType: walletType, _fromChainType: fromChain?.chainType, - }, - 100, + }; + }, [chainId, fromChain?.id, isConnected, walletType, fromChain?.chainType]); + + const { _chainId, _fromChainId, _isConnected, _walletType, _fromChainType } = useDebounce( + payload, + delay ? 1200 : 0, ); if (_isConnected) { - if (_walletType !== _fromChainType) { + if (_walletType !== _fromChainType && _fromChainType) { return ; } else { - if (_chainId !== _fromChainId) { + if (_chainId !== _fromChainId && _fromChainId) { return ; } return <>{children}; 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 29fca30c..d8fd7405 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 @@ -103,6 +103,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: const showRoute = selectedToken && !!Number(sendValue) && toTokenInfo && options && !!options?.length; + const loading = !options || !options?.length || isGlobalFeeLoading; const content = ( - {!options || !options?.length || isGlobalFeeLoading ? ( - - - - - - ) : ( - - {options?.map((bridge: ReactNode) => bridge)} - - )} + + + + + + + {options?.map((bridge: ReactNode) => bridge)} + From ed223b4fe7f59313b0be8ccbbef860b31cd1818a Mon Sep 17 00:00:00 2001 From: aidencao Date: Wed, 30 Oct 2024 16:04:19 +0800 Subject: [PATCH 23/24] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/cyan-boxes-judge.md | 5 +++++ .release/.changeset/pre.json | 1 + packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../transfer/components/NetWorkSection/index.tsx | 2 +- .../components/SelectButton/TokenSelectButton.tsx | 5 +++-- .../transfer/components/SendInput/MaxLink.tsx | 2 +- .../modules/transfer/components/SendInput/index.tsx | 7 ++++++- .../src/modules/transfer/index.tsx | 9 +++++---- .../wallet/components/NetworkStatus/index.tsx | 12 ++++++++++-- .../modules/wallet/components/ProfileMenu/index.tsx | 12 +++++++++--- 11 files changed, 48 insertions(+), 15 deletions(-) create mode 100644 .release/.changeset/cyan-boxes-judge.md 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/pre.json b/.release/.changeset/pre.json index fde8aff8..38beebe9 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -7,6 +7,7 @@ }, "changesets": [ "chilled-lizards-compare", + "cyan-boxes-judge", "early-drinks-bathe", "fuzzy-houses-complain", "metal-steaks-drive", diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index b67b454a..24d4e6f4 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.11 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.10 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 9794824c..847589ce 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.10", + "version": "0.3.2-alpha.11", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, 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/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/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/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx index 537c3e4d..2b51d015 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, @@ -51,17 +52,17 @@ export function TransferWidget() { position="relative" > {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 a9bfba0b..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 @@ -100,7 +100,11 @@ export function NetworkStatus() { {({ isOpen, onClose }) => { return ( <> - + { return ( <> - + {isWrongNetwork ? ( { 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 a490351248e345fd0f5d986d2a84dab9d735deff Mon Sep 17 00:00:00 2001 From: aidencao Date: Wed, 30 Oct 2024 16:20:05 +0800 Subject: [PATCH 24/24] feat(canonical-bridge-widget): Update widget ui --- .release/.changeset/pre.json | 3 ++- .release/.changeset/tough-colts-compare.md | 5 +++++ packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../TransferOverview/RouteInfo/AllowedSendAmount.tsx | 5 +++++ .../TransferOverview/RouteInfo/FeesInfo.tsx | 5 +++++ .../TransferOverview/RouteInfo/OtherRouteError.tsx | 11 ++++++++++- 7 files changed, 34 insertions(+), 3 deletions(-) create mode 100644 .release/.changeset/tough-colts-compare.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 38beebe9..96ac34e2 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -19,6 +19,7 @@ "slimy-clocks-rule", "swift-rivers-accept", "swift-suits-worry", - "tasty-pianos-raise" + "tasty-pianos-raise", + "tough-colts-compare" ] } 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/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 24d4e6f4..e3aea745 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.12 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.11 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 847589ce..e7c00864 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.11", + "version": "0.3.2-alpha.12", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx index 66e8c5ee..cb725ebd 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx @@ -28,6 +28,11 @@ export const AllowedSendAmount = ({ } lineHeight={'16px'} display={'inline-block'} + sx={{ + '>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]}