Merge branch 'develop' into tooling-dashboard/add-tx-details-to-migra…

…tion-flow
iotaledger · Dec 18, 2024 · 178c4da · 178c4da
2 parents c34de10 + a849c3b
commit 178c4da
Show file tree

Hide file tree

Showing 20 changed files with 998 additions and 1,288 deletions.
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)/migrations/page.tsx b/apps/wallet-dashboard/app/(protected)/migrations/page.tsx
@@ -7,7 +7,7 @@ import { useState, useMemo, useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import clsx from 'clsx';
 import { useGetStardustMigratableObjects } from '@/hooks';
-import { summarizeMigratableObjectValues, summarizeUnmigratableObjectValues } from '@/lib/utils';
+import { summarizeMigratableObjectValues, summarizeTimelockedObjectValues } from '@/lib/utils';
 import {
     Button,
     ButtonSize,
@@ -41,8 +41,8 @@ function MigrationDashboardPage(): JSX.Element {
     const {
         migratableBasicOutputs,
         migratableNftOutputs,
-        unmigratableBasicOutputs,
-        unmigratableNftOutputs,
+        timelockedBasicOutputs,
+        timelockedNftOutputs,
     } = stardustMigrationObjects || {};
 
     const {
@@ -54,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 =
@@ -106,7 +106,7 @@ function MigrationDashboardPage(): JSX.Element {
 
     const TIMELOCKED_ASSETS_CARDS: MigrationDisplayCardProps[] = [
         {
-            title: `${totalUnmigratableObjects}`,
+            title: `${totalTimelockedObjects}`,
             subtitle: 'Time-locked',
             icon: Clock,
         },
@@ -123,8 +123,8 @@ function MigrationDashboardPage(): JSX.Element {
                 selectedStardustObjectsCategory === StardustOutputMigrationStatus.TimeLocked
             ) {
                 return [
-                    ...stardustMigrationObjects.unmigratableBasicOutputs,
-                    ...stardustMigrationObjects.unmigratableNftOutputs,
+                    ...stardustMigrationObjects.timelockedBasicOutputs,
+                    ...stardustMigrationObjects.timelockedNftOutputs,
                 ];
             }
         }
@@ -221,7 +221,7 @@ function MigrationDashboardPage(): JSX.Element {
                                 disabled={
                                     selectedStardustObjectsCategory ===
                                         StardustOutputMigrationStatus.TimeLocked ||
-                                    !totalUnmigratableObjects
+                                    !totalTimelockedObjects
                                 }
                                 onClick={() =>
                                     setSelectedStardustObjectsCategory(

diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx
@@ -4,17 +4,20 @@
 import React, { useState } from 'react';
 import { Dialog } from '@iota/apps-ui-kit';
 import { FormikProvider, useFormik } from 'formik';
-import { useCurrentAccount } from '@iota/dapp-kit';
+import { useIotaClient, useCurrentAccount } from '@iota/dapp-kit';
 import { createNftSendValidationSchema } from '@iota/core';
 import { DetailsView, SendView } from './views';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { AssetsDialogView } from './constants';
 import { useCreateSendAssetTransaction, useNotifications } from '@/hooks';
 import { NotificationType } from '@/stores/notificationStore';
+import { TransactionDetailsView } from '../SendToken';
+import { DialogLayout } from '../layout';
 
 interface AssetsDialogProps {
     onClose: () => void;
     asset: IotaObjectData;
+    refetchAssets: () => void;
 }
 
 interface FormValues {
@@ -25,12 +28,14 @@ const INITIAL_VALUES: FormValues = {
     to: '',
 };
 
-export function AssetDialog({ onClose, asset }: AssetsDialogProps): JSX.Element {
+export function AssetDialog({ onClose, asset, refetchAssets }: AssetsDialogProps): JSX.Element {
     const [view, setView] = useState<AssetsDialogView>(AssetsDialogView.Details);
     const account = useCurrentAccount();
+    const [digest, setDigest] = useState<string>('');
     const activeAddress = account?.address ?? '';
     const objectId = asset?.objectId ?? '';
     const { addNotification } = useNotifications();
+    const iotaClient = useIotaClient();
     const validationSchema = createNftSendValidationSchema(activeAddress, objectId);
 
     const { mutation: sendAsset } = useCreateSendAssetTransaction(objectId);
@@ -44,10 +49,16 @@ export function AssetDialog({ onClose, asset }: AssetsDialogProps): JSX.Element
 
     async function onSubmit(values: FormValues) {
         try {
-            await sendAsset.mutateAsync(values.to);
+            const executed = await sendAsset.mutateAsync(values.to);
+
+            const tx = await iotaClient.waitForTransaction({
+                digest: executed.digest,
+            });
+
+            setDigest(tx.digest);
+            refetchAssets();
             addNotification('Transfer transaction successful', NotificationType.Success);
-            onClose();
-            setView(AssetsDialogView.Details);
+            setView(AssetsDialogView.TransactionDetails);
         } catch {
             addNotification('Transfer transaction failed', NotificationType.Error);
         }
@@ -66,16 +77,26 @@ export function AssetDialog({ onClose, asset }: AssetsDialogProps): JSX.Element
     }
     return (
         <Dialog open onOpenChange={onOpenChange}>
-            <FormikProvider value={formik}>
+            <DialogLayout>
                 <>
                     {view === AssetsDialogView.Details && (
                         <DetailsView asset={asset} onClose={onOpenChange} onSend={onDetailsSend} />
                     )}
                     {view === AssetsDialogView.Send && (
-                        <SendView asset={asset} onClose={onOpenChange} onBack={onSendViewBack} />
+                        <FormikProvider value={formik}>
+                            <SendView
+                                asset={asset}
+                                onClose={onOpenChange}
+                                onBack={onSendViewBack}
+                            />
+                        </FormikProvider>
                     )}
+
+                    {view === AssetsDialogView.TransactionDetails && !!digest ? (
+                        <TransactionDetailsView digest={digest} onClose={onOpenChange} />
+                    ) : null}
                 </>
-            </FormikProvider>
+            </DialogLayout>
         </Dialog>
     );
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/constants/AssetsDialogView.ts b/apps/wallet-dashboard/components/Dialogs/Assets/constants/AssetsDialogView.ts
@@ -4,4 +4,5 @@
 export enum AssetsDialogView {
     Details = 'Details',
     Send = 'Send',
+    TransactionDetails = 'TransactionDetails',
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
@@ -13,7 +13,7 @@ import {
 } from '@iota/apps-ui-kit';
 import Link from 'next/link';
 import { formatAddress } from '@iota/iota-sdk/utils';
-import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
+import { DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { ExplorerLink } from '@/components/ExplorerLink';
 import { useCurrentAccount } from '@iota/dapp-kit';
@@ -55,7 +55,7 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
     }
 
     return (
-        <DialogLayout>
+        <>
             <Header title="Asset" onClose={onClose} titleCentered />
             <DialogLayoutBody>
                 <div className="flex w-full flex-col items-center justify-center gap-xs">
@@ -195,6 +195,6 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
                     )}
                 </div>
             </DialogLayoutFooter>
-        </DialogLayout>
+        </>
     );
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { AddressInput, useNftDetails } from '@iota/core';
 import { useFormikContext } from 'formik';
-import { DialogLayout, DialogLayoutFooter, DialogLayoutBody } from '../../layout';
+import { DialogLayoutFooter, DialogLayoutBody } from '../../layout';
 import {
     Button,
     ButtonHtmlType,
@@ -33,7 +33,7 @@ export function SendView({ asset, onClose, onBack }: SendViewProps) {
 
     const { nftName, nftImageUrl } = useNftDetails(objectId, senderAddress);
     return (
-        <DialogLayout>
+        <>
             <Header title="Send asset" onClose={onClose} titleCentered onBack={onBack} />
             <DialogLayoutBody>
                 <div className="flex w-full flex-col items-center justify-center gap-xs">
@@ -65,6 +65,6 @@ export function SendView({ asset, onClose, onBack }: SendViewProps) {
                     onClick={submitForm}
                 />
             </DialogLayoutFooter>
-        </DialogLayout>
+        </>
     );
 }