From d9153407b7fd836cc0aeebe80eb557361362a060 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Mon, 27 Feb 2023 09:40:34 -0700 Subject: [PATCH 1/4] Bump versions for release --- docs/package.json | 6 +++--- package.json | 2 +- packages/core/package.json | 2 +- packages/demo/package.json | 2 +- packages/react/package.json | 4 ++-- packages/vue/package.json | 4 ++-- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/package.json b/docs/package.json index 24cad9421..446a176c7 100644 --- a/docs/package.json +++ b/docs/package.json @@ -56,13 +56,13 @@ "dependencies": { "bnc-sdk": "^4.6.6", "@web3-onboard/coinbase": "^2.1.4", - "@web3-onboard/core": "^2.15.2-alpha.1", + "@web3-onboard/core": "^2.15.3-alpha.1", "@web3-onboard/dcent": "^2.2.3", "@web3-onboard/enkrypt": "^2.0.0", "@web3-onboard/fortmatic": "^2.0.14", "@web3-onboard/gas": "^2.1.4", "@web3-onboard/gnosis": "^2.1.6", - "@web3-onboard/injected-wallets": "^2.8.0-alpha.1", + "@web3-onboard/injected-wallets": "^2.8.0", "@web3-onboard/keepkey": "^2.3.3", "@web3-onboard/keystone": "^2.3.3", "@web3-onboard/ledger": "^2.4.2", @@ -72,7 +72,7 @@ "@web3-onboard/sequence": "^2.0.4", "@web3-onboard/tallyho": "^2.0.1", "@web3-onboard/torus": "^2.2.0", - "@web3-onboard/transaction-preview": "^2.0.4-alpha.1", + "@web3-onboard/transaction-preview": "^2.0.4", "@web3-onboard/trezor": "^2.3.3", "@web3-onboard/trust": "^2.0.0", "@web3-onboard/uauth": "^2.0.1", diff --git a/package.json b/package.json index b564de751..d6c2fdef8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web3-onboard-monorepo", - "version": "2.20.2", + "version": "2.20.3", "private": true, "workspaces": { "packages": [ diff --git a/packages/core/package.json b/packages/core/package.json index c475ec2d5..0c4ac180c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.15.3-alpha.1", + "version": "2.15.3", "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", diff --git a/packages/demo/package.json b/packages/demo/package.json index 067485482..a0f4b68ca 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -23,7 +23,7 @@ "webpack-dev-server": "4.7.4" }, "dependencies": { - "@web3-onboard/core": "^2.15.3-alpha.1", + "@web3-onboard/core": "^2.15.3", "@web3-onboard/coinbase": "^2.1.4", "@web3-onboard/transaction-preview": "^2.0.4", "@web3-onboard/dcent": "^2.2.3", diff --git a/packages/react/package.json b/packages/react/package.json index b04216372..5f2bfc62a 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.6.5-alpha.1", + "version": "2.6.5", "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -62,7 +62,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.15.3-alpha.1", + "@web3-onboard/core": "^2.15.3", "@web3-onboard/common": "^2.2.3", "use-sync-external-store": "1.0.0" }, diff --git a/packages/vue/package.json b/packages/vue/package.json index 9329e19bf..a7156f7d4 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/vue", - "version": "2.5.5-alpha.1", + "version": "2.5.5", "description": "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 wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -63,7 +63,7 @@ "@vueuse/core": "^8.4.2", "@vueuse/rxjs": "^8.2.0", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/core": "^2.15.3-alpha.1", + "@web3-onboard/core": "^2.15.3", "vue-demi": "^0.12.4" }, "peerDependencies": { From 0caa3fed691e0f7d54272cea4b5115ba4bbf0281 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Mon, 27 Feb 2023 20:37:40 -0700 Subject: [PATCH 2/4] Update fortmatic docs --- docs/src/routes/docs/[...4]wallets/formatic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/routes/docs/[...4]wallets/formatic.md b/docs/src/routes/docs/[...4]wallets/formatic.md index a3d8c3da4..7c8812384 100644 --- a/docs/src/routes/docs/[...4]wallets/formatic.md +++ b/docs/src/routes/docs/[...4]wallets/formatic.md @@ -1,6 +1,6 @@ # Fortmatic -Wallet module for connecting Ledger hardware wallets to web3-onboard +Wallet module for connecting Fortmatic wallets to web3-onboard ### Install From 779e57cf2f6f18125b34835eed08a22b1491ec36 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Tue, 28 Feb 2023 13:35:42 -0700 Subject: [PATCH 3/4] Release 2.20.3 (#1554) * update root path (#1543) * Add XDEFI module and injected to docs site (#1544) * Add xdefi to docs * Add xdefi module to docs * Add xdefi package to docs onboard * Add to injected wallets list * Feature: "I don't have a wallet" flow + Progress-bar fixup (#1535) * Link working and styled * Progress bar work * Cleanup progressbar code * Remove single quote breaking view * Revert TP testing code * add transaction preview graphic * add transaction preview install code snippet * move md code snippets - update imports * add transaction preview section to landing page * update theming code snippet * update hero section install code * update account center graphic * update hero w3o graphic * update account center svg * Update README.md (#1547) Yeah maybe this needs more thorough changes throughout the docs but I was caught up on this for a minute, and this will help * move transaction preview section to top * update link url * Added XDEFI to readme * Add theming docs, refine core init options, api actions and code chunks (#1548) * Add theming docs, still needs refinement * More docs * Add theming video * More docs * Update layout and add copy to some code chunks * Add dividers for better visibility between options and copy to code blocks where useful * Reorder Theming docs layout * Add note about ethers v6 usage * edit theming page - add css variables table - edit theme descriptions - re-org existing content * Update docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md * Update theming tool to default to custom --------- Co-authored-by: Gustavo Esquinca * Update docs/src/lib/components/code-snippet/theming-code.md Co-authored-by: Adam Carpenter * Bump versions for release * Add Infinity Wallet Connector (#1540) * Add Infinity Wallet Connector * Update packages/infinity-wallet/package.json * Update packages/infinity-wallet/src/index.ts * Remove yarn lock from infin package * Update packages/demo/package.json * Add inifinity to docs * Reorder wallets * Update docs title * Bump innjected package version --------- Co-authored-by: Adam Carpenter * [walletconnect-2.3.0-alpha.3] - Feat: Walletconnect URI handler + bump wc package version (#1552) * accept handleUri prop * Update docs * Rename wc prop to handleUri * Bump wc pakcage version for walletconnect/ethereum-provider * merge in dev * Revert unintended change * Update prop in docs * Cleanup semicolon * Yarn it! * Bump undici from 5.10.0 to 5.19.1 in /examples/with-sveltekit (#1532) Bumps [undici](https://github.com/nodejs/undici) from 5.10.0 to 5.19.1. - [Release notes](https://github.com/nodejs/undici/releases) - [Commits](https://github.com/nodejs/undici/compare/v5.10.0...v5.19.1) --- updated-dependencies: - dependency-name: undici dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Adam Carpenter * Update fortmatic docs --------- Signed-off-by: dependabot[bot] Co-authored-by: Taylor Dawson Co-authored-by: Gustavo Esquinca Co-authored-by: Brent <46073594+Brentably@users.noreply.github.com> Co-authored-by: mhchaudhry3 Co-authored-by: mhchaudhry3 <102989386+mhchaudhry3@users.noreply.github.com> Co-authored-by: Aaron <53439560+arons1@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .circleci/config.yml | 22 +- .github/workflows/docs.yml | 2 +- README.md | 2 + docs/package.json | 8 +- .../lib/components/ConnectWalletButton.svelte | 2 +- .../src/lib/components/FeaturesSection.svelte | 46 +- docs/src/lib/components/GettingStarted.svelte | 2 +- docs/src/lib/components/HeroSection.svelte | 13 +- .../src/lib/components/ThemeCustomizer.svelte | 2 +- docs/src/lib/components/ThemingSection.svelte | 4 +- .../getting-started-guide.md | 2 + .../code-snippet/install-code-tp.md | 16 + .../{ => code-snippet}/install-code.md | 0 .../components/code-snippet/theming-code.md | 10 + .../connect-wallet/ReactConnectWallet.md | 8 +- .../connect-wallet/SvelteConnectWallet.md | 4 +- .../components/svg/account-center-graphic.svg | 361 ++++++++ .../svg/account-center-group.svelte | 858 ----------------- docs/src/lib/components/svg/hero-img.svg | 873 ++++++++++++------ .../svg/transaction-preview-graphic.svg | 176 ++++ docs/src/lib/components/theming-code.md | 18 - docs/src/lib/services/onboard.js | 20 +- .../docs/[...1]overview/[...1]introduction.md | 16 +- .../[...2]getting-started/[...2]theming.md | 140 +++ ...stomization.md => [...3]custom-styling.md} | 6 - docs/src/routes/docs/[...3]modules/core.md | 207 ++++- docs/src/routes/docs/[...3]modules/gas.md | 16 +- docs/src/routes/docs/[...3]modules/react.md | 2 + .../docs/[...3]modules/transaction-preview.md | 6 +- docs/src/routes/docs/[...3]modules/vue.md | 2 + .../src/routes/docs/[...4]wallets/formatic.md | 2 +- .../docs/[...4]wallets/infinitywallet.md | 49 + .../src/routes/docs/[...4]wallets/injected.md | 2 +- .../docs/[...4]wallets/walletconnect.md | 10 +- docs/src/routes/docs/[...4]wallets/xdefi.md | 47 + docs/src/routes/examples/uniswap-widget.md | 4 + docs/yarn.lock | 35 +- examples/with-sveltekit/yarn.lock | 20 +- package.json | 2 +- packages/core/README.md | 78 +- packages/core/package.json | 2 +- packages/core/src/types.ts | 9 + packages/core/src/validation.ts | 3 +- .../core/src/views/connect/Sidebar.svelte | 90 +- packages/demo/package.json | 7 +- packages/demo/src/App.svelte | 79 +- packages/infinity-wallet/README.md | 35 + packages/infinity-wallet/package.json | 68 ++ packages/infinity-wallet/src/icon.ts | 40 + packages/infinity-wallet/src/index.ts | 40 + packages/infinity-wallet/src/types.ts | 7 + packages/infinity-wallet/tsconfig.json | 15 + packages/injected/package.json | 2 +- packages/injected/src/constants.ts | 1 + packages/injected/src/icons/infinitywallet.ts | 39 + packages/injected/src/types.ts | 2 + packages/injected/src/wallets.ts | 13 +- packages/react/README.md | 2 + packages/react/package.json | 4 +- packages/transaction-preview/README.md | 4 +- packages/vue/README.md | 2 + packages/vue/package.json | 4 +- packages/walletconnect/README.md | 4 + packages/walletconnect/package.json | 4 +- packages/walletconnect/src/index.ts | 4 + packages/walletconnect/src/v1.ts | 11 +- packages/walletconnect/src/v2.ts | 37 +- yarn.lock | 113 ++- 68 files changed, 2301 insertions(+), 1433 deletions(-) rename docs/src/lib/components/{ => code-snippet}/getting-started-guide.md (91%) create mode 100644 docs/src/lib/components/code-snippet/install-code-tp.md rename docs/src/lib/components/{ => code-snippet}/install-code.md (100%) create mode 100644 docs/src/lib/components/code-snippet/theming-code.md create mode 100644 docs/src/lib/components/svg/account-center-graphic.svg delete mode 100644 docs/src/lib/components/svg/account-center-group.svelte create mode 100644 docs/src/lib/components/svg/transaction-preview-graphic.svg delete mode 100644 docs/src/lib/components/theming-code.md create mode 100644 docs/src/routes/docs/[...2]getting-started/[...2]theming.md rename docs/src/routes/docs/[...2]getting-started/{[...2]customization.md => [...3]custom-styling.md} (96%) create mode 100644 docs/src/routes/docs/[...4]wallets/infinitywallet.md create mode 100644 docs/src/routes/docs/[...4]wallets/xdefi.md create mode 100644 packages/infinity-wallet/README.md create mode 100644 packages/infinity-wallet/package.json create mode 100644 packages/infinity-wallet/src/icon.ts create mode 100644 packages/infinity-wallet/src/index.ts create mode 100644 packages/infinity-wallet/src/types.ts create mode 100644 packages/infinity-wallet/tsconfig.json create mode 100644 packages/injected/src/icons/infinitywallet.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index 1c56b7221..e56a18cb2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -33,7 +33,7 @@ aliases: | grep version \ | head -1 \ | awk -F: '{ print $2 }' \ - | sed 's/[",]//g'); + | sed 's/[",]//g'); if [[ $PACKAGE_VERSION =~ "-alpha" ]]; then echo true @@ -50,7 +50,7 @@ aliases: | grep version \ | head -1 \ | awk -F: '{ print $2 }' \ - | sed 's/[",]//g'); + | sed 's/[",]//g'); if [[ $PACKAGE_VERSION =~ "-alpha" ]]; then echo true @@ -363,6 +363,12 @@ jobs: working_directory: ~/web3-onboard-monorepo/packages/xdefi steps: - node-build-steps + build-infinity-wallet: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/infinity-wallet + steps: + - node-build-steps # Build staging/Alpha releases build-staging-core: @@ -563,6 +569,12 @@ jobs: working_directory: ~/web3-onboard-monorepo/packages/xdefi steps: - node-staging-build-steps + build-staging-infinity-wallet: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/infinity-wallet + steps: + - node-staging-build-steps workflows: version: 2 @@ -765,3 +777,9 @@ workflows: <<: *deploy_production_filters - build-staging-xdefi: <<: *deploy_staging_filters + infinity-wallet: + jobs: + - build-infinity-wallet: + <<: *deploy_production_filters + - build-staging-infinity-wallet: + <<: *deploy_staging_filters diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 2d5185db3..8d470c1a8 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -54,7 +54,7 @@ jobs: - name: Generate the sitemap uses: cicirello/generate-sitemap@v1 with: - path-to-root: docs + path-to-root: './docs/build' base-url-path: https://www.onboard.blocknative.com/ - name: Peak at folder contents diff --git a/README.md b/README.md index b0f453146..213bfcdf6 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,8 @@ For full documentation, check out the README.md for each package or the [docs pa - [Enkrypt](packages/enkrypt/README.md) - [Unstoppable Domains](packages/uauth/README.md) - [Frontier](packages/frontier/README.md) +- [XDEFI](packages/xdefi/README.md) +- [Infinity Wallet](packages/infinity-wallet/README.md) **Hardware Wallets** diff --git a/docs/package.json b/docs/package.json index 32209b728..240ed2e82 100644 --- a/docs/package.json +++ b/docs/package.json @@ -56,13 +56,14 @@ "dependencies": { "bnc-sdk": "^4.6.6", "@web3-onboard/coinbase": "^2.1.4", - "@web3-onboard/core": "^2.15.2-alpha.1", + "@web3-onboard/core": "^2.15.3-alpha.1", "@web3-onboard/dcent": "^2.2.3", "@web3-onboard/enkrypt": "^2.0.0", "@web3-onboard/fortmatic": "^2.0.14", "@web3-onboard/gas": "^2.1.4", "@web3-onboard/gnosis": "^2.1.6", - "@web3-onboard/injected-wallets": "^2.8.0-alpha.1", + "@web3-onboard/infinity-wallet": "^2.0.0", + "@web3-onboard/injected-wallets": "^2.8.1", "@web3-onboard/keepkey": "^2.3.3", "@web3-onboard/keystone": "^2.3.3", "@web3-onboard/ledger": "^2.4.2", @@ -72,12 +73,13 @@ "@web3-onboard/sequence": "^2.0.4", "@web3-onboard/tallyho": "^2.0.1", "@web3-onboard/torus": "^2.2.0", - "@web3-onboard/transaction-preview": "^2.0.4-alpha.1", + "@web3-onboard/transaction-preview": "^2.0.4", "@web3-onboard/trezor": "^2.3.3", "@web3-onboard/trust": "^2.0.0", "@web3-onboard/uauth": "^2.0.1", "@web3-onboard/walletconnect": "^2.2.1", "@web3-onboard/web3auth": "^2.1.4", + "@web3-onboard/xdefi": "^2.0.0", "animejs": "^3.2.1", "ethers": "^5.7.0" } diff --git a/docs/src/lib/components/ConnectWalletButton.svelte b/docs/src/lib/components/ConnectWalletButton.svelte index 06f1ccec1..9f5bb3589 100644 --- a/docs/src/lib/components/ConnectWalletButton.svelte +++ b/docs/src/lib/components/ConnectWalletButton.svelte @@ -22,7 +22,7 @@ if (document.location.href.includes('theming-tool')) { onboard = await getOnboard('default') } else { - onboard = await getOnboard('system') + onboard = await getOnboard() } } onboard.state.select('wallets').subscribe((wallets) => { diff --git a/docs/src/lib/components/FeaturesSection.svelte b/docs/src/lib/components/FeaturesSection.svelte index f25aef7f3..718d1a6f8 100644 --- a/docs/src/lib/components/FeaturesSection.svelte +++ b/docs/src/lib/components/FeaturesSection.svelte @@ -9,10 +9,12 @@ import FrameworksGraphic from './svg/frameworks-group.svelte' import NetworksGraphic from './svg/networks-group.svelte' import NotifyGraphic from './svg/notify-group.svelte' - import AccountCenterGraphic from './svg/account-center-group.svelte' + import AccountCenterGraphic from './svg/account-center-graphic.svg' import WalletsGraphic from './svg/wallet-row.svg' + import TransactionPreviewGraphic from './svg/transaction-preview-graphic.svg' - import InstallCode from './install-code.md' + import InstallCode from './code-snippet/install-code.md' + import InstallCodeTp from './code-snippet/install-code-tp.md'
@@ -63,7 +65,6 @@
-
@@ -81,8 +82,43 @@
- onboard connect wallets + onboard connect wallets + +
+
+ Transaction Preview +
+
+ + + + + +
+ +
+ +
+
+
-
+
- import GettingStartedGuide from './getting-started-guide.md' + import GettingStartedGuide from './code-snippet/getting-started-guide.md'
diff --git a/docs/src/lib/components/HeroSection.svelte b/docs/src/lib/components/HeroSection.svelte index 9f03c8eb2..e3e077be5 100644 --- a/docs/src/lib/components/HeroSection.svelte +++ b/docs/src/lib/components/HeroSection.svelte @@ -1,22 +1,19 @@
-
{"Web3-Onboard"}
+
{'Web3-Onboard'}
- {"Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more."} + {'Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more.'}
-
- - {'npm i @web3-onboard/core @web3-onboard/injected-wallets'} - +
+
- onboard connect wallet themes + onboard connect wallet themes
diff --git a/docs/src/lib/components/getting-started-guide.md b/docs/src/lib/components/code-snippet/getting-started-guide.md similarity index 91% rename from docs/src/lib/components/getting-started-guide.md rename to docs/src/lib/components/code-snippet/getting-started-guide.md index 3c5bc558c..cae1b3d7d 100644 --- a/docs/src/lib/components/getting-started-guide.md +++ b/docs/src/lib/components/code-snippet/getting-started-guide.md @@ -40,6 +40,8 @@ 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') + // if using ethers v6 this is: + // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') const signer = ethersProvider.getSigner() diff --git a/docs/src/lib/components/code-snippet/install-code-tp.md b/docs/src/lib/components/code-snippet/install-code-tp.md new file mode 100644 index 000000000..982a56706 --- /dev/null +++ b/docs/src/lib/components/code-snippet/install-code-tp.md @@ -0,0 +1,16 @@ + + + +```sh copy +npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +``` + + + + +```sh copy +yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview +``` + + + diff --git a/docs/src/lib/components/install-code.md b/docs/src/lib/components/code-snippet/install-code.md similarity index 100% rename from docs/src/lib/components/install-code.md rename to docs/src/lib/components/code-snippet/install-code.md diff --git a/docs/src/lib/components/code-snippet/theming-code.md b/docs/src/lib/components/code-snippet/theming-code.md new file mode 100644 index 000000000..00d1bdc42 --- /dev/null +++ b/docs/src/lib/components/code-snippet/theming-code.md @@ -0,0 +1,10 @@ +```css copy +:root { + --w3o-background-color: #1a1d26; + --w3o-foreground-color: #242835; + --w3o-text-color: #eff1fc; + --w3o-border-color: #33394b; + --w3o-action-color: #929bed; + --w3o-border-radius: 16px; +} +``` diff --git a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md index 679388e18..837246214 100644 --- a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md +++ b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md @@ -5,9 +5,9 @@ Import the libraries and any wallets you would like to use. For this example, we ```js title="App.tsx"|copy import { Web3OnboardProvider, init } from '@web3-onboard/react' import injectedModule from '@web3-onboard/injected-wallets' +import infinityWalletModule from '@web3-onboard/infinity-wallet' import fortmaticModule from '@web3-onboard/fortmatic' import gnosisModule from '@web3-onboard/gnosis' -import injectedModule from '@web3-onboard/injected-wallets' import keepkeyModule from '@web3-onboard/keepkey' import keystoneModule from '@web3-onboard/keystone' import ledgerModule from '@web3-onboard/ledger' @@ -39,6 +39,7 @@ const fortmatic = fortmaticModule({ apiKey: 'apiKey' }) +const infinityWallet = infinityWalletModule() const ledger = ledgerModule() const keystone = keystoneModule() const keepkey = keepkeyModule() @@ -63,6 +64,7 @@ const enkrypt = enkryptModule() const mewWallet = mewWalletModule() const wallets = [ + infinityWallet, keepkey, sequence, injected, @@ -166,6 +168,8 @@ export default function ConnectWallet() { // If the wallet has a provider than the wallet is connected if (wallet?.provider) { setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any')) + // if using ethers v6 this is: + // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') } }, [wallet]) @@ -210,6 +214,8 @@ export default function ConnectWallet() { // If the wallet has a provider than the wallet is connected if (wallet?.provider) { setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any')) + // if using ethers v6 this is: + // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') } }, [wallet]) diff --git a/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md index d763918c3..2e3b7128f 100644 --- a/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md +++ b/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md @@ -5,9 +5,9 @@ Import the libraries and any wallets you would like to use. For this example, we ```js title="onboard.js"|copy import Onboard from '@web3-onboard/core' import injectedModule from '@web3-onboard/injected-wallets' +import infinityWalletModule from '@web3-onboard/infinity-wallet' import fortmaticModule from '@web3-onboard/fortmatic' import gnosisModule from '@web3-onboard/gnosis' -import injectedModule from '@web3-onboard/injected-wallets' import keepkeyModule from '@web3-onboard/keepkey' import keystoneModule from '@web3-onboard/keystone' import ledgerModule from '@web3-onboard/ledger' @@ -39,6 +39,7 @@ const fortmatic = fortmaticModule({ apiKey: 'apiKey' }) +const infinityWallet = infinityWalletModule() const ledger = ledgerModule() const keystone = keystoneModule() const keepkey = keepkeyModule() @@ -63,6 +64,7 @@ const enkrypt = enkryptModule() const mewWallet = mewWalletModule() const wallets = [ + infinityWallet, keepkey, sequence, injected, diff --git a/docs/src/lib/components/svg/account-center-graphic.svg b/docs/src/lib/components/svg/account-center-graphic.svg new file mode 100644 index 000000000..a0e0300be --- /dev/null +++ b/docs/src/lib/components/svg/account-center-graphic.svg @@ -0,0 +1,361 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/lib/components/svg/account-center-group.svelte b/docs/src/lib/components/svg/account-center-group.svelte deleted file mode 100644 index 48760365b..000000000 --- a/docs/src/lib/components/svg/account-center-group.svelte +++ /dev/null @@ -1,858 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/src/lib/components/svg/hero-img.svg b/docs/src/lib/components/svg/hero-img.svg index 6e83b1360..1de752cfb 100644 --- a/docs/src/lib/components/svg/hero-img.svg +++ b/docs/src/lib/components/svg/hero-img.svg @@ -1,285 +1,453 @@ - - - - - - - - - - - - - - - - - - - - - - - - + - + + + + - - + + + + + + + + + + + + - - + + + + + + - - - - - - - + + + + + + + + + + + + + + + - - - + + + - - - - - - - - - - - - - - - - - - - + - - - - + + + + - - - - - - + + - - - - + + + - + - - - - - + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + - - - - - - + - - - - - + - - - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - + + + + + + - - + + - - + + + + + + + - + + + + + + + + + + + + + + + + + - - - - + + + + - - + + + + + + + - - - + + + - + - - - + + + + + - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - - + + - + + - - - - - - - - - - - - - - - - + + + + - + + - + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + @@ -289,46 +457,40 @@ - + - + - + - + - + - + - - + + - + - - - - - - - + @@ -341,7 +503,10 @@ - + + + + @@ -350,7 +515,16 @@ - + + + + + + + + + + @@ -359,7 +533,7 @@ - + @@ -368,173 +542,278 @@ - + - + - + - - + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/lib/components/svg/transaction-preview-graphic.svg b/docs/src/lib/components/svg/transaction-preview-graphic.svg new file mode 100644 index 000000000..4ebbea605 --- /dev/null +++ b/docs/src/lib/components/svg/transaction-preview-graphic.svg @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/lib/components/theming-code.md b/docs/src/lib/components/theming-code.md deleted file mode 100644 index 20cea5200..000000000 --- a/docs/src/lib/components/theming-code.md +++ /dev/null @@ -1,18 +0,0 @@ -```css -:root { - /* COLORS */ - --account-select-modal-white: white; - --account-select-modal-black: black; - --account-select-modal-primary-100: #eff1fc; - --account-select-modal-primary-200: #d0d4f7; - --account-select-modal-primary-300: #b1b8f2; - --account-select-modal-primary-500: #6370e5; - --account-select-modal-primary-600: #454ea0; - --account-select-modal-gray-100: #ebebed; - --account-select-modal-gray-200: #c2c4c9; - --account-select-modal-gray-300: #999ca5; - --account-select-modal-gray-500: #33394b; - --account-select-modal-gray-700: #1a1d26; - --account-select-modal-danger-500: #ff4f4f; -} -``` diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js index 14602f8e0..1bb4a5ec0 100644 --- a/docs/src/lib/services/onboard.js +++ b/docs/src/lib/services/onboard.js @@ -1,14 +1,10 @@ let onboard const getOnboard = async (passedTheme) => { - if (!onboard) { - const key = 'svelteness::color-scheme' - const scheme = localStorage[key] - let theme = passedTheme || scheme || 'system' - onboard = await intiOnboard(theme) - classMutationListener() - } else { - await onboard.state.actions.updateTheme(passedTheme) - } + const key = 'svelteness::color-scheme' + const scheme = localStorage[key] + let theme = passedTheme || scheme + classMutationListener() + onboard = await intiOnboard(theme) return onboard } @@ -36,6 +32,7 @@ const intiOnboard = async (theme) => { const { default: trezorModule } = await import('@web3-onboard/trezor') const { default: ledgerModule } = await import('@web3-onboard/ledger') const { default: walletConnectModule } = await import('@web3-onboard/walletconnect') + const { default: infinityWalletModule } = await import('@web3-onboard/infinity-wallet') const { default: coinbaseModule } = await import('@web3-onboard/coinbase') const { default: dcentModule } = await import('@web3-onboard/dcent') const { default: portisModule } = await import('@web3-onboard/portis') @@ -52,9 +49,11 @@ const intiOnboard = async (theme) => { const { default: web3authModule } = await import('@web3-onboard/web3auth') const { default: uauthModule } = await import('@web3-onboard/uauth') const { default: trustModule } = await import('@web3-onboard/trust') + const { default: xdefiModule } = await import('@web3-onboard/xdefi') const INFURA_ID = '8b60d52405694345a99bcb82e722e0af' const injected = injectedModule() + const infinityWallet = infinityWalletModule() const coinbase = coinbaseModule() const dcent = dcentModule() const walletConnect = walletConnectModule() @@ -68,6 +67,7 @@ const intiOnboard = async (theme) => { const tally = tallyModule() const torus = torusModule() const trust = trustModule() + const xdefi = xdefiModule() const portis = portisModule({ apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b' @@ -110,9 +110,11 @@ const intiOnboard = async (theme) => { gnosis, uauth, tally, + xdefi, torus, sequence, web3auth, + infinityWallet, dcent, enkrypt, mewWallet, diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction.md b/docs/src/routes/docs/[...1]overview/[...1]introduction.md index 139379c5b..e36fda56d 100644 --- a/docs/src/routes/docs/[...1]overview/[...1]introduction.md +++ b/docs/src/routes/docs/[...1]overview/[...1]introduction.md @@ -23,7 +23,7 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain - **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. - **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. + 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. @@ -34,6 +34,7 @@ and its dependencies only when the user selects it, so that minimal bandwidth is ### 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). + - Arbitrum - Avalanche - BNB Chain @@ -48,6 +49,7 @@ web3-onboard supports all EVM networks. Supporting a new network is simply a mat - Any other EVM network ### [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. This step is not required to use web3-onboard. You can skip to the **Quickstart** step below if you want to use web3-onboard without API services or if you already have a Blocknative account & API key. @@ -82,7 +84,8 @@ npm i @web3-onboard/core @web3-onboard/injected-wallets ethers 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: -```ts + +```ts copy import Onboard from '@web3-onboard/core' import injectedModule from '@web3-onboard/injected-wallets' import { ethers } from 'ethers' @@ -109,10 +112,9 @@ 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' - ) + // if using ethers v6 this is: + // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') + const ethersProvider = new ethers.providers.Web3Provider(wallets[0].provider, 'any') const signer = ethersProvider.getSigner() @@ -126,11 +128,13 @@ if (wallets[0]) { console.log(receipt) } ``` + **and you are live!** --- ## 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 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, Tally, Coinbase Wallet & more right away. diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]theming.md b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md new file mode 100644 index 000000000..cb004c02c --- /dev/null +++ b/docs/src/routes/docs/[...2]getting-started/[...2]theming.md @@ -0,0 +1,140 @@ +# Theming + +To customize the color theme of web3-onboard and match it with your dapp, you can choose from the available native themes ('default', 'dark', 'light', 'system') or create a custom theme using a `ThemingMap` object and our [Theming Tool walkthrough](#theming-tool). + +## 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. + +| theme | description | +| --------- | --------------------------------------------------------------------------------- | +| 'default' | default theme | +| 'dark' | dark mode | +| 'light' | light mode | +| 'system' | automatically switch between 'dark' & 'light' based on the user's system settings | + +Example: + +```typescript +import Onboard from '@web3-onboard/core' + +const onboard = Onboard({ + theme: 'dark' + // other options like wallets, chains, appMetaData, etc. +}) +``` + +--- + +## Variables + +In the table below, you'll find a list of css variables that you can use to theme web3-onboard. + +| variable | description | +| ---------------------- | ----------------- | +| --w3o-background-color | background color | +| --w3o-foreground-color | foreground color | +| --w3o-text-color | text color | +| --w3o-border-color | border color | +| --w3o-action-color | buttons and links | +| --w3o-border-radius | border radius | + +--- + +## 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. + +```typescript copy +import Onboard, { ThemingMap } from '@web3-onboard/core' + +const customTheme: ThemingMap = { + '--w3o-background-color': '#f0f0f0', + '--w3o-foreground-color': '#333', + '--w3o-text-color': '#fff', + '--w3o-border-color': '#ccc', + '--w3o-action-color': '#007bff', + '--w3o-border-radius': '5px' +} + +const onboard = Onboard({ + theme: customTheme + // other options like wallets, chains, appMetaData, etc. +}) +``` + +--- + +## 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). +_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 + +Example: + +```typescript copy +import Onboard from '@web3-onboard/core' + +const onboard = Onboard({ + theme: 'dark' + // other options like wallets, chains, appMetaData, etc. +}) + +// after initialization you may want to change the theme based on UI state +onboard.state.actions.updateTheme('light') + +// or + +const customTheme: ThemingMap = { + '--w3o-background-color': '#f0f0f0', + '--w3o-foreground-color': '#333', + '--w3o-text-color': '#fff', + '--w3o-border-color': '#ccc', + '--w3o-action-color': '#007bff' +} +onboard.state.actions.updateTheme(customTheme) +``` + +#### Theme Types + +```typescript +export type Theme = ThemingMap | BuiltInThemes | 'system' + +export type BuiltInThemes = 'default' | 'dark' | 'light' + +export type ThemingMap = { + '--w3o-background-color'?: string + '--w3o-foreground-color'?: string + '--w3o-text-color'?: string + '--w3o-border-color'?: string + '--w3o-action-color'?: string + '--w3o-border-radius'?: string +} +``` + +--- + +## 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. + +To do this: + +- Head over to our [theming tool](/theming-tool) +- Drop a screen shot or enter the URL of your site +- Switch between the built in themes using the control panel in the lower left corner +- To customize, select 'custom' and click the different circles to change the color +- Copy the output theme and use as the value to the `theme` prop within the onboard config **or** within the `updateTheme` API action ([see API action](#dynamically-update-theme-with-api)) + :::admonition type="tip" + _Pro tip: use the toggle to disable the backdrop and select the eye dropper after clicking a color circle to match the color of your site perfectly_ + ::: + +#### Follow along with the video below: + + + +:::admonition type="warning" +_note: not all sites allow iframe injection, if this is the case for your site use a screenshot_ +::: diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]customization.md b/docs/src/routes/docs/[...2]getting-started/[...3]custom-styling.md similarity index 96% rename from docs/src/routes/docs/[...2]getting-started/[...2]customization.md rename to docs/src/routes/docs/[...2]getting-started/[...3]custom-styling.md index f2536f09d..1e366a8cb 100644 --- a/docs/src/routes/docs/[...2]getting-started/[...2]customization.md +++ b/docs/src/routes/docs/[...2]getting-started/[...3]custom-styling.md @@ -2,13 +2,11 @@ You can customize web3-onboard to match the look and feel of your dapp. web3-onboard exposes css variables for each of its UI components. -:::admonition type="experimental" Interested in seeing how web3-onboard will look on your site? [Try out our theming tool](/theming-tool) It will allow you to customize the look and feel of web3-onboard, try different themes or create your own, and preview how web3-onboard will look on your site by entering a URL or adding a screenshot. -::: ## CSS custom properties (variables) @@ -238,7 +236,3 @@ The Onboard styles can customized via [CSS custom properties](https://developer. --notify-onboard-anchor-color } ``` - -:::admonition type="note" -**Stay Tuned:** We're dedicated to providing a seamless customization experience and will soon be providing more tools and examples to help our community get the most out of their web3-onboard implementation. -::: diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md index 49cd81cec..cf59af2d7 100644 --- a/docs/src/routes/docs/[...3]modules/core.md +++ b/docs/src/routes/docs/[...3]modules/core.md @@ -1,3 +1,7 @@ + + # Core This is the core package that contains all of the UI and logic to be able to seamlessly connect user's wallets to your app and track the state of those wallets. Onboard no longer contains any wallet specific code, so wallets need to be passed in upon initialization. @@ -50,6 +54,7 @@ npm install @web3-onboard/coinbase @web3-onboard/fortmatic @web3-onboard/gnosis ::: ## Quick start + Checkout our full library of quick start examples for connecting and interacting with EVM based wallets - **[React](https://github.com/blocknative/react-demo)** @@ -93,10 +98,14 @@ type InitOptions { ### Options -**`wallets`** +#### **wallets** + An array of wallet modules that you would like to be presented to the user to select from when connecting a wallet. A wallet module is an abstraction that allows for easy interaction without needing to know the specifics of how that wallet works and are separate packages that can be included. -**`chains`** +--- + +#### **chains** + An array of Chains that your app supports: ```ts @@ -113,10 +122,13 @@ type Chain = { } ``` -**`appMetadata`** +--- + +#### **appMetadata** + An object that defines your app: -```ts +```ts copy type AppMetadata = { // app name name: string @@ -155,10 +167,15 @@ type RecommendedInjectedWallets = { } ``` -**`connectModal`** +--- + +#### **connectModal** + An object that allows for customizing the connect modal layout and behavior -```typescript +Web3-Onboard connect wallet modal + +```typescript copy type ConnectModalOptions = { showSidebar?: boolean /** @@ -172,10 +189,19 @@ type ConnectModalOptions = { * no modals displayed */ autoConnectLastWallet?: boolean // defaults to false + /** + * Customize the link for the `I don't have a wallet` flow shown on the + * select wallet modal. + * Defaults to `https://ethereum.org/en/wallets/find-wallet/#main-content` + */ + iDontHaveAWalletLink?: string } ``` -**`i18n`** +--- + +#### **i18n** + An object that defines the display text for different locales. Can also be used to override the default text. To override the default text, pass in an object for the `en` locale. ```typescript @@ -186,13 +212,26 @@ type i18nOptions = Record To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](https://github.com/blocknative/web3-onboard/blob/develop/packages/core/src/i18n/en.json). Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood. -**`theme`** +--- + +#### **theme** + A string or an object that defines the color theme web3-onboard will render the components. -Define a custom or predefined theme for Web3Onboard using either: - * BuiltInThemes: ['default', 'dark', 'light', 'system'] - * ThemingMap object to create a totally custom theme -Note: `system` will default to the theme set by the users system. +Define a custom or predefined theme for Web3Onboard using either: + +###### **Native themes available** + +| | | +| --------- | --------------------------------------------------------------------------------- | +| 'default' | a mix of light and dark elements found throughout the web3-onboard components | +| 'dark' | modern look - easy on the eyes in low-light settings | +| 'light' | bright and clean look - easier to read in bright environments | +| 'system' | automatically switch between 'dark' & 'light' based on the user's system settings | + +###### **ThemingMap object** - Create a totally custom theme see below for the typing. + +For a complete walkthrough on customizing your theme checkout our [theming documentation](/docs/getting-started/theming) ```typescript export type Theme = ThemingMap | BuiltInThemes | 'system' @@ -208,15 +247,19 @@ export type ThemingMap = { '--w3o-border-radius'?: string } ``` -:::admonition type="experimental" + +:::admonition type=tip Interested in seeing how web3-onboard will look on your site? -[Try out our theming tool](/theming-tool) +[Try out our theming tool](/theming-tool) or our in depth theming walkthrough [here](/docs/getting-started/theming) It will allow you to customize the look and feel of web3-onboard, try different themes or create your own, and preview how web3-onboard will look on your site by entering a URL or adding a screenshot. ::: -**`accountCenter`** +--- + +#### **accountCenter** + 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 @@ -241,7 +284,10 @@ export type AccountCenterOptions = { type AccountCenterPosition = 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft' ``` -**`containerElements`** +--- + +#### **containerElements** + An object mapping for W3O components with the key being the DOM element to mount the specified component to. This defines the DOM container element for svelte to attach the component. @@ -250,12 +296,25 @@ For an example please see containerElement usage [here](https://github.com/block ```typescript type ContainerElements = { - // when using the accountCenter with a container el the accountCenter position properties are ignored - accountCenter?: string + /** When attaching the Connect Modal to a container el be aware that + * the modal was styled to be mounted through the app to the html body + * and will respond to screen width rather than container width + * This is specifically apparent on mobile so please test thoroughly + * Also consider that other DOM elements(specifically Notifications and + * Account Center) will also append to this DOM el if enabled and their + * own containerEl are not defined + */ + connectModal?: string + /** when using the accountCenter with a container el the accountCenter + * position properties are ignored + */ } ``` -**`notify`** +--- + +#### **`notify`** + Notify provides by default transaction notifications for all connected wallets on the current blockchain. When switching chains the previous chain listeners remain active for 60 seconds to allow capture and report of remaining transactions that may be in flight. By default transaction notifications are captured if a DAppID is provided in the Onboard config along with the Account Center being enabled. An object that defines whether transaction notifications will display (defaults to true if an API key is provided). This object contains an `enabled` flag prop and an optional `transactionHandler` which is a callback that can disable or allow customizations of notifications. @@ -347,7 +406,7 @@ export interface UpdateNotification { Putting it all together, here is an example initialization with the injected wallet modules: -```ts +```ts copy import Onboard from '@web3-onboard/core' import injectedModule from '@web3-onboard/injected-wallets' @@ -503,7 +562,7 @@ const onboard = Onboard({ A wallet can be disconnected, which will cleanup any background operations the wallet may be doing and will also remove it from the Onboard `wallets` array: -```javascript +```javascript copy // disconnect the first wallet in the wallets array const [primaryWallet] = onboard.state.get().wallets await onboard.disconnectWallet({ label: primaryWallet.label }) @@ -593,7 +652,7 @@ type WalletModule { The current state of Onboard can be accessed at any time using the `state.get()` method: -```javascript +```javascript copy const currentState = onboard.state.get() ``` @@ -603,7 +662,7 @@ State can also be subscribed to using the `state.select()` method. The `select` To subscribe to all state updates, call the `select` method with no arguments: -```javascript +```javascript copy const state = onboard.state.select() const { unsubscribe } = state.subscribe((update) => console.log('state update: ', update)) @@ -613,7 +672,7 @@ const { unsubscribe } = state.subscribe((update) => console.log('state update: ' Specific top level slices of state can be subscribed to. For example you may want to just subscribe to receive updates to the `wallets` array only: -```javascript +```javascript copy const wallets = onboard.state.select('wallets') const { unsubscribe } = wallets.subscribe((update) => console.log('wallets update: ', update)) @@ -625,7 +684,10 @@ unsubscribe() A limited subset of internal actions are exposed to update the Onboard state. -**`setWalletModules`** +--- + +#### **setWalletModules** + For updating the wallets that are displayed in the wallet selection modal. This can be used if the wallets you want to support is conditional on another user action within your app. The `setWalletModules` action is called with an updated array of wallets (the same wallets that are passed in on initialization) ```typescript @@ -661,7 +723,52 @@ const onboard = Onboard({ onboard.state.actions.setWalletModules([ledger, trezor]) ``` -**`updateBalances`** +--- + +#### **updateTheme** + +An exposed method for updating the [theme](#theme) of web3-onboard. The function accepts `Theme` types (see below) + +The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables + +Example: + +```typescript copy +import Onboard from '@web3-onboard/core' +import injectedModule from '@web3-onboard/injected-wallets' + +const injected = injectedModule() + +const onboard = Onboard({ + theme: 'dark', + wallets: [injected], + chains: [ + { + id: '0x1', + token: 'ETH', + label: 'Ethereum Mainnet', + rpcUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}` + } + ] +}) + +// after initialization you may want to change the theme based on a theme switch within the dapp +onboard.state.actions.updateTheme('light') +// or +const customTheme: ThemingMap = { + '--w3o-background-color': '#f0f0f0', + '--w3o-foreground-color': '#333', + '--w3o-text-color': '#fff', + '--w3o-border-color': '#ccc', + '--w3o-action-color': '#007bff' +} +onboard.state.actions.updateTheme(customTheme) +``` + +--- + +#### **updateBalances** + You may decide to get updated balances for connected wallets after a user action by calling the `updatedBalances` function, which expects a conditional array of addresses: ```javascript @@ -670,17 +777,23 @@ onboard.state.actions.updateBalances(['0xfdadfadsadsadsadasdsa']) // update bala onboard.state.actions.updateBalances(['0xfdadfadsadsadsadasdsa', '0xfdsafdsfdsfdsfds']) // update balance for two addresses ``` -**`setLocale`** +--- + +#### **setLocale** + Onboard will automatically detect the browser locale at runtime, but if you would like to update it manually you can call the `setLocale` function: ```javascript onboard.state.actions.setLocal('fr_FR') ``` -**`updateNotify`** +--- + +#### **updateNotify** + If you need to update your notify configuration after initialization, you can do that by calling the `updateNotify` function: -```javascript +```javascript copy onboard.state.actions.updateNotify({ desktop: { enabled: true, @@ -711,12 +824,15 @@ onboard.state.actions.updateNotify({ }) ``` -**`customNotification`** +--- + +#### **customNotification** + 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 +```typescript copy const { update, dismiss } = onboard.state.actions.customNotification({ type: 'pending', message: 'This is a custom DApp pending notification to use however you want', @@ -734,7 +850,10 @@ setTimeout( ) ``` -**`preflightNotifications`** +--- + +#### **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 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 @@ -762,8 +881,10 @@ interface PreflightNotificationsOptions { } ``` -```typescript +```typescript copy const balanceValue = Object.values(balance)[0] +// if using ethers v6 this is: +// ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') const ethersProvider = new ethers.providers.Web3Provider(provider, 'any') const signer = ethersProvider.getSigner() @@ -791,7 +912,10 @@ const transactionHash = await onboard.state.actions.preflightNotifications({ console.log(transactionHash) ``` -**`updateAccountCenter`** +--- + +#### **updateAccountCenter** + If you need to update your Account Center configuration after initialization, you can call the `updateAccountCenter` function with the new configuration ```typescript @@ -802,7 +926,10 @@ onboard.state.actions.updateAccountCenter({ }) ``` -**`setPrimaryWallet`** +--- + +#### **setPrimaryWallet** + The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in: ```typescript @@ -818,7 +945,7 @@ onboard.state.actions.setPrimaryWallet(wallets[1], wallets[1].accounts[2].addres When initializing Onboard you define a list of chains/networks that your app supports. If you would like to prompt the user to switch to one of those chains, you can use the `setChain` method on an initialized instance of Onboard: -```typescript +```typescript copy type SetChain = (options: SetChainOptions) => Promise type SetChainOptions = { chainId: string // hex encoded string @@ -1052,7 +1179,7 @@ Node built-ins are automatically bundled in v4 so that portion is handled automa **babel.config.js** -```javascript +```javascript copy module.exports = (api) => { api.cache(true) const plugins = [ @@ -1085,7 +1212,7 @@ You'll need to add some dev dependencies with the following command: Then add the following to your `webpack.config.js` file: -```javascript +```javascript copy const webpack = require('webpack') module.exports = { @@ -1132,7 +1259,7 @@ Add the following dev dependencies: `yarn add rollup-plugin-polyfill-node webpack-bundle-analyzer assert buffer crypto-browserify stream-http https-browserify os-browserify process stream-browserify util path-browserify -D` -```javascript +```javascript copy const webpack = require('webpack') const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') const path = require('path') @@ -1306,4 +1433,4 @@ build: { If you are seeing an error during builds when dynamically importing Web3Onboard in a NextJS v13 project, try upgrading to to the Canary beta release of NextJS where this issue is fixed. - ::: \ No newline at end of file +::: diff --git a/docs/src/routes/docs/[...3]modules/gas.md b/docs/src/routes/docs/[...3]modules/gas.md index 618049c5a..1c02d7911 100644 --- a/docs/src/routes/docs/[...3]modules/gas.md +++ b/docs/src/routes/docs/[...3]modules/gas.md @@ -1,6 +1,7 @@ + # Gas A module for requesting streams or single requests of gas price estimates from the [Blocknative Gas Platform API](https://docs.blocknative.com/gas-platform). @@ -75,21 +76,23 @@ const gasBlockPrices = await gas.get({ }) ``` - ## Usage with Web3-Onboard wallet Connect and Ethers.js -This example assumes you have already setup web3-onboard to connect wallets to your dapp. +This example assumes you have already setup web3-onboard to connect wallets to your dapp. For more information see [web3-onboard docs](/docs/modules/core#install). -```ts + +```ts copy import gas from '@web3-onboard/gas' import { ethers } from 'ethers' // Set provider using the Web3-Onboard wallet.provider instance from the connected wallet +// if using ethers v6 this is: +// ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') let provider = new ethers.providers.Web3Provider(wallet.provider, 'any') let bnGasPrices const ethMainnetGasBlockPrices = gas.stream({ - chains: ['0x1'], // '0x89' can also be added/replaced here for Polygon gas data + chains: ['0x1'], // '0x89' can also be added/replaced here for Polygon gas data apiKey: '', // for faster refresh rates endpoint: 'blockPrices' }) @@ -111,7 +114,7 @@ const sendTransaction = async () => { } const signer = provider.getUncheckedSigner() - + // define desired confidence for transaction inclusion in block and set in transaction // block inclusion confidence options: 70, 80, 90, 95, 99 const bnGasForTransaction = bnGasPrices.find(gas => gas.confidence === 90) @@ -131,4 +134,5 @@ const sendTransaction = async () => { ``` ## Build Environments -For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) \ No newline at end of file + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) diff --git a/docs/src/routes/docs/[...3]modules/react.md b/docs/src/routes/docs/[...3]modules/react.md index dc4e78d7a..e115804ca 100644 --- a/docs/src/routes/docs/[...3]modules/react.md +++ b/docs/src/routes/docs/[...3]modules/react.md @@ -59,6 +59,8 @@ function App() { let ethersProvider if (wallet) { + // if using ethers v6 this is: + // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any') } diff --git a/docs/src/routes/docs/[...3]modules/transaction-preview.md b/docs/src/routes/docs/[...3]modules/transaction-preview.md index 80562f98d..72bfb2b86 100644 --- a/docs/src/routes/docs/[...3]modules/transaction-preview.md +++ b/docs/src/routes/docs/[...3]modules/transaction-preview.md @@ -41,7 +41,7 @@ npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-previe To use the Transaction Preview package with web3-onboard all a developer needs to do is initialize web3-onboard with their [Blocknative API key](https://onboard.blocknative.com/docs/overview/introduction#optional-use-an-api-key-to-fetch-real-time-transaction-data-balances-gas) and pass in the module as shown below. -```typescript +```typescript copy import Onboard from '@web3-onboard/core' import injectedModule from '@web3-onboard/injected' import transactionPreviewModule from '@web3-onboard/transaction-preview' @@ -87,7 +87,7 @@ To use the Transaction Preview package without web3-onboard all a developer need With the above steps a UI will be rendered with the balance changes and gas used. -```typescript +```typescript copy import transactionPreviewModule from '@web3-onboard/transaction-preview' const {init, previewTransaction} = transactionPreviewModule({ @@ -113,6 +113,8 @@ containerElement: string}) // Transaction code here using Ether.js or Web3.js or construct your own transactions const simulate = async provider => { + // if using ethers v6 this is: + // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') const ethersProvider = new ethers.providers.Web3Provider(provider, 'any') const signer = ethersProvider.getSigner() diff --git a/docs/src/routes/docs/[...3]modules/vue.md b/docs/src/routes/docs/[...3]modules/vue.md index b7cee7eda..231ead9bf 100644 --- a/docs/src/routes/docs/[...3]modules/vue.md +++ b/docs/src/routes/docs/[...3]modules/vue.md @@ -46,6 +46,8 @@ const web3Onboard = init({ 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 } diff --git a/docs/src/routes/docs/[...4]wallets/formatic.md b/docs/src/routes/docs/[...4]wallets/formatic.md index a3d8c3da4..7c8812384 100644 --- a/docs/src/routes/docs/[...4]wallets/formatic.md +++ b/docs/src/routes/docs/[...4]wallets/formatic.md @@ -1,6 +1,6 @@ # Fortmatic -Wallet module for connecting Ledger hardware wallets to web3-onboard +Wallet module for connecting Fortmatic wallets to web3-onboard ### Install diff --git a/docs/src/routes/docs/[...4]wallets/infinitywallet.md b/docs/src/routes/docs/[...4]wallets/infinitywallet.md new file mode 100644 index 000000000..1c28bf782 --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/infinitywallet.md @@ -0,0 +1,49 @@ + +# Infinity Wallet + +## Wallet module for connecting Infinity Wallet through web3-onboard + +Infinity Wallet SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications. + +Checkout the official [Infinity Wallet page](https://infinitywallet.io/) for details. + +## Install + + + + +```sh copy +yarn add @web3-onboard/core @web3-onboard/infinity-wallet +``` + + + + +```sh copy +npm install @web3-onboard/core @web3-onboard/infinity-wallet +``` + + + + + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import infinityWalletWalletModule from '@web3-onboard/infinity-wallet' + +// initialize the module with options +const infinityWalletSDK = infinityWalletWalletModule() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + infinityWalletSDK() + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` diff --git a/docs/src/routes/docs/[...4]wallets/injected.md b/docs/src/routes/docs/[...4]wallets/injected.md index 73ab92a82..b3a1363c9 100644 --- a/docs/src/routes/docs/[...4]wallets/injected.md +++ b/docs/src/routes/docs/[...4]wallets/injected.md @@ -292,9 +292,9 @@ const injected = injectedModule({ - Meetone - _Mobile_ - Mykey - _Mobile_ - Ownbit - _Mobile_ +- xDefi - _Desktop & Mobile_ - Tokenpocket - _Desktop & Mobile_ - TP - _Mobile_ -- xDefi - _Desktop & Mobile_ - 1inch - _Mobile_ - Tokenary - _Mobile_ - GameStop - _Desktop_ diff --git a/docs/src/routes/docs/[...4]wallets/walletconnect.md b/docs/src/routes/docs/[...4]wallets/walletconnect.md index e54c20b85..b1bc4a33e 100644 --- a/docs/src/routes/docs/[...4]wallets/walletconnect.md +++ b/docs/src/routes/docs/[...4]wallets/walletconnect.md @@ -34,6 +34,10 @@ type WalletConnectOptions = { mobileLinks: string[] // set the order and list of mobile linking wallets } connectFirstChainId?: boolean // if true, connects to the first network chain provided + /** + * Optional function to handle WalletConnect URI when it becomes available + */ + handleUri?: (uri: string) => Promise } & ( | { /** @@ -74,7 +78,11 @@ const wcV2InitOptions = { /** * Project ID associated with [WalletConnect account](https://cloud.walletconnect.com) */ - projectId: 'abc123...' + projectId: 'abc123...', + /** + * Optional function to handle WalletConnect URI when it becomes available + */ + handleUri: (uri) => console.log(uri) } // initialize the module with options diff --git a/docs/src/routes/docs/[...4]wallets/xdefi.md b/docs/src/routes/docs/[...4]wallets/xdefi.md new file mode 100644 index 000000000..3aa84d6e9 --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/xdefi.md @@ -0,0 +1,47 @@ + +# XDEFI + +## Wallet module for connecting XDEFI to web3-onboard + +See [XDEFI Wallet Developer Docs](https://sdk.xdefi.io/) + +## Install + + + + +```sh copy +yarn add @web3-onboard/core @web3-onboard/xdefi +``` + + + + +```sh copy +npm install @web3-onboard/core @web3-onboard/xdefi +``` + + + + + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import xdefiWalletModule from '@web3-onboard/xdefi' + +// initialize the module with options +const xdefiWalletSdk = xdefiWalletModule() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + xdefiWalletSdk() + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` diff --git a/docs/src/routes/examples/uniswap-widget.md b/docs/src/routes/examples/uniswap-widget.md index 907211eec..53f72d2c3 100644 --- a/docs/src/routes/examples/uniswap-widget.md +++ b/docs/src/routes/examples/uniswap-widget.md @@ -100,6 +100,8 @@ export default function App() { // This provider will then be passed to the Uniswap component in the next step. useEffect(() => { if (wallet?.provider) { + // if using ethers v6 this is: + // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any')) } else { // Reset the provider back to 'undefined' such that the @@ -158,6 +160,8 @@ export default function App() { // This provider will then be passed to the Uniswap component below. useEffect(() => { if (wallet?.provider) { + // if using ethers v6 this is: + // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any')) } else { // Reset the provider back to 'undefined' such that the diff --git a/docs/yarn.lock b/docs/yarn.lock index a190ee699..74fcf916c 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -2969,10 +2969,10 @@ ethers "5.5.4" joi "^17.6.1" -"@web3-onboard/core@^2.15.1-alpha.1": - version "2.15.1-alpha.1" - resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.15.1-alpha.1.tgz#a6c241ba7eb84f40547e57b8192ecd46759ec5ad" - integrity sha512-CrAj0WkBxO52j2JUs5YFIbvfwyrUoWXO7B3QOG6VrQ9w4HRXO5lVBsD2RYMSA5fTbAbRZ7VwPiHCdmQ/ztKYLg== +"@web3-onboard/core@^2.15.2-alpha.1": + version "2.15.2" + resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.15.2.tgz#9156f3c0a39dfb9aa8963a8ef4d8cf11bd8b5695" + integrity sha512-5p7rW6xNpljAq85kCcU5O/MKSR7uDG4V3EixwfwvNSITHejtjpfGmcUPFW7pYI/J+PQ3Z/u1ThMRDoD2tfjevA== dependencies: "@unstoppabledomains/resolution" "^8.0" "@web3-onboard/common" "^2.2.3" @@ -3138,10 +3138,10 @@ "@toruslabs/torus-embed" "1.38.2" "@web3-onboard/common" "^2.2.3" -"@web3-onboard/transaction-preview@^2.0.3-alpha.1": - version "2.0.3-alpha.1" - resolved "https://registry.yarnpkg.com/@web3-onboard/transaction-preview/-/transaction-preview-2.0.3-alpha.1.tgz#b8945c3b785dc1e0281709c01b464fe45aea1570" - integrity sha512-iJZtvGcYh3ZbmTzaNRAUWKmX4VwgbgaKbmlYCdmeOvNjB7fZykzqr9CXbGwwVmfI3xA7zT17hP5M0WjGFyuDFA== +"@web3-onboard/transaction-preview@^2.0.4-alpha.1": + version "2.0.4" + resolved "https://registry.yarnpkg.com/@web3-onboard/transaction-preview/-/transaction-preview-2.0.4.tgz#c2d5dc55cf1602e9150c70238fc38a573ae580c7" + integrity sha512-GWnyPzQh0/7qVE8TDiehILqAlSsoodlUGq6FCuyIU2abaBDhssODxX+s9MLrSF0SlV8jniJ+KoG3ir1Q1chQTQ== dependencies: "@web3-onboard/common" "^2.2.3" bnc-sdk "^4.6.7" @@ -3206,6 +3206,13 @@ "@web3auth/base" "^3.3.0" "@web3auth/modal" "^3.3.0" +"@web3-onboard/xdefi@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@web3-onboard/xdefi/-/xdefi-2.0.0.tgz#1adff4d798688d18616cfc8d78150fbe47f1757a" + integrity sha512-sgqhXUSO6dIvAmzKwD/ygCLtpkDgeLZ3Th8JkmV5t8wsYWj26FPuJFT0LNy4yVXSg4psFzsYcWb23BLdlTLvog== + dependencies: + "@web3-onboard/common" "^2.2.3" + "@web3auth/base-evm-adapter@^3.3.0": version "3.3.0" resolved "https://registry.yarnpkg.com/@web3auth/base-evm-adapter/-/base-evm-adapter-3.3.0.tgz#ab8575ac5d05dfe055e52500b61691cefdd6268f" @@ -3931,17 +3938,7 @@ bnb-javascript-sdk-nobroadcast@^2.16.14: uuid "^3.3.2" websocket-stream "^5.5.0" -bnc-sdk@^4.6.6: - version "4.6.6" - resolved "https://registry.yarnpkg.com/bnc-sdk/-/bnc-sdk-4.6.6.tgz#ef5501a0c68014efae24d00d2e3fb706318fa00d" - integrity sha512-cpavy/WBQrkw5PZpnuUAvxzj/RjmP1vSldOEG+nonf7n/4sykScDO6KrJN2oVhEMaxHOqOVf2rOugSL5t515eA== - dependencies: - crypto-es "^1.2.2" - nanoid "^3.3.1" - rxjs "^6.6.3" - sturdy-websocket "^0.1.12" - -bnc-sdk@^4.6.7: +bnc-sdk@^4.6.6, bnc-sdk@^4.6.7: version "4.6.7" resolved "https://registry.yarnpkg.com/bnc-sdk/-/bnc-sdk-4.6.7.tgz#138a22e04c95c2c697fb836092358d21957e2114" integrity sha512-jIQ6cmeRBgvH/YDLuYRr2+kxDGcAAi0SOvjlO5nQ5cWdbslw+ASWftd1HmxiVLNCiwEH5bSc/t8a0agZ5njTUQ== diff --git a/examples/with-sveltekit/yarn.lock b/examples/with-sveltekit/yarn.lock index e8e88dbf2..545b1f8a3 100644 --- a/examples/with-sveltekit/yarn.lock +++ b/examples/with-sveltekit/yarn.lock @@ -1470,6 +1470,13 @@ buffer@^6.0.3: base64-js "^1.3.1" ieee754 "^1.2.1" +busboy@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893" + integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA== + dependencies: + streamsearch "^1.1.0" + callsites@^3.0.0: version "3.1.0" resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" @@ -2992,6 +2999,11 @@ split-on-first@^1.0.0: resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f" integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw== +streamsearch@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764" + integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg== + strict-uri-encode@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" @@ -3190,9 +3202,11 @@ typescript@^4.9.4, typescript@^4.9.5: integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== undici@^5.8.1: - version "5.10.0" - resolved "https://registry.npmjs.org/undici/-/undici-5.10.0.tgz#dd9391087a90ccfbd007568db458674232ebf014" - integrity sha512-c8HsD3IbwmjjbLvoZuRI26TZic+TSEe8FPMLLOkN1AfYRhdjnKBU6yL+IwcSCbdZiX4e5t0lfMDLDCqj4Sq70g== + version "5.19.1" + resolved "https://registry.yarnpkg.com/undici/-/undici-5.19.1.tgz#92b1fd3ab2c089b5a6bd3e579dcda8f1934ebf6d" + integrity sha512-YiZ61LPIgY73E7syxCDxxa3LV2yl3sN8spnIuTct60boiiRaE1J8mNWHO8Im2Zi/sFrPusjLlmRPrsyraSqX6A== + dependencies: + busboy "^1.6.0" uri-js@^4.2.2: version "4.4.1" diff --git a/package.json b/package.json index b564de751..d6c2fdef8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web3-onboard-monorepo", - "version": "2.20.2", + "version": "2.20.3", "private": true, "workspaces": { "packages": [ diff --git a/packages/core/README.md b/packages/core/README.md index 1332a7f8f..7ab0b169c 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -28,7 +28,7 @@ Install the core module: If you would like to support all wallets, then you can install all of the wallet modules: ```bash -npm i @web3-onboard/coinbase @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/trust +npm i @web3-onboard/coinbase @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/infinity-wallet @web3-onboard/trust @web3-onboard/injected-wallets @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/magic @web3-onboard/portis @web3-onboard/torus @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/web3auth @@ -139,6 +139,12 @@ type ConnectModalOptions = { * no modals displayed */ autoConnectLastWallet?: boolean // defaults to false + /** + * Customize the link for the `I don't have a wallet` flow shown on the + * select wallet modal. + * Defaults to `https://ethereum.org/en/wallets/find-wallet/#main-content` + */ + iDontHaveAWalletLink?: string } ``` @@ -146,8 +152,8 @@ type ConnectModalOptions = { A string or an object that defines the color theme web3-onboard will render the components. Define a custom or predefined theme for Web3Onboard using either: -- BuiltInThemes: ['default', 'dark', 'light', 'system'] -- ThemingMap object to create a totally custom theme +- Native themes available: 'default', 'dark', 'light', 'system' +- `ThemingMap` object to create a totally custom theme - see below for the typing Note: `system` will default to the theme set by the users system. @@ -661,6 +667,70 @@ const onboard = Onboard({ onboard.state.actions.setWalletModules([ledger, trezor]) ``` +**`updateTheme`** +An exposed method for updating the theme of web3-onboard. The function accepts `Theme` types (see below) + +Available native themes include: +| | | +| --- | ----------- | +| 'default' | a mix of light and dark elements found throughout the web3-onboard components | +| 'dark' | modern look - easy on the eyes in low-light settings | +| 'light' | bright and clean look - easier to read in bright environments | +| 'system' | automatically switch between 'dark' & 'light' based on the user's system settings | + + + +The function also accepts a custom built `ThemingMap` object that contains all or some of the theming variables + +Example: + +```typescript +import Onboard from '@web3-onboard/core' +import injectedModule from '@web3-onboard/injected-wallets' + +const injected = injectedModule() + +const onboard = Onboard({ + theme: 'dark', + wallets: [injected], + chains: [ + { + id: '0x1', + token: 'ETH', + label: 'Ethereum Mainnet', + rpcUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}` + } + ] +}) + +// after initialization you may want to change the theme based on a theme switch within the dapp +onboard.state.actions.updateTheme('light') +// or +const customTheme: ThemingMap = { + '--w3o-background-color': '#f0f0f0', + '--w3o-foreground-color': '#333', + '--w3o-text-color': '#fff', + '--w3o-border-color': '#ccc', + '--w3o-action-color': '#007bff' +} +onboard.state.actions.updateTheme(customTheme) +``` + +```typescript +export type Theme = ThemingMap | BuiltInThemes | 'system' + +export type BuiltInThemes = 'default' | 'dark' | 'light' + +export type ThemingMap = { + '--w3o-background-color'?: string + '--w3o-foreground-color'?: string + '--w3o-text-color'?: string + '--w3o-border-color'?: string + '--w3o-action-color'?: string + '--w3o-border-radius'?: string +} +``` + **`updateBalances`** You may decide to get updated balances for connected wallets after a user action by calling the `updatedBalances` function, which expects a conditional array of addresses: @@ -768,6 +838,8 @@ interface PreflightNotificationsOptions { ```typescript const balanceValue = Object.values(balance)[0] const ethersProvider = new ethers.providers.Web3Provider(provider, 'any') +// if using ethers v6 this is: +// ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') const signer = ethersProvider.getSigner() const txDetails = { diff --git a/packages/core/package.json b/packages/core/package.json index 667dd8f06..0c4ac180c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.15.2", + "version": "2.15.3", "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 24cc488e0..ad12c2ca4 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -174,6 +174,9 @@ export type i18nOptions = Record export type i18n = typeof en export type ConnectModalOptions = { + /** + * Display the connect modal sidebar - only applies to desktop views + */ showSidebar?: boolean /** * Disabled close of the connect modal with background click and @@ -186,6 +189,12 @@ export type ConnectModalOptions = { * no modals displayed */ autoConnectLastWallet?: boolean + /** + * Customize the link for the `I don't have a wallet` flow shown on the + * select wallet modal. + * Defaults to `https://ethereum.org/en/wallets/find-wallet/#main-content` + */ + iDontHaveAWalletLink?: string } export type CommonPositions = diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index 13d3947de..5c27245f6 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -173,7 +173,8 @@ const accountCenter = Joi.object({ const connectModalOptions = Joi.object({ showSidebar: Joi.boolean(), disableClose: Joi.boolean(), - autoConnectLastWallet: Joi.boolean() + autoConnectLastWallet: Joi.boolean(), + iDontHaveAWalletLink: Joi.string() }) const containerElements = Joi.object({ diff --git a/packages/core/src/views/connect/Sidebar.svelte b/packages/core/src/views/connect/Sidebar.svelte index 18c321b30..b199ff09e 100644 --- a/packages/core/src/views/connect/Sidebar.svelte +++ b/packages/core/src/views/connect/Sidebar.svelte @@ -1,17 +1,24 @@