add docs for reg and dereg

apps/playground/src/data/links-txbuilders.ts

@@ -34,7 +34,7 @@ export const metaTxbuilderStaking = {
 export const metaTxbuilderGovernance = {
   link: `/apis/txbuilder/governance`,
   title: "Governance Transactions",
-  desc: "Transactions for voting and working with governance",
+  desc: "Transactions for participating in Cardano's on-chain governance",
   icon: ScaleIcon,
 };
 

apps/playground/src/pages/apis/txbuilder/governance/deregistration.tsx

@@ -0,0 +1,141 @@
+import { useWallet } from "@meshsdk/react";
+
+import Link from "~/components/link";
+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 GovernanceDeregistration() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="deregistration"
+      title="DRep Deregistration"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  let codeDrepId = ``;
+  codeDrepId += `const dRep = await wallet.getDRep();\n`;
+  codeDrepId += `const dRepId = dRep.dRepIDCip105;\n`;
+
+  let codeTxInit = ``;
+  codeTxInit += `const changeAddress = await wallet.getChangeAddress();\n`;
+  codeTxInit += `const utxos = await wallet.getUtxos();\n`;
+  codeTxInit += `\n`;
+  codeTxInit += `const blockchainProvider = new BlockfrostProvider('<Your-API-Key>');\n`;
+  codeTxInit += `\n`;
+  codeTxInit += `const txBuilder = new MeshTxBuilder({\n`;
+  codeTxInit += `  fetcher: blockchainProvider,\n`;
+  codeTxInit += `  evaluator: blockchainProvider,\n`;
+  codeTxInit += `});\n`;
+
+  let codeTx = ``;
+  codeTx += `txBuilder\n`;
+  codeTx += `  .drepDeregistrationCertificate(dRepId)\n`;
+  codeTx += `  .selectUtxosFrom(selectedUtxos)\n`;
+  codeTx += `  .changeAddress(changeAddress);\n`;
+  codeTx += `\n`;
+  codeTx += `const unsignedTx = await txBuilder.complete();\n`;
+
+  let codeSign = ``;
+  codeSign += `const signedTx = await wallet.signTx(unsignedTx);\n`;
+  codeSign += `const txHash = await wallet.submitTx(signedTx);\n`;
+
+  return (
+    <>
+      <p>
+        A DRep is retired right away when the blockchain accepts a retirement
+        certificate. The deposit is refunded immediately as part of the
+        transaction that submits the retirement certificate, just like how
+        deposits are returned when a stake credential is unregistered.
+      </p>
+      <p>
+        First we need to get the DRep ID of the DRep we want to retire. We can
+        do this by calling <code>getDRep</code> method on the wallet. This will
+        return the DRep object which contains the DRep ID.
+      </p>
+      <Codeblock data={codeDrepId} />
+      <p>
+        We then need to initialize the transaction builder by creating a new
+        instance of <code>MeshTxBuilder</code>. We need to pass the{" "}
+        <Link href="/providers">blockchain provider</Link> to the constructor.
+      </p>
+      <Codeblock data={codeTxInit} />
+      <p>
+        We can now build the transaction by adding the UTxOs as inputs to the
+        transaction and adding the DRep deregistration certificate to the
+        transaction.
+      </p>
+      <Codeblock data={codeTx} />
+      <p>
+        Finally we can sign the transaction and submit it to the blockchain.
+      </p>
+      <Codeblock data={codeSign} />
+      <p>
+        The transaction will be submitted to the blockchain and the DRep will be
+        retired. The deposit will be refunded to the DRep owner.
+      </p>
+    </>
+  );
+}
+
+function Right() {
+  const { wallet, connected } = useWallet();
+
+  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;
+
+    const utxos = await wallet.getUtxos();
+    const changeAddress = await wallet.getChangeAddress();
+
+    const txBuilder = getTxBuilder();
+    txBuilder
+      .drepDeregistrationCertificate(dRepId)
+      .selectUtxosFrom(utxos)
+      .changeAddress(changeAddress);
+
+    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 utxos = await wallet.getUtxos();\n`;
+  codeSnippet += `const changeAddress = await wallet.getChangeAddress();\n`;
+  codeSnippet += `\n`;
+  codeSnippet += `txBuilder\n`;
+  codeSnippet += `  .drepDeregistrationCertificate(dRepId)\n`;
+  codeSnippet += `  .selectUtxosFrom(utxos)\n`;
+  codeSnippet += `  .changeAddress(changeAddress);\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 (
+    <LiveCodeDemo
+      title="DRep De-registration"
+      subtitle="Retire a DRep certificate amd return the deposit"
+      code={codeSnippet}
+      runCodeFunction={runDemo}
+      disabled={!connected}
+      runDemoButtonTooltip={
+        !connected ? "Connect wallet to run this demo" : undefined
+      }
+      runDemoShowBrowseWalletConnect={true}
+    ></LiveCodeDemo>
+  );
+}

apps/playground/src/pages/apis/txbuilder/governance/index.tsx

@@ -2,15 +2,18 @@ import type { NextPage } from "next";
 
 import ButtonFloatDocumentation from "~/components/button/button-float-documentation";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
+import Link from "~/components/link";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
 import { metaTxbuilderGovernance } from "~/data/links-txbuilders";
 import { Intro } from "../common";
+import GovernanceDeregistration from "./deregistration";
 import GovernanceRegistration from "./registration";
 
 const ReactPage: NextPage = () => {
   const sidebarItems = [
-    // { label: "Send lovelace", to: "sendLovelace" },
+    { label: "DRep Registration", to: "registration" },
+    { label: "DRep Deregistration", to: "deregistration" },
   ];
 
   return (
@@ -25,7 +28,14 @@ const ReactPage: NextPage = () => {
           description={metaTxbuilderGovernance.desc}
           heroicon={metaTxbuilderGovernance.icon}
         >
-          <p>Governance</p>
+          <p>
+            In{" "}
+            <Link href="https://cips.cardano.org/cip/cip-1694">CIP-1694</Link>,
+            Cardano's on-chain governance system was proposed to allow the
+            community to vote on proposals and protocol updates. This system is
+            designed to be decentralized and transparent, allowing the community
+            to have a say in the future of the network.
+          </p>
           <Intro />
           <p>
             This page list the governance transactions that can be created using
@@ -35,6 +45,7 @@ const ReactPage: NextPage = () => {
         <ButtonFloatDocumentation href="https://docs.meshjs.dev/transactions/classes/Transaction" />
 
         <GovernanceRegistration />
+        <GovernanceDeregistration />
       </SidebarFullwidth>
     </>
   );