Merge pull request #107 from bnb-chain/meson/otherChains

Meson/other chains

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

@@ -47,6 +47,7 @@ export function useTransferConfig() {
             'AAVE',
             'LDO',
             'LINK',
+            'BTC',
             'BTCB',
             'WBTC',
             'sUSDe',
@@ -169,7 +170,7 @@ export function useTransferConfig() {
           config: mesonConfig.result as any,
           exclude: {
             chains: [],
-            tokens: {},
+            tokens: { 42161: ['SOL'] },
           },
           bridgedTokenGroups: [],
         },

apps/canonical-bridge-ui/token-config/testnet/meson/config.json

@@ -15,6 +15,7 @@
         },
         {
           "id": "eth",
+          "addr": "0x0000000000000000000000000000000000000000",
           "decimals": 18,
           "min": "0.001",
           "max": "2"
@@ -43,6 +44,7 @@
         },
         {
           "id": "eth",
+          "addr": "0x0000000000000000000000000000000000000000",
           "decimals": 18,
           "min": "0.001",
           "max": "2"
@@ -86,6 +88,7 @@
         },
         {
           "id": "eth",
+          "addr": "0x0000000000000000000000000000000000000000",
           "decimals": 18,
           "min": "0.001",
           "max": "2"

packages/canonical-bridge-widget/src/core/locales/en.ts

@@ -76,6 +76,9 @@ export const en = {
   'modal.submit.button.view-tx': 'View Transaction',
   'modal.submit.button.close': 'Make Another Transaction',
 
+  'modal.confirm.title': 'Waiting for Confirmation',
+  'modal.confirm.desc': 'Confirm this transaction in your wallet',
+
   'select-modal.tag.incompatible': 'Incompatible',
   'select-modal.search.no-result.title': 'No result found',
   'select-modal.search.no-result.warning':

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

@@ -70,7 +70,7 @@ export const useGetDeBridgeFees = () => {
         if (nativeTokenBalance && nativeTokenBalance?.value < totalNativeAmount) {
           dispatch(
             setRouteError({
-              deBridge: 'Could not cover deBridge Protocol Fee',
+              deBridge: `Insufficient ${nativeToken} to cover protocol fee`,
             }),
           );
           isDisplayError = true;

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

@@ -2,9 +2,10 @@ import { BridgeType } from '@bnb-chain/canonical-bridge-sdk';
 
 import { BaseAdapter, ITransferTokenPair } from '@/modules/aggregator/shared/BaseAdapter';
 import { IMesonChain, IMesonToken } from '@/modules/aggregator/adapters/meson/types';
+import { isNativeToken } from '@/core/utils/address';
 
-const SUPPORTED_CHAIN_IDS = [56, 97, 3448148188, 728126428];
-const SUPPORTED_TOKENS = ['USDT', 'USDC'];
+// const SUPPORTED_CHAIN_IDS = [56, 97, 3448148188, 728126428];
+// const SUPPORTED_TOKENS = ['USDT', 'USDC'];
 
 export class MesonAdapter extends BaseAdapter<IMesonChain[], IMesonChain, IMesonToken> {
   public bridgeType: BridgeType = 'meson';
@@ -17,8 +18,8 @@ export class MesonAdapter extends BaseAdapter<IMesonChain[], IMesonChain, IMeson
       const isExcludedChain = this.excludedChains.includes(Number(chain.chainId));
       const hasToken = chain.tokens?.length > 0;
 
-      const isSupported = SUPPORTED_CHAIN_IDS.includes(Number(chain.chainId)); // TODO
-      return hasChainConfig && !isExcludedChain && hasToken && isSupported;
+      // const isSupported = SUPPORTED_CHAIN_IDS.includes(Number(chain.chainId)); // TODO
+      return hasChainConfig && !isExcludedChain && hasToken;
     });
 
     const chainMap = new Map<number, IMesonChain>();
@@ -45,8 +46,8 @@ export class MesonAdapter extends BaseAdapter<IMesonChain[], IMesonChain, IMeson
           tokenSymbol: token?.id?.toUpperCase(),
           tokenAddress: token.addr,
         });
-        const isSupported = SUPPORTED_TOKENS.includes(token.id?.toUpperCase()); // TODO
-        return !isExcludedToken && isSupported;
+        // native token transfer requires smart contract deployment. Ignore it for now.
+        return !isExcludedToken && !isNativeToken(token.addr);
       });
 
       if (filteredTokens.length > 0 && this.chainMap.has(chainId)) {

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

@@ -11,7 +11,7 @@ import { useTronWeb } from '@/core/hooks/useTronWeb';
 import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider';
 
 export function TokenBalancesProvider() {
-  const { address } = useCurrentWallet();
+  const { address, walletType } = useCurrentWallet();
   const chains = useChains();
   const tronWeb = useTronWeb();
 
@@ -30,6 +30,7 @@ export function TokenBalancesProvider() {
     queryKey: ['tokenBalances', address, fromChain?.id, toChain?.id],
     queryFn: async () => {
       const balances = await getTokenBalances({
+        walletType,
         chainType: fromChain?.chainType,
         account: address,
         tokens,

packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts

@@ -204,7 +204,7 @@ function useSortedTokens() {
   const { transferConfig } = useAggregator();
   const chains = useChains();
 
-  const { address } = useCurrentWallet();
+  const { address, walletType } = useCurrentWallet();
   const { getTokenPrice } = useTokenPrice();
   const tronWeb = useTronWeb();
 
@@ -219,6 +219,7 @@ function useSortedTokens() {
       tokens: IBridgeToken[];
     }) => {
       const balances = await getTokenBalances({
+        walletType,
         chainType,
         account: address,
         tokens,
@@ -247,7 +248,7 @@ function useSortedTokens() {
         orders: transferConfig.order?.tokens,
       });
     },
-    [address, chains, tronWeb, transferConfig.order?.tokens, getTokenPrice],
+    [walletType, address, chains, tronWeb, transferConfig.order?.tokens, getTokenPrice],
   );
 
   return {

packages/canonical-bridge-widget/src/modules/aggregator/shared/getTokenBalances.ts

@@ -1,34 +1,42 @@
 import { Address, Chain, createPublicClient, formatUnits, http } from 'viem';
 import { TronWeb } from 'tronweb';
+import axios from 'axios';
 
 import { ChainType, IBridgeToken } from '@/modules/aggregator/types';
 import { ERC20_TOKEN } from '@/core/contract/abi';
 import { isChainOrTokenCompatible } from '@/modules/aggregator/shared/isChainOrTokenCompatible';
+import { isSameAddress } from '@/core/utils/address';
 
 export async function getTokenBalances({
+  walletType,
   chainType,
   account,
   tokens,
   chain,
   tronWeb,
 }: {
+  walletType?: ChainType;
   chainType?: ChainType;
   account?: string;
   tokens?: IBridgeToken[];
   chain?: Chain;
   tronWeb?: TronWeb;
 }) {
+  if (walletType !== chainType) return {};
+
+  const compatibleTokens = tokens?.filter((item) => isChainOrTokenCompatible(item));
+
   if (chainType === 'tron') {
     return await getTronTokenBalances({
       account,
-      tokens,
+      tokens: compatibleTokens,
       tronWeb,
     });
   }
   return await getEvmTokenBalances({
     account,
     chain,
-    tokens,
+    tokens: compatibleTokens,
   });
 }
 
@@ -51,8 +59,7 @@ async function getEvmTokenBalances({
       transport: http(),
     });
 
-    const compatibleTokens = tokens.filter((item) => isChainOrTokenCompatible(item));
-    const contracts = compatibleTokens.map((item) => ({
+    const contracts = tokens.map((item) => ({
       abi: ERC20_TOKEN,
       address: item.address as Address,
       functionName: 'balanceOf',
@@ -74,7 +81,7 @@ async function getEvmTokenBalances({
       const values = erc20TokensRes.value?.map((item) => item.result) ?? [];
 
       values.map((value, index) => {
-        const token = compatibleTokens[index];
+        const token = tokens[index];
 
         const symbol = token.displaySymbol?.toUpperCase();
         balances[symbol] =
@@ -95,17 +102,11 @@ async function getEvmTokenBalances({
   }
 }
 
-const tronBalanceABI = [
-  {
-    constant: true,
-    inputs: [{ internalType: 'address', name: '', type: 'address' }],
-    name: 'balanceOf',
-    outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
-    payable: false,
-    stateMutability: 'view',
-    type: 'function',
-  },
-];
+interface ITronAccountToken {
+  balance: string;
+  tokenId: string;
+  tokenAbbr: string;
+}
 
 async function getTronTokenBalances({
   account,
@@ -120,20 +121,42 @@ async function getTronTokenBalances({
     if (!account || !tokens?.length || !tronWeb) {
       return {};
     }
-
     const balances: Record<string, string | undefined> = {};
 
-    for (let i = 0; i < Math.min(tokens.length, 2); i++) {
-      const token = tokens?.[i];
-      const tokenAddress = token.address;
+    const isTestnet = tronWeb.fullNode.host.includes('nile');
+    const endpoint = isTestnet
+      ? 'https://nileapi.tronscan.org/api'
+      : 'https://apilist.tronscan.org/api';
+
+    const res = await axios<{ data: ITronAccountToken[] }>({
+      url: `${endpoint}/account/tokens`,
+      params: {
+        address: account,
+        start: 0,
+        limit: 50,
+      },
+    });
 
-      tronWeb.setAddress(token.address);
-      const contractInstance = await tronWeb.contract(tronBalanceABI, tokenAddress);
-      const balanceOf = await contractInstance.balanceOf(account).call();
-      const balance = balanceOf?.toString() as string;
+    const tokenInfos = res.data?.data ?? [];
+    tokenInfos.forEach((tokenInfo) => {
+      const token = tokens.find(
+        (t) =>
+          isSameAddress(t.address, tokenInfo.tokenId) ||
+          (t.displaySymbol.toUpperCase() === 'TRX' && tokenInfo.tokenId === '_'),
+      );
+
+      if (token) {
+        balances[token.displaySymbol.toUpperCase()] = formatUnits(
+          BigInt(tokenInfo.balance),
+          token.decimals,
+        );
+      }
+    });
 
-      balances[token.displaySymbol?.toUpperCase()] = formatUnits(BigInt(balance), token.decimals);
-    }
+    tokens.forEach((t) => {
+      const key = t.displaySymbol.toUpperCase();
+      balances[key] = balances[key] ?? '0';
+    });
 
     return balances;
   } catch (err) {

packages/canonical-bridge-widget/src/modules/aggregator/shared/sortTokens.ts

@@ -17,6 +17,23 @@ export function sortTokens({
     const isA = isChainOrTokenCompatible(a);
     const isB = isChainOrTokenCompatible(b);
 
+    const indexA = tokenOrders.indexOf(aSymbol);
+    const indexB = tokenOrders.indexOf(bSymbol);
+
+    const sortWithPredefinedOrders = () => {
+      if (indexA > -1 && indexB === -1) {
+        return -1;
+      }
+      if (indexA === -1 && indexB > -1) {
+        return 1;
+      }
+      if (indexA > -1 && indexB > -1) {
+        return indexA - indexB;
+      }
+
+      return aSymbol < bSymbol ? -1 : 1;
+    };
+
     if (isA && !isB) {
       return -1;
     }
@@ -34,22 +51,19 @@ export function sortTokens({
       if (!a.value && b.value) {
         return 1;
       }
-    }
 
-    const indexA = tokenOrders.indexOf(aSymbol);
-    const indexB = tokenOrders.indexOf(bSymbol);
-
-    if (indexA > -1 && indexB === -1) {
-      return -1;
-    }
-    if (indexA === -1 && indexB > -1) {
-      return 1;
-    }
-    if (indexA > -1 && indexB > -1) {
-      return indexA - indexB;
+      if (a.balance && b.balance) {
+        return sortWithPredefinedOrders();
+      }
+      if (a.balance && !b.balance) {
+        return -1;
+      }
+      if (!a.balance && b.balance) {
+        return 1;
+      }
     }
 
-    return a.displaySymbol < b.displaySymbol ? -1 : 1;
+    return sortWithPredefinedOrders();
   });
 
   return sortedTokens;

packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionConfirmingModal/index.tsx

@@ -1,13 +1,17 @@
+import { useIntl } from '@bnb-chain/space';
+
 import { StateModal, StateModalProps } from '@/core/components/StateModal';
 
 export function TransactionConfirmingModal(props: Omit<StateModalProps, 'title'>) {
   const { ...restProps } = props;
 
+  const { formatMessage } = useIntl();
+
   return (
     <StateModal
       type="confirming"
-      title="Waiting For Confirmation"
-      description={'Confirm this transaction in your wallet'}
+      title={formatMessage({ id: 'modal.confirm.title' })}
+      description={formatMessage({ id: 'modal.confirm.desc' })}
       closeButton={<></>}
       bodyProps={{
         pb: 0,

packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx

@@ -20,9 +20,9 @@ export function RoutesModal(props: RoutesModalProps) {
       <ModalContent
         background={theme.colors[colorMode].background.modal}
         p={0}
-        h={['auto', 'auto', '665px']}
+        h={['100vh', '100vh', '665px']}
         w={['100%', '100%', '558px']}
-        overflow="hidden"
+        overflow={['auto', 'auto', 'auto', 'hidden']}
         margin={0}
       >
         <Flex

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

@@ -164,6 +164,7 @@ export const useLoadingBridgeFees = () => {
       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(