@web3-onboard/vue
Advanced tools
@web3-onboard/vue - npm Package Compare versions
Comparing version 2.1.1-alpha.2 to 2.1.1-alpha.3
| { | ||
| "name": "@web3-onboard/vue", | ||
| "version": "2.1.1-alpha.2", | ||
| "version": "2.1.1-alpha.3", | ||
| "description": "Vue Composable for web3-onboard", | ||
@@ -27,3 +27,3 @@ "module": "dist/index.js", | ||
| "@web3-onboard/common": "^2.1.3-alpha.1", | ||
| "@web3-onboard/core": "^2.3.1-alpha.3", | ||
| "@web3-onboard/core": "^2.3.1-alpha.4", | ||
| "vue-demi": "^0.12.4" | ||
@@ -30,0 +30,0 @@ }, |
162
README.md
@@ -5,61 +5,62 @@ # @web3-onboard/vue | ||
| ## Install | ||
| ## Install Modules | ||
| `npm i @web3-onboard/vue` | ||
| **NPM** | ||
| `npm i @web3-onboard/vue @web3-onboard/injected-wallets ethers` | ||
| ## Functions | ||
| **Yarn** | ||
| `yarn add @web3-onboard/vue @web3-onboard/injected-wallets ethers` | ||
| ## `init` | ||
| ## Quickstart | ||
| 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`](../core/README.md#initialization) | ||
| ### Example usage | ||
| ```typescript | ||
| import { init } from '@web3-onboard/vue' | ||
| import injectedModule from '@web3-onboard/injected-wallets' | ||
| import trezorModule from '@web3-onboard/trezor' | ||
| import ledgerModule from '@web3-onboard/ledger' | ||
| import walletConnectModule from '@web3-onboard/walletconnect' | ||
| import walletLinkModule from '@web3-onboard/walletlink' | ||
| import portisModule from '@web3-onboard/portis' | ||
| import fortmaticModule from '@web3-onboard/fortmatic' | ||
| import torusModule from '@web3-onboard/torus' | ||
| import keepkeyModule from '@web3-onboard/keepkey' | ||
| const injected = injectedModule() | ||
| const walletLink = walletLinkModule() | ||
| const walletConnect = walletConnectModule() | ||
| const infuraKey = '<INFURA_KEY>' | ||
| const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}` | ||
| const portis = portisModule({ | ||
| apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b' | ||
| const web3Onboard = init({ | ||
| wallets: [injected], | ||
| chains: [ | ||
| { | ||
| id: '0x1', | ||
| token: 'ETH', | ||
| label: 'Ethereum Mainnet', | ||
| rpcUrl | ||
| } | ||
| ] | ||
| }) | ||
| const fortmatic = fortmaticModule({ | ||
| apiKey: 'pk_test_886ADCAB855632AA' | ||
| }) | ||
| const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = | ||
| useOnboard() | ||
| const torus = torusModule() | ||
| const ledger = ledgerModule() | ||
| const keepkey = keepkeyModule() | ||
| const trezorOptions = { | ||
| email: 'test@test.com', | ||
| appUrl: 'https://www.blocknative.com' | ||
| if (connectedWallet) { | ||
| const ethersProvider = new ethers.providers.Web3Provider( | ||
| connectedWallet.provider, | ||
| 'any' | ||
| ) | ||
| // ..... do stuff with the provider | ||
| } | ||
| ``` | ||
| const trezor = trezorModule(trezorOptions) | ||
| ## 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`](../core/README.md#initialization) | ||
| ### Example usage | ||
| ```typescript | ||
| 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: [ | ||
| ledger, | ||
| trezor, | ||
| walletConnect, | ||
| keepkey, | ||
| walletLink, | ||
| injected, | ||
| fortmatic, | ||
| portis, | ||
| torus | ||
| ], | ||
| wallets: [injected], | ||
| chains: [ | ||
@@ -70,32 +71,5 @@ { | ||
| label: 'Ethereum Mainnet', | ||
| rpcUrl: 'https://mainnet.infura.io/v3/ababf9851fd845d0a167825f97eeb12b' | ||
| }, | ||
| { | ||
| id: '0x3', | ||
| token: 'tROP', | ||
| label: 'Ethereum Ropsten Testnet', | ||
| rpcUrl: 'https://ropsten.infura.io/v3/ababf9851fd845d0a167825f97eeb12b' | ||
| }, | ||
| { | ||
| id: '0x4', | ||
| token: 'rETH', | ||
| label: 'Ethereum Rinkeby Testnet', | ||
| rpcUrl: 'https://rinkeby.infura.io/v3/ababf9851fd845d0a167825f97eeb12b' | ||
| }, | ||
| { | ||
| id: '0x89', | ||
| token: 'MATIC', | ||
| label: 'Matic Mainnet', | ||
| rpcUrl: 'https://matic-mainnet.chainstacklabs.com' | ||
| rpcUrl | ||
| } | ||
| ], | ||
| appMetadata: { | ||
| name: 'Blocknative', | ||
| icon: '<svg><svg/>', | ||
| description: 'Demo app for Onboard V2', | ||
| recommendedInjectedWallets: [ | ||
| { name: 'MetaMask', url: 'https://metamask.io' }, | ||
| { name: 'Coinbase', url: 'https://wallet.coinbase.com/' } | ||
| ] | ||
| } | ||
| ] | ||
| }) | ||
@@ -109,2 +83,3 @@ ``` | ||
| ### Example usage | ||
| ```typescript | ||
@@ -115,3 +90,4 @@ import { useOnboard } from '@web3-onboard/vue' | ||
| // Or destructure it | ||
| const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = useOnboard() | ||
| const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = | ||
| useOnboard() | ||
| // do stuff | ||
@@ -121,5 +97,7 @@ ``` | ||
| ### `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`](../core/README.md#connecting-a-wallet) | ||
| ### Example usage | ||
| ```vue | ||
@@ -138,5 +116,3 @@ <script> | ||
| <template> | ||
| <button type="button" @click="connect"> | ||
| Connect to a Wallet | ||
| </button> | ||
| <button type="button" @click="connect">Connect to a Wallet</button> | ||
| </template> | ||
@@ -146,5 +122,7 @@ ``` | ||
| ### `connectedChain` | ||
| Computed property that contains the current chain to which `connectedWallet` is connected | ||
| ### Example usage | ||
| ```vue | ||
@@ -162,3 +140,3 @@ <script> | ||
| <template> | ||
| <span>Connected Chain: {{connectedChain.id}}</span> | ||
| <span>Connected Chain: {{ connectedChain.id }}</span> | ||
| </template> | ||
@@ -168,5 +146,7 @@ ``` | ||
| ### `connectedWallet` | ||
| Computed property that contains the latest connected wallet | ||
| ### Example usage | ||
| ```vue | ||
@@ -184,3 +164,3 @@ <script> | ||
| <template> | ||
| <span>Connected Wallet: {{connectedWallet.label}}</span> | ||
| <span>Connected Wallet: {{ connectedWallet.label }}</span> | ||
| </template> | ||
@@ -190,5 +170,7 @@ ``` | ||
| ### `connectingWallet` | ||
| Readonly boolean ref that tracks the state of the wallet connection status | ||
| ### Example usage | ||
| ```vue | ||
@@ -211,5 +193,7 @@ <script> | ||
| ### `disconnectWallet` | ||
| Function to disconnect a specific wallet | ||
| ### Example usage | ||
| ```vue | ||
@@ -228,5 +212,3 @@ <script> | ||
| <template> | ||
| <button type="button" @click="disconnect"> | ||
| Disconnect MetaMask | ||
| </button> | ||
| <button type="button" @click="disconnect">Disconnect MetaMask</button> | ||
| </template> | ||
@@ -236,5 +218,7 @@ ``` | ||
| ### `disconnectConnectedWallet` | ||
| Function to disconnect the `connectedWallet` | ||
| ### Example usage | ||
| ```vue | ||
@@ -259,5 +243,7 @@ <script> | ||
| ### `getChain` | ||
| Function that returns the current chain a wallet is connected to | ||
| ### Example usage | ||
| ```vue | ||
@@ -275,3 +261,3 @@ <script> | ||
| <template> | ||
| <span>MetaMask is connected to: {{getChain('MetaMask')}}</span> | ||
| <span>MetaMask is connected to: {{ getChain('MetaMask') }}</span> | ||
| </template> | ||
@@ -281,5 +267,7 @@ ``` | ||
| ### `setChain` | ||
| Function to set the chain of a wallet | ||
| ### Example usage | ||
| ```vue | ||
@@ -298,5 +286,3 @@ <script> | ||
| <template> | ||
| <button type="button" @click="set"> | ||
| Set MetaMask chain to mainnet | ||
| </button> | ||
| <button type="button" @click="set">Set MetaMask chain to mainnet</button> | ||
| </template> | ||
@@ -306,5 +292,7 @@ ``` | ||
| ### `settingChain` | ||
| Readonly boolean ref that tracks the status of setting the chain | ||
| ### Example usage | ||
| ```vue | ||
@@ -327,5 +315,7 @@ <script> | ||
| ### `wallets` | ||
| Readonly ref that contains every wallet that has been connected | ||
| ### Example usage | ||
| ```vue | ||
@@ -343,5 +333,7 @@ <script> | ||
| ### `alreadyConnectedWallets` | ||
| Readonly ref that contains every wallet that user connected to in the past; useful to reconnect wallets automatically after a reload | ||
| ### Example usage | ||
| ``` | ||
@@ -367,5 +359,7 @@ vue | ||
| ### `lastConnectedTimestamp` | ||
| Readonly ref that contains the last time that the user connected a wallet in milliseconds | ||
| ### Example usage | ||
| ``` | ||
@@ -372,0 +366,0 @@ vue |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-6.49%
12963
- Number of lines in readme file
- decreased by-1.64%
359