Merge pull request #548 from HausDAO/feat/connect-wallet

remove web3modal and breaking dep on wallet connect

Author: dekanbro

.github/workflows/ci_develop.yaml

@@ -25,7 +25,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Create env file
         run: |

.github/workflows/ci_main.yaml

@@ -26,7 +26,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Create env file
         run: |

.nvmrc

@@ -1 +1 @@
-16.16.0
+18.19.0

apps/admin/src/polyfills.ts

@@ -5,3 +5,15 @@
  */
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
+
+// Ensure Buffer is globally available early (before any dynamic imports needing it)
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { Buffer } = require('buffer');
+  if (typeof window !== 'undefined' && !(window as any).Buffer) {
+    (window as any).Buffer = Buffer;
+  }
+} catch (err) {
+  // eslint-disable-next-line no-console
+  console.warn('[Polyfills] Buffer polyfill failed', err);
+}

libs/connect-context/src/Connect.tsx

@@ -1,12 +1,11 @@
-import {
-  EthereumClient,
-  w3mConnectors,
-  w3mProvider,
-} from '@web3modal/ethereum';
 import { configureChains, createConfig, WagmiConfig } from 'wagmi';
 import { SafeConnector } from '@wagmi/connectors/safe';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
+import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
+// WalletConnect v2 included whenever a NX_WALLET_CONNECT_ID is provided (no extra enable flag)
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
 import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
-import { Web3Modal } from '@web3modal/react';
 
 import {
   HAUS_NETWORK_DATA,
@@ -15,13 +14,26 @@ import {
 } from '@daohaus/keychain-utils';
 
 import { ConnectProvider, ConnectProviderProps } from './ConnectContext';
+import { logChains } from './utils/debug';
 
-if (!process.env['NX_WALLET_CONNECT_ID']) {
-  throw new Error('You need to provide NX_WALLET_CONNECT_ID env variable');
+// Ensure Buffer global for libraries (e.g., walletconnect QR, qrcode) that expect Node Buffer
+// Some build setups (webpack 5) do not auto-polyfill core modules.
+// Safe to run always; no-op if already defined.
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { Buffer } = require('buffer');
+  if (typeof window !== 'undefined' && !(window as any).Buffer) {
+    (window as any).Buffer = Buffer;
+  }
+} catch (err) {
+  // Buffer polyfill failed – non-fatal.
 }
-export const projectId = process.env['NX_WALLET_CONNECT_ID'];
+
+// Legacy Web3Modal artifacts removed; no external modal client.
 
 const chains = Object.values(VIEM_CHAINS);
+// Debug log of chain list
+logChains(chains as unknown as { id: number; name?: string }[]);
 const { publicClient } = configureChains(
   chains,
   [
@@ -33,25 +45,54 @@ const { publicClient } = configureChains(
         };
       },
     }),
-    w3mProvider({ projectId }),
   ],
   { retryCount: 10 }
 );
+const includeSafe = process.env['NX_CONNECT_DISABLE_SAFE'] !== 'true';
+const walletConnectProjectId = process.env['NX_WALLET_CONNECT_ID'];
+
+const baseConnectors = [
+  // Injected first: rename so it doesn't clash label-wise with MetaMask when present
+  new InjectedConnector({
+    chains,
+    options: { shimDisconnect: true, name: 'Browser Wallet' },
+  }),
+  new MetaMaskConnector({ chains, options: { shimDisconnect: true } }),
+  new CoinbaseWalletConnector({
+    chains,
+    options: { appName: 'DAOhaus Admin' },
+  }),
+  ...(includeSafe
+    ? [
+        new SafeConnector({
+          chains,
+          options: {
+            allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/],
+            debug: false,
+          },
+        }),
+      ]
+    : []),
+  ...(walletConnectProjectId
+    ? [
+        new WalletConnectConnector({
+          chains,
+          options: {
+            projectId: walletConnectProjectId,
+            showQrModal: true, // uses WC's standalone QR (not Web3Modal UI)
+          },
+        }),
+      ]
+    : []),
+];
+
 export const wagmiConfig = createConfig({
   autoConnect: true,
-  connectors: [
-    ...w3mConnectors({ projectId, chains }),
-    new SafeConnector({
-      chains,
-      options: {
-        allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/],
-        debug: false,
-      },
-    }),
-  ],
+  connectors: baseConnectors,
   publicClient,
 });
