Initial commit

2026-09-17 00:34:19 +02:00
commit 590dbb24a2
29 changed files with 7146 additions and 0 deletions
@@ -0,0 +1,22 @@
+@import "tailwindcss";
+@import "react-toastify/dist/ReactToastify.min.css";
+
+table {
+    @apply w-full text-left;
+}
+
+table thead {
+    @apply bg-slate-100;
+}
+
+table tbody {
+    @apply bg-white;
+}
+
+table tbody tr {
+    @apply border-b border-slate-200;
+}
+
+table thead th, table tbody td {
+    @apply px-4 py-2;
+}
@@ -0,0 +1,7 @@
+export function ErrorView() {
+    return (
+        <div>
+            <p>Ups, an unexpected error occurred.</p>
+        </div>
+    );
+}
@@ -0,0 +1,13 @@
+export function Footer() {
+  return (
+    <footer className="max-w-6xl mx-auto px-4 py-12 border-t border-slate-200 mt-12">
+      <div className="text-center">
+        <p className="text-sm text-slate-500">
+          Copyright &copy; {new Date().getFullYear()} Brainster Next College.
+          All rights reserved.<br />
+          Icons by <a href="https://icons8.com/" target="_blank" rel="noopener noreferrer">Icons8</a>
+        </p>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,33 @@
+import { Link } from "react-router";
+
+export function Header() {
+  return (
+    <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
+      <div className="max-w-6xl mx-auto px-4 py-3 h-auto min-h-16 flex items-center justify-between">
+        <div className="flex items-center space-x-3">
+          <div className="bg-blue-600 p-2 rounded-lg shrink-0">
+            <img
+              src="https://img.icons8.com/ios-filled/50/ffffff/flash-on.png"
+              className="w-5 h-5 object-contain"
+              alt="logo"
+            />
+          </div>
+          <div>
+            <h1 className="font-bold text-lg leading-tight">
+              Distributed Systems and Blockchain
+            </h1>
+            <p className="text-xs text-slate-500">Brainster Next College</p>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          <p className="text-sm text-slate-500 hidden md:block">Chain: Next Testnet</p>
+
+          <Link to="/status" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-sm font-semibold transition-all shadow-sm">
+            Connect Wallet
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,41 @@
+import { Link, useLocation } from "react-router";
+
+const navItems = [
+  { route: "/", label: "Explorer", icon: "home" },
+  { route: "/status", label: "Status", icon: "notepad" },
+  { route: "/transfer", label: "Transfer", icon: "money" },
+  { route: "/auction", label: "Auction", icon: "auction" }
+];
+
+export function Sidebar() {
+  const location = useLocation();
+
+  return (
+    <aside className="lg:col-span-3">
+      <nav className="space-y-1">
+        {navItems.map((item) => (
+          <Link
+            key={item.route}
+            to={item.route}
+            className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
+              location.pathname === item.route
+                ? "bg-blue-50 text-blue-700 border border-blue-100"
+                : "text-slate-600 hover:bg-slate-100"
+            }`}
+          >
+            <img
+              src={
+                location.pathname === item.route
+                  ? `https://img.icons8.com/ios-filled/50/2563eb/${item.icon}.png`
+                  : `https://img.icons8.com/ios/50/64748b/${item.icon}.png`
+              }
+              className="w-5 h-5 shrink-0 object-contain"
+              alt={item.label}
+            />
+            <span>{item.label}</span>
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}
@@ -0,0 +1,7 @@
+export function LoadingView() {
+    return (
+        <div className="flex justify-center items-center">
+            <p className="sr-only">Loading...</p>
+        </div>
+    );
+}
@@ -0,0 +1,133 @@
+export const auctionContractAddress = '0x9d1430b67a7560c5eb450D543947AdB80C03B55A';
+
+export const auctionABI = [
+    {
+      "inputs": [],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "AuctionClosed",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": false,
+          "internalType": "address",
+          "name": "bidder",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "BidIncreased",
+      "type": "event"
+    },
+    {
+      "inputs": [],
+      "name": "bid",
+      "outputs": [],
+      "stateMutability": "payable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "closeAuction",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "closed",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "creator",
+      "outputs": [
+        {
+          "internalType": "address",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "highestAmount",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "highestBidder",
+      "outputs": [
+        {
+          "internalType": "address",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "addr",
+          "type": "address"
+        }
+      ],
+      "name": "pendingReturnAmount",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "withdraw",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    }
+] as const;
@@ -0,0 +1,25 @@
+import { createConfig, http } from "wagmi";
+import { metaMask } from "wagmi/connectors";
+
+import { type Chain } from "viem";
+
+export const nextChain = {
+  id: 1337,
+  name: "Next",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  rpcUrls: {
+    default: { http: ["https://eth.code-camp.org"] }
+  },
+  blockExplorers: {
+    default: { name: "Otterscan", url: "https://etherscan.code-camp.org" }
+  },
+  testnet: true
+} as const satisfies Chain;
+
+export const config = createConfig({
+  chains: [nextChain],
+  transports: {
+    [nextChain.id]: http()
+  },
+  connectors: [metaMask()]
+});
@@ -0,0 +1,7 @@
+export const fetchApi = async <T = any>(url: string): Promise<T> => {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json();
+};
@@ -0,0 +1,300 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { formatEther, parseEther, type Address } from "viem";
+import { useBalance, useConnection, useReadContract, useReadContracts, useWaitForTransactionReceipt, useWatchContractEvent, useWriteContract } from "wagmi";
+import { LoadingView } from "~/components/loading/LoadingView";
+import { auctionABI, auctionContractAddress } from "~/config/auction";
+
+
+function WalletBalanceCard({ address }: { address: Address }) {
+    const { data: balance, error } = useBalance({ address });
+
+    if (error) {
+        return <p>Failed to fetch wallet balance.</p>;
+    }
+
+    return (
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+            <div className="flex justify-between items-start mb-4">
+                <h3 className="font-bold text-lg">
+                    Wallet Balance
+                </h3>
+                <span className="text-xs px-2 py-1 rounded-full font-semibold bg-slate-100 text-slate-600">Funds</span>
+            </div>
+            <div className="flex items-baseline gap-2">
+                <span className="text-3xl font-bold text-slate-900">{balance ? Number(formatEther(balance.value)).toLocaleString() : '...'}</span>
+                <span className="text-slate-500 font-medium">ETH</span>
+            </div>
+        </div>
+    )
+}
+
+function BestOfferCard({ address }: { address: Address }) {
+    const { data: bestOffer, error } = useReadContracts({
+        contracts: [
+            {
+                address: auctionContractAddress,
+                abi: auctionABI,
+                functionName: 'highestAmount'
+            },
+            {
+                address: auctionContractAddress,
+                abi: auctionABI,
+                functionName: 'highestBidder'
+            }
+        ]
+    });
+
+    const [amount, bidder] = bestOffer || [];
+
+    if (error || amount?.error || bidder?.error) {
+        return <p>Failed to fetch best bid.</p>;
+    }
+
+    return (
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+            <div className="flex justify-between items-start mb-4">
+                <h3 className="font-bold text-lg">
+                    Best Offer
+                </h3>
+                <span className="text-xs px-2 py-1 rounded-full font-semibold bg-slate-100 text-slate-600">Top Bid</span>
+            </div>
+            <div className="flex items-baseline gap-2">
+                <span className="text-3xl font-bold text-slate-900">{amount?.result !== undefined ? Number(formatEther(amount.result)).toLocaleString() : '...'}</span>
+                <span className="text-slate-500 font-medium">ETH ({bidder?.result === address ? "by you" : "by someone else"})</span>
+            </div>
+        </div>
+    )
+}
+
+function LastEventCard({ event }: { event?: string }) {
+    return (
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+            <div className="flex justify-between items-start mb-4">
+                <h3 className="font-bold text-lg">
+                    Last Event
+                </h3>
+                <span className="text-xs px-2 py-1 rounded-full font-semibold bg-slate-100 text-slate-600">Update</span>
+            </div>
+            <div className="flex items-baseline gap-2">
+                <span className="text-xl text-slate-900 pt-2">{event || 'No events yet...'}</span>
+            </div>
+        </div>
+    )
+}
+
+function PendingReturnCard({ address }: { address: Address }) {
+    const { data: refundValue, error } = useReadContract({
+        address: auctionContractAddress,
+        abi: auctionABI,
+        functionName: 'pendingReturnAmount',
+        args: [address]
+    });
+
+    if (error) {
+        return <p>Failed to fetch refund amount.</p>;
+    }
+
+    return (
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
+            <div className="flex justify-between items-start mb-4">
+                <h3 className="font-bold text-lg">
+                    Pending Return
+                </h3>
+                <span className="text-xs px-2 py-1 rounded-full font-semibold bg-slate-100 text-slate-600">Your Refund</span>
+            </div>
+            <div className="flex items-baseline gap-2">
+                <span className="text-3xl font-bold text-slate-900">
+                    {refundValue !== undefined ? Number(formatEther(refundValue)).toLocaleString() : '...'}
+                </span>
+                <span className="text-slate-500 font-medium">ETH</span>
+            </div>
+        </div>
+    )
+}
+
+
+function MakeBidCard() {
+    const [inputValue, setInputValue] = useState("");
+    const isValidInput = inputValue && !isNaN(Number(inputValue)) && Number(inputValue) > 0;
+
+    const { data: hash, mutate: makeBid, isPending: isWaitingForUser, error: userError, reset } = useWriteContract();
+    const { data: receipt, isPending, isFetching, error: receiptError } = useWaitForTransactionReceipt({
+        hash
+    })
+
+    function onSubmit(e) {
+        e.preventDefault();
+
+        if (!isValidInput) {
+            toast.error('Invalid bid amount.');
+            return;
+        }
+
+        makeBid({
+            address: auctionContractAddress,
+            abi: auctionABI,
+            functionName: 'bid',
+            value: parseEther(inputValue)
+        })
+    }
+
+    return (
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow lg:col-span-2 flex flex-col gap-4">
+            <div className="flex justify-between items-start mb-4">
+                <h3 className="font-bold text-lg">
+                    Make Bid
+                </h3>
+                <span className="text-xs px-2 py-1 rounded-full font-semibold bg-slate-100 text-slate-600">Bid</span>
+            </div>
+            <div className="flex flex-col lg:flex-row lg:justify-between gap-4">
+                <div className="flex flex-col w-full items-center justify-center gap-5 py-5">
+                    <img alt="auction" className="w-14 h-14" src="https://img.icons8.com/ios-filled/50/2563eb/auction.png" />
+                    <p className="text-center text-slate-500">
+                        Enter your bid amount in ETH
+                    </p>
+                </div>
+                <div className="w-full">
+                    <form className="flex flex-col w-full gap-3 py-5" onSubmit={onSubmit}>
+                        <input className="border border-gray-300 p-2 rounded-lg w-full" placeholder="Enter bid amount." type="text" value={inputValue}
+                            onChange={(e) => {
+                                setInputValue(e.target.value);
+                                if (hash || userError) {
+                                    reset();
+                                }
+                            }}
+                        />
+                        <button disabled={!isValidInput || isWaitingForUser || (isPending && isFetching)} type="submit" className="bg-blue-600 text-white px-5 py-2 cursor-pointer rounded-xl disabled:opacity-50 min-w-32">
+                            Make Bid
+                        </button>
+                    </form>
+
+                    {isWaitingForUser && <p>Waiting for user...</p>}
+                    {(userError || receiptError) && <p>Failed to make bid.</p>}
+                    {(isPending && isFetching) && <p>Waiting for receipt...</p>}
+                    {receipt && <p>Status: {receipt.status}</p>}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export function WithdrawCard({ address }: { address: Address }) {
+
+    const { data: refundValue, isPending: isRefundValuePending, error: refundValueError } = useReadContract({
+        address: auctionContractAddress,
+        abi: auctionABI,
+        functionName: 'pendingReturnAmount',
+        args: [address]
+    });
+
+    const queryClient = useQueryClient();
+    const { data: hash, mutate: withdraw, isPending: isWaitingForUser, error: userError } = useWriteContract();
+    const { data: receipt, isPending, isFetching, error: receiptError } = useWaitForTransactionReceipt({
+        hash
+    });
+
+    useEffect(() => {
+        if (hash && receipt?.status === 'success') {
+            queryClient.invalidateQueries();
+        }
+    }, [receipt, hash, queryClient]);
+
+
+    function onWithdraw(e) {
+        e.preventDefault();
+
+        withdraw({
+            address: auctionContractAddress,
+            abi: auctionABI,
+            functionName: 'withdraw'
+        })
+    }
+
+    if (refundValueError) {
+        return <p>Failed to fetch refund value.</p>;
+    }
+
+    if (isRefundValuePending || !refundValue) {
+        // don't render the component if there is nothing to withdraw
+        return null;
+    }
+
+    return (
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow lg:col-span-2 flex flex-col gap-4">
+            <div className="flex justify-between items-start mb-4">
+                <h3 className="font-bold text-lg">
+                    Withdraw
+                </h3>
+                <span className="text-xs px-2 py-1 rounded-full font-semibold bg-slate-100 text-slate-600">Refund</span>
+            </div>
+            <div className="flex flex-col lg:flex-row lg:justify-between gap-4">
+                <div className="flex flex-col w-full items-center justify-center gap-5 py-5">
+                    <img alt="withdraw" className="w-14 h-14" src="https://img.icons8.com/ios-filled/50/2563eb/money.png" />
+                    <p className="text-center text-slate-500">
+                        Withdraw your funds
+                    </p>
+                </div>
+                <div className="flex flex-col gap-5 w-full items-center justify-center">
+                    <p className="text-slate-500 text-center">
+                        Click the button to withdraw your funds
+                    </p>
+                    <button type="button" disabled={isWaitingForUser || (isPending && isFetching)} onClick={onWithdraw} 
+                            className="bg-black text-white px-5 py-2 cursor-pointer rounded-xl disabled:opacity-50 mb-3 w-full">
+                        Withdraw
+                    </button>
+
+                    {isWaitingForUser && <p>Waiting for user...</p>}
+                    {(userError || receiptError) && <p>Failed to withdraw.</p>}
+                    {(isFetching && isPending) && <p>Waiting for receipt...</p>}
+                    {receipt && <p>Status: {receipt.status}</p>}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+export function AuctionPage() {
+    const { address, isConnected } = useConnection();
+    const [isReady, setIsReady] = useState(false);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!isConnected) {
+            navigate("/status");
+        } else if (address && !isReady) {
+            setIsReady(true);
+        }
+    }, [isConnected, address, isReady, navigate, setIsReady]);
+
+    const [lastEvent, setLastEvent] = useState<string>();
+    const queryClient = useQueryClient();
+    useWatchContractEvent({
+        address: auctionContractAddress,
+        abi: auctionABI,
+        onLogs: (logs) => {
+            if (logs.length > 0) {
+                setLastEvent(logs[logs.length - 1].eventName);
+                queryClient.invalidateQueries();
+            }
+        }
+    })
+
+    if (!isConnected || !address || !isReady) {
+        return <LoadingView />;
+    }
+
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-y-10 gap-x-6">
+            <WalletBalanceCard address={address} />
+            <BestOfferCard address={address} />
+            <LastEventCard event={lastEvent} />
+            <PendingReturnCard address={address} />
+            <MakeBidCard />
+            <WithdrawCard address={address} />
+        </div>
+    )
+}
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { formatEther, isHash, type Hash } from "viem";
+import { useTransaction } from "wagmi";
+
+
+export function HomePage() {
+  const [inputHash, setInputHash] = useState('');
+  const [confirmedHash, setConfirmedHash] = useState<Hash | undefined>(undefined);
+
+  const { data: transaction, isPending, error } = useTransaction({
+    hash: confirmedHash,
+    query: {
+      retry: 1
+    }
+  })
+
+  function onSubmit(e) {
+    e.preventDefault();
+    if (isHash(inputHash)) {
+      setConfirmedHash(inputHash);
+    } else {
+      toast.error('Enter a valid transaction hash!');
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-10"> 
+      <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-6">
+        <h1 className="text-lg font-bold">Transaction Explorer</h1>
+        <p>Enter a transaction hash to get more details...</p>
+
+        <form className="flex flex-row gap-5 w-full" onSubmit={onSubmit}>
+          <input type="text" value={inputHash} onChange={(e) => {
+            setInputHash(e.target.value);
+            if (confirmedHash) {
+              setConfirmedHash(undefined);
+            }
+          }} className="w-full border border-gray-300 p-2 rounded-lg" placeholder="Enter hash..." />
+          <button 
+            type="submit" 
+            disabled={!inputHash} 
+            className="bg-black text-white p-2 px-6 rounded-xl cursor-pointer disabled:opacity-50"
+          >
+            Run
+          </button>
+        </form>
+      </div>
+
+      {!!confirmedHash && (
+        <div className="bg-white p-0 rounded-xl overflow-hidden border border-slate-200 shadown-sm flex flex-col gap-6">
+          <div className="bg-slate-100 px-6 py-4">
+            <h2 className="text-lg font-bold">Details</h2>
+          </div>
+
+          <div className="p-6 pt-0">
+            {error && <p>An error occurred. Please enter a valid hash.</p>}
+            {isPending && <p>Loading details...</p>}
+
+            {!!transaction && (
+              <div className="grid grid-cols-6 w-full gap-y-6">
+
+                  <div className="opacity-50">Hash</div>
+                  <div className="col-span-5 break-all">{transaction.hash}</div>
+                
+                  <div className="opacity-50">From</div>
+                  <div className="col-span-5">{transaction.from}</div>
+                
+                  <div className="opacity-50">To</div>
+                  <div className="col-span-5">{transaction.to || 'N/A'}</div>
+                
+                  <div className="opacity-50">Value</div>
+                  <div className="col-span-5">{formatEther(transaction.value)} ETH</div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,79 @@
+import { useEffect } from "react";
+import { formatEther, type Address } from "viem";
+import { useBalance, useBlockNumber, useConnect, useConnection, useConnectors, useDisconnect } from "wagmi";
+
+function WalletDetails({ address }: { address: Address }) {
+    const { data: blockNumber } = useBlockNumber({ watch: true });
+    const { data: balance, isPending, error, refetch: refetchBalance } = useBalance({ address });
+    const { mutate: disconnect } = useDisconnect();
+
+    useEffect(() => {
+        refetchBalance();
+    }, [blockNumber]);
+
+    return (
+        <div className="flex flex-col gap-6">
+            <h1 className="text-lg font-bold">You are connected</h1>
+
+            <p className="break-all">Your address is: {address}</p>
+
+            {isPending && <p>Loading balance...</p>}
+            {error && <p>An error occurred.</p>}
+
+            {blockNumber && <p>Block number: {blockNumber.toLocaleString()}</p>}
+            {balance && <p>Balance: {formatEther(balance.value)} ETH</p>}
+
+            <div className="flex flex-row">
+                <button
+                    className="bg-black text-white py-2 px-6 rounded-xl cursor-pointer"
+                    onClick={() => disconnect()}
+                >
+                    Disconnect
+                </button>
+            </div>
+        </div>
+    )
+}
+
+
+
+function ConnectWallet() {
+    const connectors = useConnectors();
+    const { mutate: connect } = useConnect();
+
+    return (
+        <div className="flex flex-col gap-6">
+            <h1 className="text-lg font-bold">Connect your wallet</h1>
+
+            <p>Choose an option from the list below:</p>
+            <div className="flex flex-row gap-6">
+                {connectors.map(connector => (
+                    <button
+                        key={connector.id}
+                        onClick={() => connect({ connector })}
+                        className="bg-black text-white px-6 py-2 rounded-lg cursor-pointer"
+                    >
+                        Connect {connector.name}
+                    </button>
+                ))}
+            </div>
+
+        </div>
+    )
+}
+
+
+export function StatusPage() {
+    const { address, isConnected } = useConnection();
+
+    return (
+        <div className="bg-white p-5 border border-slate-200 shadow-sm rounded-xl flex flex-col gap-6">
+            {isConnected && address ? (
+                <WalletDetails address={address} />
+            ) : (
+                <ConnectWallet />
+            )}
+
+        </div>
+    );
+}
@@ -0,0 +1,85 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { isAddress, parseEther } from "viem";
+import { useConnection, useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
+
+
+export function TransferPage() {
+  const { isConnected } = useConnection();
+  const navigate = useNavigate();
+
+  const [inputAddress, setInputAddress] = useState('');
+  const [inputValue, setInputValue] = useState('');
+
+  const { data: transactionHash, isPending: isSendingTransaction, error, mutate: sendTransaction } = useSendTransaction();
+  const { data: receipt, isPending, isFetching } = useWaitForTransactionReceipt({
+    hash: transactionHash,
+    query: {
+      // not stricly needed, because if transactionHash is not defined,
+      // in current versions of wagmi it defaults to disabled
+      // (but, it's good to know so you can control dependent queries)
+      enabled: !!transactionHash
+    }
+  });
+
+  useEffect(() => {
+    if (!isConnected) {
+      navigate('/status');
+    }
+  }, [isConnected, navigate]);
+
+  function onSubmit(e) {
+    e.preventDefault();
+
+    if (!isAddress(inputAddress)) {
+      return toast.error('Invalid address.');
+    }
+
+    if (!inputValue || isNaN(Number(inputValue)) || Number(inputValue) <= 0) {
+      return toast.error('Invalid value.');
+    }
+
+    sendTransaction({
+      to: inputAddress,
+      value: parseEther(inputValue)
+    })
+  }
+
+  return (
+    <div className="bg-white border border-slate-200 rounded-xl p-5 flex flex-col gap-6 shadow-sm">
+      <h1 className="text-lg font-bold">Transfer ETH</h1>
+
+      <form onSubmit={onSubmit} className="flex flex-col gap-6">
+        <input 
+          type="text" 
+          className="border border-gray-300 p-2 rounded-lg" 
+          placeholder="Enter address." 
+          value={inputAddress} 
+          onChange={e => setInputAddress(e.target.value)} 
+        />
+        <input 
+          type="text" 
+          className="border border-gray-300 p-2 rounded-lg" 
+          placeholder="Enter value." 
+          value={inputValue} 
+          onChange={e => setInputValue(e.target.value)} 
+        />
+
+        <div className="flex flex-row">
+          <button 
+            type="submit" 
+            disabled={!inputAddress || !inputValue} 
+            className="bg-black text-white px-5 py-2 cursor-pointer rounded-xl disabled:opacity-50"
+          >
+            {isSendingTransaction ? 'Sending...' : 'Send'}
+          </button>
+        </div>
+      </form>
+
+      {error && <p>An error occurred. Please check the address and the value.</p>}
+      {(isPending && isFetching) && <p>Confirming...</p>}
+      {receipt && <p>Status: {receipt.status}</p>}
+    </div>
+  );
+}
@@ -0,0 +1,103 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration
+} from "react-router";
+
+import { ToastContainer } from "react-toastify";
+
+import { WagmiProvider } from "wagmi";
+import { config } from "./config/wagmi";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+const queryClient = new QueryClient();
+
+import type { Route } from "./+types/root";
+import "./app.css";
+import { Header } from "./components/layout/Header";
+import { Footer } from "./components/layout/Footer";
+import { Sidebar } from "./components/layout/Sidebar";
+
+export const links: Route.LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous"
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+  }
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="bg-slate-50 text-slate-900 font-sans">
+        <div>
+          <Header />
+          <main className="max-w-6xl mx-auto px-4 py-8 min-h-[calc(100vh-15rem)]">
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+              <Sidebar />
+
+              <div className="lg:col-span-9 space-y-6">{children}</div>
+            </div>
+          </main>
+          <Footer />
+        </div>
+        <ToastContainer position="top-center" autoClose={5000} theme="colored" />
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <Outlet />
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}
@@ -0,0 +1,8 @@
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
+
+export default [
+    index("routes/home.tsx"),
+    route("status", "routes/status.tsx"),
+    route("transfer", "routes/transfer.tsx"),
+    route("auction", "routes/auction.tsx")
+] satisfies RouteConfig;
@@ -0,0 +1,7 @@
+import { AuctionPage } from "~/pages/auction/AuctionPage";
+
+export default function Auction() {
+    return (
+        <AuctionPage />
+    )
+}
@@ -0,0 +1,12 @@
+import { HomePage } from "../pages/home/HomePage";
+
+export function meta() {
+  return [
+    { title: "Wagmi Starter" },
+    { name: "description", content: "Welcome to Wagmi!" },
+  ];
+}
+
+export default function Home() {
+  return <HomePage />;
+}
@@ -0,0 +1,7 @@
+import { StatusPage } from "~/pages/status/StatusPage";
+
+export default function Status() {
+    return (
+        <StatusPage />
+    )
+}
@@ -0,0 +1,7 @@
+import { TransferPage } from "~/pages/transfer/TransferPage";
+
+export default function Transfer() {
+    return (
+        <TransferPage />
+    )
+}