Merge pull request #511 from blockscout/contract-write

сontract write (part 2)

.env.template

@@ -51,3 +51,4 @@ NEXT_PUBLIC_API_PORT=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_PORT__
 # external services config
 NEXT_PUBLIC_SENTRY_DSN=__PLACEHOLDER_FOR_NEXT_PUBLIC_SENTRY_DSN__
 NEXT_PUBLIC_AUTH0_CLIENT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_AUTH0_CLIENT_ID__
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID__

Dockerfile

@@ -6,6 +6,7 @@ WORKDIR /app
 
 # Install dependencies based on the preferred package manager
 COPY package.json yarn.lock ./
+RUN apk add git
 RUN yarn --frozen-lockfile
 
 # Rebuild the source code only when needed

README.md

@@ -125,6 +125,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_SENTRY_DSN | `string` *(optional)* | Client key for your Sentry.io app | `<secret>` |
 | SENTRY_CSP_REPORT_URI | `string` *(optional)* | URL for sending CSP-reports to your Sentry.io app | `<secret>` |
 | NEXT_PUBLIC_AUTH0_CLIENT_ID | `string` *(optional)* | Client id for [Auth0](https://auth0.com/) provider | `<secret>` |
+| NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Project id for [WalletConnect](https://docs.walletconnect.com/2.0/web3modal/react/installation#obtain-project-id) integration | `<secret>` |
 
 ### Marketplace app configuration properties
 

configs/app/config.ts

@@ -115,6 +115,9 @@ const config = Object.freeze({
     showGasTracker: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER) === 'false' ? false : true,
     showAvgBlockTime: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME) === 'false' ? false : true,
   },
+  walletConnect: {
+    projectId: getEnvValue(process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID),
+  },
 });
 
 export default config;

configs/envs/.env.goerli

@@ -3,11 +3,11 @@ NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Ethereum','url':'https://blockscout.com
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/ethereum/goerli/transaction','address':'/ethereum/ethereum/goerli/address'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address'}}]
 
 # network config
-NEXT_PUBLIC_NETWORK_NAME=Ethereum
+NEXT_PUBLIC_NETWORK_NAME=Goerli
 NEXT_PUBLIC_NETWORK_SHORT_NAME=Goerli
 NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=ethereum
 NEXT_PUBLIC_NETWORK_TYPE=goerli
-NEXT_PUBLIC_NETWORK_ID=420
+NEXT_PUBLIC_NETWORK_ID=5
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18

lib/csp/getCspPolicy.ts

@@ -68,8 +68,16 @@ function makePolicyMap() {
       appConfig.api.socket,
       appConfig.statsApi.endpoint,
 
+      // chain RPC server
+      appConfig.network.rpcUrl,
+
       // ad
       'request-global.czilladx.com',
+
+      // walletconnect
+      '*.walletconnect.com',
+      'wss://*.bridge.walletconnect.org',
+      'wss://www.walletlink.org',
     ],
 
     'script-src': [
@@ -130,6 +138,9 @@ function makePolicyMap() {
       // ad
       'servedbyadbutler.com',
       'cdn.coinzilla.io',
+
+      // walletconnect
+      '*.walletconnect.com',
     ],
 
     'font-src': [

mocks/contract/info.ts

+/* eslint-disable max-len */
+import type { SmartContract } from 'types/api/contract';
+
+export const verified: Partial<SmartContract> = {
+  abi: [ { anonymous: false, inputs: [ { indexed: true, internalType: 'address', name: 'src', type: 'address' }, { indexed: true, internalType: 'address', name: 'guy', type: 'address' }, { indexed: false, internalType: 'uint256', name: 'wad', type: 'uint256' } ], name: 'Approval', type: 'event' } ],
+  can_be_visualized_via_sol2uml: true,
+  compiler_version: 'v0.5.16+commit.9c3226ce',
+  constructor_args: 'constructor_args',
+  creation_bytecode: 'creation_bytecode',
+  deployed_bytecode: 'deployed_bytecode',
+  compiler_settings: 'compiler_settings',
+  evm_version: 'default',
+  is_verified: true,
+  name: 'WPOA',
+  optimization_enabled: true,
+  optimization_runs: 1500,
+  source_code: 'source_code',
+  verified_at: '2021-08-03T10:40:41.679421Z',
+  decoded_constructor_args: [
+    [ '0xc59615da2da226613b1c78f0c6676cac497910bc', { internalType: 'address', name: '_token', type: 'address' } ],
+    [ '1800', { internalType: 'uint256', name: '_duration', type: 'uint256' } ],
+    [ '900000000', { internalType: 'uint256', name: '_totalSupply', type: 'uint256' } ],
+  ],
+  external_libraries: [
+    { address_hash: '0xa62744BeE8646e237441CDbfdedD3458861748A8', name: 'Sol' },
+    { address_hash: '0xa62744BeE8646e237441CDbfdedD3458861748A8', name: 'math' },
+  ],
+};
+
+export const withMultiplePaths: Partial<SmartContract> = {
+  ...verified,
+  file_path: './simple_storage.sol',
+  additional_sources: [
+    {
+      file_path: 'contracts/1_Storage.sol',
+      source_code: '// SPDX-License-Identifier: GPL-3.0 \n pragma solidity >=0.7.0 <0.9.0;      \n           contract Storage {\n //2112313123; \nuint256 number; \n function store(uint256 num) public {\nnumber = num;\n}\n function retrieve() public view returns (uint256)\n {\nreturn number;\n}\n}',
+    },
+  ],
+};
+
+export const verifiedViaSourcify: Partial<SmartContract> = {
+  ...verified,
+  is_verified_via_sourcify: true,
+  is_fully_verified: false,
+  is_partially_verified: true,
+  sourcify_repo_url: 'https://repo.sourcify.dev/contracts//full_match/99/0x51891596E158b2857e5356DC847e2D15dFbCF2d0/',
+};
+
+export const withTwinAddress: Partial<SmartContract> = {
+  ...verified,
+  is_verified: false,
+  verified_twin_address_hash: '0xa62744bee8646e237441cdbfdedd3458861748a8',
+};
+
+export const withProxyAddress: Partial<SmartContract> = {
+  ...verified,
+  is_verified: false,
+  verified_twin_address_hash: '0xa62744bee8646e237441cdbfdedd3458861748a8',
+  minimal_proxy_address_hash: '0xa62744bee8646e237441cdbfdedd3458861748a8',
+};
+
+export const selfDestructed: Partial<SmartContract> = {
+  ...verified,
+  is_self_destructed: true,
+};
+
+export const withChangedByteCode: Partial<SmartContract> = {
+  ...verified,
+  is_changed_bytecode: true,
+};
+
+export const nonVerified: Partial<SmartContract> = {
+  is_verified: false,
+  creation_bytecode: 'creation_bytecode',
+  deployed_bytecode: 'deployed_bytecode',
+};

mocks/contract/methods.ts

+import type {
+  SmartContractQueryMethodReadError,
+  SmartContractQueryMethodReadSuccess,
+  SmartContractReadMethod,
+  SmartContractWriteMethod,
+} from 'types/api/contract';
+
+export const read: Array<SmartContractReadMethod> = [
+  {
+    constant: true,
+    inputs: [
+      { internalType: 'address', name: '', type: 'address' },
+    ],
+    method_id: '70a08231',
+    name: 'balanceOf',
+    outputs: [
+      { internalType: 'uint256', name: '', type: 'uint256', value: '' },
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    constant: true,
+    inputs: [],
+    method_id: '06fdde03',
+    name: 'name',
+    outputs: [
+      { internalType: 'string', name: '', type: 'string', value: 'Wrapped POA' },
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    constant: true,
+    inputs: [],
+    method_id: '18160ddd',
+    name: 'totalSupply',
+    outputs: [
+      { internalType: 'uint256', name: '', type: 'uint256', value: '139905710421584994690047413' },
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    constant: true,
+    error: '(-32015) VM execution error. (revert)',
+    inputs: [],
+    method_id: 'df0ad3de',
+    name: 'upgradeabilityAdmin',
+    outputs: [
+      { name: '', type: 'address', value: '' },
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    constant: true,
+    inputs: [],
+    method_id: '165ec2e2',
+    name: 'arianeeWhitelist',
+    outputs: [
+      {
+        name: '',
+        type: 'address',
+        value: '0xd3eee7f8e8021db24825c3457d5479f2b57f40ef',
+      },
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
+];
+
+export const readResultSuccess: SmartContractQueryMethodReadSuccess = {
+  is_error: false,
+  result: {
+    names: [ 'uint256' ],
+    output: [
+      { type: 'uint256', value: '42' },
+    ],
+  },
+};
+
+export const readResultError: SmartContractQueryMethodReadError = {
+  is_error: true,
+  result: {
+    message: 'Some shit happened',
+    code: -32017,
+  },
+};
+
+export const write: Array<SmartContractWriteMethod> = [
+  {
+    payable: true,
+    stateMutability: 'payable',
+    type: 'fallback',
+  },
+  {
+    constant: false,
+    inputs: [
+      { internalType: 'address', name: 'guy', type: 'address' },
+      { internalType: 'uint256', name: 'wad', type: 'uint256' },
+    ],
+    name: 'approve',
+    outputs: [
+      { internalType: 'bool', name: '', type: 'bool' },
+    ],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    constant: false,
+    inputs: [
+      { internalType: 'address', name: 'src', type: 'address' },
+      { internalType: 'address', name: 'dst', type: 'address' },
+    ],
+    name: 'transferFrom',
+    outputs: [
+      { internalType: 'bool', name: '', type: 'bool' },
+    ],
+    payable: true,
+    stateMutability: 'payable',
+    type: 'function',
+  },
+  {
+    stateMutability: 'payable',
+    type: 'receive',
+  },
+  {
+    constant: false,
+    inputs: [],
+    name: 'pause',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: '_from', type: 'address' },
+      { name: '_to', type: 'address' },
+      { name: '_tokenId', type: 'uint256' },
+      { name: '_data', type: 'bytes' },
+    ],
+    name: 'safeTransferFrom',
+    outputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: '_tokenId', type: 'uint256' },
+      { name: '_hash', type: 'bytes32' },
+      { name: '_keepRequestToken', type: 'bool' },
+      { name: '_newOwner', type: 'address' },
+      { name: '_signature', type: 'bytes' },
+    ],
+    name: 'requestToken',
+    outputs: [
+      { name: 'reward', type: 'uint256' },
+    ],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: '_tokenId', type: 'uint256' },
+      { name: '_imprint', type: 'bytes32' },
+      { name: '_uri', type: 'string' },
+      { name: '_initialKey', type: 'address' },
+      { name: '_tokenRecoveryTimestamp', type: 'uint256' },
+      { name: '_initialKeyIsRequestKey', type: 'bool' },
+    ],
+    name: 'hydrateToken',
+    outputs: [
+      { name: '', type: 'uint256' },
+    ],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+];

package.json

@@ -21,7 +21,7 @@
     "lint:tsc": "./node_modules/.bin/tsc -p ./tsconfig.json",
     "prepare": "husky install",
     "format-svg": "./node_modules/.bin/svgo -r ./icons",
-    "test:pw": "./playwright/make-envs-script.sh && playwright test -c playwright-ct.config.ts",
+    "test:pw": "./playwright/make-envs-script.sh && NODE_OPTIONS=\"--max-old-space-size=4096\" playwright test -c playwright-ct.config.ts",
     "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
     "test:pw:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.28.0-focal ./playwright/run-tests.sh",
     "test:jest": "jest",
@@ -40,6 +40,8 @@
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
+    "@web3modal/ethereum": "^2.0.0-rc.2",
+    "@web3modal/react": "^2.0.0-rc.2",
     "ace-builds": "^1.14.0",
     "bignumber.js": "^9.1.0",
     "d3": "^7.6.1",
@@ -64,7 +66,8 @@
     "react-identicons": "^1.2.5",
     "react-jazzicon": "^1.0.4",
     "react-scroll": "^1.8.7",
-    "use-font-face-observer": "^1.2.1"
+    "use-font-face-observer": "^1.2.1",
+    "wagmi": "^0.10.6"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "^1.28.0",

playwright-ct.config.ts

@@ -51,6 +51,12 @@ const config: PlaywrightTestConfig = {
           exportAsDefault: true,
         }),
       ],
+      build: {
+        // it actually frees some memory that vite needs a lot
+        // https://github.com/storybookjs/builder-vite/issues/409#issuecomment-1152848986
+        sourcemap: false,
+        minify: false,
+      },
     },
   },
 