-export const ethereumClient = new EthereumClient(wagmiConfig, chains);
+// Placeholder for backward compatibility; no external client now
+export const ethereumClient = undefined as unknown as Record<string, never>;
 
 export const Connect = ({
   children,
@@ -70,7 +111,6 @@ export const Connect = ({
       >
         {children}
       </ConnectProvider>
-      <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
     </WagmiConfig>
   );
 };

libs/connect-context/src/ConnectContext.tsx

@@ -7,7 +7,6 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { useWeb3Modal } from '@web3modal/react';
 import {
   useAccount,
   useDisconnect,
@@ -29,6 +28,7 @@ import {
 import { defaultConnectValues } from './utils/defaults';
 import { ConnectLifecycleFns, UserProfile } from './utils/types';
 import { loadProfile } from './utils';
+import InternalConnectModal from './components/InternalConnectModal';
 
 export type UserConnectType = {
   networks: NetworkConfigs;
@@ -58,14 +58,16 @@ export type ConnectProviderProps = {
   daoChainId?: string;
 };
 
+// Always use internal connect modal (Web3Modal removed)
+const useInternal = true;
+
 export const ConnectProvider = ({
   children,
   networks = HAUS_NETWORK_DATA,
   lifeCycleFns,
   daoChainId,
   daoId,
 }: ConnectProviderProps) => {
-  const { open, setDefaultChain } = useWeb3Modal();
   const { address, isConnecting } = useAccount();
   const { disconnect } = useDisconnect();
   const { chain } = useNetwork();
@@ -93,13 +95,11 @@ export const ConnectProvider = ({
     [chainId, networks]
   );
 
-  const connectWallet = useCallback(async () => {
-    if (daoChainId && VIEM_CHAINS[daoChainId as ValidNetwork]) {
-      setDefaultChain(VIEM_CHAINS[daoChainId as ValidNetwork]);
-    }
+  const [internalOpen, setInternalOpen] = useState(false);
 
-    open();
-  }, [open, setDefaultChain, daoChainId]);
+  const connectWallet = useCallback(async () => {
+    setInternalOpen(true);
+  }, []);
 
   const handleSwitchNetwork = async (_chainId: string | number) => {
     switchNetwork?.(Number(_chainId));
@@ -135,6 +135,19 @@ export const ConnectProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [address, chainId]);
 
+  // Auto switch to daoChainId if provided and connected and mismatch
+  useEffect(() => {
+    if (
+      daoChainId &&
+      isConnected &&
+      chain &&
+      Number(daoChainId) !== chain.id &&
+      switchNetwork
+    ) {
+      switchNetwork(Number(daoChainId));
+    }
+  }, [daoChainId, isConnected, chain, switchNetwork]);
+
   return (
     <ConnectContext.Provider
       value={{
@@ -155,6 +168,13 @@ export const ConnectProvider = ({
       }}
     >
       {children}
+      {useInternal && (
+        <InternalConnectModal
+          open={internalOpen}
+          onClose={() => setInternalOpen(false)}
+          defaultChainId={daoChainId ? Number(daoChainId) : undefined}
+        />
+      )}
     </ConnectContext.Provider>
   );
 };

libs/connect-context/src/assets/icons/MetaMask-icon-fox.svg

@@ -0,0 +1,11 @@
+// Module declarations for icon asset imports local to connect-context
+// Ensures TypeScript understands imported SVG/PNG modules in this lib.
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}