Promote develop to master

README.md

@@ -68,9 +68,8 @@ npm run dev
 | `--clean` | Whether to clean the local database | true | --clean=false |
 | `--emulate` | Whether to use local wallet emulators | false | --emulate=ethereum |
 | `--fork` | Which live Ethereum network to fork locally | goerli | --fork=mainnet |
-| `--mock` | Whether to mock services | true | --mock=false |
+| `--mock` | Whether to mock backend services and external contracts | true | --mock=false |
 | `--network` | Which live Ethereum network to use | goerli | --network=mainnet |
-| `--simulation` | Whether to run contract simulation fixture | false | --simulation |
 
 **Example commands:**
 

apps/web/src/components/charts/LineChartJS.vue

@@ -36,11 +36,11 @@ onMounted(() => {
 						label : 'Net Value',
 						borderColor : '#C1D3F8',
                         fill: false,
-                        tension: 0.4,
 					}]
 		},
 		options : {
-            responsive: true,
+            responsive: false,
+            maintainAspectRatio: false,
             plugins: {
                 legend: {
                     display: props.legend,
@@ -75,14 +75,31 @@ onMounted(() => {
             }
 		}
     })
+
+    const line_chart_container_el = document.getElementById('line_chart_container_' + props.id)
+    let WIDTH = 0
+    let HEIGHT =  0
+
+     // watches for size changes... 
+    const outputsize = () => {
+        if(line_chart_container_el){
+            WIDTH = line_chart_container_el.offsetWidth
+            HEIGHT = line_chart_container_el.offsetHeight
+        }
+        chart.value.resize(WIDTH -20 , HEIGHT)
+    }
+    if(line_chart_container_el){
+        new ResizeObserver(outputsize).observe(line_chart_container_el)   
+    }
 })
 </script>
 
 <template>
-  <div>
+  <div 
+    class="h-full w-full px-10"
+  >
     <canvas
       :id="props.id"
-      class="w-full h-full"
     />
   </div>
 </template>

apps/web/src/composables/ethers.ts

@@ -3,8 +3,10 @@ import { ethers } from 'ethers'
 import { BrowserProviders, EthersProvider, MessageInit, TransactionInit } from '@/interfaces/index'
 import { Currency, ProviderString } from '@casimir/types'
 import useAuth from '@/composables/auth'
+import useEnvironment from '@/composables/environment'
 
 const { getMessage, login } = useAuth()
+const { ethereumURL } = useEnvironment()
 
 const defaultProviders = {
   MetaMask: undefined,
@@ -25,23 +27,10 @@ export default function useEthers() {
     }
   }
 
