create-near-app 8.1.0 → 8.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-near-app",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "Quickly scaffold your dApp on NEAR Blockchain",
   "main": "index.js",
   "engines": {
@@ -18,6 +18,7 @@
     "build": "tsc",
     "test": "npm run build && FORCE_COLOR=1 jest --runInBand",
     "test-e2e": "npm run build && ./test/e2e.sh",
+    "test:update": "jest -u",
     "lint": "eslint .",
     "fix": "eslint . --fix",
     "release": "npm run build && release-it",

package/templates/frontend/next-app/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  transpilePackages: ['reown'],
 };
 
 module.exports = nextConfig;

package/templates/frontend/next-app/package.json

@@ -12,29 +12,34 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-js/providers": "^1.0.0",
-    "@near-wallet-selector/bitte-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/meteor-wallet": "^8.9.13",
-    "@near-wallet-selector/modal-ui": "^8.9.13",
-    "@near-wallet-selector/my-near-wallet": "^8.9.13",
-    "@near-wallet-selector/sender": "^8.9.13",
-    "@web3modal/wagmi": "^5.1.10",
+    "@near-wallet-selector/bitte-wallet": "^9.0.1",
+    "@near-wallet-selector/core": "^9.0.1",
+    "@near-wallet-selector/ethereum-wallets": "^9.0.1",
+    "@near-wallet-selector/here-wallet": "^9.0.1",
+    "@near-wallet-selector/hot-wallet": "^9.0.1",
+    "@near-wallet-selector/ledger": "^9.0.1",
+    "@near-wallet-selector/meteor-wallet": "^9.0.1",
+    "@near-wallet-selector/meteor-wallet-app": "^9.0.1",
+    "@near-wallet-selector/modal-ui": "^9.0.1",
+    "@near-wallet-selector/my-near-wallet": "^9.0.1",
+    "@near-wallet-selector/near-mobile-wallet": "^9.0.1",
+    "@near-wallet-selector/react-hook": "^9.0.1",
+    "@near-wallet-selector/sender": "^9.0.1",
+    "@near-wallet-selector/welldone-wallet": "^9.0.1",
+    "@reown/appkit": "^1.7.4",
+    "@reown/appkit-adapter-wagmi": "^1.7.4",
+    "@wagmi/core": "^2.17.1",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^4.0.3",
-    "next": "14.2.13",
+    "near-api-js": "^5.0.0",
+    "next": "^15",
     "react": "^18",
-    "react-dom": "^18",
-    "wagmi": "^2.12.16"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "encoding": "^0.1.13",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.13",
+    "eslint": "^9",
+    "eslint-config-next": "^15",
     "pino-pretty": "^11.2.2"
   }
-}
+}

package/templates/frontend/next-app/src/app/hello-near/page.js

@@ -1,17 +1,17 @@
 'use client';
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect } from 'react';
 
 import styles from '@/app/app.module.css';
 import { Cards } from '@/components/cards';
 
-import { NearContext } from '@/wallets/near';
 import { HelloNearContract } from '@/config';
