blocknative / web3-onboard Goto Github PK

View Code? Open in Web Editor NEW

796.0 39.0 454.0 118.2 MB

Client library to onboard users to web3 apps

Home Page: https://onboard.blocknative.com/

License: MIT License

JavaScript 1.26% TypeScript 79.03% Svelte 19.58% CSS 0.08% HTML 0.04%

blockchain dapp ethereum polygon wallet web3 connect

web3-onboard's Introduction

Web3-Onboard

easy way to connect users to dapps

Features

Minimal Dependencies: All wallet dependencies are included in separate packages, so you only include the ones you want to use in your app.
Multiple Wallets and Accounts Connection: Allow your users to connect multiple wallets and multiple accounts within each wallet at the same time to your app.
Multiple Chain Support: Allow users to switch between chains/networks with ease.
Account Center: A persistent interface to manage wallet connections and networks, with a minimal version for mobile
Notify: Real-time transaction notifications for the connected wallet addresses for all transaction states
Wallet Provider Standardization: All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085 and EIP-3326 specifications.
Dynamic Imports: Supporting multiple wallets in your app requires a lot of dependencies. Onboard dynamically imports a wallet and its dependencies only when the user selects it, so that minimal bandwidth is used.

Quickstart

Install the core Onboard library, the injected wallets module and optionally ethers js to support browser extension and mobile wallets:

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

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

Then initialize in your app:

import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
import { ethers } from 'ethers'

const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'

const injected = injectedModule()

