-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
150 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
packages/nextjs/app/history/_components/TransactionConnectPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import ConnectModal from '~~/components/scaffold-stark/CustomConnectButton/ConnectModal'; | ||
| import { useAccountConnection } from '~~/hooks/starkcade/useAccountConnection'; | ||
|
|
||
| type Props = {} | ||
|
|
||
| const TransactionConnectPage = (props: Props) => { | ||
| const { status } = useAccountConnection(); | ||
|
|
||
| const handleConnect = () => { | ||
| console.log(status); | ||
| }; | ||
| return ( | ||
| <div className='relative flex flex-col justify-center items-center pb-20'> | ||
| <div className="flex flex-col text-center gap-8 items-center py-20 justify-center mt-6"> | ||
| <h2 className='text-4xl'>To view all your transactions</h2> | ||
| <button | ||
| className="w-64 py-3 bg-yellow-500 text-black font-bold rounded-lg hover:bg-yellow-400 transition" | ||
| onClick={handleConnect} | ||
| > | ||
| Connect Wallet | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default TransactionConnectPage |
70 changes: 70 additions & 0 deletions
70
packages/nextjs/app/history/_components/TransactionHistory.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { useRouter } from "next/navigation"; | ||
| import Image from "next/image"; | ||
| import { TRANSACTIONS } from "../../assets/constants"; | ||
| export default function TransactionHistory({ address }: { address: `0x${string}` | undefined }) { | ||
| const router = useRouter(); | ||
| const [name, setName] = useState(""); | ||
|
|
||
| const handleSave = (event: React.MouseEvent<HTMLButtonElement>) => { | ||
| event.preventDefault(); | ||
| console.log("Saving name:", name); | ||
| }; | ||
| const handleButtonClick = () => { | ||
| router.back(); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="relative flex flex-col justify-center items-center min-h-screen overflow-hidden"> | ||
| <div className="relative text-center p-4 space-y-6 -z-5 w-full flex flex-col justify-center items-center gap-4"> | ||
| <div className='flex justify-center h-4 text-4xl'> | ||
| {name || "User Profile"} | ||
| </div> | ||
| <Image | ||
| src="/coin-removebg.png" | ||
| alt="Web3 Arcade Coin" | ||
| width={256} | ||
| height={256} | ||
| className="w-24 h-24 md:w-64 md:h-64 flex justify-center" | ||
| /> | ||
| <div className='flex justify-center h-4 text-4xl'> | ||
| {name || "Coinflip Expert"} | ||
| </div> | ||
| <hr className="border-t-2 max-w-xl border-gray-300 flex justify-center w-1/2" /> | ||
| </div> | ||
| { address && <p className="my-5 dark:text-white text-yellow-500">Wallet {address}</p>} | ||
| <div className="recentflip w-[40%] max-w-[560px] min-w-[280px] h-auto"> | ||
| <h2 className="text-2xl w-full text-gray-800">Transaction History</h2> | ||
| <div className="space-y-1"> | ||
| {TRANSACTIONS.map((transaction, index) => ( | ||
| <div | ||
| key={index} | ||
| className={`flex items-center justify-between pb-1 last-of-type:border-0 border-b border-gray-400`} | ||
| > | ||
| <div className="flex items-center gap-4"> | ||
| <p className="text-gray-800"> | ||
| <span className="mr-1">You</span> | ||
| <span className=""> | ||
| {transaction.message.split(" ")[0]} | ||
| </span>{" "} | ||
| {transaction.message.split(" ").slice(1).join(" ")} | ||
| </p> | ||
| </div> | ||
| <p className="text-[#333] text-xs">{transaction.time} minutes ago</p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <div className="mt-5 mb-5 w-full max-w-xl"> | ||
| <button | ||
| className="w-full py-3 bg-yellow-500 text-black font-bold rounded-lg hover:bg-yellow-400 transition" | ||
| onClick={handleButtonClick} | ||
| > | ||
| GO BACK | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| "use client" | ||
| import { useAccountConnection } from "~~/hooks/starkcade/useAccountConnection"; | ||
| import TransactionHistory from "./_components/TransactionHistory"; | ||
| import type { NextPage } from "next"; | ||
| import TransactionConnectPage from "./_components/TransactionConnectPage"; | ||
|
|
||
| const Debug: NextPage = () => { | ||
| const { accountAddress, status } = useAccountConnection(); | ||
| return ( | ||
| <> | ||
| { status === "connected" ? <TransactionHistory address={accountAddress} /> : <TransactionConnectPage /> } | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Debug; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters