• Create component that shows the stake button

• Add abi.ts

export const abi = [
	{
		"inputs": [
			{
				"internalType": "uint256",
				"name": "amount",
				"type": "uint256"
			}
		],
		"name": "stake",
		"outputs": [],
		"stateMutability": "payable",
		"type": "function"
	},
	{
		"inputs": [
			{
				"internalType": "uint256",
				"name": "amount",
				"type": "uint256"
			}
		],
		"name": "unstake",
		"outputs": [],
		"stateMutability": "payable",
		"type": "function"
	},
	{
		"inputs": [
			{
				"internalType": "address",
				"name": "",
				"type": "address"
			}
		],
		"name": "stakedBalances",
		"outputs": [
			{
				"internalType": "uint256",
				"name": "",
				"type": "uint256"
			}
		],
		"stateMutability": "view",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "totalStaked",
		"outputs": [
			{
				"internalType": "uint256",
				"name": "",
				"type": "uint256"
			}
		],
		"stateMutability": "view",
		"type": "function"
	}
]

• Create the Dashboard component

import { useWriteContract, useReadContract } from 'wagmi'
import { abi } from "./abi";

export function Dashboard() {
    const { data: hash, writeContract } = useWriteContract()

    return <div className="h-screen w-scren flex justify-center items-center">
        <div>
            <button className='mx-2 border rounded p-2 text-2xl' onClick={() => {
                writeContract({
                    address: '0x51fac1b64f2329519e68595937ea58eb83803c91',
                    abi,
                    functionName: 'stake',
                    args: [BigInt(1000000000000000000)],
                    value: BigInt(1000000000000000000)
                })
            }}>
                Stake
            </button>
            <div>
                <ShowStake />
            </div>
        </div>
    </div>
}

function ShowStake() {
    const { 
        data: balance,
      } = useReadContract({
        address: '0x51fac1b64f2329519e68595937ea58eb83803c91',
        abi,
        functionName: 'stakedBalances',
        args: ['0x2966473D85A76A190697B5b9b66b769436EFE8e5'],
    })
    return <div>
        You have staked {(balance?.toString())} ETH
    </div>
}