Skip to main content

Setup

This walks you through the process of creating a simple ReactiveDOT application.

🚧Work-in-progress

This project is under active development, and the API may change at any time.

Installation​

First add ReactiveDOT, along with required packages as dependencies to your Vue project.

npm install @reactive-dot/vue polkadot-api

Download & sync metadata​

Next, download the latest metadata from the chain you want to connect to and generate the types.

# `papi add` is the command
# `dot` is the name we're giving to this chain (can be any JS variable name)
# `-n polkadot` specifies to download the metadata from the well-known chain polkadot
npx papi add dot -n polkadot
# Wait for the latest metadata to download, then generate the types:
npx papi
info

For more information on metadata syncing and type generation, please refer to this documentation provided by Polkadot-API.

Create config​

config.ts
// `dot` is the name we gave to `npx papi add`
import { dot } from "@polkadot-api/descriptors";
import { defineConfig } from "@reactive-dot/core";
import { createLightClientProvider } from "@reactive-dot/core/providers/light-client.js";
import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";

const lightClientProvider = createLightClientProvider();

export const config = defineConfig({
  chains: {
    // "polkadot" here can be any unique string value
    polkadot: {
      descriptor: dot,
      provider: lightClientProvider.addRelayChain({ id: "polkadot" }),
    },
  },
  wallets: [new InjectedWalletProvider()],
});

Add type information​

The type declarations extension here will be used to provide you with the right type definitions when using composables.

reactive-dot.d.ts
import type { config } from "./config.js";

declare module "@reactive-dot/core" {
  export interface Register {
    config: typeof config;
  }
}

Install the plugin​

index.ts
import App from "./app.vue";
import { config } from "./config.js";
import { ReactiveDotPlugin } from "@reactive-dot/vue";
import { createApp } from "vue";

createApp(App).use(ReactiveDotPlugin, config).mount("#root");

Provide the target chain ID​

app.vue
<script setup lang="ts">
import MyComponent from "./my-component.vue";
import { provideChain } from "@reactive-dot/vue";

provideChain("polkadot");
</script>

<template>
  <!-- Make sure there is at least one Suspense boundary wrapping the app -->
  <Suspense><!-- ... --></Suspense>
</template>

Use ReactiveDOT​

my-component.vue
<script setup lang="ts">
import { useQuery, useAccounts } from "@reactive-dot/vue";

const { data: accounts } = await useAccounts();
const { data: queryResult } = await useQuery((builder) =>
  builder
    .readStorage("Timestamp", "Now", [])
    .readStorage("Balances", "TotalIssuance", []),
);
</script>

<template>
  <div>
    <ul>
      <li v-for="account in accounts" :key="account.address">
        <div>Address: {{ account.address }}</div>
        <div v-if="account.name !== undefined">Name: {{ account.name }}</div>
      </li>
    </ul>
    <section>
      <div>
        Latest block timestamp:
        {{ new Date(Number(queryResult[0])).toLocaleString() }}
      </div>
      <div>Total issuance: {{ queryResult[1].toString() }}</div>
    </section>
  </div>
</template>