Merge remote-tracking branch 'origin/develop' into tooling-dashboard/…

…sent-visual-asset
iotaledger · Dec 18, 2024 · 146dee8 · 146dee8
2 parents 7657e3d + 01b20d6
commit 146dee8
Show file tree

Hide file tree

Showing 72 changed files with 1,561 additions and 1,791 deletions.
diff --git a/apps/apps-backend/src/features/features.controller.ts b/apps/apps-backend/src/features/features.controller.ts
@@ -134,10 +134,10 @@ export class FeaturesController {
                     defaultValue: false,
                 },
                 [Feature.StardustMigration]: {
-                    defaultValue: false,
+                    defaultValue: true,
                 },
                 [Feature.SupplyIncreaseVesting]: {
-                    defaultValue: false,
+                    defaultValue: true,
                 },
             },
             dateUpdated: new Date().toISOString(),

diff --git a/...r/src/components/header/ThemeSwitcher.tsx → .../src/components/buttons/ThemeSwitcher.tsx b/...r/src/components/header/ThemeSwitcher.tsx → .../src/components/buttons/ThemeSwitcher.tsx
@@ -3,7 +3,8 @@
 
 import { Button, ButtonType } from '@iota/apps-ui-kit';
 import { DarkMode, LightMode } from '@iota/ui-icons';
