Merge pull request #1383 from blocknative/docs-develop

Docs release

Author: gesquinca

docs/src/lib/components/Footer.svelte

@@ -11,7 +11,7 @@
 
   let text = {
     license: 'Released under the MIT License.',
-    copyright: 'Copyright © 2022'
+    copyright: '© 2022 Blocknative. All Rights Reserved.'
   }
 </script>
 
@@ -43,34 +43,67 @@
       </a>
     </Flexbox>
     <a href="//www.blocknative.com/" target="_blank">
-      <img src={PoweredByBn} alt="Powered by Blocknative">
+      <img src={PoweredByBn} alt="Powered by Blocknative" />
       <span class="sr-only">Powered by Blocknative</span>
     </a>
   </Flexbox>
   <div class="copyright-box">
-    <div class="text">{text.license}</div>
-    <div class="text">{text.copyright}</div>
+    <div class="flex flex-row flex-wrap justify-center">
+      <div class="text">{text.license}</div>
+      <div class="text">{text.copyright}</div>
+    </div>
+    <div class="flex">
+      <a
+        target="_blank"
+        href="https://www.blocknative.com/privacy-policy"
+        class="text-sm hover:text-white">Privacy Policy</a
+      >
+      <div class="w-px bg-gray-divider mx-2 h-4" />
+      <a
+        target="_blank"
+        href="https://www.blocknative.com/terms-conditions"
+        class="text-sm hover:text-white">Terms of Service</a
+      >
+    </div>
   </div>
 </footer>
 
 <style>
   footer {
     background: #1a1d26;
     min-height: 400px;
-
     display: flex;
     flex-flow: column;
   }
 
+  a.icon-link {
+    color: rgba(255, 255, 255, 0.8);
+    transition: transform 200ms ease-in-out;
+  }
+  a.icon-link:hover {
+    color: rgba(255, 255, 255, 1);
+    transform: scale(1.2);
+  }
+  a.icon-link:focus {
+    transform: none;
+  }
+
   .copyright-box {
     /* grey/600 */
     background: #242835;
-
     display: flex;
     flex-flow: column;
     justify-content: center;
     align-items: center;
     padding: 1.5rem 2rem;
+    gap: 1rem;
+  }
+  @media screen and (min-width: 1024px) {
+    .copyright-box {
+      flex-flow: row;
+      justify-content: space-between;
+      gap: 0.5rem;
+    }
   }
 
   .text {
@@ -80,23 +113,10 @@
     font-weight: 400;
     font-size: 14px;
     line-height: 16px;
-
     /* grey/300 */
     color: #999ca5;
   }
 
-  a.icon-link {
-    color: rgba(255, 255, 255, 0.8);
-    transition: transform 200ms ease-in-out;
-  }
-  a.icon-link:hover {
-    color: rgba(255, 255, 255, 1);
-    transform: scale(1.2);
-  }
-  a.icon-link:focus {
-    transform: none;
-  }
-
   /* screen reader class */
   /* can be moved elsewhere */
   .sr-only {
@@ -110,4 +130,5 @@
     white-space: nowrap;
     border-width: 0;
   }
+
 </style>

docs/src/lib/components/gas/Gas.svelte

@@ -2,7 +2,7 @@
   import anime from 'animejs'
   import GasCard from './GasCard.svelte'
   import gasModule from '@web3-onboard/gas'
-  import { onMount } from 'svelte'
+  import { onDestroy, onMount } from 'svelte'
   import { ethers } from 'ethers'
   import type { GasPrice, RPCGasPrice, GasData } from './types'
 
@@ -19,14 +19,15 @@
     })
   }
   let ethMainnetGasBlockPrices
