feat(connect): add mina_sendTransaction to the test zkapp

Author: DeMonkeyCoder

apps/docs/package.json

@@ -12,6 +12,7 @@
 		"@theguild/remark-mermaid": "0.1.3",
 		"@types/react": "latest",
 		"@uidotdev/usehooks": "^2.4.1",
+		"bs58": "^6.0.0",
 		"clsx": "^2.1.1",
 		"lucide-react": "0.454.0",
 		"react": "18.3.1",

apps/docs/src/components/test-zkapp.tsx

@@ -2,6 +2,38 @@ import { createStore } from "@mina-js/connect";
 import { useLocalStorage, useObjectState } from "@uidotdev/usehooks";
 import { clsx } from "clsx";
 import { useState, useSyncExternalStore } from "react";
+import bs58 from 'bs58';
+
+function bytesToHex(bytes: Uint8Array): string {
+	return Array.from(bytes)
+		.map((byte) => byte.toString(16).padStart(2, '0'))
+		.join('');
+}
+
+function convertSignature(signature: string): { field: string; scalar: string } {
+	// Decode the base58-encoded signature into bytes
+	const bytes = bs58.decode(signature);
+
+	// Ensure the byte array can be split into two equal parts
+	if (bytes.length % 2 !== 0) {
+		throw new Error('Invalid signature length.');
+	}
+
+	const half = bytes.length / 2;
+	const fieldBytes = bytes.slice(0, half);
+	const scalarBytes = bytes.slice(half);
+
+	// Convert bytes to hexadecimal strings
+	const fieldHex = bytesToHex(fieldBytes);
+	const scalarHex = bytesToHex(scalarBytes);
+
+	// Convert hexadecimal strings to decimal strings
+	const field = BigInt('0x' + fieldHex).toString(10);
+	const scalar = BigInt('0x' + scalarHex).toString(10);
+
+	// Return the signature object
+	return { field, scalar };
+}
 
 const store = createStore();
 
@@ -26,6 +58,7 @@ export const TestZkApp = () => {
 		mina_sign: "",
 		mina_signFields: "",
 		mina_signTransaction: "",
+		mina_sendTransaction: ""
 	});
 	const providers = useSyncExternalStore(store.subscribe, store.getProviders);
 	const provider = providers.find(
@@ -140,6 +173,22 @@ export const TestZkApp = () => {
 			mina_signTransaction: JSON.stringify(result, undefined, "\t"),
 		}));
 	};
+	const sendTransaction = async () => {
+		if (!provider) return;
+		if (!results.mina_signTransaction) return;
+		const signedTransaction = JSON.parse(results.mina_signTransaction)
+		const { result } = await provider.request({
+			method: "mina_sendTransaction",
+			params: [{
+				...signedTransaction,
+				signature: typeof signedTransaction.signature === "string" ?
+					convertSignature(signedTransaction.signature) : signedTransaction.signature
+			}],
+		});
+		setResults(() => ({
+			mina_sendTransaction: JSON.stringify(result, undefined, "\t"),
+		}));
+	};
 	return (
 		<main className="flex flex-col gap-8">
 			<h1 className="text-3xl font-bold">Test zkApp</h1>
@@ -302,39 +351,39 @@ export const TestZkApp = () => {
 						<input
 							value={transactionBody.to}
 							onChange={(event) =>
-								setTransactionBody(() => ({ to: event.target.value }))
+								setTransactionBody(() => ({to: event.target.value}))
 							}
 							className="input input-bordered"
 						/>
 						<label>Amount</label>
 						<input
 							value={transactionBody.amount}
 							onChange={(event) =>
-								setTransactionBody(() => ({ amount: event.target.value }))
+								setTransactionBody(() => ({amount: event.target.value}))
 							}
 							className="input input-bordered"
 						/>
 						<label>Fee</label>
 						<input
 							value={transactionBody.fee}
 							onChange={(event) =>
-								setTransactionBody(() => ({ fee: event.target.value }))
+								setTransactionBody(() => ({fee: event.target.value}))
 							}
 							className="input input-bordered"
 						/>
 						<label>Memo</label>
 						<input
 							value={transactionBody.memo}
 							onChange={(event) =>
-								setTransactionBody(() => ({ memo: event.target.value }))
+								setTransactionBody(() => ({memo: event.target.value}))
 							}
 							className="input input-bordered"
 						/>
 						<label>Nonce</label>
 						<input
 							value={transactionBody.nonce}
 							onChange={(event) =>
-								setTransactionBody(() => ({ nonce: event.target.value }))
+								setTransactionBody(() => ({nonce: event.target.value}))
 							}
 							className="input input-bordered"
 						/>
@@ -362,6 +411,23 @@ export const TestZkApp = () => {
 							className="textarea textarea-bordered h-48 resize-none"
 						/>
 					</div>
+					<div className="flex gap-4">
+						<button
+							type="button"
+							className="btn btn-primary flex-1"
+							disabled={!results.mina_signTransaction}
+							onClick={sendTransaction}
+						>
+							Send Transaction
+						</button>
+					</div>
+					<div className="flex flex-col gap-2">
+						<label>Result</label>
+						<textarea
+							value={results.mina_sendTransaction}
+							className="textarea textarea-bordered h-48 resize-none"
+						/>
+					</div>
 				</div>
 			</section>
 		</main>