Publish On-Chain with Reclaim on Diamante

# Clone the repository
git clone https://gitlab.reclaimprotocol.org/starterpacks/reclaim-diamante-example.git
cd reclaim-diamante-example

# Install dependencies for backend and frontend
cd backend
npm install
cd ../frontend
npm install

cd backend
node index.js

cd frontend
npm run dev

import { useState, useEffect } from "react";
import { ReclaimProofRequest } from "@reclaimprotocol/js-sdk";
import QRCode from "react-qr-code";
import { verifyProof } from "@reclaimprotocol/js-sdk";
import { submitTransaction } from "./utils/submitTransaction";
import { Hourglass } from "react-loader-spinner";
import ConnectWalletButton from "./components/ConnectWallet";
 
function App() {
  const [reclaimProofRequest, setReclaimProofRequest] = useState(null);
  const [requestUrl, setRequestUrl] = useState("");
  const [connectionStatus, setConnectionStatus] = useState({
    isConnected: false,
    userPublicKey: null,
  });
 
  const [statusUrl, setStatusUrl] = useState("");
  const [txLoading, setTxLoading] = useState(false);
  const [hash, setHash] = useState("");
 
  useEffect(() => {
    async function initializeReclaim() {
      const APP_ID = "0x6E0338a6D8594101Ea9e13840449242015d71B19"; //TODO: This is an example App Id Replace it with your App Id.
      const APP_SECRET =
        "0x1e0d6a6548b72286d747b4ac9f2ad6b07eba8ad6a99cb1191890ea3f77fae48f"; //TODO: This is an example App Secret Replace it with your App Secret.
      const PROVIDER_ID = "6d3f6753-7ee6-49ee-a545-62f1b1822ae5"; //TODO: This is GitHub Provider Id Replace it with the provider id you want to use.
 
      const proofRequest = await ReclaimProofRequest.init(
        APP_ID,
        APP_SECRET,
        PROVIDER_ID
      );
      setReclaimProofRequest(proofRequest);
    }
 
    initializeReclaim();
  }, []);
 
  async function handleCreateClaim() {
    if (!reclaimProofRequest) {
      console.error("Reclaim Proof Request not initialized");
      return;
    }
    const url = await reclaimProofRequest.getRequestUrl();
    setRequestUrl(url);
    const status = reclaimProofRequest.getStatusUrl();
    setStatusUrl(status);
    await reclaimProofRequest.startSession({
      onSuccess: async (proof) => {
        let result = await verifyProof(proof);
        if (result) {
          // Proof verification successful, submit transaction
          setTxLoading(true);
          const txHash = await submitTransaction(proof);
          setTxLoading(false);
          setHash(txHash);
        }
      },
      onFailure: (error) => {
        console.error("Verification failed", error);
        setTxLoading(false);
      },
    });
  }
 
  const handleConnectionChange = (status) => {
    setConnectionStatus(status);
  };
 
  return (
    <div className="flex flex-col gap-4 justify-center items-center mt-24">
      <h1>Verify Proofs on Diamante With Reclaim Protocol</h1>
      <ConnectWalletButton onConnectionChange={handleConnectionChange} />
      {/*Rest of Components */}
    </div>
  );
}
 
export default App;

export async function submitTransaction(proof) {
  try {
    if (!window.diam) {
      console.error("DIAM Wallet is not installed or not detected.");
      alert("Please install DIAM Wallet to proceed.");
      return;
    }
    const result = await window.diam.connect();
    const userPublicKey = result.message.data[0].diamPublicKey;
 
    if (!userPublicKey) {
      console.error("Failed to retrieve public key from DIAM Wallet.");
      alert("Could not connect to DIAM Wallet.");
      return;
    }
 
    const response = await fetch("http://localhost:3001/create-transaction", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userPublicKey,
        key: proof.identifier,
        value: "verified",
      }),
    });
 
    const { unsignedTransactionXDR } = await response.json();
    if (!unsignedTransactionXDR) {
      console.error("Failed to retrieve unsigned transaction XDR.");
      alert("Could not create the transaction.");
      return;
    }
    const signedTransactionResponse = await window.diam.sign(
      unsignedTransactionXDR,
      false,
      "Diamante Testnet 2024"
    );
    const signedTransactionXDR = signedTransactionResponse.message.data;
    console.log(
      "Signed Transaction XDR from DIAM Wallet:",
      signedTransactionXDR
    );
 
    const submitResponse = await fetch(
      "http://localhost:3001/submit-transaction",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ signedTransactionXDR }),
      }
    );
 
    const res = await submitResponse.json();
 
    return res.hash;
  } catch (error) {
    console.error("Error managing data:", error.message);
  }
}

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const DiamSdk = require("diamnet-sdk");
const crypto = require("crypto");
 
const app = express();
const port = 3001;
 
app.use(bodyParser.json());
app.use(cors());
 
app.post("/create-transaction", async (req, res) => {
  try {
    const { userPublicKey, key, value } = req.body;
 
    console.log("Received public key:", userPublicKey);
 
    if (!userPublicKey || !/^G[A-Z0-9]{55}$/.test(userPublicKey)) {
      throw new Error("Invalid or missing public key.");
    }
 
    const hashIdentifier = crypto
      .createHash("sha256")
      .update(key)
      .digest("hex")
      .slice(0, 64);
 
    const server = new DiamSdk.Aurora.Server(
      "https://diamtestnet.diamcircle.io/"
    );
    const account = await server.loadAccount(userPublicKey);
 
    const transaction = new DiamSdk.TransactionBuilder(account, {
      fee: await server.fetchBaseFee(),
      networkPassphrase: DiamSdk.Networks.TESTNET,
    })
      .addOperation(
        DiamSdk.Operation.manageData({
          name: hashIdentifier,
          value: value,
        })
      )
      .setTimeout(0)
      .build();
 
    const unsignedTransactionXDR = transaction.toXDR();
    res.json({ unsignedTransactionXDR });
  } catch (error) {
    console.error("Error in create-transaction:", error.message);
    res.status(500).json({ error: error.message });
  }
});
 
app.post("/submit-transaction", async (req, res) => {
  try {
    const { signedTransactionXDR } = req.body;
 
    if (!signedTransactionXDR || typeof signedTransactionXDR !== "string") {
      throw new Error("Invalid or missing signed transaction XDR.");
    }
 
    const server = new DiamSdk.Aurora.Server(
      "https://diamtestnet.diamcircle.io/"
    );
 
    const transaction = DiamSdk.TransactionBuilder.fromXDR(
      signedTransactionXDR,
      DiamSdk.Networks.TESTNET
    );
    const result = await server.submitTransaction(transaction);
    res.json(result);
  } catch (error) {
    console.error("Error in submit-transaction:", error);
    res.status(500).json({ error: error.message });
  }
});
 
app.listen(port, () => {
  console.log(`Backend listening at http://localhost:${port}`);
});