Skip to content

Commit

Permalink
worked on view recent history with a payee
Browse files Browse the repository at this point in the history
  • Loading branch information
@Stephen-Gordon
Stephen-Gordon committed Mar 8, 2024
1 parent b219bfb commit 93a951d
Show file tree
Hide file tree
Showing 9 changed files with 328 additions and 78 deletions.
64 changes: 53 additions & 11 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@serwist/precaching": "^8.4.4",
"@serwist/sw": "^8.4.4",
"@tanstack/react-query": "^5.24.6",
"@tanstack/react-table": "^8.13.2",
"@wagmi/core": "^2.6.1",
"@web3auth/base": "^7.3.1",
"@web3auth/ethereum-provider": "^7.3.1",
Expand All @@ -42,6 +43,7 @@
"axios": "^1.6.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"date-fns": "^3.3.1",
"ethers": "5.7",
"framer-motion": "^11.0.3",
"html5-qrcode": "^2.3.8",
Expand Down
193 changes: 136 additions & 57 deletions src/app/@auth/(.)payee/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,74 +3,114 @@
// Next
import { useRouter, useSearchParams } from 'next/navigation';
// drawer
import { 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
import truncateEthAddress from 'truncate-eth-address';
// backbutton
import BackButton from '@/app/components/Navigation/BackButton/BackButton';
// react
import { useEffect, 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';
// redux
import { useDispatch } from 'react-redux';
import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice';
// components
import { Button } from '@/app/components/ui/button';
// lucide
import { Send, QrCode } from 'lucide-react';
// link
import Link from 'next/link';

// date
//import { format, parseISO } from 'date-fns';
import { format, parseISO, set } from 'date-fns';
interface Transaction {
to: string;
from: string;
value: string;
metadata: {
blockTimestamp: string;
};

}


export default function Page() {
const searchParams = useSearchParams();
let payeeAddress = searchParams.get('payeeAddress');
console.log("payeeAddress", payeeAddress )

// hooks
const dispatch = useDispatch();
const address = useGetAddress();
const router = useRouter();
const [ transactions, setTransactions ] = useState([]);

// state
const [ transactions, setTransactions ] = useState<Transaction[]>([]);
const [groupedTransactions, setGroupedTransactions] = useState<any[]>([]);

const end = useRef<any>(null);


// effect
useEffect(() => {
end.current.scrollIntoView({})
const fetchRecentTransactions = async () => {
const recentTransactions = await useGetRecentTransactions();
console.log('all recent transactions ', recentTransactions);

if (recentTransactions) {
// Filter transactions where either to or from address matches payeeAddress or address
const filteredTransactions = recentTransactions.transfers.filter(
(transaction) =>
transaction.to === payeeAddress ||
transaction.from === payeeAddress ||
transaction.to === address ||
transaction.from === address
);

console.log('filteredTransactions gpt', filteredTransactions);
// Filter transactions where either to or from address matches payeeAddress
const filteredTransactions: Transaction[] =
recentTransactions.transfers.filter(
(transaction) => transaction.to || transaction.from == payeeAddress
);
console.log('filteredTransactions', filteredTransactions);
setTransactions(filteredTransactions);
}


/* if (recentTransactions) {
// get all txs with the payee
const allPayeeTransactions = recentTransactions.transfers.filter(
(transaction) => transaction.to || transaction.from === payeeAddress
// Group transactions by month
// Group transactions by month
const groupedTransactionsByMonth: { [key: string]: Transaction[] } =
filteredTransactions.reduce((groups, transaction) => {
const monthKey = format(
parseISO(transaction.metadata.blockTimestamp),
'yyyy-MM'
);
if (!groups[monthKey]) {
groups[monthKey] = [];
}
groups[monthKey].push(transaction);
return groups;
}, {});

// Convert grouped transactions object into an array of arrays with month names
const arrayOfMonthArrays: {
monthName: string;
transactions: Transaction[];
}[] = Object.entries(groupedTransactionsByMonth).map(
([monthKey, transactions]) => ({
monthName: format(parseISO(monthKey), 'MMMM yyyy'), // Format month name along with the year
transactions,
})
);
const filterTwo = allPayeeTransactions.filter(
(transaction) => transaction.to || transaction.from === address
);
console.log('filterTwo', filterTwo);
setGroupedTransactions(arrayOfMonthArrays);
console.log('groupedTransactionsByMonth', arrayOfMonthArrays);

const filteredTransactions = recentTransactions.transfers.filter(
(transaction) =>
transaction.to && transaction.from === payeeAddress || address
);
}


setTransactions(filteredTransactions);
console.log("my address", address)
console.log('filteredTransactions from payee', filteredTransactions);
} */
};

fetchRecentTransactions();
}, [payeeAddress]);




return (
<>
Expand All @@ -91,35 +131,74 @@ export default function Page() {
</div>
</DrawerTitle>
</DrawerHeader>
<div className='p-4'>
{transactions.map((transaction, i) => (
<div key={i} className='grid grid-cols-2 text-xl text-white'>
<>
{transaction.to == payeeAddress ? (
<div>
`id: {i}` You Sent {transaction.value} to{' '}
{truncateEthAddress(payeeAddress)}
</div>
) : (
<>
<div></div>
</>
)}

{transaction.to !== payeeAddress ? (
<div>
`id: {i}` You Recieved {transaction.value} from{' '}
{truncateEthAddress(payeeAddress)}
<div className='overflow-auto p-4'>
{groupedTransactions.map((month, i) => (
<div key={i} className='grid'>
<div style={{marginBottom: '32px'}} className='w-full flex justify-center'>
<p className='bg-card text-card-foreground h-9 w-fit rounded-xl border px-4 py-2 text-sm shadow'>
{month.monthName}
</p>
</div>
<div className='grid grid-flow-row auto-rows-max grid-cols-1 gap-2 text-xl text-white'>
{month.transactions.map((transaction, j) => (
<div key={j}>
{transaction.to !== payeeAddress ? (
<div
style={{ marginBottom: '32px' }}
className='bg-muted mr-auto grid w-fit justify-self-start rounded-2xl rounded-bl-none p-4'
>
<p className='text-muted-foreground text-xs'>
You Received
</p>
<div>${transaction.value}</div>
</div>
) : (
<div
style={{ marginBottom: '32px' }}
className='bg-muted ml-auto grid w-fit justify-self-end rounded-2xl rounded-br-none p-4'
>
<p className='text-muted-foreground text-xs'>You Sent</p>
<div>${transaction.value}</div>
</div>
)}
</div>
) : (
<>
<div> </div>
</>
)}
</>
))}
</div>
</div>
))}
</div>

<div className='overflow-auto p-4'>
{/* End Ref */}
<div ref={end}></div>
</div>

<DrawerFooter>
<div>
<Link
onClick={() => {
dispatch(setSheet(true));
}}
href={{
pathname: '/send',
query: { payee: payeeAddress },
}}
>
<Button className='text-xl' size={'lg'} variant={'default'}>
<div className='flex grid-cols-3 content-center items-center'>
<div className='text-xl'>
<div>Send</div>
</div>
<div className='px-2'></div>
<div>
<Send size={20} />
</div>
</div>
</Button>
</Link>
</div>
</DrawerFooter>
</>
);
}
7 changes: 4 additions & 3 deletions src/app/@auth/(.)search/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ export default function Page() {
onClick={() => {
router.back();
dispatch(setSheet(false));

}}
>
<BackButton />
Expand All @@ -68,7 +67,7 @@ export default function Page() {
</div>
</DrawerTitle>
</DrawerHeader>

<div className='flex px-4'>
{/* <input
Expand Down Expand Up @@ -139,7 +138,9 @@ export default function Page() {
<button className='bg-purple w-full rounded p-4'>Go</button>
</Link>
</div>
<RecentPayee/>
<div id='#recent-activity' className='p-4 space-y-8' >
<RecentPayee/>
</div>

<div className='p-4'>
<div className='text-lg text-gray-300'>Favorites</div>
Expand Down
Loading

0 comments on commit 93a951d

Please sign in to comment.