From c1281e2d5476a8237e30f65c072d6a015e1f965b Mon Sep 17 00:00:00 2001 From: Ste Date: Sun, 7 Apr 2024 12:34:57 +0100 Subject: [PATCH] changed blockchain from sepolia to base --- src/app/@auth/(.)receive/page.tsx | 33 +- src/app/@auth/(.)transaction/page.tsx | 37 +-- src/app/components/Balance/Balance copy.tsx | 6 +- src/app/components/Balance/Balance.tsx | 6 +- src/app/components/CreditCard/CreditCard.tsx | 148 ++++----- .../RecentPayee.tsx/RecentPayee.tsx | 129 ++++---- src/app/components/SendUsdc/SendUsdc copy.tsx | 2 +- src/app/components/SendUsdc/SendUsdc.tsx | 4 +- src/app/components/Success/Success.tsx | 21 +- src/app/config.ts | 6 +- src/app/embedded-wallet.tsx | 289 +++++++++--------- src/app/home/page.tsx | 38 +-- src/app/hooks/useGetBalance.tsx | 31 +- src/app/hooks/useGetRecentTransactions.tsx | 19 +- src/app/hooks/useGetTokenBalance.tsx | 18 +- src/app/hooks/useSendUsdc.tsx | 4 +- src/app/layout.tsx | 20 +- src/app/load-assets.tsx | 243 +++++++-------- src/app/notification/route.ts | 4 +- src/app/utils/useCreateKernal.tsx | 6 +- 20 files changed, 520 insertions(+), 544 deletions(-) diff --git a/src/app/@auth/(.)receive/page.tsx b/src/app/@auth/(.)receive/page.tsx index 637ff9c..43c8e0b 100644 --- a/src/app/@auth/(.)receive/page.tsx +++ b/src/app/@auth/(.)receive/page.tsx @@ -14,25 +14,46 @@ import Qr from '@/app/components/Qr/Qr'; import { DrawerHeader, DrawerTitle } from '@/app/components/ui/drawer'; import { motion } from 'framer-motion'; +import truncateEthAddress from 'truncate-eth-address'; + +// Icons +import { Copy } from 'lucide-react'; export default function Page() { const address = useSelector((state: string) => state.address.value); return ( <> - + Receive - +
+ navigator.clipboard.writeText(address as string)} + whileTap={{ + scale: 0.95, + }} + transition={{ + duration: 0.3, + }} + > + {truncateEthAddress(address as string)}{' '} + + + +
diff --git a/src/app/@auth/(.)transaction/page.tsx b/src/app/@auth/(.)transaction/page.tsx index ec567fd..cd81d7b 100644 --- a/src/app/@auth/(.)transaction/page.tsx +++ b/src/app/@auth/(.)transaction/page.tsx @@ -39,7 +39,9 @@ export default function Page() { let hash = searchParams.get('hash'); - const transactionState = useSelector((state: any) => state.transactions.value); + const transactionState = useSelector( + (state: any) => state.transactions.value + ); const address = useSelector((state: any) => state.address.value); @@ -57,44 +59,33 @@ export default function Page() { // Ensure to lower case both sides to match const contact = contactsState.find( (element: Contact) => - element.address?.toLocaleLowerCase() == - payeeAddress.toLocaleLowerCase() + element.address?.toLocaleLowerCase() == payeeAddress.toLocaleLowerCase() ); return contact ? contact.name : truncateEthAddress(payeeAddress); }; + useEffect(() => {}, [hash]); useEffect(() => { - - - }, [hash]) - - - - - useEffect(() => { - const filteredTransaction = transactionState.filter( - (tx: any) => - tx.blockHash.toLocaleLowerCase() == hash + (tx: any) => tx.blockHash.toLocaleLowerCase() == hash ); setTransaction(filteredTransaction[0]); setPayeeName(filteredTransaction.to); - }, [transactionState, hash]); return ( <> - {transaction && ( + {transaction && (
@@ -124,7 +115,7 @@ export default function Page() { }} href={{ pathname: '/payee', - query: { payeeAddress: payeeName } + query: { payeeAddress: payeeName }, }} >
- )} + )} ); diff --git a/src/app/components/Balance/Balance copy.tsx b/src/app/components/Balance/Balance copy.tsx index 670700f..532361a 100644 --- a/src/app/components/Balance/Balance copy.tsx +++ b/src/app/components/Balance/Balance copy.tsx @@ -21,8 +21,6 @@ export default function Balance() { // hooks const address = useSelector((state: RootState) => state.address.value); - - const checkBalance = async () => { try { console.log('balance', result?.data?.formatted); @@ -30,7 +28,7 @@ export default function Balance() { const result = useBalance({ // @ts-ignore address: address, - token: '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8', + token: '0x036CbD53842c5426634e7929541eC2318f3dCF7e', }); // @ts-ignore dispatch(setBalance(result?.data?.formatted)); @@ -48,7 +46,7 @@ export default function Balance() { // Get the balance from Redux const balanceState = useSelector((state: RootState) => state.balance.value); console.log('balanceState', balanceState); - + // Render the balance return
${balanceState}
; } diff --git a/src/app/components/Balance/Balance.tsx b/src/app/components/Balance/Balance.tsx index 670700f..532361a 100644 --- a/src/app/components/Balance/Balance.tsx +++ b/src/app/components/Balance/Balance.tsx @@ -21,8 +21,6 @@ export default function Balance() { // hooks const address = useSelector((state: RootState) => state.address.value); - - const checkBalance = async () => { try { console.log('balance', result?.data?.formatted); @@ -30,7 +28,7 @@ export default function Balance() { const result = useBalance({ // @ts-ignore address: address, - token: '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8', + token: '0x036CbD53842c5426634e7929541eC2318f3dCF7e', }); // @ts-ignore dispatch(setBalance(result?.data?.formatted)); @@ -48,7 +46,7 @@ export default function Balance() { // Get the balance from Redux const balanceState = useSelector((state: RootState) => state.balance.value); console.log('balanceState', balanceState); - + // Render the balance return
${balanceState}
; } diff --git a/src/app/components/CreditCard/CreditCard.tsx b/src/app/components/CreditCard/CreditCard.tsx index 73a47b7..11a5234 100644 --- a/src/app/components/CreditCard/CreditCard.tsx +++ b/src/app/components/CreditCard/CreditCard.tsx @@ -1,38 +1,33 @@ -import useGetAddress from "@/app/hooks/useGetAddress"; -import Balance from "../Balance/Balance"; -import { HoverBorderGradient } from "../ui/hover-border-gradient"; -import { TextGenerateEffect } from "../ui/text-generate-effect"; -import truncateEthAddress from "truncate-eth-address"; -import { motion } from "framer-motion"; -import { usePrivySmartAccount } from "@zerodev/privy"; -import useGetBalance from "@/app/hooks/useGetBalance"; -import { useDispatch, useSelector } from "react-redux"; - -import { useEffect, useState } from "react"; -import { setBalance } from "@/GlobalRedux/Features/balance/balanceSlice"; -import axios from "axios"; -import { formatUnits } from "viem"; - - +import useGetAddress from '@/app/hooks/useGetAddress'; +import Balance from '../Balance/Balance'; +import { HoverBorderGradient } from '../ui/hover-border-gradient'; +import { TextGenerateEffect } from '../ui/text-generate-effect'; +import truncateEthAddress from 'truncate-eth-address'; +import { motion } from 'framer-motion'; +import { usePrivySmartAccount } from '@zerodev/privy'; +import useGetBalance from '@/app/hooks/useGetBalance'; +import { useDispatch, useSelector } from 'react-redux'; + +import { useEffect, useState } from 'react'; +import { setBalance } from '@/GlobalRedux/Features/balance/balanceSlice'; +import axios from 'axios'; +import { formatUnits } from 'viem'; +import { Copy } from 'lucide-react'; export default function CreditCard() { - - - const [balanceToShow, setBalanceToShow] = useState('') + const [balanceToShow, setBalanceToShow] = useState(''); - const address = useGetAddress(); + const address = useGetAddress(); - const {user } = usePrivySmartAccount() + const { user } = usePrivySmartAccount(); - const reduxBalance = useSelector((state: any) => state.balance.value) + const reduxBalance = useSelector((state: any) => state.balance.value); + //const hookBalance = useGetBalance(address as string) - - //const hookBalance = useGetBalance(address as string) + const dispatch = useDispatch(); - const dispatch = useDispatch() - -/* + /* useEffect(() => { console.log('redux balance', reduxBalance) console.log('hook balance', hookBalance) @@ -45,56 +40,63 @@ export default function CreditCard() { }, [hookBalance, reduxBalance]) */ - useEffect(() => { - axios.get( - `https://api-sepolia.etherscan.io/api?module=account&action=tokenbalance&contractaddress=0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8&address=${address}&tag=latest&apikey=F7A22CIQFVT5UDPBHKFN8GXYN9EXTS4G65` - ).then((r) => { - console.log('axios balance', r.data) - setBalanceToShow(r.data.result) - + useEffect(() => { + axios + .get( + `https://api-sepolia.basescan.org/api?module=account&action=tokenbalance&contractaddress=0x036CbD53842c5426634e7929541eC2318f3dCF7e&address=${address}&tag=latest&apikey=6VRQH98BTKVZYXU68YJYWVX3EC2ZP6UEFV` + ) + .then((r) => { + console.log('axios balance', r.data); + setBalanceToShow(r.data.result); + dispatch(setBalance(r.data.result)); console.log('balance to show', balanceToShow); - }).catch((e) => { - console.log('axios balance error', e) }) - }, []) - - useEffect(() => { - - - }, [balanceToShow]) - - return ( - <> - { + console.log('axios balance error', e); + }); + }, []); + + useEffect(() => {}, [balanceToShow]); + + return ( + <> + + - -
- <> +
+ <> +
+
+ ${reduxBalance && formatUnits(reduxBalance, 6)} +
+
+
+ {user?.google?.name}
- -
- ${reduxBalance && formatUnits(reduxBalance, 6)} -
-
-
- {user?.google?.name} -
-
- {truncateEthAddress(address as string)} +
navigator.clipboard.writeText(address as string)} + className='text-muted-foreground mb-auto grid h-full content-end justify-start text-right text-base' + > +
+ {truncateEthAddress(address as string)} + + +
- - - - ); -} \ No newline at end of file +
+ + + + ); +} diff --git a/src/app/components/RecentPayee.tsx/RecentPayee.tsx b/src/app/components/RecentPayee.tsx/RecentPayee.tsx index f9117f1..dbd1cf9 100644 --- a/src/app/components/RecentPayee.tsx/RecentPayee.tsx +++ b/src/app/components/RecentPayee.tsx/RecentPayee.tsx @@ -20,74 +20,96 @@ import useGetAddress from '@/app/hooks/useGetAddress'; import { Card, CardContent, CardHeader } from '../ui/card'; // redux -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { RootState } from '@/GlobalRedux/store'; - import { Contact } from '@/app/types/types'; +import { Contact } from '@/app/types/types'; import useFindPayeeName from '@/app/hooks/useFindPayeeName'; +import { setTransactions } from '@/GlobalRedux/Features/transactions/transactionsSlice'; - function Payee ({payee, contactsState} : {payee: string, payees: any, contactsState: Contact[]}) { - +function Payee({ + payee, + contactsState, +}: { + payee: string; + payees: any; + contactsState: Contact[]; +}) { // Find the contact in contactsState array with matching address - const matchedContact = contactsState.find((contact: Contact) => contact.address === payee); + const matchedContact = contactsState.find( + (contact: Contact) => contact.address === payee + ); // If a matching contact is found, use its name, otherwise use truncated payee address - const payeeName = matchedContact ? matchedContact.name : truncateEthAddress(payee); - - return ( - <> - -
- -
-
- -
-
- {useFindPayeeName(payee, contactsState)} -
-
-
+ const payeeName = matchedContact + ? matchedContact.name + : truncateEthAddress(payee); + + return ( + <> +
+ +
+
+ +
+
+ {useFindPayeeName(payee, contactsState)}
- +
- - ); - } +
+ +
+ + ); +} export default function RecentPayee(): JSX.Element { - // payees const [payees, setPayees] = useState([]); // users address const address: string | undefined = useGetAddress(); - const contactsState = useSelector( - (state: RootState) => state.contacts.value - ); + const contactsState = useSelector((state: RootState) => state.contacts.value); + + const transactionstate = useSelector( + (state: RootState) => state.transactions.value + ); + + const dispatch = useDispatch(); - const transactionstate = useSelector( - (state: RootState) => state.transactions.value - ); - - // get recent transactions useEffect(() => { + const getData = async () => { + try { + const recentTransactions = await useGetRecentTransactions(address); + dispatch(setTransactions(recentTransactions)); + console.log( + 'axios transactions request in payee page', + recentTransactions + ); + } catch (error) { + console.error('Error while getting recent transactions:', error); + } + }; - const uniquePayees = Array.from( - new Set( - transactionstate - .map((transaction) => transaction.to || transaction.from) - .filter( - (payee) => - payee.toLocaleLowerCase() !== address.toLocaleLowerCase() - ) - ) - ); - console.log('uniquePayees', uniquePayees); - console.log('address', address); - /* uniquePayees.filter((payee) => payee == address); */ - setPayees(uniquePayees); + getData(); + }, []); + + // get recent transactions + useEffect(() => { + const uniquePayees = Array.from( + new Set( + transactionstate + .map((transaction) => transaction.to || transaction.from) + .filter( + (payee) => payee.toLocaleLowerCase() !== address.toLocaleLowerCase() + ) + ) + ); + console.log('uniquePayees', uniquePayees); + console.log('address', address); + /* uniquePayees.filter((payee) => payee == address); */ + setPayees(uniquePayees); /* const fetchRecentTransactions = async () => { try { const recentTransactions = await useGetRecentTransactions(address); @@ -110,7 +132,6 @@ export default function RecentPayee(): JSX.Element { fetchRecentTransactions(); */ }, [transactionstate, address, contactsState]); - return ( <> {payees.length > 0 ? ( @@ -119,11 +140,7 @@ export default function RecentPayee(): JSX.Element { Recent Transfers
{payees.map((payee, i) => ( - + ))} ) : ( diff --git a/src/app/components/SendUsdc/SendUsdc copy.tsx b/src/app/components/SendUsdc/SendUsdc copy.tsx index b32d62f..240e14c 100644 --- a/src/app/components/SendUsdc/SendUsdc copy.tsx +++ b/src/app/components/SendUsdc/SendUsdc copy.tsx @@ -47,7 +47,7 @@ export default function SendUsdc() { // USDC contract address //const usdc = '0x9999f7Fea5938fD3b1E26A12c3f2fb024e194f97'; - const usdc = '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8'; + const usdc = '0x036CbD53842c5426634e7929541eC2318f3dCF7e'; useEffect(() => { const setUp = async () => { diff --git a/src/app/components/SendUsdc/SendUsdc.tsx b/src/app/components/SendUsdc/SendUsdc.tsx index e465819..90ab265 100644 --- a/src/app/components/SendUsdc/SendUsdc.tsx +++ b/src/app/components/SendUsdc/SendUsdc.tsx @@ -51,7 +51,7 @@ export default function SendUsdc() { // USDC contract address //const usdc = '0x9999f7Fea5938fD3b1E26A12c3f2fb024e194f97'; - const usdc = '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8'; + const usdc = '0x036CbD53842c5426634e7929541eC2318f3dCF7e'; useEffect(() => { //inputRef.current.focus(); @@ -63,8 +63,6 @@ export default function SendUsdc() { } }, [usdcAmount]); - - return ( <>
diff --git a/src/app/components/Success/Success.tsx b/src/app/components/Success/Success.tsx index da99b57..fda2710 100644 --- a/src/app/components/Success/Success.tsx +++ b/src/app/components/Success/Success.tsx @@ -52,10 +52,7 @@ export default function Success({ if (transactionStatus || loading) { setDrawerOpen(true); } - - - - }, [transactionStatus, loading, transactionHash]) + }, [transactionStatus, loading, transactionHash]); useEffect(() => { if (transactionStatus) { @@ -65,7 +62,6 @@ export default function Success({ const recentTransactions = await useGetRecentTransactions(address); dispatch(setTransactions(recentTransactions)); console.log('got data', recentTransactions); - } catch (error) { console.error('Error while getting recent transactions:', error); } @@ -75,7 +71,7 @@ export default function Success({ axios .get( - `https://api-sepolia.etherscan.io/api?module=account&action=tokenbalance&contractaddress=0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8&address=${address}&tag=latest&apikey=F7A22CIQFVT5UDPBHKFN8GXYN9EXTS4G65` + `https://api-basescan.etherscan.io/api?module=account&action=tokenbalance&contractaddress=0x036CbD53842c5426634e7929541eC2318f3dCF7e&address=${address}&tag=latest&apikey=6VRQH98BTKVZYXU68YJYWVX3EC2ZP6UEFV` ) .then((r) => { console.log('axios balance', r.data); @@ -84,27 +80,20 @@ export default function Success({ setTimeout(() => { setDrawerOpen(false); router.push(`/transaction?hash=${transactionHash}`); - - }, 1000); }) .catch((e) => { console.log('axios balance error', e); }); - - } }, [transactionStatus]); - - - return ( <> {/*
diff --git a/src/app/config.ts b/src/app/config.ts index 24210ef..48d69be 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,11 +1,11 @@ 'use client' import { http, createConfig } from 'wagmi' -import { sepolia } from 'wagmi/chains' +import { baseSepolia } from 'wagmi/chains' const config = createConfig({ - chains: [sepolia], + chains: [baseSepolia], transports: { - [sepolia.id]: http(), + [baseSepolia.id]: http(), }, }); diff --git a/src/app/embedded-wallet.tsx b/src/app/embedded-wallet.tsx index f9189ed..30656ec 100644 --- a/src/app/embedded-wallet.tsx +++ b/src/app/embedded-wallet.tsx @@ -1,164 +1,153 @@ -'use client' -import { usePrivy, useWallets } from '@privy-io/react-auth' -import { useState } from 'react' -import { createWalletClient, custom, isAddress, parseEther } from 'viem' -import { sepolia } from 'viem/chains' +'use client'; +import { usePrivy, useWallets } from '@privy-io/react-auth'; +import { useState } from 'react'; +import { createWalletClient, custom, isAddress, parseEther } from 'viem'; +import { baseSepolia } from 'viem/chains'; const EmbeddedWallet = () => { - const { signMessage, sendTransaction, exportWallet } = usePrivy() - const { wallets } = useWallets() - const embeddedWallet = wallets.find( - (wallet) => wallet.walletClientType === 'privy' - ) + const { signMessage, sendTransaction, exportWallet } = usePrivy(); + const { wallets } = useWallets(); + const embeddedWallet = wallets.find( + (wallet) => wallet.walletClientType === 'privy' + ); - // Signature state - const [signature, setSignature] = useState() + // Signature state + const [signature, setSignature] = useState(); - // Transaction state - const [recipientAddress, setRecipientAddress] = useState() - const [txHash, setTxHash] = useState() - const [txIsLoading, setTxIsLoading] = useState(false) + // Transaction state + const [recipientAddress, setRecipientAddress] = useState< + string | undefined + >(); + const [txHash, setTxHash] = useState(); + const [txIsLoading, setTxIsLoading] = useState(false); - const onSign = async () => { - try { - const _signature = await signMessage( - 'I logged into the Privy PWA demo and signed this message!' - ) - setSignature(_signature) - } catch (e) { - console.error('Signature failed with error ', e) - } + const onSign = async () => { + try { + const _signature = await signMessage( + 'I logged into the Privy PWA demo and signed this message!' + ); + setSignature(_signature); + } catch (e) { + console.error('Signature failed with error ', e); } + }; - const onTransfer = async () => { - if (!embeddedWallet) return - try { - // Switch network to Base Goerli - await embeddedWallet.switchChain(sepolia.id) - // Get an EIP1193 provider from the embedded wallet - const provider = await embeddedWallet.getEthereumProvider() - // From the EIP1193 provider, create a viem wallet client - const walletClient = createWalletClient({ - account: embeddedWallet.address as `0x${string}`, - chain: sepolia, - transport: custom(provider), - }) + const onTransfer = async () => { + if (!embeddedWallet) return; + try { + // Switch network to Base Goerli + await embeddedWallet.switchChain(baseSepolia.id); + // Get an EIP1193 provider from the embedded wallet + const provider = await embeddedWallet.getEthereumProvider(); + // From the EIP1193 provider, create a viem wallet client + const walletClient = createWalletClient({ + account: embeddedWallet.address as `0x${string}`, + chain: baseSepolia, + transport: custom(provider), + }); - // Send transaction using the viem wallet client. Alternatively, you - // may use Privy's `sendTransaction` method. This is just an example - // of the many ways to send a transaction from the wallet. - setTxIsLoading(true) - const _txHash = await walletClient.sendTransaction({ - account: embeddedWallet.address as `0x${string}`, - to: recipientAddress as `0x${string}`, - value: parseEther('0.004'), - }) - setTxHash(_txHash) - } catch (e) { - console.error('Transfer failed with error ', e) - } - setTxIsLoading(false) + // Send transaction using the viem wallet client. Alternatively, you + // may use Privy's `sendTransaction` method. This is just an example + // of the many ways to send a transaction from the wallet. + setTxIsLoading(true); + const _txHash = await walletClient.sendTransaction({ + account: embeddedWallet.address as `0x${string}`, + to: recipientAddress as `0x${string}`, + value: parseEther('0.004'), + }); + setTxHash(_txHash); + } catch (e) { + console.error('Transfer failed with error ', e); } + setTxIsLoading(false); + }; - return ( - <> - -

- Sign a message -

-

- Sign a message to verify you've used this demo! -

- -