Merge pull request #134 from bnb-chain/wenty/solana

feat: Support solana

.release/.changeset/tough-toes-relax.md

@@ -0,0 +1,6 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+"@bnb-chain/canonical-bridge-sdk": patch
+---
+
+Solana requires wallet have at least 0.05SOL to enabled a tx.

packages/canonical-bridge-sdk/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bnb-chain/canonical-bridge-sdk
 
+## 0.4.0-alpha.2
+
+### Patch Changes
+
+- Solana requires wallet have at least 0.05SOL to enabled a tx.
+
+## 0.4.0-alpha.1
+
+### Patch Changes
+
+- Fix phantom wallet deelink issue on mobile
+
 ## 0.4.0
 
 ### Minor Changes

packages/canonical-bridge-widget/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.5.0-alpha.4
+
+### Patch Changes
+
+- Solana requires wallet have at least 0.05SOL to enabled a tx.
+
+## 0.5.0-alpha.3
+
+### Patch Changes
+
+- Fix phantom wallet deelink issue on mobile
+
 ## 0.5.0
 
 ### Minor Changes
@@ -9,7 +21,6 @@
 ### Patch Changes
 
 - e31ab8f: UI adjustment
-- 6ab36a6: UI adjustment
 
 ## 0.5.0-alpha.2
 

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

@@ -40,3 +40,5 @@ export const TIME = {
 export const MIN_FEE = 0.0001;
 
 export const REFETCH_INTERVAL = 8 * 1000;
+
+export const MIN_SOL_TO_ENABLED_TX = 0.05;

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

@@ -1,4 +1,5 @@
 import { truncateHash } from '@/core/utils/string';
+import { ChainType } from '@/modules/aggregator';
 
 export function formatAppAddress(params: {
   address?: string;
@@ -49,7 +50,11 @@ export function isEvmAddress(address?: string) {
   return !!address && /^0x[a-f0-9]{40}$/i.test(address);
 }
 
-export function isNativeToken(tokenAddress: string) {
+export function isNativeToken(tokenAddress: string, chainType: ChainType = 'evm') {
+  if (chainType === 'solana') {
+    return tokenAddress === '11111111111111111111111111111111';
+  }
+
   return tokenAddress === '0x0000000000000000000000000000000000000000';
 }
 

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

@@ -86,7 +86,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
             const isDisabled = !isChainOrTokenCompatible(item);
             const isActive =
               isSameAddress(item.address, selectedToken?.address) && isChainOrTokenCompatible(item);
-            const isNative = isNativeToken(item.address);
+            const isNative = isNativeToken(item.address, fromChain?.chainType);
 
             return (
               <ListItem

packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx

@@ -41,7 +41,11 @@ export function TokenSelectButton(props: SelectButtonProps) {
       {...restProps}
     >
       <Flex gap={'8px'} alignItems={'center'} position={'relative'} overflow="hidden">
-        <TokenInfoTooltip tokenAddress={token?.address ?? ''} tokenLinkUrl={tokenUrl}>
+        <TokenInfoTooltip
+          chainType={fromChain?.chainType}
+          tokenAddress={token?.address ?? ''}
+          tokenLinkUrl={tokenUrl}
+        >
           <Box>
             <IconImage
               src={token?.icon}

packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx

@@ -41,6 +41,7 @@ export const RouteTitle = ({ receiveAmt, toTokenInfo, isError }: RouteTitleProps
       </Flex>
       {toTokenInfo && (
         <TokenInfoTooltip
+          chainType={toChain?.chainType}
           tokenAddress={toTokenInfo.address}
           tokenLinkUrl={tokenUrl}
           isReceiveArea={true}

packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx

@@ -14,22 +14,28 @@ import {
 import { useMemo } from 'react';
 
 import { isNativeToken } from '@/core/utils/address.ts';
+import { ChainType } from '@/modules/aggregator';
 
 interface TokenTooltipProps {
   tokenLinkUrl: string;
   tokenAddress: string;
   children: React.ReactNode;
   isReceiveArea?: boolean;
+  chainType?: ChainType;
 }
 
 export const TokenInfoTooltip = ({
   children,
   tokenAddress,
   tokenLinkUrl,
   isReceiveArea,
+  chainType = 'evm',
 }: TokenTooltipProps) => {
   const theme = useTheme();
-  const nativeToken = useMemo(() => isNativeToken(tokenAddress), [tokenAddress]);
+  const nativeToken = useMemo(
+    () => isNativeToken(tokenAddress, chainType),
+    [chainType, tokenAddress],
+  );
 
   return (
     <Flex className="bccb-widget-route-token-tooltip" display={'inline-block'} w={'auto'}>

packages/canonical-bridge-widget/src/modules/transfer/hooks/useInputValidation.ts

@@ -5,10 +5,15 @@ import { useCallback } from 'react';
 import { formatNumber } from '@/core/utils/number';
 import { useAppSelector } from '@/modules/store/StoreProvider';
 import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider';
+import { useSolanaBalance } from '@/modules/wallet/hooks/useSolanaBalance';
+import { MIN_SOL_TO_ENABLED_TX } from '@/core/constants';
 
 export const useInputValidation = () => {
   const { chain } = useCurrentWallet();
 
+  const { data } = useSolanaBalance();
+  const solBalance = Number(data?.formatted);
+
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
   const validateInput = useCallback(
     ({
@@ -49,7 +54,14 @@ export const useInputValidation = () => {
         }
 
         if (!!balance) {
-          return { text: `${formatNumber(balance)}`, isError: false };
+          if (fromChain?.chainType === 'solana' && solBalance < MIN_SOL_TO_ENABLED_TX) {
+            return {
+              text: `You should have at least ${MIN_SOL_TO_ENABLED_TX} SOL in your balance to perform this trade.`,
+              isError: true,
+            };
+          } else {
+            return { text: `${formatNumber(balance)}`, isError: false };
+          }
         } else {
           if (fromChain?.id === chain?.id && chain) {
             return { isError: true, text: 'You have insufficient balance' };
@@ -60,7 +72,7 @@ export const useInputValidation = () => {
         console.log(e);
       }
     },
-    [chain, fromChain?.id],
+    [chain, fromChain?.chainType, fromChain?.id, solBalance],
   );
 
   return {

packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx

@@ -18,7 +18,6 @@ import * as allChains from 'viem/chains';
 import { defaultTronConfig, tronLink } from '@node-real/walletkit/tron';
 import {
   defaultSolanaConfig,
-  trustWallet as solanaTrustWallet,
   phantomWallet as solanaPhantomWallet,
 } from '@node-real/walletkit/solana';
 import React from 'react';
@@ -53,7 +52,7 @@ export function WalletProvider(props: WalletProviderProps) {
       walletConnect(),
     ];
     const tronWallets = [tronLink()];
-    const solanaWallets = [solanaTrustWallet(), solanaPhantomWallet()];
+    const solanaWallets = [solanaPhantomWallet()];
 
     const tron = chainConfigs.find((e) => e.chainType === 'tron');
     const solana = chainConfigs.find((e) => e.chainType === 'solana');

packages/canonical-bridge-widget/src/modules/wallet/hooks/useSolanaAccount.ts

@@ -11,6 +11,6 @@ export function useSolanaAccount() {
   return {
     address: publicKey?.toBase58(),
     isConnected: connected,
-    chainId: solana?.id,
+    chainId: connected ? solana?.id : undefined,
   };
 }