[WIP] Use web3modal to connect wallet

package.json

@@ -17,11 +17,12 @@
     "@types/node": "^20.12.6",
     "@uiw/codemirror-theme-vscode": "^4.20.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@web3modal/ethers5": "^5.0.3",
     "axios": "^1.2.0",
     "codemirror": "^6.0.1",
     "core-js": "^3.6.5",
     "ethereum-blockies-base64": "^1.0.2",
-    "ethers": "^5.7.2",
+    "ethers": "5.7.2",
     "fundebug-javascript": "^2.8.8",
     "fundebug-revideo": "^0.8.0",
     "fundebug-vue": "^0.3.6",
@@ -43,5 +44,10 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
     "vite": "^5.2.0"
-  }
+  },
+  "optionalDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/App.vue

@@ -11,40 +11,49 @@
 </template>
 <script>
 import { useStore } from 'vuex'
-import { onMounted, computed } from 'vue'
-import { useIsActivating } from './hooks/useIsActivating'
+import { onMounted } from 'vue'
 import { darkTheme } from 'naive-ui'
 import { getLs, setLs } from './service/service'
 import { demo } from './libs/demo'
 import { chains, defaultChain } from './libs/chains'
+import { createWeb3Modal, defaultConfig, useWeb3ModalProvider, useWeb3ModalAccount } from '@web3modal/ethers5/vue'
 
 export default {
   setup() {
     const store = useStore()
-    const { getProvider } = useIsActivating()
-
-    const provider = computed(() => {
-      return store.state.provider
+    // 1. Get projectId at https://cloud.walletconnect.com
+    const projectId = '...'
+    // 2. Set chains
+    const networks = chains.map(c => ({
+      chainId: c.chainId,
+      name: c.name,
+      currency: c.nativeCurrency.symbol,
+      rpcUrl: c.rpc[0],
+      explorerUrl: c.explorers?.[0]?.url
+    }))
+    // 3. Create your application's metadata object
+    const metadata = {
+      name: 'Dappreader',
+      description: 'Dapp reader',
+      url: 'https://mywebsite.com', // url must match your domain & subdomain
+      icons: ['https://avatars.mywebsite.com/']
+    }
+    // 4. Create Ethers config
+    const ethersConfig = defaultConfig({
+      /*Required*/
+      metadata,
+      /*Optional*/
+      enableInjected: true, // true by default
     })
-    const network = computed(() => {
-      return store.state.network
+
+    // 5. Create a Web3Modal instance
+    createWeb3Modal({
+      ethersConfig,
+      chains: networks,
+      projectId,
+      enableAnalytics: true, // Optional - defaults to your Cloud configuration
+      enableOnramp: true // Optional - false as default
     })
-    const fn = () => {
-      let ethereum = window.ethereum
-      if (!ethereum) return
-      ethereum.on("accountsChanged", (accounts) => {
-        console.log("账号切换", accounts[0])
-        if (!accounts[0]) {
-          store.commit('init')
-        } else {
-          getProvider()
-        }
-      })
-      ethereum.on("chainChanged", (chainId) => {
-        console.log("用户切换了链", chainId)
-        getProvider()
-      })
-    }
     const getData = async () => {
       let inited = localStorage.inited || false
       let menuList = await getLs('menuList') || []
@@ -55,7 +64,7 @@ export default {
       let userInfo = localStorage.getItem('userInfo') || null
       if (userInfo) userInfo = JSON.parse(userInfo)
       if (!inited) {
-        let { abi, address, chainId, name, remark} = demo
+        let { abi, address, chainId, name, remark } = demo
         let chain = chains.filter(e => e.chainId == chainId)[0]
         let demoData = {
           abi,
@@ -81,21 +90,17 @@ export default {
       store.commit("setUserInfo", userInfo || {})
       store.commit("setActiveId", activeId)
     }
-    
+
     onMounted(() => {
       if (window.top === window.self) {
         store.commit("setIsIframe", false)
       } else {
         store.commit("setIsIframe", true)
       }
-      getProvider()
-      fn()
       getData()
     })
 
     return {
-      provider,
-      network,
       darkTheme,
       darkThemeOverrides: {
         common: {

src/components/Contract.vue

@@ -396,8 +396,7 @@ export default {
     let running = false
     const message = useMessage()
     const { toEtherscanAddress, copy, setData } = useUtils()
-    const { getProvider } = useIsActivating()
-    const { switchChain } = useNetwork()
+    const { switchChain, provider, address, network } = useNetwork()
     const store = useStore()
     const showPopover = ref(false)
     const readFun = ref(null)
@@ -418,24 +417,15 @@ export default {
     const showSendInfo = ref(false)
     const isShowHd = ref(true)
     const funOtherName = ref('')
-    const provider = computed(() => {
-      return store.state.provider
-    })
     const results = computed(() => {
       return store.state.results
     })
     const menuList = computed(() => {
       return store.state.menuList
     })
-    const network = computed(() => {
-      return store.state.network
-    })
     const activeId = computed(() => {
       return store.state.activeId
     })
-    const address = computed(() => {
-      return store.state.address
-    })
     const contractList = computed(() => {
       return store.state.contractList
     })

src/components/ContractHd.vue

@@ -230,6 +230,7 @@ import { useDialog, useMessage } from "naive-ui"
 import { updateContract, checkContractInfo, getContract } from '../http/abi'
 import { chains } from '../libs/chains'
 import { formatAddress } from '../libs/utils'
+import { useNetwork } from '../hooks/useNetwork'
 export default {
   props: ['contract'],
   components: {
@@ -242,6 +243,7 @@ export default {
     SourceCodeModal
   },
   setup(props, { emit }) {
+    const { address, provider } = useNetwork()
     const store = useStore()
     const dialog = useDialog()
     const message = useMessage()
@@ -263,12 +265,6 @@ export default {
 
     const { toEtherscanAddress, copy, setData } = useUtils()
 
-    const provider = computed(() => {
-      return store.state.provider
-    })
-    const address = computed(() => {
-      return store.state.address
-    })
     const getAddress = computed(() => {
       return (value) => {
         return formatAddress(value)

src/components/ContractInfo.vue

@@ -27,15 +27,14 @@ import { useStore } from 'vuex'
 import { ethers } from 'ethers'
 import { useUtils } from '../hooks/useUtils'
 import { formatDate, formatAddress } from '../libs/utils'
+import { useNetwork } from '../hooks/useNetwork'
 export default {
   props: ['contract'],
   setup(props) {
     const store = useStore()
     const balance = ref(0)
     const { copy } = useUtils()
-    const provider = computed(() => {
-      return store.state.provider
-    })
+    const { provider } = useNetwork()
     const createAt = computed(() => {
       return (date) => {
         return formatDate('YYYY-mm-dd', date)

src/components/ContractMsg.vue

@@ -217,6 +217,7 @@ import { updateContract, checkContractInfo, getContract } from '../http/abi'
 import { chains } from '../libs/chains'
 import { formatDate, formatAddress } from '../libs/utils'
 import SourceCodeModal from '../components/SourceCodeModal.vue'
+import { useNetwork } from '../hooks/useNetwork'
 
 export default {
   props: ['contract'],
@@ -248,15 +249,9 @@ export default {
     const activeName = ref('')
     const activeIndex = ref(-1)
     const contractData = ref({})
+    const { address, provider } = useNetwork()
 
     const { toEtherscanAddress, copy, setData } = useUtils()
-
-    const provider = computed(() => {
-      return store.state.provider
-    })
-    const address = computed(() => {
-      return store.state.address
-    })
 
     const createAt = computed(() => {
       return (date) => {

src/components/Nav.vue

@@ -41,11 +41,11 @@
           </div>
         </div>
       </div>
-      <div class="wallet flex-center" v-if="address" @click="copy">
+       <w3m-button />
+      <!-- <div class="wallet flex-center" v-if="address" @click="copy">
         <div class="address">{{formatAddress(address)}}</div>
         <div class="nickname">{{fixed(balance)}}</div>
-      </div>
-      <div v-else class="wallet wallet-btn flex-center" @click="connectWallet">Connect Wallet</div>
+      </div> -->
       <div v-if="!isIframe">
         <div v-if="userInfo.address" class="user-info" @click="editUser">
           <div class="user-avatar">
@@ -74,8 +74,6 @@
 import { useStore } from 'vuex'
 import { computed, watch, ref, toRaw } from 'vue'
 import { chains, icons } from '../libs/chains'
-import { useIsActivating } from '../hooks/useIsActivating'
-import { useNetwork } from '../hooks/useNetwork'
 import { useMessage } from 'naive-ui'
 import { ethers } from 'ethers'
 import { chainsOptions } from '../libs/chainsOptions'
@@ -87,6 +85,8 @@ import LoginModal from '../components/LoginModal.vue'
 import AddChainModal from '../components/AddChainModal.vue'
 import EditModal from '../components/EditModal.vue'
 import { checkUserRegist, login, regist, getNftList, getUserInfo, updateUserInfo } from '../http/abi'
+import { useNetwork } from '../hooks/useNetwork'
+
 export default {
   components: {
     Avatar,
@@ -102,8 +102,7 @@ export default {
     let interval = null
     const store = useStore()
     const message = useMessage()
-    const { getProvider } = useIsActivating()
-    const { switchChain } = useNetwork()
+    const { switchChain, address, provider, network } = useNetwork()
     const chainId = ref(null)
     const addChainModal = ref(null)
     const editModal = ref(null)
@@ -130,15 +129,6 @@ export default {
     const defaultChains = computed(() => {
       return store.state.defaultChains
     })
-    const provider = computed(() => {
-      return store.state.provider
-    })
-    const network = computed(() => {
-      return store.state.network
-    })
-    const address = computed(() => {
-      return store.state.address
-    })
     const balance = computed(() => {
       return store.state.balance
     })

src/hooks/useIsActivating.js

@@ -1,37 +1,15 @@
 
 import { useStore } from 'vuex'
-import { connectWallet } from '../libs/connectWallet'
-import {chains} from '../libs/chains'
 import { toRaw } from 'vue'
 import { ethers } from 'ethers'
+
 export const useIsActivating = () => {
   const store = useStore()
-  let provider = null
-  const getProvider = async(init) => {
-    try {
-      provider = await connectWallet(init)
-      store.commit('setProvider', toRaw(provider))
-      getWallet()
-      getNetwork()
-    } catch (error) {
-      console.error(error) 
-    }
-  }
-
-  const getNetwork = async() => {
-    if (!provider) return
-    let network = await provider.getNetwork()
-    let networkData = chains.filter(e => network.chainId == e.chainId)[0]
-    network.name = networkData.name
-    store.commit('setNetwork', toRaw(network))
-  }
 
-  const getWallet = async() => {
+  const getWallet = async(provider) => {
     if (!provider) return
     let accounts = await provider.listAccounts()
     if (accounts.length) {
-      let address = accounts[0]
-      store.commit('setAddress', address)
       try {
         provider.getBalance(address).then(res => {
           let balance = res
@@ -45,8 +23,6 @@ export const useIsActivating = () => {
   }
 
   return {
-    getProvider,
     getWallet,
-    getNetwork
   }
 }

src/hooks/useNetwork.js

@@ -1,17 +1,20 @@
-import { walletSwitchChain } from "../libs/walletSwitchChain";
-import { useIsActivating } from '../hooks/useIsActivating'
+import { useWeb3ModalProvider, useSwitchNetwork } from '@web3modal/ethers5/vue'
+import { useWeb3ModalAccount } from '@web3modal/ethers5/vue'
+import { ethers } from 'ethers'
+import { computed } from 'vue'
+import { chains } from '../libs/chains'
 
 export const useNetwork = () => {
-  const { getProvider } = useIsActivating()
-  const switchChain = (chainId) => {
-    walletSwitchChain(chainId).then(res => {
-      console.log(res)
-    }).catch(err => {
-      console.error(err)
-      getProvider()
-    })
-  }
+  const { switchNetwork: switchChain } = useSwitchNetwork()
+  const { address, chainId } = useWeb3ModalAccount()
+  const { walletProvider } = useWeb3ModalProvider()
+  const provider = computed(() => walletProvider.value && new ethers.providers.Web3Provider(walletProvider.value))
+  const network = computed(() => chains.find(e => chainId.value == e.chainId))
+
   return {
-    switchChain
+    switchChain,
+    address,
+    provider,
+    network,
   }
 }