-  // TODO: Identify the difference beteween the two functions below (requestEthersBalance and getEthersBalance)
-  async function requestEthersBalance(provider: EthersProvider, address: string) {
-    if (provider?.request) {
-      return await provider.request({
-        method: 'eth_getBalance',
-        params: [address, 'latest'],
-      })
-    }
-  }
-
-  async function getEthersBalance(providerString: ProviderString, address: string, ) {
-    const provider = availableProviders.value[providerString as keyof BrowserProviders]
-    if (provider) {
-      const balance = await requestEthersBalance(provider as EthersProvider, address)
-      console.log('balance :>> ', balance)
-      return ethers.utils.formatEther(balance)
-    }
+  async function getEthersBalance(address: string, ) {
+    const provider = new ethers.providers.JsonRpcProvider(ethereumURL)
+    const balance = await provider.getBalance(address)
+    return ethers.utils.formatEther(balance)
   }
 
   function getEthersBrowserSigner(providerString: ProviderString): ethers.Signer | undefined {

apps/web/src/composables/ledger.ts

@@ -1,4 +1,5 @@
 import { BitcoinLedgerSigner, EthersLedgerSigner } from '@casimir/wallets'
+import { EthersProvider } from '@/interfaces/index'
 import { ethers } from 'ethers'
 import { MessageInit, TransactionInit } from '@/interfaces/index'
 import { Currency, ProviderString } from '@casimir/types'

apps/web/src/composables/router.ts

@@ -1,4 +1,6 @@
 import { createWebHistory, createRouter } from 'vue-router'
+import useWallet from '@/composables/wallet'
+import useUsers from '@/composables/users'
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import Dashboard from '@/pages/dashboard/Dashboard.vue'
@@ -16,6 +18,11 @@ const routes = [
         name: Auth, 
         component: Auth,
     },
+    { 
+        path: '/:pathMatch(.*)*', 
+        name: Dashboard, 
+        component: Dashboard,
+    },
     { 
         path: '/test', 
         name: Test, 
@@ -32,4 +39,27 @@ const router = createRouter({
 // TO DO: Add a routing beforeEach that 
 // dynamically fixes rerouting to auth page
 
+router.beforeEach(async (to, from, next) => {
+    if (import.meta.env.DEV) {
+        const appLaunched = sessionStorage.getItem('appLaunch')
+        if (!appLaunched) {
+            const { logout } = useWallet()
+            await logout()
+            sessionStorage.setItem('appLaunch', 'true')
+        }
+    }
+
+    const { checkUserSessionExists } = useUsers()
+    const loggedIn = await checkUserSessionExists()
+    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/ssv.ts

@@ -22,10 +22,10 @@ export default function useSSV() {
 
     if (!casimirManager) {
         casimirManager = (() => {
-            const address = import.meta.env.PUBLIC_SSV_MANAGER
+            const address = import.meta.env.PUBLIC_CASIMIR_MANAGER
             if (!address) console.log(
                 `
-                The PUBLIC_SSV_MANAGER environment variable is empty.\n
+                The PUBLIC_CASIMIR_MANAGER environment variable is empty.\n
                 If you are on mainnet or testnet, the contract does not exist yet.\n
                 If you are on the local network, check your terminal logs for a contract address or errors.
                 `

apps/web/src/composables/wallet.ts

@@ -8,6 +8,7 @@ import useUsers from '@/composables/users'
 import { Account, ProviderString, Currency } from '@casimir/types'
 import { MessageInit, TransactionInit } from '@/interfaces/index'
 import * as Session from 'supertokens-web-js/recipe/session'
+import router from './router'
 
 // Test ethereum send to address : 0xD4e5faa8aD7d499Aa03BDDE2a3116E66bc8F8203
 // Test ethereum send to address : 0xd557a5745d4560B24D36A68b52351ffF9c86A212
@@ -75,7 +76,7 @@ export default function useWallet() {
    * @param currency 
    * @returns 
   */
-  async function connectWallet(provider: ProviderString, currency?: Currency) {
+  async function connectWallet(provider: ProviderString, currency: Currency = 'ETH') {
     try { // Sign Up or Login
       if (!user?.value?.address) {
         const connectedAddress = await getConnectedAddressFromProvider(provider, currency) as string
@@ -89,6 +90,8 @@ export default function useWallet() {
           setSelectedCurrency(connectedCurrency)
           primaryAddress.value = user?.value?.address as string
         }
+        loadingUserWallets.value = false
+        router.push('/')
       } else { // Add account
         console.log('already logged in')
         const connectedAddress = await getConnectedAddressFromProvider(provider, currency) as string
@@ -117,9 +120,11 @@ export default function useWallet() {
             setSelectedAddress(connectedAddress)
             setSelectedCurrency(connectedCurrency)
             primaryAddress.value = user?.value?.address as string
+            router.push('/')
           }
         }
       }
+      await setUserAccountBalances()
       console.log('user.value after connecting wallet :>> ', user.value)
       return user.value
     } catch (error) {
@@ -176,6 +181,31 @@ export default function useWallet() {
     }
   }
 
+  async function getAccountBalance(account: Account) {
+    // TODO: Find where api endpoint is configured for ethers.
+    try {
+      const balance = await getEthersBalance(account.address)
+      return balance
+    } catch (err) {
+      console.error('There was an error in getAccountBalance :>> ', err)
+    }
+  }
+
+  async function setUserAccountBalances() {
+    if (user?.value?.accounts) {
+      const accounts = user.value.accounts
+      const accountsWithBalances = await Promise.all(accounts.map(async (account: Account) => {
+        const balance = await getAccountBalance(account)
+        return {
+          ...account,
+          balance
+        }
+      }))
+      user.value.accounts = accountsWithBalances
+      setUser(user.value)
+    }
+  }
+
   // TODO: What is this used for? 
   // Do we need balance of active address only? 
   // Or do we need balance of all addresses in accounts associated with user? 
@@ -219,6 +249,7 @@ export default function useWallet() {
     primaryAddress.value = ''
     console.log('user.value on logout :>> ', user.value)
     loadingUserWallets.value = false
+    router.push('/auth')
   }
 
   async function removeConnectedAccount() {
@@ -361,6 +392,7 @@ export default function useWallet() {
     getUserBalance,
     removeConnectedAccount,
     sendTransaction,
+    setUserAccountBalances,
     setPrimaryWalletAccount,
     signMessage,
     switchNetwork

apps/web/src/index.css

@@ -406,8 +406,8 @@ background: #555;
     .switch {
         position: relative;
         display: inline-block;
-        width: 45px;
-        height: 20px;
+        width: 36px;
+        height: 16px;
     }
 
     .switch input {
@@ -432,10 +432,9 @@ background: #555;
     .slider:before {
         position: absolute;
         content: "";
-        height: 12px;
-        width: 12px;
+        height: 10px;
+        width: 10px;
         left: 4px;
-        bottom: 4px;
         background-color: white;
         -webkit-transition: .4s;
         transition: .4s;
@@ -450,20 +449,41 @@ background: #555;
     }
 
     input:checked + .slider:before {
-        -webkit-transform: translateX(26px);
-        -ms-transform: translateX(26px);
-        transform: translateX(26px);
+        -webkit-transform: translateX(18px);
+        -ms-transform: translateX(18px);
+        transform: translateX(18px);
     }
 
     .slider.round {
-        border-radius: 34px;
+        border-radius: 100px;
     }
 
     .slider.round:before {
         border-radius: 50%;
     }
 }
 @layer utilities {
+    .animate_up {
+        animation: up 0.25s ease-in-out;
+    }
+
+    @keyframes up {
+        from {transform: translateY(+100%); opacity: 0;}
+        to { transform: translateY(0); opacity: 1;}
+    }
+
+    .slide_escape-enter-active, .slide_escape-leave-active {
+        opacity: 1;
+        transition: all .25s;
+      }
+    .slide_escape-enter, .slide_escape-leave-to {
+        animation: down 0.25s ease-in-out;
+        transition: all .25s;
+    }
+    @keyframes down {
+        from {transform: translateY(0%); opacity: 1;}
+        to { transform: translateY(+100%); opacity: 0;}
+    }
     .two_thirds_one_third_grid_to_full{
         display: grid;
         grid-template-columns: 2fr 1fr;