fix: Solve the cost calculation problem of solana

.release/.changeset/poor-news-hear.md

@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Add address info to token list element

.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.5"
+  },
+  "changesets": [
+    "poor-news-hear"
+  ]
+}

apps/canonical-bridge-ui/package.json

@@ -15,7 +15,7 @@
     "@emotion/css": "~11.13.0",
     "@emotion/react": "~11.13.3",
     "@emotion/styled": "~11.13.0",
-    "@node-real/walletkit": "2.4.1-alpha.8",
+    "@node-real/walletkit": "2.6.1-alpha.0",
     "@solana/spl-token": "~0.4.9",
     "@solana/wallet-adapter-react": "~0.15.35",
     "@solana/web3.js": "~1.95.4",

packages/canonical-bridge-widget/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.5.6-alpha.0
+
+### Patch Changes
+
+- Add address info to token list element
+
 ## 0.5.5
 
 ### Patch Changes

packages/canonical-bridge-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-widget",
-  "version": "0.5.5",
+  "version": "0.5.6-alpha.0",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

packages/canonical-bridge-widget/src/core/utils/address.ts

@@ -50,7 +50,7 @@ export function isEvmAddress(address?: string) {
   return !!address && /^0x[a-f0-9]{40}$/i.test(address);
 }
 
-export function isNativeToken(tokenAddress: string, chainType: ChainType = 'evm') {
+export function isNativeToken(tokenAddress?: string, chainType: ChainType = 'evm') {
   if (chainType === 'solana') {
     return tokenAddress === '11111111111111111111111111111111';
   }

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

@@ -15,6 +15,7 @@ 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';
+import { isNativeToken } from '@/core/utils/address';
 
 export interface IFeeDetails {
   value: string;
@@ -213,13 +214,34 @@ export const useGetDeBridgeFees = () => {
         dispatch(setRouteError({ deBridge: 'Failed to get gas fee' }));
         isFailedToGetGas = true;
       }
+
       const result = feeList.reduce((acc: { [key: string]: number }, item) => {
         const symbol = item.symbol;
         const value = Number(item.value);
         if (symbol && !acc[symbol]) acc[symbol] = 0;
         acc[symbol] += value;
         return acc;
       }, {} as { [key: string]: number });
+
+      if (
+        fromChain?.chainType === 'solana' &&
+        isNativeToken(selectedToken?.deBridge?.raw?.address, fromChain?.chainType) &&
+        nativeToken &&
+        nativeTokenBalance
+      ) {
+        const totalNativeTokenCost = Number(result[nativeToken]) + Number(sendValue);
+        const userNativeTokenBalance = Number(nativeTokenBalance.formatted);
+
+        if (userNativeTokenBalance < totalNativeTokenCost) {
+          dispatch(
+            setRouteError({
+              deBridge: `Insufficient ${nativeToken} to cover protocol fee and market maker gas costs`,
+            }),
+          );
+          isDisplayError = true;
+        }
+      }
+
       const resultString = Object.keys(result)
         .map((symbol) => {
           return `${formatFeeAmount(result[symbol])} ${symbol}`;
@@ -234,6 +256,7 @@ export const useGetDeBridgeFees = () => {
           },
         }),
       );
+
       return {
         summary: resultString ? resultString : '--',
         breakdown: feeBreakdown,

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

@@ -116,6 +116,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                     transform: 'translateY(-100%)',
                   },
                 }}
+                data-address={item.address?.toLowerCase()}
                 onClick={() => {
                   reportEvent({
                     id: 'select_bridge_tokenDropdown',