Merge pull request #1555 from blocknative/release/2.20.3

Release 2.20.3 (docs)

Author: Adamj1232

.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.1-alpha.1",
+    "@web3-onboard/core": "^2.15.4",
     "@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.3-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>