Re-org side menu + TOS in the footer (#1361)

taylorjdawson · gesquinca · web-flow · commit c37d0e1213e5 · 2022-11-18T10:15:34.000-07:00
* Re-org side menu + TOS in the footer

* fix typo

* fix paths

* update path

* re-style footer

Co-authored-by: Gustavo Esquinca &lt;g.esq.ca@gmail.com&gt;
diff --git a/docs/src/lib/components/Footer.svelte b/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>
diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction.md b/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
 
diff --git a/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide.md b/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
 
diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]customization.md b/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
diff --git a/docs/src/routes/docs/[...3]modules/common.md b/docs/src/routes/docs/[...3]modules/common.md
@@ -0,0 +1,22 @@
+# Common
+
+A collection of functions and types that are shared across various packages in the Onboard V2 monorepo
+
+## Install
+
+<Tabs values={['yarn', 'npm']}>
+<TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/common
+```
+
+  </TabPanel>
+  <TabPanel value="npm">
+
+```sh copy
+npm install @web3-onboard/common
+```
+
+  </TabPanel>
+</Tabs>
diff --git a/docs/src/routes/docs/[...3]modules/core.md b/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.
 
diff --git a/docs/src/routes/docs/[...3]modules/gas.md b/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'
diff --git a/docs/src/routes/docs/[...3]modules/react.md b/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
 
diff --git a/docs/src/routes/docs/[...3]modules/vue.md b/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
 
diff --git a/docs/src/routes/docs/[...4]packages/common.md b/docs/src/routes/docs/[...4]packages/common.md
diff --git a/docs/src/routes/docs/[...4]wallets/coinbase.md b/docs/src/routes/docs/[...4]wallets/coinbase.md
@@ -1,4 +1,4 @@
-# @web3-onboard/coinbase
+# Coinbase
 
 Wallet module for connecting Coinbase Wallet SDK to web3-onboard. Check out the [Coinbase Wallet Developer Docs](https://docs.cloud.coinbase.com/wallet-sdk/docs) for more information.
 ## Install
diff --git a/docs/src/routes/docs/[...4]wallets/dcent.md b/docs/src/routes/docs/[...4]wallets/dcent.md
@@ -1,4 +1,4 @@
-# @web3-onboard/dcent
+# Dcent
 
 ## Wallet module for connecting D'CENT hardware wallets to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/formatic.md b/docs/src/routes/docs/[...4]wallets/formatic.md
@@ -1,4 +1,4 @@
-# @web3-onboard/fortmatic
+# Fortmatic
 
 Wallet module for connecting Ledger hardware wallets to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/gnosis.md b/docs/src/routes/docs/[...4]wallets/gnosis.md
@@ -1,4 +1,4 @@
-# @web3-onboard/gnosis
+# Gnosis
 
 Wallet module for connecting Gnosis Safe to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/injected.md b/docs/src/routes/docs/[...4]wallets/injected.md
@@ -1,4 +1,4 @@
-# @web3-onboard/injected-wallets
+# Injected Wallets
 
 This module lets web3-onboard automatically detect Browser Injected Wallets such as Metamask or Coinbase Wallet. We recommend you install this module to get the most out of your w3o implementation. This module supports [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) and [recognizes many injected wallets natively](https://onboard.blocknative.com/docs/packages/injected#injected-wallets-supported-natively).
 
diff --git a/docs/src/routes/docs/[...4]wallets/keepkey.md b/docs/src/routes/docs/[...4]wallets/keepkey.md
@@ -1,4 +1,4 @@
-# @web3-onboard/keepkey
+# Keepkey
 
 Wallet module for connecting KeepKey hardware wallets to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/keystone.md b/docs/src/routes/docs/[...4]wallets/keystone.md
@@ -1,4 +1,4 @@
-# @web3-onboard/keystone
+# Keystone
 
 Wallet module for connecting Keystone hardware wallets to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/ledger.md b/docs/src/routes/docs/[...4]wallets/ledger.md
@@ -1,4 +1,4 @@
-# @web3-onboard/ledger
+# Ledger
 
 Wallet module for connecting Ledger hardware wallets to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/magic.md b/docs/src/routes/docs/[...4]wallets/magic.md
@@ -1,4 +1,4 @@
-# @web3-onboard/magic
+# Magic
 
 Wallet module for connecting Magic wallets to Onboard V2
 
diff --git a/docs/src/routes/docs/[...4]wallets/mew.md b/docs/src/routes/docs/[...4]wallets/mew.md
@@ -1,4 +1,4 @@
-# @web3-onboard/mew
+# Mew
 
 Wallet module for connecting Mew wallet to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/portis.md b/docs/src/routes/docs/[...4]wallets/portis.md
@@ -1,4 +1,4 @@
-# @web3-onboard/portis
+# Portis
 
 Wallet module for connecting Portis wallet to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/torus.md b/docs/src/routes/docs/[...4]wallets/torus.md
@@ -1,4 +1,4 @@
-# @web3-onboard/torus
+# Torus
 
 ## Wallet module for connecting Torus wallet to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/trezor.md b/docs/src/routes/docs/[...4]wallets/trezor.md
@@ -1,4 +1,4 @@
-# @web3-onboard/trezor
+# Trezor
 
 Wallet module for connecting Trezor hardware wallets to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/walletconnect.md b/docs/src/routes/docs/[...4]wallets/walletconnect.md
@@ -1,4 +1,4 @@
-# @web3-onboard/walletconnect
+# Walletconnect
 
 Wallet module for connecting Ledger hardware wallets to web3-onboard
 
diff --git a/docs/src/routes/docs/[...4]wallets/walletlink.md b/docs/src/routes/docs/[...4]wallets/walletlink.md
@@ -1,4 +1,4 @@
-# @web3-onboard/walletlink
+# Walletlink
 
 :::admonition type=warning
 _Wallet module for connecting WalletLink to web3-onboard is now deprecated. Please use [@web3-onboard/coinbase](./coinbase.md)_
diff --git a/docs/src/routes/docs/[...4]wallets/web3auth.md b/docs/src/routes/docs/[...4]wallets/web3auth.md
@@ -1,4 +1,4 @@
-# @web3-onboard/web3auth
+# Web3auth
 
 Wallet module for connecting Web3auth to web3-onboard
 
diff --git a/packages/gas/README.md b/packages/gas/README.md
@@ -63,7 +63,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](https://onboard.blocknative.com/docs/packages/core#install).
+For more information see [web3-onboard docs](https://onboard.blocknative.com/docs/modules/core#install).
 ```ts
 import gas from '@web3-onboard/gas'
 import { ethers } from 'ethers'

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# @web3-onboard/core`
	`1`	`+# Core`
`2`	`2`
`3`	`3`	`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.`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# @web3-onboard/react`
	`1`	`+# React`
`2`	`2`
`3`	`3`	`A collection of React hooks for implementing web3-onboard in to a React project`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# @web3-onboard/vue`
	`1`	`+# Vue`
`2`	`2`
`3`	`3`	`A collection of composable functions for implementing web3-onboard in to a Vue project; compatible both with Vue 2 + composition-api and Vue 3`
`4`	`4`