Update Current Stake in Breakdown component on login

apps/web/src/composables/contracts.ts

@@ -6,6 +6,7 @@ import useEnvironment from './environment'
 import useUsers from './users'
 import useEthers from './ethers'
 import useLedger from './ledger'
+import usePrice from '@/composables/price'
 import useTrezor from './trezor'
 import useWalletConnect from './walletConnect'
 import { Account, Pool, ProviderString } from '@casimir/types'
@@ -19,6 +20,8 @@ const manager: CasimirManager = new ethers.Contract(managerAddress, CasimirManag
 const viewsAddress = import.meta.env.PUBLIC_VIEWS_ADDRESS
 const views: CasimirViews = new ethers.Contract(viewsAddress, CasimirViewsJson.abi) as CasimirViews
 
+const { getCurrentPrice } = usePrice()
+
 export default function useContracts() {
     const { ethereumURL } = useEnvironment()
     const { ethersProviderList, getEthersBrowserSigner } = useEthers()
@@ -27,25 +30,22 @@ export default function useContracts() {
     const { isWalletConnectSigner, getEthersWalletConnectSigner } = useWalletConnect()
 
     async function deposit({ amount, walletProvider }: { amount: string, walletProvider: ProviderString }) {
+        const ethAmount = (parseInt(amount) / (await getCurrentPrice({ coin: 'ETH', currency: 'USD' }))).toString()
         const signerCreators = {
             'Browser': getEthersBrowserSigner,
             'Ledger': getEthersLedgerSigner,
             'Trezor': getEthersTrezorSigner,
             'WalletConnect': getEthersWalletConnectSigner
         }
         const signerType = ethersProviderList.includes(walletProvider) ? 'Browser' : walletProvider
-        console.log('signerType :>> ', signerType)
         const signerCreator = signerCreators[signerType as keyof typeof signerCreators]
-        console.log('signerCreator :>> ', signerCreator)
         let signer = signerCreator(walletProvider)
         if (isWalletConnectSigner(signer)) signer = await signer
         const managerSigner = manager.connect(signer as ethers.Signer)
         const fees = await managerSigner.feePercent()
-        const depositAmount = parseFloat(amount) * ((100 + fees) / 100)
+        const depositAmount = parseFloat(ethAmount) * ((100 + fees) / 100)
         const value = ethers.utils.parseEther(depositAmount.toString())
         const result = await managerSigner.depositStake({ value, type: 0 })
-        const userStake = await managerSigner.getUserStake('0xa6e38Ed550776EbF69aE7b8946157c48e2B510a6')
-        console.log('userStake :>> ', userStake)
         return await result.wait()
     }
 
@@ -125,6 +125,14 @@ export default function useContracts() {
         }))
     }
 
+    async function getUserStakeBalance(address: string) : Promise<number> {
+        const provider = new ethers.providers.JsonRpcProvider(ethereumURL)
+        const userStake = await manager.connect(provider).getUserStake(address)
+        // Convert to usd
+        const userStakeUSD = parseFloat(ethers.utils.formatEther(userStake)) * (await getCurrentPrice({ coin: 'ETH', currency: 'USD' }))
+        return userStakeUSD
+    }
+
     async function withdraw({ amount, walletProvider }: { amount: string, walletProvider: ProviderString }) {
         const signerCreators = {
             'Browser': getEthersBrowserSigner,
@@ -142,5 +150,5 @@ export default function useContracts() {
         return await result.wait()
     }
 
-    return { manager, deposit, getDepositFees, getPools, withdraw }
+    return { manager, deposit, getDepositFees, getPools, getUserStakeBalance, withdraw }
 }

apps/web/src/pages/overview/components/BreakdownChart.vue

@@ -1,15 +1,24 @@
 <script lang="ts" setup>
 import LineChartJS from '@/components/charts/LineChartJS.vue'
 import { onMounted, ref, watch} from 'vue'
+import { BreakdownAmount } from '@casimir/types'
+import useContracts from '@/composables/contracts'
+import usePrice from '@/composables/price'
+import useUsers from '@/composables/users'
+import { types } from 'util'
+
+const { user } = useUsers()
+const { getUserStakeBalance } = useContracts()
+const { getCurrentPrice } = usePrice()
 
 const chardId = ref('cross_provider_chart')
 const selectedTimeframe = ref('1 month')
 
 const data = ref({} as any)
 
-const currentStaked = ref({
-  usd: '$150',
-  exchange: '0.00054 ETH'
+const currentStaked = ref<BreakdownAmount>({
+  usd: '$0.00',
+  exchange: '0.00 ETH'
 })
 
 const stakingRewards = ref({
@@ -109,6 +118,22 @@ watch(selectedTimeframe, () => {
   setMockData()
 })
 
+watch(user, async () => {
+  const promises = [] as any[]
+  const accounts = user.value?.accounts
+  accounts?.forEach(account => {
+    promises.push(getUserStakeBalance(account.address))
+  })
+  const promisesResults = await Promise.all(promises)
+  const totalUSD = Math.round(promisesResults.reduce((a, b) => a + b, 0) * 100) / 100
+  const currentEthPrice = await getCurrentPrice({coin: 'ETH', currency: 'USD'})
+  const totalETH = (Math.round((totalUSD / currentEthPrice)*100) / 100).toString()
+  currentStaked.value = {
+    usd: '$' + totalUSD,
+    exchange: totalETH + ' ETH'
+  }
+})
+
 </script>
 
 <template>

common/types/src/index.ts

@@ -3,6 +3,7 @@ import { AccountWithStakingInfo } from './interfaces/AccountWithStakingInfo'
 import { AddAccountOptions } from './interfaces/AddAccountOptions'
 import { ApiResponse } from './interfaces/ApiResponse'
 import { BalanceSnapshot } from './interfaces/BalanceSnapshot'
+import { BreakdownAmount } from './interfaces/BreakdownAmount'
 import { BrowserProviders } from './interfaces/BrowserProviders'
 import { Cluster } from './interfaces/Cluster'
 import { ContractArgs } from './interfaces/ContractArgs'
@@ -33,6 +34,7 @@ export type {
     ApiResponse,
     AddAccountOptions,
     BalanceSnapshot,
+    BreakdownAmount,
     BrowserProviders,
     Cluster,
     ContractArgs,

common/types/src/interfaces/BreakdownAmount.ts

@@ -0,0 +1,4 @@
+export interface BreakdownAmount {
+    usd: number;
+    exchange: number;
+}