From 1edd110d17a7d2a929382afb27b4c9d7fd4897d4 Mon Sep 17 00:00:00 2001
From: darklight81 <igor.sulovsky@gmail.com>
Date: Sun, 5 Jan 2025 14:26:24 +0100
Subject: [PATCH 1/6] feat: added voting positions table

---
 ...ePositions.vue => TableOwnedPositions.vue} |  30 +-
 components/TableVotingPositions.vue           | 431 ++++++++++++++++++
 pages/index.vue                               |  19 +-
 utils/hooks.ts                                |  30 +-
 4 files changed, 492 insertions(+), 18 deletions(-)
 rename components/{TablePositions.vue => TableOwnedPositions.vue} (95%)
 create mode 100644 components/TableVotingPositions.vue

diff --git a/components/TablePositions.vue b/components/TableOwnedPositions.vue
similarity index 95%
rename from components/TablePositions.vue
rename to components/TableOwnedPositions.vue
index e80a763..e1b9934 100644
--- a/components/TablePositions.vue
+++ b/components/TableOwnedPositions.vue
@@ -51,12 +51,8 @@
                 </td>
                 <td class="table-positions__td">
                     <span>
-                        {{ formatSeconds(stake.duration) }}
+                       {{ shortenAddress(stake.votingDelegate) }}
                     </span>
-                    <span class="table-positions__greyed">
-                        ({{ stake.lockUpEpochs }} epochs)
-                    </span>
-
                 </td>
                 <td class="table-positions__td">
                     <template class="table-positions__unlocked-text" v-if="stake.unlocksIn === 0">
@@ -84,10 +80,12 @@ import { SECONDS_IN_EPOCH, MIN_STAKE_DURATION_IN_EPOCH } from '~/constants/contr
 import { formatSeconds } from '@/utils/date';
 import { TooltipBorderColor } from './BaseTooltip.vue';
 import { useChainIdTypesafe } from '~/constants/chain';
-import { useUserVestedTokens, useCurrentEpoch } from '~/utils/hooks';
+import {useUserVestedTokens, useCurrentEpoch, useAllBeneficiaries} from '~/utils/hooks';
 import { wagmiAdapter } from '~/wagmi';
 import { PWN_VESTING_MANAGER } from '~/constants/addresses';
 import { PWN_VESTING_MANAGER_ABI } from '~/constants/abis';
+import type {Address} from "abitype";
+import {shortenAddress} from "../utils/web3";
 
 const { address } = useAccount()
 const chainId = useChainIdTypesafe()
@@ -132,13 +130,16 @@ interface TableRowData {
     votePowerStartsInNextEpoch: boolean
     isVesting: boolean
     unlockEpoch: number
+    votingDelegate: Address
 }
 
