Vue Web3 Modal

Connect any VUE application to any Web3 provider! 🤓

Vue3 / Typescript / Pinia Usage

import { createApp } from "vue";
import App from "./App.vue";
import { Connector, EVENTS } from "vue-dapp-connector";

const app = createApp(App);
const connector = new Connector();

connector
  .authenticate()
  .then((data) => {
    // user {data} here
  })
  .finally(() => {
    app.provide("Connector", connector);
    app.mount("#app");
  });

connector.on("chain-changed", (data) => {
  console.log("chain changed");
});

connector.on("accounts-changed", (data) => {
  console.log("account changed");
});

connector.on("disconnected", () => {
  console.log("disconnected");
});

connector.on(EVENTS.UPDATED, (data) => {
  console.log("updated");
});

Types

import {
  ConnectorResponse,
  IWallet,
  INetwork,
} from "vue-dapp-connector/dist/types";

Events

import { Connector, EVENTS } from "vue-dapp-connector";
import { ConnectorResponse } from "vue-dapp-connector/dist/types";

const connector = new Connector();

connector.on(EVENTS.CHAIN_CHANGED, (data: ConnectorResponse) => {
  // user change network hook
});

connector.on(EVENTS.ACCOUNTS_CHANGED, (data: ConnectorResponse) => {
  // user change account hook
});

connector.on(EVENTS.DISCONNECTED, () => {
  // user disconnected / logout from all accounts
});

connector.on(EVENTS.UPDATED, (data: ConnectorResponse) => {
  /**
   * user update hook
   * use this if you manually call 'update' function
   */
});

Chains / Networks

import { CHAINS } from "vue-dapp-connector/dist/types";

/**
 * Supported chains
 *
 * ETH - Ethereum Mainnet
 * BSC - Binance Smart Chain
 * FTM - Fantom Opera
 * Polygon - Polygon Mainnet
 * Avalance - Avalanche Network
 * Arbitrum - Arbitrum One
 *
 */

Configure: vite.types.ts (optional)

export default defineConfig({
  plugins: [vue({})],
  define: {
    global: "window",
    "process.env": {},
  },
  // other config options
});

For Electron.js framework

Need: install @esbuild-plugins/node-globals-polyfill

Happy Coding 🙌