Merge pull request #496 from blockscout/contract-read

contract read and write (part 1)

icons/arrows/down-right.svg

+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.038 13.692h6.675l-4.147 4.148.832.832 5.568-5.568-5.568-5.568-.832.832 4.147 4.148H8.038A3.832 3.832 0 0 1 4.21 8.687V1.329H3.033v7.36a5.01 5.01 0 0 0 5.005 5.004Z" fill="currentColor"/>
+</svg>

lib/api/resources.ts

@@ -14,7 +14,7 @@ import type {
 } from 'types/api/address';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters } from 'types/api/block';
 import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
-import type { SmartContract } from 'types/api/contract';
+import type { SmartContract, SmartContractReadMethod, SmartContractWriteMethod } from 'types/api/contract';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log';
@@ -168,6 +168,21 @@ export const RESOURCES = {
   contract: {
     path: '/api/v2/smart-contracts/:id',
   },
+  contract_methods_read: {
+    path: '/api/v2/smart-contracts/:id/methods-read',
+  },
+  contract_methods_read_proxy: {
+    path: '/api/v2/smart-contracts/:id/methods-read-proxy',
+  },
+  contract_method_query: {
+    path: '/api/v2/smart-contracts/:id/query-read-method',
+  },
+  contract_methods_write: {
+    path: '/api/v2/smart-contracts/:id/methods-write',
+  },
+  contract_methods_write_proxy: {
+    path: '/api/v2/smart-contracts/:id/methods-write-proxy',
+  },
 
   // TOKEN
   token: {
@@ -297,6 +312,10 @@ Q extends 'token_counters' ? TokenCounters :
 Q extends 'token_holders' ? TokenHolders :
 Q extends 'search' ? SearchResult :
 Q extends 'contract' ? SmartContract :
+Q extends 'contract_methods_read' ? Array<SmartContractReadMethod> :
+Q extends 'contract_methods_read_proxy' ? Array<SmartContractReadMethod> :
+Q extends 'contract_methods_write' ? Array<SmartContractWriteMethod> :
+Q extends 'contract_methods_write_proxy' ? Array<SmartContractWriteMethod> :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

package.json

@@ -45,7 +45,7 @@
     "d3": "^7.6.1",
     "dayjs": "^1.11.5",
     "dom-to-image": "^2.6.0",
-    "ethers": "^5.7.1",
+    "ethers": "^5.7.2",
     "framer-motion": "^6.5.1",
     "js-cookie": "^3.0.1",
     "lodash": "^4.0.0",

theme/components/Input.ts

@@ -16,8 +16,8 @@ const size = {
   xs: defineStyle({
     fontSize: 'md',
     lineHeight: '24px',
-    px: '4px',
-    py: '12px',
+    px: '8px',
+    py: '4px',
     h: '32px',
     borderRadius: 'base',
   }),

types/api/contract.ts

@@ -13,3 +13,37 @@ export interface SmartContract {
   source_code: string | null;
   can_be_visualized_via_sol2uml: boolean | null;
 }
+
+export interface SmartContractMethodBase {
+  inputs: Array<SmartContractMethodInput>;
+  outputs: Array<SmartContractMethodOutput>;
+  constant: boolean;
+  name: string;
+  stateMutability: string;
+  type: 'function';
+  payable: boolean;
+}
+
+export interface SmartContractReadMethod extends SmartContractMethodBase {
+  method_id: string;
+}
+
+export interface SmartContractWriteFallback {
+  payable: true;
+  stateMutability: 'payable';
+  type: 'fallback';
+}
+
+export type SmartContractWriteMethod = SmartContractMethodBase | SmartContractWriteFallback;
+
+export type SmartContractMethod = SmartContractReadMethod | SmartContractWriteMethod;
+
+export interface SmartContractMethodInput {
+  internalType: string;
+  name: string;
+  type: string;
+}
+
+export interface SmartContractMethodOutput extends SmartContractMethodInput {
+  value?: string;
+}

ui/address/contract/ContractMethodCallable.tsx

+import { Box, Button, chakra, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
+import _fromPairs from 'lodash/fromPairs';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+
+import type { MethodFormFields } from './types';
+import type { SmartContractMethodInput, SmartContractMethod } from 'types/api/contract';
+
+import appConfig from 'configs/app/config';
+import arrowIcon from 'icons/arrows/down-right.svg';
+
+import ContractMethodField from './ContractMethodField';
+
+interface Props<T extends SmartContractMethod> {
+  data: T;
+  caller: (data: T, args: Array<string>) => Promise<Array<Array<string>>>;
+  isWrite?: boolean;
+}
+
+const getFieldName = (name: string, index: number): string => name || String(index);
+
+const sortFields = (data: Array<SmartContractMethodInput>) => ([ a ]: [string, string], [ b ]: [string, string]): 1 | -1 | 0 => {
+  const fieldNames = data.map(({ name }, index) => getFieldName(name, index));
+  const indexA = fieldNames.indexOf(a);
+  const indexB = fieldNames.indexOf(b);
+
+  if (indexA > indexB) {
+    return 1;
+  }
+
+  if (indexA < indexB) {
+    return -1;
+  }
+
+  return 0;
+};
+
+const ContractMethodCallable = <T extends SmartContractMethod>({ data, caller, isWrite }: Props<T>) => {
+
+  const inputs = React.useMemo(() => {
+    return data.payable && (!('inputs' in data) || data.inputs.length === 0) ? [ {
+      name: 'value',
+      type: appConfig.network.currency.symbol,
+      internalType: appConfig.network.currency.symbol,
+    } as SmartContractMethodInput ] : data.inputs;
+  }, [ data ]);
+
+  const { control, handleSubmit, setValue } = useForm<MethodFormFields>({
+    defaultValues: _fromPairs(inputs.map(({ name }, index) => [ getFieldName(name, index), '' ])),
+  });
+  const [ result, setResult ] = React.useState<Array<Array<string>>>([ ]);
+
+  const onSubmit: SubmitHandler<MethodFormFields> = React.useCallback(async(formData) => {
+    const args = Object.entries(formData)
+      .sort(sortFields(inputs))
+      .map(([ , value ]) => value);
+
+    const result = await caller(data, args);
+    setResult(result);
+
+  }, [ caller, data, inputs ]);
+
+  const resultBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <Box>
+      <chakra.form
+        noValidate
+        display="flex"
+        columnGap={ 3 }
+        flexDir={{ base: 'column', lg: 'row' }}
+        rowGap={ 2 }
+        alignItems={{ base: 'flex-start', lg: 'center' }}
+        onSubmit={ handleSubmit(onSubmit) }
+        flexWrap="wrap"
+      >
+        { inputs.map(({ type, name }, index) => {
+          const fieldName = getFieldName(name, index);
+          return (
+            <ContractMethodField
+              key={ fieldName }
+              name={ fieldName }
+              placeholder={ `${ name }(${ type })` }
+              control={ control }
+              setValue={ setValue }
+            />
+          );
+        }) }
+        <Button
+          variant="outline"
+          size="sm"
+          flexShrink={ 0 }
+          type="submit"
+        >
+          { isWrite ? 'Write' : 'Query' }
+        </Button>
+      </chakra.form>
+      { 'outputs' in data && data.outputs.length > 0 && (
+        <Flex mt={ 3 }>
+          <Icon as={ arrowIcon } boxSize={ 5 } mr={ 1 }/>
+          <Text>{ data.outputs.map(({ type }) => type).join(', ') }</Text>
+        </Flex>
+      ) }
+      { result.length > 0 && (
+        <Box mt={ 3 } p={ 4 } borderRadius="md" bgColor={ resultBgColor } fontSize="sm">
+          <p>
+          [ <chakra.span fontWeight={ 600 }>{ 'name' in data ? data.name : '' }</chakra.span> method response ]
+          </p>
+          <p>[</p>
+          { result.map(([ key, value ], index) => (
+            <chakra.p key={ index } whiteSpace="break-spaces" wordBreak="break-all">  { key }: { value }</chakra.p>
+          )) }
+          <p>]</p>
+        </Box>
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(ContractMethodCallable) as typeof ContractMethodCallable;

ui/address/contract/ContractMethodConstant.tsx

+import { Checkbox, Flex, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import type { SmartContractMethodOutput } from 'types/api/contract';
+
+import appConfig from 'configs/app/config';
+import { WEI } from 'lib/consts';
+
+interface Props {
+  data: SmartContractMethodOutput;
+}
+
+const ContractMethodStatic = ({ data }: Props) => {
+  const isBigInt = data.type.includes('int256') || data.type.includes('int128');
+  const [ value, setValue ] = React.useState(isBigInt && data.value ? BigNumber(data.value).toFixed() : data.value);
+  const [ label, setLabel ] = React.useState('WEI');
+
+  const handleCheckboxChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    if (!data.value) {
+      return;
+    }
+
+    if (event.target.checked) {
+      setValue(BigNumber(data.value).div(WEI).toFixed());
+      setLabel(appConfig.network.currency.symbol || 'ETH');
+    } else {
+      setValue(BigNumber(data.value).toFixed());
+      setLabel('WEI');
+    }
+  }, [ data.value ]);
+
+  return (
+    <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 2 }>
+      <chakra.span wordBreak="break-all">({ data.type }): { value }</chakra.span>
+      { isBigInt && <Checkbox onChange={ handleCheckboxChange }>{ label }</Checkbox> }
+    </Flex>
+  );
+};
+
+export default ContractMethodStatic;

ui/address/contract/ContractMethodField.tsx

+import { FormControl, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerRenderProps, UseFormSetValue } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import type { MethodFormFields } from './types';
+
+import InputClearButton from 'ui/shared/InputClearButton';
+
+interface Props {
+  control: Control<MethodFormFields>;
+  setValue: UseFormSetValue<MethodFormFields>;
+  placeholder: string;
+  name: string;
+}
+
+const ContractMethodField = ({ control, name, placeholder, setValue }: Props) => {
+  const ref = React.useRef<HTMLInputElement>(null);
+
+  const handleClear = React.useCallback(() => {
+    setValue(name, '');
+    ref.current?.focus();
+  }, [ name, setValue ]);
+
+  const renderInput = React.useCallback(({ field }: { field: ControllerRenderProps<MethodFormFields> }) => {
+    return (
+      <FormControl id={ name } maxW={{ base: '100%', lg: 'calc((100% - 24px) / 3)' }}>
+        <InputGroup size="xs">
+          <Input
+            { ...field }
+            ref={ ref }
+            placeholder={ placeholder }
+          />
+          { field.value && (
+            <InputRightElement>
+              <InputClearButton onClick={ handleClear }/>
+            </InputRightElement>
+          ) }
+        </InputGroup>
+      </FormControl>
+    );
+  }, [ handleClear, name, placeholder ]);
+
+  return (
+    <Controller
+      name={ name }
+      control={ control }
+      render={ renderInput }
+    />
+
+  );
+};
+
+export default React.memo(ContractMethodField);

ui/address/contract/ContractMethodsAccordion.tsx

+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Flex, Icon, Link, Tooltip } from '@chakra-ui/react';
+import _range from 'lodash/range';
+import React from 'react';
+
+import type { SmartContractMethod } from 'types/api/contract';
+
+import infoIcon from 'icons/info.svg';
+
+interface Props<T extends SmartContractMethod> {
+  data: Array<T>;
+  renderContent: (item: T, index: number, id: number) => React.ReactNode;
+}
+
+const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, renderContent }: Props<T>) => {
+  const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>([]);
+  const [ id, setId ] = React.useState(0);
+
+  const handleAccordionStateChange = React.useCallback((newValue: Array<number>) => {
+    setExpandedSections(newValue);
+  }, []);
+
+  const handleExpandAll = React.useCallback(() => {
+    if (!data) {
+      return;
+    }
+
+    if (expandedSections.length < data.length) {
+      setExpandedSections(_range(0, data.length));
+    } else {
+      setExpandedSections([]);
+    }
+  }, [ data, expandedSections.length ]);
+
+  const handleReset = React.useCallback(() => {
+    setId((id) => id + 1);
+  }, []);
+
+  return (
+    <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
+      { data.map((item, index) => {
+        return (
+          <AccordionItem key={ index } as="section">
+            <h2>
+              <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }}>
+                <Box as="span" fontFamily="heading" fontWeight={ 500 } fontSize="lg" mr={ 1 }>
+                  { index + 1 }. { item.type === 'fallback' ? 'fallback' : item.name }
+                </Box>
+                { item.type === 'fallback' && (
+                  <Tooltip
+                    label={ `The fallback function is executed on a call to the contract if none of the other functions match 
+                    the given function signature, or if no data was supplied at all and there is no receive Ether function. 
+                    The fallback function always receives data, but in order to also receive Ether it must be marked payable.` }
+                    placement="top"
+                    maxW="320px"
+                  >
+                    <Box cursor="pointer" display="inherit">
+                      <Icon as={ infoIcon } boxSize={ 5 }/>
+                    </Box>
+                  </Tooltip>
+                ) }
+                <AccordionIcon/>
+              </AccordionButton>
+            </h2>
+            <AccordionPanel pb={ 4 } px={ 0 }>
+              { renderContent(item, index, id) }
+            </AccordionPanel>
+          </AccordionItem>
+        );
+      }) }
+      <Flex columnGap={ 3 } position="absolute" top={ 0 } right={ 0 } py={ 3 } lineHeight="27px">
+        <Link onClick={ handleExpandAll }>{ expandedSections.length === data.length ? 'Collapse' : 'Expand' } all</Link>
+        <Link onClick={ handleReset }>Reset</Link>
+      </Flex>
+    </Accordion>
+  );
+};
+
+export default React.memo(ContractMethodsAccordion) as typeof ContractMethodsAccordion;

