Skip to content

Commit a628679

Browse files
gesquincalaurencedelisleAdamj1232mhchaudhry3
authored
Docs release (#1350)
* Update [...2]onboard.js-migration-guide.md updated links, punctuation and grammar. * addressed comments from PR and updated links * Create [...2]onboard.js-migration-guide.md * Remove duplicate cmigration guide * Add changes that were part of duplicate mig guide * Revert relative path for external * Update link from expired docs to examples folder * injected wallets doc fix * no version bump needed * Add Search to Docs (#1322) * Update layout * Update homepage * Add algolia packages * Update index name * Update search keys * yarn it * Remove algolia from layout-homepage * Update docs/src/routes/__layout-homepage.svelte * Update docs/src/routes/__layout-homepage.svelte * Update index name * Docs gas example (#1333) * site seo content edits Co-authored-by: laurencedelisle <[email protected]> Co-authored-by: Adam Carpenter <[email protected]> Co-authored-by: mhchaudhry3 <[email protected]>
1 parent c28256d commit a628679

File tree

19 files changed

+821
-20
lines changed

19 files changed

+821
-20
lines changed

‎docs/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@
5454
"type": "module",
5555
"dependencies": {
5656
"@web3-onboard/core": "^2.8.4",
57-
"@web3-onboard/injected-wallets": "^2.2.3"
57+
"@web3-onboard/gas": "^2.1.4",
58+
"@web3-onboard/injected-wallets": "^2.2.3",
59+
"animejs": "^3.2.1",
60+
"ethers": "^5.7.0",
61+
"rollup-plugin-polyfill-node": "^0.10.2"
5862
}
5963
}

‎docs/src/lib/components/FeaturesSection.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
/>
5858
<FeatureCard
5959
title={'Multiple Chain Support'}
60-
text={'Allow users to switch between chains/networks with ease.'}
60+
text={'The best connect wallet button for allowing users to switch between chains/networks with ease.'}
6161
/>
6262
</div>
6363
</Container>

‎docs/src/lib/components/HeroSection.svelte‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,9 @@
99

1010
<section style="background-image: url({heroBg});">
1111
<div class="textblock">
12-
<div class="title">Web3-Onboard</div>
12+
<div class="title">{"Web3-Onboard"}</div>
1313
<div class="text">
14-
Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your
15-
users transact with ease by enabling wallet connection, real-time transaction states, and
16-
more.
14+
{"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."}
1715
</div>
1816
<div>
1917
<CodeBlock>

‎docs/src/lib/components/ThemeCustomizer.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
55
import { share } from 'rxjs/operators'
66
import { onMount } from 'svelte'
7-
import { object_without_properties } from 'svelte/internal';
87
98
const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
109
const injected = injectedModule()

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script lang="ts">
2+
import anime from 'animejs'
3+
import GasCard from './GasCard.svelte'
4+
import gasModule from '@web3-onboard/gas'
5+
import { onMount } from 'svelte'
6+
import { ethers } from 'ethers'
7+
import type { GasPrice, RPCGasPrice, GasData } from './types'
8+
9+
let cardBg: any
10+
let animation: any
11+
$: if (cardBg) {
12+
animation = anime({
13+
targets: '.Gas--card-bg',
14+
scaleY: [0, 1],
15+
duration: 5000,
16+
loop: false,
17+
easing: 'linear',
18+
autoplay: false
19+
})
20+
}
21+
let ethMainnetGasBlockPrices
22+
let rpcGasData: RPCGasPrice
23+
onMount(() => {
24+
ethMainnetGasBlockPrices = gasModule.stream({
25+
chains: ['0x1'],
26+
apiKey: '7eeb406c-82cb-4348-8ab5-b8cd3b684fff',
27+
endpoint: 'blockPrices'
28+
})
29+
ethMainnetGasBlockPrices.subscribe(() => {
30+
async function getEtherGasFromRPC() {
31+
const INFURA_ID = '03af2f609bfd4782900a84da1ac65000'
32+
const infuraRPC = `https://mainnet.infura.io/v3/${INFURA_ID}`
33+
const customHttpProvider = new ethers.providers.JsonRpcProvider(infuraRPC)
34+
const fee = await customHttpProvider.getFeeData()
35+
if (fee.gasPrice && fee.maxFeePerGas && fee.maxPriorityFeePerGas) {
36+
rpcGasData = {
37+
price: ethers.utils.formatUnits(fee.gasPrice, 'gwei'),
38+
maxPriorityFeePerGas: ethers.utils.formatUnits(fee.maxPriorityFeePerGas, 'gwei'),
39+
maxFeePerGas: ethers.utils.formatUnits(fee.maxFeePerGas, 'gwei')
40+
}
41+
}
42+
}
43+
getEtherGasFromRPC()
44+
animation?.restart()
45+
})
46+
})
47+
48+
const CONF_PERCENTAGES: number[] = [99, 95, 90, 80, 70]
49+
50+
const gasPricesDefaults: GasPrice[] = CONF_PERCENTAGES.map((confidence) => ({
51+
confidence,
52+
price: null,
53+
maxFeePerGas: null,
54+
maxPriorityFeePerGas: null
55+
}))
56+
57+
const GAS_DATA_DEFAULT: GasData = {
58+
estimatedPrices: gasPricesDefaults,
59+
baseFeePerGas: null,
60+
blockNumber: null,
61+
maxPrice: null,
62+
estimatedTransactionCount: null,
63+
seconds: null
64+
}
65+
</script>
66+
67+
<div class="Gas px-6 p-4">
68+
<div class="flex whitespace-nowrap mb-3 text-sm select-none">
69+
<span class="flex items-center">MORE LIKELY</span>
70+
<span
71+
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"
72+
/>
73+
<span class="flex items-center">LESS LIKELY</span>
74+
</div>
75+
<div class="w-0 h-0 text-transparent selection:bg-none">.</div>
76+
<div class="flex flex-nowrap justify-evenly ">
77+
{#each ($ethMainnetGasBlockPrices && $ethMainnetGasBlockPrices[0]?.blockPrices[0]?.estimatedPrices) || GAS_DATA_DEFAULT.estimatedPrices as gasData}
78+
<GasCard bind:cardBg {gasData} rpcGasForDiff={rpcGasData} gasPriceFrom={'bn'} />
79+
{/each}
80+
</div>
81+
<div class="flex mt-4">
82+
<GasCard bind:cardBg gasData={rpcGasData} rpcGasForDiff={undefined} gasPriceFrom={'rpc'} />
83+
</div>
84+
</div>

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script lang="ts">
2+
import { blur } from 'svelte/transition'
3+
import type { GasPrice, RPCGasPrice } from './types'
4+
5+
export let gasData: GasPrice | RPCGasPrice | undefined
6+
export let rpcGasForDiff: RPCGasPrice | undefined
7+
export let gasPriceFrom: string
8+
let className = ''
9+
export { className as class }
10+
export let backgroundStyle = ''
11+
12+
// Holds refference to the background element node for animation
13+
export let cardBg = null
14+
15+
const cardColors: Record<number, string> = {
16+
99: '#5aea98',
17+
95: '#5dea5a',
18+
90: '#bcea5a',
19+
80: '#ffe600',
20+
70: '#eab05a'
21+
}
22+
23+
const gasDiff = (bnGas: GasPrice) => {
24+
if (!rpcGasForDiff || !bnGas || !bnGas.maxPriorityFeePerGas || !bnGas.maxFeePerGas) return
25+
const priFeeDiff = Number.parseInt(rpcGasForDiff.maxPriorityFeePerGas) - bnGas.maxPriorityFeePerGas
26+
const maxFeeDiff = Number.parseInt(rpcGasForDiff.maxFeePerGas) - bnGas.maxFeePerGas
27+
return priFeeDiff + maxFeeDiff
28+
}
29+
30+
let cardColor: string | undefined = cardColors[gasData?.confidence]
31+
</script>
32+
33+
<div
34+
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`}
35+
style={`border-color: ${cardColor}; `}
36+
>
37+
{#if gasPriceFrom === 'bn'}
38+
<div>BN Gas</div>
39+
{:else}
40+
<div>Ethers.js Gas</div>
41+
{/if}
42+
<div class="text-base">priority fee</div>
43+
44+
{#key gasData}
45+
<div in:blur={{ duration: 350, amount: 12 }} class="font-extrabold text-base">
46+
{gasData?.maxPriorityFeePerGas || '...'}
47+
</div>
48+
{/key}
49+
50+
<div class="text-xs">max fee</div>
51+
{#key gasData}
52+
<div in:blur={{ duration: 350, amount: 12 }} class="font-extrabold text-base">
53+
{gasData?.maxFeePerGas ? Math.round(Number(gasData.maxFeePerGas)) : '...'}
54+
</div>
55+
{/key}
56+
57+
{#if gasPriceFrom === 'bn'}
58+
<div class="text-sm m-1 whitespace-nowrap" style={`color: ${cardColor}`}>
59+
{(gasData && gasData?.confidence) ? `${gasData.confidence}% probability` : '...'}
60+
</div>
61+
<div class="text-sm m-1 whitespace-nowrap" style={`color: ${cardColor}`}>
62+
{rpcGasForDiff ? `${gasDiff(gasData)?.toFixed(2)} gwei saved` : '...'}
63+
</div>
64+
{/if}
65+
<div
66+
bind:this={cardBg}
67+
class="Gas--card-bg origin-bottom absolute w-full h-full left-0 opacity-10"
68+
style={`background-color: ${cardColor}; ${backgroundStyle}`}
69+
/>
70+
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Gas } from './Gas.svelte'

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export type GasPrice = {
2+
confidence: number
3+
price: number | null
4+
maxFeePerGas: number | null
5+
maxPriorityFeePerGas: number | null
6+
}
7+
8+
export type RPCGasPrice = {
9+
price: string
10+
maxFeePerGas: string
11+
maxPriorityFeePerGas: string
12+
}
13+
14+
export interface GasData {
15+
estimatedPrices: GasPrice[]
16+
baseFeePerGas: number| null
17+
blockNumber: number | null
18+
maxPrice: number | null
19+
estimatedTransactionCount: number | null
20+
seconds: number | null
21+
estimatedBaseFees?: [EstimatedBaseFees]
22+
isTrendingUp?: boolean
23+
}
24+
25+
export interface EstimatedBaseFee {
26+
confidence: number
27+
baseFee: number
28+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './examples'
2+
export * from './gas'
23
export { default as ThemeCustomizer } from './ThemeCustomizer.svelte'

‎docs/src/routes/__layout-homepage.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
]
2525
}
2626
27-
const title = 'Web3-Onboard | The easy way to connect web3 users to dapps'
27+
const title = 'Web3-Onboard | Framework-agnostic Web3 Connect Wallet Button'
2828
const metadescription =
2929
'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.'
3030
const url = 'https://onboard.blocknative.com/'

0 commit comments

Comments
 (0)