// Log in with Ethereum flow: auto connect to ethereum-wallets without showing the NEAR modal.
useEffect(() => {
if (!selector) {
return;
}
// Watch the connected Ethereum account and connect to the ethereum-wallets module automatically.
watchAccount(wagmiConfig, {
onChange: (data: GetAccountReturnType) => {
if (!data.address || selector.store.getState().selectedWalletId) {
return;
}
selector.wallet('ethereum-wallets').then((wallet) =>
(wallet as InjectedWalletBehaviour).signIn({
contractId: CONTRACT_ID,
}),
);
},
});
}, [selector]);
// this is added for debugging purpose only
// for more information (https://github.com/near/wallet-selector/pull/764#issuecomment-1498073367)
window.selector = _selector;
window.modal = _modal;
setSelector(_selector);
setModal(_modal);
setLoading(false);
i am trying to integrate wallet selector in nextjs app router with version "next": "15.0.3",
my wallet selector provider code like this
import { setupCoin98Wallet } from '@near-wallet-selector/coin98-wallet'; import type { AccountState, InjectedWalletBehaviour, WalletSelector, } from '@near-wallet-selector/core'; import { setupWalletSelector } from '@near-wallet-selector/core'; import { setupHereWallet } from '@near-wallet-selector/here-wallet'; import { setupMathWallet } from '@near-wallet-selector/math-wallet'; import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet'; import { setupNarwallets } from '@near-wallet-selector/narwallets'; import type { WalletSelectorModal } from '@near-wallet-selector/modal-ui'; import { setupModal } from '@near-wallet-selector/modal-ui'; import { setupNearFi } from '@near-wallet-selector/nearfi'; import { setupNightly } from '@near-wallet-selector/nightly'; import { setupSender } from '@near-wallet-selector/sender'; import { setupBitgetWallet } from '@near-wallet-selector/bitget-wallet'; import { setupWalletConnect } from '@near-wallet-selector/wallet-connect'; import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet'; import { setupNearSnap } from '@near-wallet-selector/near-snap'; import { setupNeth } from '@near-wallet-selector/neth'; import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet'; import { setupLedger } from '@near-wallet-selector/ledger'; import { setupXDEFI } from '@near-wallet-selector/xdefi'; import { setupRamperWallet } from '@near-wallet-selector/ramper-wallet'; import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet'; import { setupMintbaseWallet } from '@near-wallet-selector/mintbase-wallet'; import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet'; import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
import type { ReactNode } from 'react'; import React, { useCallback, useContext, useEffect, useState, useMemo, } from 'react'; import { distinctUntilChanged, map } from 'rxjs'; import { watchAccount, type GetAccountReturnType } from '@wagmi/core'; import { wagmiConfig, web3Modal } from '@/utils/app/web3modal'; import Skeleton from '../skeleton/common/Skeleton';
declare global { interface Window { selector: WalletSelector; modal: WalletSelectorModal; } }
interface WalletSelectorContextValue { selector: WalletSelector; modal: WalletSelectorModal; accounts: Array;
accountId: string | null;
}
const WalletSelectorContext = React.createContext<WalletSelectorContextValue | null>(null);
const CONTRACT_ID = '';
export const WalletSelectorContextProvider: React.FC<{ children: ReactNode; }> = ({ children }) => { const [selector, setSelector] = useState<WalletSelector | null>(null); const [modal, setModal] = useState<WalletSelectorModal | null>(null); const [accounts, setAccounts] = useState<Array>([]);
const [loading, setLoading] = useState(true);
// Log in with Ethereum flow: auto connect to ethereum-wallets without showing the NEAR modal. useEffect(() => { if (!selector) { return; } // Watch the connected Ethereum account and connect to the
ethereum-wallets
module automatically. watchAccount(wagmiConfig, { onChange: (data: GetAccountReturnType) => { if (!data.address || selector.store.getState().selectedWalletId) { return; } selector.wallet('ethereum-wallets').then((wallet) => (wallet as InjectedWalletBehaviour).signIn({ contractId: CONTRACT_ID, }), ); }, }); }, [selector]);const init = useCallback(async () => { const _selector = await setupWalletSelector({ network: 'testnet', debug: true, modules: [ setupMyNearWallet(), setupLedger(), setupSender(), setupBitgetWallet(), setupMathWallet(), setupNightly(), setupMeteorWallet(), setupNearSnap(), setupNarwallets(), setupWelldoneWallet(), setupHereWallet(), setupCoin98Wallet(), setupNearFi(), setupRamperWallet(), setupNeth({ gas: '300000000000000', bundle: false, }), setupXDEFI(), setupWalletConnect({ projectId: 'c4f79cc...', metadata: { name: 'NEAR Wallet Selector', description: 'Example dApp used by NEAR Wallet Selector', url: 'https://github.com/near/wallet-selector', icons: ['https://avatars.githubusercontent.com/u/37784886'], }, }), setupNearMobileWallet(), setupMintbaseWallet({ contractId: CONTRACT_ID }), setupBitteWallet({ contractId: CONTRACT_ID }), setupEthereumWallets({ wagmiConfig: wagmiConfig as any, web3Modal: web3Modal as any, }), ], }); const _modal = setupModal(_selector, { contractId: CONTRACT_ID, }); const state = _selector.store.getState(); setAccounts(state.accounts);
}, []);
useEffect(() => { init().catch((err) => { console.error(err); alert('Failed to initialise wallet selector'); }); }, [init]);
useEffect(() => { if (!selector) { return; }
}, [selector, modal]);
const walletSelectorContextValue = useMemo(
() => ({
selector: selector!,
modal: modal!,
accounts,
accountId: accounts.find((account) => account.active)?.accountId || null,
}),
[selector, modal, accounts],
);
if (loading) { return ;
}
return (