diff --git a/.release/.changeset/chilled-lizards-compare.md b/.release/.changeset/chilled-lizards-compare.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/chilled-lizards-compare.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/cyan-boxes-judge.md b/.release/.changeset/cyan-boxes-judge.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/cyan-boxes-judge.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/dirty-shoes-tap.md b/.release/.changeset/dirty-shoes-tap.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/dirty-shoes-tap.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/early-drinks-bathe.md b/.release/.changeset/early-drinks-bathe.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/early-drinks-bathe.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/fuzzy-houses-complain.md b/.release/.changeset/fuzzy-houses-complain.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/fuzzy-houses-complain.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/long-ears-press.md b/.release/.changeset/long-ears-press.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/long-ears-press.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/nasty-candles-marry.md b/.release/.changeset/nasty-candles-marry.md new file mode 100644 index 00000000..b9260687 --- /dev/null +++ b/.release/.changeset/nasty-candles-marry.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget diff --git a/.release/.changeset/nice-boxes-taste.md b/.release/.changeset/nice-boxes-taste.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/nice-boxes-taste.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 8cf842fc..9e30164f 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -6,9 +6,26 @@ "@bnb-chain/canonical-bridge-widget": "0.1.4" }, "changesets": [ + "chilled-lizards-compare", + "cyan-boxes-judge", + "dirty-shoes-tap", + "early-drinks-bathe", + "fuzzy-houses-complain", + "long-ears-press", "metal-steaks-drive", + "nasty-candles-marry", + "nice-boxes-taste", "polite-monkeys-share", "rare-grapes-act", - "sixty-scissors-protect" + "rotten-nails-drop", + "silly-lions-clap", + "sixty-scissors-protect", + "slimy-clocks-rule", + "spotty-trainers-kick", + "swift-rivers-accept", + "swift-suits-worry", + "tasty-pianos-raise", + "thin-snakes-cheat", + "tough-colts-compare" ] } diff --git a/.release/.changeset/rotten-nails-drop.md b/.release/.changeset/rotten-nails-drop.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/rotten-nails-drop.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/silly-lions-clap.md b/.release/.changeset/silly-lions-clap.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/silly-lions-clap.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/slimy-clocks-rule.md b/.release/.changeset/slimy-clocks-rule.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/slimy-clocks-rule.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/spotty-trainers-kick.md b/.release/.changeset/spotty-trainers-kick.md new file mode 100644 index 00000000..5bf157e0 --- /dev/null +++ b/.release/.changeset/spotty-trainers-kick.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widge ui diff --git a/.release/.changeset/swift-rivers-accept.md b/.release/.changeset/swift-rivers-accept.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/swift-rivers-accept.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/swift-suits-worry.md b/.release/.changeset/swift-suits-worry.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/swift-suits-worry.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/tasty-pianos-raise.md b/.release/.changeset/tasty-pianos-raise.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/tasty-pianos-raise.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/thin-snakes-cheat.md b/.release/.changeset/thin-snakes-cheat.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/thin-snakes-cheat.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/.release/.changeset/tough-colts-compare.md b/.release/.changeset/tough-colts-compare.md new file mode 100644 index 00000000..f14199cb --- /dev/null +++ b/.release/.changeset/tough-colts-compare.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Update widget ui diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index d992b5b8..07d93356 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -7444,7 +7444,7 @@ packages: resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==} engines: {node: '>= 4.0'} os: [darwin] - deprecated: Upgrade to fsevents v2 to mitigate potential security issues + deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2 fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 2cf488f1..6e7dacda 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,107 @@ # @bnb-chain/canonical-bridge-widget +## 0.3.2-alpha.18 + +### Patch Changes + +- Update widget + +## 0.3.2-alpha.17 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.16 + +### Patch Changes + +- Update widge ui + +## 0.3.2-alpha.15 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.14 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.13 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.12 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.11 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.10 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.9 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.8 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.7 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.6 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.5 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.4 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.3 + +### Patch Changes + +- Update widget ui + +## 0.3.2-alpha.2 + +### Patch Changes + +- Update widget ui + ## 0.3.2-alpha.1 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 2a6d62cc..65f7e7c2 100644 --- a/packages/canonical-bridge-widget/package.json +++ b/packages/canonical-bridge-widget/package.json @@ -1,6 +1,6 @@ { "name": "@bnb-chain/canonical-bridge-widget", - "version": "0.3.2-alpha.1", + "version": "0.3.2-alpha.18", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx b/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx index fc20b9e2..8dd5a9c8 100644 --- a/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx +++ b/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx @@ -17,6 +17,7 @@ export const InfoTooltip = (props: InfoTooltipProps) => { const isBase = useBreakpointValue({ base: true, md: false }) ?? false; const { isOpen, onOpen, onToggle, onClose } = useDisclosure(); + if (!restProps.label) return null; return ( - - - - - - + ); } diff --git a/packages/canonical-bridge-widget/src/core/components/icons/WarningIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/WarningIcon.tsx new file mode 100644 index 00000000..994a1df5 --- /dev/null +++ b/packages/canonical-bridge-widget/src/core/components/icons/WarningIcon.tsx @@ -0,0 +1,15 @@ +import { Icon, IconProps } from '@bnb-chain/space'; + +export function WarningIcon(props: IconProps) { + return ( + + + + + + ); +} diff --git a/packages/canonical-bridge-widget/src/core/hooks/useDebounce.ts b/packages/canonical-bridge-widget/src/core/hooks/useDebounce.ts index f57dec06..1bb9dcca 100644 --- a/packages/canonical-bridge-widget/src/core/hooks/useDebounce.ts +++ b/packages/canonical-bridge-widget/src/core/hooks/useDebounce.ts @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from 'react'; export const useDebounce = (value: any, delay = 500) => { - const [debouncedValue, setDebouncedValue] = useState(''); + const [debouncedValue, setDebouncedValue] = useState(value); const timerRef = useRef(); useEffect(() => { diff --git a/packages/canonical-bridge-widget/src/core/locales/en.ts b/packages/canonical-bridge-widget/src/core/locales/en.ts index 58a35579..3fc37b62 100644 --- a/packages/canonical-bridge-widget/src/core/locales/en.ts +++ b/packages/canonical-bridge-widget/src/core/locales/en.ts @@ -57,7 +57,7 @@ export const en = { 'transfer.button.confirm': 'Send', 'transfer.button.approve': 'Approve', - 'transfer.button.switch-network': 'Switch Network', + 'transfer.button.switch-network': 'Switch Network in Wallet', 'transfer.button.wallet-connect': 'Connect Wallet', 'transfer.button.switch-wallet': 'Switch Wallet', @@ -98,6 +98,7 @@ export const en = { 'wallet.network.switch-network': 'Please switch the network', 'wallet.network.unknown-network': 'Unsupported Network', + 'wallet.network.unknown-network-mobile': 'Network', 'wallet.button.connect-wallet': 'Connect Wallet', 'wallet.network.wrong-network': 'Wrong network', 'wallet.error.switch-network': diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/action.ts b/packages/canonical-bridge-widget/src/modules/aggregator/action.ts index ecc15d0d..42698636 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/action.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/action.ts @@ -16,3 +16,7 @@ export const setIsLoadingTokenPrices = createAction( 'aggregator/setIsLoadingTokenBalances', ); + +export const setCBridgeMaxMinSendAmt = createAction( + 'aggregator/setCBridgeMaxMinSendAmt', +); diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx index ae851bfd..05755e7b 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeOption.tsx @@ -54,7 +54,7 @@ export const CBridgeOption = () => { }), ); } - }, [dispatch, estimatedAmount]); + }, [dispatch, estimatedAmount?.['cBridge']?.estimated_receive_amt]); const isError = useMemo( () => diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx new file mode 100644 index 00000000..d6db61f3 --- /dev/null +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin.tsx @@ -0,0 +1,18 @@ +import { memo, useEffect } from 'react'; + +import { useCBridgeSendMaxMin } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin'; +import { useAppDispatch } from '@/modules/store/StoreProvider'; +import { setCBridgeMaxMinSendAmt } from '@/modules/aggregator/action'; + +interface CBridgeSendMaxMinProps {} + +export const CBridgeSendMaxMin = memo(function CBridgeSendMaxMin() { + const { minMaxSendAmt: cBridgeAllowedAmt } = useCBridgeSendMaxMin(); + const dispatch = useAppDispatch(); + + useEffect(() => { + dispatch(setCBridgeMaxMinSendAmt(cBridgeAllowedAmt)); + }, [cBridgeAllowedAmt, dispatch]); + + return null; +}); diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts index 1de1b9af..2c012ae1 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin.ts @@ -18,6 +18,7 @@ export const useCBridgeSendMaxMin = (isDisabled = false) => { min: '0', max: '0', }); + useEffect(() => { (async () => { try { @@ -29,7 +30,7 @@ export const useCBridgeSendMaxMin = (isDisabled = false) => { isDisabled || !bridgeSDK?.cBridge ) { - return; + return setMinMaxSendAmt({ min: '0', max: '0' }); } const { min, max } = await bridgeSDK.cBridge.getSendRange({ bridgeAddress: bridgeAddress as `0x${string}`, diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useGetCBridgeFees.ts b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useGetCBridgeFees.ts index 0b48a990..fb4a9981 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useGetCBridgeFees.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/cBridge/hooks/useGetCBridgeFees.ts @@ -1,11 +1,10 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useMemo } from 'react'; import { formatUnits, parseUnits } from 'viem'; import { useAccount, usePublicClient } from 'wagmi'; import { useIntl } from '@bnb-chain/space'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { useToTokenInfo } from '@/modules/transfer/hooks/useToTokenInfo'; -import { useCBridgeSendMaxMin } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeSendMaxMin'; import { useCBridgeTransferParams } from '@/modules/aggregator/adapters/cBridge/hooks/useCBridgeTransferParams'; import { useGetTokenBalance } from '@/core/contract/hooks/useGetTokenBalance'; import { formatNumber } from '@/core/utils/number'; @@ -17,7 +16,7 @@ import { ERC20_TOKEN } from '@/core/contract/abi'; export const useGetCBridgeFees = () => { const { toTokenInfo } = useToTokenInfo(); const { args, bridgeAddress } = useCBridgeTransferParams(); - const { minMaxSendAmt: cBridgeAllowedAmt } = useCBridgeSendMaxMin(); + const cBridgeAllowedAmt = useAppSelector((state) => state.aggregator.bridgeMaxMin.cBridge); const nativeToken = useGetNativeToken(); const { formatMessage } = useIntl(); const dispatch = useAppDispatch(); @@ -29,27 +28,24 @@ export const useGetCBridgeFees = () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any const publicClient = usePublicClient({ chainId: fromChain?.id }) as any; - const [isAllowSendError, setIsAllowSendError] = useState(false); const { balance } = useGetTokenBalance({ tokenAddress: selectedToken?.address as `0x${string}`, }); - useEffect(() => { + const isAllowSendError = useMemo(() => { if (!Number(sendValue) || !selectedToken || !toTokenInfo) { - setIsAllowSendError(false); - return; + return false; } if (!!Number(cBridgeAllowedAmt?.min) && !!Number(cBridgeAllowedAmt?.max)) { - if (Number(sendValue) <= Number(cBridgeAllowedAmt.min)) { - setIsAllowSendError(true); - } else if (Number(sendValue) >= Number(cBridgeAllowedAmt.max)) { - setIsAllowSendError(true); + if ( + Number(sendValue) <= Number(cBridgeAllowedAmt.min) || + Number(sendValue) >= Number(cBridgeAllowedAmt.max) + ) { + return true; } } - return () => { - setIsAllowSendError(false); - }; + return false; }, [cBridgeAllowedAmt, sendValue, selectedToken, toTokenInfo]); const cBridgeFeeSorting = useCallback( diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts index 425aa7ce..f8d5ad9f 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/stargate/hooks/useGetStarGateFees.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useMemo } from 'react'; import { useAccount, useBalance, usePublicClient } from 'wagmi'; import { formatUnits, parseUnits } from 'viem'; import { useIntl } from '@bnb-chain/space'; @@ -32,35 +32,34 @@ export const useGetStargateFees = () => { const publicClient = usePublicClient({ chainId: fromChain?.id }) as any; const sendValue = useAppSelector((state) => state.transfer.sendValue); const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount); - const [allowedSendAmount, setAllowedSendAmount] = useState<{ min: string; max: string } | null>( - null, - ); - const [isAllowSendError, setIsAllowSendError] = useState(false); const { balance } = useGetTokenBalance({ tokenAddress: selectedToken?.address as `0x${string}`, }); - useEffect(() => { + const allowedSendAmount = useMemo(() => { if (estimatedAmount?.stargate && estimatedAmount?.stargate?.[0]) { const fees = estimatedAmount?.stargate; const decimal = selectedToken?.stargate?.raw?.decimals ?? (18 as number); const allowedMin = Number(formatUnits(fees[0].minAmountLD, decimal)); const allowedMax = Number(formatUnits(fees[0].maxAmountLD, decimal)); - setAllowedSendAmount({ + return { min: formatNumber(allowedMin, 8), max: formatNumber(allowedMax, 8), - }); - if (Number(sendValue) < allowedMin || Number(sendValue) > allowedMax) { - setIsAllowSendError(true); - } else { - setIsAllowSendError(false); - } + }; + } + return null; + }, [estimatedAmount?.stargate, selectedToken?.stargate?.raw?.decimals]); + + const isAllowSendError = useMemo(() => { + if (estimatedAmount?.stargate && estimatedAmount?.stargate?.[0]) { + const fees = estimatedAmount?.stargate; + const decimal = selectedToken?.stargate?.raw?.decimals ?? (18 as number); + const allowedMin = Number(formatUnits(fees[0].minAmountLD, decimal)); + const allowedMax = Number(formatUnits(fees[0].maxAmountLD, decimal)); + return Number(sendValue) < allowedMin || Number(sendValue) > allowedMax; } - return () => { - setAllowedSendAmount(null); - setIsAllowSendError(false); - }; + return false; }, [estimatedAmount?.stargate, selectedToken?.stargate?.raw?.decimals, sendValue]); const stargateFeeSorting = useCallback( diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts index 29f52dd5..c61e0942 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts @@ -1,21 +1,22 @@ import { useEffect } from 'react'; -import { useAccount } from 'wagmi'; -import { useAppDispatch } from '@/modules/store/StoreProvider'; +import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { setSendValue } from '@/modules/transfer/action'; import { useSelection } from '@/modules/aggregator/hooks/useSelection'; import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; +import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider.tsx'; export function useDefaultSelectedInfo() { const { isReady, defaultSelectedInfo } = useAggregator(); const { selectDefault } = useSelection(); const dispatch = useAppDispatch(); - const { chainId } = useAccount(); + const { chainId } = useCurrentWallet(); + const sendValue = useAppSelector((state) => state.transfer.sendValue); useEffect(() => { if (isReady) { selectDefault(defaultSelectedInfo); - dispatch(setSendValue(defaultSelectedInfo.amount)); + dispatch(setSendValue(sendValue || defaultSelectedInfo.amount)); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isReady, chainId]); diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts index a22a793a..5a881b0a 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts @@ -1,4 +1,4 @@ -import { useChains, useAccount } from 'wagmi'; +import { useChains } from 'wagmi'; import { useCallback } from 'react'; import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; @@ -18,7 +18,7 @@ import { useTronWeb } from '@/core/hooks/useTronWeb'; import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider'; export function useSelection() { - const { chainId } = useAccount(); + const { chainId } = useCurrentWallet(); const { getFromChains, getToChains, getTokens, getToToken, adapters, defaultSelectedInfo } = useAggregator(); @@ -135,6 +135,7 @@ export function useSelection() { selectFromChain(chain); return; } + if (fromChain?.id) return; } const fromChains = getFromChains({ diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/reducer.ts b/packages/canonical-bridge-widget/src/modules/aggregator/reducer.ts index d9be0382..b267d1ea 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/reducer.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/reducer.ts @@ -1,5 +1,6 @@ import { createReducer } from '@/modules/store/createReducer'; import * as actions from '@/modules/aggregator/action'; +import { ICBridgeMaxMinSendAmt } from '@/modules/aggregator/adapters/cBridge/types'; export interface IAggregatorState { tokenPrices: { cmcPrices: Record; @@ -8,6 +9,9 @@ export interface IAggregatorState { tokenBalances: Record; isLoadingTokenPrices: boolean; isLoadingTokenBalances: boolean; + bridgeMaxMin: { + cBridge: ICBridgeMaxMinSendAmt; + }; } const initStates: IAggregatorState = { @@ -18,6 +22,9 @@ const initStates: IAggregatorState = { tokenBalances: {}, isLoadingTokenPrices: false, isLoadingTokenBalances: false, + bridgeMaxMin: { + cBridge: { max: '0', min: '0' }, + }, }; export default createReducer(initStates, (builder) => { @@ -43,4 +50,12 @@ export default createReducer(initStates, (builder) => { ...state, isLoadingTokenBalances: payload, })); + + builder.addCase(actions.setCBridgeMaxMinSendAmt, (state, { payload }) => ({ + ...state, + bridgeMaxMin: { + ...state.bridgeMaxMin, + cBridge: payload, + }, + })); }); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx index bf7ab95b..f19ba1a3 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx @@ -1,10 +1,10 @@ -import { Button, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; +import { Button, ButtonProps, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; import { reportEvent } from '@/core/utils/gtm'; import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider'; import { useAppSelector } from '@/modules/store/StoreProvider'; -export const SwitchWalletButton = () => { +export const SwitchWalletButton = (props: ButtonProps) => { const { formatMessage } = useIntl(); const { linkWallet } = useCurrentWallet(); @@ -36,6 +36,7 @@ export const SwitchWalletButton = () => { }, }); }} + {...props} > {formatMessage({ id: 'transfer.button.switch-wallet' })} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletButtonWrapper.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletButtonWrapper.tsx index a231a1d2..56e585fd 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletButtonWrapper.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletButtonWrapper.tsx @@ -1,22 +1,43 @@ -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, useEffect, useMemo, useState } from 'react'; import { useAppSelector } from '@/modules/store/StoreProvider'; import { WalletConnectButton } from '@/modules/transfer/components/Button/WalletConnectButton'; import { SwitchNetworkButton } from '@/modules/transfer/components/Button/SwitchNetworkButton'; import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider'; import { SwitchWalletButton } from '@/modules/transfer/components/Button/SwitchWalletButton'; +import { useDebounce } from '@/core/hooks/useDebounce'; export function WalletButtonWrapper(props: PropsWithChildren) { const { children } = props; const fromChain = useAppSelector((state) => state.transfer.fromChain); const { isConnected, chainId, walletType } = useCurrentWallet(); + const [delay, setDelay] = useState(false); - if (isConnected) { - if (walletType !== fromChain?.chainType) { + useEffect(() => { + setTimeout(() => setDelay(true), 3000); + }, []); + + const payload = useMemo(() => { + return { + _chainId: chainId, + _fromChainId: fromChain?.id, + _isConnected: isConnected, + _walletType: walletType, + _fromChainType: fromChain?.chainType, + }; + }, [chainId, fromChain?.id, isConnected, walletType, fromChain?.chainType]); + + const { _chainId, _fromChainId, _isConnected, _walletType, _fromChainType } = useDebounce( + payload, + delay ? 1200 : 0, + ); + + if (_isConnected) { + if (_walletType !== _fromChainType && _fromChainType) { return ; } else { - if (chainId !== fromChain.id) { + if (_chainId !== _fromChainId && _fromChainId) { return ; } return <>{children}; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx index 29dc6e06..6dc469af 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx @@ -43,7 +43,7 @@ export const NetWorkSection = () => { flexDir={['column', 'column', 'row']} justifyContent={'space-between'} alignItems={'center'} - gap={['16px', '16px', '16px', '12px']} + gap={{ base: '8px', md: '16px' }} minW={0} > diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx index dd20ac3c..3b2473f1 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx @@ -4,12 +4,12 @@ export const ReceiveLoading = () => { return ( <> - + - - + + { - - + + diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx index 5fb97061..ff9f5bba 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx @@ -1,13 +1,14 @@ import { Box, Flex, - useBreakpointValue, useColorMode, useIntl, useTheme, Collapse, + useBreakpointValue, } from '@bnb-chain/space'; -import { useEffect, useMemo } from 'react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { debounce } from 'lodash'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { useGetReceiveAmount } from '@/modules/transfer/hooks/useGetReceiveAmount'; @@ -46,7 +47,16 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { const { formatMessage } = useIntl(); const { loadingBridgeFees } = useLoadingBridgeFees(); const dispatch = useAppDispatch(); - const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; + const loadingBridgeFeesRef = useRef(loadingBridgeFees); + loadingBridgeFeesRef.current = loadingBridgeFees; + + // todo fix it + const debounceLoadingFee = useCallback( + debounce(() => { + loadingBridgeFeesRef.current(); + }, 300), + [], + ); const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo); const isGlobalFeeLoading = useAppSelector((state) => state.transfer.isGlobalFeeLoading); @@ -54,6 +64,7 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { const selectedToken = useAppSelector((state) => state.transfer.selectedToken); const routeFees = useAppSelector((state) => state.transfer.routeFees); const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount); + const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; const receiveAmt = useMemo(() => { if (!Number(sendValue)) return null; @@ -106,8 +117,8 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { const debouncedSendValue = useDebounce(sendValue, DEBOUNCE_DELAY); useEffect(() => { - // On mobile if (!isBase) return; + // On mobile if (sendValue === debouncedSendValue) { dispatch(setTransferActionInfo(undefined)); if (!selectedToken || !Number(debouncedSendValue)) { @@ -118,7 +129,7 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { } dispatch(setIsGlobalFeeLoading(true)); dispatch(setIsRefreshing(true)); - loadingBridgeFees(); + debounceLoadingFee(); dispatch(setIsRefreshing(false)); } else { dispatch(setIsGlobalFeeLoading(true)); @@ -130,12 +141,13 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { if (!Number(sendValue)) return true; if (isGlobalFeeLoading) return false; return ( - !isBase && - estimatedAmount && - !Object.values(estimatedAmount).every((element) => element === undefined) && - !receiveAmt + !Number(sendValue) || + (!isBase && + estimatedAmount && + !Object.values(estimatedAmount).every((element) => element === undefined) && + !receiveAmt) ); - }, [sendValue, estimatedAmount, isBase, receiveAmt, isGlobalFeeLoading]); + }, [sendValue, estimatedAmount, receiveAmt, isGlobalFeeLoading, isBase]); const isHideRouteButton = useMemo(() => { return ( @@ -144,64 +156,79 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => { }, [estimatedAmount]); return ( - - - - - {formatMessage({ id: 'you.receive.title' })} - - {isBase && !isHideRouteButton ? : null} - - - {debouncedSendValue === sendValue ? ( - receiveAmt && !isGlobalFeeLoading ? ( - <> - {isBase && } - {isBase && } - {bridgeType && ( - - )} - - - - - - - ) : !receiveAmt && !isGlobalFeeLoading ? ( - + + + + + + {formatMessage({ id: 'you.receive.title' })} + + {!isHideRouteButton ? ( + + + + ) : null} + + + {debouncedSendValue === sendValue ? ( + receiveAmt && !isGlobalFeeLoading ? ( + <> + { + + + + } + { + + + + } + {bridgeType && ( + + )} + + + + + + + ) : !receiveAmt && !isGlobalFeeLoading ? ( + + ) : ( + + ) ) : ( - ) - ) : ( - - )} + )} + - - + + ); }; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx index a7333056..271da271 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx @@ -31,9 +31,10 @@ export function TokenSelectButton(props: SelectButtonProps) { p={'4px 8px 4px 4px'} justifyContent={'space-between'} gap={'8px'} - background={theme.colors[colorMode].button.select.background.default} + transition={'all .15s'} + background={theme.colors[colorMode].layer[4].default} _hover={{ - background: theme.colors[colorMode].button.select.background.hover, + background: theme.colors[colorMode].layer[4].hover, }} color={theme.colors[colorMode].text.primary} {...restProps} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx index b3643ba2..c62d4d1a 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx @@ -56,7 +56,7 @@ export function SelectButton(props: SelectButtonProps) { }} > - {chain?.name ?? 'Select Network'} + {chain?.name ?? ''} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx index 507f1681..256c86e1 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx @@ -53,7 +53,7 @@ export const MaxLink: React.FC = () => { cursor={!!balance ? 'pointer' : 'auto'} fontSize={'12px'} fontWeight={500} - pb={`1px`} + lineHeight={'16px'} transitionDuration="normal" sx={{ '@media (hover:hover)': { diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx index c4004e6b..0510e973 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx @@ -94,7 +94,12 @@ export const SendInput: React.FC = () => { return ( - + {formatMessage({ id: 'you.send.title' })} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx index 35ac3124..f7f82679 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx @@ -36,7 +36,7 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => { gap={'8px'} background={theme.colors[colorMode].receive.background} borderRadius={'8px'} - p={[0, 0, 0, '24px 16px']} + p={[0, 0, 0, '0 16px']} > @@ -56,8 +56,9 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => { ? formatMessage({ id: 'route.no-found.desc' }) : formatMessage({ id: !isNoRoute ? 'route.adjust.desc' : 'route.no-found.desc' })} - {isBase && !isNoRoute && ( + {!isNoRoute && ( svg': { + verticalAlign: '-3px', + }, + }} {...otherProps} > diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx index 9af5c0b3..1145390b 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx @@ -22,6 +22,11 @@ export const FeesInfo = ({ summary, breakdown, bridgeType, isError }: FeesInfoPr display={'inline-block'} lineHeight={'16px'} opacity={isError ? 0.5 : 1} + sx={{ + '>svg': { + verticalAlign: '-3px', + }, + }} > { const routeError = useAppSelector((state) => state.transfer.routeError); return routeError && routeError[bridgeType] ? ( - + svg': { + verticalAlign: '-3px', + }, + }} + > {routeError[bridgeType]} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx index 5598d3d0..deba3e0b 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx @@ -25,8 +25,15 @@ export const RouteName = React.memo( const receiveValue = getSortedReceiveAmount(); const bestTimeRoute = useGetBestTime(); const bestReturnRoute = getMaxValueKey(receiveValue); + return ( - + {bridgeType === 'cBridge' ? ( ) : bridgeType === 'deBridge' ? ( diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx index 600c68af..57d113e7 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx @@ -8,7 +8,8 @@ import { useTheme, Collapse, } from '@bnb-chain/space'; -import { ReactNode, useEffect, useMemo } from 'react'; +import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'; +import { debounce } from 'lodash'; import { setEstimatedAmount, @@ -28,12 +29,15 @@ import { DeBridgeOption } from '@/modules/aggregator/adapters/deBridge/component import { StarGateOption } from '@/modules/aggregator/adapters/stargate/components/StarGateOption'; import { LayerZeroOption } from '@/modules/aggregator/adapters/layerZero/components/LayerZeroOption'; import { MesonOption } from '@/modules/aggregator/adapters/meson/components/MesonOption'; +import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; +import { CBridgeSendMaxMin } from '@/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin'; export function TransferOverview({ routeContentBottom }: { routeContentBottom?: ReactNode }) { const dispatch = useAppDispatch(); const { formatMessage } = useIntl(); const { colorMode } = useColorMode(); const theme = useTheme(); + const { transferConfig } = useAggregator(); const { loadingBridgeFees } = useLoadingBridgeFees(); const { getSortedReceiveAmount } = useGetReceiveAmount(); @@ -43,6 +47,16 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: const sendValue = useAppSelector((state) => state.transfer.sendValue); const estimatedAmount = useAppSelector((state) => state.transfer.estimatedAmount); const toTokenInfo = useAppSelector((state) => state.transfer.toToken); + const loadingBridgeFeesRef = useRef(loadingBridgeFees); + loadingBridgeFeesRef.current = loadingBridgeFees; + + // todo fix it + const debounceLoadingFee = useCallback( + debounce(() => { + loadingBridgeFeesRef.current(); + }, 300), + [], + ); const debouncedSendValue = useDebounce(sendValue, DEBOUNCE_DELAY); @@ -60,7 +74,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: } dispatch(setIsGlobalFeeLoading(true)); dispatch(setIsRefreshing(true)); - loadingBridgeFees(); + debounceLoadingFee(); dispatch(setIsRefreshing(false)); } else { dispatch(setIsGlobalFeeLoading(true)); @@ -103,71 +117,86 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: const showRoute = selectedToken && !!Number(sendValue) && toTokenInfo && options && !!options?.length; - return ( - - - - + const loading = !options || !options?.length || isGlobalFeeLoading; + const content = ( + + + + {formatMessage({ id: 'route.title' })} + {!options.length || isGlobalFeeLoading ? ( + + ) : !isBase ? ( + + ) : null} + + + {loading ? ( - - {formatMessage({ id: 'route.title' })} - {!options.length || isGlobalFeeLoading ? ( - - ) : !isBase ? ( - - ) : null} - - - {!options || !options?.length || isGlobalFeeLoading ? ( - - - - - - ) : ( - - {options?.map((bridge: ReactNode) => bridge)} - - )} - + + + - + ) : ( + + {options?.map((bridge: ReactNode) => bridge)} + + )} - - {routeContentBottom ? routeContentBottom : null} + + + ); + + const cBridgeSupport = 'cBridge' in transferConfig; + + return ( + + {cBridgeSupport && } + + {!routeContentBottom ? ( + content + ) : ( + + + {content} + + + )} + {routeContentBottom ? routeContentBottom : null} + ); } diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx index 12f6ab68..a3513f21 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx @@ -1,6 +1,7 @@ import { Box, Flex, + Typography, useBreakpointValue, useColorMode, useDisclosure, @@ -32,7 +33,6 @@ export function TransferWidget() { return ( {appearance.bridgeTitle && ( - {appearance.bridgeTitle} - + )} diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx index 5104f5a9..c1eaeb53 100644 --- a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx @@ -1,5 +1,5 @@ import { Flex, useColorMode, useIntl, useTheme, Text, Typography, Box } from '@bnb-chain/space'; -import { TickIcon, WarningTriangleSolidIcon, InfoCircleIcon } from '@bnb-chain/icons'; +import { TickIcon, InfoCircleIcon } from '@bnb-chain/icons'; import { useEffect, useRef } from 'react'; import { IconImage } from '@/core/components/IconImage'; @@ -13,6 +13,10 @@ import { useFromChains } from '@/modules/aggregator/hooks/useFromChains'; import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; import { TransferToIcon } from '@/core/components/icons/TransferToIcon'; import { SwitchNetworkButton } from '@/modules/transfer/components/Button/SwitchNetworkButton'; +import { WarningIcon } from '@/core/components/icons/WarningIcon.tsx'; +import { SwitchWalletButton } from '@/modules/transfer/components/Button/SwitchWalletButton'; +import { ExLinkIcon } from '@/core/components/icons/ExLinkIcon.tsx'; +import { openLink } from '@/core/utils/common.ts'; export function NetworkStatus() { const fromChain = useAppSelector((state) => state.transfer.fromChain); @@ -22,13 +26,11 @@ export function NetworkStatus() { const theme = useTheme(); const { colorMode } = useColorMode(); - const { chain, chainId, linkWallet } = useCurrentWallet(); + const { chain, chainId, linkWallet, walletType } = useCurrentWallet(); const fromChains = useFromChains(); const { chainConfigs } = useAggregator(); - const supportedChains = fromChains.filter( - (c) => chainConfigs.find((e) => c.id === e.id) && c.chainType !== 'link', - ); + const supportedChains = fromChains.filter((c) => chainConfigs.find((e) => c.id === e.id)); const bridgeChains = useFromChains(); useEffect(() => { @@ -65,13 +67,26 @@ export function NetworkStatus() { gap={'8px'} > - + {fromChain!.name} - + - + {walletType !== fromChain?.chainType ? ( + + ) : ( + + )} @@ -85,15 +100,32 @@ export function NetworkStatus() { {({ isOpen, onClose }) => { return ( <> - - + - + {formatMessage({ id: 'wallet.network.unknown-network' })} + + {formatMessage({ id: 'wallet.network.unknown-network-mobile' })} + @@ -113,9 +145,13 @@ export function NetworkStatus() { {({ isOpen, onClose }) => { return ( <> - + {isWrongNetwork ? ( - @@ -146,6 +182,10 @@ export function NetworkStatus() { } bg={isSelected ? theme.colors[colorMode].popover.selected : undefined} onClick={() => { + if (item.chainType === 'link') { + openLink(item.externalBridgeUrl); + return; + } linkWallet({ targetChainType: item.chainType, targetChainId: item.id, @@ -156,6 +196,13 @@ export function NetworkStatus() { {item.name} + {item.chainType === 'link' && ( + + )} {isSelected && } ); diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx index 33645d3c..ed5aabf9 100644 --- a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx @@ -1,4 +1,4 @@ -import { Box, Center, Flex, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; +import { Box, Center, Flex, Typography, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; import { DisconnectIcon } from '@bnb-chain/icons'; import { useWalletKit } from '@node-real/walletkit'; import { useMemo } from 'react'; @@ -10,6 +10,7 @@ import { Dropdown } from '@/modules/wallet/components/Dropdown/Dropdown'; import { DropdownButton } from '@/modules/wallet/components/Dropdown/DropdownButton'; import { DropdownList } from '@/modules/wallet/components/Dropdown/DropdownList'; import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider'; +import { WalletIcon } from '@/core/components/icons/WalletIcon'; export const ProfileMenu = () => { const { formatMessage } = useIntl(); @@ -23,6 +24,7 @@ export const ProfileMenu = () => { {({ isOpen, onClose }) => ( <> { {walletIcon} )} - {formatAppAddress({ address })} + + + {formatAppAddress({ address })} + + @@ -130,7 +136,7 @@ function useWalletIcon() { if (selectedWallet) { const { transparent: transparentLogos } = selectedWallet.logos ?? {}; const transparentLogo = (transparentLogos as any)?.[colorMode] ?? transparentLogos; - return transparentLogo; + return transparentLogo || ; } return null;