Docs release

docs/package.json

@@ -54,6 +54,10 @@
   "type": "module",
   "dependencies": {
     "@web3-onboard/core": "^2.8.4",
-    "@web3-onboard/injected-wallets": "^2.2.3"
+    "@web3-onboard/gas": "^2.1.4",
+    "@web3-onboard/injected-wallets": "^2.2.3",
+    "animejs": "^3.2.1",
+    "ethers": "^5.7.0",
+    "rollup-plugin-polyfill-node": "^0.10.2"
   }
 }

docs/src/lib/components/FeaturesSection.svelte

@@ -57,7 +57,7 @@
       />
       <FeatureCard
         title={'Multiple Chain Support'}
-        text={'Allow users to switch between chains/networks with ease.'}
+        text={'The best connect wallet button for allowing users to switch between chains/networks with ease.'}
       />
     </div>
   </Container>

docs/src/lib/components/HeroSection.svelte

@@ -9,11 +9,9 @@
 
 <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>

docs/src/lib/components/ThemeCustomizer.svelte

@@ -4,7 +4,6 @@
 
   import { share } from 'rxjs/operators'
   import { onMount } from 'svelte'
-import { object_without_properties } from 'svelte/internal';
 
   const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
   const injected = injectedModule()

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import anime from 'animejs'
+  import GasCard from './GasCard.svelte'
+  import gasModule from '@web3-onboard/gas'
+  import { onMount } from 'svelte'
+  import { ethers } from 'ethers'
+  import type { GasPrice, RPCGasPrice, GasData } from './types'
+
+  let cardBg: any
+  let animation: any
+  $: if (cardBg) {
+    animation = anime({
+      targets: '.Gas--card-bg',
+      scaleY: [0, 1],
+      duration: 5000,
+      loop: false,
+      easing: 'linear',
+      autoplay: false
+    })
+  }
+  let ethMainnetGasBlockPrices
+  let rpcGasData: RPCGasPrice
+  onMount(() => {
+    ethMainnetGasBlockPrices = gasModule.stream({
+      chains: ['0x1'],
+      apiKey: '7eeb406c-82cb-4348-8ab5-b8cd3b684fff',
+      endpoint: 'blockPrices'
+    })
+    ethMainnetGasBlockPrices.subscribe(() => {
+      async function getEtherGasFromRPC() {
+        const INFURA_ID = '03af2f609bfd4782900a84da1ac65000'
+        const infuraRPC = `https://mainnet.infura.io/v3/${INFURA_ID}`
+        const customHttpProvider = new ethers.providers.JsonRpcProvider(infuraRPC)
+        const fee = await customHttpProvider.getFeeData()
+        if (fee.gasPrice && fee.maxFeePerGas && fee.maxPriorityFeePerGas) {
+          rpcGasData = {
+            price: ethers.utils.formatUnits(fee.gasPrice, 'gwei'),
+            maxPriorityFeePerGas: ethers.utils.formatUnits(fee.maxPriorityFeePerGas, 'gwei'),
+            maxFeePerGas: ethers.utils.formatUnits(fee.maxFeePerGas, 'gwei')
+          }
+        }
+      }
+      getEtherGasFromRPC()
+      animation?.restart()
+    })
+  })
+
+  const CONF_PERCENTAGES: number[] = [99, 95, 90, 80, 70]
+
+  const gasPricesDefaults: GasPrice[] = CONF_PERCENTAGES.map((confidence) => ({
+    confidence,
+    price: null,
+    maxFeePerGas: null,
+    maxPriorityFeePerGas: null
+  }))
+
+  const GAS_DATA_DEFAULT: GasData = {
+    estimatedPrices: gasPricesDefaults,
+    baseFeePerGas: null,
+    blockNumber: null,
+    maxPrice: null,
+    estimatedTransactionCount: null,
+    seconds: null
+  }
+</script>
+
+<div class="Gas px-6  p-4">
+  <div class="flex whitespace-nowrap mb-3 text-sm select-none">
+    <span class="flex items-center">MORE LIKELY</span>
+    <span
+      class="bg-gradient-to-r from-[#5aea98] via-[#5dea5a] via-[#bcea5a] via-[#ffe600] to-[#eab05a] h-[1px] mx-2 my-3 w-full rounded-full"
+    />
+    <span class="flex items-center">LESS LIKELY</span>
+  </div>
+  <div class="w-0 h-0 text-transparent selection:bg-none">.</div>
+  <div class="flex flex-nowrap justify-evenly ">
+    {#each ($ethMainnetGasBlockPrices && $ethMainnetGasBlockPrices[0]?.blockPrices[0]?.estimatedPrices) || GAS_DATA_DEFAULT.estimatedPrices as gasData}
+      <GasCard bind:cardBg {gasData} rpcGasForDiff={rpcGasData} gasPriceFrom={'bn'} />
+    {/each}
+  </div>
+  <div class="flex mt-4">
+    <GasCard bind:cardBg gasData={rpcGasData} rpcGasForDiff={undefined} gasPriceFrom={'rpc'} />
+  </div>
+</div>

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { blur } from 'svelte/transition'
+  import type { GasPrice, RPCGasPrice } from './types'
+
+  export let gasData: GasPrice | RPCGasPrice | undefined
+  export let rpcGasForDiff: RPCGasPrice | undefined
+  export let gasPriceFrom: string
+  let className = ''
+  export { className as class }
+  export let backgroundStyle = ''
+
+  // Holds refference to the background element node for animation
+  export let cardBg = null
+
+  const cardColors: Record<number, string> = {
+    99: '#5aea98',
+    95: '#5dea5a',
+    90: '#bcea5a',
+    80: '#ffe600',
+    70: '#eab05a'
+  }
+
+  const gasDiff = (bnGas: GasPrice) => {
+    if (!rpcGasForDiff || !bnGas || !bnGas.maxPriorityFeePerGas || !bnGas.maxFeePerGas) return
+    const priFeeDiff = Number.parseInt(rpcGasForDiff.maxPriorityFeePerGas) - bnGas.maxPriorityFeePerGas
+    const maxFeeDiff = Number.parseInt(rpcGasForDiff.maxFeePerGas) - bnGas.maxFeePerGas
+    return priFeeDiff + maxFeeDiff
+  }
+
+  let cardColor: string | undefined = cardColors[gasData?.confidence]
+</script>
+
+<div
+  class={`${className} p-1 mr-2 last:mr-0 flex flex-col border rounded-2xl justify-evenly text-center overflow-hidden w-full relative cursor-pointer before:absolute before:scale-0 before:transition-transform before:h-3 before:w-3 before:rounded-full before:top-2 before:left-2 before:bg-blue-500`}
+  style={`border-color: ${cardColor}; `}
+>
+  {#if gasPriceFrom === 'bn'}
+    <div>BN Gas</div>
+  {:else}
+    <div>Ethers.js Gas</div>
+  {/if}
+  <div class="text-base">priority fee</div>
+
+  {#key gasData}
+    <div in:blur={{ duration: 350, amount: 12 }} class="font-extrabold text-base">
+      {gasData?.maxPriorityFeePerGas || '...'}
+    </div>
+  {/key}
+
+  <div class="text-xs">max fee</div>
+  {#key gasData}
+    <div in:blur={{ duration: 350, amount: 12 }} class="font-extrabold text-base">
+      {gasData?.maxFeePerGas ? Math.round(Number(gasData.maxFeePerGas)) : '...'}
+    </div>
+  {/key}
+
+  {#if gasPriceFrom === 'bn'}
+    <div class="text-sm m-1 whitespace-nowrap" style={`color: ${cardColor}`}>
+      {(gasData && gasData?.confidence) ? `${gasData.confidence}% probability` : '...'}
+    </div>
+    <div class="text-sm m-1 whitespace-nowrap" style={`color: ${cardColor}`}>
+      {rpcGasForDiff ? `${gasDiff(gasData)?.toFixed(2)} gwei saved` : '...'}
+    </div>
+  {/if}
+  <div
+    bind:this={cardBg}
+    class="Gas--card-bg origin-bottom absolute w-full h-full left-0 opacity-10"
+    style={`background-color: ${cardColor}; ${backgroundStyle}`}
+  />
+</div>

docs/src/lib/components/gas/index.ts

@@ -0,0 +1 @@
+export { default as Gas } from './Gas.svelte'

docs/src/lib/components/gas/types.ts

@@ -0,0 +1,28 @@
+export type GasPrice = {
+  confidence: number
+  price: number | null
+  maxFeePerGas: number | null
+  maxPriorityFeePerGas: number | null
+}
+
+export type RPCGasPrice = {
+  price: string
+  maxFeePerGas: string
+  maxPriorityFeePerGas: string
+}
+
+export interface GasData {
+  estimatedPrices: GasPrice[]
+  baseFeePerGas: number| null
+  blockNumber: number | null
+  maxPrice: number | null
+  estimatedTransactionCount: number | null
+  seconds: number | null
+  estimatedBaseFees?: [EstimatedBaseFees]
+  isTrendingUp?: boolean
+}
+
+export interface EstimatedBaseFee {
+  confidence: number
+  baseFee: number
+}

docs/src/lib/components/index.ts

@@ -1,2 +1,3 @@
 export * from './examples'
+export * from './gas'
 export { default as ThemeCustomizer } from './ThemeCustomizer.svelte'

docs/src/routes/__layout-homepage.svelte

@@ -24,7 +24,7 @@
     ]
   }
 
-  const title = 'Web3-Onboard | The easy way to connect web3 users to dapps'
+  const title = 'Web3-Onboard | Framework-agnostic Web3 Connect Wallet Button'
   const metadescription =
     '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.'
   const url = 'https://onboard.blocknative.com/'

docs/src/routes/__layout-kit-docs.svelte

@@ -80,7 +80,7 @@
     <Algolia
       apiKey="1bce9c4755cea3698e16830544503ee2"
       appId="02BH13PRRI"
-      indexName="docsearch"
+      indexName="blocknative"
       placeholder="Search documentation"
       slot="search"
     />

docs/src/routes/docs/[...1]overview/[...2]contribution-guide.md

@@ -18,6 +18,20 @@ If there is a feature or change that you would like to see in Web3 Onboard, you
 
 Once a PR is created, one of the Web3 Onboard maintainers will acknowledge the PR and add it to our sprint planning to be reviewed as soon as possible.
 
+
+### Package Versioning
+
+After making changes within a web3-onboard package you will want to bump the version of the specific package. For example if you were to add a new injected wallet to the injected package you will need to bump the version of the injected package within that module's [package.json](https://github.com/blocknative/web3-onboard/blob/8531a73d69365f7d584320f1c4b97a5d90f1c34e/packages/injected/package.json#L3). 
+
+We use both semantic and `alpha` versioning for publishing and testing packages prior to official release.  This means if you do not see an `-alpha.x` tag on the version of the package you made changes in you will need to not only bump the version but also add an alpha flag followed by an alpha version number starting at 1 (ex. `-alpha.1`).
+
+Example : Adding a new injected wallet to the `injected` package -
+[Injected Package.json](https://github.com/blocknative/web3-onboard/blob/v2-web3-onboard-develop/packages/injected/package.json#L3) changes : `"version": "2.2.4",` --> `"version": "2.3.0-alpha.1",`
+
+Example 2 : Bug fix within the `core` package -
+[Core package.json](https://github.com/blocknative/web3-onboard/blob/8531a73d69365f7d584320f1c4b97a5d90f1c34e/packages/core/package.json#L3) changes: `"version": "2.9.1-alpha.1",` --> `"version": "2.9.1-alpha.2",`
+
+
 ### How can I get a new wallet added?
 
 Web3 Onboard does not require a wallet to be a part of the main codebase to work, so a wallet module can be created and used for your project without needing anything to happen within the Web3Onboard codebase. If you would like the wallet to be part of the official Web3 Onboard packages and repo, then create a pull request, and make sure to add any documentation updates by creating a docs pull request.

docs/src/routes/docs/[...4]packages/coinbase.md

@@ -1,7 +1,6 @@
 # @web3-onboard/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
 
 <Tabs values={['yarn', 'npm']}>

docs/src/routes/docs/[...4]packages/gas.md

@@ -1,7 +1,14 @@
+<script>
+    import {Gas} from '$lib/components'
+</script>
 # @web3-onboard/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).
 
+Supports both Eth Mainnet and Polygon gas pricing.
+
+<Gas />
+
 ### Install
 
 <Tabs values={['yarn', 'npm']}>
@@ -21,9 +28,9 @@ npm install @web3-onboard/gas
   </TabPanel>
 </Tabs>
 
-### Standalone Usage
+### Standalone Setup
 
-```ts
+```typescript
 import gas from '@web3-onboard/gas'
 
 // subscribe to a single chain for estimates using the default poll rate of 5 secs
@@ -34,8 +41,8 @@ const ethMainnetGasBlockPrices = gas.stream({
   endpoint: 'blockPrices'
 })
 
-const { unsubscribe: ethGasUnsub } = ethMainnetGasBlockPrices.subscribe((estimates) =>
-  console.log(estimates)
+const { unsubscribe: ethGasUnsub } = ethMainnetGasBlockPrices.subscribe(
+  estimates => console.log(estimates)
 )
 
 // .... sometime later, unsubscribe to stop polling
@@ -50,7 +57,12 @@ const gasBlockPrices = gas.stream({
   poll: 1000
 })
 
-const { unsubscribe } = gasBlockPrices.subscribe((estimates) => console.log(estimates))
+const { unsubscribe } = gasBlockPrices.subscribe(estimates =>
+  console.log(estimates)
+  console.log(estimates[0].blockPrices[0].estimatedPrice)
+  // block inclusion confidence options: 70, 80, 90, 95, 99
+  console.log(bnGasPrices.find(gas => gas.confidence === 90))
+)
 
 // .... sometime later, unsubscribe to stop polling
 setTimeout(unsubscribe, 10000)
@@ -62,3 +74,58 @@ const gasBlockPrices = await gas.get({
   endpoint: 'blockPrices'
 })
 ```
+
+
+## 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).
+```ts
+import gas from '@web3-onboard/gas'
+import { ethers } from 'ethers'
+
+// Set provider using the Web3-Onboard wallet.provider instance from the connected wallet
+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 
+  apiKey: '<OPTIONAL_API_KEY>', // for faster refresh rates
+  endpoint: 'blockPrices'
+})
+
+ethMainnetGasBlockPrices.subscribe(estimates => {
+  console.log(estimates)
+  bnGasPrices = estimates[0].blockPrices[0].estimatedPrices
+})
+
+
+const gweiToWeiHex = gwei => {
+  return `0x${(gwei * 1e9).toString(16)}`
+}
+
+const sendTransaction = async () => {
+  if (!toAddress) {
+    alert('An Ethereum address to send Eth to is required.')
+    return
+  }
+
+  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)
+
+  const rc = await signer.sendTransaction({
+    to: toAddress,
+    value: 1000000000000000
+
+    // This will set the transaction gas based on desired confidence
+    maxPriorityFeePerGas: gweiToWeiHex(
+      bnGasForTransaction.maxPriorityFeePerGas
+    ),
+    maxFeePerGas: gweiToWeiHex(bnGasForTransaction.maxFeePerGas)
+  })
+  console.log(rc)
+}
+```