Skip to main content

Setup

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

Installation​

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

npm install @reactive-dot/core @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
tip

It's a really good idea to add papi to the "postinstall" script in package.json to automate generating the types after installation.

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.storage("Timestamp", "Now").storage("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>