From 3d2eaeeabbe4f22e9be0b08ee5370f350b69d95a Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Wed, 2 Mar 2022 00:21:52 +0000 Subject: [PATCH] rebuild vesting timeline --- nym-wallet/package.json | 1 + nym-wallet/src/hooks/useGetBalance.ts | 32 ++++++++++---- .../balance/components/vesting-timeline.tsx | 44 +++++++++++++++++++ nym-wallet/src/pages/balance/vesting.tsx | 19 ++++---- nym-wallet/src/requests/vesting.ts | 24 ++++++++-- nym-wallet/src/svg-icons/vesting-timeline.tsx | 18 -------- nym-wallet/src/types/rust/index.ts | 2 + nym-wallet/yarn.lock | 5 +++ 8 files changed, 103 insertions(+), 42 deletions(-) create mode 100644 nym-wallet/src/pages/balance/components/vesting-timeline.tsx delete mode 100644 nym-wallet/src/svg-icons/vesting-timeline.tsx diff --git a/nym-wallet/package.json b/nym-wallet/package.json index 967126b0ff..b72ee4d937 100644 --- a/nym-wallet/package.json +++ b/nym-wallet/package.json @@ -22,6 +22,7 @@ "@types/react-dom": "^17.0.9", "bs58": "^4.0.1", "clsx": "^1.1.1", + "date-fns": "^2.28.0", "notistack": "^2.0.3", "qrcode.react": "^1.0.1", "react": "^17.0.2", diff --git a/nym-wallet/src/hooks/useGetBalance.ts b/nym-wallet/src/hooks/useGetBalance.ts index 87e373dc05..f3f70131ba 100644 --- a/nym-wallet/src/hooks/useGetBalance.ts +++ b/nym-wallet/src/hooks/useGetBalance.ts @@ -8,7 +8,9 @@ import { getSpendableCoins, getOriginalVesting, getCurrentVestingPeriod, + getVestingAccountInfo, } from '../requests' +import { VestingAccountInfo } from 'src/types/rust/vestingaccountinfo' type TTokenAllocation = { [key in 'vesting' | 'vested' | 'locked' | 'spendable']: Coin['amount'] @@ -20,6 +22,7 @@ export type TUseuserBalance = { tokenAllocation?: TTokenAllocation originalVesting?: OriginalVestingResponse currentVestingPeriod?: Period + vestingAccountInfo?: VestingAccountInfo isLoading: boolean fetchBalance: () => void clearBalance: () => void @@ -33,6 +36,7 @@ export const useGetBalance = (address?: string): TUseuserBalance => { const [tokenAllocation, setTokenAllocation] = useState() const [originalVesting, setOriginalVesting] = useState() const [currentVestingPeriod, setCurrentVestingPeriod] = useState() + const [vestingAccountInfo, setVestingAccountInfo] = useState() const [isLoading, setIsLoading] = useState(false) const fetchBalance = useCallback(async () => { @@ -54,15 +58,23 @@ export const useGetBalance = (address?: string): TUseuserBalance => { setIsLoading(true) if (address) { try { - const [originalVestingValue, vestingCoins, vestedCoins, lockedCoins, spendableCoins, currentVestingPeriod] = - await Promise.all([ - getOriginalVesting(address), - getVestingCoins(address), - getVestedCoins(address), - getLockedCoins(address), - getSpendableCoins(address), - getCurrentVestingPeriod(address), - ]) + const [ + originalVestingValue, + vestingCoins, + vestedCoins, + lockedCoins, + spendableCoins, + currentVestingPeriod, + vestingAccountInfo, + ] = await Promise.all([ + getOriginalVesting(address), + getVestingCoins(address), + getVestedCoins(address), + getLockedCoins(address), + getSpendableCoins(address), + getCurrentVestingPeriod(address), + getVestingAccountInfo(address), + ]) setOriginalVesting(originalVestingValue) setCurrentVestingPeriod(currentVestingPeriod) setTokenAllocation({ @@ -71,6 +83,7 @@ export const useGetBalance = (address?: string): TUseuserBalance => { locked: lockedCoins.amount, spendable: spendableCoins.amount, }) + setVestingAccountInfo(vestingAccountInfo) } catch (e) { clearTokenAllocation() clearOriginalVesting() @@ -110,6 +123,7 @@ export const useGetBalance = (address?: string): TUseuserBalance => { tokenAllocation, originalVesting, currentVestingPeriod, + vestingAccountInfo, fetchBalance, clearBalance, clearAll, diff --git a/nym-wallet/src/pages/balance/components/vesting-timeline.tsx b/nym-wallet/src/pages/balance/components/vesting-timeline.tsx new file mode 100644 index 0000000000..b477472354 --- /dev/null +++ b/nym-wallet/src/pages/balance/components/vesting-timeline.tsx @@ -0,0 +1,44 @@ +import React, { useContext } from 'react' +import { Box, Tooltip, Typography } from '@mui/material' +import { format } from 'date-fns' +import { ClientContext } from '../../../context/main' + +const calculateNubPosition = (arrLength: number, index: number) => (1 / arrLength) * 100 * (index + 1) + +export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ percentageComplete }) => { + const { + userBalance: { currentVestingPeriod, vestingAccountInfo }, + } = useContext(ClientContext) + + const nextPeriod = + typeof currentVestingPeriod === 'object' && !!vestingAccountInfo?.periods + ? Number(vestingAccountInfo?.periods[currentVestingPeriod.In]?.start_time) + : undefined + + return ( + + + + + + {vestingAccountInfo?.periods.map((period, i, arr) => ( + + = calculateNubPosition(arr.length, i) ? '#121726' : '#B9B9B9'} + style={{ cursor: 'pointer' }} + /> + + ))} + + {nextPeriod && ( + + Next vesting period: {format(new Date(nextPeriod * 1000), 'HH:mm do MMM yyyy')} + + )} + + ) +} diff --git a/nym-wallet/src/pages/balance/vesting.tsx b/nym-wallet/src/pages/balance/vesting.tsx index b02358beb6..88c1cf83e1 100644 --- a/nym-wallet/src/pages/balance/vesting.tsx +++ b/nym-wallet/src/pages/balance/vesting.tsx @@ -20,6 +20,7 @@ import { NymCard, InfoTooltip, Title, Fee } from '../../components' import { ClientContext } from '../../context/main' import { withdrawVestedCoins } from '../../requests' import { Period } from '../../types' +import { VestingTimeline } from './components/vesting-timeline' export const VestingCard = () => { const { userBalance } = useContext(ClientContext) @@ -55,7 +56,7 @@ export const VestingCard = () => { - + {userBalance.tokenAllocation?.spendable !== '0' ? :
}