update: add support for contract verification on different shards to solve #172

src/api/explorerV1.ts

@@ -1,3 +1,4 @@
+import { ShardID } from "src/types";
 import { AbiItem } from "web3-utils";
 import { getContractsByField } from "./client";
 
@@ -18,6 +19,7 @@ export interface IVerifyContractData {
   tab: string;
   fileList?: File[];
   language: number;
+  shard?: 0;
 }
 
 export interface IVerifyContractDataSendData {
@@ -32,6 +34,7 @@ export interface IVerifyContractDataSendData {
   contractName: string;
   fileList?: File[],
   tab: string,
+  shard?: number
 
 }
 
@@ -108,9 +111,9 @@ export const verifyContractCode = async (data: IVerifyContractDataSendData) => {
   }
 };
 
-export const loadSourceCode = async (address: string): Promise<ISourceCode> => {
+export const loadSourceCode = async (address: string, shard: ShardID): Promise<ISourceCode> => {
   const response = await fetch(
-    `${process.env.REACT_APP_EXPLORER_V1_API_URL}fetchContractCode?contractAddress=${address}`,
+    `${process.env.REACT_APP_EXPLORER_V1_API_URL}fetchContractCode?contractAddress=${address}&shard=${shard}`,
     {
       mode: "cors",
       cache: "no-cache",

src/pages/AddressPage/ContractDetails/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Box, Text, TextArea } from "grommet";
-import { AddressDetails } from "src/types";
+import { AddressDetails, ShardID } from "src/types";
 import { Item } from "../AddressDetails";
 import { useHistory } from "react-router-dom";
 import styled from "styled-components";
@@ -19,6 +19,7 @@ export const ContractDetails = (props: {
   address: string;
   contracts?: AddressDetails | null;
   sourceCode?: ISourceCode | null;
+  shard?: ShardID | 0;
 }) => {
   // console.log(111, appendABI(abi, props.address));
 
@@ -28,6 +29,7 @@ export const ContractDetails = (props: {
         sourceCode={props.sourceCode}
         contracts={props.contracts}
         address={props.address}
+        shard={props.shard || 0}
       />
     );
   }
@@ -37,6 +39,7 @@ export const ContractDetails = (props: {
       <NoVerifiedContractDetails
         contracts={props.contracts}
         address={props.address}
+        shard={props.shard || 0}
       />
     );
   }
@@ -71,6 +74,7 @@ export const AbiMethods = (props: {
 
 export const VerifiedButMissingImplementation = (props: {
   address: string;
+  shard: number;
 }) => {
   const history = useHistory();
 
@@ -94,7 +98,7 @@ export const VerifiedButMissingImplementation = (props: {
             size="small"
             style={{ cursor: "pointer" }}
             onClick={() =>
-              history.push(`/verifycontract?address=${props.address}`)
+              history.push(`/verifycontract?address=${props.address}&shard=${props.shard}`)
             }
             color="brand"
           >
@@ -152,6 +156,7 @@ export const ProxyContractDetails = (props: {
 export const NoVerifiedContractDetails = (props: {
   contracts: AddressDetails;
   address: string;
+  shard: number;
 }) => {
   const history = useHistory();
 
@@ -164,7 +169,7 @@ export const NoVerifiedContractDetails = (props: {
             size="small"
             style={{ cursor: "pointer" }}
             onClick={() =>
-              history.push(`/verifycontract?address=${props.address}`)
+              history.push(`/verifycontract?address=${props.address}&shard=${props.shard}`)
             }
             color="brand"
           >
@@ -230,6 +235,7 @@ export const VerifiedContractDetails = (props: {
   sourceCode: ISourceCode;
   address: string;
   contracts?: AddressDetails | null;
+  shard: number;
 }) => {
   const [tab, setTab] = useState<V_TABS>(V_TABS.CODE);
   const [metamaskAddress, setMetamask] = useState("");
@@ -250,7 +256,7 @@ export const VerifiedContractDetails = (props: {
 
   return (
     <Box direction="column">
-      {props.sourceCode?.proxyAddress && !props.sourceCode?.proxy && <VerifiedButMissingImplementation address={props.sourceCode.proxyAddress}/>}
+      {props.sourceCode?.proxyAddress && !props.sourceCode?.proxy && <VerifiedButMissingImplementation address={props.sourceCode.proxyAddress} shard={props.shard}/>}
       <Box direction="row" align="center" margin={{ top: props.sourceCode?.proxyAddress && !props.sourceCode?.proxy ? "" : "medium" }}>
         <TabButton
           text={V_TABS.CODE}

src/pages/AddressPage/index.tsx

@@ -147,15 +147,15 @@ export function AddressPage() {
     // contract defined and contract address same as id
     // note: when we toggle there is scenarios where the id are not the same
     // @ts-ignore
-    if (!!contracts && contracts?.address === id) {
-      loadSourceCode(id)
+    if (!!contracts && contracts?.address === id && !!contractShardId) {
+      loadSourceCode(id, contractShardId)
         .then((res) => setSourceCode(res))
         .catch((except) => {
           console.log(except);
           setSourceCode(null)
         });
     }
-  }, [id, contracts]);
+  }, [id, contracts, contractShardId]);
 
   const getContractInAllShards = async (contractId: string) => {
     const { availableShards } = config
@@ -425,6 +425,7 @@ export function AddressPage() {
                 address={id}
                 contracts={contracts}
                 sourceCode={sourceCode}
+                shard={contractShardId || 0}
               />
             </Tab>
           ) : null}

src/pages/VerifyContract/VerifyContract.tsx

@@ -68,6 +68,7 @@ class VerifyContractBase extends React.Component<
   {
     isLessTablet: boolean;
     address?: string;
+    shard?: number;
   },
   IVerifyContractData
 > {
@@ -86,10 +87,11 @@ class VerifyContractBase extends React.Component<
     statusText: "",
     error: "",
     tab: V_TABS.SINGLE,
-    language: 0
+    language: 0,
+    shard: 0
   };
 
-  getBytecode = async () => {
+  getBytecode = async (shard: number) => {
     this.setState({ ...this.state, argsLoading: true });
 
     try {
@@ -97,14 +99,14 @@ class VerifyContractBase extends React.Component<
         const address = getAddress(this.state.contractAddress).basicHex;
 
         const contracts: any = await getContractsByField([
-          0,
+          shard,
           "address",
           address,
         ]);
 
         if (contracts?.transactionHash) {
           const trx = await getTransactionByField([
-            0,
+            shard,
             "hash",
             contracts.transactionHash,
           ]);
@@ -141,6 +143,7 @@ class VerifyContractBase extends React.Component<
       const res = await verifyContractCode({
         ...state,
         libraries: this.state.libraries.map((i) => i.value),
+        shard: this.props.shard || 0
       });
 
       if (res.success === true) {
@@ -161,7 +164,7 @@ class VerifyContractBase extends React.Component<
   };
 
   render() {
-    const { isLessTablet } = this.props;
+    const { isLessTablet, shard } = this.props;
     const { isLoading } = this.state;
 
     return (
@@ -331,7 +334,7 @@ class VerifyContractBase extends React.Component<
                     <Spinner size={"xsmall"} />
                   </Box>
                 ) : (
-                  <Box onClick={() => this.getBytecode()}>
+                  <Box onClick={() => this.getBytecode(shard || 0)}>
                     <Text color="#00AEE9">paste arguments from tx input</Text>
                   </Box>
                 )}
@@ -465,5 +468,10 @@ export const VerifyContract = () => {
     history.location.search.substring(1)
   );
 
-  return <VerifyContractBase isLessTablet={isLessTablet} address={address} />;
+  const shard = getQueryVariable(
+    "shard",
+    history.location.search.substring(1)
+  );
+
+  return <VerifyContractBase isLessTablet={isLessTablet} address={address} shard={+(shard || 0)} />;
 };