ui/address/contract/ContractRead.tsx

+import { Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { SmartContractReadMethod } from 'types/api/contract';
+
+import useApiFetch from 'lib/api/useApiFetch';
+import useApiQuery from 'lib/api/useApiQuery';
+import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+import ContractMethodCallable from './ContractMethodCallable';
+import ContractMethodConstant from './ContractMethodConstant';
+
+interface Props {
+  isProxy?: boolean;
+}
+
+const ContractRead = ({ isProxy }: Props) => {
+  const router = useRouter();
+  const apiFetch = useApiFetch();
+
+  const addressHash = router.query.id?.toString();
+
+  const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', {
+    pathParams: { id: addressHash },
+    queryOptions: {
+      enabled: Boolean(router.query.id),
+    },
+  });
+
+  const contractCaller = React.useCallback(async(item: SmartContractReadMethod, args: Array<string>) => {
+    await apiFetch('contract_method_query', {
+      pathParams: { id: addressHash },
+      fetchParams: {
+        method: 'POST',
+        body: {
+          args,
+          method_id: item.method_id,
+          contract_type: isProxy ? 'proxy' : 'regular',
+        },
+      },
+    });
+
+    return [ [ 'string', 'this is mock' ] ];
+  }, [ addressHash, apiFetch, isProxy ]);
+
+  const renderContent = React.useCallback((item: SmartContractReadMethod, index: number, id: number) => {
+    if (item.inputs.length === 0) {
+      return (
+        <Flex flexDir="column" rowGap={ 1 }>
+          { item.outputs.map((output, index) => <ContractMethodConstant key={ index } data={ output }/>) }
+        </Flex>
+      );
+    }
+
+    return (
+      <ContractMethodCallable
+        key={ id + '_' + index }
+        data={ item }
+        caller={ contractCaller }
+      />
+    );
+  }, [ contractCaller ]);
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (isLoading) {
+    return <ContentLoader/>;
+  }
+
+  return <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>;
+};
+
+export default ContractRead;

