feat: reflect code, callvalue and calldata in url to be able to share… (#96)

Reflect code, callvalue and calldata in sharable permalinks
Fix the incorrect value for Yul/Solidity (unit was ignored)
Fix logging with hopefully the proper way now

Co-authored-by: Tair Asim <[email protected]>

Author: Adrien Hamelin

components/Editor/index.tsx

@@ -9,24 +9,34 @@ import React, {
   RefObject,
 } from 'react'
 
+import { encode, decode } from '@kunigi/string-compression'
 import cn from 'classnames'
+import copy from 'copy-to-clipboard'
 import { BN } from 'ethereumjs-util'
+import { useRouter } from 'next/router'
 import Select, { OnChangeValue } from 'react-select'
 import SCEditor from 'react-simple-code-editor'
 
 import { EthereumContext } from 'context/ethereumContext'
 import { SettingsContext, Setting } from 'context/settingsContext'
 
+import { getAbsoluteURL } from 'util/browser'
 import {
   getTargetEvmVersion,
   compilerSemVer,
   getBytecodeFromMnemonic,
 } from 'util/compiler'
-import { codeHighlight, isEmpty, isFullHex, isHex } from 'util/string'
+import {
+  codeHighlight,
+  isEmpty,
+  isFullHex,
+  isHex,
+  objToQueryString,
+} from 'util/string'
 
 import examples from 'components/Editor/examples'
 import InstructionList from 'components/Editor/Instructions'
-import { Button, Input } from 'components/ui'
+import { Button, Input, Icon } from 'components/ui'
 
 import Console from './Console'
 import ExecutionState from './ExecutionState'
@@ -53,6 +63,7 @@ const unitOptions = Object.keys(ValueUnit).map((value) => ({
 
 const Editor = ({ readOnly = false }: Props) => {
   const { settingsLoaded, getSetting, setSetting } = useContext(SettingsContext)
+  const router = useRouter()
 
   const {
     deployContract,
@@ -82,49 +93,94 @@ const Editor = ({ readOnly = false }: Props) => {
   const [callValue, setCallValue] = useState('')
   const [unit, setUnit] = useState(ValueUnit.Wei as string)
 
-  const handleWorkerMessage = (event: MessageEvent) => {
-    const { code: byteCode, warning, error } = event.data
+  const log = useCallback(
+    (line: string, type = 'info') => {
+      // See https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/
+      setOutput((previous) => {
+        const cloned = previous.map((x) => ({ ...x }))
+        cloned.push({ type, message: line })
+        return cloned
+      })
+    },
+    [setOutput],
+  )
 
-    if (error) {
-      log(error, 'error')
-      setIsCompiling(false)
-      return
-    }
+  const getCallValue = useCallback(() => {
+    const _callValue = new BN(callValue)
 
-    if (warning) {
-      log(warning, 'warn')
+    if (unit === ValueUnit.Gwei) {
+      _callValue.imul(new BN('1000000000'))
+    } else if (unit === ValueUnit.Finney) {
+      _callValue.imul(new BN('1000000000000000'))
+    } else if (unit === ValueUnit.Ether) {
+      _callValue.imul(new BN('1000000000000000000'))
     }
 
-    log('Compilation successful')
+    return _callValue
+  }, [callValue, unit])
 
-    try {
-      deployContract(byteCode, new BN(callValue)).then((tx) => {
-        loadInstructions(byteCode)
+  const handleWorkerMessage = useCallback(
+    (event: MessageEvent) => {
+      const { code: byteCode, warning, error } = event.data
+
+      if (error) {
+        log(error, 'error')
         setIsCompiling(false)
-        startTransaction(byteCode, tx)
-      })
-    } catch (error) {
-      log((error as Error).message, 'error')
-      setIsCompiling(false)
-    }
-  }
+        return
+      }
 
-  const log = useCallback(
-    (line: string, type = 'info') => {
-      output.push({ type, message: line })
-      setOutput(output)
+      if (warning) {
+        log(warning, 'warn')
+      }
+
+      log('Compilation successful')
+
+      try {
+        const _callValue = getCallValue()
+        deployContract(byteCode, _callValue).then((tx) => {
+          loadInstructions(byteCode)
+          setIsCompiling(false)
+          startTransaction(byteCode, tx)
+        })
+      } catch (error) {
+        log((error as Error).message, 'error')
+        setIsCompiling(false)
+      }
     },
-    [output, setOutput],
+    [
+      log,
+      setIsCompiling,
+      deployContract,
+      loadInstructions,
+      startTransaction,
+      getCallValue,
+    ],
   )
 
   useEffect(() => {
-    const initialCodeType: CodeType =
-      getSetting(Setting.EditorCodeType) || CodeType.Yul
+    const query = router.query
 
-    setCodeType(initialCodeType)
-    setCode(examples[initialCodeType][0])
+    if ('callValue' in query && 'unit' in query) {
+      setCallValue(query.callValue as string)
+      setUnit(query.unit as string)
+    }
+
+    if ('callData' in query) {
+      setCallData(query.callData as string)
+    }
+
+    if ('codeType' in query && 'code' in query) {
+      setCodeType(query.codeType as string)
+      setCode(JSON.parse('{"a":' + decode(query.code as string) + '}').a)
+    } else {
+      const initialCodeType: CodeType =
+        getSetting(Setting.EditorCodeType) || CodeType.Yul
+
+      setCodeType(initialCodeType)
+      setCode(examples[initialCodeType][0])
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [settingsLoaded])
+  }, [settingsLoaded && router.isReady])
 
   useEffect(() => {
     solcWorkerRef.current = new Worker(
@@ -218,18 +274,10 @@ const Editor = ({ readOnly = false }: Props) => {
       return
     }
 
-    const _callData = Buffer.from(callData.substr(2), 'hex')
-    const _callValue = new BN(callValue)
-
-    if (unit === ValueUnit.Gwei) {
-      _callValue.imul(new BN('1000000000'))
-    } else if (unit === ValueUnit.Finney) {
-      _callValue.imul(new BN('1000000000000000'))
-    } else if (unit === ValueUnit.Ether) {
-      _callValue.imul(new BN('1000000000000000000'))
-    }
-
     try {
+      const _callData = Buffer.from(callData.substr(2), 'hex')
+      const _callValue = getCallValue()
+
       if (codeType === CodeType.Mnemonic) {
         const bytecode = getBytecodeFromMnemonic(code, opcodes)
         loadInstructions(bytecode)
@@ -267,12 +315,25 @@ const Editor = ({ readOnly = false }: Props) => {
     selectedFork,
     callData,
     callValue,
-    unit,
     loadInstructions,
     log,
     startExecution,
+    getCallValue,
   ])
 
+  const handleCopyPermalink = useCallback(() => {
+    const params = {
+      callValue,
+      unit,
+      callData,
+      codeType,
+      code: encodeURIComponent(encode(JSON.stringify(code))),
+    }
+
+    copy(`${getAbsoluteURL('/playground?')}${objToQueryString(params)}`)
+    log('Link to current code, calldata and value copied to clipboard')
+  }, [callValue, unit, callData, codeType, code, log])
+
   const isRunDisabled = useMemo(() => {
     return compiling || isEmpty(code)
   }, [compiling, code])
@@ -328,8 +389,8 @@ const Editor = ({ readOnly = false }: Props) => {
               />
             </div>
 
-            <div className="flex items-center justify-between px-4 py-2 md:border-r border-gray-200 dark:border-black-500">
-              <div className="flex flex-row gap-x-4">
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between px-4 py-4 md:py-2 md:border-r border-gray-200 dark:border-black-500">
+              <div className="flex flex-col md:flex-row md:gap-x-4 gap-y-2 md:gap-y-0 mb-4 md:mb-0">
                 {isCallDataActive && (
                   <Input
                     placeholder="Calldata in HEX"
@@ -358,13 +419,26 @@ const Editor = ({ readOnly = false }: Props) => {
                   classNamePrefix="select"
                   menuPlacement="auto"
                 />
+
+                <Button
+                  onClick={handleCopyPermalink}
+                  transparent
+                  padded={false}
+                >
+                  <span
+                    className="inline-block mr-4 select-all"
+                    data-tip="Share permalink"
+                  >
+                    <Icon name="links-line" className="text-indigo-500 mr-2" />
+                  </span>
+                </Button>
               </div>
 
               <Button
                 onClick={handleRun}
                 disabled={isRunDisabled}
                 size="sm"
-                className="ml-3"
+                contentClassName="justify-center"
               >
                 Run
               </Button>

components/ui/Button.tsx

@@ -8,6 +8,7 @@ type Props = {
   href?: string
   external?: boolean
   className?: string
+  contentClassName?: string
   transparent?: boolean
   outline?: boolean
   padded?: boolean
@@ -19,6 +20,7 @@ type Props = {
 export const Button: React.FC<Props> = ({
   children,
   className,
+  contentClassName,
   href,
   external,
   disabled,
@@ -56,7 +58,9 @@ export const Button: React.FC<Props> = ({
       data-for={tooltipIdPrefixed}
       {...rest}
     >
-      <div className="flex items-center">{children}</div>
+      <div className={cn('flex items-center', contentClassName)}>
+        {children}
+      </div>
       {tooltip && tooltipId && (
         <ReactTooltip
           className="tooltip"

package.json

@@ -16,9 +16,11 @@
     "@ethereumjs/common": "^2.6.0",
     "@ethereumjs/tx": "^3.4.0",
     "@ethereumjs/vm": "^5.6.0",
+    "@kunigi/string-compression": "1.0.2",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.1",
     "ethereumjs-util": "^7.1.3",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.3.1",

util/string.ts

@@ -70,3 +70,13 @@ export const fromBuffer = (buf: Buffer) => {
 export const toKeyIndex = (prefix: string, index: number) => {
   return [prefix, index].join('-')
 }
+
+/**
+ * Creates a query string from an object.
+ */
+export const objToQueryString = (params: any) => {
+  return Object.keys(params)
+    .map((key) => (!isEmpty(params[key]) ? key + '=' + params[key] : null))
+    .filter((param) => param !== null)
+    .join('&')
+}

yarn.lock

@@ -517,6 +517,11 @@
   resolved "https://package-cluster.production.groovehq.com/@humanwhocodes%2fobject-schema/-/object-schema-1.2.0.tgz"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
+"@kunigi/[email protected]":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@kunigi/string-compression/-/string-compression-1.0.2.tgz#aed3d6d29ba170d51079562328ced905d6a7d6da"
+  integrity sha512-rB2OpMgWOe9J7KQhEmLFniA2lwJm9v3hoGSWuMihitKcoOiY/dLn5GoXOXbeQV+pui6IuVSuKoa8jbYoQhhewA==
+
 "@mdx-js/loader@^1.6.22":
   version "1.6.22"
   resolved "https://package-cluster.production.groovehq.com/@mdx-js%2floader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"
@@ -1776,6 +1781,13 @@ convert-source-map@~1.1.0:
   resolved "https://package-cluster.production.groovehq.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
   integrity sha1-SCnId+n+SbMWHzvzZziI4gRpmGA=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-pure@^3.0.1, core-js-pure@^3.16.0:
   version "3.18.3"
   resolved "https://package-cluster.production.groovehq.com/core-js-pure/-/core-js-pure-3.18.3.tgz"
@@ -5671,6 +5683,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 [email protected]:
   version "1.0.0"
   resolved "https://package-cluster.production.groovehq.com/toidentifier/-/toidentifier-1.0.0.tgz"