@web3-onboard/vue

Advanced tools

@web3-onboard/vue

A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wa

2.6.0

latest

GitHub

npm

Version published: 3 days ago

Maintainers: 2

Weekly downloads: 907; decreased by-5.62%

Weekly downloads

Changelog

Source

v2.6.0

Description

✨ Highlights

Fix: Autoselect with disabled modals resolve #1154
Fix: Chain id type fix #1158
Enhancement: Minify bundle size #1155
Fix: add "main" to Keystone's package.json #1164
Fix Trezor nonce handling #1165
Fix - Add optionality to containerElement, format validation so accountCener #1166
Feature : Gas Module #1168
Fix - Updated Binance Wallet provider patch #1174
Enhancement : Convert internal Wei to Eth #1137
Feature : Add BitKeep injected Wallet #1177

📦 Changes per package

@web3onboard/coinbase v2.0.10
@web3onboard/common v2.1.7
@web3onboard/core v2.6.0
@web3onboard/dcent v2.0.7
@web3onboard/formatic v2.0.9
@web3onboard/gas v2.0.0
@web3onboard/gnosis v2.0.8
@web3onboard/injected v2.0.15
@web3onboard/keepkey v2.1.7
@web3onboard/keystone v2.1.8
@web3onboard/ledger v2.1.7
@web3onboard/magic v2.0.10
@web3onboard/mew v2.0.7
@web3onboard/portis v2.0.7
@web3onboard/react v2.2.5
@web3onboard/torus v2.0.8
@web3onboard/trezor v2.1.7
@web3onboard/vue v2.1.5
@web3-onboard/walletconnect v2.0.8
@web3onboard/web3auth v2.0.6

What's Changed

(develop) Release: 2.5.0 by @Adamj1232 in https://github.com/blocknative/web3-onboard/pull/1147
[common-v2.1.7-alpha.1, core-v2.6.0-alpha.1......]: Enhancement - chain number support by @mahmud-bn in https://github.com/blocknative/web3-onboard/pull/1135
[core: 2.6.0-alpha.2] - [fix] - Autoselect with disabled modals resolve by @aaronbarnardsound in https://github.com/blocknative/web3-onboard/pull/1154
[common-v2.1.7-alpha.2, core-v2.6.0-alpha.3, react-v2.2.5-alpha.3, vue-v2.1.5-alpha.3]: Enhancement: Minify bundle size by @mahmud-bn in https://github.com/blocknative/web3-onboard/pull/1155
fix(Doc): typo in WalletConnect sdk readme example by @itsmnthn in https://github.com/blocknative/web3-onboard/pull/1162
[core-v2.6.0-alpha.4, react-v2.2.5-alpha.4, vue-v2.1.5-alpha.4] : Fix - Add optionality to containerElement, format validation so accountCent… by @Adamj1232 in https://github.com/blocknative/web3-onboard/pull/1166
Fix trezor nonce by @bachstatter in https://github.com/blocknative/web3-onboard/pull/1165
[core:2.6.0-alpha.3] [common:2.1.7-alpha.2] - [feature] : Gas Module by @aaronbarnardsound in https://github.com/blocknative/web3-onboard/pull/1168
common-v2.1.7-alpha.2, core-v2.6.0-alpha.3, react-v2.2.5-alpha.2, vue-v2.1.5-alpha.2]: Fix: Chain id type fix by @mahmud-bn in https://github.com/blocknative/web3-onboard/pull/1158
Fix: add "main" to Keystone's package.json by @katspaugh in https://github.com/blocknative/web3-onboard/pull/1164
gas-v2.0.0-alpha.1, core-v2.6.0-alpha.6]: Fix: Trigger Gas Module Publish by @mahmud-bn in https://github.com/blocknative/web3-onboard/pull/1170
[injected-v2.0.15-alpha.2] : Fix - Updated Binance Wallet provider patch by @Adamj1232 in https://github.com/blocknative/web3-onboard/pull/1174
[gas:2.0.0-alpha.2] [core:2.6.0-alpha.7] - [enhancement] - Modify Gas API Response by @aaronbarnardsound in https://github.com/blocknative/web3-onboard/pull/1171
[common-v2.1.7-alpha.1, core-v2.6.0-alpha.1, react-v2.2.5-alpha.1, vue-2.1.5-alpha.1, demo-v2.0.6]: Enhancement - Convert Wei to Eth by @mahmud-bn in https://github.com/blocknative/web3-onboard/pull/1137
feat: add BitKeep by @0xfaihai in https://github.com/blocknative/web3-onboard/pull/1177
Tokenary support on all platforms by @grachyov in https://github.com/blocknative/web3-onboard/pull/1185
common-v2.1.7-alpha.5, core-v2.6.0-alpha.8......]:Fix: bundler-minify-version by @mahmud-bn in https://github.com/blocknative/web3-onboard/pull/1186
[common-v2.1.7-alpha.5, core-v2.6.0-alpha.8, react-v2.2.5-alpha.7]fix: weifix by @mahmud-bn in https://github.com/blocknative/web3-onboard/pull/1180
(main) Release: 2.6.0 by @Adamj1232 in https://github.com/blocknative/web3-onboard/pull/1176

