From aeb1e12e88bd058f2dc85b770f29540f0497edd1 Mon Sep 17 00:00:00 2001 From: cpl121 Date: Tue, 10 Dec 2024 14:27:19 +0100 Subject: [PATCH 01/23] feat: add supply increase vesting overview to homepage --- .../core/src/hooks/useCountdownByTimestamp.ts | 16 +- .../app/(protected)/home/page.tsx | 6 +- .../app/(protected)/vesting/page.tsx | 65 ++------ apps/wallet-dashboard/app/globals.css | 56 +++++-- .../SupplyIncreaseVestingOverview.tsx | 149 ++++++++++++++++++ apps/wallet-dashboard/components/index.ts | 1 + apps/wallet-dashboard/hooks/index.ts | 1 + .../useGetSupplyIncreaseVestingObjects.ts | 95 +++++++++++ 8 files changed, 314 insertions(+), 75 deletions(-) create mode 100644 apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx create mode 100644 apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts diff --git a/apps/core/src/hooks/useCountdownByTimestamp.ts b/apps/core/src/hooks/useCountdownByTimestamp.ts index 3b79b69b915..5879f092d15 100644 --- a/apps/core/src/hooks/useCountdownByTimestamp.ts +++ b/apps/core/src/hooks/useCountdownByTimestamp.ts @@ -9,7 +9,7 @@ import { MILLISECONDS_PER_SECOND, } from '../constants'; -export function useCountdownByTimestamp(initialTimestamp: number | null): string { +export function useCountdownByTimestamp(initialTimestamp: number | null, showSeconds = true, showMinutes = true, showHours = true, showDays = true): string { const [timeRemainingMs, setTimeRemainingMs] = useState(0); useEffect(() => { @@ -22,11 +22,11 @@ export function useCountdownByTimestamp(initialTimestamp: number | null): string return () => clearInterval(interval); }, [initialTimestamp]); - const formattedCountdown = formatCountdown(timeRemainingMs); + const formattedCountdown = formatCountdown(timeRemainingMs, showSeconds, showMinutes, showHours, showDays); return formattedCountdown; } -function formatCountdown(totalMilliseconds: number) { +function formatCountdown(totalMilliseconds: number, showSeconds: boolean, showMinutes: boolean, showHours: boolean, showDays: boolean) { const days = Math.floor(totalMilliseconds / MILLISECONDS_PER_DAY); const hours = Math.floor((totalMilliseconds % MILLISECONDS_PER_DAY) / MILLISECONDS_PER_HOUR); const minutes = Math.floor( @@ -36,11 +36,11 @@ function formatCountdown(totalMilliseconds: number) { (totalMilliseconds % MILLISECONDS_PER_MINUTE) / MILLISECONDS_PER_SECOND, ); - const timeUnits = []; - if (days > 0) timeUnits.push(`${days}d`); - if (hours > 0) timeUnits.push(`${hours}h`); - if (minutes > 0) timeUnits.push(`${minutes}m`); - if (seconds > 0 || timeUnits.length === 0) timeUnits.push(`${seconds}s`); + const timeUnits: string[] = []; + if (showHours && days > 0) timeUnits.push(`${days}d`); + if (showHours && hours > 0) timeUnits.push(`${hours}h`); + if (showMinutes && minutes > 0) timeUnits.push(`${minutes}m`); + if (showSeconds && (seconds > 0 || timeUnits.length === 0)) timeUnits.push(`${seconds}s`); return timeUnits.join(' '); } diff --git a/apps/wallet-dashboard/app/(protected)/home/page.tsx b/apps/wallet-dashboard/app/(protected)/home/page.tsx index 61f55475702..774edce294c 100644 --- a/apps/wallet-dashboard/app/(protected)/home/page.tsx +++ b/apps/wallet-dashboard/app/(protected)/home/page.tsx @@ -8,6 +8,7 @@ import { TransactionsOverview, StakingOverview, MigrationOverview, + SupplyIncreaseVestingOverview, } from '@/components'; import { useFeature } from '@growthbook/growthbook-react'; import { Feature } from '@iota/core'; @@ -18,6 +19,7 @@ function HomeDashboardPage(): JSX.Element { const account = useCurrentAccount(); const stardustMigrationEnabled = useFeature(Feature.StardustMigration).value; + const supplyIncreaseVestingEnabled = useFeature(Feature.SupplyIncreaseVesting).value; return (
@@ -34,9 +36,7 @@ function HomeDashboardPage(): JSX.Element {
-
- Vesting -
+ {supplyIncreaseVestingEnabled && }
diff --git a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx index 0488681830d..13de15b3a2e 100644 --- a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx +++ b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx @@ -10,17 +10,8 @@ import { useStakeDialog, VestingScheduleDialog, } from '@/components'; -import { useGetCurrentEpochStartTimestamp, useNotifications, usePopups } from '@/hooks'; -import { - buildSupplyIncreaseVestingSchedule, - formatDelegatedTimelockedStake, - getLatestOrEarliestSupplyIncreaseVestingPayout, - getVestingOverview, - groupTimelockedStakedObjects, - isTimelockedUnlockable, - mapTimelockObjects, - TimelockedStakedObjectsGrouped, -} from '@/lib/utils'; +import { useGetSupplyIncreaseVestingObjects, useNotifications, usePopups } from '@/hooks'; +import { groupTimelockedStakedObjects, TimelockedStakedObjectsGrouped } from '@/lib/utils'; import { NotificationType } from '@/stores/notificationStore'; import { useFeature } from '@growthbook/growthbook-react'; import { @@ -45,10 +36,7 @@ import { TIMELOCK_IOTA_TYPE, useFormatCoin, useGetActiveValidatorsInfo, - useGetAllOwnedObjects, - useGetTimelockedStakedObjects, useTheme, - useUnlockTimelockedObjectsTransaction, useCountdownByTimestamp, Feature, } from '@iota/core'; @@ -62,18 +50,14 @@ import { useEffect, useState } from 'react'; function VestingDashboardPage(): JSX.Element { const account = useCurrentAccount(); + const address = account?.address || ''; const queryClient = useQueryClient(); const iotaClient = useIotaClient(); const router = useRouter(); const [isVestingScheduleDialogOpen, setIsVestingScheduleDialogOpen] = useState(false); const { addNotification } = useNotifications(); const { openPopup, closePopup } = usePopups(); - const { data: currentEpochMs } = useGetCurrentEpochStartTimestamp(); const { data: activeValidators } = useGetActiveValidatorsInfo(); - const { data: timelockedObjects } = useGetAllOwnedObjects(account?.address || '', { - StructType: TIMELOCK_IOTA_TYPE, - }); - const { data: timelockedStakedObjects } = useGetTimelockedStakedObjects(account?.address || ''); const { mutateAsync: signAndExecuteTransaction } = useSignAndExecuteTransaction(); const { theme } = useTheme(); @@ -84,16 +68,16 @@ function VestingDashboardPage(): JSX.Element { const supplyIncreaseVestingEnabled = useFeature(Feature.SupplyIncreaseVesting).value; - const timelockedMapped = mapTimelockObjects(timelockedObjects || []); - const timelockedstakedMapped = formatDelegatedTimelockedStake(timelockedStakedObjects || []); + const { + nextPayout, + vestingPortfolio, + vestingSchedule, + vestingStakedMapped, + unlockAllTimelockedObjects, + } = useGetSupplyIncreaseVestingObjects(address); const timelockedStakedObjectsGrouped: TimelockedStakedObjectsGrouped[] = - groupTimelockedStakedObjects(timelockedstakedMapped || []); - - const vestingSchedule = getVestingOverview( - [...timelockedMapped, ...timelockedstakedMapped], - Number(currentEpochMs), - ); + groupTimelockedStakedObjects(vestingStakedMapped || []); const { isDialogStakeOpen, @@ -106,21 +90,6 @@ function VestingDashboardPage(): JSX.Element { handleNewStake, } = useStakeDialog(); - const nextPayout = getLatestOrEarliestSupplyIncreaseVestingPayout( - [...timelockedMapped, ...timelockedstakedMapped], - Number(currentEpochMs), - false, - ); - - const lastPayout = getLatestOrEarliestSupplyIncreaseVestingPayout( - [...timelockedMapped, ...timelockedstakedMapped], - Number(currentEpochMs), - true, - ); - - const vestingPortfolio = - lastPayout && buildSupplyIncreaseVestingSchedule(lastPayout, Number(currentEpochMs)); - const formattedLastPayoutExpirationTime = useCountdownByTimestamp( Number(nextPayout?.expirationTimestampMs), ); @@ -151,16 +120,6 @@ function VestingDashboardPage(): JSX.Element { ); } - const unlockedTimelockedObjects = timelockedMapped?.filter((timelockedObject) => - isTimelockedUnlockable(timelockedObject, Number(currentEpochMs)), - ); - const unlockedTimelockedObjectIds: string[] = - unlockedTimelockedObjects.map((timelocked) => timelocked.id.id) || []; - const { data: unlockAllTimelockedObjects } = useUnlockTimelockedObjectsTransaction( - account?.address || '', - unlockedTimelockedObjectIds, - ); - function handleOnSuccess(digest: string): void { iotaClient .waitForTransaction({ @@ -299,7 +258,7 @@ function VestingDashboardPage(): JSX.Element { )} - {timelockedstakedMapped.length === 0 ? ( + {vestingStakedMapped.length === 0 ? ( <> *:where( - [style*='grid-area: balance'], - [style*='grid-area: staking'], - [style*='grid-area: migration'] - ) { + & > *:where([style*='grid-area: balance'], [style*='grid-area: staking']) { height: 200px; } } - .home-page-grid-container:has(.with-migration) { + .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { grid-template-areas: 'balance' 'staking' 'migration' 'coins' + 'activity'; + } + .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { + grid-template-areas: + 'balance' + 'staking' 'vesting' + 'coins' + 'activity'; + } + .home-page-grid-container:has(.with-vesting)::has(.with-migration) { + grid-template-areas: + 'balance' + 'staking' + 'migration' + 'vesting' + 'coins' 'activity'; } @@ -53,15 +63,29 @@ body { 'balance balance' 'staking staking' 'coins coins' - 'vesting vesting' 'activity activity'; } - .home-page-grid-container:has(.with-migration) { + .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { grid-template-areas: 'balance balance' 'staking migration' 'coins coins' + 'activity activity'; + } + .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { + grid-template-areas: + 'balance balance' + 'staking staking' + 'vesting vesting' + 'coins coins' + 'activity activity'; + } + .home-page-grid-container:has(.with-vesting)::has(.with-migration) { + grid-template-areas: + 'balance balance' + 'staking migration' 'vesting vesting' + 'coins coins' 'activity activity'; } } @@ -69,12 +93,22 @@ body { @screen md { .home-page-grid-container { @apply grid-cols-3; + grid-template-areas: + 'balance staking staking' + 'coins activity activity'; + } + .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { + grid-template-areas: + 'balance staking migration' + 'coins activity activity'; + } + .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { grid-template-areas: 'balance staking staking' 'coins vesting vesting' 'coins activity activity'; } - .home-page-grid-container:has(.with-migration) { + .home-page-grid-container:has(.with-vesting)::has(.with-migration) { grid-template-areas: 'balance staking migration' 'coins vesting vesting' diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx new file mode 100644 index 00000000000..52656d258a4 --- /dev/null +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -0,0 +1,149 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import { useCurrentAccount, useIotaClient } from '@iota/dapp-kit'; +import { useGetSupplyIncreaseVestingObjects } from '@/hooks'; +import { + ButtonType, + Card, + CardAction, + CardActionType, + CardBody, + CardType, + LabelText, + LabelTextSize, + Panel, + Title, +} from '@iota/apps-ui-kit'; +import { StakeDialog, useStakeDialog } from './Dialogs'; +import { TIMELOCK_IOTA_TYPE, useCountdownByTimestamp, useFormatCoin } from '@iota/core'; +import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; +import SvgClock from '@iota/ui-icons/src/Clock'; +import { useQueryClient } from '@tanstack/react-query'; + +export function SupplyIncreaseVestingOverview() { + const account = useCurrentAccount(); + const address = account?.address || ''; + const iotaClient = useIotaClient(); + const queryClient = useQueryClient(); + const { nextPayout, vestingSchedule, vestingMapped, vestingStakedMapped } = + useGetSupplyIncreaseVestingObjects(address); + + const { + isDialogStakeOpen, + stakeDialogView, + setStakeDialogView, + selectedStake, + selectedValidator, + setSelectedValidator, + handleCloseStakeDialog, + handleNewStake, + } = useStakeDialog(); + + const formattedLastPayoutExpirationTime = useCountdownByTimestamp( + Number(nextPayout?.expirationTimestampMs), + false, + false, + ); + const [formattedNextPayout, nextPayoutSymbol, nextPayoutResult] = useFormatCoin( + nextPayout?.amount, + IOTA_TYPE_ARG, + ); + + const [formattedAvailableStaking, availableStakingSymbol] = useFormatCoin( + vestingSchedule.availableStaking, + IOTA_TYPE_ARG, + ); + + const showSupplyIncreaseVestingOverview = + vestingMapped.length > 0 || vestingStakedMapped.length > 0; + + function handleOnSuccess(digest: string): void { + iotaClient + .waitForTransaction({ + digest, + }) + .then(() => { + queryClient.invalidateQueries({ + queryKey: ['get-timelocked-staked-objects', account?.address], + }); + queryClient.invalidateQueries({ + queryKey: [ + 'get-all-owned-objects', + account?.address, + { + StructType: TIMELOCK_IOTA_TYPE, + }, + ], + }); + }); + } + + return showSupplyIncreaseVestingOverview ? ( +
+ + + <div className="flex h-full w-full items-center gap-md p-md--rs"> + <div className="w-1/2"> + <Card type={CardType.Filled} isHoverable> + <CardBody + title="" + subtitle={ + <LabelText + size={LabelTextSize.Large} + label="Next reward" + text={ + nextPayoutResult.isPending + ? '-' + : `${formattedNextPayout} ` + } + supportingLabel={nextPayoutSymbol} + /> + } + /> + <CardAction + type={CardActionType.Button} + buttonType={ButtonType.Ghost} + title={formattedLastPayoutExpirationTime} + icon={<SvgClock />} + /> + </Card> + </div> + <div className="w-1/2"> + <Card type={CardType.Filled} isHoverable> + <CardBody + title="" + subtitle={ + <LabelText + size={LabelTextSize.Large} + label="Available for staking" + text={formattedAvailableStaking} + supportingLabel={availableStakingSymbol} + /> + } + /> + <CardAction + type={CardActionType.Button} + buttonType={ButtonType.Primary} + title={'Stake'} + onClick={() => handleNewStake()} + /> + </Card> + </div> + </div> + </Panel> + <StakeDialog + isTimelockedStaking={true} + stakedDetails={selectedStake} + onSuccess={handleOnSuccess} + isOpen={isDialogStakeOpen} + handleClose={handleCloseStakeDialog} + view={stakeDialogView} + setView={setStakeDialogView} + selectedValidator={selectedValidator} + setSelectedValidator={setSelectedValidator} + maxStakableTimelockedAmount={BigInt(vestingSchedule.availableStaking)} + /> + </div> + ) : null; +} diff --git a/apps/wallet-dashboard/components/index.ts b/apps/wallet-dashboard/components/index.ts index 179f9e836ac..f85d3beec0c 100644 --- a/apps/wallet-dashboard/components/index.ts +++ b/apps/wallet-dashboard/components/index.ts @@ -26,3 +26,4 @@ export * from './tiles'; export * from './Toaster'; export * from './Banner'; export * from './MigrationOverview'; +export * from './SupplyIncreaseVestingOverview'; diff --git a/apps/wallet-dashboard/hooks/index.ts b/apps/wallet-dashboard/hooks/index.ts index 77ea2304aa4..95db4ed9f9f 100644 --- a/apps/wallet-dashboard/hooks/index.ts +++ b/apps/wallet-dashboard/hooks/index.ts @@ -11,3 +11,4 @@ export * from './useGetCurrentEpochStartTimestamp'; export * from './useTimelockedUnstakeTransaction'; export * from './useExplorerLinkGetter'; export * from './useGetStardustMigratableObjects'; +export * from './useGetSupplyIncreaseVestingObjects'; diff --git a/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts new file mode 100644 index 00000000000..19852f0c4bc --- /dev/null +++ b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts @@ -0,0 +1,95 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import { useGetCurrentEpochStartTimestamp } from '@/hooks'; +import { + SupplyIncreaseVestingPayout, + SupplyIncreaseVestingPortfolio, + TimelockedObject, + VestingOverview, +} from '@/lib/interfaces'; +import { + buildSupplyIncreaseVestingSchedule, + ExtendedDelegatedTimelockedStake, + formatDelegatedTimelockedStake, + getLatestOrEarliestSupplyIncreaseVestingPayout, + getVestingOverview, + isSupplyIncreaseVestingObject, + isTimelockedUnlockable, + mapTimelockObjects, +} from '@/lib/utils'; +import { + TIMELOCK_IOTA_TYPE, + useGetAllOwnedObjects, + useGetTimelockedStakedObjects, + useUnlockTimelockedObjectsTransaction, +} from '@iota/core'; +import { Transaction } from '@iota/iota-sdk/transactions'; + +export function useGetSupplyIncreaseVestingObjects(address: string): { + nextPayout: SupplyIncreaseVestingPayout | undefined; + lastPayout: SupplyIncreaseVestingPayout | undefined; + vestingSchedule: VestingOverview; + vestingPortfolio: SupplyIncreaseVestingPortfolio | undefined; + vestingMapped: TimelockedObject[]; + vestingStakedMapped: ExtendedDelegatedTimelockedStake[]; + unlockAllTimelockedObjects: + | { + transactionBlock: Transaction; + } + | undefined; +} { + const { data: currentEpochMs } = useGetCurrentEpochStartTimestamp(); + + const { data: timelockedObjects } = useGetAllOwnedObjects(address || '', { + StructType: TIMELOCK_IOTA_TYPE, + }); + const { data: timelockedStakedObjects } = useGetTimelockedStakedObjects(address || ''); + + const vestingMapped = mapTimelockObjects(timelockedObjects || []).filter( + isSupplyIncreaseVestingObject, + ); + const vestingStakedMapped = formatDelegatedTimelockedStake( + timelockedStakedObjects || [], + ).filter(isSupplyIncreaseVestingObject); + + const vestingSchedule = getVestingOverview( + [...vestingMapped, ...vestingStakedMapped], + Number(currentEpochMs), + ); + + const nextPayout = getLatestOrEarliestSupplyIncreaseVestingPayout( + [...vestingMapped, ...vestingStakedMapped], + Number(currentEpochMs), + false, + ); + + const lastPayout = getLatestOrEarliestSupplyIncreaseVestingPayout( + [...vestingMapped, ...vestingStakedMapped], + Number(currentEpochMs), + true, + ); + + const vestingPortfolio = + lastPayout && buildSupplyIncreaseVestingSchedule(lastPayout, Number(currentEpochMs)); + + const unlockedTimelockedObjects = vestingMapped?.filter((timelockedObject) => + isTimelockedUnlockable(timelockedObject, Number(currentEpochMs)), + ); + const unlockedTimelockedObjectIds: string[] = + unlockedTimelockedObjects.map((timelocked) => timelocked.id.id) || []; + const { data: unlockAllTimelockedObjects } = useUnlockTimelockedObjectsTransaction( + address || '', + unlockedTimelockedObjectIds, + ); + + return { + nextPayout, + lastPayout, + vestingSchedule, + vestingPortfolio, + vestingMapped, + vestingStakedMapped, + unlockAllTimelockedObjects, + }; +} From 719e94c994c997be73803117e6ad30f05a4a36ba Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Tue, 10 Dec 2024 14:31:56 +0100 Subject: [PATCH 02/23] fix: linter --- .../core/src/hooks/useCountdownByTimestamp.ts | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/apps/core/src/hooks/useCountdownByTimestamp.ts b/apps/core/src/hooks/useCountdownByTimestamp.ts index 5879f092d15..822d15b507b 100644 --- a/apps/core/src/hooks/useCountdownByTimestamp.ts +++ b/apps/core/src/hooks/useCountdownByTimestamp.ts @@ -9,7 +9,13 @@ import { MILLISECONDS_PER_SECOND, } from '../constants'; -export function useCountdownByTimestamp(initialTimestamp: number | null, showSeconds = true, showMinutes = true, showHours = true, showDays = true): string { +export function useCountdownByTimestamp( + initialTimestamp: number | null, + showSeconds = true, + showMinutes = true, + showHours = true, + showDays = true, +): string { const [timeRemainingMs, setTimeRemainingMs] = useState<number>(0); useEffect(() => { @@ -22,11 +28,23 @@ export function useCountdownByTimestamp(initialTimestamp: number | null, showSec return () => clearInterval(interval); }, [initialTimestamp]); - const formattedCountdown = formatCountdown(timeRemainingMs, showSeconds, showMinutes, showHours, showDays); + const formattedCountdown = formatCountdown( + timeRemainingMs, + showSeconds, + showMinutes, + showHours, + showDays, + ); return formattedCountdown; } -function formatCountdown(totalMilliseconds: number, showSeconds: boolean, showMinutes: boolean, showHours: boolean, showDays: boolean) { +function formatCountdown( + totalMilliseconds: number, + showSeconds: boolean, + showMinutes: boolean, + showHours: boolean, + showDays: boolean, +) { const days = Math.floor(totalMilliseconds / MILLISECONDS_PER_DAY); const hours = Math.floor((totalMilliseconds % MILLISECONDS_PER_DAY) / MILLISECONDS_PER_HOUR); const minutes = Math.floor( From 6ed71735af80f834ed65c5eeaf31c54138d5defe Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Thu, 12 Dec 2024 17:59:56 +0100 Subject: [PATCH 03/23] fix(dashboard): remove isHoverable prop --- .../components/SupplyIncreaseVestingOverview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx index 52656d258a4..7f3082a78b6 100644 --- a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -85,7 +85,7 @@ export function SupplyIncreaseVestingOverview() { <Title title="Vesting" /> <div className="flex h-full w-full items-center gap-md p-md--rs"> <div className="w-1/2"> - <Card type={CardType.Filled} isHoverable> + <Card type={CardType.Filled}> <CardBody title="" subtitle={ @@ -110,7 +110,7 @@ export function SupplyIncreaseVestingOverview() { </Card> </div> <div className="w-1/2"> - <Card type={CardType.Filled} isHoverable> + <Card type={CardType.Filled}> <CardBody title="" subtitle={ From c8a80e5d1dc8165d05576385f33310484f16580e Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Thu, 12 Dec 2024 18:00:14 +0100 Subject: [PATCH 04/23] fix(dashboard): use showDays in formatCountdown --- apps/core/src/hooks/useCountdownByTimestamp.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/core/src/hooks/useCountdownByTimestamp.ts b/apps/core/src/hooks/useCountdownByTimestamp.ts index 822d15b507b..ca28efb3c77 100644 --- a/apps/core/src/hooks/useCountdownByTimestamp.ts +++ b/apps/core/src/hooks/useCountdownByTimestamp.ts @@ -55,7 +55,7 @@ function formatCountdown( ); const timeUnits: string[] = []; - if (showHours && days > 0) timeUnits.push(`${days}d`); + if (showDays && days > 0) timeUnits.push(`${days}d`); if (showHours && hours > 0) timeUnits.push(`${hours}h`); if (showMinutes && minutes > 0) timeUnits.push(`${minutes}m`); if (showSeconds && (seconds > 0 || timeUnits.length === 0)) timeUnits.push(`${seconds}s`); From 2499a5762e6c040d4a1ef92ebf2d467678363ce6 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Thu, 12 Dec 2024 18:00:38 +0100 Subject: [PATCH 05/23] fix(dashboard): rename vesting by supplyIncreaseVesting --- .../app/(protected)/vesting/page.tsx | 39 +++++++-------- .../useGetSupplyIncreaseVestingObjects.ts | 47 ++++++++++--------- 2 files changed, 44 insertions(+), 42 deletions(-) diff --git a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx index 13de15b3a2e..f1056edf6e8 100644 --- a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx +++ b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx @@ -70,14 +70,15 @@ function VestingDashboardPage(): JSX.Element { const { nextPayout, - vestingPortfolio, - vestingSchedule, - vestingStakedMapped, - unlockAllTimelockedObjects, + supplyIncreaseVestingPortfolio, + supplyIncreaseVestingSchedule, + supplyIncreaseVestingMapped, + supplyIncreaseVestingStakedMapped, + unlockAllsupplyIncreaseVesting, } = useGetSupplyIncreaseVestingObjects(address); const timelockedStakedObjectsGrouped: TimelockedStakedObjectsGrouped[] = - groupTimelockedStakedObjects(vestingStakedMapped || []); + groupTimelockedStakedObjects(supplyIncreaseVestingStakedMapped || []); const { isDialogStakeOpen, @@ -95,17 +96,17 @@ function VestingDashboardPage(): JSX.Element { ); const [formattedTotalVested, vestedSymbol] = useFormatCoin( - vestingSchedule.totalVested, + supplyIncreaseVestingSchedule.totalVested, IOTA_TYPE_ARG, ); const [formattedTotalLocked, lockedSymbol] = useFormatCoin( - vestingSchedule.totalLocked, + supplyIncreaseVestingSchedule.totalLocked, IOTA_TYPE_ARG, ); const [formattedAvailableClaiming, availableClaimingSymbol] = useFormatCoin( - vestingSchedule.availableClaiming, + supplyIncreaseVestingSchedule.availableClaiming, IOTA_TYPE_ARG, ); @@ -142,13 +143,13 @@ function VestingDashboardPage(): JSX.Element { } const handleCollect = () => { - if (!unlockAllTimelockedObjects?.transactionBlock) { + if (!unlockAllsupplyIncreaseVesting?.transactionBlock) { addNotification('Failed to create a Transaction', NotificationType.Error); return; } signAndExecuteTransaction( { - transaction: unlockAllTimelockedObjects.transactionBlock, + transaction: unlockAllsupplyIncreaseVesting.transactionBlock, }, { onSuccess: (tx) => { @@ -224,8 +225,8 @@ function VestingDashboardPage(): JSX.Element { title="Collect" buttonType={ButtonType.Primary} buttonDisabled={ - !vestingSchedule.availableClaiming || - vestingSchedule.availableClaiming === 0 + !supplyIncreaseVestingSchedule.availableClaiming || + supplyIncreaseVestingSchedule.availableClaiming === 0 } /> </Card> @@ -246,19 +247,19 @@ function VestingDashboardPage(): JSX.Element { onClick={openReceiveTokenPopup} title="See All" buttonType={ButtonType.Secondary} - buttonDisabled={!vestingPortfolio} + buttonDisabled={!supplyIncreaseVestingPortfolio} /> </Card> - {vestingPortfolio && ( + {supplyIncreaseVestingPortfolio && ( <VestingScheduleDialog open={isVestingScheduleDialogOpen} setOpen={setIsVestingScheduleDialogOpen} - vestingPortfolio={vestingPortfolio} + vestingPortfolio={supplyIncreaseVestingPortfolio} /> )} </div> </Panel> - {vestingStakedMapped.length === 0 ? ( + {supplyIncreaseVestingMapped.length === 0 ? ( <> <Banner videoSrc={videoSrc} @@ -274,11 +275,11 @@ function VestingDashboardPage(): JSX.Element { <div className="flex flex-row space-x-4"> <div className="flex flex-col items-center rounded-lg border p-4"> <span>Your stake</span> - <span>{vestingSchedule.totalStaked}</span> + <span>{supplyIncreaseVestingSchedule.totalStaked}</span> </div> <div className="flex flex-col items-center rounded-lg border p-4"> <span>Total Unlocked</span> - <span>{vestingSchedule.totalUnlocked}</span> + <span>{supplyIncreaseVestingSchedule.totalUnlocked}</span> </div> </div> <div className="flex w-full flex-col items-center justify-center space-y-4 pt-4"> @@ -325,7 +326,7 @@ function VestingDashboardPage(): JSX.Element { setView={setStakeDialogView} selectedValidator={selectedValidator} setSelectedValidator={setSelectedValidator} - maxStakableTimelockedAmount={BigInt(vestingSchedule.availableStaking)} + maxStakableTimelockedAmount={BigInt(supplyIncreaseVestingSchedule.availableStaking)} /> </div> ); diff --git a/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts index 19852f0c4bc..053ef3092bd 100644 --- a/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts +++ b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts @@ -29,11 +29,11 @@ import { Transaction } from '@iota/iota-sdk/transactions'; export function useGetSupplyIncreaseVestingObjects(address: string): { nextPayout: SupplyIncreaseVestingPayout | undefined; lastPayout: SupplyIncreaseVestingPayout | undefined; - vestingSchedule: VestingOverview; - vestingPortfolio: SupplyIncreaseVestingPortfolio | undefined; - vestingMapped: TimelockedObject[]; - vestingStakedMapped: ExtendedDelegatedTimelockedStake[]; - unlockAllTimelockedObjects: + supplyIncreaseVestingSchedule: VestingOverview; + supplyIncreaseVestingPortfolio: SupplyIncreaseVestingPortfolio | undefined; + supplyIncreaseVestingMapped: TimelockedObject[]; + supplyIncreaseVestingStakedMapped: ExtendedDelegatedTimelockedStake[]; + unlockAllsupplyIncreaseVesting: | { transactionBlock: Transaction; } @@ -46,50 +46,51 @@ export function useGetSupplyIncreaseVestingObjects(address: string): { }); const { data: timelockedStakedObjects } = useGetTimelockedStakedObjects(address || ''); - const vestingMapped = mapTimelockObjects(timelockedObjects || []).filter( + const supplyIncreaseVestingMapped = mapTimelockObjects(timelockedObjects || []).filter( isSupplyIncreaseVestingObject, ); - const vestingStakedMapped = formatDelegatedTimelockedStake( + const supplyIncreaseVestingStakedMapped = formatDelegatedTimelockedStake( timelockedStakedObjects || [], ).filter(isSupplyIncreaseVestingObject); - const vestingSchedule = getVestingOverview( - [...vestingMapped, ...vestingStakedMapped], + const supplyIncreaseVestingSchedule = getVestingOverview( + [...supplyIncreaseVestingMapped, ...supplyIncreaseVestingStakedMapped], Number(currentEpochMs), ); const nextPayout = getLatestOrEarliestSupplyIncreaseVestingPayout( - [...vestingMapped, ...vestingStakedMapped], + [...supplyIncreaseVestingMapped, ...supplyIncreaseVestingStakedMapped], Number(currentEpochMs), false, ); const lastPayout = getLatestOrEarliestSupplyIncreaseVestingPayout( - [...vestingMapped, ...vestingStakedMapped], + [...supplyIncreaseVestingMapped, ...supplyIncreaseVestingStakedMapped], Number(currentEpochMs), true, ); - const vestingPortfolio = + const supplyIncreaseVestingPortfolio = lastPayout && buildSupplyIncreaseVestingSchedule(lastPayout, Number(currentEpochMs)); - const unlockedTimelockedObjects = vestingMapped?.filter((timelockedObject) => - isTimelockedUnlockable(timelockedObject, Number(currentEpochMs)), + const supplyIncreaseVestingUnlocked = supplyIncreaseVestingMapped?.filter( + (supplyIncreaseVestingObject) => + isTimelockedUnlockable(supplyIncreaseVestingObject, Number(currentEpochMs)), ); - const unlockedTimelockedObjectIds: string[] = - unlockedTimelockedObjects.map((timelocked) => timelocked.id.id) || []; - const { data: unlockAllTimelockedObjects } = useUnlockTimelockedObjectsTransaction( + const supplyIncreaseVestingUnlockedObjectIds: string[] = + supplyIncreaseVestingUnlocked.map((unlockedObject) => unlockedObject.id.id) || []; + const { data: unlockAllsupplyIncreaseVesting } = useUnlockTimelockedObjectsTransaction( address || '', - unlockedTimelockedObjectIds, + supplyIncreaseVestingUnlockedObjectIds, ); return { nextPayout, lastPayout, - vestingSchedule, - vestingPortfolio, - vestingMapped, - vestingStakedMapped, - unlockAllTimelockedObjects, + supplyIncreaseVestingSchedule, + supplyIncreaseVestingPortfolio, + supplyIncreaseVestingMapped, + supplyIncreaseVestingStakedMapped, + unlockAllsupplyIncreaseVesting, }; } From 4c9131bb0fc4883a6eaaa120bbcd2a77899035e3 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Thu, 12 Dec 2024 18:47:29 +0100 Subject: [PATCH 06/23] fix: format --- .../hooks/useGetSupplyIncreaseVestingObjects.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts index b89964c2382..2ee23008521 100644 --- a/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts +++ b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts @@ -45,7 +45,8 @@ export function useGetSupplyIncreaseVestingObjects(address: string): { const { data: timelockedObjects } = useGetAllOwnedObjects(address || '', { StructType: TIMELOCK_IOTA_TYPE, }); - const { data: timelockedStakedObjects, isPending: istimelockedStakedObjectsLoading } = useGetTimelockedStakedObjects(address || ''); + const { data: timelockedStakedObjects, isPending: istimelockedStakedObjectsLoading } = + useGetTimelockedStakedObjects(address || ''); const supplyIncreaseVestingMapped = mapTimelockObjects(timelockedObjects || []).filter( isSupplyIncreaseVestingObject, From 49f7d0d6da8cd5f4d604b198ce0519a3ca152818 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Thu, 12 Dec 2024 19:07:24 +0100 Subject: [PATCH 07/23] fix(dashboard): build --- .../components/SupplyIncreaseVestingOverview.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx index 7f3082a78b6..08c66d9b2f0 100644 --- a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -26,7 +26,7 @@ export function SupplyIncreaseVestingOverview() { const address = account?.address || ''; const iotaClient = useIotaClient(); const queryClient = useQueryClient(); - const { nextPayout, vestingSchedule, vestingMapped, vestingStakedMapped } = + const { nextPayout, supplyIncreaseVestingSchedule, supplyIncreaseVestingMapped, supplyIncreaseVestingStakedMapped } = useGetSupplyIncreaseVestingObjects(address); const { @@ -51,12 +51,12 @@ export function SupplyIncreaseVestingOverview() { ); const [formattedAvailableStaking, availableStakingSymbol] = useFormatCoin( - vestingSchedule.availableStaking, + supplyIncreaseVestingSchedule.availableStaking, IOTA_TYPE_ARG, ); const showSupplyIncreaseVestingOverview = - vestingMapped.length > 0 || vestingStakedMapped.length > 0; + supplyIncreaseVestingMapped.length > 0 || supplyIncreaseVestingStakedMapped.length > 0; function handleOnSuccess(digest: string): void { iotaClient @@ -142,7 +142,7 @@ export function SupplyIncreaseVestingOverview() { setView={setStakeDialogView} selectedValidator={selectedValidator} setSelectedValidator={setSelectedValidator} - maxStakableTimelockedAmount={BigInt(vestingSchedule.availableStaking)} + maxStakableTimelockedAmount={BigInt(supplyIncreaseVestingSchedule.availableStaking)} /> </div> ) : null; From e242925724c3fc21e99826a7d79c26065ed68ce9 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Thu, 12 Dec 2024 19:17:21 +0100 Subject: [PATCH 08/23] fix(dashboard): format --- .../components/SupplyIncreaseVestingOverview.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx index 08c66d9b2f0..ccd006e61e9 100644 --- a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -26,8 +26,12 @@ export function SupplyIncreaseVestingOverview() { const address = account?.address || ''; const iotaClient = useIotaClient(); const queryClient = useQueryClient(); - const { nextPayout, supplyIncreaseVestingSchedule, supplyIncreaseVestingMapped, supplyIncreaseVestingStakedMapped } = - useGetSupplyIncreaseVestingObjects(address); + const { + nextPayout, + supplyIncreaseVestingSchedule, + supplyIncreaseVestingMapped, + supplyIncreaseVestingStakedMapped, + } = useGetSupplyIncreaseVestingObjects(address); const { isDialogStakeOpen, From a30e75b4e024646eae79f8f42f623ab45a033016 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Fri, 13 Dec 2024 12:57:58 +0100 Subject: [PATCH 09/23] fix(dashboard): styles --- apps/wallet-dashboard/app/globals.css | 57 ++++++++++++++++++--------- 1 file changed, 38 insertions(+), 19 deletions(-) diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css index bf7ae60a0f2..ed203e3e448 100644 --- a/apps/wallet-dashboard/app/globals.css +++ b/apps/wallet-dashboard/app/globals.css @@ -17,6 +17,7 @@ body { } } + @layer components { .home-page-grid-container { @apply grid grid-cols-1 gap-lg; @@ -26,27 +27,42 @@ body { 'coins' 'activity'; - & > *:where([style*='grid-area: balance'], [style*='grid-area: staking']) { + & + > *:where( + [style*='grid-area: balance'], + [style*='grid-area: staking'], + [style*='grid-area: migration'] + ) { height: 200px; } } - .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { + .home-page-grid-container:has(.with-vesting) { + @apply grid grid-cols-1 gap-lg; grid-template-areas: 'balance' 'staking' - 'migration' + 'vesting' 'coins' 'activity'; + + & + > *:where( + [style*='grid-area: balance'], + [style*='grid-area: staking'], + [style*='grid-area: migration'] + ) { + height: 200px; + } } - .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { + .home-page-grid-container:has(.with-migration) { grid-template-areas: 'balance' 'staking' - 'vesting' + 'migration' 'coins' 'activity'; } - .home-page-grid-container:has(.with-vesting)::has(.with-migration) { + .home-page-grid-container:has(.with-migration), .home-page-grid-container:has(.with-vesting) { grid-template-areas: 'balance' 'staking' @@ -65,22 +81,23 @@ body { 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { + .home-page-grid-container:has(.with-vesting) { + @apply grid-cols-2; grid-template-areas: 'balance balance' - 'staking migration' + 'staking staking' + 'vesting vesting' 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { + .home-page-grid-container:has(.with-migration) { grid-template-areas: 'balance balance' - 'staking staking' - 'vesting vesting' + 'staking migration' 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-vesting)::has(.with-migration) { + .home-page-grid-container:has(.with-migration), .home-page-grid-container:has(.with-vesting) { grid-template-areas: 'balance balance' 'staking migration' @@ -97,18 +114,19 @@ body { 'balance staking staking' 'coins activity activity'; } - .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { + .home-page-grid-container:has(.with-vesting) { grid-template-areas: - 'balance staking migration' + 'balance staking staking' + 'coins vesting vesting' 'coins activity activity'; } - .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { + .home-page-grid-container:has(.with-migration) { + @apply grid-cols-3; grid-template-areas: - 'balance staking staking' - 'coins vesting vesting' + 'balance staking migration' 'coins activity activity'; } - .home-page-grid-container:has(.with-vesting)::has(.with-migration) { + .home-page-grid-container:has(.with-migration), .home-page-grid-container:has(.with-vesting) { grid-template-areas: 'balance staking migration' 'coins vesting vesting' @@ -116,6 +134,7 @@ body { } } + .grid-template-visual-assets { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } @@ -127,4 +146,4 @@ body { @apply text-opacity-80; } } -} +} \ No newline at end of file From 5c3b9b38f76196a3e7550cfe0bf4814045c7046b Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Fri, 13 Dec 2024 14:14:56 +0100 Subject: [PATCH 10/23] fix(dashboard): isTimelockedStakedObjectsLoading name and join 2 invalidateQueries in 1 --- apps/wallet-dashboard/app/(protected)/vesting/page.tsx | 4 ++-- .../components/SupplyIncreaseVestingOverview.tsx | 4 +--- .../hooks/useGetSupplyIncreaseVestingObjects.ts | 6 +++--- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx index a19d76e8f0f..5448e4c9e1b 100644 --- a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx +++ b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx @@ -83,7 +83,7 @@ function VestingDashboardPage(): JSX.Element { supplyIncreaseVestingSchedule, supplyIncreaseVestingMapped, supplyIncreaseVestingStakedMapped, - istimelockedStakedObjectsLoading, + isTimelockedStakedObjectsLoading, unlockAllsupplyIncreaseVesting, } = useGetSupplyIncreaseVestingObjects(address); @@ -213,7 +213,7 @@ function VestingDashboardPage(): JSX.Element { } }, [router, supplyIncreaseVestingEnabled]); - if (istimelockedStakedObjectsLoading) { + if (isTimelockedStakedObjectsLoading) { return ( <div className="flex w-full max-w-4xl items-start justify-center justify-self-center"> <LoadingIndicator /> diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx index ccd006e61e9..14be175ff4e 100644 --- a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -68,11 +68,9 @@ export function SupplyIncreaseVestingOverview() { digest, }) .then(() => { - queryClient.invalidateQueries({ - queryKey: ['get-timelocked-staked-objects', account?.address], - }); queryClient.invalidateQueries({ queryKey: [ + 'get-timelocked-staked-objects', 'get-all-owned-objects', account?.address, { diff --git a/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts index 2ee23008521..5ef9d31d238 100644 --- a/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts +++ b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts @@ -33,7 +33,7 @@ export function useGetSupplyIncreaseVestingObjects(address: string): { supplyIncreaseVestingPortfolio: SupplyIncreaseVestingPortfolio | undefined; supplyIncreaseVestingMapped: TimelockedObject[]; supplyIncreaseVestingStakedMapped: ExtendedDelegatedTimelockedStake[]; - istimelockedStakedObjectsLoading: boolean; + isTimelockedStakedObjectsLoading: boolean; unlockAllsupplyIncreaseVesting: | { transactionBlock: Transaction; @@ -45,7 +45,7 @@ export function useGetSupplyIncreaseVestingObjects(address: string): { const { data: timelockedObjects } = useGetAllOwnedObjects(address || '', { StructType: TIMELOCK_IOTA_TYPE, }); - const { data: timelockedStakedObjects, isPending: istimelockedStakedObjectsLoading } = + const { data: timelockedStakedObjects, isPending: isTimelockedStakedObjectsLoading } = useGetTimelockedStakedObjects(address || ''); const supplyIncreaseVestingMapped = mapTimelockObjects(timelockedObjects || []).filter( @@ -93,7 +93,7 @@ export function useGetSupplyIncreaseVestingObjects(address: string): { supplyIncreaseVestingPortfolio, supplyIncreaseVestingMapped, supplyIncreaseVestingStakedMapped, - istimelockedStakedObjectsLoading, + isTimelockedStakedObjectsLoading, unlockAllsupplyIncreaseVesting, }; } From d7d2f1cdf4b652090ed52b561a93cc84f86ef8c0 Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Mon, 16 Dec 2024 09:59:07 +0100 Subject: [PATCH 11/23] feat: polish homepage scroll --- .../app/(protected)/home/page.tsx | 4 +- apps/wallet-dashboard/app/globals.css | 1 + .../components/VirtualList.tsx | 11 +--- .../components/coins/MyCoins.tsx | 64 +++++++++---------- .../transactions/TransactionsOverview.tsx | 2 +- 5 files changed, 37 insertions(+), 45 deletions(-) diff --git a/apps/wallet-dashboard/app/(protected)/home/page.tsx b/apps/wallet-dashboard/app/(protected)/home/page.tsx index 774edce294c..3117d4cec82 100644 --- a/apps/wallet-dashboard/app/(protected)/home/page.tsx +++ b/apps/wallet-dashboard/app/(protected)/home/page.tsx @@ -25,7 +25,7 @@ function HomeDashboardPage(): JSX.Element { <main className="flex flex-1 flex-col items-center space-y-8 py-md"> {connectionStatus === 'connected' && account && ( <> - <div className="home-page-grid-container h-full w-full"> + <div className="home-page-grid-container w-full"> <div style={{ gridArea: 'balance' }} className="flex grow overflow-hidden"> <AccountBalance /> </div> @@ -33,7 +33,7 @@ function HomeDashboardPage(): JSX.Element { <StakingOverview /> </div> {stardustMigrationEnabled && <MigrationOverview />} - <div style={{ gridArea: 'coins' }}> + <div style={{ gridArea: 'coins' }} className="flex grow overflow-hidden"> <MyCoins /> </div> {supplyIncreaseVestingEnabled && <SupplyIncreaseVestingOverview />} diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css index ed203e3e448..b43bd9573e7 100644 --- a/apps/wallet-dashboard/app/globals.css +++ b/apps/wallet-dashboard/app/globals.css @@ -20,6 +20,7 @@ body { @layer components { .home-page-grid-container { + height: calc(100vh - 130px); @apply grid grid-cols-1 gap-lg; grid-template-areas: 'balance' diff --git a/apps/wallet-dashboard/components/VirtualList.tsx b/apps/wallet-dashboard/components/VirtualList.tsx index 49178382bfc..ba6202fcb45 100644 --- a/apps/wallet-dashboard/components/VirtualList.tsx +++ b/apps/wallet-dashboard/components/VirtualList.tsx @@ -51,17 +51,10 @@ function VirtualList<T>({ if (lastItem.index >= items.length - 1 && hasNextPage && !isFetchingNextPage) { fetchNextPage(); } - }, [ - hasNextPage, - fetchNextPage, - items.length, - isFetchingNextPage, - virtualizer, - virtualizer.getVirtualItems(), - ]); + }, [hasNextPage, fetchNextPage, items.length, isFetchingNextPage, virtualizer]); return ( - <div className="relative h-full w-full" ref={containerRef}> + <div className="relative h-fit w-full" ref={containerRef}> <div style={{ height: `${virtualizer.getTotalSize()}px`, diff --git a/apps/wallet-dashboard/components/coins/MyCoins.tsx b/apps/wallet-dashboard/components/coins/MyCoins.tsx index fc441d76148..944f9dcceee 100644 --- a/apps/wallet-dashboard/components/coins/MyCoins.tsx +++ b/apps/wallet-dashboard/components/coins/MyCoins.tsx @@ -71,9 +71,9 @@ function MyCoins(): React.JSX.Element { return ( <Panel> - <div className="flex w-full flex-col"> + <div className="flex h-full w-full flex-col"> <Title title="My Coins" /> - <div className="px-sm pb-md pt-sm"> + <div className="px-sm pt-sm"> <div className="inline-flex"> <SegmentedButton type={SegmentedButtonType.Filled}> {TOKEN_CATEGORIES.map(({ label, value }) => { @@ -96,37 +96,35 @@ function MyCoins(): React.JSX.Element { })} </SegmentedButton> </div> - <div className="pb-md pt-sm"> - {[TokenCategory.All, TokenCategory.Recognized].includes( - selectedTokenCategory, - ) && - recognized?.map((coin, index) => { - return ( - <CoinItem - key={index} - coinType={coin.coinType} - balance={BigInt(coin.totalBalance)} - onClick={() => openSendTokenDialog(coin)} - icon={ - <RecognizedBadge className="h-4 w-4 text-primary-40" /> - } - /> - ); - })} - {[TokenCategory.All, TokenCategory.Unrecognized].includes( - selectedTokenCategory, - ) && - unrecognized?.map((coin, index) => { - return ( - <CoinItem - key={index} - coinType={coin.coinType} - balance={BigInt(coin.totalBalance)} - onClick={() => openSendTokenDialog(coin)} - /> - ); - })} - </div> + </div> + <div className="h-full overflow-y-auto px-sm pb-md pt-sm"> + {[TokenCategory.All, TokenCategory.Recognized].includes( + selectedTokenCategory, + ) && + recognized?.map((coin, index) => { + return ( + <CoinItem + key={index} + coinType={coin.coinType} + balance={BigInt(coin.totalBalance)} + onClick={() => openSendTokenDialog(coin)} + icon={<RecognizedBadge className="h-4 w-4 text-primary-40" />} + /> + ); + })} + {[TokenCategory.All, TokenCategory.Unrecognized].includes( + selectedTokenCategory, + ) && + unrecognized?.map((coin, index) => { + return ( + <CoinItem + key={index} + coinType={coin.coinType} + balance={BigInt(coin.totalBalance)} + onClick={() => openSendTokenDialog(coin)} + /> + ); + })} </div> </div> {selectedCoin && activeAccountAddress && ( diff --git a/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx b/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx index a590e3abcdb..fcaf74eddaa 100644 --- a/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx +++ b/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx @@ -9,7 +9,7 @@ function TransactionsOverview() { return ( <Panel> <Title title="Activity" /> - <div className="px-sm pb-md pt-sm"> + <div className="h-full overflow-y-auto px-sm pb-md pt-sm"> <TransactionsList /> </div> </Panel> From bfd9bf8daa400692da12957fd8e1a70d55c7d265 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Mon, 16 Dec 2024 10:59:18 +0100 Subject: [PATCH 12/23] fix(dashboard): format --- apps/wallet-dashboard/app/globals.css | 17 +++++++++-------- .../SupplyIncreaseVestingOverview.tsx | 2 +- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css index ed203e3e448..2d87e758bc0 100644 --- a/apps/wallet-dashboard/app/globals.css +++ b/apps/wallet-dashboard/app/globals.css @@ -17,7 +17,6 @@ body { } } - @layer components { .home-page-grid-container { @apply grid grid-cols-1 gap-lg; @@ -62,7 +61,8 @@ body { 'coins' 'activity'; } - .home-page-grid-container:has(.with-migration), .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-migration), + .home-page-grid-container:has(.with-vesting) { grid-template-areas: 'balance' 'staking' @@ -81,7 +81,7 @@ body { 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-vesting) { @apply grid-cols-2; grid-template-areas: 'balance balance' @@ -97,7 +97,8 @@ body { 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-migration), .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-migration), + .home-page-grid-container:has(.with-vesting) { grid-template-areas: 'balance balance' 'staking migration' @@ -114,7 +115,7 @@ body { 'balance staking staking' 'coins activity activity'; } - .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-vesting) { grid-template-areas: 'balance staking staking' 'coins vesting vesting' @@ -126,7 +127,8 @@ body { 'balance staking migration' 'coins activity activity'; } - .home-page-grid-container:has(.with-migration), .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-migration), + .home-page-grid-container:has(.with-vesting) { grid-template-areas: 'balance staking migration' 'coins vesting vesting' @@ -134,7 +136,6 @@ body { } } - .grid-template-visual-assets { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } @@ -146,4 +147,4 @@ body { @apply text-opacity-80; } } -} \ No newline at end of file +} diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx index 14be175ff4e..0d5c81da0a2 100644 --- a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -70,7 +70,7 @@ export function SupplyIncreaseVestingOverview() { .then(() => { queryClient.invalidateQueries({ queryKey: [ - 'get-timelocked-staked-objects', + 'get-timelocked-staked-objects', 'get-all-owned-objects', account?.address, { From 59efdc718b9892c161bce70cc561007fe746542a Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Mon, 16 Dec 2024 15:19:16 +0100 Subject: [PATCH 13/23] feat: update styles and add missing dependency --- apps/wallet-dashboard/app/(protected)/home/page.tsx | 2 +- apps/wallet-dashboard/app/globals.css | 2 +- apps/wallet-dashboard/components/VirtualList.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/wallet-dashboard/app/(protected)/home/page.tsx b/apps/wallet-dashboard/app/(protected)/home/page.tsx index 3117d4cec82..d435d44f630 100644 --- a/apps/wallet-dashboard/app/(protected)/home/page.tsx +++ b/apps/wallet-dashboard/app/(protected)/home/page.tsx @@ -25,7 +25,7 @@ function HomeDashboardPage(): JSX.Element { <main className="flex flex-1 flex-col items-center space-y-8 py-md"> {connectionStatus === 'connected' && account && ( <> - <div className="home-page-grid-container w-full"> + <div className="home-page-grid-container w-full content-start"> <div style={{ gridArea: 'balance' }} className="flex grow overflow-hidden"> <AccountBalance /> </div> diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css index 5191fe60d91..e1eaae75756 100644 --- a/apps/wallet-dashboard/app/globals.css +++ b/apps/wallet-dashboard/app/globals.css @@ -19,7 +19,6 @@ body { @layer components { .home-page-grid-container { - height: calc(100vh - 130px); @apply grid grid-cols-1 gap-lg; grid-template-areas: 'balance' @@ -111,6 +110,7 @@ body { @screen md { .home-page-grid-container { + height: calc(100vh - 140px); @apply grid-cols-3; grid-template-areas: 'balance staking staking' diff --git a/apps/wallet-dashboard/components/VirtualList.tsx b/apps/wallet-dashboard/components/VirtualList.tsx index ba6202fcb45..666251812d2 100644 --- a/apps/wallet-dashboard/components/VirtualList.tsx +++ b/apps/wallet-dashboard/components/VirtualList.tsx @@ -51,7 +51,7 @@ function VirtualList<T>({ if (lastItem.index >= items.length - 1 && hasNextPage && !isFetchingNextPage) { fetchNextPage(); } - }, [hasNextPage, fetchNextPage, items.length, isFetchingNextPage, virtualizer]); + }, [hasNextPage, fetchNextPage, items.length, isFetchingNextPage, virtualizer, virtualItems]); return ( <div className="relative h-fit w-full" ref={containerRef}> From d47722465af10cb3fe590e72ea50d3764533d944 Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Tue, 17 Dec 2024 10:59:00 +0100 Subject: [PATCH 14/23] feat: add min height --- apps/wallet-dashboard/app/globals.css | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css index e1eaae75756..499b6b00c4b 100644 --- a/apps/wallet-dashboard/app/globals.css +++ b/apps/wallet-dashboard/app/globals.css @@ -110,6 +110,7 @@ body { @screen md { .home-page-grid-container { + min-height: 700px; height: calc(100vh - 140px); @apply grid-cols-3; grid-template-areas: From 9bc8af904547adac134f087909b47d47569bfb7e Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Tue, 17 Dec 2024 11:23:27 +0100 Subject: [PATCH 15/23] feat. add padding --- apps/wallet-dashboard/components/coins/MyCoins.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/wallet-dashboard/components/coins/MyCoins.tsx b/apps/wallet-dashboard/components/coins/MyCoins.tsx index 944f9dcceee..411d7cdc702 100644 --- a/apps/wallet-dashboard/components/coins/MyCoins.tsx +++ b/apps/wallet-dashboard/components/coins/MyCoins.tsx @@ -73,7 +73,7 @@ function MyCoins(): React.JSX.Element { <Panel> <div className="flex h-full w-full flex-col"> <Title title="My Coins" /> - <div className="px-sm pt-sm"> + <div className="px-sm py-sm"> <div className="inline-flex"> <SegmentedButton type={SegmentedButtonType.Filled}> {TOKEN_CATEGORIES.map(({ label, value }) => { From 7abc2375cd4bfeb9aaf90562ed0b100a513d20c4 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Tue, 17 Dec 2024 11:56:57 +0100 Subject: [PATCH 16/23] fix(dasboard): undo the split of the query invalidation --- .../components/SupplyIncreaseVestingOverview.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx index 0d5c81da0a2..ccd006e61e9 100644 --- a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -68,9 +68,11 @@ export function SupplyIncreaseVestingOverview() { digest, }) .then(() => { + queryClient.invalidateQueries({ + queryKey: ['get-timelocked-staked-objects', account?.address], + }); queryClient.invalidateQueries({ queryKey: [ - 'get-timelocked-staked-objects', 'get-all-owned-objects', account?.address, { From dd7569b18b44a43d49a7fb9617354101e81c99cb Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Tue, 17 Dec 2024 14:06:50 +0100 Subject: [PATCH 17/23] fix(dashboard): rename unlockAllsupplyIncreaseVesting and disable new stake button --- apps/wallet-dashboard/app/(protected)/vesting/page.tsx | 6 +++--- .../components/SupplyIncreaseVestingOverview.tsx | 1 + .../hooks/useGetSupplyIncreaseVestingObjects.ts | 6 +++--- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx index 5448e4c9e1b..5c33de4582a 100644 --- a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx +++ b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx @@ -84,7 +84,7 @@ function VestingDashboardPage(): JSX.Element { supplyIncreaseVestingMapped, supplyIncreaseVestingStakedMapped, isTimelockedStakedObjectsLoading, - unlockAllsupplyIncreaseVesting, + unlockAllSupplyIncreaseVesting, } = useGetSupplyIncreaseVestingObjects(address); const timelockedStakedObjectsGrouped: TimelockedStakedObjectsGrouped[] = @@ -163,13 +163,13 @@ function VestingDashboardPage(): JSX.Element { } const handleCollect = () => { - if (!unlockAllsupplyIncreaseVesting?.transactionBlock) { + if (!unlockAllSupplyIncreaseVesting?.transactionBlock) { addNotification('Failed to create a Transaction', NotificationType.Error); return; } signAndExecuteTransaction( { - transaction: unlockAllsupplyIncreaseVesting.transactionBlock, + transaction: unlockAllSupplyIncreaseVesting.transactionBlock, }, { onSuccess: (tx) => { diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx index ccd006e61e9..9b827e92501 100644 --- a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -131,6 +131,7 @@ export function SupplyIncreaseVestingOverview() { buttonType={ButtonType.Primary} title={'Stake'} onClick={() => handleNewStake()} + buttonDisabled={!supplyIncreaseVestingSchedule.availableStaking} /> </Card> </div> diff --git a/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts index 5ef9d31d238..dbcc7d69933 100644 --- a/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts +++ b/apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts @@ -34,7 +34,7 @@ export function useGetSupplyIncreaseVestingObjects(address: string): { supplyIncreaseVestingMapped: TimelockedObject[]; supplyIncreaseVestingStakedMapped: ExtendedDelegatedTimelockedStake[]; isTimelockedStakedObjectsLoading: boolean; - unlockAllsupplyIncreaseVesting: + unlockAllSupplyIncreaseVesting: | { transactionBlock: Transaction; } @@ -81,7 +81,7 @@ export function useGetSupplyIncreaseVestingObjects(address: string): { ); const supplyIncreaseVestingUnlockedObjectIds: string[] = supplyIncreaseVestingUnlocked.map((unlockedObject) => unlockedObject.id.id) || []; - const { data: unlockAllsupplyIncreaseVesting } = useUnlockTimelockedObjectsTransaction( + const { data: unlockAllSupplyIncreaseVesting } = useUnlockTimelockedObjectsTransaction( address || '', supplyIncreaseVestingUnlockedObjectIds, ); @@ -94,6 +94,6 @@ export function useGetSupplyIncreaseVestingObjects(address: string): { supplyIncreaseVestingMapped, supplyIncreaseVestingStakedMapped, isTimelockedStakedObjectsLoading, - unlockAllsupplyIncreaseVesting, + unlockAllSupplyIncreaseVesting, }; } From 6ada5aaf6fa781a41a72f2bc428e5b607a05c8b1 Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Tue, 17 Dec 2024 15:43:29 +0100 Subject: [PATCH 18/23] fix grid --- apps/wallet-dashboard/app/globals.css | 35 +++++++++------------------ 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css index 499b6b00c4b..69ca23f41f2 100644 --- a/apps/wallet-dashboard/app/globals.css +++ b/apps/wallet-dashboard/app/globals.css @@ -35,25 +35,15 @@ body { height: 200px; } } - .home-page-grid-container:has(.with-vesting) { - @apply grid grid-cols-1 gap-lg; + .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { grid-template-areas: 'balance' 'staking' 'vesting' 'coins' 'activity'; - - & - > *:where( - [style*='grid-area: balance'], - [style*='grid-area: staking'], - [style*='grid-area: migration'] - ) { - height: 200px; - } } - .home-page-grid-container:has(.with-migration) { + .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { grid-template-areas: 'balance' 'staking' @@ -61,8 +51,7 @@ body { 'coins' 'activity'; } - .home-page-grid-container:has(.with-migration), - .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-migration):has(.with-vesting) { grid-template-areas: 'balance' 'staking' @@ -81,8 +70,7 @@ body { 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-vesting) { - @apply grid-cols-2; + .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { grid-template-areas: 'balance balance' 'staking staking' @@ -90,15 +78,14 @@ body { 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-migration) { + .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { grid-template-areas: 'balance balance' 'staking migration' 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-migration), - .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-migration):has(.with-vesting) { grid-template-areas: 'balance balance' 'staking migration' @@ -117,20 +104,20 @@ body { 'balance staking staking' 'coins activity activity'; } - .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { grid-template-areas: 'balance staking staking' 'coins vesting vesting' 'coins activity activity'; } - .home-page-grid-container:has(.with-migration) { - @apply grid-cols-3; + + .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { grid-template-areas: 'balance staking migration' 'coins activity activity'; } - .home-page-grid-container:has(.with-migration), - .home-page-grid-container:has(.with-vesting) { + + .home-page-grid-container:has(.with-migration):has(.with-vesting) { grid-template-areas: 'balance staking migration' 'coins vesting vesting' From 20245758934f0981d8440f54c74f35dd89d5adb4 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Tue, 17 Dec 2024 16:44:31 +0100 Subject: [PATCH 19/23] feat(dashboard): add object for the options in useCountdownByTimestamp --- .../core/src/hooks/useCountdownByTimestamp.ts | 29 +++++++++++-------- .../SupplyIncreaseVestingOverview.tsx | 4 +-- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/apps/core/src/hooks/useCountdownByTimestamp.ts b/apps/core/src/hooks/useCountdownByTimestamp.ts index ca28efb3c77..edaf100481c 100644 --- a/apps/core/src/hooks/useCountdownByTimestamp.ts +++ b/apps/core/src/hooks/useCountdownByTimestamp.ts @@ -9,12 +9,16 @@ import { MILLISECONDS_PER_SECOND, } from '../constants'; +interface timeOptions { + showSeconds?: boolean; + showMinutes?: boolean; + showHours?: boolean; + showDays?: boolean; +} + export function useCountdownByTimestamp( initialTimestamp: number | null, - showSeconds = true, - showMinutes = true, - showHours = true, - showDays = true, + options?: timeOptions ): string { const [timeRemainingMs, setTimeRemainingMs] = useState<number>(0); @@ -30,21 +34,22 @@ export function useCountdownByTimestamp( }, [initialTimestamp]); const formattedCountdown = formatCountdown( timeRemainingMs, - showSeconds, - showMinutes, - showHours, - showDays, + options ); return formattedCountdown; } function formatCountdown( totalMilliseconds: number, - showSeconds: boolean, - showMinutes: boolean, - showHours: boolean, - showDays: boolean, + options: timeOptions = {} ) { + const { + showSeconds = true, + showMinutes = true, + showHours = true, + showDays = true, + } = options; + const days = Math.floor(totalMilliseconds / MILLISECONDS_PER_DAY); const hours = Math.floor((totalMilliseconds % MILLISECONDS_PER_DAY) / MILLISECONDS_PER_HOUR); const minutes = Math.floor( diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx index 9b827e92501..059f26cee8e 100644 --- a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -46,8 +46,7 @@ export function SupplyIncreaseVestingOverview() { const formattedLastPayoutExpirationTime = useCountdownByTimestamp( Number(nextPayout?.expirationTimestampMs), - false, - false, + { showSeconds: false, showMinutes: false } ); const [formattedNextPayout, nextPayoutSymbol, nextPayoutResult] = useFormatCoin( nextPayout?.amount, @@ -141,7 +140,6 @@ export function SupplyIncreaseVestingOverview() { isTimelockedStaking={true} stakedDetails={selectedStake} onSuccess={handleOnSuccess} - isOpen={isDialogStakeOpen} handleClose={handleCloseStakeDialog} view={stakeDialogView} setView={setStakeDialogView} From 4b268f879ea774c236c2bc95a4d3eb76117b4f81 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Tue, 17 Dec 2024 16:45:44 +0100 Subject: [PATCH 20/23] fix: linter --- .../components/SupplyIncreaseVestingOverview.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx index 059f26cee8e..7608bda1a3a 100644 --- a/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx +++ b/apps/wallet-dashboard/components/SupplyIncreaseVestingOverview.tsx @@ -34,7 +34,6 @@ export function SupplyIncreaseVestingOverview() { } = useGetSupplyIncreaseVestingObjects(address); const { - isDialogStakeOpen, stakeDialogView, setStakeDialogView, selectedStake, @@ -46,7 +45,7 @@ export function SupplyIncreaseVestingOverview() { const formattedLastPayoutExpirationTime = useCountdownByTimestamp( Number(nextPayout?.expirationTimestampMs), - { showSeconds: false, showMinutes: false } + { showSeconds: false, showMinutes: false }, ); const [formattedNextPayout, nextPayoutSymbol, nextPayoutResult] = useFormatCoin( nextPayout?.amount, From 184923e0055e7179b7101025b107fa6d11ee853b Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Tue, 17 Dec 2024 17:15:57 +0100 Subject: [PATCH 21/23] fix: linter --- .../core/src/hooks/useCountdownByTimestamp.ts | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/apps/core/src/hooks/useCountdownByTimestamp.ts b/apps/core/src/hooks/useCountdownByTimestamp.ts index edaf100481c..f1925fe4225 100644 --- a/apps/core/src/hooks/useCountdownByTimestamp.ts +++ b/apps/core/src/hooks/useCountdownByTimestamp.ts @@ -18,7 +18,7 @@ interface timeOptions { export function useCountdownByTimestamp( initialTimestamp: number | null, - options?: timeOptions + options?: timeOptions, ): string { const [timeRemainingMs, setTimeRemainingMs] = useState<number>(0); @@ -32,23 +32,12 @@ export function useCountdownByTimestamp( return () => clearInterval(interval); }, [initialTimestamp]); - const formattedCountdown = formatCountdown( - timeRemainingMs, - options - ); + const formattedCountdown = formatCountdown(timeRemainingMs, options); return formattedCountdown; } -function formatCountdown( - totalMilliseconds: number, - options: timeOptions = {} -) { - const { - showSeconds = true, - showMinutes = true, - showHours = true, - showDays = true, - } = options; +function formatCountdown(totalMilliseconds: number, options: timeOptions = {}) { + const { showSeconds = true, showMinutes = true, showHours = true, showDays = true } = options; const days = Math.floor(totalMilliseconds / MILLISECONDS_PER_DAY); const hours = Math.floor((totalMilliseconds % MILLISECONDS_PER_DAY) / MILLISECONDS_PER_HOUR); From 71ca4efc36eb7eafe80e6e0fe48a0c3d11f10ff0 Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Wed, 18 Dec 2024 09:22:46 +0100 Subject: [PATCH 22/23] fix(core): improve naming --- apps/core/src/hooks/useCountdownByTimestamp.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/core/src/hooks/useCountdownByTimestamp.ts b/apps/core/src/hooks/useCountdownByTimestamp.ts index f1925fe4225..c6f2ba0d117 100644 --- a/apps/core/src/hooks/useCountdownByTimestamp.ts +++ b/apps/core/src/hooks/useCountdownByTimestamp.ts @@ -9,7 +9,7 @@ import { MILLISECONDS_PER_SECOND, } from '../constants'; -interface timeOptions { +interface FormatCountdownOptions { showSeconds?: boolean; showMinutes?: boolean; showHours?: boolean; @@ -18,7 +18,7 @@ interface timeOptions { export function useCountdownByTimestamp( initialTimestamp: number | null, - options?: timeOptions, + options?: FormatCountdownOptions, ): string { const [timeRemainingMs, setTimeRemainingMs] = useState<number>(0); @@ -36,8 +36,7 @@ export function useCountdownByTimestamp( return formattedCountdown; } -function formatCountdown(totalMilliseconds: number, options: timeOptions = {}) { - const { showSeconds = true, showMinutes = true, showHours = true, showDays = true } = options; +function formatCountdown(totalMilliseconds: number, { showSeconds = true, showMinutes = true, showHours = true, showDays = true }: FormatCountdownOptions = {}) { const days = Math.floor(totalMilliseconds / MILLISECONDS_PER_DAY); const hours = Math.floor((totalMilliseconds % MILLISECONDS_PER_DAY) / MILLISECONDS_PER_HOUR); From 20a1cc4f2781d9937531631b518569db8303c0cf Mon Sep 17 00:00:00 2001 From: cpl121 <cpeon@boxfish.studio> Date: Wed, 18 Dec 2024 09:23:05 +0100 Subject: [PATCH 23/23] fix(core): linter --- apps/core/src/hooks/useCountdownByTimestamp.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/apps/core/src/hooks/useCountdownByTimestamp.ts b/apps/core/src/hooks/useCountdownByTimestamp.ts index c6f2ba0d117..18a5a598292 100644 --- a/apps/core/src/hooks/useCountdownByTimestamp.ts +++ b/apps/core/src/hooks/useCountdownByTimestamp.ts @@ -36,8 +36,15 @@ export function useCountdownByTimestamp( return formattedCountdown; } -function formatCountdown(totalMilliseconds: number, { showSeconds = true, showMinutes = true, showHours = true, showDays = true }: FormatCountdownOptions = {}) { - +function formatCountdown( + totalMilliseconds: number, + { + showSeconds = true, + showMinutes = true, + showHours = true, + showDays = true, + }: FormatCountdownOptions = {}, +) { const days = Math.floor(totalMilliseconds / MILLISECONDS_PER_DAY); const hours = Math.floor((totalMilliseconds % MILLISECONDS_PER_DAY) / MILLISECONDS_PER_HOUR); const minutes = Math.floor(