Merge pull request #421 from consensusnetworks/update/composables

Update/composables

apps/web/package.json

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@heroicons/vue": "^1.0.6",
-    "@solana/web3.js": "^1.63.1",
     "@walletconnect/sign-client": "^2.9.2",
     "@walletconnect/types": "^2.9.2",
     "@walletconnect/universal-provider": "^2.9.2",

apps/web/src/App.vue

@@ -1,30 +1,6 @@
 <script lang="ts" setup>
   import { RouterView } from 'vue-router'
   import DefaultLayout from '@/layouts/default-layout.vue'
-  import useTxData from '@/mockData/mock_transaction_data'
-  import { onMounted, watch } from 'vue'
-  import useUsers from '@/composables/users'
-
-  const { mockData } = useTxData()
-  // Need this to fix initilizing bug between user.ts and ssv.ts
-  const { user } = useUsers()
-
-  const runMockData = () =>{
-    if(user.value?.accounts.length && user.value?.accounts.length > 0){
-      const walletAddresses = user.value?.accounts.map(item => {
-        return item.address
-      }) as string[]
-      mockData(walletAddresses)
-    }
-  }
-
-  watch(user, () =>{
-    runMockData()
-  })
-
-  onMounted(() => {
-    runMockData()
-  })
 </script>
 
 <template>

apps/web/src/composables/auth.ts

@@ -1,5 +1,5 @@
 import useEnvironment from '@/composables/environment'
-import { LoginCredentials } from '@casimir/types'
+import { SignInWithEthereumCredentials } from '@casimir/types'
 
 const { domain, origin, usersUrl } = useEnvironment()
 
@@ -45,17 +45,17 @@ export default function useAuth() {
      * Signs user up if they don't exist, otherwise
      * logs the user in with an address, message, and signed message
      * 
-     * @param {LoginCredentials} loginCredentials - The user's address, provider, currency, message, and signed message 
+     * @param {SignInWithEthereumCredentials} signInWithEthereumCredentials - The user's address, provider, currency, message, and signed message 
      * @returns {Promise<Response>} - The response from the login request
      */
-    async function signInWithEthereum(loginCredentials: LoginCredentials): Promise<void> {
+    async function signInWithEthereum(signInWithEthereumCredentials: SignInWithEthereumCredentials): Promise<void> {
         try {
             const requestOptions = {
                 method: 'POST',
                 headers: { 
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify(loginCredentials)
+                body: JSON.stringify(signInWithEthereumCredentials)
             }
             const response = await fetch(`${usersUrl}/auth/login`, requestOptions)
             const { error, message } = await response.json()

apps/web/src/composables/ethers.ts

@@ -3,9 +3,7 @@ import { EthersProvider } from '@casimir/types'
 import { Account, TransactionRequest, UserWithAccountsAndOperators } from '@casimir/types'
 import { GasEstimate, LoginCredentials, MessageRequest, ProviderString } from '@casimir/types'
 import useAuth from '@/composables/auth'
-import useContracts from '@/composables/contracts'
 import useEnvironment from '@/composables/environment'
-import useUsers from '@/composables/users'
 
 interface ethereumWindow extends Window {
   ethereum: any;
@@ -31,31 +29,6 @@ export default function useEthers() {
     }
   }
 
-  async function blockListener(blockNumber: number) {
-    const { manager, refreshBreakdown } = useContracts()
-    const { user } = useUsers()
-
-    console.log('blockNumber :>> ', blockNumber)
-    const addresses = (user.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[]
-    const block = await provider.getBlockWithTransactions(blockNumber)
-
-    const txs = block.transactions.map(async (tx) => {
-        if (addresses.includes(tx.from.toLowerCase())) {
-            console.log('tx :>> ', tx)
-            try {
-                // const response = manager.interface.parseTransaction({ data: tx.data })
-                // console.log('response :>> ', response)
-                await refreshBreakdown()
-            } catch (error) {
-                console.error('Error parsing transaction:', error)
-            }
-        }
-    })
-
-    await Promise.all(txs)
-}
-
-
   /**
    * Estimate gas fee using EIP 1559 methodology
    * @returns string in ETH
@@ -176,13 +149,6 @@ export default function useEthers() {
     return maxAfterFees
   }
 
-  async function listenForTransactions() {
-    provider.on('block', blockListener as ethers.providers.Listener)
-    await new Promise(() => {
-      // Wait indefinitely using a Promise that never resolves
-    })
-  }
-
   async function loginWithEthers(loginCredentials: LoginCredentials): Promise<void>{
     const { provider, address, currency } = loginCredentials
     const browserProvider = getBrowserProvider(provider)
@@ -191,7 +157,7 @@ export default function useEthers() {
       const message = await createSiweMessage(address, 'Sign in with Ethereum to the app.')
       const signer = web3Provider.getSigner()
       const signedMessage = await signer.signMessage(message)
-      await signInWithEthereum({ 
+      await signInWithEthereum({
         address,
         currency,
         message, 
@@ -241,10 +207,6 @@ export default function useEthers() {
     return signature
   }
 
-  function stopListeningForTransactions() {
-    provider.off('block', blockListener as ethers.providers.Listener)
-  }
-
   async function switchEthersNetwork (providerString: ProviderString, chainId: string) {
     const provider = getBrowserProvider(providerString)
     const currentChainId = await provider.networkVersion
@@ -283,12 +245,10 @@ export default function useEthers() {
     getEthersBrowserSigner,
     getGasPriceAndLimit,
     getMaxETHAfterFees,
-    listenForTransactions,
     loginWithEthers,
     requestEthersAccount,
     sendEthersTransaction,
     signEthersMessage,
-    stopListeningForTransactions,
     switchEthersNetwork
   }
 }

apps/web/src/composables/format.ts

@@ -23,11 +23,16 @@ export default function useFormat() {
         const scale = Math.pow(10, tier * 3)
         const scaled = number / scale
         return scaled.toFixed(2) + suffix
-      }
+    }
+
+    function trimAndLowercaseAddress(address: string) {
+        return address.trim().toLowerCase()
+    }
 
     return { 
         convertString, 
         formatDecimalString,
-        formatNumber
+        formatNumber,
+        trimAndLowercaseAddress,
     }
 }

apps/web/src/composables/router.ts

@@ -1,5 +1,4 @@
 import { createWebHistory, createRouter } from 'vue-router'
-import useUsers from '@/composables/users'
 import Overview from '@/pages/overview/Overview.vue'
 import Operator from '@/pages/operators/Operator.vue'
 
@@ -31,22 +30,4 @@ const router = createRouter({
     routes
 })
 
-// TO DO: Add a routing beforeEach that 
-// dynamically fixes rerouting to auth page
-
-router.beforeEach(async (to, from, next) => {
-    const { checkUserSessionExists } = useUsers()
-    await checkUserSessionExists()
-    next()
-    // if (to.fullPath === '/auth' && !loggedIn) {
-    //     next()
-    // } else if (to.fullPath === '/auth' && loggedIn) {
-    //     next('/')
-    // } else if (!loggedIn) {
-    //     next('/auth')
-    // } else {
-    //     next()
-    // }
-})
-
 export default router

apps/web/src/composables/screenDimensions.ts

@@ -20,7 +20,6 @@ export default function useScreenDimensions() {
 
     onMounted(() => {
         if(!initializeComposable.value){
-            console.log('listening to screen dimensions')
             findScreenDimensions()
             window.addEventListener('resize', findScreenDimensions)
             initializeComposable.value = true