From c7cb891cf4eb0395ba494d243aaec4b7ac141c2a Mon Sep 17 00:00:00 2001 From: wheval Date: Mon, 27 Jan 2025 09:01:07 +0100 Subject: [PATCH 1/5] add transaction history --- packages/nextjs/app/assets/constants.ts | 22 ++++++ .../_components/TransactionConnectPage.tsx | 27 +++++++ .../_components/TransactionHistory.tsx | 71 +++++++++++++++++++ packages/nextjs/app/history/page.tsx | 17 +++++ packages/nextjs/components/Header.tsx | 5 ++ 5 files changed, 142 insertions(+) create mode 100644 packages/nextjs/app/history/_components/TransactionConnectPage.tsx create mode 100644 packages/nextjs/app/history/_components/TransactionHistory.tsx create mode 100644 packages/nextjs/app/history/page.tsx diff --git a/packages/nextjs/app/assets/constants.ts b/packages/nextjs/app/assets/constants.ts index 9b936e2..90a3eac 100644 --- a/packages/nextjs/app/assets/constants.ts +++ b/packages/nextjs/app/assets/constants.ts @@ -40,3 +40,25 @@ export const FLIPS = [ icon: "/happy_coin.png", }, ]; + + +export const TRANSACTIONS = [ + { + message: "flipped 0.01 and doubled", + time: "5", + txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i", + }, + { + message: "withdrew 50 STRK to 0x023030w3450430933303345", + time: "8", + txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i", + }, + { + message: "flipped 0.01 and got rugged", + time: "20", + txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i", + }, +]; + + + diff --git a/packages/nextjs/app/history/_components/TransactionConnectPage.tsx b/packages/nextjs/app/history/_components/TransactionConnectPage.tsx new file mode 100644 index 0000000..c651233 --- /dev/null +++ b/packages/nextjs/app/history/_components/TransactionConnectPage.tsx @@ -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 ( +
+
+

To view all your transactions

+ +
+
+ ) +} + +export default TransactionConnectPage \ No newline at end of file diff --git a/packages/nextjs/app/history/_components/TransactionHistory.tsx b/packages/nextjs/app/history/_components/TransactionHistory.tsx new file mode 100644 index 0000000..6b5dffa --- /dev/null +++ b/packages/nextjs/app/history/_components/TransactionHistory.tsx @@ -0,0 +1,71 @@ +"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) => { + event.preventDefault(); + console.log("Saving name:", name); + }; + const handleButtonClick = () => { + router.back(); + }; + + return ( +
+
+ {/* User name */} +
+ {name || "User Profile"} +
+ Web3 Arcade Coin +
+ {name || "Coinflip Expert"} +
+
+
+ { address &&

Wallet {address}

} +
+

Transaction History

