Contract verify feature upgrade

.env

@@ -3,6 +3,6 @@ REACT_APP_RPC_URL_SHARD1=https://api.s1.t.hmny.io/
 REACT_APP_RPC_URL_SHARD2=https://api.s2.t.hmny.io/
 REACT_APP_RPC_URL_SHARD3=https://api.s3.t.hmny.io/
 REACT_APP_AVAILABLE_SHARDS=0,1,2,3
-REACT_APP_EXPLORER_V1_API_URL=https://explorer.testnet.harmony.one:8888/
+REACT_APP_EXPLORER_V1_API_URL=http://107.23.68.206:8080/
 REACT_APP_INDEXER_IPFS_GATEWAY=https://ipfs.io/ipfs/
 REACT_APP_PROD_ADDRESS=https://ws.explorer-v2-api.hmny.io

.env.example

@@ -6,7 +6,7 @@ REACT_APP_RPC_URL_SHARD3=https://api.s3.t.hmny.io/
 # supported shards, comma separated 0,1,2,3
 REACT_APP_AVAILABLE_SHARDS=0,1,2,3
 # explorer v1 api for contract verification. (will migrate to v1 in the future)
-REACT_APP_EXPLORER_V1_API_URL=https://explorer.pops.one:8888/
+REACT_APP_EXPLORER_V1_API_URL=http://107.23.68.206:8080/
 # IPFS gateway for tokens assets
 REACT_APP_INDEXER_IPFS_GATEWAY=https://ipfs.io/ipfs/
 # backend websocket API url

src/Routes.tsx

@@ -10,14 +10,10 @@ import { AddressPage } from "src/pages/AddressPage";
 import { ERC20List } from "src/pages/ERC20List";
 import { ERC721List } from "src/pages/ERC721List";
 import { VerifyContract } from "./pages/VerifyContract/VerifyContract";