+const stakeIds = computed(() => stakes.data.value?.map(stake => stake.stakeId) ?? [])
+const logs = useAllBeneficiaries(stakeIds.value, chainId)
+
 const tableRowsData = computed<TableRowData[]>(() => {
     if (stakes.data.value === undefined || secondsTillNextEpoch.value === undefined) {
         return []
     }
-
     const userStakes: TableRowData[] = stakes.data.value.map(stake => {
         const formattedStakedAmount = formatUnits(stake.amount, 18)
 
@@ -177,6 +178,7 @@ const tableRowsData = computed<TableRowData[]>(() => {
             votePowerStartsInNextEpoch: stake.remainingEpochs > stake.lockUpEpochs,
             isVesting: false,
             unlockEpoch: stake.initialEpoch + stake.lockUpEpochs,
+            votingDelegate: logs?.data?.value?.get(stake.stakeId) as Address ?? address.value!
         }
     })
 
@@ -212,6 +214,7 @@ const tableRowsData = computed<TableRowData[]>(() => {
                 votePowerStartsInNextEpoch: false,
                 isVesting: true,
                 unlockEpoch: vestedToken.unlockEpoch,
+                votingDelegate: address.value!,
             })
         }
     }
@@ -241,8 +244,8 @@ const COLUMNS_DEFINITION = [
         width: '11%',
     },
     {
-        id: 'duration',
-        text: 'Duration',
+        id: 'delegate',
+        text: 'Voting Power Delegate',
         width: '20%',
     },
     {
@@ -294,7 +297,8 @@ const sortedTableRowsData = computed(() => {
                     return a.multiplier > b.multiplier ? 1 : -1
                 }
             }
-            case 'duration': {
+            case 'delegate': {
+              //todo: fix this
                 if (sortingDirection.value === 'desc') {
                     return a.duration > b.duration ? -1 : 1
                 } else {
@@ -345,10 +349,10 @@ const upgradeToStakeTooltipText = computed(() => {
     const stakeUnlockDate = getStartDateOfEpochFormatted(Number(initialEpochTimestamp.value), epochWhereStakeUnlocks)
 
     return `Upgrades your vesting position to a stake position that grants voting rights and fee shares (if the DAO enables fees).
-    
+
     The new stake will be active starting ${stakeActiveDate}, and will unlock on ${stakeUnlockDate}, after a ${DEFAULT_VESTING_UPGRADE_EPOCH_LOCKUP}-epoch lock-up period.
-    
-    For a longer stake lock-up period, please contact us on Discord for assistance. 
+
+    For a longer stake lock-up period, please contact us on Discord for assistance.
     `
 })
 </script>
diff --git a/components/TableVotingPositions.vue b/components/TableVotingPositions.vue
new file mode 100644
index 0000000..27b857d
--- /dev/null
+++ b/components/TableVotingPositions.vue
@@ -0,0 +1,431 @@
+<template>
+    <table class="table-positions">
+        <thead class="table-positions__head">
+            <tr>
+                <th class="table-positions__th" scope="col" :style="{'width': column.width}" v-for="column in COLUMNS_DEFINITION">
+                    {{ column.text }}
+                    <SortingIcon @click="event => handleSortingIconClick(column.id)" :direction="sortingProp === column.id ? sortingDirection : 'none'" />
+                </th>
+            </tr>
+        </thead>
+
+        <tbody>
+            <tr class="table-positions__tr" v-for="stake in sortedTableRowsData">
+                <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">
+                        <span class="table-positions__td-text--greyed">
+                            {{ stake.votingPower }}
+                        </span>
+                        <BaseTooltip
+                            :tooltip-text="`You will gain your voting power in next epoch, which will be in ${timeTillNextEpoch}.`"
+                            :border-color="TooltipBorderColor.White">
+                            <template #trigger>
+                                <img src="/icons/alert-icon-red.svg" alt="alert" class="table-positions__alert-icon" />
+                            </template>
+                        </BaseTooltip>
+                    </div>
+                    <span v-else :class="{'table-positions__td-text--greyed': stake.isVesting}">
+                        {{ stake.votingPower }}
+                    </span>
+                    <BaseTooltip :tooltip-text="upgradeToStakeTooltipText">
+                        <template #trigger>
+                            <button :disabled="isUpgradingToStake" class="table-positions__upgrade-btn" v-if="stake.isVesting" @click="upgradeToStake(stake.unlockEpoch, DEFAULT_VESTING_UPGRADE_EPOCH_LOCKUP)">
+                                {{ isUpgradingToStake ? 'Upgrading...' : 'Upgrade to stake' }}
+                            </button>
+                        </template>
+                    </BaseTooltip>
+                </td>
+                <td class="table-positions__td">
+                    <template v-if="stake.votePowerStartsInNextEpoch">
+                        <span class="table-positions__td-text--greyed">
+                            {{ stake.multiplier }}
+                        </span>
+                    </template>
+                    <span v-else :class="{'table-positions__td-text--greyed': stake.isVesting}">
+                        {{ stake.multiplier }}
+                    </span>
+                </td>
+                <td class="table-positions__td">
+                <template class="table-positions__unlocked-text" v-if="stake.unlocksIn === 0">
+                  Unlocked!
+                </template>
+                <template v-else>
+                        <span>
+                            {{ formatSeconds(stake.unlocksIn) }}
+                        </span>
+                  <span class="table-positions__greyed">
+                            ({{ stake.epochsRemaining }} epochs)
+                        </span>
+                </template>
+              </td>
+
+                <td class="table-positions__td">
+                    <span>
+                      {{shortenAddress(stake.owner)}}
+                    </span>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core';
+import { useAccount, useWriteContract } from '@wagmi/vue';
+import { formatUnits, parseUnits } from 'viem';
+import { SECONDS_IN_EPOCH, MIN_STAKE_DURATION_IN_EPOCH } from '~/constants/contracts';
+import { formatSeconds } from '@/utils/date';
+import { TooltipBorderColor } from './BaseTooltip.vue';
+import { useChainIdTypesafe } from '~/constants/chain';
+import { useCurrentEpoch, useUserStakesWithVotingPower} from '~/utils/hooks';
+import { wagmiAdapter } from '~/wagmi';
+import { PWN_VESTING_MANAGER } from '~/constants/addresses';
+import { PWN_VESTING_MANAGER_ABI } from '~/constants/abis';
+import type {Address} from "abitype";
+import {shortenAddress} from "../utils/web3";
+
+const { address } = useAccount()
+const chainId = useChainIdTypesafe()
+
+const stakes = useUserStakes(address, chainId)
+
+const currentEpochQuery = useCurrentEpoch(chainId)
+const currentEpoch = computed(() => currentEpochQuery.data?.value)
+
+const userStakesWithVotingPowerQuery = useUserStakesWithVotingPower(address, currentEpoch, chainId)
+const userStakesWithVotingPower = computed(() => userStakesWithVotingPowerQuery.data.value)
+const userStakesWithVotingPowerFiltered = computed(() => userStakesWithVotingPower.value?.filter( stake => {
+  return address.value !== stake.owner
+}))
+
+const initialEpochTimestampQuery = useInitialEpochTimestamp(chainId)
+const initialEpochTimestamp = computed(() => initialEpochTimestampQuery.data.value)
+
+const timeTillNextEpoch = computed(() => {
+    if (initialEpochTimestamp.value === undefined) {
+        return undefined
+    }
+
+    return getTimeTillNextEpochStringified(Number(initialEpochTimestamp.value))
+})
+
+const secondsTillNextEpoch = computed(() => {
+    if (initialEpochTimestamp.value === undefined) {
+        return undefined
+    }
+
+    return getSecondsTillNextEpoch(Number(initialEpochTimestamp.value))
+})
+
+interface TableRowData {
+    id: bigint
+    idText: string
+    amount: string // formatted by decimals already
+    votingPower: string // formatted by decimals already
+    multiplier: number // e.g. x1.3
+    lockUpEpochs: number // e.g. 39
+    epochsRemaining: number // e.g. 15.4
+    unlocksIn: number // e.g. 1y 79d 12h
+    votePowerStartsInNextEpoch: boolean
+    isVesting: boolean
+    unlockEpoch: number
+    owner: Address
+}
+
+const tableRowsData = computed<TableRowData[]>(() => {
+    if (stakes.data.value === undefined || secondsTillNextEpoch.value === undefined) {
+        return []
+    }
+
+    const userStakes: TableRowData[] = userStakesWithVotingPowerFiltered?.value?.map(stake => {
+        const formattedStakedAmount = formatUnits(stake.amount, 18)
+
+        const multiplier = getMultiplierForLockUpEpochs(Math.min(stake.remainingEpochs, stake.lockUpEpochs))
+
+        let unlocksIn: number
+        let epochsRemaining: number
+        if (stake.remainingEpochs === 0) {
+            unlocksIn = 0
+            epochsRemaining = 0
+        } else if (stake.remainingEpochs > stake.lockUpEpochs) {
+            // happens in the epoch when user staked (voting power is granted only in the next epoch)
+            epochsRemaining = stake.lockUpEpochs
+            unlocksIn = secondsTillNextEpoch.value! + (epochsRemaining * SECONDS_IN_EPOCH)
+            // add fractional part to the epochsRemaining
+            epochsRemaining += (secondsTillNextEpoch.value! / SECONDS_IN_EPOCH)
+            epochsRemaining = Number(epochsRemaining.toFixed(1))
+        } else {
+            epochsRemaining = stake.remainingEpochs - 1
+            unlocksIn = secondsTillNextEpoch.value! + (epochsRemaining * SECONDS_IN_EPOCH)
+            // add fractional part to the epochsRemaining
+            epochsRemaining += (secondsTillNextEpoch.value! / SECONDS_IN_EPOCH)
+            epochsRemaining = Number(epochsRemaining.toFixed(1))
+        }
+
+        return {
+            id: stake.stakeId,
+            idText: String(stake.stakeId),
+            amount: formattedStakedAmount,
+            votingPower: String(Math.floor(Number(formattedStakedAmount) * multiplier)),
+            multiplier,
+            lockUpEpochs: stake.lockUpEpochs,
+            unlocksIn,
+            epochsRemaining,
+            votePowerStartsInNextEpoch: stake.remainingEpochs > stake.lockUpEpochs,
+            isVesting: false,
+            unlockEpoch: stake.initialEpoch + stake.lockUpEpochs,
+            owner: stake.owner,
+        }
+    }) || []
+    return userStakes
+})
+
+const COLUMNS_DEFINITION = [
+    {
+        id: 'id',
+        text: 'ID#',
+        width: '9%',
+    },
+    {
+        id: 'amount',
+        text: 'Amount',
+        width: '20%',
+    },
+    {
+        id: 'votingPower',
+        text: 'Voting Power',
+        width: '20%',
+    },
+    {
+        id: 'multiplier',
+        text: 'Multiplier',
+        width: '11%',
+    },
+    {
+        id: 'unlocksIn',
+        text: 'Unlocks in',
+        width: '20%',
+    },
+  {
+    id: 'stakeOwner',
+    text: 'Owner of Stake',
+    width: '20%',
+  },
+] as const
+
+type SortingProp = typeof COLUMNS_DEFINITION[number]['id']
+
+const sortingProp = useLocalStorage<SortingProp>('tablePositionsSortingProp', 'unlocksIn')
+const sortingDirection = useLocalStorage<'asc' | 'desc'>('tablePositionsSortingDirection', 'asc')
+
+const sortedTableRowsData = computed(() => {
+    return tableRowsData.value.toSorted((a, b) => {
+        switch (sortingProp.value) {
+            case 'id': {
+                if (sortingDirection.value === 'desc') {
+                    return a.id > b.id ? -1 : 1
+                } else {
+                    return a.id > b.id ? 1 : -1
+                }
+            }
+            case 'amount': {
+                const aAmount = parseUnits(a.amount, 18)
+                const bAmount = parseUnits(b.amount, 18)
+
+                if (sortingDirection.value === 'desc') {
+                    return aAmount > bAmount ? -1 : 1
+                } else {
+                    return aAmount > bAmount ? 1 : -1
+                }
+            }
+            case 'votingPower': {
+                const aVotingPower = parseUnits(a.votingPower, 18)
+                const bVotingPower = parseUnits(b.votingPower, 18)
+
+                if (sortingDirection.value === 'desc') {
+                    return aVotingPower > bVotingPower ? -1 : 1
+                } else {
+                    return aVotingPower > bVotingPower ? 1 : -1
+                }
+            }
+            case 'multiplier': {
+                if (sortingDirection.value === 'desc') {
+                    return a.multiplier > b.multiplier ? -1 : 1
+                } else {
+                    return a.multiplier > b.multiplier ? 1 : -1
+                }
+            }
+            case 'stakeOwner': {
+                if (sortingDirection.value === 'desc') {
+                    return a.owner > b.owner ? -1 : 1
+                } else {
+                    return a.owner > b.owner ? 1 : -1
+                }
+            }
+            case 'unlocksIn': {
+                if (sortingDirection.value === 'desc') {
+                    return a.unlocksIn > b.unlocksIn ? -1 : 1
+                } else {
+                    return a.unlocksIn > b.unlocksIn ? 1 : -1
+                }
+            }
+        }
+    })
+})
+
+const handleSortingIconClick = (newSortingProp: SortingProp) => {
+    if (newSortingProp === sortingProp.value) {
+        sortingDirection.value = sortingDirection.value === 'asc' ? 'desc' : 'asc'
+    } else {
+        sortingProp.value = newSortingProp
+    }
+}
+
+const DEFAULT_VESTING_UPGRADE_EPOCH_LOCKUP = MIN_STAKE_DURATION_IN_EPOCH
+
+const { writeContractAsync: _writeContractUpgradeToStake, isPending: isUpgradingToStake } = useWriteContract()
+const upgradeToStake = async (unlockEpoch: number | bigint, stakeLockUpEpochs: number | bigint) => {
+    return await _writeContractUpgradeToStake({
+        abi: PWN_VESTING_MANAGER_ABI,
+        address: PWN_VESTING_MANAGER[1],
+        functionName: 'upgradeToStake',
+        chainId: 1,
+        args: [BigInt(unlockEpoch), BigInt(stakeLockUpEpochs)]
+    })
+}
+
+const upgradeToStakeTooltipText = computed(() => {
+    if (!currentEpoch.value || !initialEpochTimestamp.value) {
+        return ''
+    }
+
+    const epochWhereStakeWillBeActive = currentEpoch.value + 1 // active from next epoch
+    const stakeActiveDate = getStartDateOfEpochFormatted(Number(initialEpochTimestamp.value), epochWhereStakeWillBeActive)
+
+    const epochWhereStakeUnlocks = epochWhereStakeWillBeActive + DEFAULT_VESTING_UPGRADE_EPOCH_LOCKUP
+    const stakeUnlockDate = getStartDateOfEpochFormatted(Number(initialEpochTimestamp.value), epochWhereStakeUnlocks)
+
+    return `Upgrades your vesting position to a stake position that grants voting rights and fee shares (if the DAO enables fees).
+
+    The new stake will be active starting ${stakeActiveDate}, and will unlock on ${stakeUnlockDate}, after a ${DEFAULT_VESTING_UPGRADE_EPOCH_LOCKUP}-epoch lock-up period.
+
+    For a longer stake lock-up period, please contact us on Discord for assistance.
+    `
+})
+</script>
+
+<style scoped>
+.table-positions {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0 0.5rem;
+
+    @media (max-width: 930px) {
+        width: 850px;
+    }
+
+    &__head {
+        position: relative;
+
+        &::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            height: 1px;
+            width: 100%;
+            background-image: var(--border-gray-dashed);
+            background-size: auto 2px;
+            /* small hack how to hide buggy double border (top + bottom), when height is 1px */
+        }
+    }
+
+    &__th {
+        font-size: 0.875rem;
+        color: var(--subtitle-color);
+        text-align: left;
+        font-family: var(--font-family-screener);
+        font-weight: 400;
+        padding: 0.5rem 0;
+
+        &:first-child {
+            padding: 0 0.5rem;
+        }
+    }
+
+    &__tr {
+        height: 3rem;
+
+        &:not(:first-child) {
+            border-top: 1px solid var(--border-color);
+        }
+    }
+
+    &__td {
+        &:first-child {
+            padding: 0 0.5rem;
+        }
+
+        &-text--greyed {
+            color: var(--border-color);
+        }
+    }
+
+    &__not-yet-voting-power-wrapper {
+        display: flex;
+        align-items: center;
+        column-gap: 0.5rem;
+    }
+
+    &__unlocked-text {
+        color: var(--primary-color);
+    }
+
+    &__alert-icon {
+        padding-top: 0.1875rem;
+    }
+
+    &__greyed {
+        padding-left: 0.25rem;
+        font-size: 0.75rem;
+        color: var(--grey);
+    }
+
+    &__upgrade-btn {
+        display: inline-flex;
+        align-items: center;
+        height: 2rem;
+        padding: 0 1rem;
+
+        transition: all 0.3s;
+        color: var(--primary-color);
+        background: transparent;
+        border-color: var(--primary-color-1);
+        border-width: 1px;
+        border-style: solid;
+        font-family: var(--font-family-screener);
+
+        margin-left: 1rem;
+
+        &:hover {
+            background: var(--primary-color-2);
+        }
+
+        &:disabled {
+            opacity: 0.5;
+        }
+
+        &:hover {
+            cursor: pointer;
+
+            &:disabled {
+                cursor: not-allowed;
+            }
+        }
+    }
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 1aad545..e1ce8fe 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -81,12 +81,17 @@
         <GraphCumulativeVotingPower />
 
         <div v-if="hasAnyStake" class="homepage__positions">
-            <h3 class="homepage__positions-heading">Positions ({{ stakesCount }})</h3>
-            <TablePositions />
+            <h3 class="homepage__positions-heading">Owned Positions ({{ stakesCount }})</h3>
+            <TableOwnedPositions />
         </div>
         <div v-if="isFetchingUserStakes || isFetchingVestings" class="homepage__table-positions-loader">
             <BaseSkeletor height="2" />
         </div>
+      <div v-if="hasAnyVotingDelegation" class="homepage__positions">
+        <h3 class="homepage__positions-heading">Voting Positions ({{votingDelegationCount}})</h3>
+        <TableVotingPositions/>
+      </div>
+
     </div>
 </template>
 
@@ -183,6 +188,14 @@ const isFetchingVotingPower = computed(() => votingPowerQuery.isLoading.value)
 
 const userStakesWithVotingPowerQuery = useUserStakesWithVotingPower(address, epoch, chainId)
 const userStakesWithVotingPower = computed(() => userStakesWithVotingPowerQuery.data.value)
+
+const userStakesWithVotingPowerFiltered = computed(() => userStakesWithVotingPower.value?.filter( stake => {
+  return address.value !== stake.owner
+}))
+const votingDelegationCount = computed(() => userStakesWithVotingPowerFiltered.value?.length ?? 0)
+const hasAnyVotingDelegation = computed(() => votingDelegationCount.value > 0)
+
+
 const isFetchingUserStakesWithVotingPower = computed(() => userStakesWithVotingPowerQuery.isLoading.value)
 
 const votingMultiplier = computed(() => {
@@ -238,7 +251,7 @@ const nextUnlockFormatted = computed(() => {
 
 const vestedTokensAmount = computed(() => {
     if (!vestingsQuery.data?.value?.length) {
-        return undefined 
+        return undefined
     }
 
     let totalAmount = 0n
diff --git a/utils/hooks.ts b/utils/hooks.ts
index 0a5697b..8dd5286 100644
--- a/utils/hooks.ts
+++ b/utils/hooks.ts
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/vue-query";
-import { erc20Abi, parseAbiItem, type Address } from "viem";
+import {erc20Abi, parseAbiItem, type Address, parseEventLogs} from "viem";
 import { getLogs } from "viem/actions";
 import { getClient, readContract } from "@wagmi/vue/actions";
 import { EPOCH_CLOCK_ABI, VE_PWN_TOKEN_ABI } from "~/constants/abis";
@@ -23,6 +23,32 @@ export const useUserPwnBalance = (walletAddress: Ref<Address | undefined>, chain
     })
 }
 
+export function useAllBeneficiaries(stakeIds: bigint[], chainId: Ref<SupportedChain>) {
+    return useQuery({
+        queryKey: ['allBeneficiaries', stakeIds],
+        queryFn: async () => {
+            const client = getClient(wagmiAdapter.wagmiConfig)
+            const logs = await getLogs(client!, {
+                address: VE_PWN_TOKEN[chainId.value],
+                event: parseAbiItem('event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'),
+                fromBlock: 0n,
+            })
+
+            // Create a map of stakeId to latest beneficiary
+            const beneficiaryMap = new Map<bigint, string>()
+
+            for (const log of logs) {
+                if (stakeIds.includes(log.args.stakeId!)) {
+                    beneficiaryMap.set(log.args.stakeId!, log.args.newBeneficiary || '')
+                }
+            }
+
+            return beneficiaryMap
+        },
+        enabled: stakeIds.length > 0
+    })
+}
+
 export const useUserStakes = (walletAddress: Ref<Address | undefined>, chainId: Ref<SupportedChain>) => {
     return useQuery({
         queryKey: ['stakedPwnBalance', walletAddress, chainId],
@@ -155,7 +181,7 @@ export const useUserCumulativeVotingPowerSummary = (walletAddress: Ref<Address |
             const strippedParsedStakerPowers = parsedStakerPowers.filter((stakerPower, index) => {
                 // Keep the number if it's not zero
                 if (stakerPower.power !== 0n) return true;
-                
+
                 // If it's zero, check if there's a non-zero number ahead
                 return parsedStakerPowers.slice(index + 1).some(_stakerPower => _stakerPower.power !== 0n);
             });

From 617247139c1434ca77459c68167b59d552fd91b1 Mon Sep 17 00:00:00 2001
From: darklight81 <igor.sulovsky@gmail.com>
Date: Thu, 9 Jan 2025 03:17:24 +0100
Subject: [PATCH 2/6] fix: fixes from PR

---
 components/TableOwnedPositions.vue  | 22 +++++++++----
 components/TableVotingPositions.vue | 49 +++++------------------------
 pages/index.vue                     |  2 +-
 3 files changed, 25 insertions(+), 48 deletions(-)

diff --git a/components/TableOwnedPositions.vue b/components/TableOwnedPositions.vue
index e1b9934..34a2ad6 100644
--- a/components/TableOwnedPositions.vue
+++ b/components/TableOwnedPositions.vue
@@ -50,9 +50,17 @@
                     </span>
                 </td>
                 <td class="table-positions__td">
-                    <span>
+                  <BaseTooltip
+                      v-if="stake.votingDelegate"
+                      is-interactive
+                      :tooltip-text="stake.votingDelegate">
+                    <template #trigger>
+                      <span>
                        {{ shortenAddress(stake.votingDelegate) }}
                     </span>
+                    </template>
+                  </BaseTooltip>
+                  <span v-else> --- </span>
                 </td>
                 <td class="table-positions__td">
                     <template class="table-positions__unlocked-text" v-if="stake.unlocksIn === 0">
@@ -130,7 +138,7 @@ interface TableRowData {
     votePowerStartsInNextEpoch: boolean
     isVesting: boolean
     unlockEpoch: number
-    votingDelegate: Address
+    votingDelegate?: Address
 }
 
 const stakeIds = computed(() => stakes.data.value?.map(stake => stake.stakeId) ?? [])
@@ -214,7 +222,7 @@ const tableRowsData = computed<TableRowData[]>(() => {
                 votePowerStartsInNextEpoch: false,
                 isVesting: true,
                 unlockEpoch: vestedToken.unlockEpoch,
-                votingDelegate: address.value!,
+                votingDelegate: undefined,
             })
         }
     }
@@ -298,11 +306,13 @@ const sortedTableRowsData = computed(() => {
                 }
             }
             case 'delegate': {
-              //todo: fix this
+                if (!a.votingDelegate || !b.votingDelegate) {
+                    return a.votingDelegate ? -1 : 1
+                }
                 if (sortingDirection.value === 'desc') {
-                    return a.duration > b.duration ? -1 : 1
+                    return a.votingDelegate > b.votingDelegate ? -1 : 1
                 } else {
-                    return a.duration > b.duration ? 1 : -1
+                    return a.votingDelegate > b.votingDelegate ? 1 : -1
                 }
             }
             case 'unlocksIn': {
diff --git a/components/TableVotingPositions.vue b/components/TableVotingPositions.vue
index 27b857d..030e9ab 100644
--- a/components/TableVotingPositions.vue
+++ b/components/TableVotingPositions.vue
@@ -31,13 +31,6 @@
                     <span v-else :class="{'table-positions__td-text--greyed': stake.isVesting}">
                         {{ stake.votingPower }}
                     </span>
-                    <BaseTooltip :tooltip-text="upgradeToStakeTooltipText">
-                        <template #trigger>
-                            <button :disabled="isUpgradingToStake" class="table-positions__upgrade-btn" v-if="stake.isVesting" @click="upgradeToStake(stake.unlockEpoch, DEFAULT_VESTING_UPGRADE_EPOCH_LOCKUP)">
-                                {{ isUpgradingToStake ? 'Upgrading...' : 'Upgrade to stake' }}
-                            </button>
-                        </template>
-                    </BaseTooltip>
                 </td>
                 <td class="table-positions__td">
                     <template v-if="stake.votePowerStartsInNextEpoch">
@@ -64,9 +57,15 @@
               </td>
 
                 <td class="table-positions__td">
-                    <span>
-                      {{shortenAddress(stake.owner)}}
+                  <BaseTooltip
+                      is-interactive
+                      :tooltip-text="stake.owner">
+                    <template #trigger>
+                      <span>
+                       {{ shortenAddress(stake.owner) }}
                     </span>
+                    </template>
+                  </BaseTooltip>
                 </td>
             </tr>
         </tbody>
@@ -284,38 +283,6 @@ const handleSortingIconClick = (newSortingProp: SortingProp) => {
         sortingProp.value = newSortingProp
     }
 }
-
-const DEFAULT_VESTING_UPGRADE_EPOCH_LOCKUP = MIN_STAKE_DURATION_IN_EPOCH
-
-const { writeContractAsync: _writeContractUpgradeToStake, isPending: isUpgradingToStake } = useWriteContract()
-const upgradeToStake = async (unlockEpoch: number | bigint, stakeLockUpEpochs: number | bigint) => {
-    return await _writeContractUpgradeToStake({
-        abi: PWN_VESTING_MANAGER_ABI,
-        address: PWN_VESTING_MANAGER[1],
-        functionName: 'upgradeToStake',
-        chainId: 1,
-        args: [BigInt(unlockEpoch), BigInt(stakeLockUpEpochs)]
-    })
-}
-
-const upgradeToStakeTooltipText = computed(() => {
-    if (!currentEpoch.value || !initialEpochTimestamp.value) {
-        return ''
-    }
-
-    const epochWhereStakeWillBeActive = currentEpoch.value + 1 // active from next epoch
-    const stakeActiveDate = getStartDateOfEpochFormatted(Number(initialEpochTimestamp.value), epochWhereStakeWillBeActive)
-
-    const epochWhereStakeUnlocks = epochWhereStakeWillBeActive + DEFAULT_VESTING_UPGRADE_EPOCH_LOCKUP
-    const stakeUnlockDate = getStartDateOfEpochFormatted(Number(initialEpochTimestamp.value), epochWhereStakeUnlocks)
-
-    return `Upgrades your vesting position to a stake position that grants voting rights and fee shares (if the DAO enables fees).
-
-    The new stake will be active starting ${stakeActiveDate}, and will unlock on ${stakeUnlockDate}, after a ${DEFAULT_VESTING_UPGRADE_EPOCH_LOCKUP}-epoch lock-up period.
-
-    For a longer stake lock-up period, please contact us on Discord for assistance.
-    `
-})
 </script>
 
 <style scoped>
diff --git a/pages/index.vue b/pages/index.vue
index e1ce8fe..778a203 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -88,7 +88,7 @@
             <BaseSkeletor height="2" />
         </div>
       <div v-if="hasAnyVotingDelegation" class="homepage__positions">
-        <h3 class="homepage__positions-heading">Voting Positions ({{votingDelegationCount}})</h3>
+        <h3 class="homepage__positions-heading">Voting Power Only Positions ({{votingDelegationCount}})</h3>
         <TableVotingPositions/>
       </div>
 

From ea2b5a4081053d38b3e9d590e7a13562e83619cd Mon Sep 17 00:00:00 2001
From: darklight81 <igor.sulovsky@gmail.com>
Date: Wed, 15 Jan 2025 17:49:18 +0100
Subject: [PATCH 3/6] fix: updated fetching of latest beneficiaries

---
 components/TableOwnedPositions.vue |  2 +-
 utils/hooks.ts                     | 31 ++++++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/components/TableOwnedPositions.vue b/components/TableOwnedPositions.vue
index 34a2ad6..3e4939f 100644
--- a/components/TableOwnedPositions.vue
+++ b/components/TableOwnedPositions.vue
@@ -142,7 +142,7 @@ interface TableRowData {
 }
 
 const stakeIds = computed(() => stakes.data.value?.map(stake => stake.stakeId) ?? [])
-const logs = useAllBeneficiaries(stakeIds.value, chainId)
+const logs = useAllBeneficiaries(address, stakeIds.value, chainId)
 
 const tableRowsData = computed<TableRowData[]>(() => {
     if (stakes.data.value === undefined || secondsTillNextEpoch.value === undefined) {
diff --git a/utils/hooks.ts b/utils/hooks.ts
index 8dd5286..9b383e6 100644
--- a/utils/hooks.ts
+++ b/utils/hooks.ts
@@ -7,6 +7,8 @@ import { EPOCH_CLOCK, PWN_TOKEN, PWN_VESTING_MANAGER, STAKED_PWN_NFT, VE_PWN_TOK
 import { getChainIdTypesafe, type SupportedChain } from "~/constants/chain";
 import type { PowerInEpoch, StakeDetail, VestingDetail } from "~/types/contractResults";
 import { wagmiAdapter } from "~/wagmi";
+import { zeroAddress } from 'viem'
+
 
 export const useUserPwnBalance = (walletAddress: Ref<Address | undefined>, chainId: Ref<SupportedChain>) => {
     return useQuery({
@@ -23,16 +25,41 @@ export const useUserPwnBalance = (walletAddress: Ref<Address | undefined>, chain
     })
 }
 
-export function useAllBeneficiaries(stakeIds: bigint[], chainId: Ref<SupportedChain>) {
+export function useAllBeneficiaries(address: Ref<Address | undefined>, stakeIds: bigint[], chainId: Ref<SupportedChain>) {
     return useQuery({
         queryKey: ['allBeneficiaries', stakeIds],
         queryFn: async () => {
             const client = getClient(wagmiAdapter.wagmiConfig)
-            const logs = await getLogs(client!, {
+
+            // needs to be fetched because of the initial setup of voting power delegator
+            const logsInitialBeneficiary = await getLogs(client!, {
+                address: VE_PWN_TOKEN[chainId.value],
+                event: parseAbiItem('event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'),
+                args: {
+                    originalBeneficiary: zeroAddress,
+                },
+                fromBlock: 0n,
+            })
+
+            const logsOriginalBeneficiary = await getLogs(client!, {
                 address: VE_PWN_TOKEN[chainId.value],
                 event: parseAbiItem('event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'),
+                args: {
+                    originalBeneficiary: address.value,
+                },
                 fromBlock: 0n,
             })
+            const logsNewBeneficiary = await getLogs(client!, {
+                address: VE_PWN_TOKEN[chainId.value],
+                event: parseAbiItem('event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'),
+                args: {
+                    newBeneficiary: address.value,
+                },
+                fromBlock: 0n,
+            })
+
+            const logs = logsInitialBeneficiary.concat(logsOriginalBeneficiary).concat(logsNewBeneficiary)
+            logs.sort((a, b) => Number(a.blockNumber) - Number(b.blockNumber))
 
             // Create a map of stakeId to latest beneficiary
             const beneficiaryMap = new Map<bigint, string>()

From bc96b0a6582a3eadb07bdfbb05fe394a925c807b Mon Sep 17 00:00:00 2001
From: darklight81 <igor.sulovsky@gmail.com>
Date: Wed, 15 Jan 2025 19:23:00 +0100
Subject: [PATCH 4/6] fix: fix column positions

---
 components/TableVotingPositions.vue | 33 ++++++++++++++---------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/components/TableVotingPositions.vue b/components/TableVotingPositions.vue
index 030e9ab..4e4084c 100644
--- a/components/TableVotingPositions.vue
+++ b/components/TableVotingPositions.vue
@@ -42,6 +42,17 @@
                         {{ stake.multiplier }}
                     </span>
                 </td>
+                <td class="table-positions__td">
+                <BaseTooltip
+                    is-interactive
+                    :tooltip-text="stake.owner">
+                  <template #trigger>
+                      <span>
+                       {{ shortenAddress(stake.owner) }}
+                    </span>
+                  </template>
+                </BaseTooltip>
+              </td>
                 <td class="table-positions__td">
                 <template class="table-positions__unlocked-text" v-if="stake.unlocksIn === 0">
                   Unlocked!
@@ -55,18 +66,6 @@
                         </span>
                 </template>
               </td>
-
-                <td class="table-positions__td">
-                  <BaseTooltip
-                      is-interactive
-                      :tooltip-text="stake.owner">
-                    <template #trigger>
-                      <span>
-                       {{ shortenAddress(stake.owner) }}
-                    </span>
-                    </template>
-                  </BaseTooltip>
-                </td>
             </tr>
         </tbody>
     </table>
@@ -204,16 +203,16 @@ const COLUMNS_DEFINITION = [
         text: 'Multiplier',
         width: '11%',
     },
+    {
+      id: 'stakeOwner',
+      text: 'Owner of Stake',
+      width: '20%',
+    },
     {
         id: 'unlocksIn',
         text: 'Unlocks in',
         width: '20%',
     },
-  {
-    id: 'stakeOwner',
-    text: 'Owner of Stake',
-    width: '20%',
-  },
 ] as const
 
 type SortingProp = typeof COLUMNS_DEFINITION[number]['id']

From 5d6b0641dde9f5d88846c21f09e6afde5e0fe980 Mon Sep 17 00:00:00 2001
From: darklight81 <igor.sulovsky@gmail.com>
Date: Thu, 16 Jan 2025 11:43:59 +0100
Subject: [PATCH 5/6] fix: fetching of logs improved

---
 utils/hooks.ts | 46 +++++++++++++++-------------------------------
 1 file changed, 15 insertions(+), 31 deletions(-)

diff --git a/utils/hooks.ts b/utils/hooks.ts
index 9b383e6..06c0d3e 100644
--- a/utils/hooks.ts
+++ b/utils/hooks.ts
@@ -31,40 +31,24 @@ export function useAllBeneficiaries(address: Ref<Address | undefined>, stakeIds:
         queryFn: async () => {
             const client = getClient(wagmiAdapter.wagmiConfig)
 
-            // needs to be fetched because of the initial setup of voting power delegator
-            const logsInitialBeneficiary = await getLogs(client!, {
-                address: VE_PWN_TOKEN[chainId.value],
-                event: parseAbiItem('event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'),
-                args: {
-                    originalBeneficiary: zeroAddress,
-                },
-                fromBlock: 0n,
-            })
-
-            const logsOriginalBeneficiary = await getLogs(client!, {
-                address: VE_PWN_TOKEN[chainId.value],
-                event: parseAbiItem('event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'),
-                args: {
-                    originalBeneficiary: address.value,
-                },
-                fromBlock: 0n,
-            })
-            const logsNewBeneficiary = await getLogs(client!, {
-                address: VE_PWN_TOKEN[chainId.value],
-                event: parseAbiItem('event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'),
-                args: {
-                    newBeneficiary: address.value,
-                },
-                fromBlock: 0n,
-            })
-
-            const logs = logsInitialBeneficiary.concat(logsOriginalBeneficiary).concat(logsNewBeneficiary)
-            logs.sort((a, b) => Number(a.blockNumber) - Number(b.blockNumber))
-
+            const finalLogs = []
+            for (const stakeId of stakeIds) {
+                const logs = await getLogs(client!, {
+                    address: VE_PWN_TOKEN[chainId.value],
+                    event: parseAbiItem('event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'),
+                    args: {
+                        stakeId: stakeId,
+                    },
+                    fromBlock: 0n,
+                })
+                if (logs.length > 0) {
+                    finalLogs.push(logs[logs.length - 1])
+                }
+            }
             // Create a map of stakeId to latest beneficiary
             const beneficiaryMap = new Map<bigint, string>()
 
-            for (const log of logs) {
+            for (const log of finalLogs) {
                 if (stakeIds.includes(log.args.stakeId!)) {
                     beneficiaryMap.set(log.args.stakeId!, log.args.newBeneficiary || '')
                 }

From 6cad4339e0960adaa71caa0505e26e50939ae2a9 Mon Sep 17 00:00:00 2001
From: darklight81 <igor.sulovsky@gmail.com>
Date: Thu, 16 Jan 2025 13:31:27 +0100
Subject: [PATCH 6/6] fix: fetching now uses allsettled

---
 utils/hooks.ts | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/utils/hooks.ts b/utils/hooks.ts
index 06c0d3e..cb30430 100644
--- a/utils/hooks.ts
+++ b/utils/hooks.ts
@@ -27,30 +27,32 @@ export const useUserPwnBalance = (walletAddress: Ref<Address | undefined>, chain
 
 export function useAllBeneficiaries(address: Ref<Address | undefined>, stakeIds: bigint[], chainId: Ref<SupportedChain>) {
     return useQuery({
-        queryKey: ['allBeneficiaries', stakeIds],
+        queryKey: ['allBeneficiaries', stakeIds, address, chainId],
         queryFn: async () => {
             const client = getClient(wagmiAdapter.wagmiConfig)
 
-            const finalLogs = []
-            for (const stakeId of stakeIds) {
+            const fetchLog = async (stakeId: bigint) => {
                 const logs = await getLogs(client!, {
                     address: VE_PWN_TOKEN[chainId.value],
-                    event: parseAbiItem('event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'),
-                    args: {
-                        stakeId: stakeId,
-                    },
+                    event: parseAbiItem(
+                        'event StakePowerDelegated(uint256 indexed stakeId, address indexed originalBeneficiary, address indexed newBeneficiary)'
+                    ),
+                    args: { stakeId },
                     fromBlock: 0n,
                 })
-                if (logs.length > 0) {
-                    finalLogs.push(logs[logs.length - 1])
-                }
+                return logs.length > 0 ? logs[logs.length - 1] : null
             }
-            // Create a map of stakeId to latest beneficiary
-            const beneficiaryMap = new Map<bigint, string>()
 
-            for (const log of finalLogs) {
-                if (stakeIds.includes(log.args.stakeId!)) {
-                    beneficiaryMap.set(log.args.stakeId!, log.args.newBeneficiary || '')
+            const promises = stakeIds.map(fetchLog)
+            const results = await Promise.allSettled(promises)
+
+            const stakeLogs = results.filter((result) => result.status === 'fulfilled').map((result) => result.value)
+
+
+            const beneficiaryMap = new Map()
+            for (const log of stakeLogs) {
+                if (log?.args) {
+                    beneficiaryMap.set(log.args.stakeId, log.args.newBeneficiary)
                 }
             }