diff --git a/apps/wallet-dashboard/app/(protected)/assets/page.tsx b/apps/wallet-dashboard/app/(protected)/assets/page.tsx index ed96fe0a519..7007cc86c5c 100644 --- 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(null); const [selectedCategory, setSelectedCategory] = useState(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 && ( - setSelectedAsset(null)} asset={selectedAsset} /> + setSelectedAsset(null)} + asset={selectedAsset} + refetchAssets={refetch} + /> )} diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx index ec3d8d38d11..c71390a33aa 100644 --- 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.Details); const account = useCurrentAccount(); + const [digest, setDigest] = useState(''); 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 ( - + <> {view === AssetsDialogView.Details && ( )} {view === AssetsDialogView.Send && ( - + + + )} + + {view === AssetsDialogView.TransactionDetails && !!digest ? ( + + ) : null} - + ); } diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/constants/AssetsDialogView.ts b/apps/wallet-dashboard/components/Dialogs/Assets/constants/AssetsDialogView.ts index 88cb34c15b1..242da33c2c3 100644 --- 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 index 3929ba0062f..8520d62a484 100644 --- 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 ( - + <>
@@ -195,6 +195,6 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) { )}
- + ); } diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx index b5757582c7b..3d0350478ac 100644 --- 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 ( - + <>
@@ -65,6 +65,6 @@ export function SendView({ asset, onClose, onBack }: SendViewProps) { onClick={submitForm} /> - + ); }