diff --git a/src/app/@auth/(.)payee/page.tsx b/src/app/@auth/(.)payee/page.tsx index b0cb4f1..1d61146 100644 --- a/src/app/@auth/(.)payee/page.tsx +++ b/src/app/@auth/(.)payee/page.tsx @@ -3,7 +3,11 @@ // Next import { useRouter, useSearchParams } from 'next/navigation'; // drawer -import { DrawerFooter, DrawerHeader, DrawerTitle } from '@/app/components/ui/drawer'; +import { + DrawerFooter, + DrawerHeader, + DrawerTitle, +} from '@/app/components/ui/drawer'; //avatar import { Avatar } from '@/app/components/ui/avatar'; // truc address @@ -11,13 +15,13 @@ import truncateEthAddress from 'truncate-eth-address'; // backbutton import BackButton from '@/app/components/Navigation/BackButton/BackButton'; // react -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState } from 'react'; // hooks import useGetRecentTransactions from '@/app/hooks/useGetRecentTransactions'; import useGetAddress from '@/app/hooks/useGetAddress'; // motion -import {motion} from 'framer-motion'; +import { motion } from 'framer-motion'; // redux import { useDispatch } from 'react-redux'; import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice'; @@ -30,7 +34,7 @@ import Link from 'next/link'; // date //import { format, parseISO } from 'date-fns'; -import { format, parseISO, set } from 'date-fns'; +import { format, parseISO, set } from 'date-fns'; interface Transaction { to: string; from: string; @@ -38,29 +42,26 @@ interface Transaction { metadata: { blockTimestamp: string; }; - } - export default function Page() { const searchParams = useSearchParams(); let payeeAddress = searchParams.get('payeeAddress'); - + // hooks const dispatch = useDispatch(); const address = useGetAddress(); const router = useRouter(); // state - const [ transactions, setTransactions ] = useState([]); + const [transactions, setTransactions] = useState([]); const [groupedTransactions, setGroupedTransactions] = useState([]); const end = useRef(null); - // effect useEffect(() => { - end.current.scrollIntoView({}) + end.current.scrollIntoView({}); const fetchRecentTransactions = async () => { const recentTransactions = await useGetRecentTransactions(address); @@ -100,18 +101,12 @@ export default function Page() { ); setGroupedTransactions(arrayOfMonthArrays); console.log('groupedTransactionsByMonth', arrayOfMonthArrays); - } - - }; fetchRecentTransactions(); }, [payeeAddress]); - - - return ( <> @@ -135,7 +130,10 @@ export default function Page() {
{groupedTransactions.map((month, i) => (
-
+

{month.monthName}

@@ -177,9 +175,6 @@ export default function Page() {
{ - dispatch(setSheet(true)); - }} href={{ pathname: '/send', query: { payee: payeeAddress }, diff --git a/src/app/@auth/(.)search/page.tsx b/src/app/@auth/(.)search/page.tsx index 964851b..9009c59 100644 --- a/src/app/@auth/(.)search/page.tsx +++ b/src/app/@auth/(.)search/page.tsx @@ -27,8 +27,7 @@ import { DrawerHeader, DrawerTitle } from '@/app/components/ui/drawer'; import { isAddress } from 'viem'; // icons -import { QrCode } from 'lucide-react'; -import { X } from 'lucide-react'; +import { QrCode, X, Send } from 'lucide-react'; import RecentPayee from '@/app/components/RecentPayee.tsx/RecentPayee'; // motion @@ -76,16 +75,16 @@ export default function Page() {
-
+
setPayee(e.target.value)} value={payee} - id='search-input' + id='search-input relative' className='h-9 w-full' placeholder='Search an Address' type='text' /> -
+
{payee !== '' && ( setPayee('')} - className='' + className='pr-4 ' > - + setPayee('')} + /> )} @@ -108,28 +109,54 @@ export default function Page() {
{isTrue ? ( <> - {/*
- + - - -
*/} + + + + + ) : ( <> - {payee != '' && ( -
- Please enter a valid address -
- )} + + {payee != '' && ( +
+ Please enter a valid address +
+ )} + )} @@ -145,7 +172,7 @@ export default function Page() { exit={{ opacity: 0 }} className='w-full' > -
+ {/*
-
+
*/} {/* Scan a Qr code */}
{ diff --git a/src/app/@auth/(.)send/page.tsx b/src/app/@auth/(.)send/page.tsx index ab788fc..1cf82cf 100644 --- a/src/app/@auth/(.)send/page.tsx +++ b/src/app/@auth/(.)send/page.tsx @@ -36,7 +36,10 @@ export default function Page() {

{payee && truncateEthAddress(payee)}

- +
@@ -44,7 +47,7 @@ export default function Page() {
-
+
diff --git a/src/app/components/KeyPad/KeyPad.tsx b/src/app/components/KeyPad/KeyPad.tsx new file mode 100644 index 0000000..4677219 --- /dev/null +++ b/src/app/components/KeyPad/KeyPad.tsx @@ -0,0 +1,100 @@ +import { useButton } from '@react-aria/button'; +import { FocusRing } from '@react-aria/focus'; +import { motion, useAnimation } from 'framer-motion'; +import { ArrowLeft } from 'lucide-react'; +import { useEffect, useRef, useState } from 'react'; + +interface KeyPadProps { + setUsdcAmount: (usdcAmount: string) => void; + usdcAmount: string; +} + +export default function KeyPad({ setUsdcAmount, usdcAmount }: KeyPadProps) { + let [nums, setNums] = useState([]); + + function handleClick(num: any) { + setNums([...nums, num]); + } + + useEffect(() => { + setUsdcAmount(nums.join('')); + }, [nums]); + + return ( +
+
+ ${usdcAmount || 0} +
+
+ + + + + + + + + + + + +
+
+ ); +} + +function Button({ + onClick = () => {}, + children, +}: { + onClick: () => void; + children: React.ReactNode; +}) { + let ref = useRef(); + let controls = useAnimation(); + + let { buttonProps } = useButton( + { + onPressStart: () => { + controls.stop(); + controls.set({ background: '#757376' }); + }, + onPressEnd: () => { + controls.start({ + background: '#353336', + transition: { duration: 0.4 }, + }); + }, + onPress: () => { + onClick(); + controls.start({ + background: [null, '#353336'], + transition: { duration: 0.4 }, + }); + }, + }, + ref + ); + + return ( + + + {children} + + + ); +} diff --git a/src/app/components/Navigation/BackButton/BackButton.tsx b/src/app/components/Navigation/BackButton/BackButton.tsx index de9aaa6..0ccd933 100644 --- a/src/app/components/Navigation/BackButton/BackButton.tsx +++ b/src/app/components/Navigation/BackButton/BackButton.tsx @@ -3,9 +3,10 @@ import { Undo2 } from 'lucide-react'; interface BackButtonProps { routehome?: boolean; + onClick?: () => void; } -export default function BackButton({ routehome }: BackButtonProps) { +export default function BackButton({ routehome, onClick }: BackButtonProps) { return (
diff --git a/src/app/components/SendUsdc/SendUsdc.tsx b/src/app/components/SendUsdc/SendUsdc.tsx index 1429ad3..6c6b8d2 100644 --- a/src/app/components/SendUsdc/SendUsdc.tsx +++ b/src/app/components/SendUsdc/SendUsdc.tsx @@ -1,37 +1,29 @@ 'use client'; // Viem -import { encodeFunctionData, parseUnits, erc20Abi, parseEther } from 'viem'; +import { encodeFunctionData, parseUnits, erc20Abi } from 'viem'; // Redux -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; // Next import { useSearchParams } from 'next/navigation'; -// Loading -import { RotatingLines } from 'react-loader-spinner'; - // React -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; import truncateEthAddress from 'truncate-eth-address'; import Success from '@/app/components/Success/Success'; import { useRouter } from 'next/navigation'; import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice'; -import useCreateKernal from '@/app/utils/useCreateKernal'; -import secureLocalStorage from 'react-secure-storage'; - -// Import restapi for function calls -import { PushAPI, CONSTANTS } from '@pushprotocol/restapi'; import { Input } from '../ui/input'; import { Button } from '../ui/button'; // privy import { usePrivySmartAccount } from '@zerodev/privy'; +import KeyPad from '../KeyPad/KeyPad'; export default function SendUsdc() { - // privy const { zeroDevReady, user, sendTransaction } = usePrivySmartAccount(); @@ -40,9 +32,8 @@ export default function SendUsdc() { const [transactionStatus, setTransactionStatus] = useState(false); const [loading, setLoading] = useState(false); - const [kernal, setKernal] = useState(null); - - /* const kernal = useSelector((state: RootState) => state.kernalClient.value); */ + // ref + const inputRef: any = useRef(null); // next router const router = useRouter(); @@ -59,13 +50,14 @@ export default function SendUsdc() { const usdc = '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8'; useEffect(() => { - console.log("user in send page ", user) + //inputRef.current.focus(); + console.log('USDC amount', usdcAmount); if (zeroDevReady) { - console.log("ready to send") + console.log('ready to send'); } else { - console.log("not ready to send") + console.log('not ready to send'); } - }, [zeroDevReady]); + }, [usdcAmount]); // Send transaction function const sendTx = async () => { @@ -73,6 +65,14 @@ export default function SendUsdc() { // Encode the data with Viem Function // Requires the abi of the contract, the function name, and the arguments address and amount // @ts-ignore + if (!zeroDevReady) { + console.log('not ready to send'); + return; + } + if (usdcAmount == '' || usdcAmount == '0') { + console.log('amount is 0'); + return; + } const encoded: any = encodeFunctionData({ // @ts-ignore abi: erc20Abi, @@ -97,7 +97,6 @@ export default function SendUsdc() { router.push('/home'); }, 1000); } - } catch (error) { console.log(error); } @@ -105,37 +104,23 @@ export default function SendUsdc() { return ( <> -
-
- { - setUsdcAmount( - val.target.value.replace(/[^0-9.,]/g, '').replace(/,/g, '.') - ); - }} - /> -
- - +
+ +
+ {transactionStatus || (loading && ( <> ))} - ); } diff --git a/src/app/components/ui/button.tsx b/src/app/components/ui/button.tsx index 931de58..a8adc37 100644 --- a/src/app/components/ui/button.tsx +++ b/src/app/components/ui/button.tsx @@ -1,57 +1,57 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { cva, type VariantProps } from 'class-variance-authority'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; const buttonVariants = cva( - "w-full flex items-center hover:scale-95 transition-all duration-300 justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + 'w-full flex items-center active:scale-75 transition-transform transform transition-all duration-300 justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', { variants: { variant: { default: - "bg-primary bg-opacity-90 text-primary-foreground shadow mix-blend-exclusion ", + 'bg-primary bg-opacity-90 text-primary-foreground shadow mix-blend-exclusion ', destructive: - "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90', outline: - "border border-input bg-background shadow-sm hover:text-accent-foreground", + 'border border-input bg-background shadow-sm hover:text-accent-foreground', secondary: - "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", - ghost: " hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", + 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', + ghost: ' hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', }, size: { - default: "h-9 px-4 py-2", - sm: "h-8 rounded-md px-3 text-xs", - lg: "h-10 rounded-md px-8", - icon: "h-9 w-9", + default: 'h-9 px-4 py-2', + sm: 'h-8 rounded-md px-3 text-xs', + lg: 'h-10 rounded-md px-8', + icon: 'h-9 w-9', }, }, defaultVariants: { - variant: "default", - size: "default", + variant: 'default', + size: 'default', }, } -) +); export interface ButtonProps extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean + VariantProps { + asChild?: boolean; } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" + const Comp = asChild ? Slot : 'button'; return ( - ) + ); } -) -Button.displayName = "Button" +); +Button.displayName = 'Button'; -export { Button, buttonVariants } +export { Button, buttonVariants }; diff --git a/src/app/components/ui/input.tsx b/src/app/components/ui/input.tsx index a92b8e0..accf76d 100644 --- a/src/app/components/ui/input.tsx +++ b/src/app/components/ui/input.tsx @@ -1,6 +1,6 @@ -import * as React from "react" +import * as React from 'react'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; export interface InputProps extends React.InputHTMLAttributes {} @@ -11,15 +11,15 @@ const Input = React.forwardRef( - ) + ); } -) -Input.displayName = "Input" +); +Input.displayName = 'Input'; -export { Input } +export { Input }; diff --git a/src/app/hooks/useGetRecentTransactions.tsx b/src/app/hooks/useGetRecentTransactions.tsx index 6f92209..a900543 100644 --- a/src/app/hooks/useGetRecentTransactions.tsx +++ b/src/app/hooks/useGetRecentTransactions.tsx @@ -3,14 +3,13 @@ import useGetAddress from '@/app/hooks/useGetAddress'; import { Alchemy, Network } from 'alchemy-sdk'; const useGetRecentTransactions = async (address: string) => { - try { const config = { apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY, network: Network.ETH_SEPOLIA, }; const alchemy = new Alchemy(config); - console.log("about to get txs for address", address) + console.log('about to get txs for address', address); const data = await alchemy.core.getAssetTransfers({ fromBlock: '0x0', fromAddress: address,