first successful transaction complete

.prettierignore

@@ -39,3 +39,5 @@ yarn-error.log*
 CHANGELOG.md
 
 pnpm-lock.yaml
+
+/src/app/@auth/(.)confirm/page.tsx

package.json

@@ -24,6 +24,7 @@
     "@pushprotocol/restapi": "^1.6.8",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/themes": "^2.0.3",
     "@reduxjs/toolkit": "^2.1.0",

src/GlobalRedux/Features/pendingTx/pendingTxSlice.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { createSlice } from '@reduxjs/toolkit';
+
+export const pendingTxSlice = createSlice({
+  name: 'pendingTx',
+  initialState: {
+    value: {},
+  },
+  reducers: {
+    setPendingTxSlice: (state, action) => {
+      state.value = action.payload;
+    },
+  },
+});
+export const { setPendingTxSlice } = pendingTxSlice.actions;
+export default pendingTxSlice.reducer;

src/GlobalRedux/store.ts

@@ -10,7 +10,7 @@ import kernalClientSliceReducer from './Features/kernalClient/kernalClientSlice'
 import transactionsSliceReducer from './Features/transactions/transactionsSlice';
 import sheetSliceReducer from './Features/sheet/sheetSlice';
 import balanceSliceReducer from './Features/balance/balanceSlice';
-
+import pendingTxSliceReducer from './Features/pendingTx/pendingTxSlice';
 // Define RootState type
 export type RootState = {
   login: {
@@ -33,6 +33,10 @@ export type RootState = {
       value: {};
     }
   ];
+  pendingTx : {
+    value: {};
+
+  }
 };
 
 const persistConfig = {
@@ -49,6 +53,7 @@ const rootReducer = combineReducers<any>({
   transactions: transactionsSliceReducer,
   sheet: sheetSliceReducer,
   balance: balanceSliceReducer,
+  pendingTx: pendingTxSliceReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

src/app/@auth/(.)confirm/page.tsx

@@ -26,26 +26,34 @@ import { Avatar } from '@/app/components/ui/avatar';
 // link
 import Link from 'next/link';
 import useSendUsdc from '@/app/hooks/useSendUsdc';
+import Success from '@/app/components/Success/Success';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setPendingTxSlice } from '@/GlobalRedux/Features/pendingTx/pendingTxSlice';
 interface ConfirmProps {
   showConfirm: boolean;
 }
 
 export default function Page({ showConfirm }: ConfirmProps) {
   const router = useRouter();
 
+  const dispatch = useDispatch();
+
   // get search params
   const searchParams = useSearchParams();
   let payee = searchParams.get('payee');
   let amount = searchParams.get('amount');
   const { sendUsdc, transactionStatus, loading, transactionHash } =
     useSendUsdc();
 
+
+
   const handleSend = () => {
     if (!payee || !amount) return;
     console.log('calling hook');
     sendUsdc(amount, payee);
+
   };
-
   return (
     <>
       <DrawerHeader>
@@ -89,6 +97,12 @@ export default function Page({ showConfirm }: ConfirmProps) {
           {truncateEthAddress(payee)}
         </div>
       </div>
+      { loading == true || transactionStatus == true ? (<>
+      <Success transactionStatus={transactionStatus} loading={loading} transactionHash={transactionHash}/>
+      </>) : (
+        <></>
+      )}
+
       <DrawerFooter>
         <Button
           onClick={handleSend}

src/app/@auth/(.)payee/page.tsx

@@ -45,6 +45,7 @@ interface Transaction {
 }
 
 export default function Page() {
+  // get search params
   const searchParams = useSearchParams();
   let payeeAddress = searchParams.get('payeeAddress');
 
@@ -57,6 +58,7 @@ export default function Page() {
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [groupedTransactions, setGroupedTransactions] = useState<any[]>([]);
 
+  // refs
   const end = useRef<any>(null);
 
   // effect
@@ -108,6 +110,8 @@ export default function Page() {
     fetchRecentTransactions();
   }, [payeeAddress]);
 
+  useEffect(() => {}, []);
+
   return (
     <>
       <DrawerHeader>
@@ -138,7 +142,7 @@ export default function Page() {
         </div>
       )}
 
-      {groupedTransactions && (
+      {/*   {groupedTransactions && (
         <>
           <div className='overflow-auto p-4'>
             {groupedTransactions.map((month, i) => (
@@ -183,7 +187,7 @@ export default function Page() {
           </div>
 
           <div className='overflow-auto p-4'>
-            {/* End Ref */}
+           
             <div ref={end}></div>
           </div>
 
@@ -210,7 +214,7 @@ export default function Page() {
             </div>
           </DrawerFooter>
         </>
-      )}
+      )} */}
     </>
   );
 }