-import { useTheme, Theme, ThemePreference } from '@iota/core';
+import { Theme, ThemePreference } from '../../enums';
+import { useTheme } from '../../hooks';
 
 export function ThemeSwitcher(): React.JSX.Element {
     const { theme, themePreference, setThemePreference } = useTheme();

diff --git a/apps/core/src/components/buttons/index.ts b/apps/core/src/components/buttons/index.ts
@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './ViewTxnOnExplorerButton';
+export * from './ThemeSwitcher';
diff --git a/apps/explorer/src/components/header/Header.tsx b/apps/explorer/src/components/header/Header.tsx
@@ -5,7 +5,8 @@
 import { NetworkSelector } from '../network';
 import Search from '../search/Search';
 import { LinkWithQuery } from '~/components/ui';
-import { ThemeSwitcher, ThemedIotaLogo } from '~/components';
+import { ThemedIotaLogo } from '~/components';
+import { ThemeSwitcher } from '@iota/core';
 
 function Header(): JSX.Element {
     return (

diff --git a/apps/explorer/src/components/header/index.ts b/apps/explorer/src/components/header/index.ts
@@ -2,4 +2,3 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './Header';
-export * from './ThemeSwitcher';
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/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx b/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
@@ -57,6 +57,10 @@ interface KeyValueProps {
      * Reverse the KeyValue (optional).
      */
     isReverse?: boolean;
+    /**
+     * Text shown on value hover.
+     */
+    valueHoverTitle?: string;
 }
 
 export function KeyValueInfo({
@@ -72,6 +76,7 @@ export function KeyValueInfo({
     onCopyError,
     fullwidth,
     isReverse = false,
+    valueHoverTitle,
 }: KeyValueProps): React.JSX.Element {
     const flexDirectionClass = isReverse ? 'flex-row-reverse' : 'flex-row';
     async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
@@ -119,6 +124,7 @@ export function KeyValueInfo({
                 })}
             >
                 <span
+                    title={valueHoverTitle}
                     className={cx(
                         'text-neutral-10 dark:text-neutral-92',
                         size === ValueSize.Medium ? 'text-body-lg' : 'text-body-md',

diff --git a/apps/ui-kit/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx b/apps/ui-kit/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx
@@ -18,16 +18,21 @@ export interface LoadingIndicatorProps {
      * The text to display next to the loading indicator.
      */
     text?: string;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
 }
 
 export function LoadingIndicator({
     color = 'text-primary-30 dark:text-primary-80',
     size = 'w-5 h-5',
     text,
+    testId,
 }: LoadingIndicatorProps): React.JSX.Element {
     return (
         <div className="flex items-center justify-center gap-xs">
-            <Loader className={cx('animate-spin', color, size)} />
+            <Loader className={cx('animate-spin', color, size)} data-testid={testId} />
             {text && <span className={cx('text-body-sm', color)}>{text}</span>}
         </div>
     );

diff --git a/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx b/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Badge, BadgeType, Button, ButtonType } from '@iota/apps-ui-kit';
+import { ThemeSwitcher } from '@iota/core';
 import { ConnectButton } from '@iota/dapp-kit';
 import { Settings } from '@iota/ui-icons';
 
@@ -10,6 +11,7 @@ export function TopNav() {
         <div className="flex w-full flex-row items-center justify-end gap-md py-xs--rs">
             <Badge label="Mainnet" type={BadgeType.PrimarySoft} />
             <ConnectButton size="md" />
+            <ThemeSwitcher />
             <Button icon={<Settings />} type={ButtonType.Ghost} />
         </div>
     );

diff --git a/apps/wallet-dashboard/app/(protected)/layout.tsx b/apps/wallet-dashboard/app/(protected)/layout.tsx
@@ -4,21 +4,9 @@
 
 import { Notifications } from '@/components/index';
 import React, { type PropsWithChildren } from 'react';
-import { Button } from '@iota/apps-ui-kit';
 import { Sidebar, TopNav } from './components';
-import { ThemePreference, useTheme } from '@iota/core';
 
 function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
-    const { theme, themePreference, setThemePreference } = useTheme();
-
-    const toggleTheme = () => {
-        const newTheme =
-            themePreference === ThemePreference.Light
-                ? ThemePreference.Dark
-                : ThemePreference.Light;
-        setThemePreference(newTheme);
-    };
-
     return (
         <div className="min-h-full">
             <div className="fixed left-0 top-0 z-50 h-full">
@@ -34,14 +22,6 @@ function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
                     <div className="flex-1 py-md--rs">{children}</div>
                 </div>
             </div>
-
-            <div className="fixed bottom-5 right-5">
-                <Button
-                    onClick={toggleTheme}
-                    text={`${theme === 'dark' ? 'Light' : 'Dark'} mode`}
-                />
-            </div>
-
             <Notifications />
         </div>
     );

diff --git a/apps/wallet-dashboard/app/(protected)/migrations/page.tsx b/apps/wallet-dashboard/app/(protected)/migrations/page.tsx
@@ -6,8 +6,7 @@
 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 { useGetStardustMigratableObjects } from '@/hooks';
 import { summarizeMigratableObjectValues, summarizeUnmigratableObjectValues } from '@/lib/utils';
 import {
     Button,
@@ -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);
@@ -133,15 +131,8 @@ function MigrationDashboardPage(): JSX.Element {
         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}
                                 />
                             }

diff --git a/apps/wallet-dashboard/app/(protected)/staking/page.tsx b/apps/wallet-dashboard/app/(protected)/staking/page.tsx
@@ -3,7 +3,6 @@
 
 'use client';
 
-import { StartStaking } from '@/components/staking-overview/StartStaking';
 import {
     Button,
     ButtonSize,
@@ -16,7 +15,15 @@ import {
     Title,
     TitleSize,
 } from '@iota/apps-ui-kit';
-import { StakeDialog, StakeDialogView } from '@/components';
+import {
+    StakeDialog,
+    StakeDialogView,
+    UnstakeDialog,
+    useUnstakeDialog,
+    UnstakeDialogView,
+    useStakeDialog,
+    StartStaking,
+} from '@/components';
 import {
     ExtendedDelegatedStake,
     formatDelegatedStake,
@@ -32,8 +39,8 @@ import { useCurrentAccount, useIotaClient, useIotaClientQuery } from '@iota/dapp
 import { IotaSystemStateSummary } from '@iota/iota-sdk/client';
 import { Info } from '@iota/ui-icons';
 import { useMemo } from 'react';
-import { useStakeDialog } from '@/components/Dialogs/Staking/hooks/useStakeDialog';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { IotaSignAndExecuteTransactionOutput } from '@iota/wallet-standard';
 
 function StakingDashboardPage(): React.JSX.Element {
     const account = useCurrentAccount();
@@ -52,6 +59,14 @@ function StakingDashboardPage(): React.JSX.Element {
         handleCloseStakeDialog,
         handleNewStake,
     } = useStakeDialog();
+    const {
+        isOpen: isUnstakeDialogOpen,
+        openUnstakeDialog,
+        defaultDialogProps,
+        handleClose: handleCloseUnstakeDialog,
+        setView: setUnstakeDialogView,
+        setTxDigest,
+    } = useUnstakeDialog();
 
     const { data: delegatedStakeData, refetch: refetchDelegatedStakes } = useGetDelegatedStake({
         address: account?.address || '',
@@ -100,6 +115,34 @@ function StakingDashboardPage(): React.JSX.Element {
             .then(() => refetchDelegatedStakes());
     }
 
+    function handleUnstakeClick() {
+        setStakeDialogView(undefined);
+        openUnstakeDialog();
+    }
+
+    function handleUnstakeDialogBack() {
+        setStakeDialogView(StakeDialogView.Details);
+        handleCloseUnstakeDialog();
+    }
+
+    function handleOnUnstakeBack(view: UnstakeDialogView): (() => void) | undefined {
+        if (view === UnstakeDialogView.Unstake) {
+            return handleUnstakeDialogBack;
+        }
+    }
+
+    function handleOnUnstakeSuccess(tx: IotaSignAndExecuteTransactionOutput): void {
+        setUnstakeDialogView(UnstakeDialogView.TransactionDetails);
+        iotaClient
+            .waitForTransaction({
+                digest: tx.digest,
+            })
+            .then((tx) => {
+                refetchDelegatedStakes();
+                setTxDigest(tx.digest);
+            });
+    }
+
     return (
         <div className="flex justify-center">
             <div className="w-3/4">
@@ -171,16 +214,27 @@ function StakingDashboardPage(): React.JSX.Element {
                                 </div>
                             </div>
                         </div>
-                        <StakeDialog
-                            stakedDetails={selectedStake}
-                            onSuccess={handleOnStakeSuccess}
-                            isOpen={isDialogStakeOpen}
-                            handleClose={handleCloseStakeDialog}
-                            view={stakeDialogView}
-                            setView={setStakeDialogView}
-                            selectedValidator={selectedValidator}
-                            setSelectedValidator={setSelectedValidator}
-                        />
+                        {isDialogStakeOpen && (
+                            <StakeDialog
+                                stakedDetails={selectedStake}
+                                onSuccess={handleOnStakeSuccess}
+                                handleClose={handleCloseStakeDialog}
+                                view={stakeDialogView}
+                                setView={setStakeDialogView}
+                                selectedValidator={selectedValidator}
+                                setSelectedValidator={setSelectedValidator}
+                                onUnstakeClick={handleUnstakeClick}
+                            />
+                        )}
+
+                        {isUnstakeDialogOpen && selectedStake && (
+                            <UnstakeDialog
+                                extendedStake={selectedStake}
+                                onBack={handleOnUnstakeBack}
+                                onSuccess={handleOnUnstakeSuccess}
+                                {...defaultDialogProps}
+                            />
+                        )}
                     </Panel>
                 ) : (
                     <div className="flex h-[270px] p-lg">
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@
		// SPDX-License-Identifier: Apache-2.0

		export * from './ViewTxnOnExplorerButton';
		export * from './ThemeSwitcher';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,3 @@
		// SPDX-License-Identifier: Apache-2.0

		export * from './Header';
		export * from './ThemeSwitcher';