Description
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);
// 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);
}, []);
useEffect(() => {
init().catch((err) => {
console.error(err);
alert('Failed to initialise wallet selector');
});
}, [init]);
useEffect(() => {
if (!selector) {
return;
}
const subscription = selector.store.observable
.pipe(
map((state) => state.accounts),
distinctUntilChanged(),
)
.subscribe((nextAccounts) => {
console.log('Accounts Update', nextAccounts);
setAccounts(nextAccounts);
});
const onHideSubscription = modal!.on('onHide', ({ hideReason }) => {
console.log(`The reason for hiding the modal ${hideReason}`);
});
return () => {
subscription.unsubscribe();
onHideSubscription.remove();
};
}, [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 (
<WalletSelectorContext.Provider value={walletSelectorContextValue}>
{children}
</WalletSelectorContext.Provider>
);
};
export function useWalletSelector() {
const context = useContext(WalletSelectorContext);
if (!context) {
throw new Error(
'useWalletSelector must be used within a WalletSelectorContextProvider',
);
}
return context;
}
This is my package.json
"dependencies": {
"@aws-sdk/client-ses": "^3.651.1",
"@braintree/sanitize-url": "7.0.1",
"@marsidev/react-turnstile": "1.0.2",
"@near-js/providers": "^1.0.1",
"@near-wallet-selector/bitget-wallet": "8.9.13",
"@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.14",
"@near-wallet-selector/here-wallet": "8.9.13",
"@near-wallet-selector/ledger": "8.9.13",
"@near-wallet-selector/math-wallet": "8.9.13",
"@near-wallet-selector/meteor-wallet": "8.9.13",
"@near-wallet-selector/mintbase-wallet": "8.9.13",
"@near-wallet-selector/modal-ui": "8.9.13",
"@near-wallet-selector/my-near-wallet": "8.9.13",
"@near-wallet-selector/narwallets": "8.9.13",
"@near-wallet-selector/near-mobile-wallet": "8.9.13",
"@near-wallet-selector/near-snap": "8.9.13",
"@near-wallet-selector/nearfi": "8.9.13",
"@near-wallet-selector/neth": "8.9.13",
"@near-wallet-selector/nightly": "8.9.13",
"@near-wallet-selector/ramper-wallet": "8.9.13",
"@near-wallet-selector/sender": "8.9.13",
"@near-wallet-selector/wallet-connect": "8.9.13",
"@near-wallet-selector/welldone-wallet": "8.9.13",
"@near-wallet-selector/xdefi": "8.9.13",
"@opentelemetry/api-logs": "^0.54.2",
"@opentelemetry/instrumentation": "^0.54.2",
"@opentelemetry/sdk-logs": "^0.54.2",
"@reach/accordion": "^0.18.0",
"@reach/combobox": "^0.18.0",
"@reach/dialog": "^0.18.0",
"@reach/menu-button": "^0.18.0",
"@reach/tooltip": "^0.18.0",
"@vercel/og": "^0.6.3",
"@vercel/otel": "^1.10.0",
"@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.11",
"ahooks": "^3.8.0",
"axios": "^1.7.2",
"big.js": "6.2.1",
"borsh": "0.7.0",
"browserify-fs": "^1.0.0",
"clipboard": "^2.0.11",
"dayjs": "1.11.13",
"ethers": "^5.7.2",
"formik": "^2.4.6",
"highcharts": "^11.4.8",
"highcharts-react-official": "^3.2.1",
"js-cookie": "^3.0.5",
"lodash": "^4.17.21",
"near-api-js": "5.0.0",
"near-social-vm": "github:NearSocial/VM#2.5.5",
"next": "15.0.3",
"next-intl": "^3.25.1",
"next-runtime-env": "^3.2.2",
"next-themes": "^0.3.0",
"numerable": "^0.3.15",
"qs": "^6.12.3",
"react": "19.0.0-rc.1",
"react-dom": "19.0.0-rc.1",
"react-hook-form": "7.46.1",
"react-perfect-scrollbar": "^1.5.8",
"react-singleton-hook": "4.0.1",
"react-syntax-highlighter": "^15.5.0",
"react-tabs": "^6.0.2",
"react-toastify": "10.0.5",
"swr": "^2.2.5",
"wagmi": "^2.12.25",
"yup": "^1.4.0",
"zustand": "4.3.7"
},
"overrides": {
"@near-wallet-selector/ethereum-wallets": {
"near-api-js": "5.0.0"
}
},
"devDependencies": {
"@cloudflare/next-on-pages": "^1.13.5",
"@types/big.js": "~6.2.2",
"@types/js-cookie": "^3.0.6",
"@types/lodash": "~4.17.7",
"@types/node": "~20.8",
"@types/qs": "~6.9.15",
"@types/react": "~18.2",
"@types/react-dom": "~18.2",
"@types/react-syntax-highlighter": "^15.5.13",
"autoprefixer": "~10.4",
"encoding": "^0.1.13",
"eslint-config-custom-nextjs": "",
"eslint-plugin-next-on-pages": "^1.13.5",
"nb-tsconfig": "",
"nb-types": "*",
"pino-pretty": "^11.3.0",
"postcss": "~8.4",
"tailwindcss": "~3.3",
"typescript": "~5.2",
"vercel": "^37.14.0"
},
"engines": {
"node": "^18.18 || >=20"
}
please help me to resolve this issue
Metadata
Assignees
Type
Projects
Status
NEW❗