Commit modifications to WalletConnect-related files; npm run clean fail

apps/web/package.json

@@ -10,18 +10,17 @@
   "dependencies": {
     "@heroicons/vue": "^1.0.6",
     "@solana/web3.js": "^1.63.1",
-    "@wagmi/core": "^1.3.8",
-    "@walletconnect/web3-provider": "^1.8.0",
-    "@web3modal/ethereum": "^2.7.1",
-    "@web3modal/html": "^2.7.1",
+    "@walletconnect/sign-client": "^2.9.2",
+    "@walletconnect/types": "^2.9.2",
+    "@walletconnect/universal-provider": "^2.9.2",
     "@web3modal/standalone": "^2.4.3",
     "borsh": "^0.7.0",
     "buffer": "^6.0.3",
+    "caip-api": "^1.4.6",
     "d3": "^7.8.1",
     "ethers": "^5.7.2",
     "supertokens-web-js": "^0.5.0",
     "util": "^0.12.5",
-    "viem": "^1.4.1",
     "vue": "^3.2.25",
     "vue-router": "^4.0.15",
     "web3": "^1.8.1",

apps/web/src/composables/wallet.ts

@@ -42,7 +42,7 @@ export default function useWallet() {
   // const { solanaProviderList, sendSolanaTransaction, signSolanaMessage } = useSolana()
   const { getTrezorAddress, loginWithTrezor, sendTrezorTransaction, signTrezorMessage } = useTrezor()
   const { addAccount, getUser, checkIfSecondaryAddress, checkIfPrimaryUserExists, removeAccount, setUser, setUserAnalytics, setUserAccountBalances, updatePrimaryAddress, user } = useUsers()
-  const { web3modal, disconnectWalletConnect, getWalletConnectAddressAndBalance, loginWithWalletConnectV2 } = useWalletConnectV2()
+  const { /* web3modal, disconnectWalletConnect, getWalletConnectAddressAndBalance, */ loginWithWalletConnectV2 } = useWalletConnectV2()
 
   function getColdStorageAddress(provider: ProviderString, currency: Currency = 'ETH') {
     if (provider === 'Ledger') {
@@ -184,7 +184,7 @@ export default function useWallet() {
     setSelectedCurrency('')
     setPrimaryAddress('')
     setUserAnalytics()
-    await disconnectWalletConnect()
+    // await disconnectWalletConnect()
     await refreshBreakdown()
     // TODO: Fix bug that doesn't allow you to log in without refreshing page after a user logs out
     window.location.reload()
@@ -291,15 +291,15 @@ export default function useWallet() {
     try {
       if (provider === 'WalletConnect') {
         setSelectedProvider(provider)
-        web3modal.openModal()
+        // web3modal.openModal()
         // TODO: Need a way of unsubscribing from events
-        web3modal.subscribeEvents(async (event) => {
-          const { name } = event
-          if (name === 'ACCOUNT_CONNECTED') {
-            const walletConnectAddressAndBalance = await getWalletConnectAddressAndBalance()
-            setWalletProviderAddresses([walletConnectAddressAndBalance])
-          }
-        })
+        // web3modal.subscribeEvents(async (event) => {
+        //   const { name } = event
+        //   if (name === 'ACCOUNT_CONNECTED') {
+        //     const walletConnectAddressAndBalance = await getWalletConnectAddressAndBalance()
+        //     setWalletProviderAddresses([walletConnectAddressAndBalance])
+        //   }
+        // })
       } else if (ethersProviderList.includes(provider)) {
         setSelectedProvider(provider)
         const ethersAddresses = await getEthersAddressWithBalance(provider) as CryptoAddress[]

apps/web/src/composables/walletConnectV2.ts

@@ -1,60 +1,32 @@
 import { ethers } from 'ethers'
-import { EthersWalletConnectSigner } from '@casimir/wallets'
-import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
-import { Web3Modal } from '@web3modal/html'
-import { configureChains, createConfig, mainnet, signMessage } from '@wagmi/core'
-import { publicProvider } from '@wagmi/core/providers/public'
-import { CryptoAddress, LoginCredentials } from '@casimir/types'
-import { infuraProvider } from '@wagmi/core/providers/infura'
+import { LoginCredentials } from '@casimir/types'
 import useAuth from '@/composables/auth'
-import useEthers from '@/composables/ethers'
 import useEnvironment from '@/composables/environment'
+import { EthersWalletConnectSigner } from '@casimir/wallets'
 
 
-const { getEthersBalance } = useEthers()
 const { createSiweMessage, signInWithEthereum } = useAuth()
 const { ethereumUrl } = useEnvironment()
 
-// const chains = [mainnet]
-const projectId = '8e6877b49198d7a9f9561b8712805726'
-
-
-
-const { chains, publicClient } = configureChains(
-  [mainnet],
-  [w3mProvider({ projectId }), publicProvider()]
-)
-const wagmiConfig = createConfig({
-  autoConnect: true,
-  connectors: w3mConnectors({ projectId, chains }),
-  publicClient
-})
-
 export default function useWalletConnectV2() {
-  const ethereumClient = new EthereumClient(wagmiConfig, chains)
-  const web3modal = new Web3Modal({ projectId }, ethereumClient)
 
+  // TODO: Implement this in order to show ability to stake
   async function getEthersWalletConnectSignerV2() {
-    // const options = {
-    //   provider: new ethers.providers.JsonRpcProvider(ethereumUrl),
-    //   // baseURL: speculosUrl
-    // }
-    // return new EthersWalletConnectSigner(options)
-    const signer = EthersWalletConnectSigner.create({})
-    // const signer = await EthersWalletConnectSigner.create({ provider: new ethers.providers.JsonRpcProvider(ethereumUrl) })
-    console.log('signer :>> ', signer)
-    return signer
-  }
-
-  async function getWalletConnectAddressAndBalance() : Promise<CryptoAddress> {
-    const { address } = (ethereumClient.getAccount())
-    const balance = (await getEthersBalance(address as string)).toString()
-    return {
-      address: address?.toLowerCase() as string,
-      balance: balance as string
+    const options = {
+      provider: new ethers.providers.JsonRpcProvider(ethereumUrl),
+      // rpcUrl: ethereumUrl
     }
+    const signer = new EthersWalletConnectSigner(options)
+    const initializedWallet = await signer.initializeWalletConnectClient()
+    // const connect = await initializedWallet.connect({})
+    // console.log('connect :>> ', connect)
+    const mainnetCaip = 'eip155:1'
+    const goerliCaip = 'eip155:5'
+    const connectWalletResult = await signer.connectWallet(goerliCaip)
+    return signer
   }
 
+  // TODO: Check on signMessage
   async function loginWithWalletConnectV2(loginCredentials: LoginCredentials) {
     const { provider, address, currency } = loginCredentials
     try {
@@ -73,8 +45,6 @@ export default function useWalletConnectV2() {
   }
 
   return {  
-    web3modal,
-    getWalletConnectAddressAndBalance,
     getEthersWalletConnectSignerV2,
     loginWithWalletConnectV2
   }

apps/web/src/layouts/default-layout.vue

@@ -7,16 +7,11 @@ import VueFeather from 'vue-feather'
 import useFormat from '@/composables/format'
 import useScreenDimensions from '@/composables/screenDimensions'
 import useUser from '@/composables/users'
-import useWalletConnectV2 from '@/composables/walletConnectV2'
-const { getEthersWalletConnectSignerV2 } = useWalletConnectV2()
-
-async function func() {
-  await getEthersWalletConnectSignerV2()
-}
 import useWallet from '@/composables/wallet'
+import WalletConnectProvider from '@/components/WalletConnectProvider.vue'
 
 const authFlowCardNumber = ref(1)
-const selectedProivder = ref(null as null | string)
+const selectedProvider = ref(null as null | string)
 const termsCheckbox = ref(true)
 
 const openRouterMenu = ref(false)
@@ -78,14 +73,7 @@ onUnmounted(() =>{
 
 <template>
   <div class="min-w-[360px]">
-    <!-- Huge button -->
-    <button
-      class="absolute top-0 right-0 w-[60px] h-[60px] bg-white rounded-[8px] flex justify-center items-center"
-      style="z-index: 10;"
-      @click="func"
-    >
-      GetWalletConnectEthersSigner
-    </button>
+    <WalletConnectProvider />
     <div :class="openWalletConnect? 'flex flex-col h-screen' : ''">
       <div
         class="px-[60px] 800s:px-[5%]  pt-[17px] pb-[19px] flex flex-wrap gap-[20px] justify-between items-center bg-black relative"
@@ -303,7 +291,7 @@ onUnmounted(() =>{
                   v-for="wallet in activeWallets"
                   :key="wallet"
                   class="w-[140px] h-[100px] border flex flex-col justify-center items-center rounded-[8px]"
-                  @click="selectProvider(wallet, 'ETH'), authFlowCardNumber = 2, selectedProivder = wallet"
+                  @click="selectProvider(wallet, 'ETH'), authFlowCardNumber = 2, selectedProvider = wallet"
                 >
                   <img
                     :src="`/${wallet.toLowerCase()}.svg`"
@@ -323,7 +311,7 @@ onUnmounted(() =>{
               class="absolute top-0 left-0 w-full h-full bg-white card px-[50px] py-[25px]"
             >
               <h6 class="nav_items flex items-center mb-[20px]">
-                <button @click="authFlowCardNumber = 1, selectedProivder = null">
+                <button @click="authFlowCardNumber = 1, selectedProvider = null">
                   <vue-feather
                     type="chevron-left"
                     size=""
@@ -337,7 +325,7 @@ onUnmounted(() =>{
                 class="flex items-center justify-center h-[90%]"
               >
                 <h6 class="nav_items">
-                  Waiting on {{ selectedProivder }}...
+                  Waiting on {{ selectedProvider }}...
                 </h6>
               </div>
               <div v-else>

common/wallets/package.json

@@ -12,7 +12,6 @@
     "@ledgerhq/hw-transport": "^6.27.10",
     "@ledgerhq/hw-transport-webusb": "^6.27.10",
     "@trezor/connect-web": "^9.0.3",
-    "@walletconnect/ethereum-provider": "^2.9.1",
     "ethers": "^5.7.2"
   }
 }