feat: add vesting displaying support

components/TablePositions.vue

@@ -11,7 +11,9 @@
 
         <tbody>
             <tr class="table-positions__tr" v-for="stake in sortedTableRowsData">
-                <td class="table-positions__td">{{ stake.id }}</td>
+                <td class="table-positions__td">
+                    {{ stake.idText }}
+                </td>
                 <td class="table-positions__td">{{ stake.amount }}</td>
                 <td class="table-positions__td">
                     <div v-if="stake.votePowerStartsInNextEpoch" class="table-positions__not-yet-voting-power-wrapper">
@@ -26,20 +28,19 @@
                             </template>
                         </BaseTooltip>
                     </div>
-                    <template v-else>
-                        <!-- TODO any special view for case when stake is unlocked already? -->
+                    <span v-else :class="{'table-positions__td-text--greyed': stake.isVesting}">
                         {{ stake.votingPower }}
-                    </template>
+                    </span>
                 </td>
                 <td class="table-positions__td">
                     <template v-if="stake.votePowerStartsInNextEpoch">
                         <span class="table-positions__td-text--greyed">
                             {{ stake.multiplier }}
                         </span>
                     </template>
-                    <template v-else>
+                    <span v-else :class="{'table-positions__td-text--greyed': stake.isVesting}">
                         {{ stake.multiplier }}
-                    </template>
+                    </span>
                 </td>
                 <td class="table-positions__td">
                     <span>{{ stake.lockUpEpochs }} epochs</span>
@@ -72,12 +73,19 @@ import { SECONDS_IN_EPOCH } from '~/constants/contracts';
 import { formatSeconds } from '@/utils/date';
 import { TooltipBorderColor } from './BaseTooltip.vue';
 import { useChainIdTypesafe } from '~/constants/chain';
+import { useUserVestedTokens, useCurrentEpoch } from '~/utils/hooks';
 
 const { address } = useAccount()
 const chainId = useChainIdTypesafe()
 
 const stakes = useUserStakes(address, chainId)
 
+const vestedTokensQuery = useUserVestedTokens(address, chainId)
+const vestedTokens = computed(() => vestedTokensQuery.data?.value)
+
+const currentEpochQuery = useCurrentEpoch(chainId)
+const currentEpoch = computed(() => currentEpochQuery.data?.value)
+
 const initialEpochTimestampQuery = useInitialEpochTimestamp(chainId)
 const initialEpochTimestamp = computed(() => initialEpochTimestampQuery.data.value)
 
