feat(wallet-dashboard): add tx details state to the end of migration …

…flow (#4547)

* feat: add tx details for migration

* feat: add skeleton and remode debris

* feat: redirect to home after migrate

* fix height

apps/wallet-dashboard/app/(protected)/migrations/page.tsx

@@ -25,12 +25,14 @@ import { STARDUST_BASIC_OUTPUT_TYPE, STARDUST_NFT_OUTPUT_TYPE, useFormatCoin } f
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { StardustOutputMigrationStatus } from '@/lib/enums';
 import { MigrationObjectsPanel, MigrationDialog } from '@/components';
+import { useRouter } from 'next/navigation';
 
 function MigrationDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
     const address = account?.address || '';
     const queryClient = useQueryClient();
     const iotaClient = useIotaClient();
+    const router = useRouter();
     const [isMigrationDialogOpen, setIsMigrationDialogOpen] = useState(false);
     const [selectedStardustObjectsCategory, setSelectedStardustObjectsCategory] = useState<
         StardustOutputMigrationStatus | undefined
@@ -139,6 +141,11 @@ function MigrationDashboardPage(): JSX.Element {
         setSelectedStardustObjectsCategory(undefined);
     }
 
+    function handleMigrationDialogClose() {
+        setIsMigrationDialogOpen(false);
+        router.push('/');
+    }
+
     return (
         <div className="flex h-full w-full flex-wrap items-center justify-center space-y-4">
             <div
@@ -159,6 +166,7 @@ function MigrationDashboardPage(): JSX.Element {
                                 selectedStardustObjectsCategory ===
                                 StardustOutputMigrationStatus.TimeLocked
                             }
+                            handleClose={handleMigrationDialogClose}
                         />
                     )}
                     <Panel>

apps/wallet-dashboard/components/Dialogs/index.ts

@@ -7,4 +7,4 @@ export * from './Staking';
 export * from './unstake';
 export * from './vesting';
 export * from './settings';
-export * from './MigrationDialog';
+export * from './migration';

apps/wallet-dashboard/components/Dialogs/migration/MigrationDialog.tsx

@@ -0,0 +1,88 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+import { useCurrentAccount, useSignAndExecuteTransaction } from '@iota/dapp-kit';
+import { IotaObjectData } from '@iota/iota-sdk/client';
+import { useMigrationTransaction } from '@/hooks/useMigrationTransaction';
+import { Dialog } from '@iota/apps-ui-kit';
+import toast from 'react-hot-toast';
+import { TransactionDialogView } from '../TransactionDialog';
+import { MigrationDialogView } from './enums';
+import { ConfirmMigrationView } from './views';
+
+interface MigrationDialogProps {
+    handleClose: () => void;
+    basicOutputObjects: IotaObjectData[] | undefined;
+    nftOutputObjects: IotaObjectData[] | undefined;
+    onSuccess: (digest: string) => void;
+    setOpen: (bool: boolean) => void;
+    open: boolean;
+    isTimelocked: boolean;
+}
+
+export function MigrationDialog({
+    handleClose,
+    basicOutputObjects = [],
+    nftOutputObjects = [],
+    onSuccess,
+    open,
+    setOpen,
+    isTimelocked,
+}: MigrationDialogProps): JSX.Element {
+    const account = useCurrentAccount();
+    const [txDigest, setTxDigest] = useState<string>('');
+    const [view, setView] = useState<MigrationDialogView>(MigrationDialogView.Confirmation);
+
+    const {
+        data: migrateData,
+        isPending: isMigrationPending,
+        isError: isMigrationError,
+    } = useMigrationTransaction(account?.address || '', basicOutputObjects, nftOutputObjects);
+
+    const { mutateAsync: signAndExecuteTransaction, isPending: isSendingTransaction } =
+        useSignAndExecuteTransaction();
+
+    async function handleMigrate(): Promise<void> {
+        if (!migrateData) return;
+        signAndExecuteTransaction(
+            {
+                transaction: migrateData.transaction,
+            },
+            {
+                onSuccess: (tx) => {
+                    onSuccess(tx.digest);
+                    setTxDigest(tx.digest);
+                    setView(MigrationDialogView.TransactionDetails);
+                },
+            },
+        )
+            .then(() => {
+                toast.success('Migration transaction has been sent');
+            })
+            .catch(() => {
+                toast.error('Migration transaction was not sent');
+            });
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            {view === MigrationDialogView.Confirmation && (
+                <ConfirmMigrationView
+                    basicOutputObjects={basicOutputObjects}
+                    nftOutputObjects={nftOutputObjects}
+                    onSuccess={handleMigrate}
+                    setOpen={setOpen}
+                    isTimelocked={isTimelocked}
+                    migrateData={migrateData}
+                    isMigrationPending={isMigrationPending}
+                    isMigrationError={isMigrationError}
+                    isSendingTransaction={isSendingTransaction}
+                />
+            )}
+            {view === MigrationDialogView.TransactionDetails && (
+                <TransactionDialogView txDigest={txDigest} onClose={handleClose} />
+            )}
+        </Dialog>
+    );
+}

apps/wallet-dashboard/components/Dialogs/migration/enums/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './view.enums';

apps/wallet-dashboard/components/Dialogs/migration/enums/view.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum MigrationDialogView {
+    Confirmation = 'Confirmation',
+    TransactionDetails = 'TransactionDetails',
+}

apps/wallet-dashboard/components/Dialogs/migration/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './MigrationDialog';
+
+export * from './views';