playwright/TestApp.tsx

 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { providers } from 'ethers';
 import React from 'react';
+import { createClient, WagmiConfig } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+import { MockConnector } from 'wagmi/connectors/mock';
 
 import { AppContextProvider } from 'lib/appContext';
 import type { Props as PageProps } from 'lib/next/getServerSideProps';
@@ -23,6 +27,29 @@ const defaultAppContext = {
   },
 };
 
+// >>> Web3 stuff
+const provider = new providers.JsonRpcProvider(
+  'http://localhost:8545',
+  {
+    name: 'POA',
+    chainId: 99,
+  },
+);
+
+const connector = new MockConnector({
+  chains: [ mainnet ],
+  options: {
+    signer: provider.getSigner(),
+  },
+});
+
+const wagmiClient = createClient({
+  autoConnect: true,
+  connectors: [ connector ],
+  provider,
+});
+// <<<<
+
 const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props) => {
   const [ queryClient ] = React.useState(() => new QueryClient({
     defaultOptions: {
@@ -38,7 +65,9 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
       <QueryClientProvider client={ queryClient }>
         <SocketProvider url={ withSocket ? `ws://localhost:${ PORT }` : undefined }>
           <AppContextProvider { ...appContext }>
+            <WagmiConfig client={ wagmiClient }>
               { children }
+            </WagmiConfig>
           </AppContextProvider>
         </SocketProvider>
       </QueryClientProvider>

theme/utils/getOutlinedFieldStyles.ts

@@ -30,6 +30,10 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       _hover: {
         borderColor: 'transparent',
       },
+      ':-webkit-autofill': {
+        // background color for disabled input which value was selected from browser autocomplete popup
+        '-webkit-box-shadow': `0 0 0px 1000px ${ mode('rgba(16, 17, 18, 0.08)', 'rgba(255, 255, 255, 0.08)')(props) } inset`,
+      },
     },
     _invalid: {
       borderColor: getColor(theme, errorColor),

types/api/contract.ts

+import type { Abi } from 'abitype';
+
+export type SmartContractMethodArgType = 'address' | 'uint256' | 'bool' | 'string' | 'bytes' | 'bytes32';
+export type SmartContractMethodStateMutability = 'view' | 'nonpayable' | 'payable';
+
 export interface SmartContract {
   deployed_bytecode: string | null;
   creation_bytecode: string | null;
   is_self_destructed: boolean;
-  abi: Array<Record<string, unknown>> | null;
+  abi: Abi | null;
   compiler_version: string | null;
   evm_version: string | null;
   optimization_enabled: boolean | null;
@@ -10,8 +15,38 @@ export interface SmartContract {
   name: string | null;
   verified_at: string | null;
   is_verified: boolean | null;
+  is_changed_bytecode: boolean | null;
+  // sourcify info >>>
+  is_verified_via_sourcify: boolean | null;
+  is_fully_verified: boolean | null;
+  is_partially_verified: boolean | null;
+  sourcify_repo_url: string | null;
+  // <<<<
   source_code: string | null;
+  constructor_args: string | null;
+  decoded_constructor_args: Array<SmartContractDecodedConstructorArg> | null;
   can_be_visualized_via_sol2uml: boolean | null;
+  is_vyper_contract: boolean | null;
+  file_path: string;
+  additional_sources: Array<{ file_path: string; source_code: string }>;
+  external_libraries: Array<SmartContractExternalLibrary> | null;
+  compiler_settings: unknown;
+  verified_twin_address_hash: string | null;
+  minimal_proxy_address_hash: string | null;
+}
+
+export type SmartContractDecodedConstructorArg = [
+  string,
+  {
+    internalType: SmartContractMethodArgType;
+    name: string;
+    type: SmartContractMethodArgType;
+  }
+]
+
+export interface SmartContractExternalLibrary {
+  address_hash: string;
+  name: string;
 }
 
 export interface SmartContractMethodBase {
@@ -19,9 +54,10 @@ export interface SmartContractMethodBase {
   outputs: Array<SmartContractMethodOutput>;
   constant: boolean;
   name: string;
-  stateMutability: string;
+  stateMutability: SmartContractMethodStateMutability;
   type: 'function';
   payable: boolean;
+  error?: string;
 }
 
 export interface SmartContractReadMethod extends SmartContractMethodBase {
@@ -29,21 +65,51 @@ export interface SmartContractReadMethod extends SmartContractMethodBase {
 }
 
 export interface SmartContractWriteFallback {
-  payable: true;
+  payable?: true;
   stateMutability: 'payable';
   type: 'fallback';
 }
 
-export type SmartContractWriteMethod = SmartContractMethodBase | SmartContractWriteFallback;
+export interface SmartContractWriteReceive {
+  payable?: true;
+  stateMutability: 'payable';
+  type: 'receive';
+}
+
+export type SmartContractWriteMethod = SmartContractMethodBase | SmartContractWriteFallback | SmartContractWriteReceive;
 
 export type SmartContractMethod = SmartContractReadMethod | SmartContractWriteMethod;
 
 export interface SmartContractMethodInput {
-  internalType: string;
+  internalType?: SmartContractMethodArgType;
   name: string;
-  type: string;
+  type: SmartContractMethodArgType;
 }
 
 export interface SmartContractMethodOutput extends SmartContractMethodInput {
   value?: string;
 }
+
+export interface SmartContractQueryMethodReadSuccess {
+  is_error: false;
+  result: {
+    names: Array<string>;
+    output: Array<{
+      type: string;
+      value: string;
+    }>;
+  };
+}
+
+export interface SmartContractQueryMethodReadError {
+  is_error: true;
+  result: {
+    code: number;
+    message: string;
+    raw?: string;
+  } | {
+    error: string;
+  };
+}
+
+export type SmartContractQueryMethodRead = SmartContractQueryMethodReadSuccess | SmartContractQueryMethodReadError;

ui/address/AddressContract.tsx

+import { useColorModeValue, useToken } from '@chakra-ui/react';
+import {
+  EthereumClient,
+  modalConnectors,
+  walletConnectProvider,
+} from '@web3modal/ethereum';
+import { Web3Modal } from '@web3modal/react';
 import React from 'react';
+import type { Chain } from 'wagmi';
+import { configureChains, createClient, WagmiConfig } from 'wagmi';
 
 import type { RoutedSubTab } from 'ui/shared/RoutedTabs/types';
 
+import appConfig from 'configs/app/config';
+import { ContractContextProvider } from 'ui/address/contract/context';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
 interface Props {
   tabs: Array<RoutedSubTab>;
 }
 
+export const currentChain: Chain = {
+  id: Number(appConfig.network.id),
+  name: appConfig.network.name || '',
+  network: appConfig.network.name || '',
+  nativeCurrency: {
+    decimals: appConfig.network.currency.decimals,
+    name: appConfig.network.currency.name || '',
+    symbol: appConfig.network.currency.symbol || '',
+  },
+  rpcUrls: {
+    'default': {
+      http: [ appConfig.network.rpcUrl || '' ],
+    },
+  },
+  blockExplorers: {
+    'default': {
+      name: 'Blockscout',
+      url: appConfig.baseUrl,
+    },
+  },
+};
+
+const chains = [ currentChain ];
+
+const { provider } = configureChains(chains, [
+  walletConnectProvider({ projectId: appConfig.walletConnect.projectId || '' }),
+]);
+const wagmiClient = createClient({
+  autoConnect: true,
+  connectors: modalConnectors({ appName: 'web3Modal', chains }),
+  provider,
+});
+
+const ethereumClient = new EthereumClient(wagmiClient, chains);
+
+const TAB_LIST_PROPS = {
+  columnGap: 3,
+};
+
 const AddressContract = ({ tabs }: Props) => {
-  return <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={{ columnGap: 3 }}/>;
+  const modalZIndex = useToken<string>('zIndices', 'modal');
+
+  return (
+    <WagmiConfig client={ wagmiClient }>
+      <ContractContextProvider>
+        <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
+      </ContractContextProvider>
+      <Web3Modal
+        projectId={ appConfig.walletConnect.projectId }
+        ethereumClient={ ethereumClient }
+        themeZIndex={ Number(modalZIndex) }
+        themeMode={ useColorModeValue('light', 'dark') }
+        themeBackground="themeColor"
+      />
+    </WagmiConfig>
+  );
 };
 
 export default React.memo(AddressContract);

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -49,11 +49,11 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
           <Table variant="simple" size="sm">
             <Thead top={ 80 }>
               <Tr>
-                <Th width="25%">Block</Th>
-                <Th width="25%">Txn</Th>
-                <Th width="25%">Age</Th>
-                <Th width="25%" isNumeric pr={ 1 }/>
-                <Th width="120px" isNumeric>Balance { appConfig.network.currency.symbol }</Th>
+                <Th width="20%">Block</Th>
+                <Th width="20%">Txn</Th>
+                <Th width="20%">Age</Th>
+                <Th width="20%" isNumeric pr={ 1 }>Balance { appConfig.network.currency.symbol }</Th>
+                <Th width="20%" isNumeric>Delta</Th>
               </Tr>
             </Thead>
             <Tbody>

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -30,7 +30,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
           <StatHelpText display="flex" mb={ 0 } alignItems="center">
             <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
             <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
-              { deltaBn.toFixed(8) }
+              { deltaBn.toFormat() }
             </Text>
           </StatHelpText>
         </Stat>

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

@@ -46,7 +46,7 @@ const AddressCoinBalanceTableItem = (props: Props) => {
           <StatHelpText display="flex" mb={ 0 } alignItems="center">
             <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
             <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
-              { deltaBn.toFixed(8) }
+              { deltaBn.toFormat() }
             </Text>
           </StatHelpText>
         </Stat>

ui/address/contract/ContractCode.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as contractMock from 'mocks/contract/info';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import ContractCode from './ContractCode';
+
+const addressHash = 'hash';
+const CONTRACT_API_URL = buildApiUrl('contract', { id: addressHash });
+const hooksConfig = {
+  router: {
+    query: { id: addressHash },
+  },
+};
+
+test('verified with changed byte code +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMock.withChangedByteCode),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <ContractCode/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('verified with multiple sources', async({ mount, page }) => {
+  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMock.withMultiplePaths),
+  }));
+
+  await mount(
+    <TestApp>
+      <ContractCode/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  const section = page.locator('section', { hasText: 'Contract source code' });
+
+  await expect(section).toHaveScreenshot();
+});
+
+test('verified via sourcify', async({ mount, page }) => {
+  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMock.verifiedViaSourcify),
+  }));
+
+  await mount(
+    <TestApp>
+      <ContractCode/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 110 } });
+});
+
+test('self destructed', async({ mount, page }) => {
+  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMock.selfDestructed),
+  }));
+
+  await mount(
+    <TestApp>
+      <ContractCode/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  const section = page.locator('section', { hasText: 'Contract creation code' });
+  await expect(section).toHaveScreenshot();
+});
+
+test('with twin address alert +@mobile', async({ mount, page }) => {
+  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMock.withTwinAddress),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <ContractCode/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component.getByRole('alert')).toHaveScreenshot();
+});
+
+test('with proxy address alert +@mobile', async({ mount, page }) => {
+  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMock.withProxyAddress),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <ContractCode/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component.getByRole('alert')).toHaveScreenshot();
+});
+
+test('non verified', async({ mount, page }) => {
+  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMock.nonVerified),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <ContractCode/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/address/contract/ContractCode.tsx

-import { Flex, Skeleton, Button, Grid, GridItem, Text } from '@chakra-ui/react';
-import dynamic from 'next/dynamic';
+import { Flex, Skeleton, Button, Grid, GridItem, Text, Alert, Link, chakra, Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import link from 'lib/link/link';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import ExternalLink from 'ui/shared/ExternalLink';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
-const DynamicContractSourceCode = dynamic(
-  () => import('./ContractSourceCode'),
-  { ssr: false },
-);
+import ContractSourceCode from './ContractSourceCode';
 
 const InfoItem = ({ label, value }: { label: string; value: string }) => (
   <GridItem display="flex" columnGap={ 6 }>
@@ -23,10 +23,12 @@ const InfoItem = ({ label, value }: { label: string; value: string }) => (
 const ContractCode = () => {
   const router = useRouter();
 
+  const addressHash = router.query.id?.toString();
   const { data, isLoading, isError } = useApiQuery('contract', {
-    pathParams: { id: router.query.id?.toString() },
+    pathParams: { id: addressHash },
     queryOptions: {
-      enabled: Boolean(router.query.id),
+      enabled: Boolean(addressHash),
+      refetchOnMount: false,
     },
   });
 
@@ -57,14 +59,92 @@ const ContractCode = () => {
       ml="auto"
       mr={ 3 }
       as="a"
-      href={ link('address_contract_verification', { id: router.query.id?.toString() }) }
+      href={ link('address_contract_verification', { id: addressHash }) }
     >
         Verify & publish
     </Button>
   );
 
+  const constructorArgs = (() => {
+    if (!data.decoded_constructor_args) {
+      return data.constructor_args;
+    }
+
+    const decoded = data.decoded_constructor_args
+      .map(([ value, { name, type } ], index) => {
+        const valueEl = type === 'address' ? <Link href={ link('address_index', { id: value }) }>{ value }</Link> : <span>{ value }</span>;
+        return (
+          <Box key={ index }>
+            <span>Arg [{ index }] { name || '' } ({ type }): </span>
+            { valueEl }
+          </Box>
+        );
+      });
+
+    return (
+      <>
+        <span>{ data.constructor_args }</span>
+        <br/><br/>
+        { decoded }
+      </>
+    );
+  })();
+
+  const externalLibraries = (() => {
+    if (!data.external_libraries || data.external_libraries.length === 0) {
+      return null;
+    }
+
+    return data.external_libraries.map((item) => (
+      <Box key={ item.address_hash }>
+        <chakra.span fontWeight={ 500 }>{ item.name }: </chakra.span>
+        <Link href={ link('address_index', { id: item.address_hash }, { tab: 'contract' }) }>{ item.address_hash }</Link>
+      </Box>
+    ));
+  })();
+
   return (
     <>
+      <Flex flexDir="column" rowGap={ 2 } mb={ 6 } _empty={{ display: 'none' }}>
+        { data.is_verified && <Alert status="success">Contract Source Code Verified (Exact Match)</Alert> }
+        { data.is_verified_via_sourcify && (
+          <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
+            <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified via Sourcify. </span>
+            { data.sourcify_repo_url && <ExternalLink href={ data.sourcify_repo_url } title="View contract in Sourcify repository" fontSize="md"/> }
+          </Alert>
+        ) }
+        { data.is_changed_bytecode && (
+          <Alert status="warning">
+            Warning! Contract bytecode has been changed and does not match the verified one. Therefore, interaction with this smart contract may be risky.
+          </Alert>
+        ) }
+        { !data.is_verified && data.verified_twin_address_hash && !data.minimal_proxy_address_hash && (
+          <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
+            <span>Contract is not verified. However, we found a verified contract with the same bytecode in Blockscout DB </span>
+            <Address>
+              <AddressIcon address={{ hash: data.verified_twin_address_hash, is_contract: true, implementation_name: null }}/>
+              <AddressLink hash={ data.verified_twin_address_hash } truncation="constant" ml={ 2 }/>
+            </Address>
+            <chakra.span mt={ 1 }>All functions displayed below are from ABI of that contract. In order to verify current contract, proceed with </chakra.span>
+            <Link href={ link('address_contract_verification', { id: data.verified_twin_address_hash }) }>Verify & Publish</Link>
+            <span> page</span>
+          </Alert>
+        ) }
+        { data.minimal_proxy_address_hash && (
+          <Alert status="warning" flexWrap="wrap" whiteSpace="pre-wrap">
+            <span>Minimal Proxy Contract for </span>
+            <Address>
+              <AddressIcon address={{ hash: data.minimal_proxy_address_hash, is_contract: true, implementation_name: null }}/>
+              <AddressLink hash={ data.minimal_proxy_address_hash } truncation="constant" ml={ 2 }/>
+            </Address>
+            <span>. </span>
+            <Box>
+              <Link href="https://eips.ethereum.org/EIPS/eip-1167">EIP-1167</Link>
+              <span> - minimal bytecode implementation that delegates all calls to a known address</span>
+            </Box>
+          </Alert>
+        ) }
+      </Flex>
       { data.is_verified && (
         <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 6 } mb={ 8 }>
           { data.name && <InfoItem label="Contract name" value={ data.name }/> }
@@ -76,18 +156,35 @@ const ContractCode = () => {
         </Grid>
       ) }
       <Flex flexDir="column" rowGap={ 6 }>
+        { constructorArgs && (
+          <RawDataSnippet
+            data={ constructorArgs }
+            title="Constructor Arguments"
+            textareaMaxHeight="200px"
+          />
+        ) }
         { data.source_code && (
-          <DynamicContractSourceCode
+          <ContractSourceCode
             data={ data.source_code }
             hasSol2Yml={ Boolean(data.can_be_visualized_via_sol2uml) }
-            address={ router.query.id?.toString() }
+            address={ addressHash }
+            isViper={ Boolean(data.is_vyper_contract) }
+            filePath={ data.file_path }
+            additionalSource={ data.additional_sources }
+          />
+        ) }
+        { Boolean(data.compiler_settings) && (
+          <RawDataSnippet
+            data={ JSON.stringify(data.compiler_settings) }
+            title="Compiler Settings"
+            textareaMaxHeight="200px"
           />
         ) }
         { data.abi && (
           <RawDataSnippet
             data={ JSON.stringify(data.abi) }
             title="Contract ABI"
-            textareaMinHeight="200px"
+            textareaMaxHeight="200px"
           />
         ) }
         { data.creation_bytecode && (
@@ -95,12 +192,27 @@ const ContractCode = () => {
             data={ data.creation_bytecode }
             title="Contract creation code"
             rightSlot={ data.is_verified ? null : verificationButton }
+            beforeSlot={ data.is_self_destructed ? (
+              <Alert status="info" whiteSpace="pre-wrap" mb={ 3 }>
+                Contracts that self destruct in their constructors have no contract code published and cannot be verified.
+                Displaying the init data provided of the creating transaction.
+              </Alert>
+            ) : null }
+            textareaMaxHeight="200px"
           />
         ) }
         { data.deployed_bytecode && (
           <RawDataSnippet
             data={ data.deployed_bytecode }
             title="Deployed ByteCode"
+            textareaMaxHeight="200px"
+          />
+        ) }
+        { externalLibraries && (
+          <RawDataSnippet
+            data={ externalLibraries }
+            title="External Libraries"
+            textareaMaxHeight="200px"
           />
         ) }
       </Flex>

ui/address/contract/ContractConnectWallet.tsx

+import { Alert, Button, Flex } from '@chakra-ui/react';
+import { useWeb3Modal } from '@web3modal/react';
+import React from 'react';
+import { useAccount, useDisconnect } from 'wagmi';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
+
+const ContractConnectWallet = () => {
+  const { open } = useWeb3Modal();
+  const { address, isDisconnected } = useAccount();
+  const { disconnect } = useDisconnect();
+  const isMobile = useIsMobile();
+
+  const handleConnect = React.useCallback(() => {
+    open();
+  }, [ open ]);
+
+  const handleDisconnect = React.useCallback(() => {
+    disconnect();
+  }, [ disconnect ]);
+
+  const content = (() => {
+    if (isDisconnected || !address) {
+      return (
+        <>
+          <span>Disconnected</span>
+          <Button ml={ 3 } onClick={ handleConnect } size="sm" variant="outline">Connect wallet</Button>
+        </>
+      );
+    }
+
+    return (
+      <Flex columnGap={ 3 } rowGap={ 3 } alignItems={{ base: 'flex-start', lg: 'center' }} flexDir={{ base: 'column', lg: 'row' }}>
+        <Flex alignItems="center">
+          <span>Connected to </span>
+          <AddressIcon address={{ hash: address, is_contract: false, implementation_name: null }} mx={ 2 }/>
+          <AddressLink fontWeight={ 600 } hash={ address } truncation={ isMobile ? 'constant' : 'dynamic' }/>
+        </Flex>
+        <Button onClick={ handleDisconnect } size="sm" variant="outline">Disconnect</Button>
+      </Flex>
+    );
+  })();
+
+  return <Alert mb={ 6 } status={ address ? 'success' : 'warning' }>{ content }</Alert>;
+};
+
+export default ContractConnectWallet;

ui/address/contract/ContractCustomAbiAlert.tsx

+import { Alert } from '@chakra-ui/react';
+import React from 'react';
+
+const ContractCustomAbiAlert = () => {
+  return (
+    <Alert status="warning" mb={ 4 }>
+        Note: Contract with custom ABI is only meant for debugging purpose and it is the user’s responsibility to ensure that the provided ABI
+        matches the contract, otherwise errors may occur or results returned may be incorrect.
+        Blockscout is not responsible for any losses that arise from the use of Read & Write contract.
+    </Alert>
+  );
+};
+
+export default React.memo(ContractCustomAbiAlert);

ui/address/contract/ContractImplementationAddress.tsx

+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Address as TAddress } from 'types/api/address';
+
+import { getResourceKey } from 'lib/api/useApiQuery';
+import Address from 'ui/shared/address/Address';
+import AddressLink from 'ui/shared/address/AddressLink';
+
+interface Props {
+  hash: string | undefined;
+}
+
+const ContractImplementationAddress = ({ hash }: Props) => {
+  const queryClient = useQueryClient();
+  const data = queryClient.getQueryData<TAddress>(getResourceKey('address', {
+    pathParams: { id: hash },
+  }));
+
+  if (!data?.implementation_address) {
+    return null;
+  }
+
+  return (
+    <Address whiteSpace="pre-wrap" flexWrap="wrap" mb={ 6 }>
+      <span>Implementation address: </span>
+      <AddressLink hash={ data.implementation_address }/>
+    </Address>
+  );
+};
+
+export default React.memo(ContractImplementationAddress);

ui/address/contract/ContractMethodCallable.tsx

-import { Box, Button, chakra, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, chakra, Flex, Icon, Text } 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 { MethodFormFields, ContractMethodCallResult } from './types';
 import type { SmartContractMethodInput, SmartContractMethod } from 'types/api/contract';
 
 import appConfig from 'configs/app/config';
@@ -12,9 +12,16 @@ import arrowIcon from 'icons/arrows/down-right.svg';
 
 import ContractMethodField from './ContractMethodField';
 
+interface ResultComponentProps<T extends SmartContractMethod> {
+  item: T;
+  result: ContractMethodCallResult<T>;
+  onSettle: () => void;
+}
+
 interface Props<T extends SmartContractMethod> {
   data: T;
-  caller: (data: T, args: Array<string>) => Promise<Array<Array<string>>>;
+  onSubmit: (data: T, args: Array<string | Array<string>>) => Promise<ContractMethodCallResult<T>>;
+  ResultComponent: (props: ResultComponentProps<T>) => JSX.Element | null;
   isWrite?: boolean;
 }
 
@@ -36,32 +43,61 @@ const sortFields = (data: Array<SmartContractMethodInput>) => ([ a ]: [string, s
   return 0;
 };
 
-const ContractMethodCallable = <T extends SmartContractMethod>({ data, caller, isWrite }: Props<T>) => {
+const castFieldValue = (data: Array<SmartContractMethodInput>) => ([ key, value ]: [ string, string ], index: number) => {
+  if (data[index].type.includes('[]')) {
+    return [ key, parseArrayValue(value) ];
+  }
+  return [ key, value ];
+};
+
+const parseArrayValue = (value: string) => value.replace(/(\[|\])|\s/g, '').split(',');
+
+const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit, ResultComponent, isWrite }: Props<T>) => {
+
+  const [ result, setResult ] = React.useState<ContractMethodCallResult<T>>();
+  const [ isLoading, setLoading ] = React.useState(false);
 
   const inputs = React.useMemo(() => {
-    return data.payable && (!('inputs' in data) || data.inputs.length === 0) ? [ {
+    return [
+      ...('inputs' in data ? data.inputs : []),
+      ...(data.stateMutability === 'payable' ? [ {
         name: 'value',
         type: appConfig.network.currency.symbol,
         internalType: appConfig.network.currency.symbol,
-    } as SmartContractMethodInput ] : data.inputs;
+      } as SmartContractMethodInput ] : []),
+    ];
   }, [ 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 handleTxSettle = React.useCallback(() => {
+    setLoading(false);
+  }, []);
+
+  const handleFormChange = React.useCallback(() => {
+    result && setResult(undefined);
+  }, [ result ]);
+
+  const onFormSubmit: SubmitHandler<MethodFormFields> = React.useCallback(async(formData) => {
     const args = Object.entries(formData)
       .sort(sortFields(inputs))
+      .map(castFieldValue(inputs))
       .map(([ , value ]) => value);
 
-    const result = await caller(data, args);
-    setResult(result);
-
-  }, [ caller, data, inputs ]);
+    setResult(undefined);
+    setLoading(true);
 
-  const resultBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+    onSubmit(data, args)
+      .then((result) => {
+        setResult(result);
+      })
+      .catch((error) => {
+        setResult(error?.error || error?.data || (error?.reason && { message: error.reason }) || error);
+        setLoading(false);
+      });
+  }, [ onSubmit, data, inputs ]);
 
   return (
     <Box>
@@ -72,8 +108,9 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, caller, i
         flexDir={{ base: 'column', lg: 'row' }}
         rowGap={ 2 }
         alignItems={{ base: 'flex-start', lg: 'center' }}
-        onSubmit={ handleSubmit(onSubmit) }
+        onSubmit={ handleSubmit(onFormSubmit) }
         flexWrap="wrap"
+        onChange={ handleFormChange }
       >
         { inputs.map(({ type, name }, index) => {
           const fieldName = getFieldName(name, index);
@@ -84,10 +121,14 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, caller, i
               placeholder={ `${ name }(${ type })` }
               control={ control }
               setValue={ setValue }
+              isDisabled={ isLoading }
+              onClear={ handleFormChange }
             />
           );
         }) }
         <Button
+          isLoading={ isLoading }
+          loadingText={ isWrite ? 'Write' : 'Query' }
           variant="outline"
           size="sm"
           flexShrink={ 0 }
@@ -102,18 +143,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, caller, i
           <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>
-      ) }
+      { result && <ResultComponent item={ data } result={ result } onSettle={ handleTxSettle }/> }
     </Box>
   );
 };

ui/address/contract/ContractMethodConstant.tsx

@@ -7,6 +7,7 @@ import type { SmartContractMethodOutput } from 'types/api/contract';
 
 import appConfig from 'configs/app/config';
 import { WEI } from 'lib/consts';
+import AddressLink from 'ui/shared/address/AddressLink';
 
 interface Props {
   data: SmartContractMethodOutput;
@@ -31,9 +32,17 @@ const ContractMethodStatic = ({ data }: Props) => {
     }
   }, [ data.value ]);
 
+  const content = (() => {
+    if (data.type === 'address' && data.value) {
+      return <AddressLink hash={ data.value }/>;
+    }
+
+    return <chakra.span wordBreak="break-all">({ data.type }): { value }</chakra.span>;
+  })();
+
   return (
     <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 2 }>
-      <chakra.span wordBreak="break-all">({ data.type }): { value }</chakra.span>
+      { content }
       { isBigInt && <Checkbox onChange={ handleCheckboxChange }>{ label }</Checkbox> }
     </Flex>
   );

ui/address/contract/ContractMethodField.tsx

@@ -12,19 +12,28 @@ interface Props {
   setValue: UseFormSetValue<MethodFormFields>;
   placeholder: string;
   name: string;
+  isDisabled: boolean;
+  onClear: () => void;
 }
 
-const ContractMethodField = ({ control, name, placeholder, setValue }: Props) => {
+const ContractMethodField = ({ control, name, placeholder, setValue, isDisabled, onClear }: Props) => {
   const ref = React.useRef<HTMLInputElement>(null);
 
   const handleClear = React.useCallback(() => {
     setValue(name, '');
+    onClear();
     ref.current?.focus();
-  }, [ name, setValue ]);
+  }, [ name, onClear, setValue ]);
 
   const renderInput = React.useCallback(({ field }: { field: ControllerRenderProps<MethodFormFields> }) => {
     return (
-      <FormControl id={ name } maxW={{ base: '100%', lg: 'calc((100% - 24px) / 3)' }}>
+      <FormControl
+        id={ name }
+        flexBasis={{ base: '100%', lg: 'calc((100% - 24px) / 3 - 65px)' }}
+        w={{ base: '100%', lg: 'auto' }}
+        flexGrow={ 1 }
+        isDisabled={ isDisabled
+        }>
         <InputGroup size="xs">
           <Input
             { ...field }
@@ -33,13 +42,13 @@ const ContractMethodField = ({ control, name, placeholder, setValue }: Props) =>
           />
           { field.value && (
             <InputRightElement>
-              <InputClearButton onClick={ handleClear }/>
+              <InputClearButton onClick={ handleClear } isDisabled={ isDisabled }/>
             </InputRightElement>
           ) }
         </InputGroup>
       </FormControl>
     );
-  }, [ handleClear, name, placeholder ]);
+  }, [ handleClear, isDisabled, name, placeholder ]);
 
   return (
     <Controller

ui/address/contract/ContractMethodsAccordion.tsx

@@ -39,11 +39,11 @@ const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, renderC
     <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
       { data.map((item, index) => {
         return (
-          <AccordionItem key={ index } as="section">
+          <AccordionItem key={ index } as="section" _first={{ borderTopWidth: '0' }}>
             <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 }
+                  { index + 1 }. { item.type === 'fallback' || item.type === 'receive' ? item.type : item.name }
                 </Box>
                 { item.type === 'fallback' && (
                   <Tooltip
@@ -58,6 +58,21 @@ const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, renderC
                     </Box>
                   </Tooltip>
                 ) }
+                { item.type === 'receive' && (
+                  <Tooltip
+                    label={ `The receive function is executed on a call to the contract with empty calldata. 
+                    This is the function that is executed on plain Ether transfers (e.g. via .send() or .transfer()). 
+                    If no such function exists, but a payable fallback function exists, the fallback function will be called on a plain Ether transfer. 
+                    If neither a receive Ether nor a payable fallback function is present, 
+                    the contract cannot receive Ether through regular transactions and throws an exception.` }
+                    placement="top"
+                    maxW="320px"
+                  >
+                    <Box cursor="pointer" display="inherit">
+                      <Icon as={ infoIcon } boxSize={ 5 }/>
+                    </Box>
+                  </Tooltip>
+                ) }
                 <AccordionIcon/>
               </AccordionButton>
             </h2>

ui/address/contract/ContractRead.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as contractMethodsMock from 'mocks/contract/methods';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import ContractRead from './ContractRead';
+
+const addressHash = 'hash';
+const CONTRACT_READ_METHODS_API_URL = buildApiUrl('contract_methods_read', { id: addressHash }) + '?is_custom_abi=false';
+const CONTRACT_QUERY_METHOD_API_URL = buildApiUrl('contract_method_query', { id: addressHash });
+const hooksConfig = {
+  router: {
+    query: { id: addressHash },
+  },
+};
+
+test('base view +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route(CONTRACT_READ_METHODS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMethodsMock.read),
+  }));
+  await page.route(CONTRACT_QUERY_METHOD_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMethodsMock.readResultSuccess),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <ContractRead/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await component.getByText(/expand all/i).click();
+
+  await expect(component).toHaveScreenshot();
+
+  await component.getByPlaceholder(/address/i).type('address-hash');
+  await component.getByText(/query/i).click();
+
+  await component.getByText(/wei/i).click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('error result', async({ mount, page }) => {
+  await page.route(CONTRACT_READ_METHODS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMethodsMock.read),
+  }));
+  await page.route(CONTRACT_QUERY_METHOD_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMethodsMock.readResultError),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <ContractRead/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await component.getByText(/expand all/i).click();
+  await component.getByPlaceholder(/address/i).type('address-hash');
+  await component.getByText(/query/i).click();
+
+  const section = page.locator('section', { hasText: 'balanceOf' });
+
+  await expect(section).toHaveScreenshot();
+});

