feat: add toast feedback for actions in dapp (#452)

evavirseda · msarcev · web-flow · commit 7d7a2d96c78c · 2025-07-23T11:50:00.000+02:00
* add support for toasts

* fix build

* add purchase toast

* minor fix

* add more toasts

* add toasts for avatar and renew

* add missing toasts

* fix build

* update success page for unlinking an address

* fix build

* fix build

* fix build

---------

Co-authored-by: msarcev &lt;mario.sarcevic@iota.org&gt;
diff --git a/dapp/src/auctions/components/dialogs/AuctionBidDialog.tsx b/dapp/src/auctions/components/dialogs/AuctionBidDialog.tsx
@@ -29,6 +29,7 @@ import { Transaction } from '@iota/iota-sdk/transactions';
 import { IOTA_DECIMALS } from '@iota/iota-sdk/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 
 import { useAuctionBid } from '@/auctions/hooks/useAuctionBid';
 import { useCountdown } from '@/auctions/hooks/useCountdown';
@@ -111,9 +112,18 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
                 queryKey: queryKey.userAuctionHistory(account?.address),
             });
             queryClient.invalidateQueries({ queryKey: queryKey.auctionMetadata(name) });
+            toast.success(
+                `Successfully placed bid of ${formatNanosToIota(bidNanos ?? 0, {
+                    formatRounded: false,
+                    showIotaSymbol: true,
+                })} on ${normalizeIotaName(name)}`,
+            );
             closeDialog();
             onCompleted?.();
         },
+        onError(err) {
+            toast.error(err.message);
+        },
     });
 
     const hasEnoughGas =
diff --git a/dapp/src/components/dialogs/ConnectToAddressDialog.tsx b/dapp/src/components/dialogs/ConnectToAddressDialog.tsx
@@ -30,6 +30,7 @@ import { isSubname, normalizeIotaName } from '@iota/iota-names-sdk';
 import { formatAddress, isValidIotaAddress } from '@iota/iota-sdk/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { ChangeEvent, useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 
 import { NameRecordData, queryKey, useNameRecord, useRegistrationNfts } from '@/hooks';
 import { useGetDefaultName } from '@/hooks/useGetDefaultName';
@@ -127,6 +128,18 @@ export function ConnectToAddressDialog({ name, setOpen }: ConnectToAddressDialog
             queryClient.invalidateQueries({
                 queryKey: queryKey.defaultName(account?.address || ''),
             });
+            if (editTargetAddress.length === 0) {
+                toast.success(`Successfully disconnected ${cleanName}`);
+                setOpen(false);
+            } else if (editTargetAddress !== account?.address) {
+                toast.success(
+                    `Successfully connected ${cleanName} to address ${formatAddress(editTargetAddress)}`,
+                );
+                setOpen(false);
+            }
+        },
+        onError: (error) => {
+            toast.error(error.message);
         },
     });
 
