send Transaction TO Cartesi

packages/nextjs/components/explore/Explorer.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useEffect, useState } from "react";
+// import { inputBoxAbi } from "./resources";
+import { ethers } from "ethers";
+// import { useContractWrite } from "wagmi";
+import { notification } from "~~/utils/scaffold-eth";
+
+const inputBoxAbi = [
+  {
+    inputs: [],
+    name: "InputSizeExceedsLimit",
+    type: "error",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "dapp",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "inputIndex",
+        type: "uint256",
+      },
+      {
+        indexed: false,
+        internalType: "address",
+        name: "sender",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "bytes",
+        name: "input",
+        type: "bytes",
+      },
+    ],
+    name: "InputAdded",
+    type: "event",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_dapp",
+        type: "address",
+      },
+      {
+        internalType: "bytes",
+        name: "_input",
+        type: "bytes",
+      },
+    ],
+    name: "addInput",
+    outputs: [
+      {
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32",
+      },
+    ],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_dapp",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "_index",
+        type: "uint256",
+      },
+    ],
+    name: "getInputHash",
+    outputs: [
+      {
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_dapp",
+        type: "address",
+      },
+    ],
+    name: "getNumberOfInputs",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+];
+
+export const Explorer = () => {
+  const [input, setInput] = useState<string>();
+  const [provider, setProvider] = useState<ethers.JsonRpcProvider>();
+  const [signer, setSigner] = useState<ethers.JsonRpcSigner>();
+  const [InputContract, setContract] = useState<ethers.Contract>();
+
+  useEffect(() => {
+    // Connect to an Ethereum node
+    const connectToProvider = async () => {
+      const newProvider = new ethers.JsonRpcProvider("https://f71a-212-175-155-170.ngrok-free.app");
+      setProvider(newProvider);
+
+      const newSigner = await newProvider.getSigner();
+      setSigner(newSigner);
+
+      // Replace 'CONTRACT_ADDRESS' and add the actual ABI of your smart contract
+      const contractAddress = "0x59b22D57D4f067708AB0c00552767405926dc768";
+      const contractABI = inputBoxAbi;
+      const newContract = new ethers.Contract(contractAddress, contractABI, newSigner);
+      setContract(newContract);
+    };
+
+    connectToProvider();
+  }, []);
+
+  // const INPUT = '{\n  "sample": "https://gateway.lighthouse.storage/ipfs/QmcRXYN3kNHYyxkJHYEvd84twchVyc8N2oNa4j7vMwR1om",\n  "speech": "Unlock new possibilities with cutting-edge technology. Experience innovation at your fingertips. Embrace the future today."\n}'
+  // const { data, isSuccess } = useContractWrite({
+  //   address: "0x59b22D57D4f067708AB0c00552767405926dc768", //inputBoxAddress
+  //   abi: inputBoxAbi,
+  //   functionName: "addInput",
+  // });
+
+  const parseInputAndSendTx = async () => {
+    try {
+      console.log(inputBoxAbi);
+      const mrinoDapp = "0x70ac08179605af2d9e75782b8decdd3c22aa4d0c";
+      const payload = ethers.toUtf8Bytes(input as string);
+      const tx = await InputContract?.addInput(mrinoDapp, payload);
+      console.log("string to send", "hello!");
+      console.log(tx);
+
+      notification.success(`Transaction completed successfully!`, {
+        icon: "🎉",
+      });
+    } catch (e) {
+      console.log(`${e}`);
+    }
+  };
+
+  return (
+    <div className="p-4">
+      <div className="flex flex-col items-center justify-center max-w-sm text-black">
+        {/* <textarea
+          placeholder={`Enter Your Script`}
+          value={1}
+          onChange={e => setPrice(e.target.value)}
+          className="mt-4 p-2 border border-gray-300 rounded"
+        /> */}
+        <p>Mock Call To Cartesi VM!</p>
+        <div>
+          Send Input <br />
+          Input:{" "}
+          <textarea
+            // type="text"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+          />
+          <button onClick={() => parseInputAndSendTx()} className="mt-2 bg-blue-500 text-white p-2 rounded">
+            Submit
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/nextjs/components/explore/index.tsx

@@ -0,0 +1 @@
+export * from "./Explorer";

packages/nextjs/components/explore/resources.ts

@@ -0,0 +1,105 @@
+export const inputBoxAbi = [
+  {
+    inputs: [],
+    name: "InputSizeExceedsLimit",
+    type: "error",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "dapp",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "inputIndex",
+        type: "uint256",
+      },
+      {
+        indexed: false,
+        internalType: "address",
+        name: "sender",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "bytes",
+        name: "input",
+        type: "bytes",
+      },
+    ],
+    name: "InputAdded",
+    type: "event",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_dapp",
+        type: "address",
+      },
+      {
+        internalType: "bytes",
+        name: "_input",
+        type: "bytes",
+      },
+    ],
+    name: "addInput",
+    outputs: [
+      {
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32",
+      },
+    ],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_dapp",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "_index",
+        type: "uint256",
+      },
+    ],
+    name: "getInputHash",
+    outputs: [
+      {
+        internalType: "bytes32",
+        name: "",
+        type: "bytes32",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "_dapp",
+        type: "address",
+      },
+    ],
+    name: "getNumberOfInputs",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+];

packages/nextjs/package.json

@@ -26,6 +26,7 @@
     "@web3auth/web3auth-wagmi-connector": "^5.0.1",
     "blo": "^1.0.1",
     "daisyui": "^3.5.1",
+    "ethers": "^6.8.1",
     "next": "^13.1.6",
     "nextjs-progressbar": "^0.0.16",
     "qrcode.react": "^3.1.0",

packages/nextjs/pages/explore.tsx

@@ -0,0 +1,32 @@
+import type { NextPage } from "next";
+import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import { MetaHeader } from "~~/components/MetaHeader";
+import { Explorer } from "~~/components/explore";
+
+const Home: NextPage = () => {
+  return (
+    <>
+      <MetaHeader />
+      <div className="flex items-center flex-col flex-grow pt-10">
+        <div className="px-5">
+          <h1 className="text-center mb-8">
+            <span className="block text-2xl mb-2">Welcome to</span>
+            <span className="block text-4xl font-bold">Dub3.ai</span>
+          </h1>
+        </div>
+
+        <div className="flex-grow bg-base-300 w-full max-w-2xl mt-16 px-8 py-12">
+          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
+            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-2xl rounded-3xl">
+              <ExclamationCircleIcon className="h-8 w-8 fill-secondary" />
+              <p>Explore Speakers</p>
+              <Explorer />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Home;

packages/nextjs/services/web3/wagmiConnectors.tsx

@@ -21,7 +21,7 @@ const configuredNetwork = getTargetNetwork();
 const { onlyLocalBurnerWallet } = scaffoldConfig;
 
 // We always want to have mainnet enabled (ENS resolution, ETH price, etc). But only once.
-const enabledChains = [chains.polygonMumbai, chains.sepolia];
+const enabledChains = [chains.polygonMumbai, chains.sepolia, chains.localhost];
 
 /**
  * Chains for the app