Skip to content

Commit

Permalink
changed blockchain from sepolia to base
Browse files Browse the repository at this point in the history
  • Loading branch information
@Stephen-Gordon
Stephen-Gordon committed Apr 7, 2024
1 parent 138f734 commit c1281e2
Show file tree
Hide file tree
Showing 20 changed files with 520 additions and 544 deletions.
33 changes: 27 additions & 6 deletions src/app/@auth/(.)receive/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<motion.div className='grid'
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 0}}
transition={{duration: 0.5, ease: 'easeInOut'}}>
<motion.div
className='grid'
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5, ease: 'easeInOut' }}
>
<DrawerHeader>
<DrawerTitle>Receive</DrawerTitle>
</DrawerHeader>

<div className='grid justify-center'>
<div className='mt-4 '>
<Qr />
</div>
<motion.button
className='text- flex justify-center rounded-full border p-4 text-center text-xl'
onClick={() => navigator.clipboard.writeText(address as string)}
whileTap={{
scale: 0.95,
}}
transition={{
duration: 0.3,
}}
>
{truncateEthAddress(address as string)}{' '}
<span className='ml-2'>
<Copy className='' />
</span>
</motion.button>
</div>
</motion.div>
</>
Expand Down
37 changes: 14 additions & 23 deletions src/app/@auth/(.)transaction/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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 (
<AuthPage>
<>
{transaction && (
{transaction && (
<motion.div
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 0}}
transition={{duration: 0.5, ease: 'easeInOut'}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5, ease: 'easeInOut' }}
>
<div className='grid p-4 '>
<div className='absolute z-50'>
Expand Down Expand Up @@ -124,7 +115,7 @@ export default function Page() {
}}
href={{
pathname: '/payee',
query: { payeeAddress: payeeName }
query: { payeeAddress: payeeName },
}}
>
<Button
Expand Down Expand Up @@ -154,7 +145,7 @@ export default function Page() {
<p>Tx Hash</p>
<p className='text-blue-400'>
<a
href={`https://sepolia.etherscan.io/tx/${transaction?.hash}`}
href={`https://base.basescan.org/tx/${transaction?.hash}`}
>
{' '}
{transaction?.blockHash &&
Expand All @@ -166,7 +157,7 @@ export default function Page() {
</div>
</div>
</motion.div>
)}
)}
</>
</AuthPage>
);
Expand Down
6 changes: 2 additions & 4 deletions src/app/components/Balance/Balance copy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,14 @@ export default function Balance() {
// hooks
const address = useSelector((state: RootState) => state.address.value);



const checkBalance = async () => {
try {
console.log('balance', result?.data?.formatted);

const result = useBalance({
// @ts-ignore
address: address,
token: '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8',
token: '0x036CbD53842c5426634e7929541eC2318f3dCF7e',
});
// @ts-ignore
dispatch(setBalance(result?.data?.formatted));
Expand All @@ -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 <div className='text-white'>${balanceState}</div>;
}
6 changes: 2 additions & 4 deletions src/app/components/Balance/Balance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,14 @@ export default function Balance() {
// hooks
const address = useSelector((state: RootState) => state.address.value);



const checkBalance = async () => {
try {
console.log('balance', result?.data?.formatted);

const result = useBalance({
// @ts-ignore
address: address,
token: '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8',
token: '0x036CbD53842c5426634e7929541eC2318f3dCF7e',
});
// @ts-ignore
dispatch(setBalance(result?.data?.formatted));
Expand All @@ -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 <div className='text-white'>${balanceState}</div>;
}
148 changes: 75 additions & 73 deletions src/app/components/CreditCard/CreditCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<string>('')
const [balanceToShow, setBalanceToShow] = useState<string>('');

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)
Expand All @@ -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 (
<>
<motion.div
whileTap={{
scale: 0.95,
}}
transition={{
duration: 0.3,
}}
.catch((e) => {
console.log('axios balance error', e);
});
}, []);

useEffect(() => {}, [balanceToShow]);

return (
<>
<motion.div
whileTap={{
scale: 0.95,
}}
transition={{
duration: 0.3,
}}
>
<HoverBorderGradient
id='card'
className='overflow relative grid h-52 w-full rounded-xl shadow-lg'
>
<HoverBorderGradient
id='card'
className='overflow relative grid h-52 w-full rounded-xl shadow-lg'
>
<div className='via-background absolute -z-10 h-full w-full rounded-xl bg-gradient-to-br from-slate-50/10 to-[#E45368]/40 backdrop-blur-2xl'>
<></>
<div className='via-background absolute -z-10 h-full w-full rounded-xl bg-gradient-to-br from-slate-50/10 to-[#E45368]/40 backdrop-blur-2xl'>
<></>
</div>
<div className='text-card-foreground absolute z-10 grid h-full w-full content-center items-center justify-center p-2 text-center text-5xl '>
${reduxBalance && formatUnits(reduxBalance, 6)}
</div>
<div className='sticky z-10 mb-auto flex h-full w-full content-end justify-between p-4'>
<div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-base'>
{user?.google?.name}
</div>

<div className='text-card-foreground absolute z-10 grid h-full w-full content-center items-center justify-center p-2 text-center text-5xl '>
${reduxBalance && formatUnits(reduxBalance, 6)}
</div>
<div className='sticky z-10 mb-auto flex h-full w-full content-end justify-between p-4'>
<div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-base'>
{user?.google?.name}
</div>
<div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-right text-base'>
{truncateEthAddress(address as string)}
<div
onClick={() => navigator.clipboard.writeText(address as string)}
className='text-muted-foreground mb-auto grid h-full content-end justify-start text-right text-base'
>
<div className='flex content-center justify-center'>
<span>{truncateEthAddress(address as string)}</span>
<span className='flex content-end'>
<Copy className='ml-2 mt-1' width={16} height={16} />
</span>
</div>
</div>
</HoverBorderGradient>
</motion.div>
</>
);
}
</div>
</HoverBorderGradient>
</motion.div>
</>
);
}
Loading

0 comments on commit c1281e2

Please sign in to comment.