[explorer] All changes from gdc demo (MystenLabs#1041)

* bring all changes to explorer from explorer-rest branch

* remove commented out code

* remove unused vars in rpc.ts

* remove more dead code in rpc

* fix sui addr regex in rpc lib

* fix indentation for isValidHttpUrl

* clarify TODOs in rpc

* use unattached var in constructor

* fix equality check with SUI_ADDRESS_LEN

* remove unused type param U in modifyForDemo

* make setShowDescription call a const ()=>

* make setShowProperties call a const ()=>

* make setShowConnectedEntities call a const ()=>

* convert onClick functions from arrow func to function()

* remove return statements from void functions

* jsx-no-bind back to error

* Delete rpc_basictest.ts

* remove console.logs and dead code

* remove console log in address result

* remove utility file console logs

* convert functions to useCallback() memoized versions

* export isValidSuiIdBytes

* restore copyright in head and footer.tsx

* restore copyright to App.tsx

* removes conversion scripts folder

* resolves lint messages including error that hooks were conditionally called

* prevents display of Address Results pages with no objects

* remove SuiParentChildRef

* remove modifyForDemo

* add var for data.data.contents

* move string utils into their own file

* cleanup ObjectResult imports

* split utility funcs file into search and mock

* change searchUtil formatting

* improve searchUtil TODO

* remove duplicate hexToAscii function

* move isValidHttpUrl to stringUtils

* change unused map vars to _

* move rpc settings handling into separate file, rpc -> SuiRpcClient

* fix imports with new rpc file

* move isSuiAddressHex into file and fix length

* SuiAddressBytes -> AddressBytes

* remove isValidSuiIdBytes

* SuiAddressHexStr -> AddressHexStr

* fix rpc setting import

* remove two unused rpc types

* update MoveVec type, remove unused const

* allow any[] type in moveCall

* demo_types -> demoTypes

* prettier changes

* fix casing of css selectors

* add licenses for nft_mirror dir

* add licenses for explorer dir

* comment out some tests that need updating or removing

* comment out outdated tests

* remove unused code in app.tsx

Co-authored-by: Andrew Burnie <[email protected]>

explorer/README.md

@@ -1,29 +1,71 @@
 # Sui Explorer
-A chain explorer for the Sui network, similiar in functionality to [Etherscan](https://etherscan.io/) or [Solana Explorer](https://explorer.solana.com/).
+Sui Explorer is a chain explorer for the Sui network, similiar in functionality to [Etherscan](https://etherscan.io/) or [Solana Explorer](https://explorer.solana.com/). Use Sui Explorer to see the latest blocks, transactions, and cluster statistics.
 
-## Proposed Basic Architecture
+## Data source / RPC URL
+The Sui Explorer front end can use any Sui RPC URL as a backend, but it must have Cross-Origin Resource Sharing (CORS) set up.
 
-This is described in order of how data flows, from the source network to the end usder.
+To change the RPC URL, pass a [url-encoded](https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding) URL to the RPC parameter. So to use http://127.0.0.1:5000, the Sui REST API's default local port, use the URL:
 
-* We get raw data from the network using the in-progress "bulk sync" API
+http://127.0.0.1:3000?rpc=http%3A%2F%2F127.0.0.1%3A5000%2F
 
-    This raw data is dumped into a document store / noSQL kind of DB (which one not decided yet).
+This defaults to https://demo-rpc.sui.io (for now).
 
-    Plenty of the Cosmos explorers use this step, citing how much easier it makes syncing history & recovering from periods of being offline. Access to untouched historical data means that any errors in converting the data into relational table form can be corrected later.
+The RPC URL preference will be remembered for three hours before being discarded - this way, it's not necessary to continually pass it on every page.
 
-* A sync process runs to move new data from this raw cache into a more structured, relational database. 
+If the Sui Explorer is served over HTTPS, the RPC also needs to be HTTPS (proxied from HTTP).
 
-    This DB is PostgreSQL, unless there's a strong argument for using something else presented. 
+## Running Locally
 
-    We index this database to optimize common queries - "all transactions for an address", "objects owned by address", etc. 
+This is how you can run with a local REST server and local copy of the Sui Explorer.
 
-* The HTTP api is implemented as a Rust webserver, talks to the relational database & encodes query results as JSON
+Make sure you are in the `explorer-rest` project of the Sui repository, where this README resides.
 
-* Browser frontend is a standard React app, powered by the HTTP api
+### Getting started
 
+You need [Rust](https://www.rust-lang.org/tools/install) & [Node.js](https://nodejs.org/en/download/) installed for this.
 
-## Sub-Projects
+From the root of the `explorer-rest` project, run:
 
-Front-end code goes in `client` folder,
+```bash
+cargo build --release          # build the network and rest server
+./target/release/rest_server        # run the rest server - defaults to port 5000
+```
 
-All back-end pieces (historical data store, relational DB, & HTTP layer) go in `server` sub-folders.
+Now in another terminal tab, in another copy of the repo checked out to `experimental-rest-api`, run this from the repo root: 
+
+```
+cd explorer/client       
+npm install              # install client dependencies
+npm start                # start the development server for the client  
+```
+
+If everything worked, you should be able to view your local explorer at:
+http://127.0.0.1:3000?rpc=http%3A%2F%2F127.0.0.1%3A5000%2F
+
+### CORS issues / USE FIREFOX LOCALLY
+
+Due to current technical issues, the REST API doesn't have CORS headers setup and must be proxied to add them. The demo server has this.
+
+Chrome doesn't let you make requests without CORS on the local host, but **Firefox does**; so it is **strongly recommended to use Firefox for local testing**.
+
+## ----------------------------------------------------------------------
+## no more about running locally
+## ----------------------------------------------------------------------
+
+## Proposed basic architecture
+
+This is described in order of how data flows, from the source network to the end user. Browser front end is a standard React app, powered by the HTTP API:
+
+1. We get raw data from the network using the in-progress "bulk sync" API.
+1. This raw data is dumped into a document store / noSQL kind of database (which one not decided yet).
+1. A sync process runs to move new data from this raw cache into a more structured, relational database. (This DB is PostgreSQL, unless there's a strong argument for using something else presented.)
+1. We index this database to optimize common queries: "all transactions for an address", "objects owned by address", etc. 
+1. The HTTP API is implemented as a Rust webserver, talks to the relational database & encodes query results as JSON.
+
+Plenty of the Cosmos explorers use the database step, citing how much easier it makes syncing history and recovering from periods of being offline. Access to untouched historical data means that any errors in converting the data into relational table form can be corrected later.
+
+## Sub-projects
+
+Front end code goes in `client` folder.
+
+All back-end pieces (historical data store, relational DB, and HTTP layer) go in `server` sub-folders.

explorer/client/.eslintrc.js

@@ -33,5 +33,6 @@ module.exports = {
                 disallowTypeAnnotations: true,
             },
         ],
+        'react/jsx-key': ['error', {}],
     },
 };

explorer/client/README.md

@@ -4,31 +4,32 @@
 
 **Requirements**: Node 14.0.0 or later version
 
-In the project directory, you can run:
+In the project directory, run:
 
 ### `npm i`
 
 Before running any of the following scripts `npm i` must run in order to install the necessary dependencies.
 
 ### `npm start`
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Runs the app in the development mode.
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+Open http://localhost:3000 to view it in the browser.
+
+The page will reload if you make edits. You will also see any lint errors in the console.
 
 ### `npm run start:dev`
 
-Same as `npm start` but runs `prettier:fix:watch` as well.
+Same as `npm start` but runs `prettier:fix:watch` to format the files.
 
 ### `npm test`
 
 Launches the test runner in the interactive watch mode.
 
 ### `npm run build`
 
-Builds the app for production to the `build` folder.\
+Builds the app for production to the `build` folder.
+
 It bundles React in production mode and optimizes the build for the best performance.
 
 ### `npm run lint`
@@ -46,6 +47,6 @@ It can be useful during development to format automatically all the files that c
 
 ## Deployment
 
-For guidance on deployment, plese see here: https://create-react-app.dev/docs/deployment/.
+For guidance on deployment, plese see here: https://create-react-app.dev/docs/deployment/
 
-Because of the addition of `react-router` further changes will be needed that depend on the exact infrastructure used. Please consult section **Serving Apps with Client-Side Routing**.
+Because of the addition of `react-router`, further changes will be needed that depend on the exact infrastructure used. Please consult section **Serving Apps with Client-Side Routing**.

explorer/client/package.json

@@ -25,10 +25,13 @@
         "typescript": "^4.5.5"
     },
     "dependencies": {
+        "ace-builds": "^1.4.14",
         "classnames": "^2.3.1",
         "react": "^17.0.2",
+        "react-ace": "^9.5.0",
         "react-dom": "^17.0.2",
         "react-router-dom": "^6.2.1",
+        "swr": "^1.2.2",
         "web-vitals": "^2.1.4"
     },
     "scripts": {

explorer/client/public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link rel="icon" href="%PUBLIC_URL%/logo192.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
         <meta
@@ -11,7 +11,7 @@
         />
         <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-        <title>Sui Explorer</title>
+        <title>SuiExplorer</title>
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>

explorer/client/public/manifest.json

@@ -2,20 +2,10 @@
     "short_name": "sui-explorer",
     "name": "Sui Explorer",
     "icons": [
-        {
-            "src": "favicon.ico",
-            "sizes": "64x64 32x32 24x24 16x16",
-            "type": "image/x-icon"
-        },
         {
             "src": "logo192.png",
             "type": "image/png",
             "sizes": "192x192"
-        },
-        {
-            "src": "logo512.png",
-            "type": "image/png",
-            "sizes": "512x512"
         }
     ],
     "start_url": ".",