feat(app): add ethereum wallets into near wallet selector

Nearblocks · Oct 15, 2024 · 4a2a088 · 4a2a088
1 parent e9bdff7
commit 4a2a088
Show file tree

Hide file tree

Showing 3 changed files with 1,391 additions and 51 deletions.
diff --git a/apps/app/package.json b/apps/app/package.json
@@ -19,6 +19,7 @@
     "@near-wallet-selector/bitte-wallet": "8.9.13",
     "@near-wallet-selector/coin98-wallet": "8.9.13",
     "@near-wallet-selector/core": "8.9.13",
+    "@near-wallet-selector/ethereum-wallets": "8.9.13",
     "@near-wallet-selector/here-wallet": "8.9.13",
     "@near-wallet-selector/ledger": "8.9.13",
     "@near-wallet-selector/math-wallet": "8.9.13",
@@ -43,11 +44,13 @@
     "@reach/menu-button": "^0.18.0",
     "@reach/tooltip": "^0.18.0",
     "@sentry/nextjs": "^8",
+    "@tanstack/react-query": "5.56.2",
     "@web3-onboard/core": "2.21.2",
     "@web3-onboard/injected-wallets": "2.10.11",
     "@web3-onboard/ledger": "2.5.2",
     "@web3-onboard/react": "2.8.13",
     "@web3-onboard/walletconnect": "2.3.9",
+    "@web3modal/wagmi": "5.1.10",
     "ahooks": "^3.8.0",
     "axios": "^1.7.2",
     "big.js": "6.2.1",
@@ -74,6 +77,8 @@
     "react-tabs": "^6.0.2",
     "react-toastify": "10.0.5",
     "swr": "^2.2.5",
+    "viem": "^2.21.16",
+    "wagmi": "^2.12.16",
     "zustand": "4.3.7"
   },
   "devDependencies": {
@@ -92,5 +97,8 @@
     "postcss": "~8.4",
     "tailwindcss": "~3.3",
     "typescript": "~5.2"
+  },
+  "resolutions": {
+    "viem": "1.0.2"
   }
 }
diff --git a/apps/app/src/components/vm/VmInitializer.tsx b/apps/app/src/components/vm/VmInitializer.tsx
@@ -33,10 +33,94 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
 import { useEthersProviderContext } from '@/data/web3';
 import { useAuthStore } from '@/stores/auth';
 import { useVmStore } from '@/stores/vm';
-import { networkId, bosNetworkId } from '@/utils/config';
+import { networkId } from '@/utils/config';
 import '@near-wallet-selector/modal-ui/styles.css';
 import Link from 'next/link';
 import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
+import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
+import { createWeb3Modal } from '@web3modal/wagmi';
+import { reconnect, http, createConfig, type Config } from '@wagmi/core';
+import { walletConnect, injected } from '@wagmi/connectors';
+import { type Chain } from '@wagmi/core/chains';
+
+const projectId = '5bb0fe33763b3bea40b8d69e4269b4ae';
+
+// NOTE: This is the NEAR wallet playground used in dev mode.
+// TODO: Replace with the NEAR chain after the protocol upgrade.
+const nears: Chain = {
+  id: networkId === 'mainnet' ? 397 : 398,
+  name: `NEAR Protocol ${networkId === 'mainnet' ? 'Mainnet' : 'Testnet'}`,
+  nativeCurrency: {
+    decimals: 18,
+    name: 'NEAR',
+    symbol: 'NEAR',
+  },
+  rpcUrls: {
+    default: {
+      http: [
+        `${
+          networkId === 'mainnet'
+            ? ' https://eth-rpc.mainnet.near.org'
+            : 'https://eth-rpc.testnet.near.org'
+        }`,
+      ],
+    },
+    public: {
+      http: [
+        `${
+          networkId === 'mainnet'
+            ? 'https://eth-rpc.mainnet.near.org'
+            : 'https://eth-rpc.testnet.near.org'
+        }`,
+      ],
+    },
+  },
+  blockExplorers: {
+    default: {
+      name: 'NEAR Explorer',
+      url: `${
+        networkId === 'mainnet'
+          ? 'https://eth-explorer.near.org'
+          : 'https://eth-explorer-testnet.near.org'
+      }`,
+    },
+  },
+  testnet: networkId !== 'mainnet',
+};
+
+// @ts-ignore
+const wagmiConfig: Config = createConfig({
+  chains: [nears],
+  transports: {
+    [nears.id]: http(),
+  },
+  connectors: [
+    // @ts-ignore
+    walletConnect({
+      projectId,
+      metadata: {
+        name: 'NEAR Guest Book',
+        description: 'A guest book with comments stored on the NEAR blockchain',
+        url: 'https://near.github.io/wallet-selector',
+        icons: ['https://near.github.io/wallet-selector/favicon.ico'],
+      },
+      showQrModal: false,
+    }),
+    // @ts-ignore
+    injected({ shimDisconnect: true }),
+  ],
+});
+
+reconnect(wagmiConfig);
+
+// @ts-ignore
+const web3Modal = createWeb3Modal({
+  // @ts-ignore
+  wagmiConfig: wagmiConfig,
+  projectId,
+  enableOnramp: false,
+  allWallets: 'SHOW',
+});
 
 export default function VmInitializer() {
   const [signedIn, setSignedIn] = useState(false);
@@ -45,7 +129,6 @@ export default function VmInitializer() {
   const [walletModal, setWalletModal] = useState<WalletSelectorModal | null>(
     null,
   );
-
   const ethersProviderContext = useEthersProviderContext();
   const { initNear } = useInitNear();
   const near = useNear();
@@ -55,10 +138,11 @@ export default function VmInitializer() {
   const setAuthStore = useAuthStore((state) => state.set);
   const setVmStore = useVmStore((store) => store.set);
   // const { requestAuthentication, saveCurrentUrl } = useSignInRedirect();
+
   useEffect(() => {
     initNear &&
       initNear({
-        networkId: bosNetworkId,
+        networkId: networkId,
         walletConnectCallback: () => {},
         selector: setupWalletSelector({
           network: networkId,
@@ -80,6 +164,13 @@ export default function VmInitializer() {
             setupNearMobileWallet(),
             setupMintbaseWallet(),
             setupBitteWallet(),
+            // @ts-ignore
+            setupEthereumWallets({
+              wagmiConfig,
+              // @ts-ignore
+              web3Modal,
+              alwaysOnboardDuringSignIn: true,
+            }),
           ],
         }),
         customElements: {