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

…l asset flow (#4449) * feat(wallet-dashboard): implement SentSuccess view and update SendTokenDialog flow * feat(dashboard): enhance SendTokenDialog flow and improve transaction handling * feat(dashboard): rename SentSuccessView to TransactionDetailsView and update flow * fix(dashboard): improve error message for transaction info retrieval * feat(dashboard): add tx details state to the end of send visual asset flow * fix(dashboard): correct spelling of 'Receipt' in AssetDialog and constants * feat(dashboard): add loading state with spinner during transaction fetching * feat(dashboard): rename Receipt view to TransactionDetails and update related logic * feat(dashboard): implement transfer transaction mutation and refactor handling logic * refactor(explorer, core): move useRecognizedPackages from explorer to core. * feat(dashboard): integrate useRecognizedPackages for transaction details * fix(dashboard): correct import path for useTransferTransaction * refactor(dashboard): change dialog layout structure for assets * feat(dashboard): add refetch functionality to AssetDialog for updated asset data * refactor(dashboard): streamline AssetDialog component structure --------- Co-authored-by: cpl121 <[email protected]>
iotaledger · Dec 18, 2024 · 33d49eb · 33d49eb
1 parent 5e221d5
commit 33d49eb
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 16 deletions.
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/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>
+        </>
     );
 }