const onboard = Onboard({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: MAINNET_RPC_URL
    },
    {
      id: 42161,
      token: 'ARB-ETH',
      label: 'Arbitrum One',
      rpcUrl: 'https://rpc.ankr.com/arbitrum'
    },
    {
      id: '0xa4ba',
      token: 'ARB',
      label: 'Arbitrum Nova',
      rpcUrl: 'https://nova.arbitrum.io/rpc'
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

const wallets = await onboard.connectWallet()

console.log(wallets)

if (wallets[0]) {
  // create an ethers provider with the last connected wallet provider
  const ethersProvider = new ethers.providers.Web3Provider(
    wallets[0].provider,
    'any'
  )

  const signer = ethersProvider.getSigner()

  // send a transaction with the ethers provider
  const txn = await signer.sendTransaction({
    to: '0x',
    value: 100000000000000
  })

  const receipt = await txn.wait()
  console.log(receipt)
}

Onboard v1 migration guide

If you're coming from v1, we've created a migration guide for you.

Documentation

For full documentation, check out the README.md for each package or the docs page here:

Core Repo

Core

Injected Wallets

Injected

SDK Wallets

Hardware Wallets

Frameworks

Test out the demo app

If you would like to test out the current functionality of V2 in a small browser demo, then:

Clone the repo: git clone [email protected]:blocknative/onboard.git
Change in to the onboard directory: cd onboard
Checkout the V2 feature branch: git checkout main
Install the dependencies: yarn (if running a M1 mac - yarn install-m1-mac)
Run all packages in dev mode: yarn dev
To view the demo app in the browser after running the above steps navigate to http://localhost:8080

web3-onboard's People

Contributors

Stargazers

Watchers

Forkers

thealexpatin aviondb vasa-develop osirusgroup retzger authereum gnosis tomafrench triplespeeder chaitanyapotti arcticfloyd1984 pooltogether ltlmaps wujunchuan mykeylab huobiwallet-official lnwanghao macomni muchenshou gorillafunds modernartistdao tp-lab case7026 nicosampler matextrem dcentwallet fernandomg surfbnb geraldchen890806 yomarion jeffywu irobin520 xitronix matter-labs-archive defidollar leaguedao monokh floating jshuadvd sambacha hashtag-protocol rimeissner alphawallet gridplus cobovault jtomtan xdefi-tech yudetamago tomteman mimafogeus2 antoncoding kmkoushik fobax xumoyan mitchellfox vishnumad moonery-io binxnce ian-bright bithighlander ubiq mholtzman k06a dnoishi roy1210 cakesoft-pratik davidp94 keystonehq brendanww zeyuyuan tracer-protocol zxqx mrnerdhair feelthewind skylarbarrera ubinatus myetherwallet amnext aaronisme geimaj pedrouid okfe hohoc gnardini aalee888 requestnetwork yuzhiyou1990 unclerom carlosfebres nicolasjengler hypnagonia block-wallet jameslefrere driver4567 nezz0746 electronic-signatures-industries ducthotran2010 badboy2174 aarsenault https-crodrigo210-com

web3-onboard's Issues

Wallet Selection Padding

The padding is a little uneven between elements in the wallet selection screen on certain devices

Consistent Font

Need to go through and make sure that the font-family is inherited.

Module Context

Need to add a moduleContext parameter to the rollup config to avoid warnings for svelte-i18n

Remove Params

There are some unused parameters on some objects defined in interfaces.ts. These need to be removed.

Balance State

Currently the balance state isn't being correctly kept in sync when a transaction occurs on the users' current account.

Loading is not a valid parameter error

Need to add loading parameter to wallet modal validation

Add regenerator runtime

Need to add regenerator-runtime now that the code is being transpiled to ES5

Auto Select Wallet

When selectWallet is passed a string of a wallet to be auto selected it works correctly. But if `selectWallet1 is called again without a wallet string, the wallet select modal doesn't render.

If the same wallet is selected twice, once when the wallet select modal is first shown and then a second time when allowing the user to switch wallets, the wallet will instantiate twice. We should do a check to see if the wallet that is selected is the same as the current wallet.

Subscriptions Initial State

It would be better if the subscriptions weren't called with the initial state and were only called upon a state change. This can be achieved by setting the initial state to null and then to undefined for a state that needs to be cleared.

Svg Logos

Need to use svg wallet logos where possible.

Update to new sdk API

Need to include the clientIndex when watching an account.

Convert to Typescript

Currently onboard is using ow for type validation. A more robust solution would be to convert the library to Typescript and remove the ow dependency.

Select Wallet Preferred

Need to add an easy way to choose preferred wallets when initiating through the default options.

Wallet Checks Don't Resolve

A bug was introduced in the last release where the wallet checks wouldn't resolve correctly

Nested Object Validation

More robust validation is needed for nested objects to throw helpful error for when the wrong key is included on an object.

`balance` module bug

The balance module is indicating that the minimum balance check is not satisfied even when the minimum is set to '0'. This is because the bignumber comparison is using lte rather than just lt

Remove prepare script

If the prepare script is removed from the package.json, our build times on circle ci will be cut down as it is unnecessarily building the package twice.

Ready Modal Font

There is still an inconsistency with the font-family in the content of some of the ready modals.

Internationalization

Need to add internationalization capabilities into onboard. Devs need to have the ability to pass in an internationalization object that will get merged with our defaults and also the ability to set the language.

Button Shadow

The wallet buttons need a little extra padding so that the box-shadow isn't cut off.

Provider Not Defined

When trying to connect to WalletConnect there is an error of "provider is not defined"

Change Network

Add the ability to change the networkId after initialization.

Temporarily Remove Squarelink

Need to remove Squarelink due to a bug in SSR environments outlined here

Will be adding it back in once that bug is fixed or when we have implemented dynamic imports for wallet modules.

Ready Module Heading

The heading in the wallet ready modules should be white when in dark mode rather than gray.

Remove `ow` dependency

Need to remove the ow dependency as it causes issues with server side rendering. Will need to write custom validation instead.

Balance Store

The balance store isn't updating correctly as the Blocknative backend updates much quicker that the wallet provider nodes

Types Error

There is an error in stores.js as the variable that is declared when creating a derived store is implicitly any. Need to define types on that variable.

More Robust `createModernProviderInterface` Function

The createModernProviderInterface and createLegacyProviderInterface need to be made more robust to be able to work with any injected provider. This can be done by instead of getting the address and network state from the provider object properties, make generic rpc calls to get that state.

Watch Address

The balance store is currently sending two requests to watch an account when it only needs to send it once

Code Splitting

Need to implement code splitting so that we can keep the bundle size as small as possible.

Add SDK wallet instance to wallet object

For SDK wallets, add a instance parameter so that devs can access the instantiated wallet and not just the provider.

Opera Wallet

Add opera desktop wallet and opera touch for mobile to the wallet modules.

Update Network Dialog

Need to update the default network dialog with new content

svelte-i18n error

Need to modify the build settings so that svelte-i18n is not set as an external library. This is because it needs to be compiled by the svelte compiler.

Show More Button

Sometimes the show more button will render even if all of the wallets are displayed

Portis Wallet Mainnet Error

The Portis wallet module is getting initialized with a network string of main when it should be mainnet.

Module is undefined

In WalletSelect.svelte there needs to be a check that the wallet module exists when auto selecting a wallet.

Build Error

In tsconfig.json the target parameter is set to "es5" which causes the following error in some build environments:

Module parse failed: Identifier '__assign' has already been declared

Setting this to "ESNEXT" will fix this issue.