fix: search bar fix if number input, add badge (#2) (#4)

* fix: search bar fix if number input, add badge (#2)

* fix: search bar fix if number input, add badge
for type in search bar, horfix for direct link in inventory page

* fix: theme mode blink page

* fix: write boolean in tx page

* fix: styles for contract tab in address page

* fix: remove btn

* fix: env, results per page go to first page
in grid. fix path for REACT_APP_EXPLORER_V1_API_URL

* Update .env.example

Co-authored-by: potvik <57394565+potvik@users.noreply.github.com>

.env.example

@@ -1,9 +1,9 @@
-REACT_APP_RPC_URL_SHARD0=https://a.api.s0.t.hmny.io
-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
-REACT_APP_EXPLORER_V1_API_URL=https://explorer.harmony.one:8888
+REACT_APP_RPC_URL_SHARD0=https://a.api.s0.t.hmny.io/
+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.pops.one:8888
 REACT_APP_INDEXER_IPFS_GATEWAY=https://ipfs.io/ipfs/
-REACT_APP_PROD_ADDRESS=https://explorer-v2-api.hmny.io
-REACT_APP_DEV_ADDRESS=https://ws.explorer-v2.hmny.io
+REACT_APP_PROD_ADDRESS=https://explorer-v2-api.hmny.io/
+REACT_APP_DEV_ADDRESS=https://ws.explorer-v2.hmny.io/

src/api/explorerV1.ts

@@ -28,7 +28,7 @@ export interface IVerifyContractDataSendData {
 
 export const verifyContractCode = async (data: IVerifyContractDataSendData) => {
   const response = await fetch(
-    `${process.env.REACT_APP_EXPLORER_V1_API_URL}/codeVerification`,
+    `${process.env.REACT_APP_EXPLORER_V1_API_URL}codeVerification`,
     {
       method: "POST",
       mode: "cors",
@@ -48,7 +48,7 @@ export const verifyContractCode = async (data: IVerifyContractDataSendData) => {
 
 export const loadSourceCode = async (address: string): 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}`,
     {
       mode: "cors",
       cache: "no-cache",

src/components/tables/TransactionsTable.tsx

@@ -186,6 +186,11 @@ export function TransactionsTable(props: TransactionTableProps) {
 
   const _IsLoading = isLoading;
 
+  useEffect(() => {
+    filter.offset = 0;
+    setFilter(filter);
+  }, [filter.limit]);
+
   return (
     <>
       <Box

src/components/transaction/TransactionLogs.tsx

@@ -76,7 +76,7 @@ const LogItem = (props: LogItemProps) => {
         <Text color="minorText" size="small">
           Suggested Event
         </Text>
-        <Text size="small" color="black">
+        <Text size="small">
           {displaySignature || signatures[0].signature || ''}
         </Text>
       </Box>

src/components/ui/Pagination/index.tsx

@@ -34,7 +34,7 @@ export function PaginationNavigator(props: PaginationNavigator) {
 
   const onPrevClick = () => {
     const newFilter = JSON.parse(JSON.stringify(filter)) as Filter;
-    newFilter.offset = newFilter.offset - 10;
+    newFilter.offset = newFilter.offset - (filter.limit || 10);
 
     if (!isLoading) {
       onChange(newFilter, "prevPage");
@@ -43,7 +43,7 @@ export function PaginationNavigator(props: PaginationNavigator) {
 
   const onNextClick = () => {
     const newFilter = JSON.parse(JSON.stringify(filter)) as Filter;
-    newFilter.offset += 10;
+    newFilter.offset += filter.limit || 10;
     if (!isLoading) {
       onChange(newFilter, "nextPage");
     }

src/components/ui/Search.tsx

@@ -19,34 +19,41 @@ import { Address } from "./Address";
 
 let timeoutID: any | null = null;
 
+export interface ISearchItem {
+  symbol: string;
+  name: string;
+  type: "erc1155" | "erc20" | "erc721";
+  item: any;
+}
+
 export const SearchInput = () => {
   const [value, setValue] = useState("");
   const [readySubmit, setReadySubmit] = useState(false);
   const [focus, setFocus] = useState(false);
-  const [results, setResults] = useState<any[]>([]);
+  const [results, setResults] = useState<ISearchItem[]>([]);
   const themeMode = useThemeMode();
 
   const erc20Map = useERC20Pool();
   const erc721Map = useERC721Pool();
   const erc1155Map = useERC1155Pool();
 
-  const dataTest = [
+  const dataTest: ISearchItem[] = [
     ...Object.keys(erc1155Map).map((address) => ({
       symbol: erc1155Map[address].symbol,
       name: erc1155Map[address].name,
-      type: "erc1155",
+      type: "erc1155" as "erc1155",
       item: erc1155Map[address],
     })),
     ...Object.keys(erc20Map).map((address) => ({
       symbol: erc20Map[address].symbol,
       name: erc20Map[address].name,
-      type: "erc20",
+      type: "erc20" as "erc20",
       item: erc20Map[address],
     })),
     ...Object.keys(erc721Map).map((address) => ({
       symbol: erc721Map[address].symbol,
       name: erc721Map[address].name,
-      type: "erc721",
+      type: "erc721" as "erc721",
       item: erc721Map[address],
     })),
   ];
@@ -60,9 +67,6 @@ export const SearchInput = () => {
     const { value: newValue } = event.target;
 
     setValue(newValue);
-
-    clearTimeout(timeoutID);
-    timeoutID = setTimeout(() => setReadySubmit(true), 200);
   }, []);
 
   useEffect(() => {
@@ -87,7 +91,7 @@ export const SearchInput = () => {
       if ("" + +v === v && +v > 0) {
         // is block number
         history.push(`/block/${v}`);
-        setValue('')
+        setValue("");
         return;
       }
 
@@ -97,7 +101,7 @@ export const SearchInput = () => {
       if (v.length === 42 && /^0x[a-f0-9]+$/.test(v)) {
         // address
         history.push(`/address/${v}`);
-        setValue('')
+        setValue("");
         return;
       }
 
@@ -106,7 +110,7 @@ export const SearchInput = () => {
         const ethAddress = getAddress(v).basicHex;
 
         history.push(`/address/${ethAddress}`);
-        setValue('')
+        setValue("");
         return;
       }
 
@@ -130,7 +134,7 @@ export const SearchInput = () => {
                     return;
                   }
                   history.push(`/tx/${v}`);
-                  setValue('')
+                  setValue("");
                 })
                 .catch(),
               getStakingTransactionByField([0, "hash", v]).then((res) => {
@@ -139,7 +143,7 @@ export const SearchInput = () => {
                 }
 
                 history.push(`/staking-tx/${v}`);
-                setValue('')
+                setValue("");
               }),
             ]);
           } catch {
@@ -153,14 +157,14 @@ export const SearchInput = () => {
                         return;
                       }
                       history.push(`/block/${v}`);
-                      setValue('')
+                      setValue("");
                     }),
                     getTransactionByField([shard, "hash", v]).then((res) => {
                       if (!res) {
                         return;
                       }
                       history.push(`/tx/${v}`);
-                      setValue('')
+                      setValue("");
                     }),
                     getStakingTransactionByField([shard, "hash", v]).then(
                       (res) => {
@@ -169,7 +173,7 @@ export const SearchInput = () => {
                         }
 
                         history.push(`/staking-tx/${v}`);
-                        setValue('')
+                        setValue("");
                       }
                     ),
                   ]);
@@ -213,11 +217,25 @@ export const SearchInput = () => {
             setValue("");
           }}
         >
+          <Box
+            pad={"xxsmall"}
+            background={"backgroundSuccess"}
+            style={{
+              borderRadius: "6px",
+              marginRight: "10px",
+              paddingLeft: "6px",
+              paddingRight: "6px",
+            }}
+          >
+            <Text size={"xsmall"}>{`H${results[index].type
+              .slice(1)
+              .toUpperCase()}`}</Text>
+          </Box>
           <Text size={"small"} style={{ paddingRight: "5px" }}>
-            Name {results[index].name} |
+            {results[index].name} |
           </Text>
           <Text size={"small"} style={{ paddingRight: "5px" }}>
-            Symbol {results[index].symbol} |
+            {results[index].symbol} |
           </Text>
           <Address
             address={results[index].item.address}
@@ -244,9 +262,14 @@ export const SearchInput = () => {
             setFocus(false);
           }, 100);
         }}
+        onPaste={(evt) => {
+          clearTimeout(timeoutID);
+          timeoutID = setTimeout(() => setReadySubmit(true), 200);
+        }}
         onKeyDown={(e) => {
           if (e.keyCode === 13) {
-            onChange(e);
+            clearTimeout(timeoutID);
+            timeoutID = setTimeout(() => setReadySubmit(true), 200);
           }
         }}
         color="red"

src/hooks/themeSwitcherHook.ts

@@ -7,20 +7,23 @@ let globalSetMode = () => {
   throw new Error("you must useDarkMode before setting its state");
 };
 
-export const useThemeMode = singletonHook(initTheme, () => {
-  const currentTheme = window.localStorage.getItem('themeMode') as themeType || initTheme;
-
-  const [mode, setMode] = useState<themeType>(currentTheme);
-  //@ts-ignore
-  globalSetMode = setMode;
-  return mode;
-});
+export const useThemeMode = singletonHook(
+  (window.localStorage.getItem("themeMode") || initTheme) as themeType,
+  () => {
+    const currentTheme =
+      (window.localStorage.getItem("themeMode") as themeType) || initTheme;
 
+    const [mode, setMode] = useState<themeType>(currentTheme);
+    //@ts-ignore
+    globalSetMode = setMode;
+    return mode;
+  }
+);
 
-export const setThemeMode = (mode: themeType) =>  {
+export const setThemeMode = (mode: themeType) => {
   //@ts-ignore
   globalSetMode(mode);
-  window.localStorage.setItem('themeMode', mode);
+  window.localStorage.setItem("themeMode", mode);
 };
 
 export type themeType = "light" | "dark";

src/pages/AddressPage/ContractDetails/AbiMethodView.tsx

@@ -16,7 +16,8 @@ const ViewWrapper = styled(Box)`
 const NameWrapper = styled(Box)`
   border-bottom: 1px solid #e7ecf7;
   padding: 10px;
-  background: #f8f9fa;
+  opacity: 0.7;
+  border-radius: 5px;
 `;
 
 const SmallTextInput = styled(TextInput)`
@@ -127,7 +128,7 @@ export const AbiMethodsView = (props: {
 
   return (
     <ViewWrapper direction="column" margin={{ bottom: "medium" }}>
-      <NameWrapper>
+      <NameWrapper background={"backgroundBack"}>
         <Text size="small">
           {index + 1}. {abiMethod.name}
         </Text>

src/pages/AddressPage/ContractDetails/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Box, Text } from "grommet";
+import { Box, Text, TextArea } from "grommet";
 import { AddressDetails } from "src/types";
 import { Item } from "../AddressDetails";
 import { useHistory } from "react-router-dom";
@@ -9,11 +9,10 @@ import { AbiMethodsView } from "./AbiMethodView";
 import { AbiItem } from "web3-utils";
 import { Wallet } from "./ConnectWallets";
 
-const StyledTextArea = styled("textarea")`
-  padding: 0.75rem;
-  border: 1px solid #e7eaf3;
-  background-color: #f8f9fa;
+const StyledTextArea = styled(TextArea)`
+  padding: 0.75rem; 
   border-radius: 0.35rem;
+  font-weight: normal;
 `;
 
 export const ContractDetails = (props: {
@@ -110,8 +109,10 @@ enum V_TABS {
   WRITE = "Write Contract",
 }
 
-const TabBox = styled(Box)`
-  border: 1px solid #dedede;
+const TabBox = styled(Box)<{ selected: boolean }>`
+  border: 1px solid ${(props) => props.theme.global.colors.border};
+  background: ${(props) =>
+    props.selected ? props.theme.global.colors.backgroundBack : "transparent"};
   padding: 7px 12px 6px 12px;
   border-radius: 4px;
   margin: 5px 10px;
@@ -125,9 +126,9 @@ const TabButton = (props: {
   return (
     <TabBox
       onClick={props.onClick}
-      style={{ background: props.selected ? "#77838f" : "transparent" }}
+      selected={props.selected} 
     >
-      <Text size="small" color={props.selected ? "white" : "black"}>
+      <Text size="small" color={'minorText'}>
         {props.text}
       </Text>
     </TabBox>

src/pages/AllTransactionsPage/index.tsx

@@ -87,7 +87,7 @@ export function AllTransactionsPage() {
           limit={+limit}
           filter={filter}
           setFilter={setFilter}
-          primaryKey={'blockHash'}
+          primaryKey={'hash'}
         />
       </BasePage>
     </BaseContainer>

src/pages/ERC20List/ERC20Table.tsx

@@ -83,6 +83,7 @@ export function ERC20Table(props: TransactionTableProps) {
           className={"g-table-header"}
           style={{ width: "100%", minWidth }}
           columns={getColumns({ history })}
+          primaryKey={'address'}
           data={data}
           border={{
             header: {
@@ -160,7 +161,6 @@ function getColumns(props: any) {
         </Text>
       ),
       render: (data: Erc20) => {
-        console.log(data);
         return (
           <Box direction={"row"}>
             <TokenValue

src/pages/ERC721List/ERC721Table.tsx

@@ -84,6 +84,7 @@ export function ERC721Table(props: TransactionTableProps) {
           style={{ width: "100%", minWidth }}
           columns={getColumns({ history })}
           data={data}
+          primaryKey={'address'}
           border={{
             header: {
               color: "brand",
@@ -149,8 +150,7 @@ function getColumns(props: any) {
         </Text>
       ),
       render: (data: Erc20) => {
-console.log(data)
-        return <Address address={data.address} displayHash />
+        return <Address address={data.address} displayHash />;
       },
     },
     // {

src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx

@@ -15,7 +15,7 @@ export function InventoryDetailsPage() {
   //  @ts-ignore
   const { address, tokenID, type } = useParams();
 
-  const item = erc721Map[address] || erc1155Map[address];
+  const item = erc721Map[address] || erc1155Map[address] || {};
   const name = item.name || "";
 
   useEffect(() => {

src/web3/parseByteCode.tsx

@@ -130,9 +130,10 @@ export const DisplaySignature = (props: any = {}) => {
   if (!parsed || !event || !abi) {
     return <>—</>;
   }
+ 
 
   return (
-    <>
+    <Text size={"small"}>
       {event.name}(
       <>
         {abi.inputs.map((input: any, i: number) => {
@@ -158,7 +159,7 @@ export const DisplaySignature = (props: any = {}) => {
               ) : Array.isArray(parsed[input.name]) ? (
                 parsed[input.name].join(", ")
               ) : (
-                parsed[input.name]
+                parsed[input.name].toString()
               )}
               {i < abi.inputs.length - 1 ? ", " : null}
             </div>
@@ -166,7 +167,7 @@ export const DisplaySignature = (props: any = {}) => {
         })}
       </>
       )
-    </>
+    </Text>
   );
 };