@@ -169,19 +182,27 @@ export function ConnectToAddressDialog({ name, setOpen }: ConnectToAddressDialog
                             {isSuccess ? (
                                 <div className="flex flex-col gap-y-md items-center text-center">
                                     <div className="flex flex-col items-center gap-y-sm">
-                                        <span className="text-title-lg text-names-neutral-100">
-                                            {normalizeIotaName(name)}
-                                        </span>
+                                        {editIsDefaultName ? (
+                                            <span className="text-title-lg text-names-neutral-100">
+                                                {cleanName}
+                                            </span>
+                                        ) : null}
                                         <Chip
                                             leadingElement={<Link className="w-4 h-4" />}
                                             label={formatAddress(account?.address || '')}
                                             trailingElement={<Copy className="w-4 h-4" />}
                                             onClick={copyAddressToClipboard}
-                                            type={ChipType.Success}
+                                            type={
+                                                editIsDefaultName
+                                                    ? ChipType.Success
+                                                    : ChipType.Elevated
+                                            }
                                         />
                                     </div>
                                     <span className="text-body-md text-names-neutral-70">
-                                        Address linked successfully
+                                        {editIsDefaultName
+                                            ? 'Address linked successfully'
+                                            : `${cleanName} is no longer linked to an address`}
                                     </span>
                                 </div>
                             ) : (
diff --git a/dapp/src/components/dialogs/CreateSubnameDialog.tsx b/dapp/src/components/dialogs/CreateSubnameDialog.tsx
@@ -30,6 +30,7 @@ import {
 } from '@iota/iota-names-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { ChangeEvent, useState } from 'react';
+import toast from 'react-hot-toast';
 
 import { NameRecordData, queryKey, useNameRecord, useRegistrationNfts } from '@/hooks';
 import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTransaction';
@@ -158,8 +159,12 @@ export function CreateSubnameDialog({ name, setOpen }: CreateSubnameProps) {
             queryClient.invalidateQueries({
                 queryKey: queryKey.ownedObjects(account?.address || ''),
             });
+            toast.success(`Successfully created subname @${fullSubnameName}`);
             closeDialog();
         },
+        onError: (error) => {
+            toast.error(error.message);
+        },
     });
 
     function closeDialog() {
diff --git a/dapp/src/components/dialogs/DeleteNameDialog.tsx b/dapp/src/components/dialogs/DeleteNameDialog.tsx
@@ -22,6 +22,7 @@ import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '
 import { isSubname, normalizeIotaName } from '@iota/iota-names-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 
 import { useRegistrationNfts } from '@/hooks';
 import { queryKey } from '@/hooks/queryKey';
@@ -85,8 +86,12 @@ export function DeleteNameDialog({ nft, setOpen }: DeleteNameDialogProps) {
             queryClient.invalidateQueries({
                 queryKey: queryKey.ownedObjects(account?.address || ''),
             });
+            toast.success(`Successfully deleted expired name ${normalizeIotaName(nft.name)}`);
             closeDialog();
         },
+        onError: (error) => {
+            toast.error(error.message);
+        },
     });
 
     function closeDialog() {
diff --git a/dapp/src/components/dialogs/PersonalizeAvatarDialog.tsx b/dapp/src/components/dialogs/PersonalizeAvatarDialog.tsx
@@ -18,9 +18,10 @@ import {
     VisualAssetCard,
 } from '@iota/apps-ui-kit';
 import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
-import { isSubname } from '@iota/iota-names-sdk';
+import { isSubname, normalizeIotaName } from '@iota/iota-names-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
+import toast from 'react-hot-toast';
 
 import { BrandedAssets } from '@/components/svgs';
 import {
@@ -98,6 +99,10 @@ export function PersonalizeAvatarDialog({ name, setOpen }: PersonalizeAvatarDial
         },
         onSuccess() {
             setOpen(false);
+            toast.success(`Successfully updated avatar for ${normalizeIotaName(name)}`);
+        },
+        onError: (error) => {
+            toast.error(error.message);
         },
     });
 
diff --git a/dapp/src/components/dialogs/PurchaseNameDialog.tsx b/dapp/src/components/dialogs/PurchaseNameDialog.tsx
@@ -25,7 +25,8 @@ import {
 import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { normalizeIotaName } from '@iota/iota-names-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 
 import { NameUpdate, queryKey, useBalanceValidation, useUpdateNameTransaction } from '@/hooks';
 import { useCoreConfig } from '@/hooks/useCoreConfig';
@@ -116,11 +117,14 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
             queryClient.invalidateQueries({
                 queryKey: queryKey.ownedObjects(account?.address || ''),
             });
-
+            toast.success(`Successfully registered name ${normalizeIotaName(name)}`);
             setOpen(false);
 
             if (onPurchase) onPurchase();
         },
+        onError(error) {
+            toast.error(error.message);
+        },
     });
 
     function closeDialog() {
@@ -154,6 +158,25 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
 
     const expirationDate = getTargetExpirationDate(renewYears);
 
+    useEffect(() => {
+        if (nameRecordError) {
+            toast.error(nameRecordError.message);
+        }
+    }, [nameRecordError]);
+
+    useEffect(() => {
+        if (updateNameError) {
+            if (
+                updateNameError.message.includes(GAS_BALANCE_TOO_LOW_ID) ||
+                updateNameError.message.includes(NOT_ENOUGH_BALANCE_ID)
+            ) {
+                toast.error(GAS_BUDGET_ERROR_MESSAGES[GAS_BALANCE_TOO_LOW_ID]);
+            } else {
+                toast.error(updateNameError.message);
+            }
+        }
+    }, [updateNameError]);
+
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
diff --git a/dapp/src/components/dialogs/RenewNameDialog.tsx b/dapp/src/components/dialogs/RenewNameDialog.tsx
@@ -25,6 +25,7 @@ import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '
 import { isSubname, NameRecord, normalizeIotaName } from '@iota/iota-names-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 
 import { NameRecordData, queryKey, useNameRecord, useRegistrationNfts } from '@/hooks';
 import { useCoreConfig } from '@/hooks/useCoreConfig';
@@ -150,6 +151,10 @@ export function RenewNameDialog({ setOpen, name }: RenewDialogProps) {
             queryClient.invalidateQueries({
                 queryKey: queryKey.nameRecord(name),
             });
+            toast.success('Name renewed successfully');
+        },
+        onError(error) {
+            toast.error(error.message);
         },
     });
 
