Merge branch 'develop' into chore/update-wiki-to-include-resolver

iotaledger · Dec 18, 2024 · 7941b38 · 7941b38
2 parents 09ac52e + 33d49eb
commit 7941b38
Show file tree

Hide file tree

Showing 72 changed files with 2,210 additions and 2,392 deletions.
diff --git a/.changeset/nice-crabs-wink.md b/.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
diff --git a/apps/core/src/components/stake/StakedCard.tsx b/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,
     );
 

diff --git a/apps/core/src/components/transaction/info/UnstakeTransactionInfo.tsx b/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>

diff --git a/apps/core/src/hooks/useCountdownByTimestamp.ts b/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(' ');
 }
diff --git a/apps/core/src/utils/getStakeIotaByIotaId.ts b/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

diff --git a/apps/explorer/src/pages/transaction-result/programmable-transaction-view/utils.ts b/apps/explorer/src/pages/transaction-result/programmable-transaction-view/utils.ts
@@ -24,10 +24,11 @@ export function flattenIotaArguments(data: (IotaArgument | IotaArgument[])[]): s
                 } else if ('NestedResult' in value) {
                     return `NestedResult(${value.NestedResult[0]}, ${value.NestedResult[1]})`;
                 }
+            } else if (typeof value === 'string') {
+                return value;
             } else {
                 throw new Error('Not a correct flattenable data');
             }
-            return '';
         })
         .join(', ');
 }
diff --git a/apps/ui-kit/package.json b/apps/ui-kit/package.json
@@ -66,7 +66,7 @@
         "tailwindcss": "^3.3.3",
         "typescript": "^5.5.3",
         "vite": "^5.3.3",
-        "vite-plugin-dts": "^3.9.1",
+        "vite-plugin-dts": "^4.3.0",
         "vite-tsconfig-paths": "^4.2.0"
     }
 }