@@ -99,6 +107,7 @@ const secondsTillNextEpoch = computed(() => {
 
 interface TableRowData {
     id: bigint
+    idText: string
     amount: string // formatted by decimals already
     votingPower: string // formatted by decimals already
     multiplier: number // e.g. x1.3
@@ -107,14 +116,15 @@ interface TableRowData {
     epochsRemaining: number // e.g. 15.4
     unlocksIn: number // e.g. 1y 79d 12h
     votePowerStartsInNextEpoch: boolean
+    isVesting: boolean
 }
 
 const tableRowsData = computed<TableRowData[]>(() => {
     if (stakes.data.value === undefined || secondsTillNextEpoch.value === undefined) {
         return []
     }
 
-    return stakes.data.value.map(stake => {
+    const userStakes: TableRowData[] = stakes.data.value.map(stake => {
         const formattedStakedAmount = formatUnits(stake.amount, 18)
 
         const multiplier = getMultiplierForLockUpEpochs(Math.min(stake.remainingEpochs, stake.lockUpEpochs))
@@ -141,6 +151,7 @@ const tableRowsData = computed<TableRowData[]>(() => {
 
         return {
             id: stake.stakeId,
+            idText: String(stake.stakeId),
             amount: formattedStakedAmount,
             votingPower: String(Math.floor(Number(formattedStakedAmount) * multiplier)),
             multiplier,
@@ -149,8 +160,46 @@ const tableRowsData = computed<TableRowData[]>(() => {
             unlocksIn,
             epochsRemaining,
             votePowerStartsInNextEpoch: stake.remainingEpochs > stake.lockUpEpochs,
+            isVesting: false,
         }
     })
+
+    if (vestedTokens.value?.length) {
+        for (const [index, vestedToken] of vestedTokens.value.entries()) {
+            const lockUpEpochs = vestedToken.unlockEpoch - vestedToken.initialEpoch
+            const _currentEpoch = currentEpoch.value ?? 0
+            let epochsDelta = _currentEpoch > vestedToken.unlockEpoch ? 0 : vestedToken.unlockEpoch - _currentEpoch
+            let epochsRemaining: number
+            let unlocksIn: number
+            if (epochsDelta === 1) {
+                // add fractional part to the epochsRemaining
+                epochsRemaining = Number((secondsTillNextEpoch.value! / SECONDS_IN_EPOCH).toFixed(1))
+                unlocksIn = secondsTillNextEpoch.value!
+            } else if (epochsDelta <= 0) {
+                epochsRemaining = 0
+                unlocksIn = 0
+            } else {
+                // add fractional part to the epochsRemaining
+                epochsRemaining = (epochsDelta - 1) + Number((secondsTillNextEpoch.value! / SECONDS_IN_EPOCH).toFixed(1))
+                unlocksIn = secondsTillNextEpoch.value! +  ((epochsDelta - 1) * SECONDS_IN_EPOCH)
+            }
+            userStakes.push({
+                id: BigInt(index + 1), // arbitrary number as vestings does not have stake id
+                idText: `Vesting ${index + 1}`,
+                amount: formatUnits(vestedToken.amount, 18),
+                votingPower: '0',
+                multiplier: 0,
+                lockUpEpochs,
+                duration: lockUpEpochs * SECONDS_IN_EPOCH,
+                unlocksIn,
+                epochsRemaining,
+                votePowerStartsInNextEpoch: false,
+                isVesting: true,
+            })
+        }
+    }
+
+    return userStakes
 })
 
 const COLUMNS_DEFINITION = [

constants/abis.ts

@@ -160,3 +160,102 @@ export const EPOCH_CLOCK_ABI = [
     "type": "function"
   }
 ] as const
+
+// https://github.com/PWNDAO/pwn_dao_vesting/blob/main/src/PWNVestingManager.sol
+export const PWN_VESTING_MANAGER_ABI = [
+  {
+     "type":"function",
+     "name":"claimVesting",
+     "inputs":[
+        {
+           "name":"unlockEpoch",
+           "type":"uint256",
+           "internalType":"uint256"
+        }
+     ],
+     "outputs":[
+
+     ],
+     "stateMutability":"nonpayable"
+  },
+  {
+    "type":"event",
+    "name":"VestingDeleted",
+    "inputs":[
+       {
+          "name":"owner",
+          "type":"address",
+          "indexed":true,
+          "internalType":"address"
+       },
+       {
+          "name":"amount",
+          "type":"uint256",
+          "indexed":true,
+          "internalType":"uint256"
+       },
+       {
+          "name":"unlockEpoch",
+          "type":"uint256",
+          "indexed":true,
+          "internalType":"uint256"
+       }
+    ],
+    "anonymous":false
+ },
+  {
+     "type":"function",
+     "name":"upgradeToStake",
+     "inputs":[
+        {
+           "name":"unlockEpoch",
+           "type":"uint256",
+           "internalType":"uint256"
+        },
+        {
+           "name":"stakeLockUpEpochs",
+           "type":"uint256",
+           "internalType":"uint256"
+        }
+     ],
+     "outputs":[
+        {
+           "name":"stakeId",
+           "type":"uint256",
+           "internalType":"uint256"
+        }
+     ],
+     "stateMutability":"nonpayable"
+  },
+  {
+     "type":"event",
+     "name":"VestingCreated",
+     "inputs":[
+        {
+           "name":"owner",
+           "type":"address",
+           "indexed":true,
+           "internalType":"address"
+        },
+        {
+           "name":"amount",
+           "type":"uint256",
+           "indexed":true,
+           "internalType":"uint256"
+        },
+        {
+           "name":"unlockEpoch",
+           "type":"uint256",
+           "indexed":true,
+           "internalType":"uint256"
+        },
+        {
+           "name":"initialEpoch",
+           "type":"uint256",
+           "indexed":false,
+           "internalType":"uint256"
+        }
+     ],
+     "anonymous":false
+  },
+] as const

constants/addresses.ts

@@ -4,21 +4,25 @@ import type { SupportedChain } from "./chain";
 type ContractAddressRegistry = Record<SupportedChain, Address>
 
 export const PWN_TOKEN = {
-    1: '0x1D9e1fB11491CA43496c9F4612aAB6530956BC0c',
+    1: '0x420690e3C226398De46b2c467AD4547870391Ba3',
     11155111: '0x0FE826395b1971d80A94543613E56a8b2fDF3d11'
 } as const satisfies ContractAddressRegistry
 
 export const STAKED_PWN_NFT = {
-    1: '0x9cA849625fC30Ed43d1f9ce9b7C0078f34Ac1Bc7',
+    1: '0x1Eba7F1E2DdDC008D3CD6E88b5F3C8A52BDC1C14',
     11155111: '0x8767F9349786141457be98E1deAdD6C4975F50DF'
 } as const satisfies ContractAddressRegistry
 
 export const VE_PWN_TOKEN = {
-    1: '0xf4919077ff9e833B5560123428D8b9FEC01c13C1',
+    1: '0x683b463672e3F11eE36dc64Ae8970241F5fb6726',
     11155111: '0xBF7105C7f1cB7CB556Ad2754636f8C8D9707029e'
 } as const satisfies ContractAddressRegistry
 
 export const EPOCH_CLOCK = {
-    1: '0xb9962f81Ad51Df9fcfd14400fB0A10E665b7cF11',
+    1: '0x65EA4fdc09900f1f1E1aa911a90f4eFEF1BACfCb',
     11155111: '0x19e3293196aee99BB3080f28B9D3b4ea7F232b8d'
-} as const satisfies ContractAddressRegistry
+} as const satisfies ContractAddressRegistry
+
+export const PWN_VESTING_MANAGER = {
+    1: '0x6E33824F1d51EE3918c805dCC16BF7C30FF79c06',
+} as const

pages/index.vue

@@ -28,6 +28,14 @@
                     </div>
                 </div>
                 <div class="homepage__summary-container">
+                    <div class="homepage__summary-box" v-if="vestedTokensAmount">
+                        <div class="homepage__box-subtitle">
+                            Vested Tokens
+                        </div>
+                        <BaseSkeletor v-if="isFetchingVestedTokens" height="2" />
+                        <div v-else class="homepage__box-value">{{ vestedTokensAmountFormatted }}</div>
+                    </div>
+
                     <div class="homepage__summary-box">
                         <div class="homepage__box-subtitle">
                             Staked Tokens
@@ -212,6 +220,27 @@ const nextUnlockFormatted = computed(() => {
     return formatSeconds(nextUnlockAt.value)
 })
 
+const vestedTokensQuery = useUserVestedTokens(address, chainId)
+const isFetchingVestedTokens = computed(() => vestedTokensQuery.isLoading.value)
+const vestedTokensAmount = computed(() => {
+    if (!vestedTokensQuery.data?.value?.length) {
+        return undefined 
+    }
+
+    let totalAmount = 0n
+    for (const vestedToken of vestedTokensQuery.data.value) {
+        totalAmount += vestedToken.amount
+    }
+    return totalAmount
+})
+const vestedTokensAmountFormatted = computed(() => {
+    if (vestedTokensAmount.value === undefined) {
+        return undefined
+    }
+
+    return formatUnits(vestedTokensAmount.value, 18)
+})
+
 const showEpochSwitcher = import.meta.env.VITE_PUBLIC_SHOW_EPOCH_SWITCHER === 'true'
 const showChainSwitcher = import.meta.env.VITE_PUBLIC_SHOW_ONLY_MAINNET === 'false'
 const showTestingTopBar = showEpochSwitcher || showChainSwitcher

types/contractResults.ts

@@ -1,5 +1,5 @@
 import { VE_PWN_TOKEN_ABI } from "~/constants/abis"
-import type { ExtractAbiFunction, AbiParametersToPrimitiveTypes } from 'abitype'
+import type { ExtractAbiFunction, AbiParametersToPrimitiveTypes, ExtractAbiEvent, Address } from 'abitype'
 
 /*
 {
@@ -14,6 +14,13 @@ import type { ExtractAbiFunction, AbiParametersToPrimitiveTypes } from 'abitype'
  */
 export type StakeDetail = AbiParametersToPrimitiveTypes<ExtractAbiFunction<typeof VE_PWN_TOKEN_ABI, 'getStakes'>['outputs']>[number][number]
 
+export type VestingDetail = {
+    owner: Address
+    amount: bigint
+    unlockEpoch: number
+    initialEpoch: number
+}
+
 export interface PowerInEpoch {
     epoch: bigint
     power: bigint