feat: As a developer, I want to see an end-to-end hello-world tutorial (

#521)

website/package.json

@@ -28,10 +28,12 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lens-protocol/widgets-react": "^2.1.0",
     "@verax-attestation-registry/verax-sdk": "1.1.0",
+    "@wagmi/core": "^1.4.7",
     "@web3modal/wagmi": "^3.5.0",
     "axios": "^1.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-json-view": "^1.21.3",
     "react-router-dom": "^6.19.0",
     "viem": "^1.18.9",
     "wagmi": "^1.4.6"

website/src/App.css

@@ -4,6 +4,16 @@
     text-align: center;
 }
 
+.global-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.global-body {
+    flex: 1;
+}
+
 .logo {
     height: 6em;
     padding: 1.5em;

website/src/App.tsx

@@ -1,24 +1,28 @@
 import "./App.css";
 import { HashRouter, Route, Routes } from "react-router-dom";
 import Home from "./pages/Home.tsx";
-import SDKDemo from "./pages/SDKDemo.tsx";
 import Navbar from "./components/Navbar.tsx";
 import Footer from "./components/Footer.tsx";
+import Tutorials from "./pages/Tutorials.tsx";
 
 function App() {
   return (
-    <HashRouter>
-      <header>
-        <Navbar />
-      </header>
-      <Routes>
-        <Route path="*" element={<Home title={"Verax Attestation Registry"} />} />
-        <Route path="/sdk-demo" element={<SDKDemo title={"Verax | SDK Demo"} />} />
-      </Routes>
-      <footer>
-        <Footer />
-      </footer>
-    </HashRouter>
+    <div className={"global-container"}>
+      <HashRouter>
+        <header>
+          <Navbar />
+        </header>
+        <div className={"global-body"}>
+          <Routes>
+            <Route path="*" element={<Home title={"Verax Attestation Registry"} />} />
+            <Route path="/tutorials" element={<Tutorials title={"Verax | Tutorials"} />} />
+          </Routes>
+        </div>
+        <footer>
+          <Footer />
+        </footer>
+      </HashRouter>
+    </div>
   );
 }
 

website/src/components/AttestationPreview.css

@@ -0,0 +1,5 @@
+.attestation-preview {
+    width: 70%;
+    text-align: start;
+    margin: auto;
+}

website/src/components/AttestationPreview.tsx

@@ -0,0 +1,46 @@
+import { type FunctionComponent, useEffect, useState } from "react";
+import "./AttestationPreview.css";
+import { Attestation, VeraxSdk } from "@verax-attestation-registry/verax-sdk";
+import ReactJson from "react-json-view";
+
+export type SDKDemoProps = {
+  veraxSdk: VeraxSdk;
+  attestationId: string;
+};
+
+const AttestationPreview: FunctionComponent<SDKDemoProps> = ({ veraxSdk, attestationId }) => {
+  const [attestation, setAttestation] = useState<Attestation>();
+
+  useEffect(() => {
+    const fetchAttestation = async () => {
+      const attestation = (await veraxSdk.attestation.getAttestation(attestationId)) as Attestation;
+      setAttestation(attestation);
+    };
+
+    fetchAttestation();
+  }, [attestationId, veraxSdk.attestation]);
+
+  return (
+    <div className={"attestation-preview"}>
+      <ReactJson
+        src={
+          attestation
+            ? JSON.parse(
+                JSON.stringify(attestation, (_key, value) => (typeof value === "bigint" ? value.toString() : value)),
+              )
+            : {}
+        }
+        name={false}
+        displayDataTypes={false}
+        collapsed={false}
+        enableClipboard={false}
+        quotesOnKeys={false}
+        sortKeys={false}
+        theme={"hopscotch"}
+        style={{ backgroundColor: "#12172C", padding: "1rem", borderRadius: "0.5rem" }}
+      />
+    </div>
+  );
+};
+
+export default AttestationPreview;

website/src/components/CreatePortal.tsx

@@ -0,0 +1,46 @@
+import { type FunctionComponent, useState } from "react";
+import { VeraxSdk } from "@verax-attestation-registry/verax-sdk";
+import { useAccount } from "wagmi";
+
+export type SDKDemoProps = {
+  veraxSdk: VeraxSdk;
+  getTxHash: (hash: `0x${string}`) => void;
+};
+
+const CreatePortal: FunctionComponent<SDKDemoProps> = ({ veraxSdk, getTxHash }) => {
+  const [txHash, setTxHash] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  const { isConnected } = useAccount();
+
+  const createPortal = async () => {
+    try {
+      const hash = await veraxSdk.portal.deployDefaultPortal(
+        [],
+        "Tutorial Portal",
+        "This Portal is used for the tutorial",
+        true,
+        "Verax Tutorial",
+      );
+      setTxHash(hash);
+      getTxHash(hash);
+    } catch (e) {
+      console.log(e);
+      if (e instanceof Error) {
+        setError(`Oops, something went wrong: ${e.message}`);
+      }
+    }
+  };
+
+  return (
+    <>
+      <button onClick={createPortal} disabled={!isConnected && txHash !== ""}>
+        Send transaction
+      </button>
+      {txHash !== "" && <p>{`Transaction with hash ${txHash} sent!`}</p>}
+      {error !== "" && <p style={{ color: "red" }}>{error}</p>}
+    </>
+  );
+};
+
+export default CreatePortal;

website/src/components/CreateSchema.tsx

@@ -0,0 +1,65 @@
+import { type FunctionComponent, useEffect, useState } from "react";
+import { VeraxSdk } from "@verax-attestation-registry/verax-sdk";
+import { useAccount } from "wagmi";
+
+export type SDKDemoProps = {
+  veraxSdk: VeraxSdk;
+  getTxHash: (hash: `0x${string}`) => void;
+  getSchemaId: (schemaId: `0x${string}`) => void;
+};
+
+const SCHEMA = "(bool hasCompletedTutorial)";
+
+const CreateSchema: FunctionComponent<SDKDemoProps> = ({ veraxSdk, getTxHash, getSchemaId }) => {
+  const [txHash, setTxHash] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [schemaId, setSchemaId] = useState<string>("");
+  const [schemaExists, setSchemaExists] = useState<boolean>(false);
+
+  const { isConnected } = useAccount();
+
+  useEffect(() => {
+    const fetchSchema = async () => {
+      const schemaId = (await veraxSdk.schema.getIdFromSchemaString(SCHEMA)) as `0x${string}`;
+      const alreadyExists = (await veraxSdk.schema.getSchema(schemaId)) as boolean;
+      setSchemaId(schemaId);
+      setSchemaExists(alreadyExists);
+      getSchemaId(schemaId);
+    };
+
+    fetchSchema();
+  }, [getSchemaId, veraxSdk.schema]);
+
+  useEffect(() => {}, [veraxSdk.schema]);
+
+  const createSchema = async () => {
+    try {
+      const hash = await veraxSdk.schema.create(
+        "Tutorial Schema",
+        "This Schema is used for the tutorial",
+        "https://ver.ax/#/tutorials",
+        SCHEMA,
+      );
+      setTxHash(hash);
+      getTxHash(hash);
+    } catch (e) {
+      console.log(e);
+      if (e instanceof Error) {
+        setError(`Oops, something went wrong: ${e.message}`);
+      }
+    }
+  };
+
+  return (
+    <>
+      <button onClick={createSchema} disabled={!isConnected || schemaExists}>
+        Send transaction
+      </button>
+      {schemaExists && <p>{`Schema already exists, with ID ${schemaId} !`}</p>}
+      {txHash !== "" && <p>{`Transaction with hash ${txHash} sent!`}</p>}
+      {error !== "" && <p style={{ color: "red" }}>{error}</p>}
+    </>
+  );
+};
+
+export default CreateSchema;

website/src/components/Footer.css

@@ -1,10 +1,4 @@
 footer {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 10vh;
-    min-height: 60px;
     margin: 20px 0;
     display: flex;
     justify-content: center;

website/src/components/IssueAttestation.tsx

@@ -0,0 +1,53 @@
+import { type FunctionComponent, useState } from "react";
+import { VeraxSdk } from "@verax-attestation-registry/verax-sdk";
+import { useAccount } from "wagmi";
+
+export type SDKDemoProps = {
+  veraxSdk: VeraxSdk;
+  getTxHash: (hash: `0x${string}`) => void;
+  schemaId: `0x${string}`;
+  portalId: `0x${string}`;
+};
+
+const IssueAttestation: FunctionComponent<SDKDemoProps> = ({ veraxSdk, getTxHash, schemaId, portalId }) => {
+  const [txHash, setTxHash] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  const { address, isConnected } = useAccount();
+
+  const issueAttestation = async () => {
+    if (address) {
+      try {
+        const hash = await veraxSdk.portal.attest(
+          portalId,
+          {
+            schemaId,
+            expirationDate: Math.floor(Date.now() / 1000) + 2592000,
+            subject: address,
+            attestationData: [{ hasCompletedTutorial: true }],
+          },
+          [],
+        );
+        setTxHash(hash);
+        getTxHash(hash);
+      } catch (e) {
+        console.log(e);
+        if (e instanceof Error) {
+          setError(`Oops, something went wrong: ${e.message}`);
+        }
+      }
+    }
+  };
+
+  return (
+    <>
+      <button onClick={issueAttestation} disabled={!isConnected}>
+        Send transaction
+      </button>
+      {txHash !== "" && <p>{`Transaction with hash ${txHash} sent!`}</p>}
+      {error !== "" && <p style={{ color: "red" }}>{error}</p>}
+    </>
+  );
+};
+
+export default IssueAttestation;

website/src/components/Navbar.tsx

@@ -14,6 +14,11 @@ const Navbar: React.FC = () => {
               Home
             </NavLink>
           </li>
+          <li className="nav-item">
+            <NavLink className="navbar-brand" to="/tutorials" end>
+              Tutorials
+            </NavLink>
+          </li>
           <li className="nav-item">
             <a className={"navbar-brand"} href={"https://explorer.ver.ax"} target={"_blank"}>
               Explorer <FontAwesomeIcon icon={faArrowUpRightFromSquare} size={"xs"} />

website/src/main.tsx

@@ -17,14 +17,14 @@ const metadata = {
   url: "https://ver.ax",
 };
 
-const chains = [linea, lineaTestnet, arbitrum, arbitrumGoerli, mainnet];
+const chains = [lineaTestnet, linea, arbitrum, arbitrumGoerli, mainnet];
 const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
 
 createWeb3Modal({
   wagmiConfig,
   projectId,
   chains,
-  defaultChain: linea,
+  defaultChain: lineaTestnet,
   chainImages: {
     59144: LineaMainnetIcon,
     59140: LineaTestnetIcon,

website/src/pages/Home.tsx

@@ -1,5 +1,4 @@
 import veraxLogo from "../assets/verax-logo-circle.svg";
-import "./Home.css";
 import { type FunctionComponent, useEffect } from "react";
 
 export type HomeProps = {