diff --git a/apps/playground/src/pages/apis/txbuilder/governance/deregistration.tsx b/apps/playground/src/pages/apis/txbuilder/governance/deregistration.tsx index 2c349f50e..9f8b8433a 100644 --- a/apps/playground/src/pages/apis/txbuilder/governance/deregistration.tsx +++ b/apps/playground/src/pages/apis/txbuilder/governance/deregistration.tsx @@ -10,7 +10,7 @@ export default function GovernanceDeregistration() { return ( @@ -127,7 +127,7 @@ function Right() { return ( { const sidebarItems = [ - { label: "DRep Registration", to: "registration" }, - { label: "DRep Deregistration", to: "deregistration" }, { label: "Vote Delegation", to: "delegation" }, + { label: "DRep Registration", to: "registration" }, + { label: "DRep Update", to: "update" }, + { label: "DRep Retirement", to: "deregistration" }, { label: "Vote", to: "vote" }, ]; @@ -48,9 +50,10 @@ const ReactPage: NextPage = () => { + + - diff --git a/apps/playground/src/pages/apis/txbuilder/governance/update.tsx b/apps/playground/src/pages/apis/txbuilder/governance/update.tsx new file mode 100644 index 000000000..bb43bde59 --- /dev/null +++ b/apps/playground/src/pages/apis/txbuilder/governance/update.tsx @@ -0,0 +1,154 @@ +import { useState } from "react"; + +import { getFile, hashDrepAnchor } from "@meshsdk/core"; +import { useWallet } from "@meshsdk/react"; + +import Input from "~/components/form/input"; +import Link from "~/components/link"; +import InputTable from "~/components/sections/input-table"; +import LiveCodeDemo from "~/components/sections/live-code-demo"; +import TwoColumnsScroll from "~/components/sections/two-columns-scroll"; +import Codeblock from "~/components/text/codeblock"; +import { getTxBuilder } from "../common"; + +export default function GovernanceUpdate() { + return ( + + ); +} + +function Left() { + let codeTx = ``; + codeTx += `const utxos = await wallet.getUtxos();\n`; + codeTx += `const changeAddress = await wallet.getChangeAddress();\n`; + codeTx += `\n`; + codeTx += `txBuilder\n`; + codeTx += ` .drepUpdateCertificate(dRepId, {\n`; + codeTx += ` anchorUrl: anchorUrl,\n`; + codeTx += ` anchorDataHash: anchorHash,\n`; + codeTx += ` })\n`; + codeTx += ` .changeAddress(utxos)\n`; + codeTx += ` .selectUtxosFrom(selectedUtxos);\n`; + + return ( + <> +

Updating a DRep is similar to registering.

+

+ We build the transaction by adding the DRep update certificate to the + transaction, providing the change address and the UTxOs needed for the + transaction's fees. +

+ +

+ This{" "} + + transaction + {" "} + is an example of a successful DRep update for{" "} + + DRep ID + + . +

+ + ); +} + +function Right() { + const { wallet, connected } = useWallet(); + + const [anchorUrl, setAnchorUrl] = useState(""); + + async function getMeshJsonHash(url: string) { + var drepAnchor = getFile(url); + const anchorObj = JSON.parse(drepAnchor); + const anchorHash = hashDrepAnchor(anchorObj); + return anchorHash; + } + + async function runDemo() { + const dRep = await wallet.getDRep(); + + if (dRep === undefined) + throw new Error("No DRep key found, this wallet does not support CIP95"); + + const dRepId = dRep.dRepIDCip105; + + let anchor: { anchorUrl: string; anchorDataHash: string } | undefined = + undefined; + if (anchorUrl.length > 0) { + const anchorHash = await getMeshJsonHash(anchorUrl); + anchor = { + anchorUrl: anchorUrl, + anchorDataHash: anchorHash, + }; + } + + const utxos = await wallet.getUtxos(); + const changeAddress = await wallet.getChangeAddress(); + + const txBuilder = getTxBuilder(); + txBuilder + .drepUpdateCertificate(dRepId, anchor) + .changeAddress(changeAddress) + .selectUtxosFrom(utxos); + + const unsignedTx = await txBuilder.complete(); + const signedTx = await wallet.signTx(unsignedTx); + const txHash = await wallet.submitTx(signedTx); + return txHash; + } + + let codeSnippet = ``; + codeSnippet += `const dRep = await wallet.getDRep();\n`; + codeSnippet += `const dRepId = dRep.dRepIDCip105;\n`; + codeSnippet += `\n`; + codeSnippet += `const anchorUrl = '${anchorUrl}';\n`; + codeSnippet += `const anchorHash = await getMeshJsonHash(anchorUrl);\n`; + codeSnippet += `\n`; + codeSnippet += `const utxos = await wallet.getUtxos();\n`; + codeSnippet += `const changeAddress = await wallet.getChangeAddress();\n`; + codeSnippet += `\n`; + codeSnippet += `txBuilder\n`; + codeSnippet += ` .drepUpdateCertificate(dRepId, {\n`; + codeSnippet += ` anchorUrl: anchorUrl,\n`; + codeSnippet += ` anchorDataHash: anchorHash,\n`; + codeSnippet += ` })\n`; + codeSnippet += ` .changeAddress(changeAddress)\n`; + codeSnippet += ` .selectUtxosFrom(utxos);\n`; + codeSnippet += `\n`; + codeSnippet += `const unsignedTx = await txBuilder.complete();\n`; + codeSnippet += `const signedTx = await wallet.signTx(unsignedTx);\n`; + codeSnippet += `const txHash = await wallet.submitTx(signedTx);\n`; + + return ( + + setAnchorUrl(e.target.value)} + placeholder="Anchor Url (e.g. https://path.to/file-name.jsonld)" + label="Anchor Url" + key={0} + />, + ]} + /> + + ); +} diff --git a/apps/playground/src/pages/home/index.tsx b/apps/playground/src/pages/home/index.tsx index 826378b21..5affc3777 100644 --- a/apps/playground/src/pages/home/index.tsx +++ b/apps/playground/src/pages/home/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { Suspense, useEffect, useState } from "react"; import { DocumentCheckIcon } from "@heroicons/react/24/solid"; import Link from "~/components/link"; @@ -6,11 +6,6 @@ import HeroTwoSections from "~/components/sections/hero-two-sections"; import Metatags from "~/components/site/metatags"; export default function HomePage() { - const [isSSR, setIsSSR] = useState(true); - useEffect(() => { - setIsSSR(false); - }, []); - return ( <> @@ -19,32 +14,7 @@ export default function HomePage() { title="Web3 TypeScript SDK & off-chain Framework" description="Mesh is a TypeScript open-source library providing numerous tools to easily build powerful dApps on the Cardano blockchain." link={{ label: "Get started", href: "/getting-started" }} - image={ -
- {!isSSR ? ( - - ) : ( - <> - mockup - mockup dark - - )} -
- } + image={