From 7d8100f7ef8a3f50730cccee21aeb4f16996754e Mon Sep 17 00:00:00 2001 From: Michydev Date: Tue, 18 Oct 2022 13:36:09 +0200 Subject: [PATCH 1/2] fix: :bug: resolve the error related to anchor key redirection on the page about --- pages/about.tsx | 90 +++++++++++++++++++++++++++---------------------- util/string.ts | 5 +++ 2 files changed, 54 insertions(+), 41 deletions(-) diff --git a/pages/about.tsx b/pages/about.tsx index e9212c85..8ffbfe5c 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useContext } from 'react' import type { NextPage } from 'next' import Head from 'next/head' @@ -8,6 +8,9 @@ import HomeLayout from 'components/layouts/Home' import { Container, H1, H2, H3, Icon, RelativeLink } from 'components/ui' import { Pre } from 'components/ui/Doc' +import { EthereumContext } from 'context/ethereumContext' +import { relativeLinkCreator } from 'util/string' + type SectionWrapperProps = { header: React.ReactNode anchorKey: string @@ -53,6 +56,11 @@ const SectionWrapper: React.FC = ({ // NOTE: It seems the memory expansion computation and constants did not change // since frontier, but we have to keep an eye on new fork to keep this up to date const AboutPage = () => { + const { selectedFork } = useContext(EthereumContext); + + const anchorCreator = (section: string) => { + return relativeLinkCreator(section, selectedFork); + } return (

About the EVM

@@ -106,10 +114,10 @@ const AboutPage = () => { persistent and part of an account properties. During smart contract execution, these are the bytes that the EVM will read, interpret and execute. This is a region that cannot be modified, but can be read - with the instructions and{' '} - . Other contracts code can - also be read with and{' '} - . The program counter + with the instructions and{' '} + . Other contracts code can + also be read with and{' '} + . The program counter (PC) encodes which instruction should be read next by the EVM in this region. An externally owned account (or EOA) has an empty code region.

@@ -123,10 +131,10 @@ const AboutPage = () => { only the top values are used by the instructions. The stack currently has a maximum limit of 1024 values. All instructions interact with the stack, but it can be directly manipulated with instructions like{' '} - ,{' '} - ,{' '} - , or{' '} - . + ,{' '} + ,{' '} + , or{' '} + .

@@ -136,11 +144,11 @@ const AboutPage = () => { execution, and is accessed with a byte offset. While all the 32-byte address space is available and initialized to 0, the size is counted with the highest address that was accessed. It is generally read and - written with and{' '} - instructions, but is also + written with and{' '} + instructions, but is also used by other instructions like{' '} - or{' '} - . + or{' '} + .

@@ -150,8 +158,8 @@ const AboutPage = () => { map of the 32-byte slot to 32-byte value, and each value written is kept until it is set to 0 or the contract self-destruction. Reading from an unset key also returns 0. It is read and written with the - instructions and{' '} - . + instructions and{' '} + .

@@ -160,9 +168,9 @@ const AboutPage = () => { The calldata region is the data that is sent with a transaction. In the case of contract creation, it would be the constructor code. This region is immutable and can be read with the instructions{' '} - ,{' '} - , and{' '} - . + ,{' '} + , and{' '} + .

@@ -170,11 +178,11 @@ const AboutPage = () => {

The return data region is the way a smart contract can return a value after a call. It can be set by external contract calls through the{' '} - and{' '} - instructions and can be read + and{' '} + instructions and can be read by the calling contract with{' '} - and{' '} - . + and{' '} + .

@@ -278,13 +286,13 @@ const AboutPage = () => {

The memory_byte_size can be obtained with{' '} - . We can see that the cost + . We can see that the cost grows quadratically with the size, making higher offsets more costly and discouraging to use too much memory. Any opcode accessing memory may trigger an expansion (including, for example,{' '} - ,{' '} - or{' '} - + ,{' '} + or{' '} + ). Each opcode that can is mentioned in the{' '} . Note also that an opcode with a byte size parameter of 0 will not trigger a memory expansion, @@ -309,24 +317,24 @@ const AboutPage = () => { . When an opcode accesses an address that is not present in the set, it adds it in it. The relevant opcodes are{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - and{' '} - . + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + and{' '} + .

  • Slots: a set of contract address and their storage slot keys that have been accessed. It is initialized to empty. When an opcode accesses a slot that is not present in the set, it adds it to it. - The relevant opcodes are {' '} - and + The relevant opcodes are {' '} + and
    • When a context reverts, the sets are also reverted to the state they @@ -343,8 +351,8 @@ const AboutPage = () => { also limited, to half of the total transaction cost before the hardfork London, otherwise to a fifth. Starting from the hardfork London also, only{' '} - may trigger refunds. Before - that, could also + may trigger refunds. Before + that, could also trigger refunds.

    diff --git a/util/string.ts b/util/string.ts index 67edad87..c3619bee 100644 --- a/util/string.ts +++ b/util/string.ts @@ -1,3 +1,4 @@ +import { Hardfork } from '@ethereumjs/common/dist/types.js' import hljs from 'highlight.js/lib/core' import hljsDefineSolidity from 'highlightjs-solidity' @@ -83,3 +84,7 @@ export const objToQueryString = (params: any) => { .filter((param) => param !== null) .join('&') } + +export const relativeLinkCreator = (section: string, selectedFork: Hardfork | undefined) => { + return `#${section}?fork=${selectedFork?.name}`; +} \ No newline at end of file From 183910478a811e97aa9ef2427e31891b9b50a364 Mon Sep 17 00:00:00 2001 From: Michydev Date: Wed, 19 Oct 2022 09:05:05 +0200 Subject: [PATCH 2/2] fix: :rotating_light: remove linter issues --- pages/about.tsx | 114 +++++++++++++++++++++++++----------------------- util/string.ts | 9 ++-- 2 files changed, 66 insertions(+), 57 deletions(-) diff --git a/pages/about.tsx b/pages/about.tsx index 8ffbfe5c..6f990baa 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -4,13 +4,14 @@ import type { NextPage } from 'next' import Head from 'next/head' import Link from 'next/link' +import { EthereumContext } from 'context/ethereumContext' + +import { relativeLinkCreator } from 'util/string' + import HomeLayout from 'components/layouts/Home' import { Container, H1, H2, H3, Icon, RelativeLink } from 'components/ui' import { Pre } from 'components/ui/Doc' -import { EthereumContext } from 'context/ethereumContext' -import { relativeLinkCreator } from 'util/string' - type SectionWrapperProps = { header: React.ReactNode anchorKey: string @@ -56,10 +57,10 @@ const SectionWrapper: React.FC = ({ // NOTE: It seems the memory expansion computation and constants did not change // since frontier, but we have to keep an eye on new fork to keep this up to date const AboutPage = () => { - const { selectedFork } = useContext(EthereumContext); - + const { selectedFork } = useContext(EthereumContext) + const anchorCreator = (section: string) => { - return relativeLinkCreator(section, selectedFork); + return relativeLinkCreator(section, selectedFork) } return ( @@ -114,12 +115,15 @@ const AboutPage = () => { persistent and part of an account properties. During smart contract execution, these are the bytes that the EVM will read, interpret and execute. This is a region that cannot be modified, but can be read - with the instructions and{' '} - . Other contracts code can - also be read with and{' '} - . The program counter - (PC) encodes which instruction should be read next by the EVM in this - region. An externally owned account (or EOA) has an empty code region. + with the instructions{' '} + and{' '} + . Other + contracts code can also be read with{' '} + and{' '} + . The + program counter (PC) encodes which instruction should be read next by + the EVM in this region. An externally owned account (or EOA) has an + empty code region.

    @@ -131,10 +135,10 @@ const AboutPage = () => { only the top values are used by the instructions. The stack currently has a maximum limit of 1024 values. All instructions interact with the stack, but it can be directly manipulated with instructions like{' '} - ,{' '} - ,{' '} - , or{' '} - . + ,{' '} + ,{' '} + , or{' '} + .

    @@ -144,11 +148,11 @@ const AboutPage = () => { execution, and is accessed with a byte offset. While all the 32-byte address space is available and initialized to 0, the size is counted with the highest address that was accessed. It is generally read and - written with and{' '} - instructions, but is also - used by other instructions like{' '} - or{' '} - . + written with {' '} + and {' '} + instructions, but is also used by other instructions like{' '} + or{' '} + .

    @@ -158,8 +162,8 @@ const AboutPage = () => { map of the 32-byte slot to 32-byte value, and each value written is kept until it is set to 0 or the contract self-destruction. Reading from an unset key also returns 0. It is read and written with the - instructions and{' '} - . + instructions {' '} + and .

    @@ -168,9 +172,9 @@ const AboutPage = () => { The calldata region is the data that is sent with a transaction. In the case of contract creation, it would be the constructor code. This region is immutable and can be read with the instructions{' '} - ,{' '} - , and{' '} - . + ,{' '} + , and{' '} + .

    @@ -178,11 +182,11 @@ const AboutPage = () => {

    The return data region is the way a smart contract can return a value after a call. It can be set by external contract calls through the{' '} - and{' '} - instructions and can be read - by the calling contract with{' '} - and{' '} - . + and{' '} + instructions + and can be read by the calling contract with{' '} + and{' '} + .

    @@ -286,13 +290,13 @@ const AboutPage = () => {

    The memory_byte_size can be obtained with{' '} - . We can see that the cost - grows quadratically with the size, making higher offsets more costly - and discouraging to use too much memory. Any opcode accessing memory - may trigger an expansion (including, for example,{' '} - ,{' '} - or{' '} - + . We can see + that the cost grows quadratically with the size, making higher offsets + more costly and discouraging to use too much memory. Any opcode + accessing memory may trigger an expansion (including, for example,{' '} + ,{' '} + or{' '} + ). Each opcode that can is mentioned in the{' '} . Note also that an opcode with a byte size parameter of 0 will not trigger a memory expansion, @@ -317,24 +321,25 @@ const AboutPage = () => { . When an opcode accesses an address that is not present in the set, it adds it in it. The relevant opcodes are{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - ,{' '} - and{' '} - . + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + ,{' '} + and{' '} + .

  • Slots: a set of contract address and their storage slot keys that have been accessed. It is initialized to empty. When an opcode accesses a slot that is not present in the set, it adds it to it. - The relevant opcodes are {' '} - and + The relevant opcodes are{' '} + and{' '} +
    • When a context reverts, the sets are also reverted to the state they @@ -351,9 +356,10 @@ const AboutPage = () => { also limited, to half of the total transaction cost before the hardfork London, otherwise to a fifth. Starting from the hardfork London also, only{' '} - may trigger refunds. Before - that, could also - trigger refunds. + may trigger + refunds. Before that,{' '} + could + also trigger refunds.

    diff --git a/util/string.ts b/util/string.ts index c3619bee..e70e3365 100644 --- a/util/string.ts +++ b/util/string.ts @@ -85,6 +85,9 @@ export const objToQueryString = (params: any) => { .join('&') } -export const relativeLinkCreator = (section: string, selectedFork: Hardfork | undefined) => { - return `#${section}?fork=${selectedFork?.name}`; -} \ No newline at end of file +export const relativeLinkCreator = ( + section: string, + selectedFork: Hardfork | undefined, +) => { + return `#${section}?fork=${selectedFork?.name}` +}