diff --git a/.github/ISSUE_TEMPLATE/BUG.yml b/.github/ISSUE_TEMPLATE/BUG.yml index b3472c21e..24d8d7613 100644 --- a/.github/ISSUE_TEMPLATE/BUG.yml +++ b/.github/ISSUE_TEMPLATE/BUG.yml @@ -6,6 +6,7 @@ assignees: - taylorjdawson - aaronbarnardsound - Adamj1232 + - leightkt body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/FEATURE.yml b/.github/ISSUE_TEMPLATE/FEATURE.yml index 37672592f..2f9c99780 100644 --- a/.github/ISSUE_TEMPLATE/FEATURE.yml +++ b/.github/ISSUE_TEMPLATE/FEATURE.yml @@ -6,6 +6,7 @@ assignees: - taylorjdawson - aaronbarnardsound - Adamj1232 + - leightkt body: - type: markdown attributes: diff --git a/.github/workflows/issue-to-notion.yml b/.github/workflows/issue-to-notion.yml index e1ce264d4..a1ada2c06 100644 --- a/.github/workflows/issue-to-notion.yml +++ b/.github/workflows/issue-to-notion.yml @@ -21,12 +21,12 @@ jobs: STATE: ${{ github.event.issue.state }} ISSUE_URL: ${{ github.event.issue.html_url }} TITLE: ${{ github.event.issue.title }} - FLAG: Github + FLAG: Next Sprint DATABASE_NAME: Product STATUS: Backlog # Product Work Board DATABASE_ID: 69f0e513a59d445b87a1baed729c75c5 PROJECT_NAME: web3-onboard # User ids of who to assign the card to in notion: Taylor, Adam, Aaron - NOTION_USER_IDS: f6cbb362-4908-4138-9ef0-434003d9a9f8,8a3a2287-5d2c-4665-906d-02ae9a113340,3b407adf-6552-40de-b22f-5efa852c34a2 + NOTION_USER_IDS: f6cbb362-4908-4138-9ef0-434003d9a9f8,8a3a2287-5d2c-4665-906d-02ae9a113340,3b407adf-6552-40de-b22f-5efa852c34a2,436b76c5-fed3-42d2-b3ca-49bb882843f8 shell: bash diff --git a/assets/notify-custom-example.png b/assets/notify-custom-example.png new file mode 100644 index 000000000..73f4b0e80 Binary files /dev/null and b/assets/notify-custom-example.png differ diff --git a/assets/notify-example.png b/assets/notify-example.png new file mode 100644 index 000000000..ff6a08773 Binary files /dev/null and b/assets/notify-example.png differ diff --git a/assets/notify-preflight-example.png b/assets/notify-preflight-example.png new file mode 100644 index 000000000..8946a8fe8 Binary files /dev/null and b/assets/notify-preflight-example.png differ diff --git a/docs/package.json b/docs/package.json index 3af7f13fb..56d6cef26 100644 --- a/docs/package.json +++ b/docs/package.json @@ -55,7 +55,7 @@ "type": "module", "dependencies": { "@web3-onboard/coinbase": "^2.2.1", - "@web3-onboard/core": "^2.16.0", + "@web3-onboard/core": "^2.16.1", "@web3-onboard/dcent": "^2.2.4", "@web3-onboard/enkrypt": "^2.0.1", "@web3-onboard/fortmatic": "^2.0.16", @@ -76,7 +76,7 @@ "@web3-onboard/trezor": "^2.3.4", "@web3-onboard/trust": "^2.0.1", "@web3-onboard/uauth": "^2.0.2", - "@web3-onboard/walletconnect": "^2.3.3", + "@web3-onboard/walletconnect": "^2.3.4", "@web3-onboard/web3auth": "^2.2.0", "@web3-onboard/xdefi": "^2.0.1", "animejs": "^3.2.1", diff --git a/docs/src/app.html b/docs/src/app.html index b4594e03c..008b56e67 100644 --- a/docs/src/app.html +++ b/docs/src/app.html @@ -2,7 +2,7 @@
- + %sveltekit.head% diff --git a/docs/src/lib/assets/notify-custom-example.png b/docs/src/lib/assets/notify-custom-example.png new file mode 100644 index 000000000..73f4b0e80 Binary files /dev/null and b/docs/src/lib/assets/notify-custom-example.png differ diff --git a/docs/src/lib/assets/notify-example.png b/docs/src/lib/assets/notify-example.png new file mode 100644 index 000000000..ff6a08773 Binary files /dev/null and b/docs/src/lib/assets/notify-example.png differ diff --git a/docs/src/lib/assets/notify-preflight-example.png b/docs/src/lib/assets/notify-preflight-example.png new file mode 100644 index 000000000..8946a8fe8 Binary files /dev/null and b/docs/src/lib/assets/notify-preflight-example.png differ diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction.md b/docs/src/routes/docs/[...1]overview/[...1]introduction.md index 77d27856d..fcd44d7ef 100644 --- a/docs/src/routes/docs/[...1]overview/[...1]introduction.md +++ b/docs/src/routes/docs/[...1]overview/[...1]introduction.md @@ -33,7 +33,7 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain ### Supported Networks -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](https://onboard.blocknative.com/docs/modules/core#options). +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](../../docs/modules/core.md#options). - Ethereum - Arbitrum @@ -141,35 +141,35 @@ if (wallets[0]) { Add other wallet modules such as Wallet Connect or Ledger to increase the support and functionality of your web3-onboard implementation. All modules are listed below and can be accessed through the subpages of web3-onboard docs on the left. -We recommend you add the [Core Repo](https://onboard.blocknative.com/docs/modules/core#install) and consider adding the [Injected Wallets](https://onboard.blocknative.com/docs/packages/injected#install) module to get connected with wallets like Metamask, Trust, Coinbase Wallet & more right away. +We recommend you add the [Core Repo](../../docs/modules/core.md#install) and consider adding the [Injected Wallets](../../docs/wallets/injected.md#install) module to get connected with wallets like Metamask, Trust, Coinbase Wallet & more right away. -[**Core Repo**](https://onboard.blocknative.com/docs/modules/core#install) +[**Core Repo**](../../docs/modules/core.md#install) -[**Injected Wallets**](https://onboard.blocknative.com/docs/packages/injected#install) +[**Injected Wallets**](../../docs/wallets/injected.md#install) **SDK Wallets** -- [Coinbase](https://onboard.blocknative.com/docs/packages/coinbase#install) -- [WalletConnect](https://onboard.blocknative.com/docs/packages/walletconnect#install) -- [Gnosis](https://onboard.blocknative.com/docs/packages/gnosis#install) -- [Magic](https://onboard.blocknative.com/docs/packages/magic#login-options) -- [Fortmatic](https://onboard.blocknative.com/docs/packages/formatic#install) -- [MEW](https://onboard.blocknative.com/docs/packages/mew#install) -- [Portis](https://onboard.blocknative.com/docs/packages/portis#install) -- [Web3Auth](https://onboard.blocknative.com/docs/packages/web3auth#install) +- [Coinbase](../../docs/wallets/coinbase.md#install) +- [WalletConnect](../../docs/wallets/walletconnect.md#install) +- [Gnosis](../../docs/wallets/gnosis.md#install) +- [Magic](../../docs/wallets/magic.md#login-options) +- [Fortmatic](../../docs/wallets/formatic.md#install) +- [MEW](../../docs/wallets/mewwallet.md#install) +- [Portis](../../docs/wallets/portis.md#install) +- [Web3Auth](../../docs/wallets/web3auth.md#install) **Hardware Wallets** -- [Ledger](https://onboard.blocknative.com/docs/packages/ledger#install) -- [Trezor](https://onboard.blocknative.com/docs/packages/trezor#install) -- [Keystone](https://onboard.blocknative.com/docs/packages/keystone#install) -- [KeepKey](https://onboard.blocknative.com/docs/packages/keepkey#install) -- [D'cent](https://onboard.blocknative.com/docs/packages/dcent#wallet-module-for-connecting-d-cent-hardware-wallets-to-web3-onboard) +- [Ledger](../../docs/wallets/ledger.md#install) +- [Trezor](../../docs/wallets/trezor.md#install) +- [Keystone](../../docs/wallets/keystone.md#install) +- [KeepKey](../../docs/wallets/keepkey.md#install) +- [D'cent](../../docs/wallets/dcent.md#install) **Frameworks** -- [React](https://onboard.blocknative.com/docs/modules/react#quickstart-with-injected-wallets-and-ethers-provider) -- [Vue](https://onboard.blocknative.com/docs/modules/vue#install) +- [React](../../docs/modules/react.md#quickstart-with-injected-wallets-and-ethers-provider) +- [Vue](../../docs/modules/vue.md#install) ## Test out the demo app diff --git a/docs/src/routes/docs/[...1]overview/[...2]contribution-guide.md b/docs/src/routes/docs/[...1]overview/[...2]contribution-guide.md index 6885e11c9..cbed1ed50 100644 --- a/docs/src/routes/docs/[...1]overview/[...2]contribution-guide.md +++ b/docs/src/routes/docs/[...1]overview/[...2]contribution-guide.md @@ -46,7 +46,7 @@ To add a new wallet to the official Web3 Onboard packages and repo, create a [pu Please also include updates to documentation in your PR. Refer to the [docs contributions section](#documentation-contributions-📄) and the PR template docs checklist. ### Adding Injected Wallets -If the wallet you are adding is an “injected” wallet (browser extension, mobile dapp browser wallet), add a wallet to the injected wallets module. [See here for an example of an injected wallets pull request.](https://github.com/blocknative/web3-onboard/pull/1177/files) You should also add the wallet to the [natively supported injected wallets list](http://localhost:3000/docs/wallets/injected#injected-wallets-supported-natively). +If the wallet you are adding is an “injected” wallet (browser extension, mobile dapp browser wallet), add a wallet to the injected wallets module. [See here for an example of an injected wallets pull request.](https://github.com/blocknative/web3-onboard/pull/1177/files) You should also add the wallet to the [natively supported injected wallets list](../../docs/wallets/injected.md#injected-wallets-supported-natively). ### Adding Wallet Modules Otherwise, if the wallet you are adding requires dependencies and initialization (SDK), then you will need to create a new package in the Web3 Onboard monorepo. [See here for an example of a pull request.](https://github.com/blocknative/web3-onboard/pull/1238/files) @@ -76,4 +76,4 @@ Jump in our [Discord](https://discord.com/invite/KZaBVME) and share your feedbac ## [Support 🤓](#support) -For general questions about how to use Web3 Onboard please first check out our [docs](https://onboard.blocknative.com/docs/overview/introduction#features), then head to our [Discord](https://discord.com/invite/KZaBVME) for support from the Blocknative team. +For general questions about how to use Web3 Onboard please first check out our [docs](../../docs/overview/introduction.md#features), then head to our [Discord](https://discord.com/invite/KZaBVME) for support from the Blocknative team. diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md index 53c3e89a7..2852bbfd7 100644 --- a/docs/src/routes/docs/[...3]modules/core.md +++ b/docs/src/routes/docs/[...3]modules/core.md @@ -1,5 +1,8 @@ # Core @@ -219,6 +222,12 @@ type ConnectModalOptions = { * Defaults to `https://ethereum.org/en/wallets/find-wallet/#main-content` */ iDontHaveAWalletLink?: string + /** + * Customize the link for the `Where's My Wallet` info pop up shown on the + * select wallet modal. + * Defaults to `https://www.blocknative.com/blog/metamask-wont-connect-web3-wallet-troubleshooting` + */ + wheresMyWalletLink?: string /** * Define support for Unstoppable Domains resolutions * after a user connects. Similar to ens, uns can be used for users who @@ -266,11 +275,11 @@ Define a custom or predefined theme for Web3Onboard using either: For a complete walkthrough on customizing your theme checkout our [theming documentation](/docs/getting-started/theming) ```typescript -export type Theme = ThemingMap | BuiltInThemes | 'system' +type Theme = ThemingMap | BuiltInThemes | 'system' -export type BuiltInThemes = 'default' | 'dark' | 'light' +type BuiltInThemes = 'default' | 'dark' | 'light' -export type ThemingMap = { +type ThemingMap = { '--w3o-background-color'?: string '--w3o-font-family'?: string '--w3o-foreground-color'?: string @@ -307,7 +316,7 @@ type disableFontDownload = boolean // defaults to false An object that defines whether the account center UI (default and minimal) is enabled and its position on the screen. Currently the account center is enabled for both desktop and mobile devices. ```ts -export type AccountCenter = { +type AccountCenter = { enabled: boolean position?: AccountCenterPosition // default: 'topRight' expanded?: boolean // default: true @@ -320,7 +329,7 @@ export type AccountCenter = { containerElement?: string // defines the DOM container element for svelte to attach } -export type AccountCenterOptions = { +type AccountCenterOptions = { desktop: Omit
+
+To enable transaction notifications and updates simply add your Blocknative `apiKey`([sign up for free](https://explorer.blocknative.com/account)) to the web3-onboard configurations as the value to the `apiKey` prop and thats it!
+Transaction notifications will be shown for all transactions occurring on supported chains for all of the users connected wallets.
+When switching chains, the previous chain listeners remain active for 60 seconds to allow the capture and report of any remaining transactions that may be in flight.
+
+Notifications are by default positioned in the same location as the Account Center (if enabled) or can be positioned separately using the `position` property.
+
+##### **Notify Configuration**
+
+| Property | Type | Description |
+| -------------------- | --------------- | ------------------------------------------------------------- |
+| `enabled` | boolean | Indicates whether transaction notifications will be displayed |
+| `transactionHandler` | function | Optional callback for customizations of notifications |
+| `position` | CommonPositions | Position of the notification on the screen |
+
+##### **Position Options**
+
+| Property | Type | Description |
+| --------- | ------ | ---------------------------------------- |
+| `desktop` | Notify | Configuration for desktop notifications. |
+| `mobile` | Notify | Configuration for mobile notifications. |
+
+Both `desktop` and `mobile` configurations are of type `Notify`.
+
+###### **Transaction Handler**
-Notify can also be styled by using the CSS variables found below. These are setup to allow maximum customization with base styling variables setting the global theme (i.e. `--onboard-grey-600`) along with more precise component level styling variables available (`--notify-onboard-grey-600`) with the latter taking precedent if defined.
+The `transactionHandler` is a callback that receives an object of type `EthereumTransactionData`. Based on the data received, the handler can return a custom `Notification` object or a boolean value (false to disable the notification for the current event or undefined for a default notification).
-Under the following conditions, when a transaction notification is hovered, a dropdown will appear, allowing the user to replace (speedup or cancel) their transaction:
+##### **Customizing Notification**
-- The [gas](../gas/) module has been passed in to the Web3 Onboard initialization
-- The transaction was initiated on the networks that the gas module can get estimations for (currently Ethereum and Polygon mainnet)
-- The transaction has a pending status (eventCode: 'txPool')
-- The transaction was initiated by a hardware wallet (possibly other wallet types in future as they recognize the `nonce` field)
+| Property | Type | Description |
+| ------------- | -------- | ----------------------------------------------------------- |
+| `message` | string | Customizes the message shown |
+| `eventCode` | string | Allows handling codes in a custom way |
+| `type` | string | Represents the icon type displayed |
+| `autoDismiss` | number | Time (in ms) after which the notification will be dismissed |
+| `link` | string | Adds a link to the transaction hash |
+| `onClick` | function | onClick handler for the notification element |
-The replacement gas values can be customized from the defaults by using the `replacement` parameter in the Notify options.
+##### **Styling Notify**
-If notifications are enabled the notifications can be handled through onboard app state as seen below.
+Notify automatically will match the [`theme`](#theme) defined in the web3-onboard config. It can also be styled using the [exposed css variables provided below](#custom-styling). These variables allow for maximum customization with base styling variables setting the global theme (e.g., `--onboard-grey-600`) and more precise component-level styling variables available (`--notify-onboard-grey-600`). The latter takes precedence if defined.
+
+##### **Handling Notifications**
+
+If notifications are enabled, they can be fielded and handled through the onboard app state as seen in the example below - although this is not required for notifications to display:
```javascript
const wallets = onboard.state.select('notifications')
-const { unsubscribe } = wallets.subscribe(update =>
+const { unsubscribe } = wallets.subscribe((update) =>
console.log('transaction notifications: ', update)
)
@@ -337,7 +369,21 @@ const { unsubscribe } = wallets.subscribe(update =>
unsubscribe()
```
-```typescript
+##### **Notifications as Toast Messages**
+The Notifications messages can also be used to send fully customized Dapp toast messages and updated. Check out the [customNotifications API docs for examples and code snippets](#customnotification)
+
+
+```javascript
+const wallets = onboard.state.select('notifications')
+const { unsubscribe } = wallets.subscribe((update) =>
+ console.log('transaction notifications: ', update)
+)
+
+// unsubscribe when updates are no longer needed
+unsubscribe()
+```
+
+```ts
type NotifyOptions = {
desktop: Notify
mobile: Notify
@@ -350,18 +396,8 @@ type Notify = {
* Or return false to disable notification for this event
* Or return undefined for a default notification
*/
- transactionHandler?: (
- event: EthereumTransactionData
- ) => TransactionHandlerReturn
+ transactionHandler?: (event: EthereumTransactionData) => TransactionHandlerReturn
position: CommonPositions
- replacement?: {
- gasPriceProbability?: {
- // define the gas price used for speedup based on the probability of getting in to the next block. Default 80
- speedup?: number
- // define the gas price used for cancel based on the probability of getting in to the next block. Default 95
- cancel?: number
- }
- }
}
type CommonPositions = 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft'
@@ -373,33 +409,44 @@ type CustomNotification = Partial
+
Notify can be used to deliver custom DApp notifications by passing a `CustomNotification` object to the `customNotification` action. This will return an `UpdateNotification` type.
This `UpdateNotification` will return an `update` function that can be passed a new `CustomNotification` to update the existing notification.
The `customNotification` method also returns a `dismiss` method that is called without any parameters to dismiss the notification.
-```typescript
-const { update, dismiss } = onboard.state.actions.customNotification({
- type: 'pending',
- message: 'This is a custom DApp pending notification to use however you want',
- autoDismiss: 0
-})
-setTimeout(
- () =>
- update({
- eventCode: 'dbUpdateSuccess',
- message: 'Updated status for custom notification',
- type: 'success',
- autoDismiss: 8000
- }),
- 4000
-)
-```
+| Property | Type | Description |
+| ------------- | -------- | ----------------------------------------------------------- |
+| `message` | string | Customizes the message shown |
+| `eventCode` | string | Allows handling codes in a custom way |
+| `type` | string | Represents the icon type displayed |
+| `autoDismiss` | number | Time (in ms) after which the notification will be dismissed |
+| `link` | string | Adds a link to the transaction hash |
+| `onClick` | function | onClick handler for the notification element |
+
**`preflightNotifications`**
-Notify can be used to deliver standard notifications along with preflight information by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` action. This will return a a promise that resolves to the transaction hash (if `sendTransaction` resolves the transaction hash and is successful), the internal notification id (if no `sendTransaction` function is provided) or return nothing if an error occurs or `sendTransaction` is not provided or doesn't resolve to a string.
-Preflight event types include
+Notify can be used to deliver standard notifications along with preflight updates by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` API action.
+
+
+
+Preflight event types include:
- `txRequest` : Alert user there is a transaction request awaiting confirmation by their wallet
- `txAwaitingApproval` : A previous transaction is awaiting confirmation
@@ -887,26 +936,14 @@ Preflight event types include
- `txSendFail` : The user rejected the transaction (requires `sendTransaction`)
- `txUnderpriced` : The gas price for the transaction is too low (requires `sendTransaction`)
-```typescript
-interface PreflightNotificationsOptions {
- sendTransaction?: () => Promise+