add confirmation text & notification

src/libs/notifications/data.ts

@@ -9,6 +9,7 @@ export interface NotificationSchema {
   approveError: { symbol: string };
   trade: { txHash: string; amount: string; from: string; to: string };
   createStrategy: { txHash: string };
+  createBatchStrategy: { txHash: string };
   pauseStrategy: { txHash: string };
   renewStrategy: { txHash: string };
   editStrategyName: { txHash: string };
@@ -82,6 +83,19 @@ export const NOTIFICATIONS_MAP: NotificationsMap = {
     showAlert: true,
     testid: 'create-strategy',
   }),
+  createBatchStrategy: (data) => ({
+    type: 'tx',
+    status: 'pending',
+    title: 'Pending Confirmation',
+    description: 'New batch of strategies are being created.',
+    successTitle: 'Success',
+    successDesc: 'New batch of strategies were successfully created.',
+    failedTitle: 'Transaction Failed',
+    failedDesc: 'New batch of strategy creation has failed.',
+    txHash: data.txHash,
+    showAlert: true,
+    testid: 'create-batch-strategy',
+  }),
   pauseStrategy: (data) => ({
     type: 'tx',
     status: 'pending',

src/pages/cart/index.tsx

@@ -13,6 +13,7 @@ import { Warning } from 'components/common/WarningMessageWithIcon';
 import { useModal } from 'hooks/useModal';
 import { carbonSDK } from 'libs/sdk';
 import { useNavigate } from '@tanstack/react-router';
+import { useNotifications } from 'hooks/useNotifications';
 import style from 'components/strategies/common/form.module.css';
 import config from 'config';
 
@@ -56,8 +57,11 @@ export const CartPage = () => {
   const strategies = useStrategyCart();
   const { user, signer } = useWagmi();
   const { openModal } = useModal();
+  const { dispatchNotification } = useNotifications();
+
   const nav = useNavigate({ from: '/cart' });
-  const [pending, setPending] = useState(false);
+  const [confirmation, setConfirmation] = useState(false);
+  const [processing, setProcessing] = useState(false);
 
   const approvalTokens = useMemo(() => {
     return getApproveTokens(strategies);
@@ -77,7 +81,7 @@ export const CartPage = () => {
     }
 
     const create = async () => {
-      setPending(true);
+      setConfirmation(true);
       try {
         const params = strategies.map(({ base, quote, order0, order1 }) => ({
           baseToken: base.address,
@@ -92,11 +96,16 @@ export const CartPage = () => {
           sellBudget: order1.balance,
         }));
         const unsignedTx = await carbonSDK.batchCreateBuySellStrategies(params);
-        await signer!.sendTransaction(unsignedTx);
+        const tx = await signer!.sendTransaction(unsignedTx);
+        setConfirmation(false);
+        setProcessing(true);
+        dispatchNotification('createBatchStrategy', { txHash: tx.hash });
+        await tx.wait();
         clearCart(user!);
         nav({ to: '/' });
       } finally {
-        setPending(false);
+        setConfirmation(false);
+        setProcessing(false);
       }
     };
 
@@ -160,9 +169,13 @@ export const CartPage = () => {
       </label>
       <Button
         type="submit"
-        disabled={!user || approval.isPending || funds.isPending || pending}
+        disabled={!user || approval.isPending || funds.isPending}
+        loading={confirmation || processing}
+        loadingChildren={
+          confirmation ? 'Waiting for Confirmation' : 'Processing'
+        }
         variant="success"
-        className="place-self-center"
+        className="mt-20 place-self-center"
       >
         Sign all strategies
       </Button>