Merge branch 'main' into feat/permissionless-todo

oraidex · Dec 5, 2024 · a8f182c · a8f182c
2 parents 7c75443 + 49398bf
commit a8f182c
Show file tree

Hide file tree

Showing 31 changed files with 4,591 additions and 246 deletions.
diff --git a/.env.example b/.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=
diff --git a/package.json b/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",
@@ -23,14 +24,20 @@
     "@oraichain/ethereum-multicall": "^1.0.2",
     "@oraichain/kawaiiverse-txs": "^0.0.3",
     "@oraichain/orai-bitcoin": "2.0.0",
-    "@oraichain/oraidex-common": "2.0.0-beta.15",
+    "@oraichain/oraidex-common": "2.0.0-beta.17",
     "@oraichain/oraidex-common-ui": "1.0.11",
     "@oraichain/oraidex-contracts-sdk": "1.0.55",
     "@oraichain/oraidex-universal-swap": "1.2.0-beta15",
     "@oraichain/oraiswap-v3": "1.2.0-beta15",
     "@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",
@@ -151,7 +158,8 @@
     "bitcoinjs-lib": "5.2.0",
     "axios": "0.26.1",
     "@sentry/react": "7.99.0",
-    "@cosmjs/amino": "0.32.4"
+    "@cosmjs/amino": "0.32.4",
+    "@oraichain/oraidex-common": "2.0.0-beta.17"
   },
   "engines": {
     "node": "^18 || ^20"

diff --git a/src/assets/icons/max.svg b/src/assets/icons/max.svg
diff --git a/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx b/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;
     }

diff --git a/src/components/WalletManagement/ModalDisconnect/ModalDisconnect.tsx b/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;
     }

diff --git a/src/components/WalletManagement/MyWallet/MyWallet.tsx b/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');
@@ -171,6 +174,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}
@@ -224,6 +236,7 @@ export const MyWallet: React.FC<{
           {renderEvmAddresses()}
           {renderTronAddresses()}
           {renderBtcAddresses()}
+          {renderSolAddresses()}
         </div>
       </div>
     </div>

diff --git a/src/components/WalletManagement/WalletManagement.tsx b/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(() => {

diff --git a/src/components/WalletManagement/useResetBalance.ts b/src/components/WalletManagement/useResetBalance.ts
@@ -1,9 +1,9 @@
 import { EVM_CHAIN_ID_COMMON, WalletType } from '@oraichain/oraidex-common';
-import { btcTokens, cosmosTokens, flattenTokens } from 'initCommon';
+import { btcTokens, cosmosTokens, flattenTokens, solTokens } from 'initCommon';
 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 };
 };
diff --git a/src/components/WalletManagement/walletConfig.ts b/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
   }
 ];