ui/address/contract/ContractWrite.tsx

+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { SmartContractWriteMethod } from 'types/api/contract';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+import ContractMethodCallable from './ContractMethodCallable';
+
+interface Props {
+  isProxy?: boolean;
+}
+
+const ContractWrite = ({ isProxy }: Props) => {
+  const router = useRouter();
+
+  const addressHash = router.query.id?.toString();
+
+  const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', {
+    pathParams: { id: addressHash },
+    queryOptions: {
+      enabled: Boolean(router.query.id),
+    },
+  });
+
+  const contractInfo = useApiQuery('contract', {
+    pathParams: { id: addressHash },
+    queryOptions: {
+      enabled: Boolean(router.query.id),
+    },
+  });
+
+  const contractCaller = React.useCallback(async() => {
+    // eslint-disable-next-line no-console
+    console.log('__>__', contractInfo);
+    return [ [ 'string', 'this is mock' ] ];
+  }, [ contractInfo ]);
+
+  const renderContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
+    return (
+      <ContractMethodCallable
+        key={ id + '_' + index }
+        data={ item }
+        caller={ contractCaller }
+        isWrite
+      />
+    );
+  }, [ contractCaller ]);
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (isLoading) {
+    return <ContentLoader/>;
+  }
+
+  return <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>;
+};
+
+export default ContractWrite;