New Contributors

@itsmnthn made their first contribution in https://github.com/blocknative/web3-onboard/pull/1162
@bachstatter made their first contribution in https://github.com/blocknative/web3-onboard/pull/1165
@0xfaihai made their first contribution in https://github.com/blocknative/web3-onboard/pull/1177

Full Changelog: https://github.com/blocknative/web3-onboard/compare/v2.5.0...v2.6.0

Readme

Source

@web3-onboard/vue

A collection of composable functions for implementing web3-onboard in to a Vue project; compatible both with Vue 2 + composition-api and Vue 3

Install Modules

NPM npm i @web3-onboard/vue @web3-onboard/injected-wallets ethers

Yarn yarn add @web3-onboard/vue @web3-onboard/injected-wallets ethers

Quickstart

import { init } from '@web3-onboard/vue'
import injectedModule from '@web3-onboard/injected-wallets'

const injected = injectedModule()

// Only one RPC endpoint required per chain
const rpcAPIKey = '<INFURA_KEY>' || '<ALCHEMY_KEY>'
const rpcUrl = `https://eth-mainnet.g.alchemy.com/v2/${rpcAPIKey}` || `https://mainnet.infura.io/v3/${rpcAPIKey}`

const web3Onboard = init({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl
    }
  ]
})

const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
  useOnboard()

if (connectedWallet) {
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
  const ethersProvider = new ethers.providers.Web3Provider(
    connectedWallet.provider,
    'any'
  )
  // ..... do stuff with the provider
}

Functions

`init`

The init function initializes web3-onboard and makes it available to the useOnboard() composable. For references check out the initialization docs for @web3-onboard/core

Example usage

import { init } from '@web3-onboard/vue'
import injectedModule from '@web3-onboard/injected-wallets'

