Merge branch 'develop' into tooling-dashboard/fix-stardust-tiem-grouping

.changeset/nice-crabs-wink.md

@@ -0,0 +1,5 @@
+---
+'@iota/create-dapp': minor
+---
+
+Update some outdated eslint dependencies of the `@iota/create-dapp` templates, to their eslint v9-compatible versions

apps/core/src/components/stake/StakedCard.tsx

@@ -37,7 +37,7 @@ export function StakedCard({
 
     // For inactive validator, show principal + rewards
     const [principalStaked, symbol] = useFormatCoin(
-        inactiveValidator ? principal + rewards : principal,
+        inactiveValidator ? BigInt(principal) + rewards : principal,
         IOTA_TYPE_ARG,
     );
 

apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx

@@ -27,21 +27,21 @@ export function UnstakeTransactionInfo({
     renderExplorerLink,
 }: UnstakeTransactionInfoProps) {
     const json = event.parsedJson as {
-        principal_amount?: number;
-        reward_amount?: number;
+        principal_amount?: string;
+        reward_amount?: string;
         validator_address?: string;
     };
-    const principalAmount = json?.principal_amount || 0;
-    const rewardAmount = json?.reward_amount || 0;
+    const principalAmount = json?.principal_amount || '0';
+    const rewardAmount = json?.reward_amount || '0';
     const validatorAddress = json?.validator_address;
-    const totalAmount = Number(principalAmount) + Number(rewardAmount);
+    const totalAmount = BigInt(principalAmount) + BigInt(rewardAmount);
     const [formatPrinciple, symbol] = useFormatCoin(principalAmount, IOTA_TYPE_ARG);
     const [formatRewards] = useFormatCoin(rewardAmount || 0, IOTA_TYPE_ARG);
 
     return (
         <div className="flex flex-col gap-y-md">
             {validatorAddress && <ValidatorLogo address={validatorAddress} isSelected />}
-            {totalAmount && (
+            {totalAmount !== 0n && (
                 <TransactionAmount amount={totalAmount} coinType={IOTA_TYPE_ARG} subtitle="Total" />
             )}
             <Panel hasBorder>

apps/core/src/hooks/useCountdownByTimestamp.ts

@@ -9,7 +9,17 @@ import {
     MILLISECONDS_PER_SECOND,
 } from '../constants';
 
-export function useCountdownByTimestamp(initialTimestamp: number | null): string {
+interface FormatCountdownOptions {
+    showSeconds?: boolean;
+    showMinutes?: boolean;
+    showHours?: boolean;
+    showDays?: boolean;
+}
+
+export function useCountdownByTimestamp(
+    initialTimestamp: number | null,
+    options?: FormatCountdownOptions,
+): string {
     const [timeRemainingMs, setTimeRemainingMs] = useState<number>(0);
 
     useEffect(() => {
@@ -22,11 +32,19 @@ export function useCountdownByTimestamp(initialTimestamp: number | null): string
 
         return () => clearInterval(interval);
     }, [initialTimestamp]);
-    const formattedCountdown = formatCountdown(timeRemainingMs);
+    const formattedCountdown = formatCountdown(timeRemainingMs, options);
     return formattedCountdown;
 }
 
-function formatCountdown(totalMilliseconds: number) {
+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(
@@ -36,11 +54,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 (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`);
 
     return timeUnits.join(' ');
 }

apps/core/src/utils/getStakeIotaByIotaId.ts

@@ -10,7 +10,7 @@ export function getStakeIotaByIotaId(allDelegation: DelegatedStake[], stakeIotaI
         allDelegation.reduce((acc, curr) => {
             const total = BigInt(
                 curr.stakes.find(({ stakedIotaId }) => stakedIotaId === stakeIotaId)?.principal ||
-                    0,
+                    0n,
             );
             return total + acc;
         }, 0n) || 0n

apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx

@@ -1,18 +1,43 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { SettingsDialog, useSettingsDialog } from '@/components';
 import { Badge, BadgeType, Button, ButtonType } from '@iota/apps-ui-kit';
+import { ConnectButton, useIotaClientContext } from '@iota/dapp-kit';
+import { getNetwork, Network } from '@iota/iota-sdk/client';
 import { ThemeSwitcher } from '@iota/core';
-import { ConnectButton } from '@iota/dapp-kit';
 import { Settings } from '@iota/ui-icons';
 
 export function TopNav() {
+    const { network } = useIotaClientContext();
+    const { name: networkName } = getNetwork(network);
+    const {
+        isSettingsDialogOpen,
+        settingsDialogView,
+        setSettingsDialogView,
+        onCloseSettingsDialogClick,
+        onOpenSettingsDialogClick,
+    } = useSettingsDialog();
+
     return (
         <div className="flex w-full flex-row items-center justify-end gap-md py-xs--rs">
-            <Badge label="Mainnet" type={BadgeType.PrimarySoft} />
+            <Badge
+                label={networkName}
+                type={network === Network.Mainnet ? BadgeType.PrimarySoft : BadgeType.Neutral}
+            />
             <ConnectButton size="md" />
+            <SettingsDialog
+                isOpen={isSettingsDialogOpen}
+                handleClose={onCloseSettingsDialogClick}
+                view={settingsDialogView}
+                setView={setSettingsDialogView}
+            />
             <ThemeSwitcher />
-            <Button icon={<Settings />} type={ButtonType.Ghost} />
+            <Button
+                icon={<Settings />}
+                type={ButtonType.Ghost}
+                onClick={onOpenSettingsDialogClick}
+            />
         </div>
     );
 }

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,25 +19,24 @@ function HomeDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
 
     const stardustMigrationEnabled = useFeature<boolean>(Feature.StardustMigration).value;
+    const supplyIncreaseVestingEnabled = useFeature<boolean>(Feature.SupplyIncreaseVesting).value;
 
     return (
         <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 content-start">
                         <div style={{ gridArea: 'balance' }} className="flex grow overflow-hidden">
                             <AccountBalance />
                         </div>
                         <div style={{ gridArea: 'staking' }} className="flex grow overflow-hidden">
                             <StakingOverview />
                         </div>
                         {stardustMigrationEnabled && <MigrationOverview />}
-                        <div style={{ gridArea: 'coins' }}>
+                        <div style={{ gridArea: 'coins' }} className="flex grow overflow-hidden">
                             <MyCoins />
                         </div>
-                        <div style={{ gridArea: 'vesting' }} className="flex grow overflow-hidden">
-                            Vesting
-                        </div>
+                        {supplyIncreaseVestingEnabled && <SupplyIncreaseVestingOverview />}
                         <div style={{ gridArea: 'activity' }} className="flex grow overflow-hidden">
                             <TransactionsOverview />
                         </div>