+import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
 // Contract that the app will interact with
 const CONTRACT = HelloNearContract;
 
 export default function HelloNear() {
-  const { signedAccountId, wallet } = useContext(NearContext);
+  const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
 
   const [greeting, setGreeting] = useState('loading...');
   const [newGreeting, setNewGreeting] = useState('loading...');
@@ -19,11 +19,9 @@ export default function HelloNear() {
   const [showSpinner, setShowSpinner] = useState(false);
 
   useEffect(() => {
-    if (!wallet) return;
-
-    wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' })
+    viewFunction({ contractId: CONTRACT, method: 'get_greeting' })
       .then(greeting => setGreeting(greeting));
-  }, [wallet]);
+  }, [viewFunction]);
 
   useEffect(() => {
     setLoggedIn(!!signedAccountId);
@@ -31,8 +29,8 @@ export default function HelloNear() {
 
   const storeGreeting = async () => {
     setShowSpinner(true);
-    await wallet.callMethod({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
-    const greeting = await wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' });
+    await callFunction({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
+    const greeting = await viewFunction({ contractId: CONTRACT, method: 'get_greeting' });
     setGreeting(greeting);
     setShowSpinner(false);
   };

package/templates/frontend/next-app/src/app/layout.js

@@ -4,25 +4,50 @@ import { useEffect, useState } from 'react';
 
 import '@/app/globals.css';
 import { Navigation } from '@/components/navigation';
-import { NetworkId } from '@/config';
+import '@near-wallet-selector/modal-ui/styles.css';
+import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
+import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
+import { setupMeteorWalletApp } from '@near-wallet-selector/meteor-wallet-app';
+import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
+import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
+import { setupHotWallet } from '@near-wallet-selector/hot-wallet';
+import { setupLedger } from '@near-wallet-selector/ledger';
+import { setupSender } from '@near-wallet-selector/sender';
+import { setupHereWallet } from '@near-wallet-selector/here-wallet';
+import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
+import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet';
+import { HelloNearContract, NetworkId } from '@/config';
+import { WalletSelectorProvider } from '@near-wallet-selector/react-hook';
+import { wagmiAdapter, web3Modal } from '@/wallets/web3modal';
 
-import { NearContext, Wallet } from '@/wallets/near';
-
-const wallet = new Wallet({ networkId: NetworkId });
+const walletSelectorConfig = {
+  network: NetworkId,
+  // createAccessKeyFor: HelloNearContract,
+  modules: [
+    setupMeteorWallet(),
+    setupEthereumWallets({ wagmiConfig: wagmiAdapter.wagmiConfig, web3Modal }),
+    setupBitteWallet(),
+    setupMeteorWalletApp({ contractId: HelloNearContract }),
+    setupHotWallet(),
+    setupLedger(),
+    setupSender(),
+    setupHereWallet(),
+    setupNearMobileWallet(),
+    setupWelldoneWallet(),
+    setupMyNearWallet(),
+  ],
+}
 
 // Layout Component
 export default function RootLayout({ children }) {
-  const [signedAccountId, setSignedAccountId] = useState('');
-
-  useEffect(() => { wallet.startUp(setSignedAccountId); }, []);
 
   return (
     <html lang="en">
       <body>
-        <NearContext.Provider value={{ wallet, signedAccountId }}>
+        <WalletSelectorProvider config={walletSelectorConfig}>
           <Navigation />
           {children}
-        </NearContext.Provider>
+        </WalletSelectorProvider>
       </body>
     </html>
   );

package/templates/frontend/next-app/src/components/navigation.js

@@ -1,31 +1,29 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState } from 'react';
 
-import { NearContext } from '@/wallets/near';
 import NearLogo from '/public/near-logo.svg';
+import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
 export const Navigation = () => {
-  const { signedAccountId, wallet } = useContext(NearContext);
+  const { signedAccountId, signIn, signOut } = useWalletSelector();
   const [action, setAction] = useState(() => { });
   const [label, setLabel] = useState('Loading...');
 
   useEffect(() => {
-    if (!wallet) return;
-
     if (signedAccountId) {
-      setAction(() => wallet.signOut);
+      setAction(() => signOut);
       setLabel(`Logout ${signedAccountId}`);
     } else {
-      setAction(() => wallet.signIn);
+      setAction(() => signIn);
       setLabel('Login');
     }
-  }, [signedAccountId, wallet]);
+  }, [signedAccountId, signIn, signOut]);
 
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
-        <Link href="/" passHref legacyBehavior>
+        <Link href="/" passHref>
           <Image priority src={NearLogo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
         </Link>
         <div className='navbar-nav pt-1'>

package/templates/frontend/next-app/src/config.js

@@ -3,22 +3,5 @@ const contractPerNetwork = {
   testnet: 'hello.near-examples.testnet',
 };
 
-// Chains for EVM Wallets 
-const evmWalletChains = {
-  mainnet: {
-    chainId: 397,
-    name: "Near Mainnet",
-    explorer: "https://eth-explorer.near.org",
-    rpc: "https://eth-rpc.mainnet.near.org",
-  },
-  testnet: {
-    chainId: 398,
-    name: "Near Testnet",
-    explorer: "https://eth-explorer-testnet.near.org",
-    rpc: "https://eth-rpc.testnet.near.org",
-  },
-}
-
 export const NetworkId = 'testnet';
-export const HelloNearContract = contractPerNetwork[NetworkId];
-export const EVMWalletChain = evmWalletChains[NetworkId];
+export const HelloNearContract = contractPerNetwork[NetworkId];

package/templates/frontend/next-app/src/wallets/web3modal.js

@@ -1,44 +1,35 @@
-import { NetworkId, EVMWalletChain } from '@/config';
-import { reconnect, http, createConfig } from "@wagmi/core";
-import { walletConnect, injected } from "@wagmi/connectors";
-import { createWeb3Modal } from "@web3modal/wagmi";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { createAppKit } from "@reown/appkit/react";
+import { nearTestnet } from "@reown/appkit/networks";
+import { reconnect } from "@wagmi/core";
 
-// Config
-const near = {
-  id: EVMWalletChain.chainId,
-  name: EVMWalletChain.name,
-  nativeCurrency: {
-    decimals: 18,
-    name: "NEAR",
-    symbol: "NEAR",
-  },
-  rpcUrls: {
-    default: { http: [EVMWalletChain.rpc] },
-    public: { http: [EVMWalletChain.rpc] },
-  },
-  blockExplorers: {
-    default: {
-      name: "NEAR Explorer",
-      url: EVMWalletChain.explorer,
-    },
-  },
-  testnet: NetworkId === "testnet",
-};
+// Get a project ID at https://cloud.reown.com
+const projectId = "30147604c5f01d0bc4482ab0665b5697";
 
-// Get your projectId at https://cloud.reown.com
-const projectId = '5bb0fe33763b3bea40b8d69e4269b4ae';
-
-export const wagmiConfig = createConfig({
-  chains: [near],
-  transports: { [near.id]: http() },
-  connectors: [
-    walletConnect({ projectId, showQrModal: false }),
-    injected({ shimDisconnect: true }),
-  ],
+export const wagmiAdapter = new WagmiAdapter({
+  projectId,
+  networks: [nearTestnet],
 });
 
-// Preserve login state on page reload
-reconnect(wagmiConfig);
+export const web3Modal = createAppKit({
+  adapters: [wagmiAdapter],
+  projectId,
+  networks: [nearTestnet],
+  enableWalletConnect: true,
+  features: {
+    analytics: true,
+    swaps: false,
+    onramp: false,
+    email: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+    socials: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+  },
+  coinbasePreference: "eoaOnly", // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+  allWallets: "SHOW",
+});
 
-// Modal for login
-export const web3Modal = createWeb3Modal({ wagmiConfig, projectId });
+// force reconnecting if the user has already signed in with an ethereum wallet
+// this is a workaround until `ethereum-wallets` supports the `reconnect` method
+if (typeof window !== "undefined") {
+  const recentWallets = localStorage.getItem("near-wallet-selector:recentlySignedInWallets");
+  recentWallets && recentWallets.includes("ethereum-wallets") && reconnect(wagmiAdapter.wagmiConfig)
+} 

package/templates/frontend/next-page/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  transpilePackages: ['reown'],
 };
 
 module.exports = nextConfig;

package/templates/frontend/next-page/package.json

@@ -12,29 +12,34 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-js/providers": "^1.0.0",
-    "@near-wallet-selector/bitte-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/meteor-wallet": "^8.9.13",
-    "@near-wallet-selector/modal-ui": "^8.9.13",
-    "@near-wallet-selector/my-near-wallet": "^8.9.13",
-    "@near-wallet-selector/sender": "^8.9.13",
-    "@web3modal/wagmi": "^5.1.10",
+    "@near-wallet-selector/bitte-wallet": "^9.0.1",
+    "@near-wallet-selector/core": "^9.0.1",
+    "@near-wallet-selector/ethereum-wallets": "^9.0.1",
+    "@near-wallet-selector/here-wallet": "^9.0.1",
+    "@near-wallet-selector/hot-wallet": "^9.0.1",
+    "@near-wallet-selector/ledger": "^9.0.1",
+    "@near-wallet-selector/meteor-wallet": "^9.0.1",
+    "@near-wallet-selector/meteor-wallet-app": "^9.0.1",
+    "@near-wallet-selector/modal-ui": "^9.0.1",
+    "@near-wallet-selector/my-near-wallet": "^9.0.1",
+    "@near-wallet-selector/near-mobile-wallet": "^9.0.1",
+    "@near-wallet-selector/react-hook": "^9.0.1",
+    "@near-wallet-selector/sender": "^9.0.1",
+    "@near-wallet-selector/welldone-wallet": "^9.0.1",
+    "@reown/appkit": "^1.7.4",
+    "@reown/appkit-adapter-wagmi": "^1.7.4",
+    "@wagmi/core": "^2.17.1",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^4.0.3",
-    "next": "14.2.13",
+    "near-api-js": "^5.0.0",
+    "next": "^15",
     "react": "^18",
-    "react-dom": "^18",
-    "wagmi": "^2.12.16"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "encoding": "^0.1.13",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.13",
+    "eslint": "^9",
+    "eslint-config-next": "^15",
     "pino-pretty": "^11.2.2"
   }
-}
+}

package/templates/frontend/next-page/src/components/navigation.js

@@ -1,26 +1,24 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState } from 'react';
+import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
-import { NearContext } from '@/wallets/near';
 import NearLogo from '/public/near-logo.svg';
 
 export const Navigation = () => {
-  const { signedAccountId, wallet } = useContext(NearContext);
+  const { signedAccountId, signIn, signOut } = useWalletSelector();
   const [action, setAction] = useState(() => { });
   const [label, setLabel] = useState('Loading...');
 
   useEffect(() => {
-    if (!wallet) return;
-
     if (signedAccountId) {
-      setAction(() => wallet.signOut);
+      setAction(() => signOut);
       setLabel(`Logout ${signedAccountId}`);
     } else {
-      setAction(() => wallet.signIn);
-      setLabel('Login');
+      setAction(() => signIn);
+      setLabel("Login");
     }
-  }, [signedAccountId, wallet]);
+  }, [signedAccountId]);
 
   return (
     <nav className="navbar navbar-expand-lg">

package/templates/frontend/next-page/src/config.js

@@ -3,22 +3,5 @@ const contractPerNetwork = {
   testnet: 'hello.near-examples.testnet',
 };
 
-// Chains for EVM Wallets 
-const evmWalletChains = {
-  mainnet: {
-    chainId: 397,
-    name: "Near Mainnet",
-    explorer: "https://eth-explorer.near.org",
-    rpc: "https://eth-rpc.mainnet.near.org",
-  },
-  testnet: {
-    chainId: 398,
-    name: "Near Testnet",
-    explorer: "https://eth-explorer-testnet.near.org",
-    rpc: "https://eth-rpc.testnet.near.org",
-  },
-}
-
 export const NetworkId = 'testnet';
-export const HelloNearContract = contractPerNetwork[NetworkId];
-export const EVMWalletChain = evmWalletChains[NetworkId];
+export const HelloNearContract = contractPerNetwork[NetworkId];

package/templates/frontend/next-page/src/pages/_app.js

@@ -1,22 +1,45 @@
-import { useEffect, useState } from 'react';
-
 import '@/styles/globals.css';
 import { Navigation } from '@/components/navigation';
 
-import { Wallet, NearContext } from '@/wallets/near';
-import { NetworkId } from '@/config';
+import '@near-wallet-selector/modal-ui/styles.css';
+import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
+import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
+import { setupMeteorWalletApp } from '@near-wallet-selector/meteor-wallet-app';
+import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
+import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
+import { setupHotWallet } from '@near-wallet-selector/hot-wallet';
+import { setupLedger } from '@near-wallet-selector/ledger';
+import { setupSender } from '@near-wallet-selector/sender';
+import { setupHereWallet } from '@near-wallet-selector/here-wallet';
+import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
+import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet';
+import { HelloNearContract, NetworkId } from '@/config';
+import { WalletSelectorProvider } from '@near-wallet-selector/react-hook';
+import { wagmiAdapter, web3Modal } from '@/wallets/web3modal';
 
-const wallet = new Wallet({ networkId: NetworkId });
+const walletSelectorConfig = {
+  network: NetworkId,
+  // createAccessKeyFor: HelloNearContract,
+  modules: [
+    setupMeteorWallet(),
+    setupEthereumWallets({ wagmiConfig: wagmiAdapter.wagmiConfig, web3Modal }),
+    setupBitteWallet(),
+    setupMeteorWalletApp({ contractId: HelloNearContract }),
+    setupHotWallet(),
+    setupLedger(),
+    setupSender(),
+    setupHereWallet(),
+    setupNearMobileWallet(),
+    setupWelldoneWallet(),
+    setupMyNearWallet(),
+  ],
+}
 
 export default function MyApp({ Component, pageProps }) {
-  const [signedAccountId, setSignedAccountId] = useState('');
-
-  useEffect(() => { wallet.startUp(setSignedAccountId) }, []);
-
   return (
-    <NearContext.Provider value={{ wallet, signedAccountId }}>
+    <WalletSelectorProvider config={walletSelectorConfig}>
       <Navigation />
       <Component {...pageProps} />
-    </NearContext.Provider>
+    </WalletSelectorProvider>
   );
 }

package/templates/frontend/next-page/src/pages/hello-near/index.js

@@ -1,15 +1,15 @@
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect } from 'react';
 
-import { NearContext } from '@/wallets/near';
 import styles from '@/styles/app.module.css';
 import { HelloNearContract } from '../../config';
 import { Cards } from '@/components/cards';
+import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
 // Contract that the app will interact with
 const CONTRACT = HelloNearContract;
 
 export default function HelloNear() {
-  const { signedAccountId, wallet } = useContext(NearContext);
+  const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
 
   const [greeting, setGreeting] = useState('loading...');
   const [newGreeting, setNewGreeting] = useState('loading...');
@@ -17,12 +17,10 @@ export default function HelloNear() {
   const [showSpinner, setShowSpinner] = useState(false);
 
   useEffect(() => {
-    if (!wallet) return;
-
-    wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' }).then(
+    viewFunction({ contractId: CONTRACT, method: 'get_greeting' }).then(
       greeting => setGreeting(greeting)
     );
-  }, [wallet]);
+  }, []);
 
   useEffect(() => {
     setLoggedIn(!!signedAccountId);
@@ -30,8 +28,8 @@ export default function HelloNear() {
 
   const saveGreeting = async () => {
     setShowSpinner(true);
-    await wallet.callMethod({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
-    const greeting = await wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' });
+    await callFunction({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
+    const greeting = await viewFunction({ contractId: CONTRACT, method: 'get_greeting' });
     setGreeting(greeting);
     setShowSpinner(false);
   };

package/templates/frontend/next-page/src/wallets/web3modal.js

@@ -1,44 +1,35 @@
-import { NetworkId, EVMWalletChain } from '@/config';
-import { reconnect, http, createConfig } from "@wagmi/core";
-import { walletConnect, injected } from "@wagmi/connectors";
-import { createWeb3Modal } from "@web3modal/wagmi";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { createAppKit } from "@reown/appkit/react";
+import { nearTestnet } from "@reown/appkit/networks";
+import { reconnect } from "@wagmi/core";
 
-// Config
-const near = {
-  id: EVMWalletChain.chainId,
-  name: EVMWalletChain.name,
-  nativeCurrency: {
-    decimals: 18,
-    name: "NEAR",
-    symbol: "NEAR",
-  },
-  rpcUrls: {
-    default: { http: [EVMWalletChain.rpc] },
-    public: { http: [EVMWalletChain.rpc] },
-  },
-  blockExplorers: {
-    default: {
-      name: "NEAR Explorer",
-      url: EVMWalletChain.explorer,
-    },
-  },
-  testnet: NetworkId === "testnet",
-};
+// Get a project ID at https://cloud.reown.com
+const projectId = "30147604c5f01d0bc4482ab0665b5697";
 
-// Get your projectId at https://cloud.reown.com
-const projectId = '5bb0fe33763b3bea40b8d69e4269b4ae';
-
-export const wagmiConfig = createConfig({
-  chains: [near],
-  transports: { [near.id]: http() },
-  connectors: [
-    walletConnect({ projectId, showQrModal: false }),
-    injected({ shimDisconnect: true }),
-  ],
+export const wagmiAdapter = new WagmiAdapter({
+  projectId,
+  networks: [nearTestnet],
 });
 
-// Preserve login state on page reload
-reconnect(wagmiConfig);
+export const web3Modal = createAppKit({
+  adapters: [wagmiAdapter],
+  projectId,
+  networks: [nearTestnet],
+  enableWalletConnect: true,
+  features: {
+    analytics: true,
+    swaps: false,
+    onramp: false,
+    email: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+    socials: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+  },
+  coinbasePreference: "eoaOnly", // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+  allWallets: "SHOW",
+});
 
-// Modal for login
-export const web3Modal = createWeb3Modal({ wagmiConfig, projectId });
+// force reconnecting if the user has already signed in with an ethereum wallet
+// this is a workaround until `ethereum-wallets` supports the `reconnect` method
+if (typeof window !== "undefined") {
+  const recentWallets = localStorage.getItem("near-wallet-selector:recentlySignedInWallets");
+  recentWallets && recentWallets.includes("ethereum-wallets") && reconnect(wagmiAdapter.wagmiConfig)
+}