const injected = injectedModule()
const infuraKey = '<INFURA_KEY>'
const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`

const web3Onboard = init({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl
    }
  ]
})

`useOnboard`

useOnboard must be used after the init function has been called - it will return an object that can be destructured to obtain the following reactive variables and functions:

Example usage

import { useOnboard } from '@web3-onboard/vue'
// Use the composable
const onboard = useOnboard()
// Or destructure it
const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
  useOnboard()
// do stuff

`connectWallet`

Function to open the onboard modal and connect to a wallet provider. For reference check out the connecting a wallet for @web3-onboard/core

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { connectWallet } = useOnboard()
    const connect = async () => connectWallet()
    return { connect }
  }
}
</script>

<template>
  <button type="button" @click="connect">Connect to a Wallet</button>
</template>

`connectedChain`

Computed property that contains the current chain to which connectedWallet is connected

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { connectedChain } = useOnboard()
    return { connectedChain }
  }
}
</script>

<template>
  <span>Connected Chain: {{ connectedChain.id }}</span>
</template>

`connectedWallet`

Computed property that contains the latest connected wallet

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { connectedWallet } = useOnboard()
    return { connectedWallet }
  }
}
</script>

<template>
  <span>Connected Wallet: {{ connectedWallet.label }}</span>
</template>

`connectingWallet`

Readonly boolean ref that tracks the state of the wallet connection status

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { connectingWallet } = useOnboard()
    return { connectingWallet }
  }
}
</script>

<template>
  <span v-if="connectingWallet">Connecting...</span>
</template>

`disconnectWallet`

Function to disconnect a specific wallet

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { disconnectWallet } = useOnboard()
    const disconnect = async () => disconnectWallet('MetaMask')
    return { disconnect }
  }
}
</script>

<template>
  <button type="button" @click="disconnect">Disconnect MetaMask</button>
</template>

`disconnectConnectedWallet`

Function to disconnect the connectedWallet

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { disconnectConnectedWallet } = useOnboard()
    return { disconnectConnectedWallet }
  }
}
</script>

<template>
  <button type="button" @click="disconnectConnectedWallet">
    Disconnect connectedWallet
  </button>
</template>

`getChain`

Function that returns the current chain a wallet is connected to

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { getChain } = useOnboard()
    return { getChain }
  }
}
</script>

<template>
  <span>MetaMask is connected to: {{ getChain('MetaMask') }}</span>
</template>

`setChain`

Function to set the chain of a wallet

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { setChain } = useOnboard()
    const set = () => setChain({ wallet: 'MetaMask', chainId: '0x1' })
    return { set }
  }
}
</script>

<template>
  <button type="button" @click="set">Set MetaMask chain to mainnet</button>
</template>

`settingChain`

Readonly boolean ref that tracks the status of setting the chain

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { settingChain } = useOnboard()
    return { settingChain }
  }
}
</script>

<template>
  <span v-if="settingChain">Setting chain...</span>
</template>

`wallets`

Readonly ref that contains every wallet that has been connected

Example usage

<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { wallets } = useOnboard()
    return { wallets }
  }
}

`alreadyConnectedWallets`

Readonly ref that contains every wallet that user connected to in the past; useful to reconnect wallets automatically after a reload

Example usage

vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { alreadyConnectedWallets } = useOnboard()
    return { alreadyConnectedWallets }
  }
}
</script>

<template>
  <div v-for="wallet in wallets">
    <span>Label: {{wallet.label}}</span>
  </div>
</template>

`lastConnectedTimestamp`

Readonly ref that contains the last time that the user connected a wallet in milliseconds

Example usage

vue
<script>
import { useOnboard } from '@web3-onboard/vue'
export default {
  setup() {
    const { lastConnectedTimestamp } = useOnboard()
    return { lastConnectedTimestamp }
  }
}
</script>

<template>
  <span>Your last connection timestamp was: {{ lastConnectedTimestamp }}</span>
</template>

Keywords

FAQs

What is @web3-onboard/vue?

Is @web3-onboard/vue popular?

Is @web3-onboard/vue well maintained?

Last updated on 28 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket

@web3-onboard/vue

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}v2.6.0

Description

✨ Highlights

📦 Changes per package

What's Changed

New Contributors

@web3-onboard/vue

Install Modules

Quickstart

Functions

init

Example usage

useOnboard

Example usage

connectWallet

Example usage

connectedChain

Example usage

connectedWallet

Example usage

connectingWallet

Example usage

disconnectWallet

Example usage

disconnectConnectedWallet

Example usage

getChain

Example usage

setChain

Example usage

settingChain

Example usage

wallets

Example usage

alreadyConnectedWallets

Example usage

lastConnectedTimestamp

Example usage

Keywords

v2.6.0

`init`

`useOnboard`

`connectWallet`

`connectedChain`

`connectedWallet`

`connectingWallet`

`disconnectWallet`

`disconnectConnectedWallet`

`getChain`

`setChain`

`settingChain`

`wallets`

`alreadyConnectedWallets`

`lastConnectedTimestamp`