diff --git a/app.vue b/app.vue index 3481057..d201502 100644 --- a/app.vue +++ b/app.vue @@ -2,9 +2,13 @@ + + + diff --git a/components/BaseModal.vue b/components/BaseModal.vue new file mode 100644 index 0000000..03b8dba --- /dev/null +++ b/components/BaseModal.vue @@ -0,0 +1,319 @@ + + + + + + + diff --git a/components/Header.vue b/components/Header.vue index 7d25538..5c19e0c 100644 --- a/components/Header.vue +++ b/components/Header.vue @@ -98,7 +98,7 @@ + + diff --git a/components/TableOwnedPositions.vue b/components/TableOwnedPositions.vue index 3e4939f..e9f850f 100644 --- a/components/TableOwnedPositions.vue +++ b/components/TableOwnedPositions.vue @@ -4,7 +4,9 @@ {{ column.text }} - + @@ -14,11 +16,11 @@ {{ stake.idText }} - {{ stake.amount }} + {{ formatDecimalPoint(stake.amount) }} -
+
- {{ stake.votingPower }} + {{ formatDecimalPoint(stake.votingPower) }}
- - {{ stake.votingPower }} +
+ + {{ formatDecimalPoint(stake.votingPower) }} - - - +
+ + + + + + Increase Duration + + @@ -94,6 +106,8 @@ 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"; +import {getFormattedVotingPower} from "~/utils/parsing"; +import {formatDecimalPoint} from "~/utils/utils"; const { address } = useAccount() const chainId = useChainIdTypesafe() @@ -103,8 +117,7 @@ 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 {epoch: currentEpoch} = useManuallySetEpoch(chainId) const initialEpochTimestampQuery = useInitialEpochTimestamp(chainId) const initialEpochTimestamp = computed(() => initialEpochTimestampQuery.data.value) @@ -142,6 +155,7 @@ interface TableRowData { } const stakeIds = computed(() => stakes.data.value?.map(stake => stake.stakeId) ?? []) +const { openModal } = useIncreaseStakeModal() const logs = useAllBeneficiaries(address, stakeIds.value, chainId) const tableRowsData = computed(() => { @@ -177,7 +191,7 @@ const tableRowsData = computed(() => { id: stake.stakeId, idText: String(stake.stakeId), amount: formattedStakedAmount, - votingPower: String(Math.floor(Number(formattedStakedAmount) * multiplier)), + votingPower: getFormattedVotingPower(formattedStakedAmount, multiplier), multiplier, lockUpEpochs: stake.lockUpEpochs, duration: stake.lockUpEpochs * SECONDS_IN_EPOCH, @@ -239,12 +253,12 @@ const COLUMNS_DEFINITION = [ { id: 'amount', text: 'Amount', - width: '20%', + width: '15%', }, { id: 'votingPower', text: 'Voting Power', - width: '20%', + width: '15%', }, { id: 'multiplier', @@ -261,6 +275,11 @@ const COLUMNS_DEFINITION = [ text: 'Unlocks in', width: '20%', }, + { + id: 'actions', + text: 'Actions', + width: '10%', + } ] as const type SortingProp = typeof COLUMNS_DEFINITION[number]['id'] @@ -322,6 +341,9 @@ const sortedTableRowsData = computed(() => { return a.unlocksIn > b.unlocksIn ? 1 : -1 } } + default: { + return 0 + } } }) }) @@ -412,6 +434,9 @@ const upgradeToStakeTooltipText = computed(() => { &:not(:first-child) { border-top: 1px solid var(--border-color); } + &--disabled { + opacity: 0.5; + } } &__td { @@ -448,7 +473,8 @@ const upgradeToStakeTooltipText = computed(() => { display: inline-flex; align-items: center; height: 2rem; - padding: 0 1rem; + padding: 0 0.5rem; + margin: 0.5rem 0; transition: all 0.3s; color: var(--primary-color); @@ -458,8 +484,6 @@ const upgradeToStakeTooltipText = computed(() => { border-style: solid; font-family: var(--font-family-screener); - margin-left: 1rem; - &:hover { background: var(--primary-color-2); } diff --git a/components/TableVotingPositions.vue b/components/TableVotingPositions.vue index 4e4084c..5ef1b6b 100644 --- a/components/TableVotingPositions.vue +++ b/components/TableVotingPositions.vue @@ -10,15 +10,16 @@ - + {{ stake.idText }} - {{ stake.amount }} + {{ formatDecimalPoint(stake.amount) }}
- {{ stake.votingPower }} + {{ formatDecimalPoint(stake.votingPower) }}
- {{ stake.votingPower }} + {{ formatDecimalPoint(stake.votingPower) }} @@ -73,32 +74,36 @@