-import { breakpoints } from "./Responive/breakpoints";
-import { useMediaQuery } from "react-responsive";
 import { ERC1155List } from "./pages/ERC1155List";
 import { InventoryDetailsPage } from "./pages/InventoryDetailsPage/InventoryDetailsPage";
 
 export function Routes() {
-  const isLessTablet = useMediaQuery({ maxDeviceWidth: breakpoints.tablet });
-
   return (
     <>
       <Switch>
@@ -84,7 +80,7 @@ export function Routes() {
         </Route>
 
         <Route path="/verifycontract">
-          <VerifyContract isLessTablet={isLessTablet} />
+          <VerifyContract />
         </Route>
       </Switch>
     </>

src/api/explorerV1.ts

@@ -12,6 +12,7 @@ export interface IVerifyContractData {
   contractName: string;
   statusText: string;
   isLoading: boolean;
+  error: string;
 }
 
 export interface IVerifyContractDataSendData {
@@ -43,7 +44,13 @@ export const verifyContractCode = async (data: IVerifyContractDataSendData) => {
     }
   );
 
-  return await response.json();
+  const body = await response.json();
+
+  if (response.status !== 200) {
+    throw new Error(body?.message);
+  }
+
+  return body;
 };
 
 export const loadSourceCode = async (address: string): Promise<ISourceCode> => {
@@ -61,20 +68,13 @@ export const loadSourceCode = async (address: string): Promise<ISourceCode> => {
     }
   );
 
-  // return {
-  //   contractAddress: "one1shend7cl77j77cud0ga464xsqcq7kkveg7z88r",
-  //   compiler: "0.4.26",
-  //   optimizer: "No",
-  //   optimizerTimes: "0",
-  //   sourceCode:
-  //     "pragma solidity ^0.4.17;contract Lottery {    address public manager;    address[] public players;    function Lottery() public {        manager = msg.sender;    }    function enter() public payable {        require(msg.value > 0.01 ether);        players.push(msg.sender);    }    function random() private view returns (uint256) {        return uint256(keccak256(block.difficulty, now, players));    }    function pickWinner() public restricted {        uint256 index = random() % players.length;        players[index].transfer(this.balance);        players = new address[](0);    }    modifier restricted() {        require(msg.sender == manager);        _;    }    function getPlayers() public view returns (address[]) {        return players;    }}",
-  //   libraries: ["", "", "", "", ""],
-  //   constructorArguments: "",
-  //   chainType: "testnet",
-  //   contractName: "Lottery",
-  // };
+  const body = await response.json();
+
+  if (response.status !== 200) {
+    throw new Error(body);
+  }
 
-  return await response.json();
+  return body;
 };
 
 export interface ISourceCode {

src/pages/AddressPage/ContractDetails/index.tsx

@@ -10,7 +10,7 @@ import { AbiItem } from "web3-utils";
 import { Wallet } from "./ConnectWallets";
 
 const StyledTextArea = styled(TextArea)`
-  padding: 0.75rem; 
+  padding: 0.75rem;
   border-radius: 0.35rem;
   font-weight: normal;
 `;
@@ -33,7 +33,12 @@ export const ContractDetails = (props: {
   }
 
   if (!!props.contracts) {
-    return <NoVerifiedContractDetails contracts={props.contracts} />;
+    return (
+      <NoVerifiedContractDetails
+        contracts={props.contracts}
+        address={props.address}
+      />
+    );
   }
 
   return null;
@@ -62,6 +67,7 @@ export const AbiMethods = (props: {
 
 export const NoVerifiedContractDetails = (props: {
   contracts: AddressDetails;
+  address: string;
 }) => {
   const history = useHistory();
 
@@ -73,7 +79,9 @@ export const NoVerifiedContractDetails = (props: {
           <Text
             size="small"
             style={{ cursor: "pointer" }}
-            onClick={() => history.push(`/verifycontract`)}
+            onClick={() =>
+              history.push(`/verifycontract?address=${props.address}`)
+            }
             color="brand"
           >
             Verify and Publish
@@ -124,11 +132,8 @@ const TabButton = (props: {
   selected: boolean;
 }) => {
   return (
-    <TabBox
-      onClick={props.onClick}
-      selected={props.selected} 
-    >
-      <Text size="small" color={'minorText'}>
+    <TabBox onClick={props.onClick} selected={props.selected}>
+      <Text size="small" color={"minorText"}>
         {props.text}
       </Text>
     </TabBox>

src/pages/AddressPage/index.tsx

@@ -135,7 +135,7 @@ export function AddressPage() {
   useEffect(() => {
     // if (!!contracts) {
     loadSourceCode(oneAddress)
-      .then(setSourceCode)
+      .then((res) => setSourceCode(res))
       .catch(() => setSourceCode(null));
     // }
   }, [oneAddress]);

src/pages/VerifyContract/VerifyContract.tsx

@@ -13,6 +13,10 @@ import styled from "styled-components";
 import { IVerifyContractData, verifyContractCode } from "src/api/explorerV1";
 import { CircleAlert, StatusGood, SubtractCircle } from "grommet-icons";
 import { toaster } from "src/App";
+import { breakpoints } from "../../Responive/breakpoints";
+import { useMediaQuery } from "react-responsive";
+import { useHistory } from "react-router";
+import { getQueryVariable } from "../../utils";
 
 const Field = styled(Box)``;
 
@@ -31,15 +35,16 @@ export function uniqid(prefix = "", random = false) {
   }`;
 }
 
-export class VerifyContract extends React.Component<
+class VerifyContractBase extends React.Component<
   {
     isLessTablet: boolean;
+    address?: string;
   },
   IVerifyContractData
 > {
   public state: IVerifyContractData = {
     chainType: "mainnet",
-    contractAddress: "",
+    contractAddress: this.props.address || "",
     compiler: "",
     optimizer: "No",
     optimizerTimes: "",
@@ -49,10 +54,17 @@ export class VerifyContract extends React.Component<
     contractName: "",
     isLoading: false,
     statusText: "",
+    error: "",
   };
 
   onClickSubmitBtn = async () => {
-    this.setState({ ...this.state, isLoading: true, statusText: "Pending..." });
+    this.setState({
+      ...this.state,
+      isLoading: true,
+      statusText: "Pending...",
+      error: "",
+    });
+
     const { isLoading, statusText, ...state } = this.state;
 
     try {
@@ -61,13 +73,17 @@ export class VerifyContract extends React.Component<
         libraries: this.state.libraries.map((i) => i.value),
       });
 
-      if (res === true) {
+      if (res.success === true) {
         this.setState({ ...this.state, statusText: "Success" });
       } else {
-        this.setState({ ...this.state, statusText: "Error" });
+        this.setState({ ...this.state, statusText: "", error: "Error" });
       }
-    } catch {
-      this.setState({ ...this.state, statusText: "Error" });
+    } catch (e) {
+      this.setState({
+        ...this.state,
+        statusText: "",
+        error: e?.message || "Error",
+      });
     } finally {
       this.setState({ ...this.state, isLoading: false });
     }
@@ -95,6 +111,7 @@ export class VerifyContract extends React.Component<
                       contractAddress: evt.currentTarget.value,
                     });
                   }}
+                  value={this.state.contractAddress}
                   disabled={isLoading}
                 />
               </Field>
@@ -270,6 +287,18 @@ export class VerifyContract extends React.Component<
               >
                 <Text>{this.state.statusText}</Text>
               </Box>
+              {this.state.error && (
+                <Box
+                  align={"center"}
+                  justify={"center"}
+                  width={"100%"}
+                  style={{ marginTop: "10px" }}
+                >
+                  <Text style={{ overflowWrap: "anywhere" }} color="red">
+                    {this.state.error}
+                  </Text>
+                </Box>
+              )}
             </Field>
           </Wrapper>
         </BasePage>
@@ -277,3 +306,14 @@ export class VerifyContract extends React.Component<
     );
   }
 }
+
+export const VerifyContract = () => {
+  const isLessTablet = useMediaQuery({ maxDeviceWidth: breakpoints.tablet });
+  const history = useHistory();
+  const address = getQueryVariable(
+    "address",
+    history.location.search.substring(1)
+  );
+
+  return <VerifyContractBase isLessTablet={isLessTablet} address={address} />;
+};

src/utils/index.ts

@@ -1 +1,2 @@
 export * from "./getAddress/GetAddress";
+export * from "./utils";

src/utils/utils.ts

@@ -0,0 +1,9 @@
+export const getQueryVariable = (variable: string, query: string) => {
+  const vars = query.split("&");
+  for (let i = 0; i < vars.length; i++) {
+    const pair = vars[i].split("=");
+    if (decodeURIComponent(pair[0]) == variable) {
+      return decodeURIComponent(pair[1]);
+    }
+  }
+};