feat(dashboard): style vesting overview (#4278)

* feat: add new icon * feat: update carAction component * feat: update feature flags * feat: update icon * polish * minor fix * feat: countdown * feat: improve import and naming * feat: add hook * feat: polishes * fix imports * minor fixes * fix build * fix build * feat: rename function, variables and fix improts * feat: rename countdown and fix it * feat: remove undefined from button type * fix lint * feat: remove debris * fix build * feat: improve naming * fix useffect and filter payouts --------- Co-authored-by: Marc Espin <[email protected]>
iotaledger · Dec 4, 2024 · 97c8af0 · 97c8af0
1 parent cedefa7
commit 97c8af0
Show file tree

Hide file tree

Showing 24 changed files with 375 additions and 127 deletions.
diff --git a/apps/apps-backend/src/features/features.controller.ts b/apps/apps-backend/src/features/features.controller.ts
@@ -68,7 +68,7 @@ export class FeaturesController {
                     defaultValue: false,
                 },
                 [Feature.SupplyIncreaseVesting]: {
-                    defaultValue: false,
+                    defaultValue: true,
                 },
             },
             dateUpdated: new Date().toISOString(),
@@ -133,6 +133,12 @@ export class FeaturesController {
                 [Feature.AccountFinder]: {
                     defaultValue: false,
                 },
+                [Feature.StardustMigration]: {
+                    defaultValue: false,
+                },
+                [Feature.SupplyIncreaseVesting]: {
+                    defaultValue: false,
+                },
             },
             dateUpdated: new Date().toISOString(),
         };

diff --git a/apps/core/src/constants/index.ts b/apps/core/src/constants/index.ts
@@ -8,3 +8,4 @@ export * from './timelock.constants';
 export * from './migration.constants';
 export * from './features.enum';
 export * from './gas.constants';
+export * from './time.constants';
diff --git a/...dashboard/lib/constants/time.constants.ts → apps/core/src/constants/time.constants.ts b/...dashboard/lib/constants/time.constants.ts → apps/core/src/constants/time.constants.ts
diff --git a/apps/core/src/hooks/index.ts b/apps/core/src/hooks/index.ts
@@ -43,5 +43,6 @@ export * from './useTransactionData';
 export * from './useGetStakingValidatorDetails';
 export * from './useCursorPagination';
 export * from './useTheme';
+export * from './useCountdownByTimestamp';
 
 export * from './stake';
