Feat/sol bridge

.env.example

@@ -6,4 +6,8 @@ VITE_APP_BASE_API_URL=https://api.oraidex.io
 
 VITE_APP_KADO_API_KEY=df0d2b3f-d829-4453-a4f6-1d6e8870e8f4
 VITE_APP_MIX_PANEL_ENVIRONMENT=acbafd21a85654933cbb0332c5a6f4f8
-VITE_APP_STRAPI_BASE_URL=https://nice-fireworks-d26703b63e.strapiapp.com
+VITE_APP_STRAPI_BASE_URL=https://nice-fireworks-d26703b63e.strapiapp.com
+
+VITE_APP_SOLANA_RPC=
+VITE_APP_SOLANA_WEBSOCKET=
+VITE_APP_SOLANA_RELAYER_ADDRESS=

package.json

@@ -8,6 +8,7 @@
   "type": "module",
   "dependencies": {
     "@babel/plugin-proposal-import-wasm-source": "^7.24.7",
+    "@coral-xyz/anchor": "^0.30.1",
     "@cosmjs/cosmwasm-stargate": "^0.32.4",
     "@cosmjs/proto-signing": "^0.32.4",
     "@cosmjs/stargate": "^0.32.4",
@@ -29,15 +30,21 @@
     "@react-spring/web": "^9.7.5",
     "@reduxjs/toolkit": "^1.9.3",
     "@sentry/react": "7.99.0",
+    "@solana/spl-token": "^0.4.9",
+    "@solana/wallet-adapter-base": "^0.9.23",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-react-ui": "^0.9.35",
+    "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@solana/web3.js": "^1.95.5",
     "@tanstack/react-query": "^4.32.6",
     "@tharsis/proto": "^0.1.17",
     "@tippyjs/react": "^4.2.0",
-    "@vitejs/plugin-react": "^4.3.1",
     "@visx/curve": "^2.17.0",
     "@visx/gradient": "^3.3.0",
     "@visx/responsive": "^2.17.0",
     "@visx/scale": "^2.18.0",
     "@visx/xychart": "^3.11.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "@walletconnect/browser-utils": "^1.8.0",
     "@walletconnect/ethereum-provider": "^1.7.8",
     "axios": "^0.26.1",
@@ -111,8 +118,8 @@
     "ts-jest": "^29.1.1",
     "typed-scss-modules": "^7.1.4",
     "typescript": "^5.1.6",
-    "vite-plugin-node-polyfills": "^0.22.0",
     "vite": "^5.4.10",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "2.0.2"
   },
@@ -150,7 +157,7 @@
     "bitcoinjs-lib": "5.2.0",
     "axios": "0.26.1",
     "@sentry/react": "7.99.0",
