docs: vue

apps/docs/docusaurus.config.ts

@@ -22,7 +22,40 @@ const config: Config = {
     locales: ["en"],
   },
 
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          path: "react",
+          routeBasePath: "react",
+          sidebarPath: "./sidebars.ts",
+          editUrl: "https://github.com/tien/reactive-dot/tree/main/apps/docs",
+          remarkPlugins: [
+            [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
+          ],
+        },
+        theme: {
+          customCss: "./src/css/custom.css",
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
   plugins: [
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        id: "vue",
+        path: "vue",
+        routeBasePath: "vue",
+        sidebarPath: "./sidebars.ts",
+        editUrl: "https://github.com/tien/reactive-dot/tree/main/apps/docs",
+        remarkPlugins: [
+          [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
+        ],
+      },
+    ],
     [
       "typedoc-api",
       {
@@ -44,24 +77,6 @@ const config: Config = {
     ],
   ],
 
-  presets: [
-    [
-      "classic",
-      {
-        docs: {
-          sidebarPath: "./sidebars.ts",
-          editUrl: "https://github.com/tien/reactive-dot/tree/main/apps/docs",
-          remarkPlugins: [
-            [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
-          ],
-        },
-        theme: {
-          customCss: "./src/css/custom.css",
-        },
-      } satisfies Preset.Options,
-    ],
-  ],
-
   themeConfig: {
     image: "img/social-card.png",
     navbar: {
@@ -75,7 +90,13 @@ const config: Config = {
         {
           type: "docSidebar",
           sidebarId: "docsSidebar",
-          label: "Docs",
+          label: "React",
+        },
+        {
+          type: "docSidebar",
+          sidebarId: "docsSidebar",
+          docsPluginId: "vue",
+          label: "Vue",
         },
         {
           to: "api",

apps/docs/src/pages/index.tsx

@@ -19,7 +19,7 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/getting-started/setup"
+            to="/react/getting-started/setup"
           >
             Get started
           </Link>

apps/docs/vue/getting-started/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Getting started",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}

apps/docs/vue/getting-started/connect-wallets.mdx

@@ -0,0 +1,131 @@
+---
+sidebar_position: 3
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+# Connect wallets
+
+Wallets & accounts connection can by managed via [`useWallets`](/api/vue/function/useWallets), [`useConnectedWallets`](/api/vue/function/useConnectedWallets) & [`useAccounts`](/api/vue/function/useAccounts) composables.
+
+:::tip
+If you prefer not having to build a wallet connection UI from scratch, checkout [DOT Connect](https://dotconnect.dev/) for a quick and easy way to add a great wallet experience to your DApps.
+:::
+
+## Install optional dependencies
+
+Additional dependencies are required if you use any of be bellow wallet type.
+
+### [WalletConnect](https://walletconnect.com/)
+
+```bash npm2yarn
+npm install @reactive-dot/wallet-walletconnect
+```
+
+### [Ledger](https://www.ledger.com/)
+
+```bash npm2yarn
+npm install @reactive-dot/wallet-ledger
+```
+
+## Add wallets to the config
+
+```ts title="config.ts"
+import { defineConfig } from "@reactive-dot/core";
+import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";
+import { LedgerWallet } from "@reactive-dot/wallet-ledger";
+import { WalletConnect } from "@reactive-dot/wallet-walletconnect";
+
+export const config = defineConfig({
+  // ...
+  wallets: [
+    new InjectedWalletProvider(),
+    new LedgerWalet(),
+    new WalletConnect({
+      projectId: "WALLET_CONNECT_PROJECT_ID",
+      providerOptions: {
+        metadata: {
+          name: "APP_NAME",
+          description: "APP_DESCRIPTION",
+          url: "APP_URL",
+          icons: ["APP_ICON"],
+        },
+      },
+      chainIds: [
+        // https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-13.md
+        "polkadot:91b171bb158e2d3848fa23a9f1c25182", // Polkadot
+        // ...
+      ],
+    }),
+  ],
+});
+```
+
+## Connect to wallets
+
+```vue title="wallets.tsx"
+<script setup lang="ts">
+import {
+  useConnectedWallets,
+  useWallets,
+  useWalletConnector,
+  useWalletDisconnector,
+} from "@reactive-dot/vue";
+
+const { data: wallets } = await useWallets();
+const { data: connectedWallets } = await useConnectedWallets();
+
+const { execute: connectWallet } = useWalletConnector();
+const { execute: disconnectWallet } = useWalletDisconnector();
+</script>
+
+<template>
+  <section>
+    <header>
+      <h3>Wallet connection</h3>
+    </header>
+    <article>
+      <h4>Wallets</h4>
+      <ul>
+        <li v-for="wallet in wallets" :key="wallet.id">
+          <div>{{ wallet.name }}</div>
+          <div>
+            <button
+              v-if="connectedWallets.includes(wallet)"
+              @click="disconnectWallet(wallet)"
+            >
+              Disconnect
+            </button>
+            <button v-else @click="connectWallet(wallet)">Connect</button>
+          </div>
+        </li>
+      </ul>
+    </article>
+  </section>
+</template>
+```
+
+## Display available accounts
+
+```vue title="accounts.tsx"
+<script setup lang="ts">
+import { useAccounts } from "@reactive-dot/vue";
+
+const accounts = await useAccounts();
+</script>
+
+<template>
+  <section>
+    <header>
+      <h3>Accounts</h3>
+    </header>
+    <ul>
+      <li v-for="(account, index) in accounts" :key="index">
+        <div>{{ account.address }}</div>
+        <div>{{ account.name }}</div>
+      </li>
+    </ul>
+  </section>
+</template>
+```

apps/docs/vue/getting-started/mutation.md

@@ -0,0 +1,111 @@
+---
+sidebar_position: 4
+---
+
+# Mutation
+
+The `useMutation` composable allow you to sign & submit transaction to a chain.
+
+## Connect wallet & accounts
+
+Follow the [Connect wallets](./connect-wallets.mdx) guide to get this set up.
+
+## Choose the signer
+
+There are multiple way to select the account used for signing.
+
+### 1. Via dependency injection
+
+```vue
+<script setup lang="ts">
+import { provideSigner } from "@reactive-dot/vue";
+
+provideSigner(someSigner);
+</script>
+```
+
+### 2. Passing signer to the composable
+
+```vue
+<script setup lang="ts">
+import { useAccounts, useMutation } from "@reactive-dot/vue";
+
+const accounts = await useAccounts();
+
+const { execute, status } = useMutation(
+  (tx) => tx.NominationPools.claim_payout(),
+  { signer: accounts.value.at(0)?.polkadotSigner },
+);
+</script>
+```
+
+### 2. Passing signer to the final submission
+
+```vue
+<script setup lang="ts">
+import { useAccounts, useMutation } from "@reactive-dot/vue";
+
+const accounts = await useAccounts();
+
+const { execute, status } = useMutation((tx) => tx.Identity.clear_identity());
+
+execute({ signer: accounts.value.at(0)?.polkadotSigner });
+</script>
+```
+
+## Submitting transaction
+
+```vue
+<script setup lang="ts">
+import { useMutation } from "@reactive-dot/vue";
+import { Binary } from "polkadot-api";
+
+const { execute, status } = useMutation((tx) =>
+  tx.System.remark({ remark: Binary.fromText("Hello from reactive-dot!") }),
+);
+</script>
+
+<template>
+  <div v-if="status === 'idle'">No transaction submitted yet</div>
+  <div v-else-if="status === 'pending'">Submitting transaction...</div>
+  <div v-else-if="status === 'error'">Error submitting transaction!</div>
+  <div v-else>
+    Submitted tx with hash: {{ status.txHash }}, with the current state of:
+    {{ remarkState.type }}
+  </div>
+</template>
+```
+
+## Watching transactions
+
+It’s common to watch for all transactions throughout the application to display an appropriate loading state or toast. This can be easily achieved with the [`useMutationEffect`](/api/vue/function/useMutationEffect) composable.
+
+```vue
+<script setup lang="ts">
+import { watchMutationEffect } from "@reactive-dot/vue";
+
+watchMutationEffect((event) => {
+  if (event.status === "pending") {
+    console.info("Submitting transaction", { id: event.id });
+    return;
+  }
+
+  if (event.status === "error") {
+    console.error("Failed to submit transaction", { id: event.id });
+    return;
+  }
+
+  switch (event.data.type) {
+    case "finalized":
+      if (event.data.ok) {
+        console.info("Transaction succeeded", { id: event.id });
+      } else {
+        console.error("Transaction failed", { id: event.id });
+      }
+      break;
+    default:
+      console.loading("Transaction pending", { id: event.id });
+  }
+});
+</script>
+```