diff --git a/src/app/token/page.tsx b/src/app/token/page.tsx new file mode 100644 index 00000000..be076ede --- /dev/null +++ b/src/app/token/page.tsx @@ -0,0 +1,214 @@ +"use client"; + +import { useAccount, useReadContract } from "wagmi"; +import { formatUnits, erc20Abi } from "viem"; +import { useState } from "react"; +import { + PLOT_TOKEN, EXPLORER_URL, +} from "../../../lib/contracts/constants"; + +const BASESCAN_URL = `${EXPLORER_URL}/token/${PLOT_TOKEN}`; +const MINT_CLUB_URL = "https://mint.club/token/base/PLOT"; +const HUNT_TOWN_URL = "https://hunt.town/project/PLOT"; + +export default function TokenPage() { + const { address, isConnected } = useAccount(); + const [copied, setCopied] = useState(false); + + const { data: balance, isLoading: balanceLoading } = useReadContract({ + address: PLOT_TOKEN, + abi: erc20Abi, + functionName: "balanceOf", + args: address ? [address] : undefined, + query: { enabled: !!address }, + }); + + const { data: totalSupply, isLoading: supplyLoading } = useReadContract({ + address: PLOT_TOKEN, + abi: erc20Abi, + functionName: "totalSupply", + }); + + const formattedBalance = balance ? formatUnits(balance, 18) : "0"; + const formattedSupply = totalSupply ? formatUnits(totalSupply, 18) : "0"; + + const handleCopyAddress = async () => { + try { + await navigator.clipboard.writeText(PLOT_TOKEN); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch {} + }; + + return ( +
+ {/* Page Title */} +
+

$PLOT Token

+

The reserve token behind every story on PlotLink

+
+ + {/* Your Balance */} +
+
+

Your Balance

+ {isConnected && ( +
+
+ Connected +
+ )} +
+ + {!isConnected ? ( +
+

Connect your wallet to view balance

+
+ ) : balanceLoading ? ( +
+

Loading...

+
+ ) : ( +
+
+ {parseFloat(formattedBalance).toLocaleString(undefined, { + minimumFractionDigits: 0, + maximumFractionDigits: 2, + })}{" "} + PLOT +
+
+ )} +
+ + {/* Token Utility */} +
+

Why PLOT?

+
+
+ 1 +

+ Reserve token for story tokens — every storyline token on PlotLink is backed by PLOT via MCV2 bonding curves. +

+
+
+ 2 +

+ TVL growth — as more story tokens are minted, more PLOT gets locked in bonding curve reserves, increasing total value locked across all storylines. +

+
+
+ 3 +

+ Creator royalties — 1% mint and 1% burn royalty on every trade flows directly to the story writer. +

+
+
+
+ + {/* How to Get PLOT */} +
+

How to Get PLOT

+
+
+ • +

+ Buy via Mint Club — purchase PLOT on the bonding curve using HUNT tokens. +

+
+
+ • +

+ Sell story tokens — selling any storyline token returns PLOT to your wallet. +

+
+
+ • +

+ Use the Zap — buy story tokens with ETH, USDC, or HUNT and the zap contract handles PLOT conversion automatically. +

+
+
+
+ + {/* Token Information */} +
+

Token Information

+ + {/* Stats */} +
+
+
Total Supply
+ {supplyLoading ? ( +
+ ) : ( +
+ {parseFloat(formattedSupply).toLocaleString(undefined, { + minimumFractionDigits: 0, + maximumFractionDigits: 0, + })} PLOT +
+ )} +
+
+
Network
+
+ + Base Mainnet +
+
+
+ + {/* Links */} +
+ + View on Mint Club + ↗ + + + + View on Hunt Town + ↗ + + + +
+
Contract Address
+ + {PLOT_TOKEN.slice(0, 6)}...{PLOT_TOKEN.slice(-6)} + +
+
+ + ↗ +
+ +
+
+
+ ); +} diff --git a/src/components/TradingWidget.tsx b/src/components/TradingWidget.tsx index 7ab6008d..251ef219 100644 --- a/src/components/TradingWidget.tsx +++ b/src/components/TradingWidget.tsx @@ -345,7 +345,7 @@ export function TradingWidget({ tokenAddress }: { tokenAddress: Address }) {

Trade to Support - Every trade generates a 5% creator royalty — buying and selling these story tokens directly supports the writer to keep continuing this story. + Every trade generates a creator royalty — buying and selling these story tokens directly supports the writer to keep continuing this story.