diff --git a/apps/wallet-dashboard/app/(protected)/assets/page.tsx b/apps/wallet-dashboard/app/(protected)/assets/page.tsx
@@ -29,7 +29,7 @@ export default function AssetsDashboardPage(): React.JSX.Element {
     const [selectedAsset, setSelectedAsset] = useState<IotaObjectData | null>(null);
     const [selectedCategory, setSelectedCategory] = useState<AssetCategory>(AssetCategory.Visual);
     const account = useCurrentAccount();
-    const { data, isFetching, fetchNextPage, hasNextPage } = useGetOwnedObjects(
+    const { data, isFetching, fetchNextPage, hasNextPage, refetch } = useGetOwnedObjects(
         account?.address,
         undefined,
         OBJECTS_PER_REQ,
@@ -79,7 +79,11 @@ export default function AssetsDashboardPage(): React.JSX.Element {
                     fetchNextPage={fetchNextPage}
                 />
                 {selectedAsset && (
-                    <AssetDialog onClose={() => setSelectedAsset(null)} asset={selectedAsset} />
+                    <AssetDialog
+                        onClose={() => setSelectedAsset(null)}
+                        asset={selectedAsset}
+                        refetchAssets={refetch}
+                    />
                 )}
             </div>
         </Panel>

diff --git a/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx b/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>
     );
 }
diff --git 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,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>

diff --git a/apps/wallet-dashboard/app/(protected)/migrations/page.tsx b/apps/wallet-dashboard/app/(protected)/migrations/page.tsx
@@ -6,9 +6,8 @@
 import { useState, useMemo, useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import clsx from 'clsx';
-import MigratePopup from '@/components/Popup/Popups/MigratePopup';
-import { useGetStardustMigratableObjects, usePopups } from '@/hooks';
-import { summarizeMigratableObjectValues, summarizeUnmigratableObjectValues } from '@/lib/utils';
+import { useGetStardustMigratableObjects } from '@/hooks';
+import { summarizeMigratableObjectValues, summarizeTimelockedObjectValues } from '@/lib/utils';
 import {
     Button,
     ButtonSize,
@@ -25,15 +24,14 @@ import { useCurrentAccount, useIotaClient } from '@iota/dapp-kit';
 import { STARDUST_BASIC_OUTPUT_TYPE, STARDUST_NFT_OUTPUT_TYPE, useFormatCoin } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { StardustOutputMigrationStatus } from '@/lib/enums';
-import { MigrationObjectsPanel } from '@/components';
+import { MigrationObjectsPanel, MigrationDialog } from '@/components';
 
 function MigrationDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
     const address = account?.address || '';
-    const { openPopup, closePopup } = usePopups();
     const queryClient = useQueryClient();
     const iotaClient = useIotaClient();
-
+    const [isMigrationDialogOpen, setIsMigrationDialogOpen] = useState(false);
     const [selectedStardustObjectsCategory, setSelectedStardustObjectsCategory] = useState<
         StardustOutputMigrationStatus | undefined
     >(undefined);
@@ -43,8 +41,8 @@ function MigrationDashboardPage(): JSX.Element {
     const {
         migratableBasicOutputs,
         migratableNftOutputs,
-        unmigratableBasicOutputs,
-        unmigratableNftOutputs,
+        timelockedBasicOutputs,
+        timelockedNftOutputs,
     } = stardustMigrationObjects || {};
 
     const {
@@ -56,9 +54,9 @@ function MigrationDashboardPage(): JSX.Element {
         nftOutputs: migratableNftOutputs,
         address,
     });
-    const { totalUnmigratableObjects } = summarizeUnmigratableObjectValues({
-        basicOutputs: unmigratableBasicOutputs,
-        nftOutputs: unmigratableNftOutputs,
+    const { totalTimelockedObjects } = summarizeTimelockedObjectValues({
+        basicOutputs: timelockedBasicOutputs,
+        nftOutputs: timelockedNftOutputs,
     });
 
     const hasMigratableObjects =
@@ -108,7 +106,7 @@ function MigrationDashboardPage(): JSX.Element {
 
     const TIMELOCKED_ASSETS_CARDS: MigrationDisplayCardProps[] = [
         {
-            title: `${totalUnmigratableObjects}`,
+            title: `${totalTimelockedObjects}`,
             subtitle: 'Time-locked',
             icon: Clock,
         },
@@ -125,23 +123,16 @@ function MigrationDashboardPage(): JSX.Element {
                 selectedStardustObjectsCategory === StardustOutputMigrationStatus.TimeLocked
             ) {
                 return [
-                    ...stardustMigrationObjects.unmigratableBasicOutputs,
-                    ...stardustMigrationObjects.unmigratableNftOutputs,
+                    ...stardustMigrationObjects.timelockedBasicOutputs,
+                    ...stardustMigrationObjects.timelockedNftOutputs,
                 ];
             }
         }
         return [];
     }, [selectedStardustObjectsCategory, stardustMigrationObjects]);
 
-    function openMigratePopup(): void {
-        openPopup(
-            <MigratePopup
-                basicOutputObjects={migratableBasicOutputs}
-                nftOutputObjects={migratableNftOutputs}
-                closePopup={closePopup}
-                onSuccess={handleOnSuccess}
-            />,
-        );
+    function openMigrationDialog(): void {
+        setIsMigrationDialogOpen(true);
     }
 
     function handleCloseDetailsPanel() {
@@ -157,14 +148,27 @@ function MigrationDashboardPage(): JSX.Element {
                 )}
             >
                 <div className="flex w-1/3 flex-col gap-md--rs">
+                    {isMigrationDialogOpen && (
+                        <MigrationDialog
+                            basicOutputObjects={migratableBasicOutputs}
+                            nftOutputObjects={migratableNftOutputs}
+                            onSuccess={handleOnSuccess}
+                            open={isMigrationDialogOpen}
+                            setOpen={setIsMigrationDialogOpen}
+                            isTimelocked={
+                                selectedStardustObjectsCategory ===
+                                StardustOutputMigrationStatus.TimeLocked
+                            }
+                        />
+                    )}
                     <Panel>
                         <Title
                             title="Migration"
                             trailingElement={
                                 <Button
                                     text="Migrate All"
                                     disabled={!hasMigratableObjects}
-                                    onClick={openMigratePopup}
+                                    onClick={openMigrationDialog}
                                     size={ButtonSize.Small}
                                 />
                             }
@@ -212,7 +216,7 @@ function MigrationDashboardPage(): JSX.Element {
                                 disabled={
                                     selectedStardustObjectsCategory ===
                                         StardustOutputMigrationStatus.TimeLocked ||
-                                    !totalUnmigratableObjects
+                                    !totalTimelockedObjects
                                 }
                                 onClick={() =>
                                     setSelectedStardustObjectsCategory(