Up wagmi rainbow viem & add contract interaction in example app (#18)

.changeset/new-cougars-repeat.md

@@ -0,0 +1,5 @@
+---
+"burner-connector": patch
+---
+
+update wagmi, viem & rainbowkit versions

CONTRIBUTING.md

@@ -0,0 +1,29 @@
+## Local setup
+
+1. Build the package:
+
+```bash
+pnpm run build
+```
+
+This builds the `burner-connector` package.
+
+2. Start the example repo:
+
+```bash
+pnpm run dev
+```
+
+This will start a local server on `http://localhost:3000` with the example app linked to local package
+
+The burner wallet should be automatically connected to sepolia network, and can interact with the [`YourContract`](https://sepolia.etherscan.io/address/0x0D25b202D1B5126ECFcaeFa85f7a37ed86EF79ea) deployed on the sepolia.
+
+## Testing with hardhat
+
+For this we will be needing a `YourContract` contract deployed on the hardhat network.
+
+Follow the [quick start guide of Scaffold-ETH](https://github.com/scaffold-eth/scaffold-eth-2?tab=readme-ov-file#quickstart) till point 3 to deploy `YourContract` on hardhat network.
+
+Since the SE-2 first deployment of `YourContract` results in same address, we already have the abi and address present in `example/contracts/deployedContract.ts`
+
+Running `pnpm run dev` and switching to hardhat network in the burner wallet should now allow you to interact with the `YourContract` deployed on hardhat network.

README.md

@@ -73,18 +73,6 @@ const wagmiConfig = createConfig({
 });
 ```
 
-## Local setup
+---
 
-1. Build the package:
-
-```bash
-pnpm run build
-```
-
-2. Start the example repo:
-
-```bash
-pnpm run dev
-```
-
-This will start a local server on `http://localhost:3000` with the example app linked to local package
+Checkout [CONTRIBUTING.md](/CONTRIBUTING.md) for more details on how to set it up locally.

example/app/ScaffoldETHProvider.tsx

@@ -1,42 +1,10 @@
 "use client";
 
-import {
-  connectorsForWallets,
-  RainbowKitProvider,
-} from "@rainbow-me/rainbowkit";
-import { createConfig, WagmiProvider } from "wagmi";
-import { mainnet, polygon, optimism, arbitrum, base } from "wagmi/chains";
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { WagmiProvider } from "wagmi";
+import { Toaster } from "react-hot-toast";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
-import { createClient, http } from "viem";
-import { rainbowkitBurnerWallet } from "burner-connector";
-
-const wallets = [metaMaskWallet, rainbowkitBurnerWallet];
-const walletConnectProjectID = "3a8170812b534d0ff9d794f19a901d64";
-const wagmiConnectors = connectorsForWallets(
-  [
-    {
-      groupName: "Supported Wallets",
-      wallets,
-    },
-  ],
-
-  {
-    appName: "scaffold-eth-2",
-    projectId: walletConnectProjectID,
-  },
-);
-
-const chains = [mainnet, polygon, optimism, arbitrum, base] as const;
-
-const wagmiConfig = createConfig({
-  chains: chains,
-  connectors: wagmiConnectors,
-  ssr: true,
-  client({ chain }) {
-    return createClient({ chain, transport: http() });
-  },
-});
+import { wagmiConfig } from "./wagmiConfig";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -56,6 +24,7 @@ export const ScaffoldEthAppWithProviders = ({
       <QueryClientProvider client={queryClient}>
         <RainbowKitProvider>{children}</RainbowKitProvider>
       </QueryClientProvider>
+      <Toaster />
     </WagmiProvider>
   );
 };

example/app/components/Example.tsx

@@ -0,0 +1,74 @@
+import {
+  useAccount,
+  useReadContract,
+  useSignMessage,
+  useWriteContract,
+} from "wagmi";
+import { FaucetButton } from "./FaucetButton";
+import toast from "react-hot-toast";
+import deployedContracts from "../contracts/deployedContracts";
+
+export const Example = () => {
+  const { isConnected, chain } = useAccount();
+  const { signMessageAsync } = useSignMessage();
+
+  const { writeContractAsync, isPending } = useWriteContract();
+
+  console.log("isPending", isPending);
+  const yourContract =
+    chain?.id && chain.id in deployedContracts
+      ? deployedContracts[chain.id as 11155111 | 31337].YourContract
+      : deployedContracts["11155111"].YourContract;
+
+  const { data: totalCounter } = useReadContract({
+    ...yourContract,
+    functionName: "totalCounter",
+  });
+
+  const handleSetGreetings = async () => {
+    try {
+      await writeContractAsync({
+        ...yourContract,
+        functionName: "setGreeting",
+        args: ["Hello World"],
+      });
+      toast.success("Greetings send");
+    } catch (err) {
+      console.log(err, "err");
+      toast.error("Error Sending Message");
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <FaucetButton />
+      {isConnected && (
+        <button
+          className="h-8 px-4 text-sm text-indigo-100 transition-colors duration-150 bg-indigo-700 rounded-lg focus:shadow-outline hover:bg-indigo-800"
+          onClick={async () => {
+            try {
+              const signature = await signMessageAsync({
+                message: "hello",
+              });
+              console.log("Signature is :", signature);
+              toast.success("Message Signed");
+            } catch (err) {
+              console.log(err, "err");
+              toast.error("Error Signing Message");
+            }
+          }}
+        >
+          Sign Message
+        </button>
+      )}
+      <button
+        className="h-8 px-4 text-sm text-indigo-100 transition-colors duration-150 bg-indigo-700 rounded-lg focus:shadow-outline hover:bg-indigo-800"
+        disabled={isPending}
+        onClick={handleSetGreetings}
+      >
+        {isPending ? "Sending..." : "Send Hello world greeting"}
+      </button>
+      <p>Reading total count: {totalCounter ? totalCounter.toString() : 0}</p>
+    </div>
+  );
+};

example/app/components/FaucetButton.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { Chain, createWalletClient, http, parseEther } from "viem";
+import { hardhat } from "viem/chains";
+import { useAccount } from "wagmi";
+
+// Number of ETH faucet sends to an address
+const NUM_OF_ETH = "1";
+const FAUCET_ADDRESS = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266";
+
+const localWalletClient = createWalletClient({
+  chain: hardhat as Chain,
+  transport: http(),
+});
+
+/**
+ * FaucetButton button which lets you grab eth.
+ */
+export const FaucetButton = () => {
+  const { address, chain: ConnectedChain } = useAccount();
+
+  const [loading, setLoading] = useState(false);
+
+  let displayAddress = address?.slice(0, 6) + "..." + address?.slice(-4);
+  const sendETH = async () => {
+    if (!address) return;
+    try {
+      setLoading(true);
+      await localWalletClient.sendTransaction({
+        account: FAUCET_ADDRESS,
+        to: address,
+        value: parseEther(NUM_OF_ETH),
+      });
+      toast.success(`Sent ${NUM_OF_ETH} ETH to ${displayAddress}`);
+      setLoading(false);
+    } catch (error) {
+      toast.error("Error sending the ETH");
+      console.error("⚡️ ~ file: FaucetButton.tsx:sendETH ~ error", error);
+      setLoading(false);
+    }
+  };
+
+  // Render only on local chain
+  if (ConnectedChain?.id !== hardhat.id) {
+    return null;
+  }
+
+  return (
+    <div>
+      <button
+        className="h-8 px-4 m-2 text-sm text-indigo-100 transition-colors duration-150 bg-indigo-700 rounded-lg focus:shadow-outline hover:bg-indigo-800"
+        onClick={sendETH}
+        disabled={loading}
+      >
+        {!loading ? "Get ETH" : "Loading..."}
+      </button>
+    </div>
+  );
+};