Add sign to dapp for prize and other needs

Author: tupui

Makefile

@@ -175,6 +175,7 @@ contract_prize_deposit:
 		--nfc_contract $(nfc_nft_symbol_contract_id) \
 		--token_id 0
 
+# redeem: message = hex bytes; signature = 64-byte raw R||S hex (128 chars); public_key = 65-byte uncompressed secp256k1 hex (130 chars). Replace public_key with your chip key from NFC/recovery if different.
 contract_prize_redeem:
 	stellar contract invoke \
 		--source-account $(admin) \
@@ -184,8 +185,10 @@ contract_prize_redeem:
 		redeem \
 		--redeemer $(admin) \
 		--nfc_contract $(nfc_nft_symbol_contract_id) \
-		--message "toto"$(admin)12 \
-		--signature 3045022100a383a5d0e5841ec87dde98ad782a1affba52d6421fd2d3fc59073a8624107f8c0220597a10cb9a76cafce97d4c0616490c6b1027fddb5e101ae72486132a62e77e1e \
+		--message 68656c6c6f \
+		--signature 42954c99944ab633b99d8d2220f916ccca2eb20cf1fc2a1eff73c03df0a2b1691fc312e81725c8f398292c8078c40e7adbf4c0e6bc466e213fb47b82404a6e55 \
+		--recovery_id 1 \
+		--public_key 041e83a31ced7662d909a9eb3f746ce7d385c8f699efe851e318bd2fcfb754a8996495cae0e303e19f2bf9c6542231c5ab30d7aae7a0faf3f59ef94ad5bd275efb \
 		--nonce 12
 
 ## Upgrade

dapp/src/App.tsx

@@ -1,20 +1,20 @@
-import { Layout } from "@stellar/design-system";
+import {Layout} from "@stellar/design-system";
 import "./App.module.css";
 import ConnectAccount from "./components/ConnectAccount.tsx";
-import { Routes, Route, Outlet } from "react-router-dom";
+import {Routes, Route, Outlet} from "react-router-dom";
 import Home from "./pages/Home.tsx";
 
 const AppLayout: React.FC = () => (
   <main>
     <Layout.Header
-      projectId="Stellar Merch Shop"
-      projectTitle="Stellar Merch Shop"
-      contentRight={<ConnectAccount />}
+      projectId="Chi//mp"
+      projectTitle="Chi//mp"
+      contentRight={<ConnectAccount/>}
     />
-    <Outlet />
+    <Outlet/>
     <Layout.Footer>
       <span>
-        © {new Date().getFullYear()} Stellar Merch Shop. Licensed under the{" "}
+        © {new Date().getFullYear()} Chi//mp. Licensed under the{" "}
         <a
           href="http://www.apache.org/licenses/LICENSE-2.0"
           target="_blank"
@@ -31,8 +31,8 @@ const AppLayout: React.FC = () => (
 function App() {
   return (
     <Routes>
-      <Route element={<AppLayout />}>
-        <Route path="/" element={<Home />} />
+      <Route element={<AppLayout/>}>
+        <Route path="/" element={<Home/>}/>
       </Route>
     </Routes>
   );

dapp/src/components/NFCMintProduct.tsx

@@ -19,15 +19,17 @@ import { MintSection } from "./contracts/MintSection.tsx";
 import { TransferSection } from "./contracts/TransferSection.tsx";
 import { ClaimSection } from "./contracts/ClaimSection.tsx";
 import { BalanceSection } from "./contracts/BalanceSection.tsx";
+import { SignMessageSection } from "./contracts/SignMessageSection.tsx";
 import { ChipNotPresentError } from "../util/nfcClient.ts";
 
-type TabId = "mint" | "transfer" | "claim" | "balance";
+type TabId = "mint" | "transfer" | "claim" | "balance" | "sign";
 
 const TABS: Array<{ id: TabId; label: string }> = [
   { id: "mint", label: "Mint" },
   { id: "transfer", label: "Transfer" },
   { id: "claim", label: "Claim" },
   { id: "balance", label: "Balance" },
+  { id: "sign", label: "Sign" },
 ];
 
 /**
@@ -140,6 +142,13 @@ export const NFCMintProduct = () => {
       {activeTab === "balance" && (
         <BalanceSection key={`balance-${contractId}`} contractId={contractId} />
       )}
+      {activeTab === "sign" && (
+        <SignMessageSection
+          key={`sign-${contractId}`}
+          keyId={selectedKeyId}
+          contractId={contractId}
+        />
+      )}
     </Box>
   );
 };