convert current return response to html

.gitignore

@@ -25,3 +25,6 @@ tmp
 logs
 secrets
 latestDeployment.json
+
+# remove mac related file
+.DS_Store

src/index.tsx

@@ -0,0 +1,190 @@
+import "@phala/wapo-env";
+import { Hono } from "hono";
+import { handle } from "@phala/wapo-env/guest";
+import { privateKeyToAccount } from "viem/accounts";
+import {
+  keccak256,
+  http,
+  type Address,
+  createPublicClient,
+  PrivateKeyAccount,
+  verifyMessage,
+  createWalletClient,
+  parseGwei,
+} from "viem";
+import { baseSepolia } from "viem/chains";
+import superjson from "superjson";
+import { cardClass, globalStyle } from "../styles/style";
+
+export const app = new Hono();
+
+const publicClient = createPublicClient({
+  chain: baseSepolia,
+  transport: http(),
+});
+const walletClient = createWalletClient({
+  chain: baseSepolia,
+  transport: http(),
+});
+
+function getECDSAAccount(salt: string): PrivateKeyAccount {
+  const derivedKey = Wapo.deriveSecret(salt);
+  const keccakPrivateKey = keccak256(derivedKey);
+  return privateKeyToAccount(keccakPrivateKey);
+}
+
+async function signData(
+  account: PrivateKeyAccount,
+  data: string
+): Promise<any> {
+  let result = {
+    derivedPublicKey: account.address,
+    data: data,
+    signature: "",
+  };
+  const publicKey = account.address;
+  console.log(`Signing data [${data}] with Account [${publicKey}]`);
+  const signature = await account.signMessage({
+    message: data,
+  });
+  console.log(`Signature: ${signature}`);
+  result.signature = signature;
+  return result;
+}
+
+async function verifyData(
+  account: PrivateKeyAccount,
+  data: string,
+  signature: any
+): Promise<any> {
+  let result = {
+    derivedPublicKey: account.address,
+    data: data,
+    signature: signature,
+    valid: false,
+  };
+  const publicKey = account.address;
+  console.log("Verifying Signature with PublicKey ", publicKey);
+  const valid = await verifyMessage({
+    address: publicKey,
+    message: data,
+    signature,
+  });
+  console.log("Is signature valid? ", valid);
+  result.valid = valid;
+  return result;
+}
+
+async function sendTransaction(
+  account: PrivateKeyAccount,
+  to: Address,
+  gweiAmount: string
+): Promise<any> {
+  let result = {
+    derivedPublicKey: account.address,
+    to: to,
+    gweiAmount: gweiAmount,
+    hash: "",
+    receipt: {},
+  };
+  console.log(
+    `Sending Transaction with Account ${account.address} to ${to} for ${gweiAmount} gwei`
+  );
+  // @ts-ignore
+  const hash = await walletClient.sendTransaction({
+    account,
+    to,
+    value: parseGwei(`${gweiAmount}`),
+  });
+  console.log(`Transaction Hash: ${hash}`);
+  const receipt = await publicClient.waitForTransactionReceipt({ hash });
+  console.log(`Transaction Status: ${receipt.status}`);
+  result.hash = hash;
+  result.receipt = receipt;
+  return result;
+}
+
+app.get("/", async (c) => {
+  let vault: Record<string, string> = {};
+  let queries = c.req.queries() || {};
+  let result = {};
+  try {
+    vault = JSON.parse(process.env.secret || "");
+  } catch (e) {
+    console.error(e);
+    return c.json({ error: "Failed to parse secrets" });
+  }
+  const secretSalt = vault.secretSalt
+    ? (vault.secretSalt as string)
+    : "SALTY_BAE";
+  const getType = queries.type ? (queries.type[0] as string) : "";
+  const account = getECDSAAccount(secretSalt);
+  const data = queries.data ? (queries.data[0] as string) : "";
+  console.log(`Type: ${getType}, Data: ${data}`);
+  try {
+    if (getType == "sendTx") {
+      result =
+        queries.to && queries.gweiAmount
+          ? await sendTransaction(
+              account,
+              queries.to[0] as Address,
+              queries.gweiAmount[0]
+            )
+          : { message: "Missing query [to] or [gweiAmount] in URL" };
+      const { json, meta } = superjson.serialize(result);
+
+      // new changes
+      return c.html(
+        `<p>Sending Transaction ${queries.gweiAmount} with Account ${account.address} to ${result?.to}</p>`
+      );
+    } else if (getType == "sign") {
+      result = data
+        ? await signData(account, data)
+        : { message: "Missing query [data] in URL" };
+
+      // new changes
+      return c.html(
+        `<p>Signing ${result?.data} with Account ${account.address} to give signature: ${result?.signature}</p>`
+      );
+    } else if (getType == "verify") {
+      if (data && queries.signature) {
+        result = await verifyData(
+          account,
+          data,
+          queries.signature[0] as string
+        );
+
+        // new changes
+        return c.html(
+          `<p> Data verified via signature: ${result?.signature}</p>`
+        );
+      } else {
+        result = { message: "Missing query [data] or [signature] in URL" };
+      }
+    } else {
+      result = { derivedPublicKey: account.address };
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    result = { message: error };
+  }
+
+  const { json, meta } = superjson.serialize(result);
+
+  // new changes
+  return c.html(
+    `<div style=${globalStyle}>
+    <div style=${cardClass}> <p>Your derived key: ${result?.derivedPublicKey}</p></div>
+    </div>`
+  );
+
+  // return c.render(`<Card />`);
+});
+
+app.post("/", async (c) => {
+  const data = await c.req.json();
+  console.log("user payload in JSON:", data);
+  return c.json(data);
+});
+
+export default handle(app);

styles/style.ts

@@ -0,0 +1,5 @@
+import { css } from "hono/css";
+
+export const cardClass = `"min-height:200px;max-width:70vw;height:300px;padding:35px;margin-top:30px;border:1px solid rgba(255, 255, 255, .25);border-radius:20px;background-color:rgba(255, 255, 255, 0.45);box-shadow:0 0 10px 1px rgba(0, 0, 0, 0.25);backdrop-filter:blur(15px);"`;
+
+export const globalStyle = "display:flex;justify-content:center;height:100%;";