diff --git a/apps/core/src/hooks/useCountdownByTimestamp.ts b/apps/core/src/hooks/useCountdownByTimestamp.ts
@@ -0,0 +1,46 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState, useEffect } from 'react';
+import {
+    MILLISECONDS_PER_DAY,
+    MILLISECONDS_PER_HOUR,
+    MILLISECONDS_PER_MINUTE,
+    MILLISECONDS_PER_SECOND,
+} from '../constants';
+
+export function useCountdownByTimestamp(initialTimestamp: number | null): string {
+    const [timeRemainingMs, setTimeRemainingMs] = useState<number>(0);
+
+    useEffect(() => {
+        if (timeRemainingMs <= 0 && initialTimestamp) {
+            setTimeRemainingMs(initialTimestamp - Date.now());
+        }
+        const interval = setInterval(() => {
+            setTimeRemainingMs((prev) => prev - MILLISECONDS_PER_SECOND);
+        }, MILLISECONDS_PER_SECOND);
+
+        return () => clearInterval(interval);
+    }, [initialTimestamp]);
+    const formattedCountdown = formatCountdown(timeRemainingMs);
+    return formattedCountdown;
+}
+
+function formatCountdown(totalMilliseconds: number) {
+    const days = Math.floor(totalMilliseconds / MILLISECONDS_PER_DAY);
+    const hours = Math.floor((totalMilliseconds % MILLISECONDS_PER_DAY) / MILLISECONDS_PER_HOUR);
+    const minutes = Math.floor(
+        (totalMilliseconds % MILLISECONDS_PER_HOUR) / MILLISECONDS_PER_MINUTE,
+    );
+    const seconds = Math.floor(
+        (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`);
+
+    return timeUnits.join(' ');
+}
diff --git a/apps/ui-icons/src/StarHex.tsx b/apps/ui-icons/src/StarHex.tsx
@@ -0,0 +1,26 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { SVGProps } from 'react';
+export default function SvgStarHex(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+            fill="none"
+            {...props}
+        >
+            <path
+                d="M12.1819 6.39866C12.1108 6.24274 11.8892 6.24274 11.8181 6.39866L10.3647 9.58199C10.3356 9.64577 10.2752 9.68964 10.2055 9.69763L6.72887 10.0962C6.55859 10.1157 6.49014 10.3264 6.61643 10.4422L9.19484 12.8082C9.24649 12.8556 9.26956 12.9266 9.25563 12.9953L8.56033 16.4249C8.52627 16.5929 8.70547 16.7231 8.8547 16.6388L11.9016 14.9177C11.9627 14.8832 12.0373 14.8832 12.0984 14.9177L15.1453 16.6388C15.2945 16.7231 15.4737 16.5929 15.4397 16.4249L14.7444 12.9953C14.7304 12.9266 14.7535 12.8556 14.8052 12.8082L17.3836 10.4422C17.5099 10.3264 17.4414 10.1157 17.2711 10.0962L13.7945 9.69763C13.7248 9.68964 13.6644 9.64577 13.6353 9.58199L12.1819 6.39866Z"
+                fill="currentColor"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M13.4569 1.66561C12.5509 1.16224 11.4491 1.16224 10.5431 1.66561L3.54307 5.5545C2.59068 6.08361 2 7.08747 2 8.17697V15.8234C2 16.9129 2.59068 17.9167 3.54307 18.4458L10.5431 22.3347C11.4491 22.8381 12.5509 22.8381 13.4569 22.3347L20.4569 18.4458C21.4093 17.9167 22 16.9129 22 15.8234V8.17697C22 7.08747 21.4093 6.08361 20.4569 5.5545L13.4569 1.66561ZM11.5144 3.41393C11.8164 3.24614 12.1836 3.24614 12.4856 3.41393L19.4856 7.30282C19.8031 7.47919 20 7.81381 20 8.17697V15.8234C20 16.1865 19.8031 16.5211 19.4856 16.6975L12.4856 20.5864C12.1836 20.7542 11.8164 20.7542 11.5144 20.5864L4.51436 16.6975C4.19689 16.5211 4 16.1865 4 15.8234V8.17697C4 7.81381 4.19689 7.47919 4.51436 7.30282L11.5144 3.41393Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
diff --git a/apps/ui-icons/src/index.ts b/apps/ui-icons/src/index.ts
@@ -75,6 +75,7 @@ export { default as SortByDefault } from './SortByDefault';
 export { default as SortByDown } from './SortByDown';
 export { default as SortByUp } from './SortByUp';
 export { default as Stake } from './Stake';
+export { default as StarHex } from './StarHex';
 export { default as SwapAccount } from './SwapAccount';
 export { default as ThumbUp } from './ThumbUp';
 export { default as Tokens } from './Tokens';

diff --git a/apps/ui-icons/svgs/star_hex.svg b/apps/ui-icons/svgs/star_hex.svg
diff --git a/apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx b/apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ArrowRight } from '@iota/ui-icons';
-import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
 import { CardActionType } from './card.enums';
+import { Button, ButtonSize, ButtonType } from '../../atoms/button';
 
 export type CardActionProps = {
     title?: string;
@@ -12,6 +12,8 @@ export type CardActionProps = {
     onClick?: () => void;
     icon?: React.ReactNode;
     iconAfterText?: boolean;
+    buttonType?: ButtonType;
+    buttonDisabled?: boolean;
 };
 
 export function CardAction({
@@ -21,6 +23,8 @@ export function CardAction({
     title,
     icon,
     iconAfterText,
+    buttonType,
+    buttonDisabled,
 }: CardActionProps) {
     function handleActionClick(event: React.MouseEvent) {
         event?.stopPropagation();
@@ -58,12 +62,13 @@ export function CardAction({
         return (
             <div className="shrink-0">
                 <Button
-                    type={ButtonType.Outlined}
+                    type={buttonType || ButtonType.Outlined}
                     size={ButtonSize.Small}
                     text={title}
                     onClick={handleActionClick}
                     icon={icon}
                     iconAfterText={iconAfterText}
+                    disabled={buttonDisabled}
                 />
             </div>
         );

diff --git a/apps/wallet-dashboard/app/(protected)/staking/page.tsx b/apps/wallet-dashboard/app/(protected)/staking/page.tsx
@@ -3,9 +3,7 @@
 
 'use client';
 
-import { AmountBox, Box, StakeCard, StakeDialog, Button } from '@/components';
-import { useStakeDialog } from '@/components/Dialogs/Staking/hooks/useStakeDialog';
-
+import { AmountBox, Box, StakeCard, StakeDialog, Button, useStakeDialog } from '@/components';
 import {
     ExtendedDelegatedStake,
     formatDelegatedStake,