Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Doc Language & Links #2191

Merged
merged 2 commits into from
May 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/src/lib/components/FeaturesSection.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@
/>
<FeatureCard
title={'Dynamic Imports'}
text={"Supporting multiple wallets in your app requires a lot of dependencies. Onboard dynamically imports a wallet and it's dependencies only when the user selects it, so that minimal bandwidth is used."}
text={"Supporting multiple wallets in your app requires a lot of dependencies. Web3 Onboard dynamically imports a wallet and it's dependencies only when the user selects it, so that minimal bandwidth is used."}
/>
<FeatureCard
title={'Wallet Provider Standardization'}
text={'All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085 and EIP-3326 specifications.'}
text={'All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085, EIP-3326, and EIP-6963 specifications.'}
/>
<FeatureCard
title={'Multiple Chain Support'}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/routes/+page.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ yarn add @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transac

## Installation

Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets:
Install the core Web3 Onboard library and the injected wallets module to support browser extension and mobile wallets:

```bash copy
npm i @web3-onboard/core @web3-onboard/injected-wallets
Expand Down
31 changes: 16 additions & 15 deletions docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ The best way to connect a wallet 🚀

<img src="{walletModal}" alt="Web3-Onboard connect wallet modal"/>

Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain support to your project. With built-in modules for more than 35 unique hardware and software wallets, Web3-Onboard saves you time and headaches.
Web3 Onboard is the quickest and easiest way to add multi-wallet and multi-chain support to your project. With built-in modules for more than 80 unique hardware and software wallets, Web3 Onboard saves you time and headaches.

## Features

Expand All @@ -24,17 +24,17 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain

- **Themable:** Powerful customization options for all your needs. Style Web3 Onboard to fit into your existing designs, or pick from our pre-made themes.

- **Unified Provider Interface:** All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085 and EIP-3326 specifications. Whether your user is using Ledger or Metamask the provider will operate identically.
- **Unified Provider Interface:** All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085, EIP-3326, and EIP-6963 specifications. Whether your user is using Ledger or Metamask, the provider will operate identically.

- **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.
- **Dynamic Imports:** Supporting multiple wallets in your app requires a lot of dependencies. Web3 Onboard dynamically imports a wallet and its dependencies only when the user selects it, so that minimal bandwidth is used.

- **Framework Agnostic:** Avoid framework lock in -- Web3-Onboard works with any framework and includes helper packages for vue & react.
- **Framework Agnostic:** Avoid framework lock in -- Web3 Onboard works with any framework and includes helper packages for vue & react.

- **Notify:** Real-time transaction notifications for all transaction states for the connected wallet address(es). In-notification speedups & cancels for hardware wallet connections.

### Natively Supported EVM Chains

web3-onboard supports ALL EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](../../modules/core.md#initialization).
Web3 Onboard supports all EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](../../modules/core.md#initialization).

- Ethereum
- Arbitrum One
Expand All @@ -52,13 +52,14 @@ web3-onboard supports ALL EVM networks. Supporting a new network is simply a mat
- Moonriver
- Sepolia
- Base Goerli
- Degen
- All other EVM networks

### Optional - Use an API key to fetch real time transaction data, balances & gas
### Optional - Use an API key to fetch real-time transaction data, balances & gas

Using a Blocknative API key with web3-onboard on the free plan will allow you to gain the benefits of Blocknative balance & transaction services. Blocknative has a free forever plan you can always use.
Using a Blocknative API key with Web3 Onboard on the free plan will allow you to gain the benefits of Blocknative balance & transaction services. Blocknative has a free forever plan you can always use.

This step is not required to use web3-onboard. You can skip to the [**Quickstart**](/docs/overview/introduction#quickstart) step below if you want to use web3-onboard without API services or if you already have a Blocknative account & API key.
This step is not required to use Web3 Onboard. You can skip to the [**Quickstart**](/docs/overview/introduction#quickstart) step below if you want to use Web3 Onboard without API services or if you already have a Blocknative account & API key.

**Setup your Account**
Go to the Account Dashboard at [https://explorer.blocknative.com/account](https://explorer.blocknative.com/account) and setup an account with an email address. You will receive an email to confirm your account.
Expand All @@ -68,7 +69,7 @@ On the Account Dashboard at [https://explorer.blocknative.com/account](https://e

## Quickstart

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

<Tabs values={['npm', 'yarn']}>
<TabPanel value="yarn">
Expand All @@ -87,7 +88,7 @@ npm i @web3-onboard/core @web3-onboard/injected-wallets ethers
</TabPanel>
</Tabs>

You can find a link to web3-onboard's official NPM Documentation here: [@web3-onboard/core Official NPM Documentation](https://www.npmjs.com/package/@web3-onboard/core)
You can find a link to Web3 Onboard's official NPM Documentation here: [@web3-onboard/core Official NPM Documentation](https://www.npmjs.com/package/@web3-onboard/core)

Then initialize in your app:

Expand Down Expand Up @@ -171,9 +172,9 @@ if (wallets[0]) {

## Wallet Modules

Add other wallet modules such as Wallet Connect or Ledger to increase the support and functionality of your web3-onboard implementation. All modules can be accessed through the subpages of web3-onboard docs on the left.
Add other wallet modules such as Wallet Connect or Ledger to increase the support and functionality of your Web3 Onboard implementation. All modules can be accessed through the subpages of Web3 Onboard docs on the left.

We recommend you add the [Core Repo](../../modules/core.md#install) and consider adding the [Injected Wallets](../../wallets/injected.md#install) module to get connected with wallets like Metamask, Trust, Coinbase Wallet & more right away.
We recommend you add the [Core Repo](../../modules/core.md#install) and consider adding the [Injected Wallets](../../wallets/injected.md#install) module to get connected with wallets like Metamask, Trust, Coinbase Wallet, and more right away.

[**Core Repo**](../../modules/core.md#install)

Expand Down Expand Up @@ -211,7 +212,7 @@ We recommend you add the [Core Repo](../../modules/core.md#install) and consider

## Test out the demo app

Test out the current functionality of web3-onboard in a small browser demo:
Test out the current functionality of Web3 Onboard in a small browser demo:

- Clone the repo: `git clone git@github.com:blocknative/web3-onboard.git`
- Change it to the onboard directory: `cd web3-onboard`
Expand All @@ -224,10 +225,10 @@ Test out the current functionality of web3-onboard in a small browser demo:

Checkout our live demo using React at [https://reactdemo.blocknative.com/](https://reactdemo.blocknative.com/)

The demo is open source so you can see a sample implementation of web3-onboard: [https://github.com/blocknative/react-demo](https://github.com/blocknative/react-demo)
The demo is open source so you can see a sample implementation of Web3 Onboard: [https://github.com/blocknative/react-demo](https://github.com/blocknative/react-demo)

## More Examples

You can find starter examples from the web3 community here using web3-onboard:
You can find starter examples from the web3 community here using Web3 Onboard:

- [eth-scaffold](https://github.com/scaffold-eth/scaffold-eth-examples/tree/bnc-onboard)
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Example 2 : Bug fix within the `core` package -

## How can I add a new wallet? 💳

To add a new wallet to the official Web3 Onboard packages and repo, create a [pull request](#pull-requests-🗂️). Web3 Onboard does not require a wallet to be a part of the main code, so a separate wallet module can be created without any changes to the Web3Onboard codebase. Your PR must include a detailed README for the package, keeping in mind that this README is the the first point of contact for dapp devs looking to implement your wallet.
To add a new wallet to the official Web3 Onboard packages and repo, create a [pull request](#pull-requests-🗂️). Web3 Onboard does not require a wallet to be a part of the main code, so a separate wallet module can be created without any changes to the Web3 Onboard codebase. Your PR must include a detailed README for the package, keeping in mind that this README is the the first point of contact for dapp developers looking to implement your wallet.

Please also include updates to documentation in your PR. Refer to the [docs contributions section](#documentation-contributions-📄) and the PR template docs checklist.

Expand Down Expand Up @@ -69,7 +69,7 @@ PRs for adding/updating a wallet should include a README (new or updated) for th

[See here for an example of a docs pull request.](https://github.com/blocknative/web3-onboard/pull/1544/files)

We highly encourage the community to help us improve the web3-onboard docs! If you have any questions don't hesitate to reach out.
We highly encourage the community to help us improve the Web3 Onboard docs! If you have any questions don't hesitate to [reach out](https://discord.com/invite/KZaBVME).

## Feedback 💬

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ title: 'Migration Guide from v1'

# Migration Guide from onboard.js to web3-onboard

Follow the steps below to easily migrate from onboard.js to Web3-Onboard.
Follow the steps below to easily migrate from onboard.js to Web3 Onboard.

### Background

With Web3-Onboard, we’ve introduced significant architectural changes that provide a more robust and efficient web3 onboarding experience. While this upgrade may result in breaking changes, the improved overall experience makes it worthwhile.
With Web3 Onboard, we’ve introduced significant architectural changes that provide a more robust and efficient web3 onboarding experience. While this upgrade may result in breaking changes, the improved overall experience makes it worthwhile.

### Steps

Expand All @@ -23,15 +23,15 @@ To help you get started quickly we’ve put together [a set of examples across m

### Package Upgrade - Modularization

This is the biggest change you might experience as an onboard.js user. With Web3-Onboard, we’ve separated all supported wallets into their modules, meaning you only need to integrate specific wallet modules you intend to support in your app.
This is the biggest change you might experience as an onboard.js user. With Web3 Onboard, we’ve separated all supported wallets into their modules, meaning you only need to integrate specific wallet modules you intend to support in your app.
For example with Onboard, if you wanted to support only Metamask and Coinbase in your app, you had to install Onboard complete with all other wallets: `npm install bnc-onboard`.
With Web3-Onboard, you only need to install core along with the desired wallet modules: `npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/coinbase`
With Web3 Onboard, you only need to install core along with the desired wallet modules: `npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/coinbase`
This change allows us to support many web3 wallets without affecting the overall library performance.

### Expansive Initialization Options

We’ve made initialization simpler while introducing more powerful options like [Account Center](https://www.blocknative.com/blog/multichain-and-multiwallet-account-management-on-your-dapp-with-account-center) and Notify in Web3-Onboard.
Onboard now requires two compulsory initial setup options: `wallets` (Wallet modules, as shown above, to be initialized and added to wallet selection modal) and `chains` (EVM networks your app should work with). You can also pass multiple wallets and chains.
We’ve made initialization simpler while introducing more powerful options like [Account Center](https://www.blocknative.com/blog/multichain-and-multiwallet-account-management-on-your-dapp-with-account-center) and Notify in Web3 Onboard.
Web3 Onboard now requires two compulsory initial setup options: `wallets` (Wallet modules, as shown above, to be initialized and added to wallet selection modal) and `chains` (EVM networks your app should work with). You can also pass multiple wallets and chains.

```
const onboard = Onboard({
Expand All @@ -56,19 +56,19 @@ Now, you only need to call the connectWallet API:

`await onboard.connectWallet()`

Learn more about state changes tracked with the Onboard API [here](/docs/modules/core#state) and the exposed actions you can use to modify the state [here](/docs/modules/core#actions-to-modify-state).
Learn more about state changes tracked with the Web3 Onboard API [here](/docs/modules/core#state) and the exposed actions you can use to modify the state [here](/docs/modules/core#actions-to-modify-state).

### Framework Support

Although Onboard is still framework-agnostic, we’ve introduced a couple of framework-specific modules that are frequently asked for by our users.
Although Web3 Onboard is still framework-agnostic, we’ve introduced a couple of framework-specific modules that are frequently asked for by our users.

`@web3-onboard/react` - React Hooks to connect users to web3 dApps better. You can check out [a comprehensive React Hooks guide](https://www.blocknative.com/blog/react-hooks-ethereum) we've written on it.
`@web3-onboard/react` - React Hooks to connect users to web3 dapps better. You can check out [a comprehensive React Hooks guide](https://www.blocknative.com/blog/react-hooks-ethereum) we've written on it.

`@web3-onboard/vue` - A set of reusable functions for integrating Web3-Onboard into a Vue 3 project. This is also compatible with a Vue 2 + composition-api dApp.
`@web3-onboard/vue` - A set of reusable functions for integrating Web3 Onboard into a Vue 3 project. This is also compatible with a Vue 2 + composition-api dApp.

### CSS Customizations

We've also added more expansive custom CSS properties so you can style every part of your onboarding experience to match the overall experience of your dApp. To apply Web3-Onboard CSS customizations, you don't need to attach them to the `.bn-onboard-custom` class like before. Instead, you can simply place them in the `:root` CSS pseudo-class, as shown below:
We've also added more expansive custom CSS properties so you can style every part of your onboarding experience to match the overall experience of your dApp. To apply Web3 Onboard CSS customizations, you don't need to attach them to the `.bn-onboard-custom` class like before. Instead, you can simply place them in the `:root` CSS pseudo-class, as shown below:

```
:root {
Expand All @@ -90,11 +90,11 @@ We've also added more expansive custom CSS properties so you can style every par
}
```

The full list of CSS variables for web3-onboard is available [here](/docs/modules/core#custom-styling).
The full list of CSS variables for Web3 Onboard is available [here](/docs/modules/core#custom-styling).

### Other Important Changes

There are also other notable infrastructural changes in Web3-Onboard:
There are also other notable infrastructural changes in Web3 Onboard:

- Dynamic Imports of dependencies
- Wallet Provider Standardization
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ title: Installation

# {$frontmatter.title}

Get up and running with Web3-Onboard
Get up and running with Web3 Onboard

### Install

Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets:
Install the core Web3 Onboard library and the injected wallets module to support browser extension and mobile wallets:

<Tabs values={['yarn', 'npm']}>
<TabPanel value="yarn">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ To customize the color theme of web3-onboard and match it with your dapp, you ca

## Available Themes

To set the color theme of web3-onboard to one of the available native themes, import Onboard from `@web3-onboard/core` and pass the theme as a string to the `theme` init option.
To set the color theme of Web3 Onboard to one of the available native themes, import Web3 Onboard from `@web3-onboard/core` and pass the theme as a string to the `theme` init option.

| theme | description |
| --------- | --------------------------------------------------------------------------------- |
Expand All @@ -32,7 +32,7 @@ const onboard = Onboard({

## Variables

In the table below, you'll find a list of css variables that you can use to theme web3-onboard.
In the table below, you'll find a list of css variables that you can use to theme Web3 Onboard.

| variable | description |
| ---------------------- | ----------------- |
Expand All @@ -47,7 +47,7 @@ In the table below, you'll find a list of css variables that you can use to them

## Custom Theme

To create a custom theme, you can define a `ThemingMap` object with CSS variables for different components of web3-onboard. Pass this object as the theme option.
To create a custom theme, you can define a `ThemingMap` object with CSS variables for different components of Web3 Onboard. Pass this object as the theme option.

```typescript copy
import Onboard, { ThemingMap } from '@web3-onboard/core'
Expand All @@ -71,7 +71,7 @@ const onboard = Onboard({

## Dynamically Update Theme with API

**`updateTheme`** is an exposed API method for actively updating the theme of web3-onboard. The function accepts `Theme` types (see below).
**`updateTheme`** is an exposed API method for actively updating the theme of Web3 Onboard. The function accepts `Theme` types (see below).
_If using the `@web3-onboard/react` package there is a hook exposed called `updateTheme`_

The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables
Expand Down Expand Up @@ -122,7 +122,7 @@ export type ThemingMap = {

## Theming Tool

You can preview how web3-onboard will look on your site by using our [theming tool](/theming-tool) to customize the look and feel of web3-onboard. You can try different themes or create your own and preview the result by entering a URL or adding a screenshot.
You can preview how Web3 Onboard will look on your site by using our [theming tool](/theming-tool) to customize the look and feel of Web3 Onboard. You can try different themes or create your own and preview the result by entering a URL or adding a screenshot.

To do this:

Expand Down
Loading
Loading