near / wallet-selector

This is a wallet selector modal that allows users to interact with NEAR dApps with a selection of available wallets.
https://near.github.io/wallet-selector/
Apache License 2.0
155 stars 155 forks source link

Module not found: Can't resolve 'fs' #1262

Open yudhomax opened 2 days ago

yudhomax commented 2 days ago

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 (

{children} ); }; 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 ![Screenshot from 2024-11-29 16-23-55](https://github.com/user-attachments/assets/3f7bae54-2e1e-4ae3-89a8-8708c5f162d1)
kujtimprenku commented 1 day ago

Try removing the @near-wallet-selector/near-snap from your project.