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 <g.esq.ca@gmail.com>

* Update docs/src/lib/components/code-snippet/theming-code.md

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

* 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 <adamcarpenter86@gmail.com>

* [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](nodejs/undici@v5.10.0...v5.19.1)

---
updated-dependencies:
- dependency-name: undici
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

* Update fortmatic docs

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
Co-authored-by: Gustavo Esquinca <g.esq.ca@gmail.com>
Co-authored-by: Brent <46073594+Brentably@users.noreply.github.com>
Co-authored-by: mhchaudhry3 <mobeen@blocknative.com>
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>

Author: 8 people

.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

.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

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**
 

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"
   }

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) => {

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'
 </script>
 
 <section class="features-a">
@@ -63,7 +65,6 @@
   </Container>
 </section>
 
-<!-- Features Section -->
 <section class="features-c">
   <Container>
     <div class="flexbox" style:padding={'4rem 1rem'}>
@@ -81,8 +82,43 @@
     </div>
   </Container>
   <ScrollContainer>
-    <img src={WalletsGraphic} alt="onboard connect wallets" style="margin: 0 auto; max-width: none;">
+    <img
+      src={WalletsGraphic}
+      alt="onboard connect wallets"
+      style="margin: 0 auto; max-width: none;"
+    />
   </ScrollContainer>
+  <Container>
+    <div class="flexbox">
+      <div>
+        <img
+          src={TransactionPreviewGraphic}
+          alt="Transaction Preview"
+          style="margin: 0 auto; max-width: none;"
+        />
+      </div>
+      <div>
+        <TextBlock
+          title={'Transaction Preview'}
+          subtitle={'Preview transactions to see net-balance changes and gas spent'}
+          text={'Reduce transaction anxiety by allowing users to easily preview expected net-balance changes for their connected wallets before authorizing transactions.'}
+        >
+          <Flexbox --wrap="wrap">
+            <Button href="/docs/modules/transaction-preview" buttonStyle={'link'}
+              >{'Learn More'}</Button
+            >
+            <Button
+              href="/docs/modules/transaction-preview#try-transaction-preview"
+              buttonStyle={'link'}>{'View Demo'}</Button
+            >
+          </Flexbox>
+          <div class="prose">
+            <InstallCodeTp />
+          </div>
+        </TextBlock>
+      </div>
+    </div>
+  </Container>
   <Container>
     <div class="flexbox">
       <TextBlock
@@ -100,7 +136,7 @@
   </Container>
   <Container>
     <div class="flexbox">
-      <div><AccountCenterGraphic /></div>
+      <div><img src={AccountCenterGraphic} alt="" /></div>
       <div>
         <TextBlock
           title={'Account Center'}

docs/src/lib/components/GettingStarted.svelte

@@ -1,5 +1,5 @@
 <script>
-  import GettingStartedGuide from './getting-started-guide.md'
+  import GettingStartedGuide from './code-snippet/getting-started-guide.md'
 </script>
 
 <section id="get-started">

docs/src/lib/components/HeroSection.svelte

@@ -1,22 +1,19 @@
 <script>
   import Button from './base/Button.svelte'
   import Flexbox from './base/Flexbox.svelte'
-  import CodeBlock from './base/CodeBlock.svelte'
-
+  import InstallCode from './code-snippet/install-code.md'
   import heroBg from './svg/hero-bg.svg'
   import heroImg from './svg/hero-img.svg'
 </script>
 
 <section style="background-image: url({heroBg});">
   <div class="textblock">
-    <div class="title">{"Web3-Onboard"}</div>
+    <div class="title">{'Web3-Onboard'}</div>
     <div class="text">
-      {"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.'}
     </div>
-    <div>
-      <CodeBlock>
-        {'npm i @web3-onboard/core @web3-onboard/injected-wallets'}
-      </CodeBlock>
+    <div class="prose">
+      <InstallCode />
     </div>
     <Flexbox --gap="1.5rem" --direction="row" --wrap="wrap">
       <Button href="#get-started" label={'Get Started'} />

docs/src/lib/components/ThemeCustomizer.svelte

@@ -8,7 +8,7 @@
   let wallets$
 
   const themes = ['system', 'default', 'light', 'dark', 'custom']
-  let selectedTheme = 'system'
+  let selectedTheme = 'custom'
 
   let webURL = ''
   let iframeUsed = false

docs/src/lib/components/ThemingSection.svelte

@@ -5,7 +5,7 @@
   import TextBlock from './TextBlock.svelte'
   import Container from './Container.svelte'
 
-  import ThemingCode from './theming-code.md'
+  import ThemingCode from './code-snippet/theming-code.md'
   import ThemingGraphic from './svg/themes-example-carousel.svg'
 </script>
 
@@ -28,7 +28,7 @@
     </div>
   </Container>
   <ScrollContainer style={'padding: 0 2rem'}>
-    <img class="carousel-img" src={ThemingGraphic} alt="onboard connect wallet themes" >
+    <img class="carousel-img" src={ThemingGraphic} alt="onboard connect wallet themes" />
   </ScrollContainer>
 </section>
 

docs/src/lib/components/getting-started-guide.md renamed to 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()
 

docs/src/lib/components/code-snippet/install-code-tp.md

@@ -0,0 +1,16 @@
+<Tabs values={['npm', 'yarn']}>
+<TabPanel value="npm">
+
+```sh copy
+npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
+```
+
+  </TabPanel>
+  <TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
+```
+
+  </TabPanel>
+</Tabs>

docs/src/lib/components/install-code.md renamed to docs/src/lib/components/code-snippet/install-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;
+}
+```

docs/src/lib/components/code-snippet/theming-code.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])
 

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="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,