Support ONE address in URL (#15)

* 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

* fix: improve

* fix: stable .env

* fix: improve tx

* fix: no update grid if tab not changed

* fix: revert .env file

* fix: add .env.development to gitignore

* env var description

* Update .env

* fix: set to REACT_APP_PROD_ADDRESS socket

* Update .env

* fix: timeout for ERCpools

* fix: timeout instead intervals

* fix: setTimeout

* fix: catch erc pools requests

* fix: remove catch section

* fix: hashRouter instead BrowserRouter

* fix: merge

* fix: routes fix

* fix: improvements

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

.env

@@ -6,4 +6,3 @@ 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://ws.explorer-v2-api.hmny.io
-REACT_APP_DEV_ADDRESS=https://ws.explorer-v2-api.hmny.io

.env.example

@@ -11,5 +11,3 @@ REACT_APP_EXPLORER_V1_API_URL=https://explorer.pops.one:8888/
 REACT_APP_INDEXER_IPFS_GATEWAY=https://ipfs.io/ipfs/
 # backend websocket API url
 REACT_APP_PROD_ADDRESS=https://explorer-v2-api.hmny.io/
-# dev url
-REACT_APP_DEV_ADDRESS=https://ws.explorer-v2.hmny.io/

src/Routes.tsx

@@ -63,6 +63,14 @@ export function Routes() {
           <InventoryDetailsPage />
         </Route>
 
+        <Route path="/tokens">
+          <ERC20List />
+        </Route>
+
+        <Route path="/tokens721">
+          <ERC721List />
+        </Route>
+
         <Route path="/hrc20">
           <ERC20List />
         </Route>

src/components/transaction/TransactionDetails.tsx

@@ -58,6 +58,7 @@ type TransactionDetailsProps = {
   type?: TransactionSubType;
   logs?: Log[];
   errorMsg: string | undefined;
+  shorMoreHide?: boolean;
 };
 
 type tableEntry = {
@@ -127,6 +128,7 @@ export const TransactionDetails: FunctionComponent<TransactionDetailsProps> = ({
   type,
   logs = [],
   errorMsg,
+  shorMoreHide
 }) => {
   const [showDetails, setShowDetails] = useState(false);
 
@@ -134,7 +136,7 @@ export const TransactionDetails: FunctionComponent<TransactionDetailsProps> = ({
     Status:
       errorMsg === undefined ? (
         +transaction.shardID > 0 ? (
-          <TxStatusComponent msg={''} />
+          <TxStatusComponent msg={""} />
         ) : (
           <> </>
         )
@@ -190,24 +192,26 @@ export const TransactionDetails: FunctionComponent<TransactionDetailsProps> = ({
           }}
         />
       </Box>
-      <Box align="center" justify="center" style={{ userSelect: "none" }}>
-        <Anchor
-          onClick={() => setShowDetails(!showDetails)}
-          margin={{ top: "medium" }}
-        >
-          {showDetails ? (
-            <>
-              Show less&nbsp;
-              <CaretUpFill size="small" />
-            </>
-          ) : (
-            <>
-              Show more&nbsp;
-              <CaretDownFill size="small" />
-            </>
-          )}
-        </Anchor>
-      </Box>
+      {shorMoreHide ? null : (
+        <Box align="center" justify="center" style={{ userSelect: "none" }}>
+          <Anchor
+            onClick={() => setShowDetails(!showDetails)}
+            margin={{ top: "medium" }}
+          >
+            {showDetails ? (
+              <>
+                Show less&nbsp;
+                <CaretUpFill size="small" />
+              </>
+            ) : (
+              <>
+                Show more&nbsp;
+                <CaretDownFill size="small" />
+              </>
+            )}
+          </Anchor>
+        </Box>
+      )}
     </>
   );
 };

src/components/transaction/helpers.tsx

@@ -247,7 +247,7 @@ export const transactionDisplayValues = (
 
   const text = typeof value === "string" ? value : <>{value}</>;
   const copyText =
-    typeof text === "string" && !["from", "to"].find((item) => item === key)
+    typeof text === "string" && !["from", "to", 'type', 'delegatorAddress', 'validatorAddress'].find((item) => item === key)
       ? text
       : "";
 

src/pages/AddressPage/index.tsx

@@ -53,8 +53,12 @@ export function AddressPage() {
 
   //TODO remove hardcode
   // @ts-ignore
-  const { id } = useParams();
+  let { id } = useParams();
+  id = `${id}`.toLowerCase()
+  id = id.slice(0, 3) === "one" ? getAddress(id).basicHex : id;
+
   const erc20Token = erc20Map[id] || null;
+
   let oneAddress = id;
 
   let type = erc721Map[id]
@@ -122,7 +126,9 @@ export function AddressPage() {
           let inventory =
             type === "erc721"
               ? await getTokenERC721Assets([id])
-              : await (await getTokenERC1155Assets([id])).map((item) => {
+              : await (
+                  await getTokenERC1155Assets([id])
+                ).map((item) => {
                   if (item.meta && item.meta.image) {
                     item.meta.image = `${process.env.REACT_APP_INDEXER_IPFS_GATEWAY}${item.meta.image}`;
                   }

src/pages/AddressPage/tabs/Transactions.tsx

@@ -23,6 +23,7 @@ import {
 import styled, { css } from "styled-components";
 import { TRelatedTransaction } from "src/api/client.interface";
 import { getERC20Columns } from "./erc20Columns";
+import { getAddress } from "src/utils";
 
 const initFilter: Filter = {
   offset: 0,
@@ -402,7 +403,9 @@ export function Transactions(props: {
   const { limit = 10 } = filter[props.type];
 
   // @ts-ignore
-  const { id } = useParams();
+  let { id } = useParams();
+  id = `${id}`.toLowerCase();
+  id = id.slice(0, 3) === "one" ? getAddress(id).basicHex : id;
 
   useEffect(() => {
     const getElements = async () => {

src/pages/StackingTransactionPage/index.tsx

@@ -49,6 +49,7 @@ export const StakingTransactionPage = () => {
         transaction={tx.msg}
         type={subTypeMap[tx.type] || ""}
         errorMsg={''}
+        shorMoreHide={true}
       />
     </BasePage>
   );