Skip to content

Commit ac9e797

Browse files
authored
Add fork to query params (#173)
* Support for fork name in the URL add query params handlers to reference table, precompiled and editor in order to support having fork name in the URL. * add fork to the permalink copy function in playground * changed log message in the console when copying permalink on playground * lint fixes * Add "push"-ing of selected fork to query parameters Added code that pushes selected fork to the URL query parameters in ChainSelector.tsx Added fork query parameters to anchor links in the precompiled and reference pages * fix lint errors
1 parent ac8bd4b commit ac9e797

File tree

4 files changed

+50
-7
lines changed

4 files changed

+50
-7
lines changed

components/ChainSelector.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useContext, useEffect, useMemo, useState, useCallback } from 'react'
22

33
import { useRegisterActions, Action } from 'kbar'
4+
import { useRouter } from 'next/router'
45
import Select, { OnChangeValue, components } from 'react-select'
56

67
import { EthereumContext } from 'context/ethereumContext'
@@ -29,6 +30,7 @@ const ChainSelector = () => {
2930

3031
const [forkValue, setForkValue] = useState()
3132
const [actions, setActions] = useState<Action[]>([])
33+
const router = useRouter()
3234

3335
const forkOptions = useMemo(
3436
() => forks.map((fork) => ({ value: fork.name, label: fork.name })),
@@ -45,7 +47,11 @@ const ChainSelector = () => {
4547
setForkValue(option)
4648
onForkChange(option.value)
4749
setSetting(Setting.VmFork, option.value)
50+
51+
router.query.fork = option.value
52+
router.push(router)
4853
},
54+
// eslint-disable-next-line react-hooks/exhaustive-deps
4955
[onForkChange, setSetting],
5056
)
5157

components/Editor/index.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ const Editor = ({ readOnly = false }: Props) => {
8181
opcodes,
8282
instructions,
8383
resetExecution,
84+
onForkChange,
8485
} = useContext(EthereumContext)
8586

8687
const [code, setCode] = useState('')
@@ -226,6 +227,11 @@ const Editor = ({ readOnly = false }: Props) => {
226227
setCodeType(initialCodeType)
227228
setCode(examples[initialCodeType][0])
228229
}
230+
231+
if ('fork' in query) {
232+
onForkChange(query.fork as string)
233+
setSetting(Setting.VmFork, query.fork as string)
234+
}
229235
// eslint-disable-next-line react-hooks/exhaustive-deps
230236
}, [settingsLoaded && router.isReady])
231237

@@ -382,7 +388,9 @@ const Editor = ({ readOnly = false }: Props) => {
382388
])
383389

384390
const handleCopyPermalink = useCallback(() => {
391+
const fork = selectedFork?.name
385392
const params = {
393+
fork,
386394
callValue,
387395
unit,
388396
callData,
@@ -391,8 +399,8 @@ const Editor = ({ readOnly = false }: Props) => {
391399
}
392400

393401
copy(`${getAbsoluteURL('/playground')}?${objToQueryString(params)}`)
394-
log('Link to current code, calldata and value copied to clipboard')
395-
}, [callValue, unit, callData, codeType, code, log])
402+
log('Link to current fork, code, calldata and value copied to clipboard')
403+
}, [selectedFork, callValue, unit, callData, codeType, code, log])
396404

397405
const isRunDisabled = useMemo(() => {
398406
return compiling || isEmpty(code)

components/Reference/index.tsx

+16-3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import ReactTooltip from 'react-tooltip'
1616
import { IReferenceItem, IItemDocs, IGasDocs } from 'types'
1717

1818
import { EthereumContext } from 'context/ethereumContext'
19+
import { SettingsContext, Setting } from 'context/settingsContext'
1920

2021
import { findMatchingForkName } from 'util/gas'
2122

@@ -42,7 +43,8 @@ const ReferenceTable = ({
4243
isPrecompiled?: boolean
4344
}) => {
4445
const router = useRouter()
45-
const { forks, selectedFork } = useContext(EthereumContext)
46+
const { forks, selectedFork, onForkChange } = useContext(EthereumContext)
47+
const { setSetting } = useContext(SettingsContext)
4648
const data = useMemo(() => reference, [reference])
4749
const columns = useMemo(() => tableColumns(isPrecompiled), [isPrecompiled])
4850
const rowRefs = useRef<HTMLTableRowElement[]>([])
@@ -92,6 +94,17 @@ const ReferenceTable = ({
9294
}
9395
}, [reference, router.asPath])
9496

97+
// Change selectedFork according to query param
98+
useEffect(() => {
99+
const query = router.query
100+
101+
if ('fork' in query) {
102+
onForkChange(query.fork as string)
103+
setSetting(Setting.VmFork, query.fork as string)
104+
}
105+
// eslint-disable-next-line react-hooks/exhaustive-deps
106+
}, [router.isReady])
107+
95108
const renderExpandButton = () => {
96109
return (
97110
<div className="hidden md:block">
@@ -220,8 +233,8 @@ const ReferenceTable = ({
220233
<Link
221234
href={
222235
isPrecompiled
223-
? `/precompiled#${opcodeOrAddress}`
224-
: `/#${opcodeOrAddress}`
236+
? `/precompiled#${opcodeOrAddress}?fork=${selectedFork?.name}`
237+
: `/#${opcodeOrAddress}?fork=${selectedFork?.name}`
225238
}
226239
passHref
227240
>

pages/precompiled.tsx

+18-2
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import fs from 'fs'
22
import path from 'path'
33

4-
import React, { useContext } from 'react'
4+
import React, { useContext, useEffect } from 'react'
55

66
import matter from 'gray-matter'
77
import type { NextPage } from 'next'
88
import { serialize } from 'next-mdx-remote/serialize'
99
import getConfig from 'next/config'
1010
import Head from 'next/head'
11+
import { useRouter } from 'next/router'
1112
import { IItemDocs, IGasDocs, IDocMeta } from 'types'
1213

1314
import { EthereumContext } from 'context/ethereumContext'
15+
import { SettingsContext, Setting } from 'context/settingsContext'
1416

1517
import ContributeBox from 'components/ContributeBox'
1618
import HomeLayout from 'components/layouts/Home'
@@ -27,7 +29,21 @@ const PrecompiledPage = ({
2729
precompiledDocs: IItemDocs
2830
gasDocs: IGasDocs
2931
}) => {
30-
const { precompiled } = useContext(EthereumContext)
32+
const { precompiled, onForkChange } = useContext(EthereumContext)
33+
const { setSetting } = useContext(SettingsContext)
34+
35+
// Change selectedFork according to query param
36+
const router = useRouter()
37+
38+
useEffect(() => {
39+
const query = router.query
40+
41+
if ('fork' in query) {
42+
onForkChange(query.fork as string)
43+
setSetting(Setting.VmFork, query.fork as string)
44+
}
45+
// eslint-disable-next-line react-hooks/exhaustive-deps
46+
}, [router.isReady])
3147

3248
return (
3349
<>

0 commit comments

Comments
 (0)