+
+ {TRANSACTIONS.map((transaction, index) => ( +
+
+

+ You + + {transaction.message.split(" ")[0]} + {" "} + {transaction.message.split(" ").slice(1).join(" ")} +

+
+

{transaction.time} minutes ago

+
+ ))} +
+
+
+ +
+
+ ); +} diff --git a/packages/nextjs/app/history/page.tsx b/packages/nextjs/app/history/page.tsx new file mode 100644 index 0000000..3ab8816 --- /dev/null +++ b/packages/nextjs/app/history/page.tsx @@ -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" ? : } + + ); +}; + +export default Debug; + diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 7011689..3bba9e5 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -30,6 +30,11 @@ export const menuLinks: HeaderMenuLink[] = [ href: "/recentflips", icon: , }, + { + label: "Transaction History", + href: "/history", + icon: , + }, { label: "Profile", href: "/profile", From 78e19f154d2f46b91f7de1b6dbc86a6eee371b78 Mon Sep 17 00:00:00 2001 From: wheval Date: Mon, 27 Jan 2025 09:11:39 +0100 Subject: [PATCH 2/5] fix transaction detail --- packages/nextjs/app/assets/constants.ts | 5 +++++ .../nextjs/app/history/_components/TransactionHistory.tsx | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/nextjs/app/assets/constants.ts b/packages/nextjs/app/assets/constants.ts index 90a3eac..b237f36 100644 --- a/packages/nextjs/app/assets/constants.ts +++ b/packages/nextjs/app/assets/constants.ts @@ -58,6 +58,11 @@ export const TRANSACTIONS = [ time: "20", txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i", }, + { + message: "used 0.1 STRK, won 5 STRK", + time: "30", + txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i", + }, ]; diff --git a/packages/nextjs/app/history/_components/TransactionHistory.tsx b/packages/nextjs/app/history/_components/TransactionHistory.tsx index 6b5dffa..5ff81d3 100644 --- a/packages/nextjs/app/history/_components/TransactionHistory.tsx +++ b/packages/nextjs/app/history/_components/TransactionHistory.tsx @@ -42,12 +42,12 @@ export default function TransactionHistory({ address }: { address: `0x${string}` {TRANSACTIONS.map((transaction, index) => (

You - + {transaction.message.split(" ")[0]} {" "} {transaction.message.split(" ").slice(1).join(" ")} From c71dd62942ddfe0ca3c10641eab0b25843fd298e Mon Sep 17 00:00:00 2001 From: wheval Date: Mon, 27 Jan 2025 09:32:00 +0100 Subject: [PATCH 3/5] fixded merge conflicts --- packages/nextjs/app/assets/constants.ts | 27 +++++++++++++++++++ .../coinflip/_components/ConflipPlayPage.tsx | 17 +++++------- .../_components/TransactionHistory.tsx | 10 +++---- packages/nextjs/components/Header.tsx | 4 +-- 4 files changed, 40 insertions(+), 18 deletions(-) diff --git a/packages/nextjs/app/assets/constants.ts b/packages/nextjs/app/assets/constants.ts index 60d3bc3..8234dc1 100644 --- a/packages/nextjs/app/assets/constants.ts +++ b/packages/nextjs/app/assets/constants.ts @@ -41,6 +41,33 @@ export const FLIPS = [ }, ]; + +export const TRANSACTIONS = [ + { + message: "flipped 0.01 and doubled", + time: "5", + txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i", + }, + { + message: "withdrew 50 STRK to 0x023030w3450430933303345", + time: "8", + txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i", + }, + { + message: "flipped 0.01 and got rugged", + time: "20", + txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i", + }, + { + message: "used 0.1 STRK, won 5 STRK", + time: "30", + txnHash: "0x02394u4iun4bjnfeeofnek399ri43494b4jj888888fj4i", + }, +]; + + + + export const LEADERBOARD = [ { imageSrc: "/starkcade.png", diff --git a/packages/nextjs/app/coinflip/_components/ConflipPlayPage.tsx b/packages/nextjs/app/coinflip/_components/ConflipPlayPage.tsx index 17418cd..a0f469b 100644 --- a/packages/nextjs/app/coinflip/_components/ConflipPlayPage.tsx +++ b/packages/nextjs/app/coinflip/_components/ConflipPlayPage.tsx @@ -3,7 +3,6 @@ import { useState } from "react"; import CoinFlip from "../../coinflipAnimation"; - export const ConflipPlayPage = () => { const [selectedChoice, setSelectedChoice] = useState(""); const [selectedAmount, setSelectedAmount] = useState(0); @@ -13,18 +12,14 @@ export const ConflipPlayPage = () => {

{isProcessing ? (
- Web3 Arcade Coin +
+
+ +
+

Please wait, transaction is processing... -

-
-
- -
+
) : (
diff --git a/packages/nextjs/app/history/_components/TransactionHistory.tsx b/packages/nextjs/app/history/_components/TransactionHistory.tsx index 5ff81d3..f4622bf 100644 --- a/packages/nextjs/app/history/_components/TransactionHistory.tsx +++ b/packages/nextjs/app/history/_components/TransactionHistory.tsx @@ -4,7 +4,7 @@ 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" }) { +export default function TransactionHistory({ address }: { address: `0x${string}` | undefined }) { const router = useRouter(); const [name, setName] = useState(""); @@ -20,7 +20,7 @@ export default function TransactionHistory({ address }: { address: `0x${string}`
{/* User name */} -
+
{name || "User Profile"}
-
+
{name || "Coinflip Expert"}
- { address &&

Wallet {address}

} + { address &&

Wallet {address}

}

Transaction History

@@ -60,7 +60,7 @@ export default function TransactionHistory({ address }: { address: `0x${string}`
- )}
- ) - } + ); +};