feat: Support solana

.release/.changeset/honest-jeans-greet.md

@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+UI adjustment

.release/.changeset/mean-falcons-yell.md

@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+UI adjustment

.release/.changeset/pre.json

@@ -0,0 +1,13 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "@bnb-chain/canonical-bridge-sdk": "0.3.3",
+    "@bnb-chain/canonical-bridge-widget": "0.4.0"
+  },
+  "changesets": [
+    "honest-jeans-greet",
+    "mean-falcons-yell",
+    "tasty-gifts-brush"
+  ]
+}

.release/.changeset/tasty-gifts-brush.md

@@ -0,0 +1,6 @@
+---
+"@bnb-chain/canonical-bridge-widget": minor
+"@bnb-chain/canonical-bridge-sdk": minor
+---
+
+Support solana

.vscode/settings.json

@@ -53,6 +53,7 @@
     "onflow",
     "protobuf",
     "reduxjs",
+    "Solana",
     "stargate",
     "tanstack",
     "unauthenticate",

apps/canonical-bridge-ui/token-config/mainnet/chains.ts

@@ -1142,4 +1142,20 @@ export const chains: IChainConfig[] = [
     },
     chainType: 'tron',
   },
+  {
+    id: 7565164,
+    name: 'Solana',
+    nativeCurrency: {
+      name: 'SOL',
+      symbol: 'SOL',
+      decimals: 9,
+    },
+    rpcUrl: 'https://solana-rpc.debridge.finance',
+    explorer: {
+      name: 'Solana explorer',
+      url: 'https://explorer.solana.com',
+      tokenUrlPattern: 'https://explorer.solana.com/address/{0}',
+    },
+    chainType: 'solana',
+  },
 ];

packages/canonical-bridge-sdk/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bnb-chain/canonical-bridge-sdk
 
+## 0.4.0-alpha.0
+
+### Minor Changes
+
+- Support solana
+
 ## 0.3.3
 
 ### Patch Changes

packages/canonical-bridge-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-sdk",
-  "version": "0.3.3",
+  "version": "0.4.0-alpha.0",
   "description": "canonical bridge sdk",
   "author": "bnb-chain",
   "private": false,

packages/canonical-bridge-sdk/src/debridge/index.ts

@@ -75,6 +75,7 @@ export class DeBridge {
     toChainId,
     toTokenAddress,
     userAddress,
+    toUserAddress,
     affiliateFeePercent = 0,
     accesstoken = '',
     prependOperatingExpenses = false,
@@ -88,10 +89,11 @@ export class DeBridge {
         dstChainTokenOut: toTokenAddress,
         prependOperatingExpenses,
         affiliateFeePercent,
-        dstChainTokenOutRecipient: userAddress,
-        dstChainOrderAuthorityAddress: userAddress,
+        dstChainTokenOutRecipient: toUserAddress || userAddress,
+        dstChainOrderAuthorityAddress: toUserAddress || userAddress,
         srcChainOrderAuthorityAddress: userAddress,
       } as any;
+
       if (accesstoken) {
         deBridgeParams.accesstoken = accesstoken;
       }

packages/canonical-bridge-sdk/src/debridge/types/index.ts

@@ -80,7 +80,8 @@ export interface IDeBridgeEstimatedFeesInput {
   amount: bigint;
   toChainId: number;
   toTokenAddress: `0x${string}`;
-  userAddress: `0x${string}`;
+  userAddress: string;
+  toUserAddress?: string;
   affiliateFeePercent?: number;
   prependOperatingExpenses?: boolean;
   accesstoken?: string;

packages/canonical-bridge-widget/CHANGELOG.md

@@ -1,10 +1,22 @@
 # @bnb-chain/canonical-bridge-widget
 
-## 0.4.1
+## 0.5.0-alpha.2
 
 ### Patch Changes
 
-- 1341167: Add class name into components
+- UI adjustment
+
+## 0.5.0-alpha.1
+
+### Patch Changes
+
+- UI adjustment
+
+## 0.5.0-alpha.0
+
+### Minor Changes
+
+- Support solana
 
 ## 0.4.0
 

packages/canonical-bridge-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-widget",
-  "version": "0.4.1",
+  "version": "0.5.0-alpha.2",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,
@@ -45,7 +45,7 @@
     "@bnb-chain/space": "workspace:*",
     "@emotion/react": "~11.13.0",
     "@emotion/styled": "~11.13.0",
-    "@node-real/walletkit": "2.4.0-alpha.10",
+    "@node-real/walletkit": "2.4.1-alpha.2",
     "@tanstack/react-query": "~5.50.1",
     "@types/lodash": "~4.17.7",
     "@types/node": "^20",
@@ -75,6 +75,9 @@
     "wagmi": "~2.12.14"
   },
   "dependencies": {
+    "@solana/spl-token": "~0.4.9",
+    "@solana/wallet-adapter-react": "~0.15.35",
+    "@solana/web3.js": "~1.95.4",
     "tronweb": "~6.0.0"
   },
   "lint-staged": {

packages/canonical-bridge-widget/src/core/constants/index.ts

@@ -13,6 +13,7 @@ export const STARGATE_QUEUE_URL = 'https://mainnet.stargate-api.com/v1/buses/bus
 
 export const DEFAULT_ADDRESS = '0x6836CbaCbBd1E798cC56802AC7d8BDf6Da0d0980';
 export const DEFAULT_TRON_ADDRESS = 'TTb3A6ASFejJuGcM1UVcRCJA23WGiJKSiY';
+export const DEFAULT_SOLANA_ADDRESS = 'J7JYXS8PMMBgfFKP1bqUu7mGgWyWUDL9xqfYujznc61r';
 
 export const nativeTokenMap = {
   1: 'ETH',
@@ -37,3 +38,5 @@ export const TIME = {
 };
 
 export const MIN_FEE = 0.0001;
+
+export const REFETCH_INTERVAL = 8 * 1000;

packages/canonical-bridge-widget/src/modules/aggregator/adapters/deBridge/hooks/useGetDeBridgeFees.ts

@@ -6,14 +6,15 @@ import { useIntl } from '@bnb-chain/space';
 
 import { formatNumber } from '@/core/utils/number';
 import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider';
-import { useGetNativeToken } from '@/modules/transfer/hooks/useGetNativeToken';
 import { DeBridgeAdapter } from '@/modules/aggregator/adapters/deBridge/DeBridgeAdapter';
 import { formatFeeAmount } from '@/core/utils/string';
 import { useAdapter } from '@/modules/aggregator/hooks/useAdapter';
 import { setRouteError, setRouteFees } from '@/modules/transfer/action';
 import { useToTokenInfo } from '@/modules/transfer/hooks/useToTokenInfo';
 import { useGetTokenBalance } from '@/core/contract/hooks/useGetTokenBalance';
 import { ERC20_TOKEN } from '@/core/contract/abi';
+import { useNativeCurrency } from '@/modules/aggregator/hooks/useNativeCurrency';
+import { useSolanaBalance } from '@/modules/wallet/hooks/useSolanaBalance';
 
 export interface IFeeDetails {
   value: string;
@@ -23,16 +24,15 @@ export interface IFeeDetails {
 export const useGetDeBridgeFees = () => {
   const dispatch = useAppDispatch();
   const deBridgeAdapter = useAdapter<DeBridgeAdapter>('deBridge');
-  const nativeToken = useGetNativeToken();
-  const { address, chain } = useAccount();
   const { formatMessage } = useIntl();
 
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
   const selectedToken = useAppSelector((state) => state.transfer.selectedToken);
   const sendValue = useAppSelector((state) => state.transfer.sendValue);
   const toChain = useAppSelector((state) => state.transfer.toChain);
 
-  const { data: nativeTokenBalance } = useBalance({
+  const { address, chain } = useAccount();
+  const { data: nativeEvmBalance } = useBalance({
     address: address as `0x${string}`,
     chainId: fromChain?.id,
   });
@@ -42,18 +42,28 @@ export const useGetDeBridgeFees = () => {
     tokenAddress: selectedToken?.address as `0x${string}`,
   });
 
+  const nativeCurrency = useNativeCurrency(fromChain?.id);
+  const { data: nativeSolanaBalance } = useSolanaBalance();
+
+  const nativeTokenBalance =
+    fromChain?.chainType === 'solana' ? nativeSolanaBalance : nativeEvmBalance;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const publicClient = usePublicClient({ chainId: fromChain?.id }) as any;
 
   const deBridgeFeeSorting = useCallback(
     async (fees: DeBridgeCreateQuoteResponse) => {
+      const nativeToken = nativeCurrency?.symbol;
+      const nativeDecimals = nativeCurrency?.decimals ?? 18;
+
       const feeList: IFeeDetails[] = [];
       const feeBreakdown = [];
       let isFailedToGetGas = false;
       let isDisplayError = false;
+
       // protocol fee
       if (fees?.fixFee && nativeToken) {
-        const protocolFee = formatUnits(BigInt(fees?.fixFee), 18);
+        const protocolFee = formatUnits(BigInt(fees?.fixFee), nativeDecimals);
         feeList.push({
           symbol: nativeToken,
           value: protocolFee,
@@ -140,7 +150,13 @@ export const useGetDeBridgeFees = () => {
       const decimals = selectedToken?.deBridge?.raw?.decimals ?? (18 as number);
       const amount = parseUnits(sendValue, decimals);
       try {
-        if (chain && fromChain?.id === chain?.id && address && selectedToken?.address) {
+        if (
+          chain &&
+          fromChain?.id === chain?.id &&
+          address &&
+          selectedToken?.address &&
+          fromChain.chainType !== 'solana'
+        ) {
           let allowance = null;
           if (selectedToken?.address !== '0x0000000000000000000000000000000000000000') {
             allowance = await publicClient.readContract({
@@ -226,20 +242,23 @@ export const useGetDeBridgeFees = () => {
       };
     },
     [
-      nativeToken,
-      deBridgeAdapter,
-      formatMessage,
+      nativeCurrency?.symbol,
+      nativeCurrency?.decimals,
+      selectedToken?.deBridge?.raw?.decimals,
+      selectedToken?.deBridge?.raw?.address,
+      selectedToken?.address,
+      sendValue,
       dispatch,
-      address,
-      publicClient,
-      balance,
+      formatMessage,
       nativeTokenBalance,
+      deBridgeAdapter,
       chain,
-      sendValue,
       fromChain,
-      selectedToken,
+      address,
       toChain,
       toTokenInfo,
+      balance,
+      publicClient,
     ],
   );
 

packages/canonical-bridge-widget/src/modules/aggregator/adapters/meson/hooks/useTronContract.ts

@@ -4,14 +4,17 @@ import { useCallback } from 'react';
 
 import { useAppSelector } from '@/modules/store/StoreProvider';
 import { useTronWeb } from '@/core/hooks/useTronWeb';
+import { useTronTransferInfo } from '@/modules/transfer/hooks/tron/useTronTransferInfo';
 
 export const useTronContract = () => {
   const tronWeb = useTronWeb();
   const [isTronContract, setIsTronContract] = useState<null | boolean>(null);
   const toAccount = useAppSelector((state) => state.transfer.toAccount);
 
+  const { isTronTransfer } = useTronTransferInfo();
+
   const isTronContractInfo = useCallback(async () => {
-    if (!tronWeb || !toAccount?.address) return;
+    if (!tronWeb || !toAccount?.address || !isTronTransfer) return;
     try {
       const contractInfo = await tronWeb.trx.getContract(toAccount?.address);
       setIsTronContract(!!contractInfo?.bytecode);
@@ -21,7 +24,7 @@ export const useTronContract = () => {
       setIsTronContract(false);
       return false;
     }
-  }, [toAccount, tronWeb]);
+  }, [toAccount, tronWeb, isTronTransfer]);
 
   useEffect(() => {
     let mount = true;

packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx

@@ -65,21 +65,23 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
       placeholder={formatMessage({ id: 'select-modal.token.placeholder' })}
       isNoResult={isNoResult}
     >
-      <Flex
-        className="bccb-widget-token-modal-list-header"
-        fontSize={'14px'}
-        fontWeight={400}
-        lineHeight="16px"
-        color={theme.colors[colorMode].text.secondary}
-        pb={'12px'}
-        px={'20px'}
-        justifyContent="space-between"
-      >
-        <Text>{formatMessage({ id: 'select-modal.token.column.name' })}</Text>
-        {showBalance && <Text>{formatMessage({ id: 'select-modal.token.column.balance' })}</Text>}
-      </Flex>
+      {isConnected && (
+        <Flex
+          className="bccb-widget-token-modal-list-header"
+          fontSize={'14px'}
+          fontWeight={400}
+          lineHeight="16px"
+          color={theme.colors[colorMode].text.secondary}
+          pb={'12px'}
+          px={'20px'}
+          justifyContent="space-between"
+        >
+          <Text>{formatMessage({ id: 'select-modal.token.column.name' })}</Text>
+          {showBalance && <Text>{formatMessage({ id: 'select-modal.token.column.balance' })}</Text>}
+        </Flex>
+      )}
       <Flex flexDir="column" flex={1}>
-        <VirtualList className="bccb-widget-token-virtual-list" data={data} itemHeight={64}>
+        <VirtualList className="bccb-widget-token-virtual-list" data={data} itemHeight={52}>
           {(item) => {
             const isDisabled = !isChainOrTokenCompatible(item);
             const isActive =
@@ -114,7 +116,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                 }}
               >
                 <Flex alignItems="center" justifyContent="space-between" w="100%" gap={'12px'}>
-                  <Flex flex={1} minW={0} flexDir="column" gap={'4px'}>
+                  <Flex flex={1} minW={0} flexDir="column" gap={'0'}>
                     <Text className="bccb-widget-token-list-symbol" isTruncated>
                       {item.displaySymbol}
                     </Text>

packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx

@@ -50,7 +50,7 @@ export function DestinationNetworkModal(props: DestinationNetworkModalProps) {
       placeholder={formatMessage({ id: 'select-modal.destination.placeholder' })}
       isNoResult={isNoResult}
     >
-      <VirtualList className="bccb-widget-to-network-virtual-list" data={result} itemHeight={64}>
+      <VirtualList className="bccb-widget-to-network-virtual-list" data={result} itemHeight={52}>
         {(item) => (
           <ListItem
             className={

packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx

@@ -51,7 +51,7 @@ export function SourceNetworkModal(props: SourceNetworkModalProps) {
       placeholder={formatMessage({ id: 'select-modal.source.placeholder' })}
       isNoResult={isNoResult}
     >
-      <VirtualList className="bccb-widget-from-network-virtual-list" data={result} itemHeight={64}>
+      <VirtualList className="bccb-widget-from-network-virtual-list" data={result} itemHeight={52}>
         {(item) => (
           <ListItem
             className={

packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx

@@ -71,7 +71,7 @@ export function BaseModal(props: BaseModalProps) {
           />
         </Flex>
         <Flex flexDir="column" p="20px 0px 16px" flex={1}>
-          <Flex px={'20px'} mb={'24px'}>
+          <Flex px={'20px'} mb={'20px'}>
             <SearchInput
               className={`${className}-search`}
               onChange={onSearch}