Eth wagmi Read and Write Contract changes

src/Account.jsx

@@ -1,5 +1,5 @@
 
-import { useAccount, useBalance, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi'
+import { useAccount, useBalance, useDisconnect} from 'wagmi'
 
 export function Account() {
     const { address } = useAccount()

src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.jsx

@@ -1,23 +1,37 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { WagmiProvider } from 'wagmi'
+import { WagmiProvider, useAccount } from 'wagmi'
 import { config } from './config'
 import { WalletOptions } from './WalletOptions'
 import { Account } from './Account'
 import { SendTransaction } from './SendTransaction'
+import { MintNFT } from './Mint'
 
 const queryClient = new QueryClient()
+function ConnectWallet(){
+  const {isConnected} = useAccount()
+  if(isConnected) return <Account />
+  return <WalletOptions />
+}
 
 function App() {
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}> 
-        <WalletOptions />
-        <Account />
-        <SendTransaction />
+        <div className="centered-container">  
+          <div id="container1">
+            <ConnectWallet />
+          </div>
+          <br />
+          <Account />
+          <br />
+          <SendTransaction />
+          <br />
+          <MintNFT />
+        </div>
       </QueryClientProvider> 
     </WagmiProvider>
   )
 }
 
 
-export default App;
+export default App;

src/Mint.jsx

@@ -0,0 +1,27 @@
+
+import { useWriteContract } from 'wagmi';
+import { abi } from './abi';
+
+export function MintNFT() {
+  const { data: hash, writeContract } = useWriteContract();
+
+  async function submit(e) { 
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const tokenId = formData.get('tokenId');
+    writeContract({
+      address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
+      abi,
+      functionName: 'mint',
+      args: [BigInt(tokenId)],
+    });
+  } 
+
+  return (
+    <form onSubmit={submit}>
+      <input name="tokenId" placeholder="69420" required />
+      <button type="submit">Mint</button>
+      {hash && <div>Transaction Hash: {hash}</div>}
+    </form>
+  );
+}

src/ReadContract.jsx

@@ -0,0 +1,49 @@
+import { useReadContracts } from 'wagmi';
+
+const wagmiContractConfig = {
+    address: '0xYourContractAddressHere', // Replace with your contract address
+    abi: [/* ABI array here */], // Replace with your contract's ABI
+  };
+
+function ReadContract() {
+  const { 
+    data,
+    error,
+    isPending,
+  } = useReadContracts({ 
+    contracts: [{ 
+      ...wagmiContractConfig, // ... this wil pul address and abi from wagmicontractconfig
+      functionName: 'balanceOf',
+      args: ['0x03A71968491d55603FFe1b11A9e23eF013f75bCF'],
+    }, { 
+      ...wagmiContractConfig, 
+      functionName: 'ownerOf', 
+      args: [69n], 
+    }, { 
+      ...wagmiContractConfig, 
+      functionName: 'totalSupply', 
+    }] 
+  });
+
+  const [balance, ownerOf, totalSupply] = data || []; 
+
+  if (isPending) return <div>Loading...</div>;
+
+  if (error) {
+    return (
+      <div>
+        Error: {error.shortMessage || error.message}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div>Balance: {balance ? balance.toString() : 'not applicable'}</div>
+      <div>Owner of Token 69: {ownerOf ? ownerOf.toString() : 'not applicable'}</div> 
+      <div>Total Supply: {totalSupply ? totalSupply.toString() : 'not applicable'}</div> 
+    </>
+  );
+}
+
+export default ReadContract;

src/SendTransaction.jsx

@@ -1,10 +1,14 @@
 
 
-import { useSendTransaction } from 'wagmi'
+import { useSendTransaction , useWaitForTransactionReceipt } from 'wagmi'
 import { parseEther } from 'viem'
 
 export function SendTransaction() {
     const { data: hash, sendTransaction } = useSendTransaction()
+    const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForTransactionReceipt({
+      hash,
+    })
 
     async function sendTx() {
         const to = document.getElementById("to").value;
@@ -15,8 +19,10 @@ export function SendTransaction() {
     // Todo: use refs here
     return <div>
       <input id="to" placeholder="0xA0Cf…251e" required />
-      <input id="value" placeholder="0.05" required />
-      <button onClick={sendTx}>Send</button>
+      <input style={{margin: '8px'}} id="value" placeholder="0.05" required />
+      <button style={{margin: '8px', padding: '10px'}} onClick={sendTx}>Send</button>
       {hash && <div>Transaction Hash: {hash}</div>}
+      {isConfirming && <div>Waiting for confirmation...</div>}
+      {isConfirmed && <div>Transaction confirmed.</div>}
     </div>
 }

src/abi.ts

@@ -0,0 +1,9 @@
+export const abi = [
+    {
+      name: 'mint',
+      type: 'function',
+      stateMutability: 'nonpayable',
+      inputs: [{ internalType: 'uint32', name: 'tokenId', type: 'uint32' }],
+      outputs: [],
+    },
+  ] as const

src/config.ts

@@ -1,5 +1,5 @@
 import { http, createConfig } from 'wagmi'
-import { base, mainnet, optimism } from 'wagmi/chains'
+import { base, mainnet, optimism, sepolia } from 'wagmi/chains'
 import { injected, metaMask, safe, walletConnect } from 'wagmi/connectors'
 
 const projectId = '<WALLETCONNECT_PROJECT_ID>'
@@ -9,11 +9,13 @@ export const config = createConfig({
   connectors: [
     injected(),
     walletConnect({ projectId }),
-    metaMask(),
     safe(),
   ],
   transports: {
     [mainnet.id]: http(),
     [base.id]: http(),
+    [optimism.id]:http(),
+    [sepolia.id]: http(),
+
   },
 })

src/index.css

@@ -1,68 +1,52 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+body {
+  background-color: #1a1a1a; /* Dark background */
+  color: #ffffff; /* White text color */
+  font-family: Arial, sans-serif; /* Font style */
+  display: flex;
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
+  height: 100vh; /* Full viewport height */
+  margin: 0; /* Remove default margin */
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+.centered-container {  /* New class for centering all content */
+  display: flex;
+  flex-direction: column; /* Stack items vertically */
+  align-items: center;    /* Center items horizontally */
 }
 
-body {
-  margin: 0;
+.sendTransactionDiv {  /* Updated class for centering individual items */
   display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  flex-direction: column; /* Stack input and button vertically */
+  align-items: center;     /* Center items horizontally */
+  margin-top: 20px; /* Space above the transaction div */
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+input {
+  padding: 10px; /* Padding for input fields */
+  margin: 5px 0; /* Margin for spacing */
+  border: 1px solid #ccc; /* Border for input fields */
+  border-radius: 5px; /* Rounded corners */
+  width: 200px; /* Fixed width for input fields */
+  background-color: #2a2a2a; /* Dark background for input */
+  color: #ffffff; /* White text color for input */
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
+.button-container {
+  display: flex; /* Flexbox for button layout */
+  gap: 10px; /* Space between buttons */
+  margin-top: 10px; /* Space above buttons */
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+button {
+  padding: 10px 20px; /* Padding for buttons */
+  border: none; /* Remove default border */
+  border-radius: 5px; /* Rounded corners */
+  background-color: #007bff; /* Button background color */
+  color: white; /* Button text color */
+  cursor: pointer; /* Pointer cursor on hover */
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+button:hover {
+  background-color: #0056b3; /* Darker button color on hover */
 }

src/main.jsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
+
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
+
     <App />
-  </StrictMode>,
+  ,
 )