diff --git a/apps/docs/package.json b/apps/docs/package.json index be9ba02..a7cb445 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -9,17 +9,19 @@ "cleanup": "rimraf dist .turbo node_modules" }, "dependencies": { - "@theguild/remark-mermaid": "^0.1.2", + "@theguild/remark-mermaid": "0.1.3", "@types/react": "latest", - "lucide-react": "^0.438.0", - "react": "latest", - "react-dom": "latest", - "typescript": "latest", - "vocs": "latest" + "@uidotdev/usehooks": "^2.4.1", + "clsx": "^2.1.1", + "lucide-react": "0.454.0", + "react": "18.3.1", + "react-dom": "18.3.1", + "typescript": "5.6.3", + "vocs": "1.0.0-alpha.62" }, "devDependencies": { "@mina-js/klesia-sdk": "workspace:*", "@mina-js/connect": "workspace:*", - "daisyui": "^4.12.10" + "daisyui": "4.12.14" } } diff --git a/apps/docs/src/components/test-zkapp.tsx b/apps/docs/src/components/test-zkapp.tsx new file mode 100644 index 0000000..2228edc --- /dev/null +++ b/apps/docs/src/components/test-zkapp.tsx @@ -0,0 +1,369 @@ +import { createStore } from "@mina-js/connect"; +import { useLocalStorage, useObjectState } from "@uidotdev/usehooks"; +import { clsx } from "clsx"; +import { useState, useSyncExternalStore } from "react"; + +const store = createStore(); + +export const TestZkApp = () => { + const [currentProvider, setCurrentProvider] = useLocalStorage( + "minajs:provider", + "", + ); + const [message, setMessage] = useState("A message to sign"); + const [fields, setFields] = useState('["1", "2", "3"]'); + const [transactionBody, setTransactionBody] = useObjectState({ + to: "B62qnVUL6A53E4ZaGd3qbTr6RCtEZYTu3kTijVrrquNpPo4d3MuJ3nb", + amount: "3000000000", + fee: "100000000", + memo: "Hello from MinaJS!", + nonce: "0", + }); + const [results, setResults] = useObjectState({ + mina_accounts: "", + mina_chainId: "", + mina_getBalance: "", + mina_sign: "", + mina_signFields: "", + mina_signTransaction: "", + }); + const providers = useSyncExternalStore(store.subscribe, store.getProviders); + const provider = providers.find( + (p) => p.info.slug === currentProvider, + )?.provider; + const fetchAccounts = async () => { + if (!provider) return; + const { result } = await provider.request({ + method: "mina_accounts", + }); + setResults(() => ({ mina_accounts: JSON.stringify(result) })); + }; + const fetchRequestAccounts = async () => { + if (!provider) return; + const { result } = await provider.request({ + method: "mina_requestAccounts", + }); + setResults(() => ({ mina_accounts: JSON.stringify(result) })); + }; + const fetchChainId = async () => { + if (!provider) return; + const { result } = await provider.request({ + method: "mina_chainId", + }); + setResults(() => ({ mina_chainId: result })); + }; + const fetchBalance = async () => { + if (!provider) return; + const { result } = await provider.request({ + method: "mina_getBalance", + }); + setResults(() => ({ mina_getBalance: result })); + }; + const signMessage = async () => { + if (!provider) return; + const { result } = await provider.request({ + method: "mina_sign", + params: [message], + }); + setResults(() => ({ mina_sign: JSON.stringify(result, undefined, "\t") })); + }; + const signFields = async () => { + if (!provider) return; + const parsedFields = JSON.parse(fields); + const { result } = await provider.request({ + method: "mina_signFields", + params: [parsedFields], + }); + setResults(() => ({ + mina_signFields: JSON.stringify(result, undefined, "\t"), + })); + }; + const createNullifier = async () => { + if (!provider) return; + const parsedFields = JSON.parse(fields); + const { result } = await provider.request({ + method: "mina_createNullifier", + params: [parsedFields], + }); + setResults(() => ({ + mina_signFields: JSON.stringify(result, undefined, "\t"), + })); + }; + const signTransaction = async () => { + if (!provider) return; + const { result: accounts } = await provider.request({ + method: "mina_accounts", + }); + const transaction = { + ...transactionBody, + from: accounts[0], + }; + const { result } = await provider.request({ + method: "mina_signTransaction", + params: [{ transaction }], + }); + setResults(() => ({ + mina_signTransaction: JSON.stringify(result, undefined, "\t"), + })); + }; + const signZkAppCommand = async () => { + if (!provider) return; + const { result: accounts } = await provider.request({ + method: "mina_accounts", + }); + const command = { + zkappCommand: { + accountUpdates: [], + memo: "E4YM2vTHhWEg66xpj52JErHUBU4pZ1yageL4TVDDpTTSsv8mK6YaH", + feePayer: { + body: { + publicKey: accounts[0], + fee: "100000000", + validUntil: "100000", + nonce: "1", + }, + authorization: "", + }, + }, + feePayer: { + feePayer: accounts[0], + fee: transactionBody.fee, + nonce: transactionBody.nonce, + memo: transactionBody.memo, + }, + }; + const { result } = await provider.request({ + method: "mina_signTransaction", + params: [{ command }], + }); + setResults(() => ({ + mina_signTransaction: JSON.stringify(result, undefined, "\t"), + })); + }; + return ( +
+

Test zkApp

+
+
+

Available Wallets

+
    + {providers.map((provider) => { + const active = currentProvider === provider.info.slug; + return ( +
  • + {provider.info.name} +

    {provider.info.name}

    + +
    • + ); + })} +
+
+
+
+
+

Queries

+
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+
+
+
+
+
+

Sign Message

+
+ +
+ setMessage(event.target.value)} + className="input input-bordered flex-1" + /> + +
+ +