From 28493323a325ea2466b488761197ebee8e23cff0 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Tue, 10 Dec 2024 20:15:03 +0800 Subject: [PATCH 1/8] feat: Add more customizable configs --- .release/.changeset/happy-insects-give.md | 5 ++ .release/.changeset/pre.json | 11 +++ .../public/images/tokens/CAKE.png | Bin 3139 -> 11312 bytes packages/canonical-bridge-widget/CHANGELOG.md | 6 ++ packages/canonical-bridge-widget/package.json | 2 +- .../src/CanonicalBridgeProvider.tsx | 20 ++++- .../src/ExportsProvider.tsx | 30 +++++++ .../canonical-bridge-widget/src/index.tsx | 1 + .../components/Button/RefreshingButton.tsx | 4 +- .../SelectButton/TokenSelectButton.tsx | 1 + .../transfer/components/SendInput/index.tsx | 1 + .../RouteInfo/RouteName/index.tsx | 2 - .../TransferOverview/RouteInfo/RouteTitle.tsx | 2 +- .../RouteInfo/TokenInfoTooltip.tsx | 12 ++- .../components/TransferOverview/index.tsx | 5 +- .../TransferOverview/modal/RoutesModal.tsx | 13 ++- .../src/modules/transfer/index.tsx | 75 +++++++++--------- 17 files changed, 143 insertions(+), 47 deletions(-) create mode 100644 .release/.changeset/happy-insects-give.md create mode 100644 .release/.changeset/pre.json create mode 100644 packages/canonical-bridge-widget/src/ExportsProvider.tsx diff --git a/.release/.changeset/happy-insects-give.md b/.release/.changeset/happy-insects-give.md new file mode 100644 index 00000000..bbab7573 --- /dev/null +++ b/.release/.changeset/happy-insects-give.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Add more customizable configs diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json new file mode 100644 index 00000000..295ae15f --- /dev/null +++ b/.release/.changeset/pre.json @@ -0,0 +1,11 @@ +{ + "mode": "pre", + "tag": "alpha", + "initialVersions": { + "@bnb-chain/canonical-bridge-sdk": "0.4.2", + "@bnb-chain/canonical-bridge-widget": "0.5.9" + }, + "changesets": [ + "happy-insects-give" + ] +} diff --git a/apps/canonical-bridge-ui/public/images/tokens/CAKE.png b/apps/canonical-bridge-ui/public/images/tokens/CAKE.png index f352a610bed1142a21efeb139af76583d0f07f68..964d09ac9854c7ee73e5cf1b056d58a09a528376 100644 GIT binary patch literal 11312 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≥M^JKsWwwZMX~iFVz|8 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 XMAu{^wL1U(tpPe(28cRMhZp|`yRryb diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 12e52512..1888fd9a 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.5.10-alpha.0 + +### Patch Changes + +- Add more customizable configs + ## 0.5.9 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index d2c6686b..01c5acb6 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.5.9", + "version": "0.5.10-alpha.0", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx b/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx index 79554080..acbc11ef 100644 --- a/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx +++ b/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx @@ -10,6 +10,7 @@ import { TokenPricesProvider } from '@/modules/aggregator/components/TokenPrices import { locales } from '@/core/locales'; import { TronAccountProvider } from '@/modules/wallet/TronAccountProvider'; import { WalletConnectButton } from '@/modules/transfer/components/Button/WalletConnectButton'; +import { ExportsProvider } from '@/ExportsProvider'; export interface ICanonicalBridgeConfig { appName: string; @@ -40,6 +41,8 @@ export interface ICanonicalBridgeConfig { interface CanonicalBridgeContextProps extends ICanonicalBridgeConfig { routeContentBottom: React.ReactNode; connectWalletButton: React.ReactNode; + refreshingIcon?: React.ReactNode; + bridgeBottom?: React.ReactNode; onClickConnectWalletButton?: (params: { chainType: ChainType; chainId: number; @@ -61,6 +64,8 @@ export interface CanonicalBridgeProviderProps { connectWalletButton?: React.ReactNode; children: React.ReactNode; onClickConnectWalletButton?: CanonicalBridgeContextProps['onClickConnectWalletButton']; + refreshingIcon?: React.ReactNode; + bridgeBottom?: React.ReactNode; } export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) { @@ -71,6 +76,8 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) { transferConfig, routeContentBottom, connectWalletButton, + refreshingIcon, + bridgeBottom, onClickConnectWalletButton, } = props; @@ -97,8 +104,17 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) { routeContentBottom, connectWalletButton: connectWalletButton ?? , onClickConnectWalletButton, + refreshingIcon, + bridgeBottom, }; - }, [config, connectWalletButton, onClickConnectWalletButton, routeContentBottom]); + }, [ + bridgeBottom, + config, + connectWalletButton, + onClickConnectWalletButton, + refreshingIcon, + routeContentBottom, + ]); return ( @@ -109,7 +125,7 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) { - {children} + {children} diff --git a/packages/canonical-bridge-widget/src/ExportsProvider.tsx b/packages/canonical-bridge-widget/src/ExportsProvider.tsx new file mode 100644 index 00000000..0fd1ccd0 --- /dev/null +++ b/packages/canonical-bridge-widget/src/ExportsProvider.tsx @@ -0,0 +1,30 @@ +import React, { useContext, useMemo } from 'react'; + +import { useAppSelector } from '@/modules/store/StoreProvider'; + +interface ExportsContextProps { + isGlobalFeeLoading: boolean; + isRefreshing: boolean; +} + +const ExportsContext = React.createContext({} as ExportsContextProps); + +export function ExportsProvider(props: React.PropsWithChildren) { + const { children } = props; + + const isGlobalFeeLoading = useAppSelector((state) => state.transfer.isGlobalFeeLoading) ?? false; + const isRefreshing = useAppSelector((state) => state.transfer.isRefreshing) ?? false; + + const value = useMemo(() => { + return { + isGlobalFeeLoading, + isRefreshing, + }; + }, [isGlobalFeeLoading, isRefreshing]); + + return {children}; +} + +export function useBridge() { + return useContext(ExportsContext); +} diff --git a/packages/canonical-bridge-widget/src/index.tsx b/packages/canonical-bridge-widget/src/index.tsx index b95379ce..9d1d09ff 100644 --- a/packages/canonical-bridge-widget/src/index.tsx +++ b/packages/canonical-bridge-widget/src/index.tsx @@ -1,6 +1,7 @@ export * from '@/modules/aggregator'; export * from '@/CanonicalBridgeProvider'; export * from '@/modules/transfer'; +export { useBridge } from '@/ExportsProvider'; // gtm export * from '@/core/utils/gtm'; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx index 81adfeb7..3e628e37 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx @@ -64,6 +64,8 @@ export const RefreshingButton = (props: BoxProps) => { bridgeConfig.http.refetchingInterval, ]); + const { refreshingIcon } = useBridgeConfig(); + return transferActionInfo ? ( { }} {...props} > - + {refreshingIcon ?? } ) : null; }; 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 59a0870b..aea43e14 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 @@ -45,6 +45,7 @@ export function TokenSelectButton(props: SelectButtonProps) { chainType={fromChain?.chainType} tokenAddress={token?.address ?? ''} tokenLinkUrl={tokenUrl} + offset={[-20, 6]} > { h={'48px'} borderRadius={'8px'} border={'1px solid'} + gap="8px" borderColor={`${ !!error?.text ? theme.colors[colorMode].text.danger 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 50a285e3..5e8dac19 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 @@ -44,7 +44,6 @@ export const RouteName = React.memo( w={['16px', '16px', '16px', '20px']} h={['16px', '16px', '16px', '20px']} borderRadius={'100%'} - mb={['0', '0', '4px', '0']} /> ) : bridgeType === 'stargate' ? ( @@ -63,7 +62,6 @@ export const RouteName = React.memo( w={['16px', '16px', '16px', '20px']} h={['16px', '16px', '16px', '20px']} borderRadius={'100%'} - mb={['0', '0', '4px', '0']} /> ) : null} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx index 5bd08573..f787ed0e 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx @@ -146,7 +146,7 @@ export const ToTokenInfo = React.forwardRef(
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx index fc1e6183..289bcacc 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx @@ -10,13 +10,14 @@ import { useTheme, LightMode, Portal, + PopoverProps, } from '@bnb-chain/space'; import { useMemo } from 'react'; import { isNativeToken } from '@/core/utils/address.ts'; import { ChainType } from '@/modules/aggregator'; -interface TokenTooltipProps { +interface TokenTooltipProps extends PopoverProps { tokenLinkUrl: string; tokenAddress: string; children: React.ReactNode; @@ -30,6 +31,7 @@ export const TokenInfoTooltip = ({ tokenLinkUrl, isReceiveArea, chainType = 'evm', + ...restProps }: TokenTooltipProps) => { const theme = useTheme(); const nativeToken = useMemo( @@ -40,7 +42,13 @@ export const TokenInfoTooltip = ({ return ( - + {children} {cBridgeSupport && } diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx index 268c7d26..bb23deb5 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx @@ -1,5 +1,8 @@ import { CloseIcon } from '@bnb-chain/icons'; import { Flex, Modal, ModalContent, ModalOverlay, useColorMode, useTheme } from '@bnb-chain/space'; +import { useEffect } from 'react'; + +import { useAppSelector } from '@/modules/store/StoreProvider'; interface RoutesModalProps { title: React.ReactNode; @@ -14,6 +17,14 @@ export function RoutesModal(props: RoutesModalProps) { const theme = useTheme(); const { colorMode } = useColorMode(); + const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo); + + useEffect(() => { + if (transferActionInfo?.bridgeType) { + onClose(); + } + }, [onClose, transferActionInfo?.bridgeType]); + return ( @@ -21,7 +32,7 @@ export function RoutesModal(props: RoutesModalProps) { className="bccb-widget-modal-route-content" background={theme.colors[colorMode].background.modal} p={0} - h={['100vh', '100vh', '665px']} + h={['100vh', '80vh', '665px']} w={['100%', '100%', '558px']} overflow={['auto', 'auto', 'auto', 'hidden']} margin={0} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx index b6c06292..d654671f 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx @@ -29,7 +29,7 @@ export function TransferWidget() { useDefaultSelectedInfo(); const { isOpen, onClose, onOpen } = useDisclosure(); - const { appearance, routeContentBottom } = useBridgeConfig(); + const { appearance, routeContentBottom, bridgeBottom } = useBridgeConfig(); return ( <> @@ -42,43 +42,46 @@ export function TransferWidget() { alignItems={['flex-start', 'flex-start', 'center', 'flex-start']} justifyContent={'center'} > - - {appearance.bridgeTitle && ( - - {appearance.bridgeTitle} - - )} + + + {appearance.bridgeTitle && ( + + {appearance.bridgeTitle} + + )} - - - - - - + + + + + + + + {routeContentBottom} - {routeContentBottom} - + <>{bridgeBottom} + From 513791eb3c0b9efdf5f370592bfbd622e73fffb2 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Thu, 12 Dec 2024 16:56:09 +0800 Subject: [PATCH 2/8] fix: Fix issues --- .release/.changeset/hip-news-reflect.md | 5 + .release/.changeset/lazy-vans-applaud.md | 5 + .release/.changeset/long-rivers-type.md | 5 + .release/.changeset/pre.json | 6 +- .release/.changeset/small-mangos-lay.md | 5 + .../core/components/Layout/index.tsx | 7 +- .../pages/mainnet/index.tsx | 6 +- .../pages/testnet/index.tsx | 6 +- packages/canonical-bridge-widget/CHANGELOG.md | 25 + packages/canonical-bridge-widget/package.json | 2 +- .../src/CanonicalBridgeProvider.tsx | 13 +- .../src/core/components/icons/AlertIcon.tsx | 15 +- .../src/core/locales/en.ts | 3 +- .../canonical-bridge-widget/src/index.tsx | 5 +- .../layerZero/components/LayerZeroOption.tsx | 2 +- .../layerZero/hooks/useGetLayerZeroFees.ts | 5 +- .../stargate/hooks/useGetStarGateFees.ts | 9 +- .../src/modules/transfer/BridgeRoutes.tsx | 30 + .../src/modules/transfer/BridgeTransfer.tsx | 67 ++ .../src/modules/transfer/action.ts | 4 + .../components/Button/RefreshingButton.tsx | 12 +- .../transfer/components/ReceiveInfo/index.tsx | 2 +- .../components/TransferOverview/index.tsx | 10 +- .../TransferOverview/modal/RoutesModal.tsx | 3 +- .../transfer/hooks/useLoadingBridgeFees.ts | 621 +++++++++--------- .../src/modules/transfer/index.tsx | 100 --- .../src/modules/transfer/reducer.ts | 7 + 27 files changed, 545 insertions(+), 435 deletions(-) create mode 100644 .release/.changeset/hip-news-reflect.md create mode 100644 .release/.changeset/lazy-vans-applaud.md create mode 100644 .release/.changeset/long-rivers-type.md create mode 100644 .release/.changeset/small-mangos-lay.md create mode 100644 packages/canonical-bridge-widget/src/modules/transfer/BridgeRoutes.tsx create mode 100644 packages/canonical-bridge-widget/src/modules/transfer/BridgeTransfer.tsx delete mode 100644 packages/canonical-bridge-widget/src/modules/transfer/index.tsx diff --git a/.release/.changeset/hip-news-reflect.md b/.release/.changeset/hip-news-reflect.md new file mode 100644 index 00000000..a051b37d --- /dev/null +++ b/.release/.changeset/hip-news-reflect.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Keep the previous selected route after routes refreshing diff --git a/.release/.changeset/lazy-vans-applaud.md b/.release/.changeset/lazy-vans-applaud.md new file mode 100644 index 00000000..bee6b199 --- /dev/null +++ b/.release/.changeset/lazy-vans-applaud.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Split `TransferWidget` into `BridgeTransfer` and `BridgeRoutes` diff --git a/.release/.changeset/long-rivers-type.md b/.release/.changeset/long-rivers-type.md new file mode 100644 index 00000000..07105fcd --- /dev/null +++ b/.release/.changeset/long-rivers-type.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +AlertIcon supports customize color diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 295ae15f..30afd015 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -6,6 +6,10 @@ "@bnb-chain/canonical-bridge-widget": "0.5.9" }, "changesets": [ - "happy-insects-give" + "happy-insects-give", + "hip-news-reflect", + "lazy-vans-applaud", + "long-rivers-type", + "small-mangos-lay" ] } diff --git a/.release/.changeset/small-mangos-lay.md b/.release/.changeset/small-mangos-lay.md new file mode 100644 index 00000000..8ebe3d1f --- /dev/null +++ b/.release/.changeset/small-mangos-lay.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Remove bridge bottom element if `routeContentBottom` not setted diff --git a/apps/canonical-bridge-ui/core/components/Layout/index.tsx b/apps/canonical-bridge-ui/core/components/Layout/index.tsx index f178cbaf..ce8019b3 100644 --- a/apps/canonical-bridge-ui/core/components/Layout/index.tsx +++ b/apps/canonical-bridge-ui/core/components/Layout/index.tsx @@ -9,11 +9,12 @@ export function Layout({ children }: React.PropsWithChildren) {
{children} diff --git a/apps/canonical-bridge-ui/pages/mainnet/index.tsx b/apps/canonical-bridge-ui/pages/mainnet/index.tsx index 6aec7771..082afcbe 100644 --- a/apps/canonical-bridge-ui/pages/mainnet/index.tsx +++ b/apps/canonical-bridge-ui/pages/mainnet/index.tsx @@ -1,7 +1,8 @@ import { CanonicalBridgeProvider, ICanonicalBridgeConfig, - TransferWidget, + BridgeTransfer, + BridgeRoutes, } from '@bnb-chain/canonical-bridge-widget'; import { useTransferConfig } from '@/token-config/mainnet/useTransferConfig'; @@ -51,7 +52,8 @@ function BridgeWidget() { onClickConnectWalletButton={onOpen} > - + + ); diff --git a/apps/canonical-bridge-ui/pages/testnet/index.tsx b/apps/canonical-bridge-ui/pages/testnet/index.tsx index 97f35841..5fd06941 100644 --- a/apps/canonical-bridge-ui/pages/testnet/index.tsx +++ b/apps/canonical-bridge-ui/pages/testnet/index.tsx @@ -1,7 +1,8 @@ import { CanonicalBridgeProvider, ICanonicalBridgeConfig, - TransferWidget, + BridgeTransfer, + BridgeRoutes, } from '@bnb-chain/canonical-bridge-widget'; import { useTestnetTransferConfig } from '@/token-config/testnet/useTestnetTransferConfig'; @@ -52,7 +53,8 @@ function BridgeWidget() { onClickConnectWalletButton={onOpen} > - + + ); diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 1888fd9a..8fdb26c0 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,30 @@ # @bnb-chain/canonical-bridge-widget +## 0.5.12-alpha.0 + +### Patch Changes + +- Keep the previous selected route after routes refreshing + +## 0.5.10-alpha.4 + +### Patch Changes + +- Remove bridge bottom element if `routeContentBottom` not setted + +## 0.5.10-alpha.3 + +### Patch Changes + +- Split `TransferWidget` into `BridgeTransfer` and `BridgeRoutes` + +## 0.5.10-alpha.2 + +### Patch Changes + +- 2849332: Add more customizable configs +- AlertIcon supports customize color + ## 0.5.10-alpha.0 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 01c5acb6..c54149c3 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.5.10-alpha.0", + "version": "0.5.12-alpha.0", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx b/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx index acbc11ef..e4f581ba 100644 --- a/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx +++ b/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx @@ -42,7 +42,6 @@ interface CanonicalBridgeContextProps extends ICanonicalBridgeConfig { routeContentBottom: React.ReactNode; connectWalletButton: React.ReactNode; refreshingIcon?: React.ReactNode; - bridgeBottom?: React.ReactNode; onClickConnectWalletButton?: (params: { chainType: ChainType; chainId: number; @@ -65,7 +64,6 @@ export interface CanonicalBridgeProviderProps { children: React.ReactNode; onClickConnectWalletButton?: CanonicalBridgeContextProps['onClickConnectWalletButton']; refreshingIcon?: React.ReactNode; - bridgeBottom?: React.ReactNode; } export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) { @@ -77,7 +75,6 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) { routeContentBottom, connectWalletButton, refreshingIcon, - bridgeBottom, onClickConnectWalletButton, } = props; @@ -105,16 +102,8 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) { connectWalletButton: connectWalletButton ?? , onClickConnectWalletButton, refreshingIcon, - bridgeBottom, }; - }, [ - bridgeBottom, - config, - connectWalletButton, - onClickConnectWalletButton, - refreshingIcon, - routeContentBottom, - ]); + }, [config, connectWalletButton, onClickConnectWalletButton, refreshingIcon, routeContentBottom]); return ( diff --git a/packages/canonical-bridge-widget/src/core/components/icons/AlertIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/AlertIcon.tsx index 1e04ee42..f8f0bbb0 100644 --- a/packages/canonical-bridge-widget/src/core/components/icons/AlertIcon.tsx +++ b/packages/canonical-bridge-widget/src/core/components/icons/AlertIcon.tsx @@ -2,7 +2,15 @@ import { Icon, IconProps } from '@bnb-chain/space'; export function AlertIcon(props: IconProps) { return ( - + - + ); diff --git a/packages/canonical-bridge-widget/src/core/locales/en.ts b/packages/canonical-bridge-widget/src/core/locales/en.ts index ad0829fa..ccda9559 100644 --- a/packages/canonical-bridge-widget/src/core/locales/en.ts +++ b/packages/canonical-bridge-widget/src/core/locales/en.ts @@ -23,7 +23,8 @@ export const en = { 'route.title.select.routes': 'Select Bridge Routes', 'route.fees.title': 'Fees:', 'route.time.title': 'Time:', - 'route.allowed-send-amount': 'Your send amount should be between {min} to {max} {symbol}', + 'route.allowed-send-amount': + 'The amount you send must be greater than {min} and less than {max} {symbol}', 'route.token-address.tips': 'Please double check the received token address before making the transaction.', diff --git a/packages/canonical-bridge-widget/src/index.tsx b/packages/canonical-bridge-widget/src/index.tsx index 9d1d09ff..dd99b2fe 100644 --- a/packages/canonical-bridge-widget/src/index.tsx +++ b/packages/canonical-bridge-widget/src/index.tsx @@ -1,6 +1,9 @@ export * from '@/modules/aggregator'; export * from '@/CanonicalBridgeProvider'; -export * from '@/modules/transfer'; + +export * from '@/modules/transfer/BridgeTransfer'; +export * from '@/modules/transfer/BridgeRoutes'; + export { useBridge } from '@/ExportsProvider'; // gtm diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/layerZero/components/LayerZeroOption.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/layerZero/components/LayerZeroOption.tsx index 6068b4a2..301610bc 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/layerZero/components/LayerZeroOption.tsx +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/layerZero/components/LayerZeroOption.tsx @@ -59,7 +59,7 @@ export const LayerZeroOption = () => { return ( diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/layerZero/hooks/useGetLayerZeroFees.ts b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/layerZero/hooks/useGetLayerZeroFees.ts index 37a5462c..d23de756 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/adapters/layerZero/hooks/useGetLayerZeroFees.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/adapters/layerZero/hooks/useGetLayerZeroFees.ts @@ -13,6 +13,7 @@ import { useGetNativeToken } from '@/modules/transfer/hooks/useGetNativeToken'; import { formatNumber } from '@/core/utils/number'; import { formatFeeAmount } from '@/core/utils/string'; import { useGetAllowance } from '@/core/contract/hooks/useGetAllowance'; +import { useIsWalletCompatible } from '@/modules/wallet/hooks/useIsWalletCompatible'; export const useGetLayerZeroFees = () => { const { address, chain } = useAccount(); @@ -24,6 +25,7 @@ export const useGetLayerZeroFees = () => { const selectedToken = useAppSelector((state) => state.transfer.selectedToken); const sendValue = useAppSelector((state) => state.transfer.sendValue); const fromChain = useAppSelector((state) => state.transfer.fromChain); + const isWalletCompatible = useIsWalletCompatible(); const { data: nativeBalance } = useBalance({ address, chainId: fromChain?.id }); // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -119,7 +121,7 @@ export const useGetLayerZeroFees = () => { isFailedToGetGas = true; } } - } else { + } else if (isWalletCompatible) { dispatch(setRouteError({ layerZero: `Insufficient ${nativeToken} to cover native fee` })); isDisplayError = true; } @@ -159,6 +161,7 @@ export const useGetLayerZeroFees = () => { chain, fromChain?.id, allowance, + isWalletCompatible, ], ); 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 f8d5ad9f..e71ebf14 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 @@ -15,6 +15,7 @@ import { useBridgeSDK } from '@/core/hooks/useBridgeSDK'; import { formatFeeAmount } from '@/core/utils/string'; import { useGetNativeToken } from '@/modules/transfer/hooks/useGetNativeToken'; import { ERC20_TOKEN } from '@/core/contract/abi'; +import { useIsWalletCompatible } from '@/modules/wallet/hooks/useIsWalletCompatible'; export const useGetStargateFees = () => { const dispatch = useAppDispatch(); @@ -24,6 +25,7 @@ export const useGetStargateFees = () => { const bridgeSDK = useBridgeSDK(); const { formatMessage } = useIntl(); const nativeToken = useGetNativeToken(); + const isWalletCompatible = useIsWalletCompatible(); const fromChain = useAppSelector((state) => state.transfer.fromChain); const { data: nativeBalance } = useBalance({ address, chainId: fromChain?.id }); @@ -128,7 +130,11 @@ export const useGetStargateFees = () => { value: `${formatNumber(Number(fee), 8)} ${nativeToken}`, name: 'nativeFee', }); - if (nativeBalance?.value && nativeBalance?.value < Number(nativeFee)) { + if ( + nativeBalance?.value && + nativeBalance?.value < Number(nativeFee) && + isWalletCompatible + ) { dispatch( setRouteError({ stargate: `Insufficient ${nativeToken} to cover native fee` }), ); @@ -242,6 +248,7 @@ export const useGetStargateFees = () => { nativeBalance?.value, fromChain, balance, + isWalletCompatible, ], ); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/BridgeRoutes.tsx b/packages/canonical-bridge-widget/src/modules/transfer/BridgeRoutes.tsx new file mode 100644 index 00000000..14571fc6 --- /dev/null +++ b/packages/canonical-bridge-widget/src/modules/transfer/BridgeRoutes.tsx @@ -0,0 +1,30 @@ +import { useBreakpointValue, useIntl } from '@bnb-chain/space'; + +import { TransferOverview } from '@/modules/transfer/components/TransferOverview'; +import { RoutesModal } from '@/modules/transfer/components/TransferOverview/modal/RoutesModal'; +import { useBridgeConfig } from '@/CanonicalBridgeProvider'; +import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; +import { setIsRoutesModalOpen } from '@/modules/transfer/action'; + +export function BridgeRoutes() { + const { formatMessage } = useIntl(); + const dispatch = useAppDispatch(); + + const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; + const { routeContentBottom } = useBridgeConfig(); + const isRoutesModalOpen = useAppSelector((state) => state.transfer.isRoutesModalOpen); + + if (isBase) { + return ( + dispatch(setIsRoutesModalOpen(false))} + > + + + ); + } + + return ; +} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/BridgeTransfer.tsx b/packages/canonical-bridge-widget/src/modules/transfer/BridgeTransfer.tsx new file mode 100644 index 00000000..62f5f6f9 --- /dev/null +++ b/packages/canonical-bridge-widget/src/modules/transfer/BridgeTransfer.tsx @@ -0,0 +1,67 @@ +import { Box, Flex, Typography, useColorMode, useTheme } from '@bnb-chain/space'; + +import { TransferButtonGroup } from '@/modules/transfer/components/TransferButtonGroup'; +import { NetWorkSection } from '@/modules/transfer/components/NetWorkSection'; +import { SendInput } from '@/modules/transfer/components/SendInput'; +import { ReceiveInfo } from '@/modules/transfer/components/ReceiveInfo'; +import { useDefaultSelectedInfo } from '@/modules/aggregator/hooks/useDefaultSelectedInfo'; +import { useBridgeConfig } from '@/CanonicalBridgeProvider'; +import { ToAccount } from '@/modules/transfer/components/ToAccount'; +import { SvgDefs } from '@/core/components/icons/defs.tsx'; +import { useAppDispatch } from '@/modules/store/StoreProvider'; +import { setIsRoutesModalOpen } from '@/modules/transfer/action'; + +export function BridgeTransfer() { + const { colorMode } = useColorMode(); + const dispatch = useAppDispatch(); + const theme = useTheme(); + + useDefaultSelectedInfo(); + + const { appearance, routeContentBottom } = useBridgeConfig(); + + return ( + <> + + + {appearance.bridgeTitle && ( + + {appearance.bridgeTitle} + + )} + + + + + dispatch(setIsRoutesModalOpen(true))} /> + + + + {routeContentBottom && ( + {routeContentBottom} + )} + + + ); +} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/action.ts b/packages/canonical-bridge-widget/src/modules/transfer/action.ts index 004838bf..27b696a9 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/action.ts +++ b/packages/canonical-bridge-widget/src/modules/transfer/action.ts @@ -43,3 +43,7 @@ export const setRouteFees = createAction('transfer/ export const setIsToAddressChecked = createAction( 'transfer/setIsToAddressChecked', ); + +export const setIsRoutesModalOpen = createAction( + 'transfer/setIsRoutesModalOpen', +); diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx index 3e628e37..1c740f5f 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx @@ -3,7 +3,7 @@ import { Box, BoxProps, useColorMode, useTheme } from '@bnb-chain/space'; import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider'; import { setIsGlobalFeeLoading, setIsRefreshing } from '@/modules/transfer/action'; -import { useLoadingBridgeFees } from '@/modules/transfer/hooks/useLoadingBridgeFees'; +import { TriggerType, useLoadingBridgeFees } from '@/modules/transfer/hooks/useLoadingBridgeFees'; import { RefreshingIcon } from '@/modules/transfer/components/LoadingImg/RefreshingIcon'; import { useBridgeConfig } from '@/index'; @@ -24,9 +24,13 @@ export const RefreshingButton = (props: BoxProps) => { let mount = true; if (!mount) return; if (transferActionInfo) { + const params = { + triggerType: 'refresh' as TriggerType, + }; + let interval = setInterval(() => { dispatch(setIsGlobalFeeLoading(true)); - loadingBridgeFees(); + loadingBridgeFees(params); }, bridgeConfig.http.refetchingInterval ?? 30000); // Stop and restart fee loading @@ -35,11 +39,11 @@ export const RefreshingButton = (props: BoxProps) => { if (interval) { clearInterval(interval); dispatch(setIsGlobalFeeLoading(true)); - loadingBridgeFees(); + loadingBridgeFees(params); dispatch(setIsRefreshing(false)); interval = setInterval(() => { dispatch(setIsGlobalFeeLoading(true)); - loadingBridgeFees(); + loadingBridgeFees(params); }, bridgeConfig.http?.refetchingInterval ?? 30000); } setIsButtonPressed(false); 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 b29f63ab..d159e34f 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 @@ -33,7 +33,7 @@ import { setIsRefreshing, setTransferActionInfo, } from '@/modules/transfer/action'; -import { useLoadingBridgeFees } from '@/modules/transfer/hooks/useLoadingBridgeFees'; +import { TriggerType, useLoadingBridgeFees } from '@/modules/transfer/hooks/useLoadingBridgeFees'; interface ReceiveInfoProps { onOpen: () => void; 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 08fc3f5f..3b1f978c 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 @@ -7,6 +7,7 @@ import { useIntl, useTheme, Collapse, + FlexProps, } from '@bnb-chain/space'; import { ReactNode, useEffect, useMemo } from 'react'; @@ -31,7 +32,13 @@ import { MesonOption } from '@/modules/aggregator/adapters/meson/components/Meso import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; import { CBridgeSendMaxMin } from '@/modules/aggregator/adapters/cBridge/components/CBridgeSendMaxMin'; -export function TransferOverview({ routeContentBottom }: { routeContentBottom?: ReactNode }) { +export interface TransferOverviewProps extends FlexProps { + routeContentBottom?: ReactNode; +} + +export function TransferOverview(props: TransferOverviewProps) { + const { routeContentBottom, ...restProps } = props; + const dispatch = useAppDispatch(); const { formatMessage } = useIntl(); const { colorMode } = useColorMode(); @@ -177,6 +184,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?: w={{ base: 'auto', lg: showOverview ? '408px' : 0 }} data-show={showOverview ? true : undefined} transition={'width 0.15s'} + {...restProps} > {cBridgeSupport && } diff --git a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts index b2e55bd8..a4b10367 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts +++ b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts @@ -33,9 +33,12 @@ import { useGetMesonFees } from '@/modules/aggregator/adapters/meson/hooks/useGe import { formatNumber } from '@/core/utils/number'; import { useSolanaAccount } from '@/modules/wallet/hooks/useSolanaAccount'; import { useSolanaTransferInfo } from '@/modules/transfer/hooks/solana/useSolanaTransferInfo'; +import { useIsWalletCompatible } from '@/modules/wallet/hooks/useIsWalletCompatible'; let lastTime = Date.now(); +export type TriggerType = 'new' | 'refresh'; + export const useLoadingBridgeFees = () => { const dispatch = useAppDispatch(); const { preSelectRoute } = usePreSelectRoute(); @@ -45,6 +48,7 @@ export const useLoadingBridgeFees = () => { const { address: solanaAddress } = useSolanaAccount(); const { isSolanaAvailableToAccount } = useSolanaTransferInfo(); + const isWalletCompatible = useIsWalletCompatible(); const bridgeSDK = useBridgeSDK(); const { @@ -95,346 +99,369 @@ export const useLoadingBridgeFees = () => { const nativeBalanceRef = useRef(nativeBalance); nativeBalanceRef.current = nativeBalance; + const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo); + const selectedBridgeTypeRef = useRef(transferActionInfo?.bridgeType); + selectedBridgeTypeRef.current = transferActionInfo?.bridgeType; + // eslint-disable-next-line @typescript-eslint/no-explicit-any const publicClient = usePublicClient({ chainId: fromChain?.id }) as any; const debouncedSendValue = useDebounce(sendValue, DEBOUNCE_DELAY); - const loadingBridgeFees = useCallback(async () => { - dispatch(setRouteFees(undefined)); - if (!selectedToken || !fromChain || !toChain || !debouncedSendValue) { - dispatch(setIsGlobalFeeLoading(false)); - return; - } - dispatch(setEstimatedAmount(undefined)); - dispatch( - setRouteError({ - deBridge: undefined, - cBridge: undefined, - stargate: undefined, - layerZero: undefined, - meson: undefined, - }), - ); - const bridgeTypeList: BridgeType[] = []; - const valueArr = []; + const loadingBridgeFees = useCallback( + async (params?: { triggerType?: TriggerType }) => { + const { triggerType = 'new' } = params ?? {}; - const availableBridgeTypes = bridgeSDK.getSupportedBridges(); - availableBridgeTypes.forEach((bridge) => { - if (selectedToken[bridge]?.isMatched) { - bridgeTypeList.push(bridge); + dispatch(setRouteFees(undefined)); + if (!selectedToken || !fromChain || !toChain || !debouncedSendValue) { + dispatch(setIsGlobalFeeLoading(false)); + return; } - }); - try { - const amount = parseUnits(debouncedSendValue, selectedToken.decimals); - const now = Date.now(); - lastTime = now; - const response = await bridgeSDK.loadBridgeFees({ - bridgeType: bridgeTypeList, - fromChainId: fromChain.id, - fromAccount: address || DEFAULT_ADDRESS, - toChainId: toChain?.id, - sendValue: amount, - fromTokenSymbol: selectedToken.symbol, - publicClient, - endPointId: { - layerZeroV1: toToken?.layerZero?.raw?.endpointID, - layerZeroV2: toToken?.stargate?.raw?.endpointID, - }, - bridgeAddress: { - stargate: selectedToken?.stargate?.raw?.bridgeAddress as `0x${string}`, - layerZero: selectedToken?.layerZero?.raw?.bridgeAddress as `0x${string}`, - }, - isPegged: selectedToken?.isPegged, - slippage: max_slippage, - mesonOpts: { - fromToken: `${fromChain?.meson?.raw?.id}:${selectedToken?.meson?.raw?.id}`, - toToken: `${toChain?.meson?.raw?.id}:${toToken?.meson?.raw?.id}`, - amount: debouncedSendValue, - fromAddr: - fromChain?.chainType === 'tron' - ? tronAddress ?? DEFAULT_TRON_ADDRESS - : address ?? DEFAULT_ADDRESS, - }, - deBridgeOpts: { + dispatch(setEstimatedAmount(undefined)); + dispatch( + setRouteError({ + deBridge: undefined, + cBridge: undefined, + stargate: undefined, + layerZero: undefined, + meson: undefined, + }), + ); + const bridgeTypeList: BridgeType[] = []; + const valueArr = []; + + const availableBridgeTypes = bridgeSDK.getSupportedBridges(); + availableBridgeTypes.forEach((bridge) => { + if (selectedToken[bridge]?.isMatched) { + bridgeTypeList.push(bridge); + } + }); + try { + const amount = parseUnits(debouncedSendValue, selectedToken.decimals); + const now = Date.now(); + lastTime = now; + const response = await bridgeSDK.loadBridgeFees({ + bridgeType: bridgeTypeList, fromChainId: fromChain.id, - fromTokenAddress: selectedToken.deBridge?.address as `0x${string}`, - amount, + fromAccount: address || DEFAULT_ADDRESS, toChainId: toChain?.id, - toTokenAddress: toToken?.deBridge?.address as `0x${string}`, - accesstoken: deBridgeAccessToken, - userAddress: - fromChain.chainType === 'solana' - ? solanaAddress || DEFAULT_SOLANA_ADDRESS - : address || DEFAULT_ADDRESS, - toUserAddress: - fromChain.chainType === 'solana' - ? isSolanaAvailableToAccount - ? toAccountRef.current - : DEFAULT_ADDRESS - : toChain.chainType === 'solana' - ? isSolanaAvailableToAccount - ? toAccountRef.current - : DEFAULT_SOLANA_ADDRESS - : undefined, - }, - }); - // eslint-disable-next-line no-console - console.log( - 'API response deBridge[0], cBridge[1], stargate[2], layerZero[3], meson[4]', - response, - ); - if (lastTime > now) { - return; - } + sendValue: amount, + fromTokenSymbol: selectedToken.symbol, + publicClient, + endPointId: { + layerZeroV1: toToken?.layerZero?.raw?.endpointID, + layerZeroV2: toToken?.stargate?.raw?.endpointID, + }, + bridgeAddress: { + stargate: selectedToken?.stargate?.raw?.bridgeAddress as `0x${string}`, + layerZero: selectedToken?.layerZero?.raw?.bridgeAddress as `0x${string}`, + }, + isPegged: selectedToken?.isPegged, + slippage: max_slippage, + mesonOpts: { + fromToken: `${fromChain?.meson?.raw?.id}:${selectedToken?.meson?.raw?.id}`, + toToken: `${toChain?.meson?.raw?.id}:${toToken?.meson?.raw?.id}`, + amount: debouncedSendValue, + fromAddr: + fromChain?.chainType === 'tron' + ? tronAddress ?? DEFAULT_TRON_ADDRESS + : address ?? DEFAULT_ADDRESS, + }, + deBridgeOpts: { + fromChainId: fromChain.id, + fromTokenAddress: selectedToken.deBridge?.address as `0x${string}`, + amount, + toChainId: toChain?.id, + toTokenAddress: toToken?.deBridge?.address as `0x${string}`, + accesstoken: deBridgeAccessToken, + userAddress: + fromChain.chainType === 'solana' + ? solanaAddress || DEFAULT_SOLANA_ADDRESS + : address || DEFAULT_ADDRESS, + toUserAddress: + fromChain.chainType === 'solana' + ? isSolanaAvailableToAccount + ? toAccountRef.current + : DEFAULT_ADDRESS + : toChain.chainType === 'solana' + ? isSolanaAvailableToAccount + ? toAccountRef.current + : DEFAULT_SOLANA_ADDRESS + : undefined, + }, + }); + // eslint-disable-next-line no-console + console.log( + 'API response deBridge[0], cBridge[1], stargate[2], layerZero[3], meson[4]', + response, + ); + if (lastTime > now) { + return; + } - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const [debridgeEst, cbridgeEst, stargateEst, layerZeroEst, mesonEst] = response as any; - // meson - if (mesonEst.status === 'fulfilled' && mesonEst?.value) { - if (mesonEst?.value?.error) { - const error = mesonEst?.value?.error; - dispatch(setRouteFees({ meson: undefined })); - if (error.code === 21 && error.message === 'amount-over-limit') { - dispatch(setEstimatedAmount({ meson: 'error' })); - dispatch( - setRouteError({ - meson: formatMessage({ id: 'route.error.amount.max' }, { max: error.data.max }), - }), - ); - } else if (error.code === 66 && error.message === 'fee-over-amount') { - dispatch(setEstimatedAmount({ meson: 'error' })); - dispatch( - setRouteError({ - meson: formatMessage( - { id: 'route.error.amount.min' }, - { min: `${error.data.fee} ${selectedToken.symbol}` }, - ), - }), - ); - } else if (error.code === 19 && error.message === 'amount-exceeds-6-decimals') { - dispatch(setEstimatedAmount({ meson: 'error' })); - dispatch( - setRouteError({ - meson: formatMessage({ id: 'route.error.amount.digits' }), - }), - ); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const [debridgeEst, cbridgeEst, stargateEst, layerZeroEst, mesonEst] = response as any; + // meson + if (mesonEst.status === 'fulfilled' && mesonEst?.value) { + if (mesonEst?.value?.error) { + const error = mesonEst?.value?.error; + dispatch(setRouteFees({ meson: undefined })); + if (error.code === 21 && error.message === 'amount-over-limit') { + dispatch(setEstimatedAmount({ meson: 'error' })); + dispatch( + setRouteError({ + meson: formatMessage({ id: 'route.error.amount.max' }, { max: error.data.max }), + }), + ); + } else if (error.code === 66 && error.message === 'fee-over-amount') { + dispatch(setEstimatedAmount({ meson: 'error' })); + dispatch( + setRouteError({ + meson: formatMessage( + { id: 'route.error.amount.min' }, + { min: `${error.data.fee} ${selectedToken.symbol}` }, + ), + }), + ); + } else if (error.code === 19 && error.message === 'amount-exceeds-6-decimals') { + dispatch(setEstimatedAmount({ meson: 'error' })); + dispatch( + setRouteError({ + meson: formatMessage({ id: 'route.error.amount.digits' }), + }), + ); + } else { + // other error + dispatch(setEstimatedAmount({ meson: 'error' })); + dispatch( + setRouteError({ + meson: error.message, + }), + ); + } } else { - // other error - dispatch(setEstimatedAmount({ meson: 'error' })); - dispatch( - setRouteError({ - meson: error.message, - }), - ); + const feeSortingRes = await mesonFeeSorting.current(mesonEst.value.result); + const decimals = selectedToken?.meson?.raw?.decimals || 6; + const receiveMesonAmt = + parseUnits(debouncedSendValue, decimals) - + parseUnits(mesonEst.value.result.totalFee, decimals); + if (feeSortingRes) { + dispatch( + setEstimatedAmount({ + meson: formatNumber(Number(formatUnits(receiveMesonAmt, decimals)), 8), + }), + ); + // TODO check amount value + valueArr.push({ + type: 'meson', + value: formatNumber(Number(formatUnits(receiveMesonAmt, decimals)), 8), + isIgnoreSorted: false, + isDisplayError: false, + }); + } } + } else if (mesonEst.status === 'rejected') { + // TODO handle error + dispatch(setEstimatedAmount({ meson: undefined })); } else { - const feeSortingRes = await mesonFeeSorting.current(mesonEst.value.result); - const decimals = selectedToken?.meson?.raw?.decimals || 6; - const receiveMesonAmt = - parseUnits(debouncedSendValue, decimals) - - parseUnits(mesonEst.value.result.totalFee, decimals); - if (feeSortingRes) { + dispatch(setEstimatedAmount({ meson: undefined })); + } + + // deBridge + if (debridgeEst.status === 'fulfilled' && debridgeEst?.value) { + const feeSortingRes = await deBridgeFeeSorting.current( + debridgeEst.value as DeBridgeCreateQuoteResponse, + ); + if (!feeSortingRes?.isFailedToGetGas) { dispatch( - setEstimatedAmount({ - meson: formatNumber(Number(formatUnits(receiveMesonAmt, decimals)), 8), - }), + setEstimatedAmount({ deBridge: debridgeEst.value as DeBridgeCreateQuoteResponse }), ); - // TODO check amount value valueArr.push({ - type: 'meson', - value: formatNumber(Number(formatUnits(receiveMesonAmt, decimals)), 8), - isIgnoreSorted: false, - isDisplayError: false, + type: 'deBridge', + value: formatUnits( + BigInt( + (debridgeEst.value as DeBridgeCreateQuoteResponse)?.estimation.dstChainTokenOut + .amount, + ), + getToDecimals()['deBridge'], + ), + isIgnoreSorted: feeSortingRes?.isFailedToGetGas, + isDisplayError: feeSortingRes?.isDisplayError, }); + } else { + dispatch(setEstimatedAmount({ deBridge: undefined })); + } + } else if (debridgeEst.status === 'rejected') { + // Only show route on low amount error + if (debridgeEst.reason.message === 'ERROR_LOW_GIVE_AMOUNT') { + dispatch(setRouteError({ deBridge: 'Please increase your send amount' })); + dispatch(setEstimatedAmount({ deBridge: 'error' })); + dispatch(setRouteFees({ deBridge: undefined })); + } else { + dispatch(setEstimatedAmount({ deBridge: undefined })); } - } - } else if (mesonEst.status === 'rejected') { - // TODO handle error - dispatch(setEstimatedAmount({ meson: undefined })); - } else { - dispatch(setEstimatedAmount({ meson: undefined })); - } - - // deBridge - if (debridgeEst.status === 'fulfilled' && debridgeEst?.value) { - const feeSortingRes = await deBridgeFeeSorting.current( - debridgeEst.value as DeBridgeCreateQuoteResponse, - ); - if (!feeSortingRes?.isFailedToGetGas) { - dispatch( - setEstimatedAmount({ deBridge: debridgeEst.value as DeBridgeCreateQuoteResponse }), - ); - valueArr.push({ - type: 'deBridge', - value: formatUnits( - BigInt( - (debridgeEst.value as DeBridgeCreateQuoteResponse)?.estimation.dstChainTokenOut - .amount, - ), - getToDecimals()['deBridge'], - ), - isIgnoreSorted: feeSortingRes?.isFailedToGetGas, - isDisplayError: feeSortingRes?.isDisplayError, - }); - } else { - dispatch(setEstimatedAmount({ deBridge: undefined })); - } - } else if (debridgeEst.status === 'rejected') { - // Only show route on low amount error - if (debridgeEst.reason.message === 'ERROR_LOW_GIVE_AMOUNT') { - dispatch(setRouteError({ deBridge: 'Please increase your send amount' })); - dispatch(setEstimatedAmount({ deBridge: 'error' })); - dispatch(setRouteFees({ deBridge: undefined })); } else { dispatch(setEstimatedAmount({ deBridge: undefined })); } - } else { - dispatch(setEstimatedAmount({ deBridge: undefined })); - } - // cBridge - if (cbridgeEst.status === 'fulfilled' && cbridgeEst?.value) { - // Do not show route on error - if (cbridgeEst?.value.err) { - dispatch(setEstimatedAmount({ cBridge: undefined })); - } else { - if (cbridgeEst.value?.err?.msg) { - dispatch(setRouteError({ cBridge: cbridgeEst.value?.err?.msg })); - dispatch(setEstimatedAmount({ cBridge: 'error' })); + // cBridge + if (cbridgeEst.status === 'fulfilled' && cbridgeEst?.value) { + // Do not show route on error + if (cbridgeEst?.value.err) { + dispatch(setEstimatedAmount({ cBridge: undefined })); } else { - dispatch(setEstimatedAmount({ cBridge: cbridgeEst.value })); + if (cbridgeEst.value?.err?.msg) { + dispatch(setRouteError({ cBridge: cbridgeEst.value?.err?.msg })); + dispatch(setEstimatedAmount({ cBridge: 'error' })); + } else { + dispatch(setEstimatedAmount({ cBridge: cbridgeEst.value })); - const feeSortingRes = await cBridgeFeeSorting.current(cbridgeEst.value); - // Hide route on gas error - if (feeSortingRes?.isFailedToGetGas) { - dispatch(setEstimatedAmount({ cBridge: undefined })); + const feeSortingRes = await cBridgeFeeSorting.current(cbridgeEst.value); + // Hide route on gas error + if (feeSortingRes?.isFailedToGetGas) { + dispatch(setEstimatedAmount({ cBridge: undefined })); + } + if (!isAllowSendError.current && !feeSortingRes?.isFailedToGetGas) { + valueArr.push({ + type: 'cBridge', + value: formatUnits( + BigInt(cbridgeEst.value?.estimated_receive_amt), + getToDecimals()['cBridge'], + ), + isIgnoreSorted: feeSortingRes?.isFailedToGetGas, + isDisplayError: false, + }); + } } - if (!isAllowSendError.current && !feeSortingRes?.isFailedToGetGas) { + } + } else if (cbridgeEst.status === 'rejected') { + dispatch(setRouteError({ cBridge: cbridgeEst.reason.message })); + dispatch(setEstimatedAmount({ cBridge: 'error' })); + dispatch(setRouteFees({ cBridge: undefined })); + } else { + dispatch(setEstimatedAmount({ cBridge: undefined })); + } + + // stargate + if (stargateEst.status === 'fulfilled' && stargateEst?.value) { + const feeSortingRes = await stargateFeeSorting.current(stargateEst.value); + // Hide route if we can not get gas fee. + if (!feeSortingRes?.isFailedToGetGas) { + dispatch(setEstimatedAmount({ stargate: toObject(stargateEst.value) })); + if (!feeSortingRes?.isDisplayError) { valueArr.push({ - type: 'cBridge', + type: 'stargate', value: formatUnits( - BigInt(cbridgeEst.value?.estimated_receive_amt), - getToDecimals()['cBridge'], + stargateEst.value?.[2].amountReceivedLD, + getToDecimals()['stargate'], ), isIgnoreSorted: feeSortingRes?.isFailedToGetGas, - isDisplayError: false, + isDisplayError: feeSortingRes?.isDisplayError, }); } + } else { + dispatch(setEstimatedAmount({ stargate: undefined })); } - } - } else if (cbridgeEst.status === 'rejected') { - dispatch(setRouteError({ cBridge: cbridgeEst.reason.message })); - dispatch(setEstimatedAmount({ cBridge: 'error' })); - dispatch(setRouteFees({ cBridge: undefined })); - } else { - dispatch(setEstimatedAmount({ cBridge: undefined })); - } - - // stargate - if (stargateEst.status === 'fulfilled' && stargateEst?.value) { - const feeSortingRes = await stargateFeeSorting.current(stargateEst.value); - // Hide route if we can not get gas fee. - if (!feeSortingRes?.isFailedToGetGas) { - dispatch(setEstimatedAmount({ stargate: toObject(stargateEst.value) })); - if (!feeSortingRes?.isDisplayError) { - valueArr.push({ - type: 'stargate', - value: formatUnits( - stargateEst.value?.[2].amountReceivedLD, - getToDecimals()['stargate'], - ), - isIgnoreSorted: feeSortingRes?.isFailedToGetGas, - isDisplayError: feeSortingRes?.isDisplayError, - }); - } + } else if (stargateEst.status === 'rejected') { + dispatch(setRouteError({ stargate: stargateEst.reason.message })); + dispatch(setEstimatedAmount({ stargate: undefined })); + dispatch(setRouteFees({ stargate: undefined })); } else { dispatch(setEstimatedAmount({ stargate: undefined })); } - } else if (stargateEst.status === 'rejected') { - dispatch(setRouteError({ stargate: stargateEst.reason.message })); - dispatch(setEstimatedAmount({ stargate: undefined })); - dispatch(setRouteFees({ stargate: undefined })); - } else { - dispatch(setEstimatedAmount({ stargate: undefined })); - } - // layerZero - if (layerZeroEst.status === 'fulfilled' && layerZeroEst?.value) { - const nativeFee = layerZeroEst?.value[0]; - if (nativeBalanceRef.current?.value && nativeBalanceRef.current.value < Number(nativeFee)) { - dispatch(setRouteError({ layerZero: `Insufficient ${nativeToken} to cover native fee` })); - dispatch(setEstimatedAmount({ layerZero: 'error' })); - } else { - const feeSortingRes = await layerZeroFeeSorting.current(layerZeroEst.value); - if (!feeSortingRes?.isFailedToGetGas) { + // layerZero + if (layerZeroEst.status === 'fulfilled' && layerZeroEst?.value) { + const nativeFee = layerZeroEst?.value[0]; + if ( + nativeBalanceRef.current?.value && + nativeBalanceRef.current.value < Number(nativeFee) && + isWalletCompatible + ) { dispatch( - setEstimatedAmount({ - layerZero: String(parseUnits(debouncedSendValue, getToDecimals()['layerZero'])), - }), + setRouteError({ layerZero: `Insufficient ${nativeToken} to cover native fee` }), ); - valueArr.push({ - type: 'layerZero', - value: debouncedSendValue, - isIgnoreSorted: feeSortingRes?.isFailedToGetGas, - isDisplayError: feeSortingRes?.isDisplayError, - }); + dispatch(setEstimatedAmount({ layerZero: 'error' })); } else { - dispatch(setEstimatedAmount({ layerZero: undefined })); + const feeSortingRes = await layerZeroFeeSorting.current(layerZeroEst.value); + if (!feeSortingRes?.isFailedToGetGas) { + dispatch( + setEstimatedAmount({ + layerZero: String(parseUnits(debouncedSendValue, getToDecimals()['layerZero'])), + }), + ); + valueArr.push({ + type: 'layerZero', + value: debouncedSendValue, + isIgnoreSorted: feeSortingRes?.isFailedToGetGas, + isDisplayError: feeSortingRes?.isDisplayError, + }); + } else { + dispatch(setEstimatedAmount({ layerZero: undefined })); + } } + } else if (layerZeroEst.status === 'rejected') { + dispatch(setRouteError({ layerZero: layerZeroEst.reason.message })); + dispatch(setEstimatedAmount({ layerZero: undefined })); + dispatch(setRouteFees({ layerZero: undefined })); + } else { + dispatch(setEstimatedAmount({ layerZero: undefined })); } - } else if (layerZeroEst.status === 'rejected') { - dispatch(setRouteError({ layerZero: layerZeroEst.reason.message })); - dispatch(setEstimatedAmount({ layerZero: undefined })); - dispatch(setRouteFees({ layerZero: undefined })); - } else { - dispatch(setEstimatedAmount({ layerZero: undefined })); - } - // pre-select best route - if (valueArr.length > 0) { - const highestValue = valueArr.reduce( - (max, entry) => - Number(entry['value']) > Number(max['value']) && - entry.isIgnoreSorted === false && - entry.isDisplayError === false - ? entry - : max, - { value: '0', type: '' }, - ); - if (Number(highestValue?.value) > 0) { - preSelectRoute(response, highestValue.type as BridgeType); + // pre-select best route + if (valueArr.length > 0) { + const lastValue = valueArr.find( + (e) => !e.isDisplayError && e.type === selectedBridgeTypeRef.current, + ); + + const highestValue = valueArr.reduce( + (max, entry) => + Number(entry['value']) > Number(max['value']) && + entry.isIgnoreSorted === false && + entry.isDisplayError === false + ? entry + : max, + { value: '0', type: '' }, + ); + + if (triggerType === 'refresh' && lastValue) { + preSelectRoute(response, lastValue.type as BridgeType); + } else if (Number(highestValue?.value) > 0) { + preSelectRoute(response, highestValue.type as BridgeType); + } } + dispatch(setIsGlobalFeeLoading(false)); + // eslint-disable-next-line + } catch (error: any) { + // eslint-disable-next-line no-console + console.log(error, error.message); + dispatch(setIsGlobalFeeLoading(false)); } - dispatch(setIsGlobalFeeLoading(false)); - // eslint-disable-next-line - } catch (error: any) { - // eslint-disable-next-line no-console - console.log(error, error.message); - dispatch(setIsGlobalFeeLoading(false)); - } - }, [ - dispatch, - selectedToken, - fromChain, - toChain, - debouncedSendValue, - bridgeSDK, - address, - publicClient, - toToken?.layerZero?.raw?.endpointID, - toToken?.stargate?.raw?.endpointID, - toToken?.meson?.raw?.id, - toToken?.address, - max_slippage, - tronAddress, - deBridgeAccessToken, - solanaAddress, - isSolanaAvailableToAccount, - formatMessage, - getToDecimals, - nativeToken, - preSelectRoute, - ]); + }, + [ + dispatch, + selectedToken, + fromChain, + toChain, + debouncedSendValue, + bridgeSDK, + address, + publicClient, + toToken?.layerZero?.raw?.endpointID, + toToken?.stargate?.raw?.endpointID, + toToken?.meson?.raw?.id, + toToken?.deBridge?.address, + max_slippage, + tronAddress, + deBridgeAccessToken, + solanaAddress, + isSolanaAvailableToAccount, + formatMessage, + getToDecimals, + isWalletCompatible, + nativeToken, + preSelectRoute, + ], + ); return { loadingBridgeFees, diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx deleted file mode 100644 index d654671f..00000000 --- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { - Box, - Flex, - Typography, - useBreakpointValue, - useColorMode, - useDisclosure, - useIntl, - useTheme, -} from '@bnb-chain/space'; - -import { TransferOverview } from '@/modules/transfer/components/TransferOverview'; -import { TransferButtonGroup } from '@/modules/transfer/components/TransferButtonGroup'; -import { NetWorkSection } from '@/modules/transfer/components/NetWorkSection'; -import { SendInput } from '@/modules/transfer/components/SendInput'; -import { ReceiveInfo } from '@/modules/transfer/components/ReceiveInfo'; -import { useDefaultSelectedInfo } from '@/modules/aggregator/hooks/useDefaultSelectedInfo'; -import { RoutesModal } from '@/modules/transfer/components/TransferOverview/modal/RoutesModal'; -import { useBridgeConfig } from '@/CanonicalBridgeProvider'; -import { ToAccount } from '@/modules/transfer/components/ToAccount'; -import { SvgDefs } from '@/core/components/icons/defs.tsx'; - -export function TransferWidget() { - const { colorMode } = useColorMode(); - const { formatMessage } = useIntl(); - const theme = useTheme(); - const isBase = useBreakpointValue({ base: true, lg: false }) ?? false; - - useDefaultSelectedInfo(); - - const { isOpen, onClose, onOpen } = useDisclosure(); - const { appearance, routeContentBottom, bridgeBottom } = useBridgeConfig(); - - return ( - <> - - - - - {appearance.bridgeTitle && ( - - {appearance.bridgeTitle} - - )} - - - - - - - - - {routeContentBottom} - - <>{bridgeBottom} - - - - - {isBase && ( - - - - )} - - - ); -} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/reducer.ts b/packages/canonical-bridge-widget/src/modules/transfer/reducer.ts index 057b6844..39b63aa9 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/reducer.ts +++ b/packages/canonical-bridge-widget/src/modules/transfer/reducer.ts @@ -27,6 +27,7 @@ export interface ITransferState { toAccount: { address?: string; }; + isRoutesModalOpen: boolean; } const initStates: ITransferState = { @@ -50,6 +51,7 @@ const initStates: ITransferState = { toAccount: { address: '', }, + isRoutesModalOpen: false, }; export default createReducer(initStates, (builder) => { @@ -130,4 +132,9 @@ export default createReducer(initStates, (builder) => { ...payload, }, })); + + builder.addCase(actions.setIsRoutesModalOpen, (state, { payload }) => ({ + ...state, + isRoutesModalOpen: payload, + })); }); From 0cf34debac42c4ee2f77d7f1d53c4f5389fffeca Mon Sep 17 00:00:00 2001 From: wenty22 Date: Fri, 13 Dec 2024 10:44:25 +0800 Subject: [PATCH 3/8] feat: Support custom toast for errors --- .release/.changeset/large-jeans-jam.md | 5 +++++ .release/.changeset/pre.json | 3 +++ .release/.changeset/quiet-hotels-accept.md | 5 +++++ .release/.changeset/silent-keys-fold.md | 5 +++++ packages/canonical-bridge-widget/CHANGELOG.md | 18 +++++++++++++++++ packages/canonical-bridge-widget/package.json | 2 +- .../src/CanonicalBridgeProvider.tsx | 13 +++++++++++- .../src/core/constants/error.ts | 4 ++++ .../canonical-bridge-widget/src/index.tsx | 2 ++ .../transfer/components/ReceiveInfo/index.tsx | 2 +- .../wallet/hooks/useEvmSwitchChain.tsx | 20 +++++++++++++++---- .../wallet/hooks/useTronSwitchChain.tsx | 12 ++++++++++- 12 files changed, 83 insertions(+), 8 deletions(-) create mode 100644 .release/.changeset/large-jeans-jam.md create mode 100644 .release/.changeset/quiet-hotels-accept.md create mode 100644 .release/.changeset/silent-keys-fold.md create mode 100644 packages/canonical-bridge-widget/src/core/constants/error.ts diff --git a/.release/.changeset/large-jeans-jam.md b/.release/.changeset/large-jeans-jam.md new file mode 100644 index 00000000..39637dba --- /dev/null +++ b/.release/.changeset/large-jeans-jam.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Support custom toast for errors diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 30afd015..9a79eb9c 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -8,8 +8,11 @@ "changesets": [ "happy-insects-give", "hip-news-reflect", + "large-jeans-jam", "lazy-vans-applaud", "long-rivers-type", + "quiet-hotels-accept", + "silent-keys-fold", "small-mangos-lay" ] } diff --git a/.release/.changeset/quiet-hotels-accept.md b/.release/.changeset/quiet-hotels-accept.md new file mode 100644 index 00000000..39637dba --- /dev/null +++ b/.release/.changeset/quiet-hotels-accept.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Support custom toast for errors diff --git a/.release/.changeset/silent-keys-fold.md b/.release/.changeset/silent-keys-fold.md new file mode 100644 index 00000000..39637dba --- /dev/null +++ b/.release/.changeset/silent-keys-fold.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Support custom toast for errors diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 8fdb26c0..79799a54 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.5.12-alpha.3 + +### Patch Changes + +- Support custom toast for errors + +## 0.5.12-alpha.2 + +### Patch Changes + +- Support custom toast for errors + +## 0.5.12-alpha.1 + +### Patch Changes + +- Support custom toast for errors + ## 0.5.12-alpha.0 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index c54149c3..04a2d497 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.5.12-alpha.0", + "version": "0.5.12-alpha.3", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx b/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx index e4f581ba..34d9d897 100644 --- a/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx +++ b/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx @@ -47,6 +47,7 @@ interface CanonicalBridgeContextProps extends ICanonicalBridgeConfig { chainId: number; onConnected?: (params?: { walletType?: ChainType; chainId?: number }) => void; }) => void; + onError?: (params: { type: string; message?: string; error?: Error }) => void; } const CanonicalBridgeContext = React.createContext({} as CanonicalBridgeContextProps); @@ -63,6 +64,7 @@ export interface CanonicalBridgeProviderProps { connectWalletButton?: React.ReactNode; children: React.ReactNode; onClickConnectWalletButton?: CanonicalBridgeContextProps['onClickConnectWalletButton']; + onError?: CanonicalBridgeContextProps['onError']; refreshingIcon?: React.ReactNode; } @@ -76,6 +78,7 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) { connectWalletButton, refreshingIcon, onClickConnectWalletButton, + onError, } = props; const value = useMemo(() => { @@ -101,9 +104,17 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) { routeContentBottom, connectWalletButton: connectWalletButton ?? , onClickConnectWalletButton, + onError, refreshingIcon, }; - }, [config, connectWalletButton, onClickConnectWalletButton, refreshingIcon, routeContentBottom]); + }, [ + config, + connectWalletButton, + onClickConnectWalletButton, + onError, + refreshingIcon, + routeContentBottom, + ]); return ( diff --git a/packages/canonical-bridge-widget/src/core/constants/error.ts b/packages/canonical-bridge-widget/src/core/constants/error.ts new file mode 100644 index 00000000..fe31d38d --- /dev/null +++ b/packages/canonical-bridge-widget/src/core/constants/error.ts @@ -0,0 +1,4 @@ +export const ERROR_TYPES = { + SWITCH_EVM_CHAIN: 'switchEvmChain', + SWITCH_TRON_CHAIN: 'switchTronChain', +}; diff --git a/packages/canonical-bridge-widget/src/index.tsx b/packages/canonical-bridge-widget/src/index.tsx index dd99b2fe..a5823faa 100644 --- a/packages/canonical-bridge-widget/src/index.tsx +++ b/packages/canonical-bridge-widget/src/index.tsx @@ -12,6 +12,8 @@ export * from '@/core/utils/gtm'; // locales export * from '@/core/locales'; +export * from '@/core/constants/error'; + // components export * from '@/core/components/StateModal'; 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 d159e34f..b29f63ab 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 @@ -33,7 +33,7 @@ import { setIsRefreshing, setTransferActionInfo, } from '@/modules/transfer/action'; -import { TriggerType, useLoadingBridgeFees } from '@/modules/transfer/hooks/useLoadingBridgeFees'; +import { useLoadingBridgeFees } from '@/modules/transfer/hooks/useLoadingBridgeFees'; interface ReceiveInfoProps { onOpen: () => void; diff --git a/packages/canonical-bridge-widget/src/modules/wallet/hooks/useEvmSwitchChain.tsx b/packages/canonical-bridge-widget/src/modules/wallet/hooks/useEvmSwitchChain.tsx index ef452658..5703a8d6 100644 --- a/packages/canonical-bridge-widget/src/modules/wallet/hooks/useEvmSwitchChain.tsx +++ b/packages/canonical-bridge-widget/src/modules/wallet/hooks/useEvmSwitchChain.tsx @@ -9,6 +9,9 @@ import { } from '@bnb-chain/space'; import { useAccount, useSwitchChain } from 'wagmi'; +import { ERROR_TYPES } from '@/core/constants/error'; +import { useBridgeConfig } from '@/index'; + type UseEvmSwitchChainProps = Parameters[0]; // walletConnect: @@ -19,6 +22,7 @@ export function useEvmSwitchChain(props?: UseEvmSwitchChainProps) { const { connector } = useAccount(); const { formatMessage } = useIntl(); + const { onError } = useBridgeConfig(); const res = useSwitchChain({ ...props, @@ -27,22 +31,24 @@ export function useEvmSwitchChain(props?: UseEvmSwitchChainProps) { onError: (err: any, ...params) => { const switchErrorMsg = formatMessage({ id: 'wallet.error.switch-network' }); - let message = ''; + let message: string | undefined = undefined; if ( connector?.id === 'walletConnect' || connector?.id === 'trust' || - connector?.id === 'binanceWeb3Wallet' + connector?.id === 'binanceWeb3Wallet' || + connector?.id === 'BinanceW3WSDK' ) { if ( err?.message?.includes('The JSON sent is not a valid Request object') || err?.message?.includes('Error Calling Method: switchEthereumChain') || - err?.details?.includes('not support') + err?.details?.includes('not support') || + (connector?.id === 'BinanceW3WSDK' && err.code === 4902) ) { message = switchErrorMsg; } } - if (message) { + if (message && !onError) { toast({ render() { return ( @@ -59,6 +65,12 @@ export function useEvmSwitchChain(props?: UseEvmSwitchChainProps) { }); } + onError?.({ + type: ERROR_TYPES.SWITCH_EVM_CHAIN, + message, + error: err, + }); + props?.mutation?.onError?.(err, ...params); }, }, diff --git a/packages/canonical-bridge-widget/src/modules/wallet/hooks/useTronSwitchChain.tsx b/packages/canonical-bridge-widget/src/modules/wallet/hooks/useTronSwitchChain.tsx index c0652dfd..12097b95 100644 --- a/packages/canonical-bridge-widget/src/modules/wallet/hooks/useTronSwitchChain.tsx +++ b/packages/canonical-bridge-widget/src/modules/wallet/hooks/useTronSwitchChain.tsx @@ -1,5 +1,8 @@ import { useWallet as useTronWallet } from '@tronweb3/tronwallet-adapter-react-hooks'; +import { useBridgeConfig } from '@/CanonicalBridgeProvider'; +import { ERROR_TYPES } from '@/core/constants/error'; + interface UseTronSwitchChainProps { mutation?: { onMutate?: () => void; @@ -12,6 +15,8 @@ interface UseTronSwitchChainProps { export function useTronSwitchChain(props?: UseTronSwitchChainProps) { const { wallet } = useTronWallet(); + const { onError } = useBridgeConfig(); + return { async switchChain({ chainId }: { chainId: number }) { const hexChainId = `0x${chainId?.toString(16)}`; @@ -21,7 +26,12 @@ export function useTronSwitchChain(props?: UseTronSwitchChainProps) { if (!res) { props?.mutation?.onSuccess?.({ chainId }); } - } catch (err) { + } catch (err: any) { + onError?.({ + type: ERROR_TYPES.SWITCH_TRON_CHAIN, + message: undefined, + error: err, + }); props?.mutation?.onError?.(err); } props?.mutation?.onSettled?.(); From 60a2126b98e3e23e9384aac83b72befc6750669b Mon Sep 17 00:00:00 2001 From: wenty22 Date: Fri, 13 Dec 2024 16:30:14 +0800 Subject: [PATCH 4/8] feat: Exclude `WG` on bsc --- .../token-config/mainnet/useTransferConfig.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/canonical-bridge-ui/token-config/mainnet/useTransferConfig.ts b/apps/canonical-bridge-ui/token-config/mainnet/useTransferConfig.ts index aab46a77..4023bc0c 100644 --- a/apps/canonical-bridge-ui/token-config/mainnet/useTransferConfig.ts +++ b/apps/canonical-bridge-ui/token-config/mainnet/useTransferConfig.ts @@ -129,11 +129,15 @@ export function useTransferConfig() { 56: [ '0x67d66e8ec1fd25d98b3ccd3b19b7dc4b4b7fc493', '0x0000000000000000000000000000000000000000', + '0x9c7beba8f6ef6643abd725e45a4e8387ef260649', ], 137: ['cUSDCv3'], 42161: ['cUSDCv3'], 43114: ['BNB'], - 7565164: ['So11111111111111111111111111111111111111112'], + 7565164: [ + 'So11111111111111111111111111111111111111112', + 'FmqVMWXBESyu4g6FT1uz1GABKdJ4j6wbuuLFwPJtqpmu', + ], }, }, bridgedTokenGroups: [ From fc7cd1c2cc5ec4b2e86cd1d200122e3dfdbf9ca7 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Fri, 13 Dec 2024 18:54:06 +0800 Subject: [PATCH 5/8] feat: Add to token address to route --- .release/.changeset/metal-scissors-repeat.md | 5 +++++ .release/.changeset/pre.json | 1 + packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../canonical-bridge-widget/src/modules/aggregator/types.ts | 1 + .../components/TransferOverview/RouteInfo/RouteTitle.tsx | 2 ++ 6 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 .release/.changeset/metal-scissors-repeat.md diff --git a/.release/.changeset/metal-scissors-repeat.md b/.release/.changeset/metal-scissors-repeat.md new file mode 100644 index 00000000..1d4f62b7 --- /dev/null +++ b/.release/.changeset/metal-scissors-repeat.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Add to token address to route diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 9a79eb9c..14678c58 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -11,6 +11,7 @@ "large-jeans-jam", "lazy-vans-applaud", "long-rivers-type", + "metal-scissors-repeat", "quiet-hotels-accept", "silent-keys-fold", "small-mangos-lay" diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 940f8ee7..0e75d0a7 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.5.14-alpha.0 + +### Patch Changes + +- Add to token address to route + ## 0.5.12-alpha.3 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index f61a141e..240ff5c0 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.5.13", + "version": "0.5.14-alpha.0", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/types.ts b/packages/canonical-bridge-widget/src/modules/aggregator/types.ts index a49742c1..9f4790ef 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/types.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/types.ts @@ -190,6 +190,7 @@ export interface IChainConfig { }; contracts?: any; chainType?: ChainType; + notSupportedWallets?: string[]; } export type ChainType = 'link' | 'evm' | 'tron' | 'solana'; diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx index f787ed0e..9aceabc9 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx @@ -123,6 +123,8 @@ export const ToTokenInfo = React.forwardRef( alignItems="center" color={theme.colors[colorMode].text.tertiary} justifyContent="flex-start" + className="bccb-widget-route-token-to-address" + data-address={toTokenInfo.address} > Date: Mon, 16 Dec 2024 09:45:40 +0800 Subject: [PATCH 6/8] feat: Support specific wallets to exclude unsupported chains --- .release/.changeset/pre.json | 3 ++- .release/.changeset/tough-carrots-report.md | 5 +++++ packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++ packages/canonical-bridge-widget/package.json | 2 +- .../aggregator/hooks/useDefaultSelectedInfo.ts | 9 +++++++-- .../src/modules/aggregator/hooks/useSelection.ts | 13 +++++++++++++ .../src/modules/aggregator/types.ts | 1 - 7 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 .release/.changeset/tough-carrots-report.md diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 14678c58..2ee7fadf 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -14,6 +14,7 @@ "metal-scissors-repeat", "quiet-hotels-accept", "silent-keys-fold", - "small-mangos-lay" + "small-mangos-lay", + "tough-carrots-report" ] } diff --git a/.release/.changeset/tough-carrots-report.md b/.release/.changeset/tough-carrots-report.md new file mode 100644 index 00000000..7fcc25d3 --- /dev/null +++ b/.release/.changeset/tough-carrots-report.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Support specific wallets to exclude unsupported chains diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 0e75d0a7..0886019f 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.5.14-alpha.1 + +### Patch Changes + +- Support specific wallets to exclude unsupported chains + ## 0.5.14-alpha.0 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 240ff5c0..fd94060c 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.5.14-alpha.0", + "version": "0.5.14-alpha.1", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, 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 87d7bd6b..d23086d6 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts @@ -6,8 +6,8 @@ import { useSelection } from '@/modules/aggregator/hooks/useSelection'; import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider'; export function useDefaultSelectedInfo() { - const { isReady, defaultSelectedInfo } = useAggregator(); - const { selectDefault } = useSelection(); + const { isReady, defaultSelectedInfo, chainConfigs } = useAggregator(); + const { selectDefault, selectFirstChain } = useSelection(); const dispatch = useAppDispatch(); const sendValue = useAppSelector((state) => state.transfer.sendValue); @@ -18,4 +18,9 @@ export function useDefaultSelectedInfo() { } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isReady]); + + useEffect(() => { + selectFirstChain(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [chainConfigs]); } 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 0041eb30..47b53301 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts @@ -199,6 +199,19 @@ export function useSelection() { tmpToken: newToken, }); }, + + // Some wallets do not support current chain, and the first supported chain is re-selected by default + async selectFirstChain() { + const fromChains = getFromChains({}); + const firstChain = fromChains?.[0]; + + if (fromChain && firstChain) { + const hasChain = fromChains.find((e) => e.id === fromChain.id); + if (!hasChain) { + selectFromChain(firstChain); + } + } + }, }; } diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/types.ts b/packages/canonical-bridge-widget/src/modules/aggregator/types.ts index 9f4790ef..a49742c1 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/types.ts +++ b/packages/canonical-bridge-widget/src/modules/aggregator/types.ts @@ -190,7 +190,6 @@ export interface IChainConfig { }; contracts?: any; chainType?: ChainType; - notSupportedWallets?: string[]; } export type ChainType = 'link' | 'evm' | 'tron' | 'solana'; From f9c82ec10370b3bc1b07fbdfbaccdd5eddfa47f6 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Mon, 16 Dec 2024 16:49:04 +0800 Subject: [PATCH 7/8] docs: Fixed an issue caused by sdk not building --- .release/.changeset/honest-adults-mate.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/honest-adults-mate.md diff --git a/.release/.changeset/honest-adults-mate.md b/.release/.changeset/honest-adults-mate.md new file mode 100644 index 00000000..5310ee66 --- /dev/null +++ b/.release/.changeset/honest-adults-mate.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Fixed an issue caused by sdk not building diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index 2ee7fadf..bfdba88d 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -8,6 +8,7 @@ "changesets": [ "happy-insects-give", "hip-news-reflect", + "honest-adults-mate", "large-jeans-jam", "lazy-vans-applaud", "long-rivers-type", diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 0886019f..87a43569 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.5.14-alpha.2 + +### Patch Changes + +- Fixed an issue caused by sdk not building + ## 0.5.14-alpha.1 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index fd94060c..38075893 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.5.14-alpha.1", + "version": "0.5.14-alpha.2", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, From c245228003850ae673667673a47055accd984d1d Mon Sep 17 00:00:00 2001 From: wenty22 Date: Mon, 16 Dec 2024 17:57:57 +0800 Subject: [PATCH 8/8] feat: Add attribute `data-address` to all routes --- .release/.changeset/cold-baboons-serve.md | 5 ++++ .release/.changeset/pre.json | 1 + .../pages/mainnet/index.tsx | 24 ++++++++++++++++++- packages/canonical-bridge-widget/CHANGELOG.md | 6 +++++ packages/canonical-bridge-widget/package.json | 2 +- .../RouteInfo/TokenInfoTooltip.tsx | 7 +++++- 6 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 .release/.changeset/cold-baboons-serve.md diff --git a/.release/.changeset/cold-baboons-serve.md b/.release/.changeset/cold-baboons-serve.md new file mode 100644 index 00000000..cd284eec --- /dev/null +++ b/.release/.changeset/cold-baboons-serve.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +Add attribute `data-address` to all routes diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json index bfdba88d..e0a5ede1 100644 --- a/.release/.changeset/pre.json +++ b/.release/.changeset/pre.json @@ -6,6 +6,7 @@ "@bnb-chain/canonical-bridge-widget": "0.5.9" }, "changesets": [ + "cold-baboons-serve", "happy-insects-give", "hip-news-reflect", "honest-adults-mate", diff --git a/apps/canonical-bridge-ui/pages/mainnet/index.tsx b/apps/canonical-bridge-ui/pages/mainnet/index.tsx index 082afcbe..b797bc5e 100644 --- a/apps/canonical-bridge-ui/pages/mainnet/index.tsx +++ b/apps/canonical-bridge-ui/pages/mainnet/index.tsx @@ -4,6 +4,8 @@ import { BridgeTransfer, BridgeRoutes, } from '@bnb-chain/canonical-bridge-widget'; +import { useMemo } from 'react'; +import { useAccount } from 'wagmi'; import { useTransferConfig } from '@/token-config/mainnet/useTransferConfig'; import { chains } from '@/token-config/mainnet/chains'; @@ -14,6 +16,13 @@ import { useWalletModal } from '@/core/wallet/hooks/useWalletModal'; import { WalletProvider } from '@/core/wallet/WalletProvider'; import { Layout } from '@/core/components/Layout'; +const unsupportedChainsInWallets = [ + { + wallets: ['BinanceW3WSDK', 'binanceWeb3Wallet'], + chains: [1101], + }, +]; + export const bridgeConfig: ICanonicalBridgeConfig = { appName: env.APP_NAME, assetPrefix: env.ASSET_PREFIX, @@ -44,11 +53,24 @@ function BridgeWidget() { const transferConfig = useTransferConfig(); const { onOpen } = useWalletModal(); + const { connector } = useAccount(); + const supportedChains = useMemo(() => { + return chains.filter((e) => { + if (connector) { + const unsupportedChains = unsupportedChainsInWallets.find((e) => + e.wallets.includes(connector.id), + )?.chains; + return !unsupportedChains?.includes(e.id); + } + return true; + }); + }, [connector]); + return ( diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 87a43569..c881d8a8 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.5.14-alpha.3 + +### Patch Changes + +- Add attribute `data-address` to all routes + ## 0.5.14-alpha.2 ### Patch Changes diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 38075893..152e0c76 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.5.14-alpha.2", + "version": "0.5.14-alpha.3", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx index 289bcacc..47b7f5fd 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx @@ -40,7 +40,12 @@ export const TokenInfoTooltip = ({ ); return ( - +