feat(docs): add fdc by hand guide

examples/developer-hub-javascript/GaslessApp.tsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { ethers, Eip1193Provider } from "ethers";
 import USD0Abi from "./USD0.json";
+import Heading from "@theme/Heading";
 
 // Environment variables
 const USD0_ADDRESS = import.meta.env.VITE_USD0_ADDRESS!;
@@ -92,7 +93,7 @@ export default function App() {
 
   return (
     <div style={{ padding: 20, maxWidth: 400 }}>
-      <h1>Gasless USD₮0 Demo</h1>
+      <Heading as="h1">Gasless USD₮0 Demo</Heading>
       <input
         placeholder="Recipient address"
         value={to}

sidebars.ts

@@ -181,6 +181,7 @@ const sidebars: SidebarsConfig = {
                 },
               ],
             },
+            "fdc/guides/fdc-by-hand",
           ],
         },
         {

src/components/FDC/ToHexConverter.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import "@site/src/css/custom.css";
+import classes from "../HomepageFeatures/featureCard.module.css";
+import Heading from "@theme/Heading";
+
+export default function ToHexConverter() {
+  const [data, setData] = useState("");
+  const [encodedData, setEncodedData] = useState("");
+
+  function toHex(data) {
+    let result = "";
+    for (let i = 0; i < data.length; i++) {
+      result += data.charCodeAt(i).toString(16);
+    }
+    return "0x" + result.padEnd(64, "0");
+  }
+
+  async function handleClick() {
+    const result = await toHex(data);
+    setEncodedData(result);
+  }
+
+  return (
+    <div className={`${classes.card} input-card`}>
+      <Heading as="h3" className="input-card-title">
+        To Hex Converter
+      </Heading>
+      <input
+        type="text"
+        placeholder="Enter string to convert to hex"
+        value={data}
+        onChange={(e) => setData(e.target.value)}
+        className="input-card-input"
+      />
+      <button
+        onClick={handleClick}
+        className="input-card-button"
+        aria-label="Encode to hex"
+        title="Encode to hex"
+      >
+        Encode
+      </button>
+      <p className="input-card-result">
+        Encoded string: <b>{encodedData}</b>
+      </p>
+    </div>
+  );
+}

src/components/FDC/VotingRoundIdCalculator.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import "@site/src/css/custom.css";
+import classes from "../HomepageFeatures/featureCard.module.css";
+import Heading from "@theme/Heading";
+
+export default function RoundCalculator() {
+  const [timestamp, setTimestamp] = useState("");
+  const [roundId, setRoundId] = useState("");
+
+  async function calculateRoundId(blockTimestamp) {
+    const firsVotingRoundStartTs = 1658430000;
+    const votingEpochDurationSeconds = 90;
+    return Math.floor(
+      (blockTimestamp - firsVotingRoundStartTs) / votingEpochDurationSeconds,
+    );
+  }
+
+  async function handleClick() {
+    const result = await calculateRoundId(parseInt(timestamp));
+    setRoundId(result.toString());
+  }
+
+  return (
+    <div className={`${classes.card} input-card`}>
+      <Heading as="h3" className="input-card-title">
+        Voting Round ID Calculator
+      </Heading>
+      <input
+        type="number"
+        placeholder="Enter block timestamp"
+        value={timestamp}
+        onChange={(e) => setTimestamp(e.target.value)}
+        className="input-card-input"
+      />
+      <button
+        onClick={handleClick}
+        className="input-card-button"
+        aria-label="Calculate Round ID"
+        title="Calculate Round ID"
+      >
+        Calculate Round ID
+      </button>
+      <p className="input-card-result">
+        Round ID: <b>{roundId}</b>
+      </p>
+    </div>
+  );
+}