From 5f418255063ff044fd85e5d467583e1568d9e0c8 Mon Sep 17 00:00:00 2001
From: Michael Asiedu <michaelasiedu148@gmail.com>
Date: Wed, 7 Aug 2024 11:27:04 +0000
Subject: [PATCH] chore: Add toggle for raw hex input in SimpleInput component

---
 .../tutorials/react-frontend-application.md   | 74 +++++++------------
 1 file changed, 27 insertions(+), 47 deletions(-)

diff --git a/cartesi-rollups/tutorials/react-frontend-application.md b/cartesi-rollups/tutorials/react-frontend-application.md
index 3337aac0..4f22d8a8 100644
--- a/cartesi-rollups/tutorials/react-frontend-application.md
+++ b/cartesi-rollups/tutorials/react-frontend-application.md
@@ -378,12 +378,13 @@ Here, we are importing the generated `useWriteInputBoxAddInput` hook and Viem's
 const SimpleInput = () => {
   const dAppAddress = `0xab7528bb862fb57e8a2bcd567a2e929a0be56a5e`;
   const [inputValue, setInputValue] = useState("");
+  const [hexInput, setHexInput] = useState<boolean>(false);
 
   // ... rest of the component
 };
 ```
 
-We define the `dAppAddress` and create a state variable `inputValue` to manage the user's input.
+We define the `dAppAddress` and create a state variable `inputValue` to manage the user's input. The `hexInput` state variable is used to toggle between the generic text input and hex values.
 
 The `dAppAddress` is the address of the Cartesi backend that will receive the input. In this case, we are using a hardcoded address of a local dApp instance for demonstration purposes.
 
@@ -401,10 +402,13 @@ This hook provides us with state variables and a `writeContractAsync` function t
 ### Form submission and component rendering
 
 ```typescript
-async function submit(event: React.FormEvent<HTMLFormElement>) {
+ async function submit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     await writeContractAsync({
-      args: [dAppAddress, stringToHex(inputValue)],
+      args: [
+        dAppAddress,
+        hexInput ? (inputValue as Hex) : stringToHex(inputValue),
+      ],
     });
   }
 ```
@@ -418,40 +422,6 @@ The `inputValue` will be received by the particular backend address is `dAppAddr
 
 Now, let us build our component JSX with an input field and a submit button, styled with Tailwind CSS. It also includes conditional rendering for success and error messages.
 
-```javascript
-return (
-    <div className="max-w-md mx-auto mt-10 p-6 bg-gradient-to-r from-purple-500 to-indigo-600 rounded-lg shadow-xl">
-      <h2 className="text-3xl font-bold text-white mb-6">Send Generic Input</h2>
-      <form onSubmit={submit} className="space-y-4">
-        <div>
-          <input
-            type="text"
-            className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
-            placeholder="Enter something"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-          />
-        </div>
-        <button
-          type="submit"
-          className="w-full px-4 py-2 bg-white text-purple-600 rounded-md hover:bg-purple-100 transition-colors duration-300 font-medium"
-        >
-          {isPending ? "Sending..." : "Send"}
-        </button>
-      </form>
-
-      {isSuccess && (
-        <p className="mt-4 text-green-300 font-bold">Transaction Sent</p>
-      )}
-
-      {error && (
-        <div className="mt-4 text-red-300">
-          Error: {(error as BaseError).shortMessage || error.message}
-        </div>
-      )}
-    </div>
-  );
-```
 
 ### Final Component
 
@@ -465,11 +435,12 @@ Putting it all together, our complete `<SimpleInput/>` component and `App.tsx` l
 import React, { useState } from "react";
 import { BaseError } from "wagmi";
 import { useWriteInputBoxAddInput } from "../hooks/generated";
-import { stringToHex } from "viem";
+import { Hex, stringToHex } from "viem";
 
 const SimpleInput = () => {
   const dAppAddress = `0xab7528bb862fb57e8a2bcd567a2e929a0be56a5e`;
   const [inputValue, setInputValue] = useState("");
+  const [hexInput, setHexInput] = useState<boolean>(false);
 
   const { isPending, isSuccess, error, writeContractAsync } =
     useWriteInputBoxAddInput();
@@ -477,31 +448,41 @@ const SimpleInput = () => {
   async function submit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     await writeContractAsync({
-      args: [dAppAddress, stringToHex(inputValue)],
+      args: [
+        dAppAddress,
+        hexInput ? (inputValue as Hex) : stringToHex(inputValue),
+      ],
     });
   }
 
   return (
-    <div className="max-w-md mx-auto mt-10 p-6 bg-gradient-to-r
-     from-purple-500 to-indigo-600 rounded-lg shadow-xl">
+    <div className="max-w-md mx-auto mt-10 p-6 
+    bg-gradient-to-r from-purple-500 to-indigo-600 
+    rounded-lg shadow-xl">
       <h2 className="text-3xl font-bold text-white mb-6">Send Generic Input</h2>
       <form onSubmit={submit} className="space-y-4">
         <div>
           <input
             type="text"
             className="w-full px-4 py-2 rounded-md border
-             border-gray-300 focus:outline-none focus:ring-2
-              focus:ring-purple-500"
+             border-gray-300 focus:outline-none 
+             focus:ring-2 focus:ring-purple-500"
             placeholder="Enter something"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
           />
+          <input
+            type="checkbox"
+            checked={hexInput}
+            onChange={(e) => setHexInput(!hexInput)}
+          />
+          <span>Raw Hex </span>
         </div>
         <button
           type="submit"
-          className="w-full px-4 py-2 bg-white text-purple-600
-           rounded-md hover:bg-purple-100 transition-colors 
-           duration-300 font-medium"
+          className="w-full px-4 py-2 bg-white
+           text-purple-600 rounded-md hover:bg-purple-100
+            transition-colors duration-300 font-medium"
         >
           {isPending ? "Sending..." : "Send"}
         </button>
@@ -522,7 +503,6 @@ const SimpleInput = () => {
 
 export default SimpleInput;
 
-
 ```
 
 </code></pre>