web3 modal integration and adding disconnect logic

src/blockchain/wallet.js

@@ -9,6 +9,7 @@ import {metadataMap, version} from "@/version.js";
 import {TransactionState, TransactionType} from "@/blockchain/transactionDecl.js";
 import {track} from "@/track.js";
 import {socket} from "@/socket.js";
+import {web3modal} from "@/blockchain/web3modal.js";
 
 
 export const useWalletStore = defineStore('wallet', ()=>{
@@ -131,7 +132,8 @@ export function detectChain() {
   }
 }
 
-detectChain()
+// Commented out - Web3Modal handles wallet detection now
+// detectChain()
 
 const errorHandlingProxy = {
   get(target, prop, proxy) {
@@ -166,31 +168,72 @@ const errorHandlingProxy = {
 
 
 export async function connectWallet(chainId) {
-  console.log('connectWallet', chainId)
+  console.log('connectWallet via Web3Modal', chainId)
   try {
-    await switchChain(chainId)
-    console.log('getSigner')
-    const p = new BrowserProvider(window.ethereum, chainId)
+    // Open Web3Modal
+    const walletProvider = await web3modal.open()
+
+    if (!walletProvider) {
+      throw new Error('No provider returned from Web3Modal')
+    }
+
+    // Create ethers provider from Web3Modal provider
+    const p = new BrowserProvider(walletProvider, chainId)
+    setProvider(p)
+
+    // Get signer and accounts
     await p.getSigner()
+
+    // Update wallet store
+    const ws = useWalletStore()
+    ws.chainId = chainId
+
     await updateAccounts(chainId, p)
-  }
-  catch (e) {
+
+    // Subscribe to Web3Modal provider events
+    subscribeToProviderEvents(walletProvider)
+
+  } catch (e) {
     console.log('connectWallet error', e.reason, e)
-    if (e.reason==='rejected') {
+    if (e.reason === 'rejected' || e.message?.includes('rejected')) {
       const ws = useWalletStore();
       const tx = ws.transaction
       if (tx) {
         tx.state = TransactionState.Rejected
         ws.transaction = null
       }
-    }
-    else {
+    } else {
       console.error(e, e.reason)
       throw e
     }
   }
 }
 
+// Subscribe to provider events from Web3Modal
+function subscribeToProviderEvents(walletProvider) {
+  // Handle account changes
+  walletProvider.on('accountsChanged', (accounts) => {
+    console.log('accountsChanged from Web3Modal', accounts)
+    if (accounts.length === 0) {
+      disconnectWallet()
+    } else {
+      onAccountsChanged(accounts)
+    }
+  })
+
+  // Handle chain changes
+  walletProvider.on('chainChanged', (chainId) => {
+    console.log('chainChanged from Web3Modal', chainId)
+    onChainChanged(chainId)
+  })
+
+  // Handle disconnect
+  walletProvider.on('disconnect', () => {
+    console.log('Provider disconnected from Web3Modal')
+    disconnectWallet()
+  })
+}
+
 
 function discoverVaults(owner) {
   const s = useStore()
@@ -659,3 +702,44 @@ export async function addNetworkAndConnectWallet(chainId) {
             console.log('connectWallet() failed', e)
     }
 }
+
+export async function disconnectWallet() {
+  console.log('disconnectWallet')
+  const store = useStore()
+  const ws = useWalletStore()
+
+  // Disconnect from Web3Modal
+  try {
+    await web3modal.disconnect()
+  } catch (e) {
+    console.log('Web3Modal disconnect error (ignoring)', e)
+  }
+
+  // Clear provider
+  setProvider(null)
+
+  // Clear account and vaults
+  store.account = null
+  store.vaults = []
+  store.vaultVersions = []
+
+  // Clear any pending transactions
+  if (ws.transaction !== null) {
+    ws.transaction = null
+  }
+  ws.pendingOrders = []
+
+  // Clear transaction senders
+  store.transactionSenders = []
+
+  // Emit socket disconnect
+  socket.emit('address', ws.chainId, null)
+
+  track('logout', {chainId: ws.chainId})
+  console.log('Wallet disconnected')
+}
+
+// Make it globally accessible from console
+if (typeof window !== 'undefined') {
+  window.disconnectWallet = disconnectWallet
+}

src/blockchain/web3modal.js

@@ -0,0 +1,50 @@
+// src/blockchain/web3modal.js
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers'
+
+const projectId = 'a2302c95fedb32f4c64672a41159df37' // Get from https://cloud.walletconnect.com
+
+const chains = [
+    {
+        chainId: 42161,
+        name: 'Arbitrum One',
+        currency: 'ETH',
+        explorerUrl: 'https://arbiscan.io',
+        rpcUrl: 'https://arbitrum-mainnet.infura.io'
+    },
+    {
+        chainId: 1337,
+        name: 'Dexorder Alpha Testnet',
+        currency: 'TETH',
+        explorerUrl: '',
+        rpcUrl: 'https://rpc.alpha.dexorder.com'
+    },
+    {
+        chainId: 31337,
+        name: 'Mockchain',
+        currency: 'TETH',
+        explorerUrl: '',
+        rpcUrl: 'http://localhost:8545'
+    }
+]
+
+const ethersConfig = defaultConfig({
+    metadata: {
+        name: 'Dexorder',
+        description: 'Dexorder Trading Platform',
+        url: window.location.origin,
+        icons: ['https://your-icon-url.com']
+    },
+    defaultChainId: 42161,
+    enableEIP6963: true,
+    enableInjected: true,
+    enableCoinbase: true,
+    rpcUrl: 'https://arbitrum-mainnet.infura.io'
+})
+
+export const web3modal = createWeb3Modal({
+    ethersConfig,
+    chains,
+    projectId,
+    enableAnalytics: false,
+    themeMode: 'dark'
+})