moved kernal client to redux store

links.md

@@ -34,3 +34,8 @@ https://www.0xdev.co/how-to-send-erc-20-tokens-to-another-address-in-react-with-
 
 Next Js modals
 https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals
+
+# Search Params
+
+Next JS Search Params
+https://stackoverflow.com/questions/76592804/how-to-access-query-parameters-in-next-js-13-4-with-the-new-app-router

package.json

@@ -41,6 +41,7 @@
     "redux": "^5.0.1",
     "reverse-mirage": "^1.0.3",
     "tailwind-merge": "^2.1.0",
+    "truncate-eth-address": "^1.0.2",
     "viem": "^2.5.0",
     "wagmi": "^2.5.2",
     "web3": "^4.4.0"

src/GlobalRedux/Features/kernalClient/kernalClientSlice.tsx

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

src/GlobalRedux/Features/login/loginSlice.tsx

@@ -1,20 +1,20 @@
-'use client'
+'use client';
 
-import { createSlice } from "@reduxjs/toolkit"
+import { createSlice } from '@reduxjs/toolkit';
 
 export const loginSlice = createSlice({
-    name: "login",
-    initialState: {
-        value: false,
+  name: 'login',
+  initialState: {
+    value: false,
+  },
+  reducers: {
+    login: (state) => {
+      state.value = true;
     },
-    reducers: {
-        login: (state) => {
-            state.value = true
-        },
-        logout: (state) => {
-            state.value = false
-        },
+    logout: (state) => {
+      state.value = false;
     },
+  },
 });
 export const { login, logout } = loginSlice.actions;
-export default loginSlice.reducer;
+export default loginSlice.reducer;

src/GlobalRedux/store.ts

@@ -4,11 +4,13 @@ import { configureStore } from '@reduxjs/toolkit';
 import loginReducer from './Features/login/loginSlice';
 import addressReducer from './Features/address/addressSlice';
 import searchReducer from './Features/search/searchSlice';
+import kernalClientSliceReducer from './Features/kernalClient/kernalClientSlice';
 export const store = configureStore({
   reducer: {
     login: loginReducer,
     address: addressReducer,
     search: searchReducer,
+    kernalClient: kernalClientSliceReducer,
   },
 });
 

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

@@ -6,7 +6,6 @@ import useGetAddress from '@/app/hooks/useGetAddress';
 import Link from 'next/link';
 
 // Layout
-import Sheet from '@/app/components/Layouts/Sheet';
 
 export default function Page() {
   const [payee, setPayee] = useState(
@@ -50,3 +49,6 @@ export default function Page() {
     </>
   );
 }
+
+// Add address check
+//https://viem.sh/docs/utilities/isAddress

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

@@ -11,6 +11,9 @@ import { useState } from 'react';
 import useGetAddress from '@/app/hooks/useGetAddress';
 import Sheet from '@/app/components/Layouts/Sheet';
 
+// address
+import truncateEthAddress from 'truncate-eth-address';
+
 const config = {
   apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
   network: Network.MATIC_MUMBAI,
@@ -34,14 +37,17 @@ export default function Page() {
 
   const searchParams = useSearchParams();
 
-  const payee = searchParams.get('payee');
-
-  /*  const { payee } = router.query; */
+  let payee = searchParams.get('payee');
+  payee = truncateEthAddress(payee);
 
   return (
     <>
-      <h1>Send Page</h1>
-      <p>Route address: {address}</p>
+      <div className='grid'>
+        <div className='my-4'>
+          <p className='my-4 text-center text-xl text-gray-300'>Send</p>
+        </div>
+      </div>
+
       <p>Payee: {payee}</p>
       {/* <button onClick={getData} >get data</button> */}
 

src/app/components/SendUsdc/SendUsdc Wagmi.tsx

@@ -0,0 +1,63 @@
+// Wagmi
+import { erc20ABI, useWaitForTransaction } from "wagmi";
+
+// ZeroDev
+import { usePrepareSendUserOperation, useSendUserOperation } from "@zerodev/wagmi";
+
+// Viem
+import { encodeFunctionData, parseUnits } from "viem";
+import { useRouter } from "next/router";
+
+export default function SendUsdc() {
+
+	const router = useRouter();
+
+	const { payee } = router.query;
+
+	// USDC contract address
+	const usdc = "0x9999f7Fea5938fD3b1E26A12c3f2fb024e194f97";
+
+	// Encode the data with Viem Function
+	// Requires the abi of the contract, the function name, and the arguments address and amount
+	const encoded = encodeFunctionData({
+		abi: erc20ABI,
+		functionName: "transfer",
+		args: [payee as `0x${string}`, parseUnits("1", 6)],
+	});
+
+	// Prepare the transaction with Wagmi
+	const { config } = usePrepareSendUserOperation({
+		to: usdc,
+		data: encoded,
+	});
+	// Send the transaction with Wagmi
+	const { sendUserOperation, data } = useSendUserOperation(config);
+
+	// Wait for the transaction executed
+	useWaitForTransaction({
+		hash: data?.hash,
+		enabled: !!data,
+		onSuccess(data) {
+			console.log("Transaction was successful.");
+		},
+	});
+
+	// Send transaction function
+	const sendTx = async () => {
+		try {
+			// check if the operation exists
+			sendUserOperation && sendUserOperation();
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+	return (
+		<button
+			className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+			onClick={() => sendTx()}
+		>
+			Send USDC to { payee }
+		</button>
+	);
+}

src/app/components/SendUsdc/SendUsdc.tsx

@@ -1,63 +1,61 @@
 // Wagmi
-import { erc20ABI, useWaitForTransaction } from "wagmi";
+import { erc20ABI, useWaitForTransaction } from 'wagmi';
 
 // ZeroDev
-import { usePrepareSendUserOperation, useSendUserOperation } from "@zerodev/wagmi";
+import {
+  usePrepareSendUserOperation,
+  useSendUserOperation,
+} from '@zerodev/wagmi';
 
 // Viem
-import { encodeFunctionData, parseUnits } from "viem";
-import { useRouter } from "next/router";
-
-export default function SendUsdc() {
-
-	const router = useRouter();
-
-	const { payee } = router.query;
-
-	// USDC contract address
-	const usdc = "0x9999f7Fea5938fD3b1E26A12c3f2fb024e194f97";
-
-	// Encode the data with Viem Function
-	// Requires the abi of the contract, the function name, and the arguments address and amount
-	const encoded = encodeFunctionData({
-		abi: erc20ABI,
-		functionName: "transfer",
-		args: [payee as `0x${string}`, parseUnits("1", 6)],
-	});
-
-	// Prepare the transaction with Wagmi
-	const { config } = usePrepareSendUserOperation({
-		to: usdc,
-		data: encoded,
-	});
-	// Send the transaction with Wagmi
-	const { sendUserOperation, data } = useSendUserOperation(config);
-
-	// Wait for the transaction executed
-	useWaitForTransaction({
-		hash: data?.hash,
-		enabled: !!data,
-		onSuccess(data) {
-			console.log("Transaction was successful.");
-		},
-	});
-
-	// Send transaction function
-	const sendTx = async () => {
-		try {
-			// check if the operation exists
-			sendUserOperation && sendUserOperation();
-		} catch (error) {
-			console.log(error);
-		}
-	};
-
-	return (
-		<button
-			className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-			onClick={() => sendTx()}
-		>
-			Send USDC to { payee }
-		</button>
-	);
-}
+import { encodeFunctionData, parseUnits } from 'viem';
+import { useRouter } from 'next/router';
+
+export default async async function SendUsdc() {
+  const router = useRouter();
+
+  const { payee } = router.query;
+
+  // USDC contract address
+  const usdc = '0x9999f7Fea5938fD3b1E26A12c3f2fb024e194f97';
+
+  // Encode the data with Viem Function
+  // Requires the abi of the contract, the function name, and the arguments address and amount
+  const encoded = encodeFunctionData({
+    abi: erc20ABI,
+    functionName: 'transfer',
+    args: [payee as `0x${string}`, parseUnits('1', 6)],
+  });
+
+  const userOpHash = kernelClient.sendUserOperation({
+    userOperation: {
+      callData: await kernelClient.account.encodeCallData({
+        to: contractAddress,
+        value: BigInt(0),
+        data: encodeFunctionData({
+          abi: contractABI,
+          functionName: 'mint',
+          args: [accountAddress],
+        }),
+      }),
+    },
+  });
+
+  // Send transaction function
+  const sendTx = async () => {
+    try {
+      // check if the operation exists
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <button
+      className='rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700'
+      onClick={() => sendTx()}
+    >
+      Send USDC to {payee}
+    </button>
+  );
+}