ui/address/contract/ContractRead.tsx

-import { Flex } from '@chakra-ui/react';
+import { Alert, Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
+import { useAccount } from 'wagmi';
 
-import type { SmartContractReadMethod } from 'types/api/contract';
+import type { SmartContractReadMethod, SmartContractQueryMethodRead } from 'types/api/contract';
 
 import useApiFetch from 'lib/api/useApiFetch';
 import useApiQuery from 'lib/api/useApiQuery';
@@ -10,28 +11,37 @@ import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordi
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
+import ContractConnectWallet from './ContractConnectWallet';
+import ContractCustomAbiAlert from './ContractCustomAbiAlert';
+import ContractImplementationAddress from './ContractImplementationAddress';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractMethodConstant from './ContractMethodConstant';
+import ContractReadResult from './ContractReadResult';
 
 interface Props {
   isProxy?: boolean;
+  isCustomAbi?: boolean;
 }
 
-const ContractRead = ({ isProxy }: Props) => {
+const ContractRead = ({ isProxy, isCustomAbi }: Props) => {
   const router = useRouter();
   const apiFetch = useApiFetch();
+  const { address: userAddress } = useAccount();
 
   const addressHash = router.query.id?.toString();
 
   const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', {
     pathParams: { id: addressHash },
+    queryParams: {
+      is_custom_abi: isCustomAbi ? 'true' : 'false',
+    },
     queryOptions: {
       enabled: Boolean(router.query.id),
     },
   });
 
-  const contractCaller = React.useCallback(async(item: SmartContractReadMethod, args: Array<string>) => {
-    await apiFetch('contract_method_query', {
+  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractReadMethod, args: Array<string | Array<string>>) => {
+    return apiFetch<'contract_method_query', SmartContractQueryMethodRead>('contract_method_query', {
       pathParams: { id: addressHash },
       fetchParams: {
         method: 'POST',
@@ -39,15 +49,18 @@ const ContractRead = ({ isProxy }: Props) => {
           args,
           method_id: item.method_id,
           contract_type: isProxy ? 'proxy' : 'regular',
+          from: userAddress,
         },
       },
     });
-
-    return [ [ 'string', 'this is mock' ] ];
-  }, [ addressHash, apiFetch, isProxy ]);
+  }, [ addressHash, apiFetch, isProxy, userAddress ]);
 
   const renderContent = React.useCallback((item: SmartContractReadMethod, index: number, id: number) => {
-    if (item.inputs.length === 0) {
+    if (item.error) {
+      return <Alert status="error" fontSize="sm">{ item.error }</Alert>;
+    }
+
+    if (item.outputs.some(({ value }) => value)) {
       return (
         <Flex flexDir="column" rowGap={ 1 }>
           { item.outputs.map((output, index) => <ContractMethodConstant key={ index } data={ output }/>) }
@@ -59,10 +72,11 @@ const ContractRead = ({ isProxy }: Props) => {
       <ContractMethodCallable
         key={ id + '_' + index }
         data={ item }
-        caller={ contractCaller }
+        onSubmit={ handleMethodFormSubmit }
+        ResultComponent={ ContractReadResult }
       />
     );
-  }, [ contractCaller ]);
+  }, [ handleMethodFormSubmit ]);
 
   if (isError) {
     return <DataFetchAlert/>;
@@ -72,7 +86,18 @@ const ContractRead = ({ isProxy }: Props) => {
     return <ContentLoader/>;
   }
 
-  return <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>;
+  if (data.length === 0 && !isProxy) {
+    return <span>No public read functions were found for this contract.</span>;
+  }
+
+  return (
+    <>
+      { isCustomAbi && <ContractCustomAbiAlert/> }
+      <ContractConnectWallet/>
+      { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
+      <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>
+    </>
+  );
 };
 
-export default ContractRead;
+export default React.memo(ContractRead);

ui/address/contract/ContractReadResult.tsx

+import { Alert, Box, chakra, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ContractMethodReadResult } from './types';
+import type { SmartContractReadMethod } from 'types/api/contract';
+
+interface Props {
+  item: SmartContractReadMethod;
+  result: ContractMethodReadResult;
+  onSettle: () => void;
+}
+
+const ContractReadResult = ({ item, result, onSettle }: Props) => {
+  const resultBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  React.useEffect(() => {
+    onSettle();
+  }, [ onSettle ]);
+
+  if ('status' in result) {
+    return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm">{ result.statusText }</Alert>;
+  }
+
+  if (result.is_error) {
+    const message = 'error' in result.result ? result.result.error : result.result.message;
+    return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm">{ message }</Alert>;
+  }
+
+  return (
+    <Box mt={ 3 } p={ 4 } borderRadius="md" bgColor={ resultBgColor } fontSize="sm">
+      <p>
+        [ <chakra.span fontWeight={ 600 }>{ 'name' in item ? item.name : '' }</chakra.span> method response ]
+      </p>
+      <p>[</p>
+      { result.result.output.map(({ type, value }, index) => (
+        <chakra.p key={ index } whiteSpace="break-spaces" wordBreak="break-all">  { type }: { String(value) }</chakra.p>
+      )) }
+      <p>]</p>
+    </Box>
+  );
+};
+
+export default React.memo(ContractReadResult);

ui/address/contract/ContractSourceCode.tsx

-import { Box, Flex, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Box, chakra, Flex, Link, Text, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
+import type { SmartContract } from 'types/api/contract';
+
 import link from 'lib/link/link';
 import CodeEditor from 'ui/shared/CodeEditor';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -9,28 +11,62 @@ interface Props {
   data: string;
   hasSol2Yml: boolean;
   address?: string;
+  isViper: boolean;
+  filePath?: string;
+  additionalSource?: SmartContract['additional_sources'];
 }
 
-const ContractSourceCode = ({ data, hasSol2Yml, address }: Props) => {
-  return (
-    <Box>
-      <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
-        <Text fontWeight={ 500 }>Contract source code</Text>
-        { hasSol2Yml && address && (
+const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, additionalSource }: Props) => {
+  const heading = (
+    <Text fontWeight={ 500 }>
+      <span>Contract source code</span>
+      <Text whiteSpace="pre" as="span" variant="secondary"> ({ isViper ? 'Vyper' : 'Solidity' })</Text>
+    </Text>
+  );
+
+  const diagramLink = hasSol2Yml && address ? (
     <Tooltip label="Visualize contract code using Sol2Uml JS library">
       <Link
         href={ link('visualize_sol2uml', undefined, { address }) }
         ml="auto"
         mr={ 3 }
       >
-                View Sol2uml
+        View UML diagram
       </Link>
     </Tooltip>
-        ) }
+  ) : null;
+
+  if (!additionalSource?.length) {
+    return (
+      <section>
+        <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
+          { heading }
+          { diagramLink }
           <CopyToClipboard text={ data }/>
         </Flex>
         <CodeEditor value={ data } id="source_code"/>
+      </section>
+    );
+  }
+
+  return (
+    <section>
+      <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
+        { heading }
+        { diagramLink }
+      </Flex>
+      <Flex flexDir="column" rowGap={ 3 }>
+        { [ { file_path: filePath, source_code: data }, ...additionalSource ].map((item, index, array) => (
+          <Box key={ index }>
+            <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
+              <chakra.span fontSize="sm">File { index + 1 } of { array.length }: { item.file_path }</chakra.span>
+              <CopyToClipboard text={ item.source_code }/>
+            </Flex>
+            <CodeEditor value={ item.source_code } id={ `source_code_${ index }` }/>
           </Box>
+        )) }
+      </Flex>
+    </section>
   );
 };
 

ui/address/contract/ContractWrite.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as contractMethodsMock from 'mocks/contract/methods';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import ContractWrite from './ContractWrite';
+
+const addressHash = 'hash';
+const CONTRACT_WRITE_METHODS_API_URL = buildApiUrl('contract_methods_write', { id: addressHash }) + '?is_custom_abi=false';
+const hooksConfig = {
+  router: {
+    query: { id: addressHash },
+  },
+};
+
+test('base view +@mobile', async({ mount, page }) => {
+  await page.route(CONTRACT_WRITE_METHODS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(contractMethodsMock.write),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <ContractWrite/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await component.getByText(/expand all/i).click();
+
+  await expect(component).toHaveScreenshot();
+});

ui/address/contract/ContractWrite.tsx

+import _capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
+import { useAccount, useSigner } from 'wagmi';
 
 import type { SmartContractWriteMethod } from 'types/api/contract';
 
+import config from 'configs/app/config';
 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 { useContractContext } from './context';
+import ContractConnectWallet from './ContractConnectWallet';
+import ContractCustomAbiAlert from './ContractCustomAbiAlert';
+import ContractImplementationAddress from './ContractImplementationAddress';
 import ContractMethodCallable from './ContractMethodCallable';
+import ContractWriteResult from './ContractWriteResult';
+import { getNativeCoinValue, isExtendedError } from './utils';
 
 interface Props {
   isProxy?: boolean;
+  isCustomAbi?: boolean;
 }
 
-const ContractWrite = ({ isProxy }: Props) => {
+const ContractWrite = ({ isProxy, isCustomAbi }: Props) => {
   const router = useRouter();
 
   const addressHash = router.query.id?.toString();
+  const { data: signer } = useSigner();
+  const { isConnected } = useAccount();
 
   const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', {
     pathParams: { id: addressHash },
+    queryParams: {
+      is_custom_abi: isCustomAbi ? 'true' : 'false',
+    },
     queryOptions: {
-      enabled: Boolean(router.query.id),
+      enabled: Boolean(addressHash),
     },
   });
 
-  const contractInfo = useApiQuery('contract', {
-    pathParams: { id: addressHash },
-    queryOptions: {
-      enabled: Boolean(router.query.id),
-    },
+  const { contract, proxy } = useContractContext();
+  const _contract = isProxy ? proxy : contract;
+
+  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string | Array<string>>) => {
+    if (!isConnected) {
+      throw new Error('Wallet is not connected');
+    }
+
+    try {
+      if (!_contract) {
+        return;
+      }
+
+      if (item.type === 'receive') {
+        const value = args[0] ? getNativeCoinValue(args[0]) : '0';
+        const result = await signer?.sendTransaction({
+          to: addressHash,
+          value,
+        });
+        return { hash: result?.hash as string };
+      }
+
+      const _args = item.stateMutability === 'payable' ? args.slice(0, -1) : args;
+      const value = item.stateMutability === 'payable' ? getNativeCoinValue(args[args.length - 1]) : undefined;
+      const methodName = item.type === 'fallback' ? 'fallback' : item.name;
+
+      const result = await _contract[methodName](..._args, {
+        gasLimit: 100_000,
+        value,
       });
 
-  const contractCaller = React.useCallback(async() => {
-    // eslint-disable-next-line no-console
-    console.log('__>__', contractInfo);
-    return [ [ 'string', 'this is mock' ] ];
-  }, [ contractInfo ]);
+      return { hash: result.hash as string };
+    } catch (error) {
+      if (isExtendedError(error)) {
+        if ('reason' in error && error.reason === 'underlying network changed') {
+
+          if ('detectedNetwork' in error && typeof error.detectedNetwork === 'object' && error.detectedNetwork !== null) {
+            const networkName = error.detectedNetwork.name;
+            if (networkName) {
+              throw new Error(
+                // eslint-disable-next-line max-len
+                `You connected to ${ _capitalize(networkName) } chain in the wallet, but the current instance of Blockscout is for ${ config.network.name } chain`,
+              );
+            }
+          }
+
+          throw new Error('Wrong network detected, please make sure you are switched to the correct network, and try again');
+        }
+      }
+      throw error;
+    }
+  }, [ _contract, addressHash, isConnected, signer ]);
 
   const renderContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
     return (
       <ContractMethodCallable
         key={ id + '_' + index }
         data={ item }
-        caller={ contractCaller }
+        onSubmit={ handleMethodFormSubmit }
+        ResultComponent={ ContractWriteResult }
         isWrite
       />
     );
-  }, [ contractCaller ]);
+  }, [ handleMethodFormSubmit ]);
 
   if (isError) {
     return <DataFetchAlert/>;
@@ -58,7 +114,18 @@ const ContractWrite = ({ isProxy }: Props) => {
     return <ContentLoader/>;
   }
 
-  return <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>;
+  if (data.length === 0 && !isProxy) {
+    return <span>No public write functions were found for this contract.</span>;
+  }
+
+  return (
+    <>
+      { isCustomAbi && <ContractCustomAbiAlert/> }
+      <ContractConnectWallet/>
+      { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
+      <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>
+    </>
+  );
 };
 
-export default ContractWrite;
+export default React.memo(ContractWrite);

ui/address/contract/ContractWriteResult.tsx

+import React from 'react';
+import { useWaitForTransaction } from 'wagmi';
+
+import type { ContractMethodWriteResult } from './types';
+
+import ContractWriteResultDumb from './ContractWriteResultDumb';
+
+interface Props {
+  result: ContractMethodWriteResult;
+  onSettle: () => void;
+}
+
+const ContractWriteResult = ({ result, onSettle }: Props) => {
+  const txHash = result && 'hash' in result ? result.hash as `0x${ string }` : undefined;
+  const txInfo = useWaitForTransaction({
+    hash: txHash,
+  });
+
+  return <ContractWriteResultDumb result={ result } onSettle={ onSettle } txInfo={ txInfo }/>;
+};
+
+export default React.memo(ContractWriteResult);

ui/address/contract/ContractWriteResultDumb.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import ContractWriteResultDumb from './ContractWriteResultDumb';
+
+test('loading', async({ mount }) => {
+  const props = {
+    txInfo: {
+      status: 'loading' as const,
+      error: null,
+    },
+    result: {
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    },
+    onSettle: () => {},
+  };
+
+  const component = await mount(
+    <TestApp>
+      <ContractWriteResultDumb { ...props }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('success', async({ mount }) => {
+  const props = {
+    txInfo: {
+      status: 'success' as const,
+      error: null,
+    },
+    result: {
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    },
+    onSettle: () => {},
+  };
+
+  const component = await mount(
+    <TestApp>
+      <ContractWriteResultDumb { ...props }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('error +@mobile', async({ mount }) => {
+  const props = {
+    txInfo: {
+      status: 'error' as const,
+      error: {
+        // eslint-disable-next-line max-len
+        message: 'missing revert data in call exception; Transaction reverted without a reason string [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ]',
+      } as Error,
+    },
+    result: {
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    },
+    onSettle: () => {},
+  };
+
+  const component = await mount(
+    <TestApp>
+      <ContractWriteResultDumb { ...props }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('error in result', async({ mount }) => {
+  const props = {
+    txInfo: {
+      status: 'idle' as const,
+      error: null,
+    },
+    result: {
+      message: 'wallet is not connected',
+    } as Error,
+    onSettle: () => {},
+  };
+
+  const component = await mount(
+    <TestApp>
+      <ContractWriteResultDumb { ...props }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/address/contract/ContractWriteResultDumb.tsx

+import { Box, chakra, Link, Spinner } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ContractMethodWriteResult } from './types';
+
+import link from 'lib/link/link';
+
+interface Props {
+  result: ContractMethodWriteResult;
+  onSettle: () => void;
+  txInfo: {
+    status: 'loading' | 'success' | 'error' | 'idle';
+    error: Error | null;
+  };
+}
+
+const ContractWriteResultDumb = ({ result, onSettle, txInfo }: Props) => {
+  const txHash = result && 'hash' in result ? result.hash : undefined;
+
+  React.useEffect(() => {
+    if (txInfo.status !== 'loading') {
+      onSettle();
+    }
+  }, [ onSettle, txInfo.status ]);
+
+  if (!result) {
+    return null;
+  }
+
+  const isErrorResult = 'message' in result;
+
+  const txLink = (
+    <Link href={ link('tx', { id: txHash }) }>View transaction details</Link>
+  );
+
+  const content = (() => {
+    if (isErrorResult) {
+      return (
+        <>
+          <span>Error: </span>
+          <span>{ result.message }</span>
+        </>
+      );
+    }
+
+    switch (txInfo.status) {
+      case 'success': {
+        return (
+          <>
+            <span>Transaction has been confirmed. </span>
+            { txLink }
+          </>
+        );
+      }
+
+      case 'loading': {
+        return (
+          <>
+            <Spinner size="sm" mr={ 3 }/>
+            <chakra.span verticalAlign="text-bottom">
+              { 'Waiting for transaction\'s confirmation. ' }
+              { txLink }
+            </chakra.span>
+          </>
+        );
+      }
+
+      case 'error': {
+        return (
+          <>
+            <span>Error: </span>
+            <span>{ txInfo.error ? txInfo.error.message : 'Something went wrong' } </span>
+            { txLink }
+          </>
+        );
+      }
+    }
+  })();
+
+  return (
+    <Box
+      fontSize="sm"
+      pl={ 3 }
+      mt={ 3 }
+      alignItems="center"
+      whiteSpace="pre-wrap"
+      wordBreak="break-all"
+      color={ txInfo.status === 'error' || isErrorResult ? 'red.600' : undefined }
+    >
+      { content }
+    </Box>
+  );
+};
+
+export default React.memo(ContractWriteResultDumb);

ui/address/contract/context.tsx

+import { useQueryClient } from '@tanstack/react-query';
+import type { Contract } from 'ethers';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { useContract, useProvider, useSigner } from 'wagmi';
+
+import type { Address } from 'types/api/address';
+
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+
+type ProviderProps = {
+  children: React.ReactNode;
+}
+
+type TContractContext = {
+  contract: Contract | null;
+  proxy: Contract | null;
+};
+
+const ContractContext = React.createContext<TContractContext>({
+  contract: null,
+  proxy: null,
+});
+
+export function ContractContextProvider({ children }: ProviderProps) {
+  const router = useRouter();
+  const provider = useProvider();
+  const { data: signer } = useSigner();
+  const queryClient = useQueryClient();
+
+  const addressHash = router.query.id?.toString();
+  const { data: contractInfo } = useApiQuery('contract', {
+    pathParams: { id: addressHash },
+    queryOptions: {
+      enabled: Boolean(addressHash),
+      refetchOnMount: false,
+    },
+  });
+
+  const addressInfo = queryClient.getQueryData<Address>(getResourceKey('address', {
+    pathParams: { id: addressHash },
+  }));
+
+  const { data: proxyInfo } = useApiQuery('contract', {
+    pathParams: { id: addressInfo?.implementation_address || '' },
+    queryOptions: {
+      enabled: Boolean(addressInfo?.implementation_address),
+      refetchOnMount: false,
+    },
+  });
+
+  const contract = useContract({
+    address: addressHash,
+    abi: contractInfo?.abi || undefined,
+    signerOrProvider: signer || provider,
+  });
+  const proxy = useContract({
+    address: addressInfo?.implementation_address ?? undefined,
+    abi: proxyInfo?.abi ?? undefined,
+    signerOrProvider: signer ?? provider,
+  });
+
+  const value = React.useMemo(() => ({
+    contract,
+    proxy,
+  }), [ contract, proxy ]);
+
+  return (
+    <ContractContext.Provider value={ value }>
+      { children }
+    </ContractContext.Provider>
+  );
+}
+
+export function useContractContext() {
+  const context = React.useContext(ContractContext);
+  if (context === undefined) {
+    throw new Error('useContractContext must be used within a ContractContextProvider');
+  }
+  return context;
+}

ui/address/contract/types.ts

+import type { SmartContractQueryMethodRead, SmartContractMethod } from 'types/api/contract';
+
+import type { ResourceError } from 'lib/api/resources';
+
 export type MethodFormFields = Record<string, string>;
+
+export type ContractMethodReadResult = SmartContractQueryMethodRead | ResourceError;
+
+export type ContractMethodWriteResult = Error | { hash: string } | undefined;
+
+export type ContractMethodCallResult<T extends SmartContractMethod> =
+    T extends { method_id: string } ? ContractMethodReadResult : ContractMethodWriteResult;

ui/address/contract/utils.ts

+import BigNumber from 'bignumber.js';
+
+import config from 'configs/app/config';
+
+export const getNativeCoinValue = (value: string | Array<string>) => {
+  const _value = Array.isArray(value) ? value[0] : value;
+  return BigNumber(_value).times(10 ** config.network.currency.decimals).toString();
+};
+
+interface ExtendedError extends Error {
+  detectedNetwork?: {
+    chain: number;
+    name: string;
+  };
+  reason?: string;
+}
+
+export function isExtendedError(error: unknown): error is ExtendedError {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'message' in error &&
+    typeof (error as Record<string, unknown>).message === 'string'
+  );
+}

ui/address/details/AddressAddToMetaMask.tsx

@@ -16,7 +16,7 @@ const AddressAddToMetaMask = ({ className, token }: Props) => {
 
   const handleClick = React.useCallback(async() => {
     try {
-      const wasAdded = await window.ethereum.request({
+      const wasAdded = await window.ethereum.request?.({
         method: 'wallet_watchAsset',
         params: {
           type: 'ERC20', // Initially only supports ERC20, but eventually more!

ui/pages/Address.tsx

-import { Flex, Skeleton, Tag, Box } from '@chakra-ui/react';
+import { Flex, Skeleton, Tag, Box, Icon } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { TokenType } from 'types/api/tokenInfo';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import iconSuccess from 'icons/status/success.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import notEmpty from 'lib/notEmpty';
 import AddressBlocksValidated from 'ui/address/AddressBlocksValidated';
@@ -52,9 +53,10 @@ const AddressPageContent = () => {
   const contractTabs = React.useMemo(() => {
     return [
       { id: 'contact_code', title: 'Code', component: <ContractCode/> },
-      addressQuery.data?.has_decompiled_code ?
-        { id: 'contact_decompiled_code', title: 'Decompiled code', component: <div>Decompiled code</div> } :
-        undefined,
+      // this is not implemented in api yet
+      // addressQuery.data?.has_decompiled_code ?
+      //   { 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: <ContractRead/> } :
         undefined,
@@ -62,7 +64,7 @@ const AddressPageContent = () => {
         { 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> } :
+        { id: 'read_custom_methods', title: 'Read custom', component: <ContractRead isCustomAbi/> } :
         undefined,
       addressQuery.data?.has_methods_write ?
         { id: 'write_contract', title: 'Write contract', component: <ContractWrite/> } :
@@ -71,7 +73,7 @@ const AddressPageContent = () => {
         { 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> } :
+        { id: 'write_custom_methods', title: 'Write custom', component: <ContractWrite isCustomAbi/> } :
         undefined,
     ].filter(notEmpty);
   }, [ addressQuery.data ]);
@@ -91,7 +93,18 @@ const AddressPageContent = () => {
       addressQuery.data?.has_logs ? { id: 'logs', title: 'Logs', component: <AddressLogs scrollRef={ tabsScrollRef }/> } : undefined,
       addressQuery.data?.is_contract ? {
         id: 'contract',
-        title: 'Contract',
+        title: () => {
+          if (addressQuery.data.is_verified) {
+            return (
+              <>
+                <span>Contract</span>
+                <Icon as={ iconSuccess } boxSize="14px" color="green.500" ml={ 1 }/>
+              </>
+            );
+          }
+
+          return 'Contract';
+        },
         component: <AddressContract tabs={ contractTabs }/>,
         subTabs: contractTabs.map(tab => tab.id),
       } : undefined,

ui/shared/CodeEditor.tsx

 import { chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
-import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/theme-tomorrow';
-import 'ace-builds/src-noconflict/theme-tomorrow_night';
-import 'ace-builds/src-noconflict/ext-language_tools';
+import type ReactAce from 'react-ace/lib/ace';
 
 interface Props {
   id: string;
@@ -14,12 +10,35 @@ interface Props {
 
 const CodeEditorBase = chakra(({ id, value, className }: Props) => {
 
+  const [ AceEditor, setAceEditor ] = React.useState<{default: typeof ReactAce} | null>(null);
+
+  React.useEffect(() => {
+    const load = async() => {
+      const component = await import('react-ace');
+      await import('ace-builds/src-noconflict/mode-csharp');
+      await import('ace-builds/src-noconflict/theme-tomorrow');
+      await import('ace-builds/src-noconflict/theme-tomorrow_night');
+      await import('ace-builds/src-noconflict/ext-language_tools');
+      setAceEditor(component);
+    };
+
+    load();
+
+    return () => {
+      setAceEditor(null);
+    };
+  }, []);
+
   const theme = useColorModeValue('tomorrow', 'tomorrow_night');
 
+  if (!AceEditor) {
+    return null;
+  }
+
   return (
-    <AceEditor
+    <AceEditor.default
       className={ className }
-      mode="javascript" // TODO need to find mode for solidity
+      mode="csharp" // TODO need to find mode for solidity
       theme={ theme }
       value={ value }
       name={ id }

ui/shared/ExternalLink.tsx

-import { Link, Icon } from '@chakra-ui/react';
+import { Link, Icon, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import arrowIcon from 'icons/arrows/north-east.svg';
@@ -6,15 +6,16 @@ import arrowIcon from 'icons/arrows/north-east.svg';
 interface Props {
   href: string;
   title: string;
+  className?: string;
 }
 
-const ExternalLink = ({ href, title }: Props) => {
+const ExternalLink = ({ href, title, className }: Props) => {
   return (
-    <Link fontSize="sm" display="inline-flex" alignItems="center" target="_blank" href={ href }>
+    <Link className={ className } fontSize="sm" display="inline-flex" alignItems="center" target="_blank" href={ href }>
       { title }
       <Icon as={ arrowIcon } boxSize={ 4 }/>
     </Link>
   );
 };
 
-export default React.memo(ExternalLink);
+export default React.memo(chakra(ExternalLink));

ui/shared/InputClearButton.tsx

@@ -5,15 +5,17 @@ import errorIcon from 'icons/status/error.svg';
 
 interface Props {
   onClick: () => void;
+  isDisabled?: boolean;
   className?: string;
 }
 
-const InputClearButton = ({ onClick, className }: Props) => {
+const InputClearButton = ({ onClick, isDisabled, className }: Props) => {
   const iconColor = useColorModeValue('gray.300', 'gray.600');
   const iconColorHover = useColorModeValue('gray.200', 'gray.500');
 
   return (
     <IconButton
+      isDisabled={ isDisabled }
       className={ className }
       colorScheme="none"
       aria-label="Clear input"

ui/shared/RawDataSnippet.tsx

-import { Box, Flex, Text, Textarea, chakra } from '@chakra-ui/react';
+import { Box, Flex, Text, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import CopyToClipboard from './CopyToClipboard';
 
 interface Props {
-  data: string;
+  data: React.ReactNode;
   title?: string;
   className?: string;
   rightSlot?: React.ReactNode;
-  textareaMinHeight?: string;
+  beforeSlot?: React.ReactNode;
+  textareaMaxHeight?: string;
 }
 
-const RawDataSnippet = ({ data, className, title, rightSlot, textareaMinHeight }: Props) => {
+const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textareaMaxHeight }: Props) => {
+  // see issue in theme/components/Textarea.ts
+  const bgColor = useColorModeValue('#f5f5f6', '#1a1b1b');
   return (
-    <Box className={ className }>
+    <Box className={ className } as="section" title={ title }>
       <Flex justifyContent={ title ? 'space-between' : 'flex-end' } alignItems="center" mb={ 3 }>
         { title && <Text fontWeight={ 500 }>{ title }</Text> }
         { rightSlot }
-        <CopyToClipboard text={ data }/>
+        { typeof data === 'string' && <CopyToClipboard text={ data }/> }
       </Flex>
-      <Textarea
-        variant="filledInactive"
+      { beforeSlot }
+      <Box
         p={ 4 }
-        minHeight={ textareaMinHeight || '400px' }
-        value={ data }
+        bgColor={ bgColor }
+        maxH={ textareaMaxHeight || '400px' }
         fontSize="sm"
         borderRadius="md"
-        readOnly
-      />
+        wordBreak="break-all"
+        whiteSpace="pre-wrap"
+        overflowY="auto"
+      >
+        { data }
+      </Box>
     </Box>
   );
 };

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -31,7 +31,7 @@ const hiddenItemStyles: StyleProps = {
 
 interface Props extends ThemingProps<'Tabs'> {
   tabs: Array<RoutedTab>;
-  tabListProps?: ChakraProps;
+  tabListProps?: ChakraProps | (({ isSticky }: { isSticky: boolean }) => ChakraProps);
   rightSlot?: React.ReactNode;
   stickyEnabled?: boolean;
   className?: string;
@@ -90,6 +90,10 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ activeTabIndex, isMobile ]);
 
+  if (tabs.length === 1) {
+    return <div>{ tabs[0].component }</div>;
+  }
+
   return (
     <Tabs
       className={ className }
@@ -130,7 +134,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
             zIndex: { base: 'sticky2', lg: 'docked' },
           } : { })
         }
-        { ...tabListProps }
+        { ...(typeof tabListProps === 'function' ? tabListProps({ isSticky }) : tabListProps) }
       >
         { tabsList.map((tab, index) => {
           if (!tab.id) {
@@ -162,7 +166,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
               scrollSnapAlign="start"
               flexShrink={ 0 }
             >
-              { tab.title }
+              { typeof tab.title === 'function' ? tab.title() : tab.title }
             </Tab>
           );
         }) }

ui/shared/RoutedTabs/RoutedTabsMenu.tsx

@@ -56,7 +56,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
               justifyContent="left"
               data-index={ index }
             >
-              { tab.title }
+              { typeof tab.title === 'function' ? tab.title() : tab.title }
             </Button>
           )) }
         </PopoverBody>

ui/shared/RoutedTabs/types.ts

+import type React from 'react';
+
 export interface RoutedTab {
   id: string;
-  title: string;
+  title: string | (() => React.ReactNode);
   component: React.ReactNode;
   subTabs?: Array<string>;
 }

ui/shared/address/AddressIcon.tsx

@@ -7,7 +7,7 @@ import type { AddressParam } from 'types/api/addressParams';
 import AddressContractIcon from 'ui/shared/address/AddressContractIcon';
 
 type Props = {
-  address: Pick<AddressParam, 'is_contract' | 'hash' | 'implementation_name'>;
+  address: Pick<AddressParam, 'hash' | 'is_contract' | 'implementation_name'>;
   className?: string;
 }
 

ui/tx/details/TxRevertReason.tsx

@@ -12,6 +12,7 @@ const TxRevertReason = (props: Props) => {
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   if ('raw' in props) {
+    const decoded = hexToUtf8(props.raw);
     return (
       <Grid
         bgColor={ bgColor }
@@ -25,8 +26,12 @@ const TxRevertReason = (props: Props) => {
       >
         <GridItem fontWeight={ 500 }>Raw:</GridItem>
         <GridItem>{ props.raw }</GridItem>
+        { decoded.replace(/\s|\0/g, '') && (
+          <>
             <GridItem fontWeight={ 500 }>Decoded:</GridItem>
-        <GridItem>{ hexToUtf8(props.raw) }</GridItem>
+            <GridItem>{ decoded }</GridItem>
+          </>
+        ) }
       </Grid>
     );
   }