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

Author: thevaizman

components/ChainSelector.tsx

@@ -1,6 +1,7 @@
 import { useContext, useEffect, useMemo, useState, useCallback } from 'react'
 
 import { useRegisterActions, Action } from 'kbar'
+import { useRouter } from 'next/router'
 import Select, { OnChangeValue, components } from 'react-select'
 
 import { EthereumContext } from 'context/ethereumContext'
@@ -29,6 +30,7 @@ const ChainSelector = () => {
 
   const [forkValue, setForkValue] = useState()
   const [actions, setActions] = useState<Action[]>([])
+  const router = useRouter()
 
   const forkOptions = useMemo(
     () => forks.map((fork) => ({ value: fork.name, label: fork.name })),
@@ -45,7 +47,11 @@ const ChainSelector = () => {
       setForkValue(option)
       onForkChange(option.value)
       setSetting(Setting.VmFork, option.value)
+
+      router.query.fork = option.value
+      router.push(router)
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [onForkChange, setSetting],
   )
 

components/Editor/index.tsx

@@ -81,6 +81,7 @@ const Editor = ({ readOnly = false }: Props) => {
     opcodes,
     instructions,
     resetExecution,
+    onForkChange,
   } = useContext(EthereumContext)
 
   const [code, setCode] = useState('')
@@ -226,6 +227,11 @@ const Editor = ({ readOnly = false }: Props) => {
       setCodeType(initialCodeType)
       setCode(examples[initialCodeType][0])
     }
+
+    if ('fork' in query) {
+      onForkChange(query.fork as string)
+      setSetting(Setting.VmFork, query.fork as string)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settingsLoaded && router.isReady])
 
@@ -382,7 +388,9 @@ const Editor = ({ readOnly = false }: Props) => {
   ])
 
   const handleCopyPermalink = useCallback(() => {
+    const fork = selectedFork?.name
     const params = {
+      fork,
       callValue,
       unit,
       callData,
@@ -391,8 +399,8 @@ const Editor = ({ readOnly = false }: Props) => {
     }
 
     copy(`${getAbsoluteURL('/playground')}?${objToQueryString(params)}`)
-    log('Link to current code, calldata and value copied to clipboard')
-  }, [callValue, unit, callData, codeType, code, log])
+    log('Link to current fork, code, calldata and value copied to clipboard')
+  }, [selectedFork, callValue, unit, callData, codeType, code, log])
 
   const isRunDisabled = useMemo(() => {
     return compiling || isEmpty(code)

components/Reference/index.tsx

@@ -16,6 +16,7 @@ import ReactTooltip from 'react-tooltip'
 import { IReferenceItem, IItemDocs, IGasDocs } from 'types'
 
 import { EthereumContext } from 'context/ethereumContext'
+import { SettingsContext, Setting } from 'context/settingsContext'
 
 import { findMatchingForkName } from 'util/gas'
 
@@ -42,7 +43,8 @@ const ReferenceTable = ({
   isPrecompiled?: boolean
 }) => {
   const router = useRouter()
-  const { forks, selectedFork } = useContext(EthereumContext)
+  const { forks, selectedFork, onForkChange } = useContext(EthereumContext)
+  const { setSetting } = useContext(SettingsContext)
   const data = useMemo(() => reference, [reference])
   const columns = useMemo(() => tableColumns(isPrecompiled), [isPrecompiled])
   const rowRefs = useRef<HTMLTableRowElement[]>([])
@@ -92,6 +94,17 @@ const ReferenceTable = ({
     }
   }, [reference, router.asPath])
 
+  // Change selectedFork according to query param
+  useEffect(() => {
+    const query = router.query
+
+    if ('fork' in query) {
+      onForkChange(query.fork as string)
+      setSetting(Setting.VmFork, query.fork as string)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady])
+
   const renderExpandButton = () => {
     return (
       <div className="hidden md:block">
@@ -220,8 +233,8 @@ const ReferenceTable = ({
                           <Link
                             href={
                               isPrecompiled
-                                ? `/precompiled#${opcodeOrAddress}`
-                                : `/#${opcodeOrAddress}`
+                                ? `/precompiled#${opcodeOrAddress}?fork=${selectedFork?.name}`
+                                : `/#${opcodeOrAddress}?fork=${selectedFork?.name}`
                             }
                             passHref
                           >

pages/precompiled.tsx

@@ -1,16 +1,18 @@
 import fs from 'fs'
 import path from 'path'
 
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 
 import matter from 'gray-matter'
 import type { NextPage } from 'next'
 import { serialize } from 'next-mdx-remote/serialize'
 import getConfig from 'next/config'
 import Head from 'next/head'
+import { useRouter } from 'next/router'
 import { IItemDocs, IGasDocs, IDocMeta } from 'types'
 
 import { EthereumContext } from 'context/ethereumContext'
+import { SettingsContext, Setting } from 'context/settingsContext'
 
 import ContributeBox from 'components/ContributeBox'
 import HomeLayout from 'components/layouts/Home'
@@ -27,7 +29,21 @@ const PrecompiledPage = ({
   precompiledDocs: IItemDocs
   gasDocs: IGasDocs
 }) => {
-  const { precompiled } = useContext(EthereumContext)
+  const { precompiled, onForkChange } = useContext(EthereumContext)
+  const { setSetting } = useContext(SettingsContext)
+
+  // Change selectedFork according to query param
+  const router = useRouter()
+
+  useEffect(() => {
+    const query = router.query
+
+    if ('fork' in query) {
+      onForkChange(query.fork as string)
+      setSetting(Setting.VmFork, query.fork as string)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady])
 
   return (
     <>