-    "@oraichain/oraidex-common": "1.1.34"
+    "@oraichain/oraidex-common": "1.1.37"
   },
   "engines": {
     "node": "^18 || ^20"

src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx

@@ -15,6 +15,8 @@ import { useInactiveConnect } from 'hooks/useMetamask';
 import Metamask from 'libs/metamask';
 import DefaultIcon from 'assets/icons/tokens.svg?react';
 import { ChainEnableByNetwork, triggerUnlockOwalletInEvmNetwork } from 'components/WalletManagement/wallet-helper';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
 
 export type ConnectStatus = 'init' | 'confirming-switch' | 'confirming-disconnect' | 'loading' | 'failed' | 'success';
 export const WalletByNetwork = ({ walletProvider }: { walletProvider: WalletProvider }) => {
@@ -26,10 +28,14 @@ export const WalletByNetwork = ({ walletProvider }: { walletProvider: WalletProv
   const [, setTronAddress] = useConfigReducer('tronAddress');
   const [, setBtcAddress] = useConfigReducer('btcAddress');
   const [, setMetamaskAddress] = useConfigReducer('metamaskAddress');
+  const [solAddress, setSolanaAddress] = useConfigReducer('solAddress');
   const [, setCosmosAddress] = useConfigReducer('cosmosAddress');
   const [walletByNetworks, setWalletByNetworks] = useWalletReducer('walletsByNetwork');
   const connect = useInactiveConnect();
 
+  const solanaWallet = useWallet();
+  const { visible, setVisible } = useWalletModal();
+
   const handleConfirmSwitch = async () => {
     setConnectStatus('loading');
     await handleConnectWalletByNetwork(currentWalletConnecting);
@@ -86,6 +92,22 @@ export const WalletByNetwork = ({ walletProvider }: { walletProvider: WalletProv
     setBtcAddress(btcAddress);
   };
 
+  const handleConnectWalletInSolanaNetwork = async (walletType: WalletType) => {
+    let provider = window?.solana;
+    let selectType = 'Phantom';
+    if (walletType === 'owallet') {
+      provider = window?.owalletSolana;
+      selectType = 'OWallet';
+    }
+
+    solanaWallet.select(selectType as any);
+    await solanaWallet.connect();
+    const { publicKey } = await provider.connect();
+    if (publicKey) {
+      setSolanaAddress(publicKey.toBase58());
+    }
+  };
+
   const handleConnectWalletByNetwork = async (wallet: WalletNetwork) => {
     try {
       setConnectStatus('loading');
@@ -102,6 +124,9 @@ export const WalletByNetwork = ({ walletProvider }: { walletProvider: WalletProv
         case 'bitcoin':
           await handleConnectWalletInBtcNetwork(wallet.nameRegistry);
           break;
+        case 'solana':
+          await handleConnectWalletInSolanaNetwork(wallet.nameRegistry);
+          break;
         default:
           setConnectStatus('init');
           break;
@@ -158,6 +183,9 @@ export const WalletByNetwork = ({ walletProvider }: { walletProvider: WalletProv
       case 'bitcoin':
         setBtcAddress(undefined);
         break;
+      case 'solana':
+        setSolanaAddress(undefined);
+        break;
       default:
         break;
     }

src/components/WalletManagement/ModalDisconnect/ModalDisconnect.tsx

@@ -22,6 +22,7 @@ export const ModalDisconnect: React.FC<{
   const [oraiAddress, setOraiAddress] = useConfigReducer('address');
   const [tronAddress, setTronAddress] = useConfigReducer('tronAddress');
   const [btcAddress, setBtcAddress] = useConfigReducer('btcAddress');
+  const [solAddress, setSolAddress] = useConfigReducer('solAddress');
   const [metamaskAddress, setMetamaskAddress] = useConfigReducer('metamaskAddress');
   const { isCopied, copiedValue, handleCopy } = useCopyClipboard();
 
@@ -47,6 +48,9 @@ export const ModalDisconnect: React.FC<{
       case 'tron':
         choosedAddressDisplayByNetwork = tronAddress;
         break;
+      case 'solana':
+        choosedAddressDisplayByNetwork = solAddress;
+        break;
       default:
         break;
     }
@@ -75,6 +79,9 @@ export const ModalDisconnect: React.FC<{
       case 'tron':
         setTronAddress(undefined);
         break;
+      case 'solana':
+        setSolAddress(undefined);
+        break;
       default:
         break;
     }

src/components/WalletManagement/MyWallet/MyWallet.tsx

@@ -12,14 +12,16 @@ import {
   evmWallets,
   btcWallets,
   type NetworkType,
-  WalletNetwork
+  WalletNetwork,
+  solanaWallets
 } from 'components/WalletManagement/walletConfig';
 import {
   tronNetworksWithIcon,
   cosmosNetworksWithIcon,
   evmNetworksIconWithoutTron,
   getListAddressCosmos,
-  btcNetworksWithIcon
+  btcNetworksWithIcon,
+  solanaNetworksWithIcon
 } from 'helper';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
@@ -46,6 +48,7 @@ export const MyWallet: React.FC<{
   const [oraiAddress] = useConfigReducer('address');
   const [tronAddress] = useConfigReducer('tronAddress');
   const [btcAddress] = useConfigReducer('btcAddress');
+  const [solAddress] = useConfigReducer('solAddress');
 
   const [metamaskAddress] = useConfigReducer('metamaskAddress');
   const [cosmosAddresses, setCosmosAddress] = useConfigReducer('cosmosAddress');
@@ -169,6 +172,15 @@ export const MyWallet: React.FC<{
     return renderWalletAddress(btcNetworks, btcWalletConnected, (_network) => btcAddress);
   };
 
+  const renderSolAddresses = () => {
+    if (!solAddress) return null;
+    const solWalletConnected = solanaWallets.find((item) => item.nameRegistry === walletByNetworks.solana);
+    if (!solWalletConnected) return <></>;
+
+    const solNetworks = solanaNetworksWithIcon.map((evm) => ({ ...evm, typeChain: 'solana' }));
+    return renderWalletAddress(solNetworks, solWalletConnected, (_network) => solAddress);
+  };
+
   return (
     <div
       ref={myWalletRef}
@@ -235,6 +247,7 @@ export const MyWallet: React.FC<{
           {renderEvmAddresses()}
           {renderTronAddresses()}
           {renderBtcAddresses()}
+          {renderSolAddresses()}
         </div>
       </div>
     </div>

src/components/WalletManagement/WalletManagement.tsx

@@ -23,6 +23,7 @@ export const WalletManagement: FC<{}> = () => {
   const [oraiAddress] = useConfigReducer('address');
   const [tronAddress] = useConfigReducer('tronAddress');
   const [btcAddress] = useConfigReducer('btcAddress');
+  const [solAddress] = useConfigReducer('solAddress');
   const [metamaskAddress] = useConfigReducer('metamaskAddress');
   const [walletByNetworks] = useWalletReducer('walletsByNetwork');
   const { handleResetBalance } = useResetBalance();
@@ -85,7 +86,7 @@ export const WalletManagement: FC<{}> = () => {
 
   // load balance every time change address
   useEffect(() => {
-    const addresses = { oraiAddress, tronAddress, metamaskAddress, btcAddress };
+    const addresses = { oraiAddress, tronAddress, metamaskAddress, btcAddress, solAddress };
     const filteredAddresses = {};
 
     for (const key in addresses) {
@@ -97,20 +98,21 @@ export const WalletManagement: FC<{}> = () => {
       loadTokenAmounts(filteredAddresses);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [oraiAddress, tronAddress, metamaskAddress, btcAddress]);
+  }, [oraiAddress, tronAddress, metamaskAddress, btcAddress, solAddress]);
 
   // reset balance when disconnect
   useEffect(() => {
-    if (!metamaskAddress || !tronAddress || !oraiAddress || !btcAddress) {
+    if (!metamaskAddress || !tronAddress || !oraiAddress || !btcAddress || !solAddress) {
       let arrResetBalance: WalletResetType[] = [];
       if (!metamaskAddress) arrResetBalance.push('metamask');
       if (!tronAddress) arrResetBalance.push('tron');
       if (!oraiAddress) arrResetBalance.push('keplr');
       if (!btcAddress) arrResetBalance.push('bitcoin');
+      if (!solAddress) arrResetBalance.push('phantom');
       arrResetBalance.length && handleResetBalance(arrResetBalance);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [oraiAddress, tronAddress, metamaskAddress, btcAddress]);
+  }, [oraiAddress, tronAddress, metamaskAddress, btcAddress, solAddress]);
 
   const isAnyWalletConnected = Object.values(walletByNetworks).some((wallet) => wallet !== null);
   useEffect(() => {

src/components/WalletManagement/useResetBalance.ts

@@ -1,9 +1,9 @@
 import { EVM_CHAIN_ID_COMMON, WalletType, cosmosTokens, flattenTokens } from '@oraichain/oraidex-common';
-import { btcTokens } from 'config/bridgeTokens';
+import { btcTokens, solTokens } from 'config/bridgeTokens';
 import { useDispatch } from 'react-redux';
 import { updateAmounts } from 'reducer/token';
 
-export type Wallet = WalletType | 'metamask' | 'tron' | 'bitcoin';
+export type Wallet = WalletType | 'metamask' | 'tron' | 'bitcoin' | 'phantom';
 export const useResetBalance = () => {
   const dispatch = useDispatch();
 
@@ -36,6 +36,9 @@ export const useResetBalance = () => {
       case 'tron':
         updatedAmounts = resetBalanceTron();
         break;
+      case 'phantom':
+        updatedAmounts = resetBalanceSol();
+        break;
       default:
         break;
     }
@@ -63,5 +66,9 @@ export const useResetBalance = () => {
     return Object.fromEntries(tronTokens.map((t) => [t.denom, '0']));
   };
 
+  const resetBalanceSol = () => {
+    return Object.fromEntries(solTokens.map((t) => [t.denom, '0']));
+  };
+
   return { handleResetBalance };
 };

src/components/WalletManagement/walletConfig.ts

@@ -2,11 +2,18 @@ import { WalletType as WalletCosmosType } from '@oraichain/oraidex-common/build/
 import KeplrIcon from 'assets/icons/keplr-icon.svg?react';
 import MetamaskIcon from 'assets/icons/metamask-icon.svg?react';
 import OwalletIcon from 'assets/icons/owallet-icon.svg?react';
+import PhantomIcon from 'assets/icons/phantom.svg?react';
 import TronIcon from 'assets/icons/tron-icon.svg?react';
-import { cosmosNetworksWithIcon, evmNetworksIconWithoutTron, tronNetworksWithIcon, btcNetworksWithIcon } from 'helper';
+import {
+  cosmosNetworksWithIcon,
+  evmNetworksIconWithoutTron,
+  tronNetworksWithIcon,
+  btcNetworksWithIcon,
+  solanaNetworksWithIcon
+} from 'helper';
 
-export type NetworkType = 'cosmos' | 'evm' | 'tron' | 'bitcoin';
-export type WalletType = WalletCosmosType | 'metamask' | 'tronLink' | 'eip191' | 'bitcoin';
+export type NetworkType = 'cosmos' | 'evm' | 'tron' | 'bitcoin' | 'solana';
+export type WalletType = WalletCosmosType | 'metamask' | 'tronLink' | 'eip191' | 'bitcoin' | 'phantom';
 export type WalletNetwork = {
   icon: React.FunctionComponent<
     React.SVGProps<SVGSVGElement> & {
@@ -94,7 +101,28 @@ export const btcWallets: WalletNetwork[] = [
   }
 ];
 
-export const allWallets: WalletNetwork[] = [...cosmosWallets, ...tronWallets, ...evmWallets, ...btcWallets];
+export const solanaWallets: WalletNetwork[] = [
+  {
+    icon: OwalletIcon,
+    name: 'Owallet',
+    nameRegistry: 'owallet',
+    isActive: true
+  },
+  {
+    icon: PhantomIcon,
+    name: 'Phantom',
+    nameRegistry: 'phantom',
+    isActive: true
+  }
+];
+
+export const allWallets: WalletNetwork[] = [
+  ...cosmosWallets,
+  ...tronWallets,
+  ...evmWallets,
+  ...btcWallets,
+  ...solanaWallets
+];
 
 export const walletProvider: WalletProvider[] = [
   {
@@ -116,5 +144,10 @@ export const walletProvider: WalletProvider[] = [
     networkType: 'bitcoin',
     networks: btcNetworksWithIcon,
     wallets: btcWallets
+  },
+  {
+    networkType: 'solana',
+    networks: solanaNetworksWithIcon,
+    wallets: solanaWallets
   }
 ];

src/config/bridgeTokens.ts

@@ -8,7 +8,8 @@ import {
   MILKYBSC_ORAICHAIN_DENOM,
   TokenItemType,
   KWT_BSC_CONTRACT,
-  MILKY_BSC_CONTRACT
+  MILKY_BSC_CONTRACT,
+  solChainId
 } from '@oraichain/oraidex-common';
 import { bitcoinChainId } from 'helper/constants';
 
@@ -95,6 +96,11 @@ export const btcTokens = uniqBy(
   (c) => c.denom
 );
 
+export const solTokens = uniqBy(
+  flattenTokens.filter((token) => token.chainId === solChainId),
+  (c) => c.denom
+);
+
 export const kawaiiTokens = uniqBy(
   cosmosTokens.filter((token) => token.chainId === 'kawaii_6886-1'),
   (c) => c.denom