Merge pull request #220 from blockscout/tx-page-api

tx page api integration

data/tx.ts

 /* eslint-disable max-len */
 export const tx = {
   hash: '0x1ea365d2144796f793883534aa51bf20d23292b19478994eede23dfc599e7c34',
-  status: 'success' as TxStatus,
+  status: 'ok' as Transaction['status'],
   block_num: 15006918,
   confirmation_num: 283,
   confirmation_duration: 30,
@@ -52,4 +52,4 @@ export const tx = {
 
 export type TxType = 'contract-call' | 'transaction' | 'token-transfer' | 'internal-tx' | 'multicall';
 
-export type TxStatus = 'success' | 'failed' | 'pending';
+import type { Transaction } from 'types/api/transaction';

data/txInternal.ts

-import type { TxInternalsType } from 'types/api/tx';
-
-export const data = [
-  {
-    id: 1,
-    type: 'call' as TxInternalsType,
-    status: 'success' as const,
-    from: { hash: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01' },
-    to: { hash: '0xF7A558692dFB5F456e291791da7FAE8Dd046574e' },
-    value: 0.25207646303,
-    gasLimit: 369472,
-  },
-  {
-    id: 2,
-    type: 'delegate_call' as TxInternalsType,
-    status: 'success' as const,
-    from: { hash: '0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45' },
-    to: { hash: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01' },
-    value: 0.5633333,
-    gasLimit: 340022,
-  },
-  {
-    id: 3,
-    type: 'static_call' as TxInternalsType,
-    status: 'failed' as const,
-    from: { hash: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830' },
-    to: { hash: '0x35317007D203b8a86CA727ad44E473E40450E378' },
-    value: 0.421152366,
-    gasLimit: 509333,
-  },
-];

data/txLogs.ts

-export const data = [
-  {
-    address: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01',
-    topics: [
-      { hex: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef' },
-      { hex: '0x000000000000000000000000def171fe48cf0115b1d80b88dc8eab59176fee57' },
-      { hex: '0x000000000000000000000000c465c0a16228ef6fe1bf29c04fdb04bb797fd537' },
-    ],
-    data: '0x000000000000000000000000000000000000000000000000019faae14eb88000',
-  },
-  {
-    address: '0x73968b9a57c6e53d41345fd57a6e6ae27d6cdb2f',
-    topics: [
-      { hex: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef' },
-      { hex: '0x000000000000000000000000c465c0a16228ef6fe1bf29c04fdb04bb797fd537' },
-      { hex: '0x0000000000000000000000008453d9385af5f49edad9905345cd2411b5c5831b' },
-    ],
-    data: '0x000000000000000000000000000000000000000000000013b6ee62022c95ced4',
-  },
-];

data/txs.ts

+import type { Transaction } from 'types/api/transaction';
+
 import { tx } from './tx';
-import type { TxType, TxStatus } from './tx';
+import type { TxType } from './tx';
 
 export const txs = [
   {
@@ -10,7 +12,7 @@ export const txs = [
   },
   {
     ...tx,
-    status: 'failed' as TxStatus,
+    status: 'error' as Transaction['status'],
     errorText: 'Error: (Awaiting internal transactions for reason)',
     txType: 'contract-call' as TxType,
     method: 'CommitHash CommitHash CommitHash CommitHash',
@@ -25,7 +27,7 @@ export const txs = [
   },
   {
     ...tx,
-    status: 'pending' as TxStatus,
+    status: null,
     txType: 'token-transfer' as TxType,
     method: 'Multicall',
     address_from: {

lib/consts.ts

+export const WEI = BigInt(10 ** 18);
+export const GWEI = BigInt(10 ** 9);

lib/tx/getConfirmationDuration.ts

+export default function getConfirmationString(durations: Array<number>) {
+  if (durations.length === 0) {
+    return '';
+  }
+
+  const [ lower, upper ] = durations.map((time) => time / 1_000);
+
+  if (!upper) {
+    return `Confirmed within ${ lower } secs`;
+  }
+
+  if (lower === 0) {
+    return `Confirmed within <= ${ upper } secs`;
+  }
+
+  return `Confirmed within ${ lower } - ${ upper } secs`;
+}

package.json

@@ -25,6 +25,7 @@
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/react-scroll": "^1.8.4",
     "dayjs": "^1.11.5",
+    "ethers": "^5.7.1",
     "framer-motion": "^6",
     "lodash": "^4.0.0",
     "next": "12.2.5",

pages/api/transactions/[id]/index.ts

+import type { NextApiRequest } from 'next';
+
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/v2/transactions/${ req.query.id }`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

pages/api/transactions/[id]/internal-transactions.ts

+import type { NextApiRequest } from 'next';
+
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/v2/transactions/${ req.query.id }/internal-transactions`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

pages/api/transactions/[id]/logs.ts

+import type { NextApiRequest } from 'next';
+
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/v2/transactions/${ req.query.id }/logs`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

pages/api/transactions/[id]/raw-trace.ts

+import type { NextApiRequest } from 'next';
+
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/v2/transactions/${ req.query.id }/raw-trace`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

types/api/decodedInput.ts

@@ -8,4 +8,5 @@ export interface DecodedInputParams {
   name: string;
   type: string;
   value: string;
+  indexed?: boolean;
 }

types/api/internalTransaction.ts

 import type { AddressParam } from './addressParams';
 
+export type TxInternalsType = 'call' | 'delegatecall' | 'staticcall' | 'create' | 'create2' | 'selfdestruct' | 'reward'
+
 export interface InternalTransaction {
   error: string | null;
   success: boolean;
-  type: string;
+  type: TxInternalsType;
   transaction_hash: string;
   from: AddressParam;
   to: AddressParam;

types/api/tokenTransfer.ts

@@ -11,5 +11,5 @@ export interface TokenTransfer {
   total: {
     value: string;
   };
-  exchangeRate: number;
+  exchange_rate: string;
 }

types/api/transaction.ts

@@ -7,7 +7,7 @@ export interface Transaction {
   hash: string;
   result: string;
   confirmations: number;
-  status: string;
+  status: 'ok' | 'error' | null;
   block: number;
   timestamp: string;
   confirmation_duration: Array<number>;
@@ -18,8 +18,8 @@ export interface Transaction {
   fee: Fee;
   gas_price: number;
   type: number;
-  gas_used: number;
-  gas_limit: number;
+  gas_used: string;
+  gas_limit: string;
   max_fee_per_gas: number | null;
   max_priority_fee_per_gas: number | null;
   priority_fee: number | null;
@@ -35,7 +35,7 @@ export interface Transaction {
   decoded_input: DecodedInput | null;
   token_transfers: Array<TokenTransfer> | null;
   token_transfers_overflow: boolean;
-  exchange_rate: number;
+  exchange_rate: string;
 }
 
 export interface TransactionsResponse {

types/api/tx.ts

-export type TxInternalsType = 'call' | 'delegate_call' | 'static_call' | 'create' | 'create2' | 'self_destruct' | 'reward'

ui/pages/Transaction.tsx

@@ -13,13 +13,14 @@ import TxDetails from 'ui/tx/TxDetails';
 import TxInternals from 'ui/tx/TxInternals';
 import TxLogs from 'ui/tx/TxLogs';
 import TxRawTrace from 'ui/tx/TxRawTrace';
-import TxState from 'ui/tx/TxState';
+// import TxState from 'ui/tx/TxState';
 
 const TABS: Array<RoutedTab> = [
   { routeName: 'tx_index', title: 'Details', component: <TxDetails/> },
   { routeName: 'tx_internal', title: 'Internal txn', component: <TxInternals/> },
   { routeName: 'tx_logs', title: 'Logs', component: <TxLogs/> },
-  { routeName: 'tx_state', title: 'State', component: <TxState/> },
+  // will be implemented later, api is not ready
+  // { routeName: 'tx_state', title: 'State', component: <TxState/> },
   { routeName: 'tx_raw_trace', title: 'Raw trace', component: <TxRawTrace/> },
 ];
 

ui/shared/CurrencyValue.tsx

+import { Box, Text, chakra } from '@chakra-ui/react';
+import { utils, constants } from 'ethers';
+import React from 'react';
+
+interface Props {
+  value: string;
+  unit?: 'wei' | 'gwei' | 'ether';
+  currency?: string;
+  exchangeRate?: string;
+  className?: string;
+}
+
+const CurrencyValue = ({ value, currency = '', unit = 'wei', exchangeRate, className }: Props) => {
+  const valueBn = utils.parseUnits(value, unit);
+  const exchangeRateBn = utils.parseUnits(exchangeRate || '0', 'ether');
+  const usdBn = valueBn.mul(exchangeRateBn).div(constants.WeiPerEther);
+
+  return (
+    <Box as="span" className={ className }>
+      <Text as="span">
+        { Number(utils.formatUnits(valueBn)).toLocaleString() }{ currency ? ` ${ currency }` : '' }</Text>
+      { exchangeRate !== undefined && exchangeRate !== null &&
+        <Text as="span" variant="secondary" whiteSpace="pre" fontWeight={ 400 }> (${ utils.formatUnits(usdBn) })</Text> }
+    </Box>
+  );
+};
+
+export default React.memo(chakra(CurrencyValue));

ui/shared/TxStatus.tsx

 import { Tag, TagLabel, TagLeftIcon, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
+import type { Transaction } from 'types/api/transaction';
+
 import errorIcon from 'icons/status/error.svg';
 import pendingIcon from 'icons/status/pending.svg';
 import successIcon from 'icons/status/success.svg';
 
 export interface Props {
-  status: 'success' | 'failed' | 'pending';
-  errorText?: string;
+  status: Transaction['status'];
+  errorText?: string | null;
 }
 
 const TxStatus = ({ status, errorText }: Props) => {
@@ -16,17 +18,17 @@ const TxStatus = ({ status, errorText }: Props) => {
   let colorScheme;
 
   switch (status) {
-    case 'success':
+    case 'ok':
       label = 'Success';
       icon = successIcon;
       colorScheme = 'green';
       break;
-    case 'failed':
+    case 'error':
       label = 'Failed';
       icon = errorIcon;
       colorScheme = 'red';
       break;
-    case 'pending':
+    case null:
       label = 'Pending';
       icon = pendingIcon;
       // FIXME: it's not gray on mockups

ui/tx/TokenTransfer.tsx

 import { Flex, Icon, Text } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer';
+
 import rightArrowIcon from 'icons/arrows/east.svg';
 import { space } from 'lib/html-entities';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CurrencyValue from 'ui/shared/CurrencyValue';
 import TokenSnippet from 'ui/shared/TokenSnippet';
 
-interface Props {
-  from: string;
-  to: string;
-  amount: number;
-  usd: number;
-  token: {
-    symbol: string;
-    hash: string;
-    name: string;
-  };
-}
+type Props = TTokenTransfer
 
-const TokenTransfer = ({ from, to, amount, usd, token }: Props) => {
+const TokenTransfer = ({ from, to, total, exchange_rate: exchangeRate, ...token }: Props) => {
   return (
     <Flex alignItems="center" flexWrap="wrap" columnGap={ 3 } rowGap={ 3 }>
       <Flex alignItems="center">
-        <AddressLink fontWeight="500" hash={ from } truncation="constant"/>
+        <AddressLink fontWeight="500" hash={ from.hash } truncation="constant"/>
         <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-        <AddressLink fontWeight="500" hash={ to } truncation="constant"/>
+        <AddressLink fontWeight="500" hash={ to.hash } truncation="constant"/>
       </Flex>
       <Text fontWeight={ 500 } as="span">For:{ space }
-        <Text fontWeight={ 600 } as="span">{ amount }</Text>{ space }
-        <Text fontWeight={ 400 } variant="secondary" as="span">(${ usd.toFixed(2) })</Text>
+        <CurrencyValue value={ total.value.replaceAll(',', '') } unit="ether" exchangeRate={ exchangeRate } fontWeight={ 600 }/>
       </Text>
-      <TokenSnippet { ...token }/>
+      <TokenSnippet symbol={ token.token_symbol } hash={ token.token_address } name="Foo"/>
     </Flex>
   );
 };

ui/tx/TxDecodedInputData.tsx

 import { Flex, Text, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import type { DecodedInput } from 'types/api/decodedInput';
+
 import Address from 'ui/shared/address/Address';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -39,14 +41,16 @@ const TableRow = ({ isLast, name, type, children, indexed }: RowProps) => {
       >
         { type }
       </GridItem>
-      <GridItem
-        pr={ GAP }
-        pt={ GAP }
-        pb={ isLast ? PADDING : 0 }
-        bgColor={ bgColor }
-      >
-        { indexed ? 'true' : 'false' }
-      </GridItem>
+      { indexed !== undefined && (
+        <GridItem
+          pr={ GAP }
+          pt={ GAP }
+          pb={ isLast ? PADDING : 0 }
+          bgColor={ bgColor }
+        >
+          { indexed ? 'true' : 'false' }
+        </GridItem>
+      ) }
       <GridItem
         pr={ PADDING }
         pt={ GAP }
@@ -60,14 +64,28 @@ const TableRow = ({ isLast, name, type, children, indexed }: RowProps) => {
   );
 };
 
-const TxDecodedInputData = () => {
+interface Props {
+  data: DecodedInput;
+}
+
+const TxDecodedInputData = ({ data }: Props) => {
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const hasIndexed = data.parameters.some(({ indexed }) => indexed !== undefined);
+
+  const gridTemplateColumns = hasIndexed ?
+    'minmax(80px, auto) minmax(80px, auto) minmax(80px, auto) minmax(0, 1fr)' :
+    'minmax(80px, auto) minmax(80px, auto) minmax(0, 1fr)';
+  const colNumber = hasIndexed ? 4 : 3;
 
   return (
-    <Grid gridTemplateColumns="minmax(80px, auto) minmax(80px, auto) minmax(80px, auto) minmax(0, 1fr)" fontSize="sm" lineHeight={ 5 } w="100%">
+    <Grid gridTemplateColumns={ gridTemplateColumns } fontSize="sm" lineHeight={ 5 } w="100%">
       { /* FIRST PART OF BLOCK */ }
-      <GridItem fontWeight={ 600 } pl={{ base: 0, lg: PADDING }} pr={{ base: 0, lg: GAP }} colSpan={{ base: 4, lg: undefined }}>Method Id</GridItem>
-      <GridItem colSpan={{ base: 4, lg: 3 }} pr={{ base: 0, lg: PADDING }} mt={{ base: 2, lg: 0 }}>0xddf252ad</GridItem>
+      <GridItem fontWeight={ 600 } pl={{ base: 0, lg: PADDING }} pr={{ base: 0, lg: GAP }} colSpan={{ base: colNumber, lg: undefined }}>
+        Method Id
+      </GridItem>
+      <GridItem colSpan={{ base: colNumber, lg: colNumber - 1 }} pr={{ base: 0, lg: PADDING }} mt={{ base: 2, lg: 0 }}>
+        { data.method_id }
+      </GridItem>
       <GridItem
         py={ 2 }
         mt={ 2 }
@@ -76,7 +94,7 @@ const TxDecodedInputData = () => {
         fontWeight={ 600 }
         borderTopColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
         borderTopWidth="1px"
-        colSpan={{ base: 4, lg: undefined }}
+        colSpan={{ base: colNumber, lg: undefined }}
       >
         Call
       </GridItem>
@@ -84,13 +102,13 @@ const TxDecodedInputData = () => {
         py={{ base: 0, lg: 2 }}
         mt={{ base: 0, lg: 2 }}
         mb={{ base: 2, lg: 0 }}
-        colSpan={{ base: 4, lg: 3 }}
+        colSpan={{ base: colNumber, lg: colNumber - 1 }}
         pr={{ base: 0, lg: PADDING }}
         borderTopColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
         borderTopWidth={{ base: '0px', lg: '1px' }}
         whiteSpace="normal"
       >
-        Transfer(address indexed from, address indexed to, uint256 indexed tokenId)
+        { data.method_call }
       </GridItem>
       { /* TABLE INSIDE OF BLOCK */ }
       <GridItem
@@ -112,15 +130,17 @@ const TxDecodedInputData = () => {
       >
         Type
       </GridItem>
-      <GridItem
-        pr={ GAP }
-        pt={ PADDING }
-        pb={ 1 }
-        bgColor={ bgColor }
-        fontWeight={ 600 }
-      >
-        Inde<wbr/>xed?
-      </GridItem>
+      { hasIndexed && (
+        <GridItem
+          pr={ GAP }
+          pt={ PADDING }
+          pb={ 1 }
+          bgColor={ bgColor }
+          fontWeight={ 600 }
+        >
+          Inde<wbr/>xed?
+        </GridItem>
+      ) }
       <GridItem
         pr={ PADDING }
         pt={ PADDING }
@@ -130,24 +150,23 @@ const TxDecodedInputData = () => {
       >
         Data
       </GridItem>
-      <TableRow name="from" type="address">
-        <Address justifyContent="space-between">
-          <AddressLink hash="0x0000000000000000000000000000000000000000"/>
-          <CopyToClipboard text="0x0000000000000000000000000000000000000000"/>
-        </Address>
-      </TableRow>
-      <TableRow name="to" type="address" indexed>
-        <Address justifyContent="space-between">
-          <AddressLink hash="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718"/>
-          <CopyToClipboard text="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718"/>
-        </Address>
-      </TableRow>
-      <TableRow name="tokenId" type="uint256" isLast>
-        <Flex alignItems="center" justifyContent="space-between">
-          <Text>116842</Text>
-          <CopyToClipboard text="116842"/>
-        </Flex>
-      </TableRow>
+      { data.parameters.map(({ name, type, value, indexed }, index) => {
+        return (
+          <TableRow key={ name } name={ name } type={ type } isLast={ index === data.parameters.length - 1 } indexed={ indexed }>
+            { type === 'address' ? (
+              <Address justifyContent="space-between">
+                <AddressLink hash={ value }/>
+                <CopyToClipboard text={ value }/>
+              </Address>
+            ) : (
+              <Flex alignItems="flex-start" justifyContent="space-between" whiteSpace="normal" wordBreak="break-all">
+                <Text>{ value }</Text>
+                <CopyToClipboard text={ value }/>
+              </Flex>
+            ) }
+          </TableRow>
+        );
+      }) }
     </Grid>
   );
 };

ui/tx/TxDetails.tsx

-import { Grid, GridItem, Text, Box, Icon, Link, Tag, Flex, Tooltip, chakra } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Box, Icon, Link, Flex } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { utils } from 'ethers';
+import { useRouter } from 'next/router';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
-import { tx } from 'data/tx';
+import type { Transaction } from 'types/api/transaction';
+
 import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
-import errorIcon from 'icons/status/error.svg';
-import successIcon from 'icons/status/success.svg';
+// import errorIcon from 'icons/status/error.svg';
+// import successIcon from 'icons/status/success.svg';
 import dayjs from 'lib/date/dayjs';
+import useFetch from 'lib/hooks/useFetch';
 import useNetwork from 'lib/hooks/useNetwork';
+import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import PrevNext from 'ui/shared/PrevNext';
 import RawInputData from 'ui/shared/RawInputData';
 import TextSeparator from 'ui/shared/TextSeparator';
-import TokenSnippet from 'ui/shared/TokenSnippet';
-import type { Props as TxStatusProps } from 'ui/shared/TxStatus';
+// import TokenSnippet from 'ui/shared/TokenSnippet';
 import TxStatus from 'ui/shared/TxStatus';
 import Utilization from 'ui/shared/Utilization';
+import TxDetailsSkeleton from 'ui/tx/details/TxDetailsSkeleton';
 import TokenTransfer from 'ui/tx/TokenTransfer';
 import TxDecodedInputData from 'ui/tx/TxDecodedInputData';
 
 const TxDetails = () => {
   const selectedNetwork = useNetwork();
+  const router = useRouter();
+  const fetch = useFetch();
+
+  const { data, isLoading, isError } = useQuery<unknown, unknown, Transaction>(
+    [ 'tx', router.query.id ],
+    async() => await fetch(`/api/transactions/${ router.query.id }`),
+    {
+      enabled: Boolean(router.query.id),
+    },
+  );
 
   const [ isExpanded, setIsExpanded ] = React.useState(false);
 
@@ -38,6 +56,14 @@ const TxDetails = () => {
     });
   }, []);
 
+  if (isLoading) {
+    return <TxDetailsSkeleton/>;
+  }
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
       <DetailsInfoItem
@@ -46,25 +72,25 @@ const TxDetails = () => {
         flexWrap="nowrap"
       >
         <Box overflow="hidden">
-          <HashStringShortenDynamic hash={ tx.hash }/>
+          <HashStringShortenDynamic hash={ data.hash }/>
         </Box>
-        <CopyToClipboard text={ tx.hash }/>
+        <CopyToClipboard text={ data.hash }/>
         <PrevNext ml={ 7 }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Status"
         hint="Current transaction state: Success, Failed (Error), or Pending (In Process)"
       >
-        <TxStatus status={ tx.status as TxStatusProps['status'] }/>
+        <TxStatus status={ data.status } errorText={ data.status === 'error' ? data.result : undefined }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Block"
         hint="Block number containing the transaction."
       >
-        <Text>{ tx.block_num }</Text>
+        <Text>{ data.block }</Text>
         <TextSeparator color="gray.500"/>
         <Text variant="secondary">
-          { tx.confirmation_num } Block confirmations
+          { data.confirmations } Block confirmations
         </Text>
       </DetailsInfoItem>
       <DetailsInfoItem
@@ -72,12 +98,10 @@ const TxDetails = () => {
         hint="Date & time of transaction inclusion, including length of time for confirmation."
       >
         <Icon as={ clockIcon } boxSize={ 5 } color="gray.500"/>
-        <Text ml={ 1 }>{ dayjs(tx.timestamp).fromNow() }</Text>
+        <Text ml={ 1 }>{ dayjs(data.timestamp).fromNow() }</Text>
         <TextSeparator/>
-        <Text whiteSpace="normal">{ dayjs(tx.timestamp).format('LLLL') }<TextSeparator color="gray.500"/></Text>
-        <Text variant="secondary">
-          Confirmed within { tx.confirmation_duration } secs
-        </Text>
+        <Text whiteSpace="normal">{ dayjs(data.timestamp).format('LLLL') }<TextSeparator color="gray.500"/></Text>
+        <Text variant="secondary">{ getConfirmationDuration(data.confirmation_duration) }</Text>
       </DetailsInfoItem>
       <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
       <DetailsInfoItem
@@ -85,101 +109,111 @@ const TxDetails = () => {
         hint="Address (external or contract) sending the transaction."
       >
         <Address>
-          <AddressIcon hash={ tx.address_from.hash }/>
-          <AddressLink ml={ 2 } hash={ tx.address_from.hash }/>
-          <CopyToClipboard text={ tx.address_from.hash }/>
+          <AddressIcon hash={ data.from.hash }/>
+          <AddressLink ml={ 2 } hash={ data.from.hash } alias={ data.from.name }/>
+          <CopyToClipboard text={ data.from.hash }/>
         </Address>
       </DetailsInfoItem>
       <DetailsInfoItem
-        title="Interacted with contract"
+        title={ data.to.is_contract ? 'Interacted with contract' : 'To' }
         hint="Address (external or contract) receiving the transaction."
         flexWrap={{ base: 'wrap', lg: 'nowrap' }}
       >
         <Address mr={ 3 }>
-          <AddressIcon hash={ tx.address_to.hash }/>
-          <AddressLink ml={ 2 } hash={ tx.address_to.hash }/>
-          <CopyToClipboard text={ tx.address_to.hash }/>
+          <AddressIcon hash={ data.to.hash }/>
+          <AddressLink ml={ 2 } hash={ data.to.hash } alias={ data.to.name }/>
+          <CopyToClipboard text={ data.to.hash }/>
         </Address>
-        <Tag colorScheme="orange" variant="solid" flexShrink={ 0 }>SANA</Tag>
-        <Tooltip label="Contract execution completed">
+        { /* todo_tom Nikita should add to api later */ }
+        { /* <Tag colorScheme="orange" variant="solid" flexShrink={ 0 }>SANA</Tag> */ }
+        { /* <Tooltip label="Contract execution completed">
           <chakra.span display="inline-flex">
             <Icon as={ successIcon } boxSize={ 4 } ml={ 2 } color="green.500" cursor="pointer"/>
           </chakra.span>
-        </Tooltip>
-        <Tooltip label="Error occured during contract execution">
+        </Tooltip> */ }
+        { /* <Tooltip label="Error occured during contract execution">
           <chakra.span display="inline-flex">
             <Icon as={ errorIcon } boxSize={ 4 } ml={ 2 } color="red.500" cursor="pointer"/>
           </chakra.span>
-        </Tooltip>
-        <TokenSnippet symbol="UP" name="User Pay" hash="0xA17ed5dFc62D0a3E74D69a0503AE9FdA65d9f212" ml={ 3 }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Token transferred"
-        hint="List of token transferred in the transaction."
-      >
-        <Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
-          { tx.transferred_tokens.map((item) => <TokenTransfer key={ item.token.hash } { ...item }/>) }
-        </Flex>
+        </Tooltip> */ }
+        { /* <TokenSnippet symbol="UP" name="User Pay" hash="0xA17ed5dFc62D0a3E74D69a0503AE9FdA65d9f212" ml={ 3 }/> */ }
       </DetailsInfoItem>
+      { (data.token_transfers?.length || 0) > 0 && (
+        <DetailsInfoItem
+          title="Token transferred"
+          hint="List of token transferred in the transaction."
+        >
+          <Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
+            { data.token_transfers?.map((item, index) => <TokenTransfer key={ index } { ...item }/>) }
+          </Flex>
+        </DetailsInfoItem>
+      ) }
       <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
       <DetailsInfoItem
         title="Value"
         hint="Value sent in the native token (and USD) if applicable."
       >
-        <Text>{ tx.amount.value } { selectedNetwork?.currency }</Text>
-        <Text variant="secondary" ml={ 1 }>(${ tx.amount.value_usd.toFixed(2) })</Text>
+        <CurrencyValue value={ String(data.value) } currency={ selectedNetwork?.currency } exchangeRate={ data.exchange_rate }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Transaction fee"
         hint="Total transaction fee."
       >
-        <Text>{ tx.fee.value } { selectedNetwork?.currency }</Text>
-        <Text variant="secondary" ml={ 1 }>(${ tx.fee.value_usd.toFixed(2) })</Text>
+        <CurrencyValue value={ String(data.fee.value) } currency={ selectedNetwork?.currency } exchangeRate={ data.exchange_rate }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas price"
         hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage."
       >
-        <Text mr={ 1 }>{ tx.gas_price.toLocaleString('en', { minimumFractionDigits: 18 }) } { selectedNetwork?.currency }</Text>
-        <Text variant="secondary">({ (tx.gas_price * Math.pow(10, 18)).toFixed(0) } Gwei)</Text>
+        <Text mr={ 1 }>{ utils.formatUnits(utils.parseUnits(String(data.gas_price), 'wei')) } { selectedNetwork?.currency }</Text>
+        <Text variant="secondary">({ Number(utils.formatUnits(utils.parseUnits(String(data.gas_price), 'wei'), 'gwei')) } Gwei)</Text>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas limit & usage by txn"
         hint="Actual gas amount used by the transaction."
       >
-        <Text>{ tx.gas_used.toLocaleString('en') }</Text>
+        <Text>{ utils.commify(data.gas_used) }</Text>
         <TextSeparator/>
-        <Text >{ tx.gas_limit.toLocaleString('en') }</Text>
-        <Utilization ml={ 4 } value={ tx.gas_used / tx.gas_limit }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Gas fees (Gwei)"
-        // eslint-disable-next-line max-len
-        hint="Base Fee refers to the network Base Fee at the time of the block, while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay for their tx & to give to the miner respectively."
-      >
-        <Box>
-          <Text as="span" fontWeight="500">Base: </Text>
-          <Text fontWeight="600" as="span">{ tx.gas_fees.base }</Text>
-          <TextSeparator/>
-        </Box>
-        <Box>
-          <Text as="span" fontWeight="500">Max: </Text>
-          <Text fontWeight="600" as="span">{ tx.gas_fees.max }</Text>
-          <TextSeparator/>
-        </Box>
-        <Box>
-          <Text as="span" fontWeight="500">Max priority: </Text>
-          <Text fontWeight="600" as="span">{ tx.gas_fees.max_priority }</Text>
-        </Box>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Burnt fees"
-        hint={ `Amount of ${ selectedNetwork?.currency } burned for this transaction. Equals Block Base Fee per Gas * Gas Used.` }
-      >
-        <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
-        <Text ml={ 1 } mr={ 1 }>{ tx.burnt_fees.value.toLocaleString('en', { minimumFractionDigits: 18 }) } { selectedNetwork?.currency }</Text>
-        <Text variant="secondary">(${ tx.burnt_fees.value_usd.toFixed(2) })</Text>
+        <Text >{ utils.commify(data.gas_limit) }</Text>
+        <Utilization ml={ 4 } value={ utils.parseUnits(data.gas_used).mul(10_000).div(utils.parseUnits(data.gas_limit)).toNumber() / 10_000 }/>
       </DetailsInfoItem>
+      { (data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
+        <DetailsInfoItem
+          title="Gas fees (Gwei)"
+          // eslint-disable-next-line max-len
+          hint="Base Fee refers to the network Base Fee at the time of the block, while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay for their tx & to give to the miner respectively."
+        >
+          { data.base_fee_per_gas && (
+            <Box>
+              <Text as="span" fontWeight="500">Base: </Text>
+              <Text fontWeight="600" as="span">{ utils.formatUnits(utils.parseUnits(String(data.base_fee_per_gas), 'wei'), 'gwei') }</Text>
+            </Box>
+          ) }
+          { data.max_fee_per_gas && (
+            <Box>
+              <TextSeparator/>
+              <Text as="span" fontWeight="500">Max: </Text>
+              <Text fontWeight="600" as="span">{ utils.formatUnits(utils.parseUnits(String(data.max_fee_per_gas), 'wei'), 'gwei') }</Text>
+            </Box>
+          ) }
+          { data.max_priority_fee_per_gas && (
+            <Box>
+              <TextSeparator/>
+              <Text as="span" fontWeight="500">Max priority: </Text>
+              <Text fontWeight="600" as="span">{ utils.formatUnits(utils.parseUnits(String(data.max_priority_fee_per_gas), 'wei'), 'gwei') }</Text>
+            </Box>
+          ) }
+        </DetailsInfoItem>
+      ) }
+      { data.tx_burnt_fee && (
+        <DetailsInfoItem
+          title="Burnt fees"
+          hint={ `Amount of ${ selectedNetwork?.currency } burned for this transaction. Equals Block Base Fee per Gas * Gas Used.` }
+        >
+          <Icon as={ flameIcon } mr={ 1 } boxSize={ 5 } color="gray.500"/>
+          <CurrencyValue value={ String(data.tx_burnt_fee) } currency={ selectedNetwork?.currency } exchangeRate={ data.exchange_rate }/>
+        </DetailsInfoItem>
+      ) }
       <GridItem colSpan={{ base: undefined, lg: 2 }}>
         <Element name="TxDetails__cutLink">
           <Link
@@ -201,34 +235,38 @@ const TxDetails = () => {
             title="Other"
             hint="Other data related to this transaction."
           >
-            <Box>
-              <Text as="span" fontWeight="500">Txn type: </Text>
-              <Text fontWeight="600" as="span">{ tx.type.value }</Text>
-              <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">({ tx.type.eip })</Text>
-              <TextSeparator/>
-            </Box>
+            { typeof data.type === 'number' && (
+              <Box>
+                <Text as="span" fontWeight="500">Txn type: </Text>
+                <Text fontWeight="600" as="span">{ data.type }</Text>
+                { data.type === 2 && <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">(EIP-1559)</Text> }
+                <TextSeparator/>
+              </Box>
+            ) }
             <Box>
               <Text as="span" fontWeight="500">Nonce: </Text>
-              <Text fontWeight="600" as="span">{ tx.nonce }</Text>
+              <Text fontWeight="600" as="span">{ data.nonce }</Text>
               <TextSeparator/>
             </Box>
             <Box>
               <Text as="span" fontWeight="500">Position: </Text>
-              <Text fontWeight="600" as="span">{ tx.position }</Text>
+              <Text fontWeight="600" as="span">{ data.position }</Text>
             </Box>
           </DetailsInfoItem>
           <DetailsInfoItem
             title="Raw input"
             hint="Binary data included with the transaction. See logs tab for additional info."
           >
-            <RawInputData hex={ tx.input_hex }/>
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Decoded input data"
-            hint="Decoded input data"
-          >
-            <TxDecodedInputData/>
+            <RawInputData hex={ data.raw_input }/>
           </DetailsInfoItem>
+          { data.decoded_input && (
+            <DetailsInfoItem
+              title="Decoded input data"
+              hint="Decoded input data"
+            >
+              <TxDecodedInputData data={ data.decoded_input }/>
+            </DetailsInfoItem>
+          ) }
         </>
       ) }
     </Grid>

ui/tx/TxInternals.tsx

-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Alert, Show } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { TxInternalsType } from 'types/api/tx';
-import type ArrayElement from 'types/utils/ArrayElement';
+import type { InternalTransactionsResponse, TxInternalsType, InternalTransaction } from 'types/api/internalTransaction';
 
-import { data } from 'data/txInternal';
+import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } from 'lib/html-entities';
 import EmptySearchResult from 'ui/apps/EmptySearchResult';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import FilterInput from 'ui/shared/FilterInput';
 import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
 import TxInternalsList from 'ui/tx/internals/TxInternalsList';
+import TxInternalsSkeletonDesktop from 'ui/tx/internals/TxInternalsSkeletonDesktop';
+import TxInternalsSkeletonMobile from 'ui/tx/internals/TxInternalsSkeletonMobile';
 import TxInternalsTable from 'ui/tx/internals/TxInternalsTable';
 import type { Sort, SortField } from 'ui/tx/internals/utils';
 
@@ -26,7 +30,7 @@ const getNextSortValue = (field: SortField) => (prevValue: Sort | undefined) =>
   return sequence[nextIndex];
 };
 
-const sortFn = (sort: Sort | undefined) => (a: ArrayElement<typeof data>, b: ArrayElement<typeof data>) => {
+const sortFn = (sort: Sort | undefined) => (a: InternalTransaction, b: InternalTransaction) => {
   switch (sort) {
     case 'value-desc': {
       const result = a.value > b.value ? -1 : 1;
@@ -38,22 +42,23 @@ const sortFn = (sort: Sort | undefined) => (a: ArrayElement<typeof data>, b: Arr
       return a.value === b.value ? 0 : result;
     }
 
-    case 'gas-limit-desc': {
-      const result = a.gasLimit > b.gasLimit ? -1 : 1;
-      return a.gasLimit === b.gasLimit ? 0 : result;
-    }
+    // no gas limit in api yet
+    // case 'gas-limit-desc': {
+    //   const result = a.gasLimit > b.gasLimit ? -1 : 1;
+    //   return a.gasLimit === b.gasLimit ? 0 : result;
+    // }
 
-    case 'gas-limit-asc': {
-      const result = a.gasLimit > b.gasLimit ? 1 : -1;
-      return a.gasLimit === b.gasLimit ? 0 : result;
-    }
+    // case 'gas-limit-asc': {
+    //   const result = a.gasLimit > b.gasLimit ? 1 : -1;
+    //   return a.gasLimit === b.gasLimit ? 0 : result;
+    // }
 
     default:
       return 0;
   }
 };
 
-const searchFn = (searchTerm: string) => (item: ArrayElement<typeof data>): boolean => {
+const searchFn = (searchTerm: string) => (item: InternalTransaction): boolean => {
   const formattedSearchTerm = searchTerm.toLowerCase();
   return item.type.toLowerCase().includes(formattedSearchTerm) ||
     item.from.hash.toLowerCase().includes(formattedSearchTerm) ||
@@ -61,9 +66,19 @@ const searchFn = (searchTerm: string) => (item: ArrayElement<typeof data>): bool
 };
 
 const TxInternals = () => {
+  const router = useRouter();
+  const fetch = useFetch();
+
   const [ filters, setFilters ] = React.useState<Array<TxInternalsType>>([]);
   const [ searchTerm, setSearchTerm ] = React.useState<string>('');
   const [ sort, setSort ] = React.useState<Sort>();
+  const { data, isLoading, isError } = useQuery<unknown, unknown, InternalTransactionsResponse>(
+    [ 'tx-internals', router.query.id ],
+    async() => await fetch(`/api/transactions/${ router.query.id }/internal-transactions`),
+    {
+      enabled: Boolean(router.query.id),
+    },
+  );
 
   const isMobile = useIsMobile();
 
@@ -77,8 +92,25 @@ const TxInternals = () => {
     };
   }, []);
 
+  if (isLoading) {
+    return (
+      <>
+        <Show below="lg"><TxInternalsSkeletonMobile/></Show>
+        <Show above="lg"><TxInternalsSkeletonDesktop/></Show>
+      </>
+    );
+  }
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (data.items.length === 0) {
+    return <Alert>There are no internal transactions for this transaction.</Alert>;
+  }
+
   const content = (() => {
-    const filteredData = data
+    const filteredData = data.items
       .filter(({ type }) => filters.length > 0 ? filters.includes(type) : true)
       .filter(searchFn(searchTerm))
       .sort(sortFn(sort));

ui/tx/TxLogs.tsx

-import { Box } from '@chakra-ui/react';
+import { Box, Alert } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import React from 'react';
 
-import { data } from 'data/txLogs';
+import type { LogsResponse } from 'types/api/log';
+
+import useFetch from 'lib/hooks/useFetch';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import TxLogItem from 'ui/tx/logs/TxLogItem';
+import TxLogSkeleton from 'ui/tx/logs/TxLogSkeleton';
 
 const TxLogs = () => {
+  const router = useRouter();
+  const fetch = useFetch();
+
+  const { data, isLoading, isError } = useQuery<unknown, unknown, LogsResponse>(
+    [ 'tx-log', router.query.id ],
+    async() => await fetch(`/api/transactions/${ router.query.id }/logs`),
+    {
+      enabled: Boolean(router.query.id),
+    },
+  );
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (isLoading) {
+    return (
+      <Box>
+        <TxLogSkeleton/>
+        <TxLogSkeleton/>
+      </Box>
+    );
+  }
+
+  if (data.items.length === 0) {
+    return <Alert>There are no logs for this transaction.</Alert>;
+  }
+
   return (
     <Box>
-      { data.map((item, index) => <TxLogItem key={ index } { ...item } index={ index }/>) }
+      { data.items.map((item, index) => <TxLogItem key={ index } { ...item }/>) }
     </Box>
   );
 };

ui/tx/TxRawTrace.tsx

-import { Flex, Textarea } from '@chakra-ui/react';
+import { Flex, Textarea, Skeleton } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { RawTracesResponse } from 'types/api/rawTrace';
+
+import useFetch from 'lib/hooks/useFetch';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
-const data = [
-  {
-    action: {
-      callType: 'delegatecall',
-      from: '0x296033cb983747b68911244ec1a3f01d7708851b',
-      gas: '0x1AB35C9',
-      // eslint-disable-next-line max-len
-      input: '0x6a76120200000000000000000000000099759357a9923bb164a7ae8b85703a6882cb84ea0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000014000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002c0000000000000000000000000000000000000000000000000000000000000014466d2a64d000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000c00000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000013ef0000000000000000000000000000000000000000000000000000000000001bfb000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000186b900000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000041000000000000000000000000f4e5b62da2eee3b5811dae1fae480f7623bd4cd000000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000',
-      to: '0x3e5c63644e683549055b9be8653de26e0b4cd36e',
-      value: '0x0',
-    },
-    result: {
-      blockHash: '0x43dd926aa138a58d3f4740dae387bcff3c7bc525db2d0a449f323f8b8f92a229',
-      blockNumber: '0xa4f285',
-      from: '0xea8a7ef30f894bce23b42314613458d13f9d43ea',
-      gas: '0x30d40',
-      gasPrice: '0x2e90edd000',
-      hash: '0x72ee43a3784cc6749f64fad1ecf0bbd51a54dd6892ae0573f211566809e0d511',
-      input: '0x',
-      nonce: '0x1e7',
-      to: '0xbd064928cdd4fd67fb99917c880e6560978d7ca1',
-      transactionIndex: '0x0',
-      value: '0xde0b6b3a7640000',
-      v: '0x25',
-      r: '0x7e833413ead52b8c538001b12ab5a85bac88db0b34b61251bb0fc81573ca093f',
-      s: '0x49634f1e439e3760265888434a2f9782928362412030db1429458ddc9dcee995',
-    },
-  },
-  {
-    action: {
-      callType: 'delegatecall',
-      from: '0x296033cb983747b68911244ec1a3f01d7708851b',
-      gas: '0x1AB35C9',
-      // eslint-disable-next-line max-len
-      input: '0x6a76120200000000000000000000000099759357a9923bb164a7ae8b85703a6882cb84ea0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000014000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002c0000000000000000000000000000000000000000000000000000000000000014466d2a64d000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000c00000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000013ef0000000000000000000000000000000000000000000000000000000000001bfb000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000186b900000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000041000000000000000000000000f4e5b62da2eee3b5811dae1fae480f7623bd4cd000000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000',
-      to: '0x3e5c63644e683549055b9be8653de26e0b4cd36e',
-      value: '0x0',
-    },
-    result: {
-      blockHash: '0x43dd926aa138a58d3f4740dae387bcff3c7bc525db2d0a449f323f8b8f92a229',
-      blockNumber: '0xa4f285',
-      from: '0xea8a7ef30f894bce23b42314613458d13f9d43ea',
-      gas: '0x30d40',
-      gasPrice: '0x2e90edd000',
-      hash: '0x72ee43a3784cc6749f64fad1ecf0bbd51a54dd6892ae0573f211566809e0d511',
-      input: '0x',
-      nonce: '0x1e7',
-      to: '0xbd064928cdd4fd67fb99917c880e6560978d7ca1',
-      transactionIndex: '0x0',
-      value: '0xde0b6b3a7640000',
-      v: '0x25',
-      r: '0x7e833413ead52b8c538001b12ab5a85bac88db0b34b61251bb0fc81573ca093f',
-      s: '0x49634f1e439e3760265888434a2f9782928362412030db1429458ddc9dcee995',
+const TxRawTrace = () => {
+  const router = useRouter();
+  const fetch = useFetch();
+
+  const { data, isLoading, isError } = useQuery<unknown, unknown, RawTracesResponse>(
+    [ 'tx-raw-trace', router.query.id ],
+    async() => await fetch(`/api/transactions/${ router.query.id }/raw-trace`),
+    {
+      enabled: Boolean(router.query.id),
     },
-  },
-];
+  );
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (isLoading) {
+    return (
+      <>
+        <Flex justifyContent="end" mb={ 2 }>
+          <Skeleton w={ 5 } h={ 5 }/>
+        </Flex>
+        <Skeleton w="100%" h="500px"/>
+      </>
+    );
+  }
 
-const TxRawTrace = () => {
   const text = JSON.stringify(data, undefined, 4);
+
   return (
     <>
       <Flex justifyContent="end" mb={ 2 }>
@@ -69,7 +45,7 @@ const TxRawTrace = () => {
       </Flex>
       <Textarea
         variant="filledInactive"
-        height="570px"
+        minHeight="500px"
         p={ 4 }
         value={ text }
       />

ui/tx/details/TxDetailsSkeleton.tsx

+import { Grid, GridItem, Skeleton, SkeletonCircle } from '@chakra-ui/react';
+import React from 'react';
+
+const SkeletonRow = ({ w = '100%' }: { w?: string }) => (
+  <>
+    <GridItem display="flex" columnGap={ 2 } w={{ base: '50%', lg: 'auto' }} _notFirst={{ mt: { base: 3, lg: 0 } }}>
+      <SkeletonCircle h={ 5 } w={ 5 }/>
+      <Skeleton flexGrow={ 1 } h={ 5 } borderRadius="full"/>
+    </GridItem>
+    <GridItem pl={{ base: 7, lg: 0 }}>
+      <Skeleton h={ 5 } borderRadius="full" w={{ base: '100%', lg: w }}/>
+    </GridItem>
+  </>
+);
+
+const TxDetailsSkeleton = () => {
+  const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
+
+  return (
+    <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">
+      <SkeletonRow/>
+      <SkeletonRow w="20%"/>
+      <SkeletonRow w="50%"/>
+      <SkeletonRow/>
+      <SkeletonRow w="70%"/>
+      <SkeletonRow w="70%"/>
+      { sectionGap }
+      <SkeletonRow w="40%"/>
+      <SkeletonRow w="40%"/>
+      <SkeletonRow w="40%"/>
+      <SkeletonRow w="40%"/>
+      <SkeletonRow w="40%"/>
+      { sectionGap }
+      <GridItem colSpan={{ base: undefined, lg: 2 }}>
+        <Skeleton h={ 5 } borderRadius="full" w="100px"/>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default TxDetailsSkeleton;

ui/tx/internals/TxInternalsFilter.tsx

 import { Popover, PopoverTrigger, PopoverContent, PopoverBody, CheckboxGroup, Checkbox, Text, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
-import type { TxInternalsType } from 'types/api/tx';
+import type { TxInternalsType } from 'types/api/internalTransaction';
 
 import FilterButton from 'ui/shared/FilterButton';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';

ui/tx/internals/TxInternalsList.tsx

 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import type { data as txData } from 'data/txInternal';
+import type { InternalTransaction } from 'types/api/internalTransaction';
+
 import useNetwork from 'lib/hooks/useNetwork';
 import TxInternalsListItem from 'ui/tx/internals/TxInternalsListItem';
 
-const TxInternalsList = ({ data }: { data: typeof txData}) => {
+const TxInternalsList = ({ data }: { data: Array<InternalTransaction>}) => {
   const selectedNetwork = useNetwork();
 
   return (
     <Box mt={ 6 }>
-      { data.map((item) => <TxInternalsListItem key={ item.id } { ...item } currency={ selectedNetwork?.currency }/>) }
+      { data.map((item) => <TxInternalsListItem key={ item.transaction_hash } { ...item } currency={ selectedNetwork?.currency }/>) }
     </Box>
   );
 };

ui/tx/internals/TxInternalsListItem.tsx

 import { Flex, Tag, Icon, Box, HStack, Text } from '@chakra-ui/react';
-import capitalize from 'lodash/capitalize';
 import React from 'react';
 
-import type ArrayElement from 'types/utils/ArrayElement';
+import type { InternalTransaction } from 'types/api/internalTransaction';
 
-import type { data } from 'data/txInternal';
 import eastArrowIcon from 'icons/arrows/east.svg';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import TxStatus from 'ui/shared/TxStatus';
+import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
-type Props = ArrayElement<typeof data> & { currency?: string };
+type Props = InternalTransaction & { currency?: string };
+
+const TxInternalsListItem = ({ type, from, to, value, currency, success, error }: Props) => {
+  const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
 
-const TxInternalsListItem = ({ type, status, from, to, value, gasLimit, currency }: Props) => {
   return (
     <AccountListItemMobile rowGap={ 3 }>
       <Flex>
-        <Tag colorScheme="cyan" mr={ 2 }>{ capitalize(type) }</Tag>
-        <TxStatus status={ status }/>
+        <Tag colorScheme="cyan" mr={ 2 }>{ typeTitle }</Tag>
+        <TxStatus status={ success ? 'ok' : 'error' } errorText={ error }/>
       </Flex>
       <Box w="100%" display="flex" columnGap={ 3 }>
         <Address width="calc((100% - 48px) / 2)">
@@ -36,10 +37,11 @@ const TxInternalsListItem = ({ type, status, from, to, value, gasLimit, currency
         <Text fontSize="sm" fontWeight={ 500 }>Value { currency }</Text>
         <Text fontSize="sm" variant="secondary">{ value }</Text>
       </HStack>
-      <HStack spacing={ 3 }>
+      { /* no gas limit in api yet */ }
+      { /* <HStack spacing={ 3 }>
         <Text fontSize="sm" fontWeight={ 500 }>Gas limit</Text>
         <Text fontSize="sm" variant="secondary">{ gasLimit.toLocaleString('en') }</Text>
-      </HStack>
+      </HStack> */ }
     </AccountListItemMobile>
   );
 };

ui/tx/internals/TxInternalsSkeletonDesktop.tsx

+import { Skeleton, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import SkeletonTable from 'ui/shared/SkeletonTable';
+
+const TxInternalsSkeletonDesktop = () => {
+  return (
+    <>
+      <Flex columnGap={ 3 } h={ 8 } mb={ 6 }>
+        <Skeleton w="78px"/>
+        <Skeleton w="360px"/>
+      </Flex>
+      <SkeletonTable columns={ [ '28%', '28%', '24px', '28%', '16%' ] }/>
+    </>
+  );
+};
+
+export default TxInternalsSkeletonDesktop;

ui/tx/internals/TxInternalsSkeletonMobile.tsx

+import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const TxInternalsSkeletonMobile = () => {
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  return (
+    <>
+      <Flex columnGap={ 3 } h={ 8 } mb={ 6 }>
+        <Skeleton w="36px" flexShrink={ 0 }/>
+        <Skeleton w="100%"/>
+      </Flex>
+      <Box>
+        { Array.from(Array(2)).map((item, index) => (
+          <Flex
+            key={ index }
+            rowGap={ 3 }
+            flexDirection="column"
+            paddingY={ 6 }
+            borderTopWidth="1px"
+            borderColor={ borderColor }
+            _last={{
+              borderBottomWidth: '1px',
+            }}
+          >
+            <Flex h={ 6 }>
+              <Skeleton w="100px" mr={ 2 }/>
+              <Skeleton w="90px"/>
+            </Flex>
+            <Flex h={ 6 }>
+              <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+              <Skeleton flexGrow={ 1 } mr={ 3 }/>
+              <Skeleton w={ 6 } mr={ 3 }/>
+              <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+              <Skeleton flexGrow={ 1 } mr={ 3 }/>
+            </Flex>
+            <Flex h={ 6 }>
+              <Skeleton w="70px" mr={ 2 }/>
+              <Skeleton w="30px"/>
+            </Flex>
+          </Flex>
+        )) }
+      </Box>
+    </>
+  );
+};
+
+export default TxInternalsSkeletonMobile;

ui/tx/internals/TxInternalsTable.tsx

 import { Table, Thead, Tbody, Tr, Th, TableContainer, Link, Icon } from '@chakra-ui/react';
 import React from 'react';
 
-import type { data as txData } from 'data/txInternal';
+import type { InternalTransaction } from 'types/api/internalTransaction';
+
 import arrowIcon from 'icons/arrows/east.svg';
 import useNetwork from 'lib/hooks/useNetwork';
 import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
 import type { Sort, SortField } from 'ui/tx/internals/utils';
 
 interface Props {
-  data: typeof txData;
+  data: Array<InternalTransaction>;
   sort: Sort | undefined;
   onSortToggle: (field: SortField) => () => void;
 }
@@ -23,26 +24,27 @@ const TxInternalsTable = ({ data, sort, onSortToggle }: Props) => {
         <Thead>
           <Tr>
             <Th width="28%">Type</Th>
-            <Th width="20%">From</Th>
+            <Th width="28%">From</Th>
             <Th width="24px" px={ 0 }/>
-            <Th width="20%">To</Th>
+            <Th width="28%">To</Th>
             <Th width="16%" isNumeric>
               <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('value') } columnGap={ 1 }>
                 { sort?.includes('value') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> }
                 Value { selectedNetwork?.currency }
               </Link>
             </Th>
-            <Th width="16%" isNumeric>
+            { /* no gas limit in api yet */ }
+            { /* <Th width="16%" isNumeric>
               <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('gas-limit') } columnGap={ 1 }>
                 { sort?.includes('gas-limit') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> }
                 Gas limit
               </Link>
-            </Th>
+            </Th> */ }
           </Tr>
         </Thead>
         <Tbody>
           { data.map((item) => (
-            <TxInternalsTableItem key={ item.id } { ...item }/>
+            <TxInternalsTableItem key={ item.transaction_hash } { ...item }/>
           )) }
         </Tbody>
       </Table>

ui/tx/internals/TxInternalsTableItem.tsx

 import { Tr, Td, Tag, Icon, Box } from '@chakra-ui/react';
 import React from 'react';
 
+import type { InternalTransaction } from 'types/api/internalTransaction';
+
 import rightArrowIcon from 'icons/arrows/east.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -8,16 +10,9 @@ import AddressLink from 'ui/shared/address/AddressLink';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
-interface Props {
-  type: string;
-  status: 'success' | 'failed' | 'pending';
-  from: { hash: string; alias?: string};
-  to: { hash: string; alias?: string};
-  value: number;
-  gasLimit: number;
-}
+type Props = InternalTransaction
 
-const TxInternalTableItem = ({ type, status, from, to, value, gasLimit }: Props) => {
+const TxInternalTableItem = ({ type, from, to, value, success, error }: Props) => {
   const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
 
   return (
@@ -28,12 +23,12 @@ const TxInternalTableItem = ({ type, status, from, to, value, gasLimit }: Props)
             <Tag colorScheme="cyan" mr={ 5 }>{ typeTitle }</Tag>
           </Box>
         ) }
-        <TxStatus status={ status }/>
+        <TxStatus status={ success ? 'ok' : 'error' } errorText={ error }/>
       </Td>
       <Td>
         <Address>
           <AddressIcon hash={ from.hash }/>
-          <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.alias } flexGrow={ 1 }/>
+          <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 }/>
         </Address>
       </Td>
       <Td px={ 0 }>
@@ -42,15 +37,16 @@ const TxInternalTableItem = ({ type, status, from, to, value, gasLimit }: Props)
       <Td>
         <Address>
           <AddressIcon hash={ to.hash }/>
-          <AddressLink hash={ to.hash } alias={ to.alias } fontWeight="500" ml={ 2 }/>
+          <AddressLink hash={ to.hash } alias={ to.name } fontWeight="500" ml={ 2 }/>
         </Address>
       </Td>
       <Td isNumeric>
         { value }
       </Td>
-      <Td isNumeric>
+      { /* no gas limit in api yet */ }
+      { /* <Td isNumeric>
         { gasLimit.toLocaleString('en') }
-      </Td>
+      </Td> */ }
     </Tr>
   );
 };

ui/tx/internals/utils.ts

-import type { TxInternalsType } from 'types/api/tx';
+import type { TxInternalsType } from 'types/api/internalTransaction';
 
 export type Sort = 'value-asc' | 'value-desc' | 'gas-limit-asc' | 'gas-limit-desc';
 export type SortField = 'value' | 'gas-limit';
@@ -10,10 +10,10 @@ interface TxInternalsTypeItem {
 
 export const TX_INTERNALS_ITEMS: Array<TxInternalsTypeItem> = [
   { title: 'Call', id: 'call' },
-  { title: 'Delegate call', id: 'delegate_call' },
-  { title: 'Static call', id: 'static_call' },
+  { title: 'Delegate call', id: 'delegatecall' },
+  { title: 'Static call', id: 'staticcall' },
   { title: 'Create', id: 'create' },
   { title: 'Create2', id: 'create2' },
-  { title: 'Self-destruct', id: 'self_destruct' },
+  { title: 'Self-destruct', id: 'selfdestruct' },
   { title: 'Reward', id: 'reward' },
 ];

ui/tx/logs/TxLogItem.tsx

 import { Text, Grid, GridItem, Link, Tooltip, Button, Icon, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import type { Log } from 'types/api/log';
+
 import searchIcon from 'icons/search.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -8,12 +10,7 @@ import AddressLink from 'ui/shared/address/AddressLink';
 import TxLogTopic from 'ui/tx/logs/TxLogTopic';
 import DecodedInputData from 'ui/tx/TxDecodedInputData';
 
-interface Props {
-  address: string;
-  topics: Array<{ hex: string }>;
-  data: string;
-  index: number;
-}
+type Props = Log;
 
 const RowHeader = ({ children }: { children: React.ReactNode }) => (
   <GridItem _notFirst={{ my: { base: 4, lg: 0 } }}>
@@ -21,7 +18,8 @@ const RowHeader = ({ children }: { children: React.ReactNode }) => (
   </GridItem>
 );
 
-const TxLogItem = ({ address, index, topics, data }: Props) => {
+const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
+
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
@@ -41,27 +39,31 @@ const TxLogItem = ({ address, index, topics, data }: Props) => {
       <RowHeader>Address</RowHeader>
       <GridItem display="flex" alignItems="center">
         <Address>
-          <AddressIcon hash={ address }/>
-          <AddressLink hash={ address } ml={ 2 }/>
+          <AddressIcon hash={ address.hash }/>
+          <AddressLink hash={ address.hash } alias={ address.name } ml={ 2 }/>
         </Address>
         <Tooltip label="Find matches topic">
-          <Link ml={ 2 } display="inline-flex">
+          <Link ml={ 2 } mr={{ base: 9, lg: 0 }} display="inline-flex">
             <Icon as={ searchIcon } boxSize={ 5 }/>
           </Link>
         </Tooltip>
         <Tooltip label="Log index">
-          <Button variant="outline" colorScheme="gray" isActive ml={{ base: 9, lg: 'auto' }} size="sm" fontWeight={ 400 }>
+          <Button variant="outline" colorScheme="gray" isActive ml="auto" size="sm" fontWeight={ 400 }>
             { index }
           </Button>
         </Tooltip>
       </GridItem>
-      <RowHeader>Decode input data</RowHeader>
-      <GridItem>
-        <DecodedInputData/>
-      </GridItem>
+      { decoded && (
+        <>
+          <RowHeader>Decode input data</RowHeader>
+          <GridItem>
+            <DecodedInputData data={ decoded }/>
+          </GridItem>
+        </>
+      ) }
       <RowHeader>Topics</RowHeader>
       <GridItem>
-        { topics.map((item, index) => <TxLogTopic key={ index } { ...item } index={ index }/>) }
+        { topics.filter(Boolean).map((item, index) => <TxLogTopic key={ index } hex={ item } index={ index }/>) }
       </GridItem>
       <RowHeader>Data</RowHeader>
       <GridItem p={ 4 } fontSize="sm" borderRadius="md" bgColor={ dataBgColor }>

ui/tx/logs/TxLogSkeleton.tsx

+import { Flex, Grid, GridItem, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const RowHeader = () => (
+  <GridItem _notFirst={{ my: { base: 4, lg: 0 } }} _first={{ alignSelf: 'center' }}>
+    <Skeleton h={ 6 } borderRadius="full" w="150px"/>
+  </GridItem>
+);
+
+const TopicRow = () => (
+  <Flex columnGap={ 3 }>
+    <SkeletonCircle size="6"/>
+    <Skeleton h={ 6 } w="70px" borderRadius="full"/>
+    <Skeleton h={ 6 } flexGrow={ 1 } borderRadius="full"/>
+  </Flex>
+);
+
+const TxLogSkeleton = () => {
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  return (
+    <Grid
+      gap={{ base: 2, lg: 8 }}
+      templateColumns={{ base: '1fr', lg: '200px 1fr' }}
+      py={ 8 }
+      _notFirst={{
+        borderTopWidth: '1px',
+        borderTopColor: borderColor,
+      }}
+      _first={{
+        pt: 0,
+      }}
+    >
+      <RowHeader/>
+      <GridItem display="flex" alignItems="center">
+        <SkeletonCircle size="6"/>
+        <Skeleton h={ 6 } flexGrow={ 1 } borderRadius="full" ml={ 2 } mr={ 9 }/>
+        <Skeleton h={ 8 } w={ 8 } borderRadius="base"/>
+      </GridItem>
+      <RowHeader/>
+      <GridItem>
+        <Skeleton h="150px" w="100%" borderRadius="base"/>
+      </GridItem>
+      <RowHeader/>
+      <GridItem display="flex" flexDir="column" rowGap={ 3 }>
+        <TopicRow/>
+        <TopicRow/>
+        <TopicRow/>
+      </GridItem>
+      <RowHeader/>
+      <GridItem>
+        <Skeleton h="60px" w="100%" borderRadius="base"/>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default TxLogSkeleton;

ui/tx/logs/TxLogTopic.tsx

@@ -23,22 +23,18 @@ const TxLogTopic = ({ hex, index }: Props) => {
       <Button variant="outline" colorScheme="gray" isActive size="xs" fontWeight={ 400 } mr={ 3 } w={ 6 }>
         { index }
       </Button>
-      { /* temporary condition juse to show different states of the component */ }
-      { /* delete when ther will be real data */ }
-      { index > 0 && (
-        <Select
-          size="sm"
-          borderRadius="base"
-          value={ selectedDataType }
-          onChange={ handleSelectChange }
-          focusBorderColor="none"
-          w="75px"
-          mr={ 3 }
-          flexShrink={ 0 }
-        >
-          { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
-        </Select>
-      ) }
+      <Select
+        size="sm"
+        borderRadius="base"
+        value={ selectedDataType }
+        onChange={ handleSelectChange }
+        focusBorderColor="none"
+        w="75px"
+        mr={ 3 }
+        flexShrink={ 0 }
+      >
+        { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
+      </Select>
       <Box overflow="hidden" whiteSpace="nowrap">
         <HashStringShortenDynamic hash={ hex }/>
       </Box>

yarn.lock

@@ -1261,6 +1261,348 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@ethersproject/abi@5.7.0", "@ethersproject/abi@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.7.0.tgz#b3f3e045bbbeed1af3947335c247ad625a44e449"
+  integrity sha512-351ktp42TiRcYB3H1OP8yajPeAQstMW/yCFokj/AthP9bLHzQFPlOrxOcwYEDkUAICmOHljvN4K39OMTMUa9RA==
+  dependencies:
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/abstract-provider@5.7.0", "@ethersproject/abstract-provider@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-provider/-/abstract-provider-5.7.0.tgz#b0a8550f88b6bf9d51f90e4795d48294630cb9ef"
+  integrity sha512-R41c9UkchKCpAqStMYUpdunjo3pkEvZC3FAwZn5S5MGbXoMQOHIdHItezTETxAO5bevtMApSyEhn9+CHcDsWBw==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/networks" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/web" "^5.7.0"
+
+"@ethersproject/abstract-signer@5.7.0", "@ethersproject/abstract-signer@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-signer/-/abstract-signer-5.7.0.tgz#13f4f32117868452191a4649723cb086d2b596b2"
+  integrity sha512-a16V8bq1/Cz+TGCkE2OPMTOUDLS3grCpdjoJCYNnVBbdYEMSgKrU0+B90s8b6H+ByYTBZN7a3g76jdIJi7UfKQ==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+
+"@ethersproject/address@5.7.0", "@ethersproject/address@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/address/-/address-5.7.0.tgz#19b56c4d74a3b0a46bfdbb6cfcc0a153fc697f37"
+  integrity sha512-9wYhYt7aghVGo758POM5nqcOMaE168Q6aRLJZwUmiqSrAungkG74gSSeKEIR7ukixesdRZGPgVqme6vmxs1fkA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/rlp" "^5.7.0"
+
+"@ethersproject/base64@5.7.0", "@ethersproject/base64@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/base64/-/base64-5.7.0.tgz#ac4ee92aa36c1628173e221d0d01f53692059e1c"
+  integrity sha512-Dr8tcHt2mEbsZr/mwTPIQAf3Ai0Bks/7gTw9dSqk1mQvhW3XvRlmDJr/4n+wg1JmCl16NZue17CDh8xb/vZ0sQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+
+"@ethersproject/basex@5.7.0", "@ethersproject/basex@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/basex/-/basex-5.7.0.tgz#97034dc7e8938a8ca943ab20f8a5e492ece4020b"
+  integrity sha512-ywlh43GwZLv2Voc2gQVTKBoVQ1mti3d8HK5aMxsfu/nRDnMmNqaSJ3r3n85HBByT8OpoY96SXM1FogC533T4zw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+
+"@ethersproject/bignumber@5.7.0", "@ethersproject/bignumber@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bignumber/-/bignumber-5.7.0.tgz#e2f03837f268ba655ffba03a57853e18a18dc9c2"
+  integrity sha512-n1CAdIHRWjSucQO3MC1zPSVgV/6dy/fjL9pMrPP9peL+QxEg9wOsVqwD4+818B6LUEtaXzVHQiuivzRoxPxUGw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    bn.js "^5.2.1"
+
+"@ethersproject/bytes@5.7.0", "@ethersproject/bytes@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.7.0.tgz#a00f6ea8d7e7534d6d87f47188af1148d71f155d"
+  integrity sha512-nsbxwgFXWh9NyYWo+U8atvmMsSdKJprTcICAkvbBffT75qDocbuggBU0SJiVK2MuTrp0q+xvLkTnGMPK1+uA9A==
+  dependencies:
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/constants@5.7.0", "@ethersproject/constants@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/constants/-/constants-5.7.0.tgz#df80a9705a7e08984161f09014ea012d1c75295e"
+  integrity sha512-DHI+y5dBNvkpYUMiRQyxRBYBefZkJfo70VUkUAsRjcPs47muV9evftfZ0PJVCXYbAiCgght0DtcF9srFQmIgWA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+
+"@ethersproject/contracts@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/contracts/-/contracts-5.7.0.tgz#c305e775abd07e48aa590e1a877ed5c316f8bd1e"
+  integrity sha512-5GJbzEU3X+d33CdfPhcyS+z8MzsTrBGk/sc+G+59+tPa9yFkl6HQ9D6L0QMgNTA9q8dT0XKxxkyp883XsQvbbg==
+  dependencies:
+    "@ethersproject/abi" "^5.7.0"
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+
+"@ethersproject/hash@5.7.0", "@ethersproject/hash@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hash/-/hash-5.7.0.tgz#eb7aca84a588508369562e16e514b539ba5240a7"
+  integrity sha512-qX5WrQfnah1EFnO5zJv1v46a8HW0+E5xuBBDTwMFZLuVTx0tbU2kkx15NqdjxecrLGatQN9FGQKpb1FKdHCt+g==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/base64" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/hdnode@5.7.0", "@ethersproject/hdnode@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hdnode/-/hdnode-5.7.0.tgz#e627ddc6b466bc77aebf1a6b9e47405ca5aef9cf"
+  integrity sha512-OmyYo9EENBPPf4ERhR7oj6uAtUAhYGqOnIS+jE5pTXvdKBS99ikzq1E7Iv0ZQZ5V36Lqx1qZLeak0Ra16qpeOg==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/basex" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/pbkdf2" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/signing-key" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/wordlists" "^5.7.0"
+
+"@ethersproject/json-wallets@5.7.0", "@ethersproject/json-wallets@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/json-wallets/-/json-wallets-5.7.0.tgz#5e3355287b548c32b368d91014919ebebddd5360"
+  integrity sha512-8oee5Xgu6+RKgJTkvEMl2wDgSPSAQ9MB/3JYjFV9jlKvcYHUXZC+cQp0njgmxdHkYWn8s6/IqIZYm0YWCjO/0g==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hdnode" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/pbkdf2" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/random" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    aes-js "3.0.0"
+    scrypt-js "3.0.1"
+
+"@ethersproject/keccak256@5.7.0", "@ethersproject/keccak256@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.7.0.tgz#3186350c6e1cd6aba7940384ec7d6d9db01f335a"
+  integrity sha512-2UcPboeL/iW+pSg6vZ6ydF8tCnv3Iu/8tUmLLzWWGzxWKFFqOBQFLo6uLUv6BDrLgCDfN28RJ/wtByx+jZ4KBg==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    js-sha3 "0.8.0"
+
+"@ethersproject/logger@5.7.0", "@ethersproject/logger@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.7.0.tgz#6ce9ae168e74fecf287be17062b590852c311892"
+  integrity sha512-0odtFdXu/XHtjQXJYA3u9G0G8btm0ND5Cu8M7i5vhEcE8/HmF4Lbdqanwyv4uQTr2tx6b7fQRmgLrsnpQlmnig==
+
+"@ethersproject/networks@5.7.1", "@ethersproject/networks@^5.7.0":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/networks/-/networks-5.7.1.tgz#118e1a981d757d45ccea6bb58d9fd3d9db14ead6"
+  integrity sha512-n/MufjFYv3yFcUyfhnXotyDlNdFb7onmkSy8aQERi2PjNcnWQ66xXxa3XlS8nCcA8aJKJjIIMNJTC7tu80GwpQ==
+  dependencies:
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/pbkdf2@5.7.0", "@ethersproject/pbkdf2@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/pbkdf2/-/pbkdf2-5.7.0.tgz#d2267d0a1f6e123f3771007338c47cccd83d3102"
+  integrity sha512-oR/dBRZR6GTyaofd86DehG72hY6NpAjhabkhxgr3X2FpJtJuodEl2auADWBZfhDHgVCbu3/H/Ocq2uC6dpNjjw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+
+"@ethersproject/properties@5.7.0", "@ethersproject/properties@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/properties/-/properties-5.7.0.tgz#a6e12cb0439b878aaf470f1902a176033067ed30"
+  integrity sha512-J87jy8suntrAkIZtecpxEPxY//szqr1mlBaYlQ0r4RCaiD2hjheqF9s1LVE8vVuJCXisjIP+JgtK/Do54ej4Sw==
+  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==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/base64" "^5.7.0"
+    "@ethersproject/basex" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/networks" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/random" "^5.7.0"
+    "@ethersproject/rlp" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/web" "^5.7.0"
+    bech32 "1.1.4"
+    ws "7.4.6"
+
+"@ethersproject/random@5.7.0", "@ethersproject/random@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/random/-/random-5.7.0.tgz#af19dcbc2484aae078bb03656ec05df66253280c"
+  integrity sha512-19WjScqRA8IIeWclFme75VMXSBvi4e6InrUNuaR4s5pTF2qNhcGdCUwdxUVGtDDqC00sDLCO93jPQoDUH4HVmQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/rlp@5.7.0", "@ethersproject/rlp@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/rlp/-/rlp-5.7.0.tgz#de39e4d5918b9d74d46de93af80b7685a9c21304"
+  integrity sha512-rBxzX2vK8mVF7b0Tol44t5Tb8gomOHkj5guL+HhzQ1yBh/ydjGnpw6at+X6Iw0Kp3OzzzkcKp8N9r0W4kYSs9w==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/sha2@5.7.0", "@ethersproject/sha2@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.7.0.tgz#9a5f7a7824ef784f7f7680984e593a800480c9fb"
+  integrity sha512-gKlH42riwb3KYp0reLsFTokByAKoJdgFCwI+CCiX/k+Jm2mbNs6oOaCjYQSlI1+XBVejwH2KrmCbMAT/GnRDQw==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    hash.js "1.1.7"
+
+"@ethersproject/signing-key@5.7.0", "@ethersproject/signing-key@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/signing-key/-/signing-key-5.7.0.tgz#06b2df39411b00bc57c7c09b01d1e41cf1b16ab3"
+  integrity sha512-MZdy2nL3wO0u7gkB4nA/pEf8lu1TlFswPNmy8AiYkfKTdO6eXBJyUdmHO/ehm/htHw9K/qF8ujnTyUAD+Ry54Q==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    bn.js "^5.2.1"
+    elliptic "6.5.4"
+    hash.js "1.1.7"
+
+"@ethersproject/solidity@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/solidity/-/solidity-5.7.0.tgz#5e9c911d8a2acce2a5ebb48a5e2e0af20b631cb8"
+  integrity sha512-HmabMd2Dt/raavyaGukF4XxizWKhKQ24DoLtdNbBmNKUOPqwjsKQSdV9GQtj9CBEea9DlzETlVER1gYeXXBGaA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/sha2" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/strings@5.7.0", "@ethersproject/strings@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/strings/-/strings-5.7.0.tgz#54c9d2a7c57ae8f1205c88a9d3a56471e14d5ed2"
+  integrity sha512-/9nu+lj0YswRNSH0NXYqrh8775XNyEdUQAuf3f+SmOrnVewcJ5SBNAjF7lpgehKi4abvNNXyf+HX86czCdJ8Mg==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/transactions@5.7.0", "@ethersproject/transactions@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/transactions/-/transactions-5.7.0.tgz#91318fc24063e057885a6af13fdb703e1f993d3b"
+  integrity sha512-kmcNicCp1lp8qanMTC3RIikGgoJ80ztTyvtsFvCYpSCfkjhD0jZ2LOrnbcuxuToLIUYYf+4XwD1rP+B/erDIhQ==
+  dependencies:
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/rlp" "^5.7.0"
+    "@ethersproject/signing-key" "^5.7.0"
+
+"@ethersproject/units@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/units/-/units-5.7.0.tgz#637b563d7e14f42deeee39245275d477aae1d8b1"
+  integrity sha512-pD3xLMy3SJu9kG5xDGI7+xhTEmGXlEqXU4OfNapmfnxLVY4EMSSRp7j1k7eezutBPH7RBN/7QPnwR7hzNlEFeg==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/constants" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+
+"@ethersproject/wallet@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wallet/-/wallet-5.7.0.tgz#4e5d0790d96fe21d61d38fb40324e6c7ef350b2d"
+  integrity sha512-MhmXlJXEJFBFVKrDLB4ZdDzxcBxQ3rLyCkhNqVu3CDYvR97E+8r01UgrI+TI99Le+aYm/in/0vp86guJuM7FCA==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.7.0"
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@ethersproject/address" "^5.7.0"
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/hdnode" "^5.7.0"
+    "@ethersproject/json-wallets" "^5.7.0"
+    "@ethersproject/keccak256" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/random" "^5.7.0"
+    "@ethersproject/signing-key" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@ethersproject/wordlists" "^5.7.0"
+
+"@ethersproject/web@5.7.1", "@ethersproject/web@^5.7.0":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/web/-/web-5.7.1.tgz#de1f285b373149bee5928f4eb7bcb87ee5fbb4ae"
+  integrity sha512-Gueu8lSvyjBWL4cYsWsjh6MtMwM0+H4HvqFPZfB6dV8ctbP9zFAO73VG1cMWae0FLPCtz0peKPpZY8/ugJJX2w==
+  dependencies:
+    "@ethersproject/base64" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
+"@ethersproject/wordlists@5.7.0", "@ethersproject/wordlists@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wordlists/-/wordlists-5.7.0.tgz#8fb2c07185d68c3e09eb3bfd6e779ba2774627f5"
+  integrity sha512-S2TFNJNfHWVHNE6cNDjbVlZ6MgE17MIxMbMg2zv3wn+3XSJGosL1m9ZVv3GXCf/2ymSsQ+hRI5IzoMJTG6aoVA==
+  dependencies:
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/logger" "^5.7.0"
+    "@ethersproject/properties" "^5.7.0"
+    "@ethersproject/strings" "^5.7.0"
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
@@ -1867,6 +2209,11 @@ acorn@^8.7.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
   integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
 
+aes-js@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
+  integrity sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -2103,11 +2450,26 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+bech32@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/bech32/-/bech32-1.1.4.tgz#e38c9f37bf179b8eb16ae3a772b40c356d4832e9"
+  integrity sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
   integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
 
+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+  integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -2144,6 +2506,11 @@ braces@^3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==
+
 browserslist@^4.20.2:
   version "4.21.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
@@ -2615,6 +2982,19 @@ electron-to-chromium@^1.4.202:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.225.tgz#3e27bdd157cbaf19768141f2e0f0f45071e52338"
   integrity sha512-ICHvGaCIQR3P88uK8aRtx8gmejbVJyC6bB4LEC3anzBrIzdzC7aiZHY4iFfXhN4st6I7lMO0x4sgBHf/7kBvRw==
 
+elliptic@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -2952,6 +3332,42 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+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==
+  dependencies:
+    "@ethersproject/abi" "5.7.0"
+    "@ethersproject/abstract-provider" "5.7.0"
+    "@ethersproject/abstract-signer" "5.7.0"
+    "@ethersproject/address" "5.7.0"
+    "@ethersproject/base64" "5.7.0"
+    "@ethersproject/basex" "5.7.0"
+    "@ethersproject/bignumber" "5.7.0"
+    "@ethersproject/bytes" "5.7.0"
+    "@ethersproject/constants" "5.7.0"
+    "@ethersproject/contracts" "5.7.0"
+    "@ethersproject/hash" "5.7.0"
+    "@ethersproject/hdnode" "5.7.0"
+    "@ethersproject/json-wallets" "5.7.0"
+    "@ethersproject/keccak256" "5.7.0"
+    "@ethersproject/logger" "5.7.0"
+    "@ethersproject/networks" "5.7.1"
+    "@ethersproject/pbkdf2" "5.7.0"
+    "@ethersproject/properties" "5.7.0"
+    "@ethersproject/providers" "5.7.1"
+    "@ethersproject/random" "5.7.0"
+    "@ethersproject/rlp" "5.7.0"
+    "@ethersproject/sha2" "5.7.0"
+    "@ethersproject/signing-key" "5.7.0"
+    "@ethersproject/solidity" "5.7.0"
+    "@ethersproject/strings" "5.7.0"
+    "@ethersproject/transactions" "5.7.0"
+    "@ethersproject/units" "5.7.0"
+    "@ethersproject/wallet" "5.7.0"
+    "@ethersproject/web" "5.7.1"
+    "@ethersproject/wordlists" "5.7.0"
+
 execa@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-6.1.0.tgz#cea16dee211ff011246556388effa0818394fb20"
@@ -3426,11 +3842,28 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
 hey-listen@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
+hmac-drbg@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
 hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -3492,7 +3925,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3750,6 +4183,11 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -4089,6 +4527,16 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
+
+minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==
+
 minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -4911,6 +5359,11 @@ scheduler@^0.22.0:
   dependencies:
     loose-envify "^1.1.0"
 
+scrypt-js@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312"
+  integrity sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==
+
 scslre@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/scslre/-/scslre-0.1.6.tgz#71a2832e4bf3a9254973a04fbed90aec94f75757"
@@ -5604,6 +6057,11 @@ write-file-atomic@^2.3.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+ws@7.4.6:
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
+
 xml2js@0.4.17:
   version "0.4.17"
   resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.17.tgz#17be93eaae3f3b779359c795b419705a8817e868"