+  let gasSub
   let rpcGasData: RPCGasPrice
   onMount(() => {
     ethMainnetGasBlockPrices = gasModule.stream({
       chains: ['0x1'],
       apiKey: 'da1b962d-314d-4903-bfe1-426821d14a35',
       endpoint: 'blockPrices'
     })
-    ethMainnetGasBlockPrices.subscribe(() => {
+    gasSub = ethMainnetGasBlockPrices.subscribe(() => {
       async function getEtherGasFromRPC() {
         const INFURA_ID = '8b60d52405694345a99bcb82e722e0af'
         const infuraRPC = `https://mainnet.infura.io/v3/${INFURA_ID}`
@@ -62,6 +63,10 @@
     estimatedTransactionCount: null,
     seconds: null
   }
+
+  onDestroy(() => {
+    gasSub && gasSub.unsubscribe()
+  })
 </script>
 
 <div class="Gas px-6  p-4">

docs/src/routes/docs/[...1]overview/[...1]introduction.md

@@ -33,7 +33,7 @@ and it's dependencies only when the user selects it, so that minimal bandwidth i
 
 ### 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/packages/core#options).
+web3-onboard supports all EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](https://onboard.blocknative.com/docs/modules/core#options).
 - Arbitrum
 - Avalanche
 - BNB Chain
@@ -133,9 +133,9 @@ if (wallets[0]) {
 ## Wallet Modules
 Add other wallet modules such as Wallet Connect or Ledger to increase the support and functionality of your web3-onboard implementation. All modules 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/packages/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.
+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.
 
-[**Core Repo**](https://onboard.blocknative.com/docs/packages/core#install)
+[**Core Repo**](https://onboard.blocknative.com/docs/modules/core#install)
 
 [**Injected Wallets**](https://onboard.blocknative.com/docs/packages/injected#install)
 
@@ -160,8 +160,8 @@ We recommend you add the [Core Repo](https://onboard.blocknative.com/docs/packag
 
 **Frameworks**
 
-- [React](https://onboard.blocknative.com/docs/packages/react#quickstart-with-injected-wallets-and-ethers-provider)
-- [Vue](https://onboard.blocknative.com/docs/packages/vue#install)
+- [React](https://onboard.blocknative.com/docs/modules/react#quickstart-with-injected-wallets-and-ethers-provider)
+- [Vue](https://onboard.blocknative.com/docs/modules/vue#install)
 
 ## Test out the demo app
 

docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide.md

@@ -46,7 +46,7 @@ const onboard = Onboard({
 })
 ```
 
-You can find the full list of initialization options in our docs [here](/docs/packages/core#options).
+You can find the full list of initialization options in our docs [here](/docs/modules/core#options).
 
 ### API Upgrades
 
@@ -55,7 +55,7 @@ Now, you only need to call the connectWallet API:
 
 `await onboard.connectWallet()`
 
-Learn more about state changes tracked with the Onboard API [here](/docs/packages/core#state) and the exposed actions you can use to modify the state [here](/docs/packages/core#actions-to-modify-state).
+Learn more about state changes tracked with the Onboard API [here](/docs/modules/core#state) and the exposed actions you can use to modify the state [here](/docs/modules/core#actions-to-modify-state).
 
 ### Framework Support
 
@@ -89,7 +89,7 @@ We've also added more expansive custom CSS properties so you can style every par
 }
 ```
 
-The full list of CSS variables for web3-onboard are available [here](/docs/packages/core#custom-styling).
+The full list of CSS variables for web3-onboard are available [here](/docs/modules/core#custom-styling).
 
 ### Other Important Changes
 

docs/src/routes/docs/[...2]getting-started/[...2]customization.md

@@ -79,7 +79,7 @@ The Onboard styles can customized via [CSS custom properties](https://developer.
   --account-center-app-btn-font-family
   --account-center-border
   --account-center-box-shadow
-  --account-center-boarder-radius
+  --account-center-border-radius
   --account-center-chain-warning
   --account-center-minimized-balance-color
   --account-center-minimized-chain-select-background

docs/src/routes/docs/[...4]packages/core.md renamed to docs/src/routes/docs/[...3]modules/core.md

@@ -1,4 +1,4 @@
-# @web3-onboard/core
+# 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.
 
@@ -63,6 +63,11 @@ type InitOptions {
   accountCenter?: AccountCenterOptions
   apiKey?: string
   notify?: Partial<NotifyOptions>
+  gas?: typeof gas
+  /**
+   * Object mapping for W3O components with the key being the component and the value the DOM element to mount the component to. This element must be available at time of package script execution.
+   */
+  containerElements?: Partial<ContainerElements>
 }
 ```
 
@@ -136,6 +141,11 @@ export type AccountCenter = {
   position?: AccountCenterPosition // default: 'topRight'
   expanded?: boolean // default: true
   minimal?: boolean // enabled by default for mobile
+
+  /**
+   * @deprecated Use top level containerElements property
+   * with the accountCenter prop set to the desired container El. See documentation below
+   */
   containerElement?: string // defines the DOM container element for svelte to attach
 }
 
@@ -147,6 +157,20 @@ export type AccountCenterOptions = {
 type AccountCenterPosition = 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft'
 ```
 
+**`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.
+
+**NOTE**: containerElement must be a DOM element with a styleSheet property attached and the element must be available on the DOM at the time of component mounting. 
+For an example please see containerElement usage [here](https://github.com/blocknative/web3-onboard/blob/8531a73d69365f7d584320f1c4b97a5d90f1c34e/packages/demo/src/App.svelte#L227)
+
+```typescript
+type ContainerElements = {
+  // when using the accountCenter with a container el the accountCenter position properties are ignored
+  accountCenter?: string
+}
+```
+
 **`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 an 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.
@@ -252,19 +276,13 @@ const onboard = Onboard({
       id: '0x1',
       token: 'ETH',
       label: 'Ethereum Mainnet',
-      rpcUrl: 'https://mainnet.infura.io/v3/{INFURA_ID}'
-    },
-    {
-      id: '0x3',
-      token: 'tROP',
-      label: 'Ethereum Ropsten Testnet',
-      rpcUrl: 'https://ropsten.infura.io/v3/{INFURA_ID}'
+      rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
     },
     {
-      id: '0x4',
-      token: 'rETH',
-      label: 'Ethereum Rinkeby Testnet',
-      rpcUrl: 'https://rinkeby.infura.io/v3/{INFURA_ID}'
+      id: '0x5',
+      token: 'ETH',
+      label: 'Goerli',
+      rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
     },
     {
       id: '0x38',
@@ -279,10 +297,16 @@ const onboard = Onboard({
       rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
     },
     {
-      id: '0xfa',
-      token: 'FTM',
-      label: 'Fantom Mainnet',
-      rpcUrl: 'https://rpc.ftm.tools/'
+      id: 10,
+      token: 'OETH',
+      label: 'Optimism',
+      rpcUrl: 'https://mainnet.optimism.io'
+    },
+    {
+      id: 42161,
+      token: 'ARB-ETH',
+      label: 'Arbitrum',
+      rpcUrl: 'https://rpc.ankr.com/arbitrum'
     }
   ],
   appMetadata: {

docs/src/routes/docs/[...4]packages/gas.md renamed to docs/src/routes/docs/[...3]modules/gas.md

@@ -1,7 +1,7 @@
 <script>
     import {Gas} from '$lib/components'
 </script>
-# @web3-onboard/gas
+# 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).
 
@@ -79,7 +79,7 @@ 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. 
-For more information see [web3-onboard docs](/docs/packages/core#install).
+For more information see [web3-onboard docs](/docs/modules/core#install).
 ```ts
 import gas from '@web3-onboard/gas'
 import { ethers } from 'ethers'

docs/src/routes/docs/[...4]packages/react.md renamed to docs/src/routes/docs/[...3]modules/react.md

@@ -1,4 +1,4 @@
-# @web3-onboard/react
+# React
 
 A collection of React hooks for implementing web3-onboard in to a React project
 

docs/src/routes/docs/[...4]packages/vue.md renamed to docs/src/routes/docs/[...3]modules/vue.md

@@ -1,4 +1,4 @@
-# @web3-onboard/vue
+# Vue
 
 A collection of composable functions for implementing web3-onboard in to a Vue project; compatible both with Vue 2 + composition-api and Vue 3