ui/address/contract/types.ts

+export type MethodFormFields = Record<string, string>;

ui/pages/Address.tsx

@@ -15,6 +15,8 @@ import AddressLogs from 'ui/address/AddressLogs';
 import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
 import AddressTxs from 'ui/address/AddressTxs';
 import ContractCode from 'ui/address/contract/ContractCode';
+import ContractRead from 'ui/address/contract/ContractRead';
+import ContractWrite from 'ui/address/contract/ContractWrite';
 import TextAd from 'ui/shared/ad/TextAd';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -44,19 +46,19 @@ const AddressPageContent = () => {
         { id: 'contact_decompiled_code', title: 'Decompiled code', component: <div>Decompiled code</div> } :
         undefined,
       addressQuery.data?.has_methods_read ?
-        { id: 'read_contract', title: 'Read contract', component: <div>Read contract</div> } :
+        { id: 'read_contract', title: 'Read contract', component: <ContractRead/> } :
         undefined,
       addressQuery.data?.has_methods_read_proxy ?
-        { id: 'read_proxy', title: 'Read proxy', component: <div>Read proxy</div> } :
+        { id: 'read_proxy', title: 'Read proxy', component: <ContractRead isProxy/> } :
         undefined,
       addressQuery.data?.has_custom_methods_read ?
         { id: 'read_custom_methods', title: 'Read custom methods', component: <div>Read custom methods</div> } :
         undefined,
       addressQuery.data?.has_methods_write ?
-        { id: 'write_contract', title: 'Write contract', component: <div>Write contract</div> } :
+        { id: 'write_contract', title: 'Write contract', component: <ContractWrite/> } :
         undefined,
       addressQuery.data?.has_methods_write_proxy ?
-        { id: 'write_proxy', title: 'Write proxy', component: <div>Write proxy</div> } :
+        { id: 'write_proxy', title: 'Write proxy', component: <ContractWrite isProxy/> } :
         undefined,
       addressQuery.data?.has_custom_methods_write ?
         { id: 'write_custom_methods', title: 'Write custom methods', component: <div>Write custom methods</div> } :

yarn.lock

@@ -2170,10 +2170,10 @@
   dependencies:
     "@ethersproject/logger" "^5.7.0"
 
-"@ethersproject/providers@5.7.1":
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.7.1.tgz#b0799b616d5579cd1067a8ebf1fc1ec74c1e122c"
-  integrity sha512-vZveG/DLyo+wk4Ga1yx6jSEHrLPgmTt+dFv0dv8URpVCRf0jVhalps1jq/emN/oXnMRsC7cQgAF32DcXLL7BPQ==
+"@ethersproject/providers@5.7.2":
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.7.2.tgz#f8b1a4f275d7ce58cf0a2eec222269a08beb18cb"
+  integrity sha512-g34EWZ1WWAVgr4aptGlVBF8mhl3VWjv+8hoAnzStu8Ah22VHBsuGzP17eb6xDVRzw895G4W7vvx60lFFur/1Rg==
   dependencies:
     "@ethersproject/abstract-provider" "^5.7.0"
     "@ethersproject/abstract-signer" "^5.7.0"
@@ -5685,10 +5685,10 @@ eth-rpc-errors@^4.0.2:
   dependencies:
     fast-safe-stringify "^2.0.6"
 
-ethers@^5.7.1:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.1.tgz#48c83a44900b5f006eb2f65d3ba6277047fd4f33"
-  integrity sha512-5krze4dRLITX7FpU8J4WscXqADiKmyeNlylmmDLbS95DaZpBhDe2YSwRQwKXWNyXcox7a3gBgm/MkGXV1O1S/Q==
+ethers@^5.7.2:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e"
+  integrity sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==
   dependencies:
     "@ethersproject/abi" "5.7.0"
     "@ethersproject/abstract-provider" "5.7.0"
@@ -5708,7 +5708,7 @@ ethers@^5.7.1:
     "@ethersproject/networks" "5.7.1"
     "@ethersproject/pbkdf2" "5.7.0"
     "@ethersproject/properties" "5.7.0"
-    "@ethersproject/providers" "5.7.1"
+    "@ethersproject/providers" "5.7.2"
     "@ethersproject/random" "5.7.0"
     "@ethersproject/rlp" "5.7.0"
     "@ethersproject/sha2" "5.7.0"