From 0dda4f03bcb2c13382697a824c1d15965ff33de9 Mon Sep 17 00:00:00 2001
From: Assad Isah <nottherealalanturing@gmail.com>
Date: Sat, 20 Sep 2025 10:42:08 +0100
Subject: [PATCH] feat: add ContractDemo component for interacting with Proof
 of Fandom contract

---
 app/profile/page.tsx             | 95 ++++++++++++++++++++++++++++++++
 components/web3/ContractDemo.tsx | 95 ++++++++++++++++++++++++++++++++
 lib/abi/ProofOfFandom.json       | 28 ++++++++++
 lib/abi/contracts.ts             | 12 ++++
 4 files changed, 230 insertions(+)
 create mode 100644 app/profile/page.tsx
 create mode 100644 components/web3/ContractDemo.tsx
 create mode 100644 lib/abi/ProofOfFandom.json
 create mode 100644 lib/abi/contracts.ts

diff --git a/app/profile/page.tsx b/app/profile/page.tsx
new file mode 100644
index 0000000..f304d50
--- /dev/null
+++ b/app/profile/page.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import { proofOfFandomContract } from '@/lib/contracts'
+import {
+  useAccount,
+  useReadContract,
+  useWriteContract,
+  useWaitForTransactionReceipt,
+} from 'wagmi'
+import { useState } from 'react'
+
+export default function ContractDemo() {
+  const { address, isConnected } = useAccount()
+  const [minted, setMinted] = useState(false)
+
+  const { data: balance, isLoading: isBalanceLoading } = useReadContract({
+    ...proofOfFandomContract,
+    functionName: 'balanceOf',
+    args: [address!],
+    query: {
+      enabled: isConnected,
+    },
+  })
+
+  const { data: hash, writeContract, isPending } = useWriteContract()
+
+  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForTransactionReceipt({
+      hash,
+    })
+
+  const handleMint = () => {
+    writeContract({
+      ...proofOfFandomContract,
+      functionName: 'mint',
+      args: [],
+    })
+  }
+
+  if (isConfirmed && !minted) {
+    setMinted(true)
+  }
+
+  if (!isConnected) {
+    return (
+      <p className='text-center text-gray-500'>
+        Please connect your wallet to interact with the contract.
+      </p>
+    )
+  }
+
+  return (
+    <div className='p-6 border rounded-lg space-y-4'>
+      <h3 className='text-xl font-bold'>Proof of Fandom Contract</h3>
+
+      <div>
+        <p>Your Fandom Token Balance:</p>
+        {isBalanceLoading ? (
+          <span className='text-gray-400'>Loading...</span>
+        ) : (
+          <span className='text-2xl font-mono'>
+            {balance?.toString() ?? '0'}
+          </span>
+        )}
+      </div>
+
+      <div className='flex flex-col items-start space-y-2'>
+        <button
+          onClick={handleMint}
+          disabled={isPending || isConfirming}
+          className='bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded disabled:bg-gray-400'
+        >
+          {isPending
+            ? 'Check Wallet...'
+            : isConfirming
+              ? 'Minting...'
+              : 'Mint a Fandom Token'}
+        </button>
+        {hash && (
+          <p className='text-sm text-gray-500'>
+            Transaction Hash: {`${hash.slice(0, 6)}...${hash.slice(-4)}`}
+          </p>
+        )}
+        {minted && (
+          <p className='text-green-500 font-bold'>Minted Successfully!</p>
+        )}
+      </div>
+      <p className='text-xs text-gray-400'>
+        Note: This interacts with a dummy contract address. The transaction will
+        be sent but is expected to fail on-chain. This demo is to verify the
+        frontend flow.
+      </p>
+    </div>
+  )
+}
diff --git a/components/web3/ContractDemo.tsx b/components/web3/ContractDemo.tsx
new file mode 100644
index 0000000..f304d50
--- /dev/null
+++ b/components/web3/ContractDemo.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import { proofOfFandomContract } from '@/lib/contracts'
+import {
+  useAccount,
+  useReadContract,
+  useWriteContract,
+  useWaitForTransactionReceipt,
+} from 'wagmi'
+import { useState } from 'react'
+
+export default function ContractDemo() {
+  const { address, isConnected } = useAccount()
+  const [minted, setMinted] = useState(false)
+
+  const { data: balance, isLoading: isBalanceLoading } = useReadContract({
+    ...proofOfFandomContract,
+    functionName: 'balanceOf',
+    args: [address!],
+    query: {
+      enabled: isConnected,
+    },
+  })
+
+  const { data: hash, writeContract, isPending } = useWriteContract()
+
+  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForTransactionReceipt({
+      hash,
+    })
+
+  const handleMint = () => {
+    writeContract({
+      ...proofOfFandomContract,
+      functionName: 'mint',
+      args: [],
+    })
+  }
+
+  if (isConfirmed && !minted) {
+    setMinted(true)
+  }
+
+  if (!isConnected) {
+    return (
+      <p className='text-center text-gray-500'>
+        Please connect your wallet to interact with the contract.
+      </p>
+    )
+  }
+
+  return (
+    <div className='p-6 border rounded-lg space-y-4'>
+      <h3 className='text-xl font-bold'>Proof of Fandom Contract</h3>
+
+      <div>
+        <p>Your Fandom Token Balance:</p>
+        {isBalanceLoading ? (
+          <span className='text-gray-400'>Loading...</span>
+        ) : (
+          <span className='text-2xl font-mono'>
+            {balance?.toString() ?? '0'}
+          </span>
+        )}
+      </div>
+
+      <div className='flex flex-col items-start space-y-2'>
+        <button
+          onClick={handleMint}
+          disabled={isPending || isConfirming}
+          className='bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded disabled:bg-gray-400'
+        >
+          {isPending
+            ? 'Check Wallet...'
+            : isConfirming
+              ? 'Minting...'
+              : 'Mint a Fandom Token'}
+        </button>
+        {hash && (
+          <p className='text-sm text-gray-500'>
+            Transaction Hash: {`${hash.slice(0, 6)}...${hash.slice(-4)}`}
+          </p>
+        )}
+        {minted && (
+          <p className='text-green-500 font-bold'>Minted Successfully!</p>
+        )}
+      </div>
+      <p className='text-xs text-gray-400'>
+        Note: This interacts with a dummy contract address. The transaction will
+        be sent but is expected to fail on-chain. This demo is to verify the
+        frontend flow.
+      </p>
+    </div>
+  )
+}
diff --git a/lib/abi/ProofOfFandom.json b/lib/abi/ProofOfFandom.json
new file mode 100644
index 0000000..9486142
--- /dev/null
+++ b/lib/abi/ProofOfFandom.json
@@ -0,0 +1,28 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "mint",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]
diff --git a/lib/abi/contracts.ts b/lib/abi/contracts.ts
new file mode 100644
index 0000000..47bcfeb
--- /dev/null
+++ b/lib/abi/contracts.ts
@@ -0,0 +1,12 @@
+import proofOfFandomAbi from './abi/ProofOfFandom.json'
+import { flare, songbird } from './chains'
+
+const proofOfFandomAddress =
+  '0x1234567890123456789012345678901234567890' as const
+
+export const proofOfFandomContract = {
+  address: proofOfFandomAddress,
+  abi: proofOfFandomAbi,
+
+  chains: [flare.id, songbird.id],
+}