From d1d3aee27aed2f67ebfb498ea585835d758b6185 Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Wed, 14 Sep 2022 10:47:18 -0700 Subject: [PATCH 1/7] Remove targeted builds for explorer --- explorer/client/package.json | 4 +--- .../client/src/components/network/Network.tsx | 8 -------- explorer/client/src/utils/envUtil.ts | 15 ++++++++++----- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/explorer/client/package.json b/explorer/client/package.json index a60ed8fd7eaff..9a14cb3d18696 100644 --- a/explorer/client/package.json +++ b/explorer/client/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "vite --port 3000", + "dev": "VITE_NETWORK=prod vite --port 3000", "dev:static": "VITE_NETWORK=static vite --port 8080", "dev:local": "VITE_NETWORK=local vite --port 3000", "test": "pnpm test:unit && pnpm test:cypress", @@ -11,8 +11,6 @@ "test:cypress": "start-server-and-test dev:static 8080 'cypress run --spec \"cypress/e2e/static/*\"'", "typecheck": "tsc --noEmit", "build": "pnpm typecheck && vite build", - "build:staging": "VITE_NETWORK=staging pnpm build", - "build:prod": "VITE_NETWORK=prod pnpm build", "eslint:check": "eslint --max-warnings=0 .eslintrc.js \"./src/**/*.{js,jsx,ts,tsx}\"", "eslint:fix": "pnpm eslint:check --fix", "prettier:check": "prettier -c --ignore-unknown .", diff --git a/explorer/client/src/components/network/Network.tsx b/explorer/client/src/components/network/Network.tsx index 20510a9818381..ac74d75dfe62c 100644 --- a/explorer/client/src/components/network/Network.tsx +++ b/explorer/client/src/components/network/Network.tsx @@ -8,7 +8,6 @@ import { NetworkContext } from '../../context'; import { Network, getEndpoint } from '../../utils/api/DefaultRpcClient'; import { IS_STATIC_ENV, - IS_LOCAL_ENV, IS_STAGING_ENV, } from '../../utils/envUtil'; @@ -54,13 +53,6 @@ export default function NetworkSelect() { ? styles.active : styles.inactive; - if (IS_LOCAL_ENV) - return ( -
-
Local
-
- ); - if (IS_STATIC_ENV) return (
diff --git a/explorer/client/src/utils/envUtil.ts b/explorer/client/src/utils/envUtil.ts index 1561ef48746a4..3a8c225547f3f 100644 --- a/explorer/client/src/utils/envUtil.ts +++ b/explorer/client/src/utils/envUtil.ts @@ -1,9 +1,14 @@ // Copyright (c) 2022, Mysten Labs, Inc. // SPDX-License-Identifier: Apache-2.0 -export const IS_STATIC_ENV = import.meta.env.VITE_NETWORK === 'static'; -export const IS_LOCAL_ENV = import.meta.env.VITE_NETWORK === 'local'; -export const IS_STAGING_ENV = import.meta.env.VITE_NETWORK === 'staging'; -export const IS_PROD_ENV = import.meta.env.VITE_NETWORK === 'prod'; +export let CURRENT_ENV = import.meta.env.VITE_NETWORK || 'local'; -export const CURRENT_ENV = import.meta.env.VITE_NETWORK; +const { hostname } = window.location; +if (hostname.includes('.sui.io')) { + CURRENT_ENV = hostname.split('.').at(-3) || 'prod'; +} + +export const IS_STATIC_ENV = CURRENT_ENV === 'static'; +export const IS_LOCAL_ENV = CURRENT_ENV === 'local'; +export const IS_STAGING_ENV = CURRENT_ENV === 'staging'; +export const IS_PROD_ENV = CURRENT_ENV === 'prod'; From 33bcaef721134de56dcdc102cbc41a2d514f915f Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Wed, 14 Sep 2022 15:21:14 -0700 Subject: [PATCH 2/7] Fix targeted builds for static --- explorer/client/package.json | 3 +-- .../client/src/components/network/Network.tsx | 5 +--- explorer/client/src/context.ts | 9 ++++--- explorer/client/src/index.tsx | 10 ++++---- explorer/client/src/utils/api/rpcSetting.ts | 7 +++++- explorer/client/src/utils/envUtil.ts | 24 ++++++++++++------- .../client/src/utils/imageModeratorClient.ts | 4 +--- 7 files changed, 33 insertions(+), 29 deletions(-) diff --git a/explorer/client/package.json b/explorer/client/package.json index 9a14cb3d18696..1f728c83d1f3f 100644 --- a/explorer/client/package.json +++ b/explorer/client/package.json @@ -3,9 +3,8 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "VITE_NETWORK=prod vite --port 3000", + "dev": "vite --port 3000", "dev:static": "VITE_NETWORK=static vite --port 8080", - "dev:local": "VITE_NETWORK=local vite --port 3000", "test": "pnpm test:unit && pnpm test:cypress", "test:unit": "vitest run", "test:cypress": "start-server-and-test dev:static 8080 'cypress run --spec \"cypress/e2e/static/*\"'", diff --git a/explorer/client/src/components/network/Network.tsx b/explorer/client/src/components/network/Network.tsx index ac74d75dfe62c..e714a3d8f245c 100644 --- a/explorer/client/src/components/network/Network.tsx +++ b/explorer/client/src/components/network/Network.tsx @@ -6,10 +6,7 @@ import { useCallback, useContext, useState } from 'react'; import { ReactComponent as DownSVG } from '../../assets/Down.svg'; import { NetworkContext } from '../../context'; import { Network, getEndpoint } from '../../utils/api/DefaultRpcClient'; -import { - IS_STATIC_ENV, - IS_STAGING_ENV, -} from '../../utils/envUtil'; +import { IS_STATIC_ENV, IS_STAGING_ENV } from '../../utils/envUtil'; import styles from './Network.module.css'; diff --git a/explorer/client/src/context.ts b/explorer/client/src/context.ts index a41fc9d35c2c1..bd4c31a9cc8b4 100644 --- a/explorer/client/src/context.ts +++ b/explorer/client/src/context.ts @@ -11,8 +11,9 @@ import { } from 'react'; import { useSearchParams } from 'react-router-dom'; -import { Network } from './utils/api/DefaultRpcClient'; -import { IS_LOCAL_ENV, IS_STAGING_ENV, CURRENT_ENV } from './utils/envUtil'; +import { CURRENT_ENV } from './utils/envUtil'; + +import type { Network } from './utils/api/DefaultRpcClient'; const LOCALSTORE_RPC_KEY = CURRENT_ENV + 'sui-explorer-rpc'; const LOCALSTORE_RPC_TIME_KEY = CURRENT_ENV + 'sui-explorer-rpc-lastset'; @@ -47,11 +48,9 @@ export function useNetwork(): [ ] { const [searchParams] = useSearchParams(); const [network, setNetwork] = useState(() => { - // If running pnpm dev:local, ignore what is in storage and use Local network: - if (IS_LOCAL_ENV) return Network.Local; const storedNetwork = window.localStorage.getItem(LOCALSTORE_RPC_KEY); if (!storedNetwork || wasNetworkSetLongTimeAgo()) { - return IS_STAGING_ENV ? Network.Staging : Network.Devnet; + return CURRENT_ENV; } return storedNetwork; }); diff --git a/explorer/client/src/index.tsx b/explorer/client/src/index.tsx index 3fe1034b4101e..647e12b520282 100644 --- a/explorer/client/src/index.tsx +++ b/explorer/client/src/index.tsx @@ -8,19 +8,17 @@ import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import App from './app/App'; -import { CURRENT_ENV, IS_PROD_ENV, IS_STAGING_ENV } from './utils/envUtil'; +import { CURRENT_ENV } from './utils/envUtil'; import './index.css'; -if (IS_STAGING_ENV || IS_PROD_ENV) { +if (import.meta.env.DEV) { Sentry.init({ dsn: 'https://e4251274d1b141d7ba272103fa0f8d83@o1314142.ingest.sentry.io/6564988', integrations: [new BrowserTracing()], - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // TODO: adjust this to a lower value once the Explorer - // has more traffic + // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. + // TODO: Adjust this to a lower value once the Explorer has more traffic tracesSampleRate: 1.0, environment: CURRENT_ENV, }); diff --git a/explorer/client/src/utils/api/rpcSetting.ts b/explorer/client/src/utils/api/rpcSetting.ts index 35433105a4393..0586a8df22d22 100644 --- a/explorer/client/src/utils/api/rpcSetting.ts +++ b/explorer/client/src/utils/api/rpcSetting.ts @@ -3,14 +3,19 @@ export enum Network { Local = 'Local', + Static = 'Static', Devnet = 'Devnet', Staging = 'Staging', + CI = 'CI', } -const ENDPOINTS = { +const ENDPOINTS: Record = { [Network.Local]: 'http://127.0.0.1:9000', + [Network.CI]: 'https://fullnode.devnet.sui.io:443', [Network.Devnet]: 'https://fullnode.devnet.sui.io:443', [Network.Staging]: 'https://fullnode.staging.sui.io:443', + // NOTE: Static is pointed to devnet, but it shouldn't actually fetch data. + [Network.Static]: 'https://fullnode.devnet.sui.io:443', }; export function getEndpoint(network: Network | string): string { diff --git a/explorer/client/src/utils/envUtil.ts b/explorer/client/src/utils/envUtil.ts index 3a8c225547f3f..431cef3409ef5 100644 --- a/explorer/client/src/utils/envUtil.ts +++ b/explorer/client/src/utils/envUtil.ts @@ -1,14 +1,22 @@ // Copyright (c) 2022, Mysten Labs, Inc. // SPDX-License-Identifier: Apache-2.0 -export let CURRENT_ENV = import.meta.env.VITE_NETWORK || 'local'; +import { Network } from './api/rpcSetting'; -const { hostname } = window.location; -if (hostname.includes('.sui.io')) { - CURRENT_ENV = hostname.split('.').at(-3) || 'prod'; +const HOST_TO_NETWORK: Record = { + ci: Network.CI, + staging: Network.Staging, + devnet: Network.Devnet, + static: Network.Static, +}; + +export let CURRENT_ENV: Network = Network.Local; +if (import.meta.env.VITE_NETWORK) { + CURRENT_ENV = HOST_TO_NETWORK[import.meta.env.VITE_NETWORK]; +} else if (window.location.hostname.includes('.sui.io')) { + const host = window.location.hostname.split('.').at(-3) || 'devnet'; + CURRENT_ENV = HOST_TO_NETWORK[host] || Network.Devnet; } -export const IS_STATIC_ENV = CURRENT_ENV === 'static'; -export const IS_LOCAL_ENV = CURRENT_ENV === 'local'; -export const IS_STAGING_ENV = CURRENT_ENV === 'staging'; -export const IS_PROD_ENV = CURRENT_ENV === 'prod'; +export const IS_STATIC_ENV = CURRENT_ENV === Network.Static; +export const IS_STAGING_ENV = CURRENT_ENV === Network.Staging; diff --git a/explorer/client/src/utils/imageModeratorClient.ts b/explorer/client/src/utils/imageModeratorClient.ts index bd507d675051c..fa3d0f36bfb81 100644 --- a/explorer/client/src/utils/imageModeratorClient.ts +++ b/explorer/client/src/utils/imageModeratorClient.ts @@ -1,9 +1,7 @@ // Copyright (c) 2022, Mysten Labs, Inc. // SPDX-License-Identifier: Apache-2.0 -import { IS_LOCAL_ENV, IS_STATIC_ENV } from './envUtil'; - -const ENV_STUBS_IMG_CHECK = IS_STATIC_ENV || IS_LOCAL_ENV; +const ENV_STUBS_IMG_CHECK = import.meta.env.DEV; const HOST = 'https://imgmod.sui.io'; export type ImageCheckResponse = { ok: boolean }; From 5186e0bec6b2e9c943637b8f3f93be6b86a3af8f Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Wed, 14 Sep 2022 15:27:57 -0700 Subject: [PATCH 3/7] Support unit tests --- explorer/client/src/utils/envUtil.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/explorer/client/src/utils/envUtil.ts b/explorer/client/src/utils/envUtil.ts index 431cef3409ef5..cc558bd29ae2d 100644 --- a/explorer/client/src/utils/envUtil.ts +++ b/explorer/client/src/utils/envUtil.ts @@ -13,7 +13,10 @@ const HOST_TO_NETWORK: Record = { export let CURRENT_ENV: Network = Network.Local; if (import.meta.env.VITE_NETWORK) { CURRENT_ENV = HOST_TO_NETWORK[import.meta.env.VITE_NETWORK]; -} else if (window.location.hostname.includes('.sui.io')) { +} else if ( + typeof window !== 'undefined' && + window.location.hostname.includes('.sui.io') +) { const host = window.location.hostname.split('.').at(-3) || 'devnet'; CURRENT_ENV = HOST_TO_NETWORK[host] || Network.Devnet; } From 6d1b2d8a391ef70632f0a99ba2d09874a5ddb02e Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Wed, 14 Sep 2022 15:31:07 -0700 Subject: [PATCH 4/7] Update docs + remove dev:local command --- .github/workflows/explorer-client-prs.yml | 4 ++-- explorer/client/README.md | 28 ++--------------------- 2 files changed, 4 insertions(+), 28 deletions(-) diff --git a/.github/workflows/explorer-client-prs.yml b/.github/workflows/explorer-client-prs.yml index 80ae56a4a98b2..488aba49ca04d 100644 --- a/.github/workflows/explorer-client-prs.yml +++ b/.github/workflows/explorer-client-prs.yml @@ -86,10 +86,10 @@ jobs: uses: cypress-io/github-action@v4 with: install: false - start: pnpm dlx concurrently --kill-others 'cargo run --bin sui-test-validator' 'pnpm dev:local' + start: pnpm dlx concurrently --kill-others 'cargo run --bin sui-test-validator' 'pnpm dev' working-directory: ./explorer/client spec: cypress/e2e/localnet/* # Wait on faucet and explorer: - wait-on: 'http://localhost:3000, http://localhost:9123' + wait-on: "http://localhost:3000, http://localhost:9123" # wait for 2 minutes for the server to respond wait-on-timeout: 120 diff --git a/explorer/client/README.md b/explorer/client/README.md index 2a2dded02149f..f7abfb5eeb340 100644 --- a/explorer/client/README.md +++ b/explorer/client/README.md @@ -14,33 +14,9 @@ $ pnpm install # How to Switch Environment -## Connecting to the DevNet Remote Gateway Server +By default, the Sui Explorer will attempt to connect to a locally running RPC server. Refer to [Local RPC Server & JSON-RPC API Quick Start](../../doc/src/build/json-rpc.md) on setting up a Local RPC Server. -The Sui Explorer frontend will use the DevNet Gateway server by default: https://gateway.devnet.sui.io:443 - -```bash -pnpm dev -``` - -## Connecting to a Local RPC Server - -Refer to [Local RPC Server & JSON-RPC API Quick Start](../../doc/src/build/json-rpc.md) on setting up a Local RPC Server. If we wish to locally run the website using a Local RPC Server, then run the following: - -```bash -pnpm dev:local -``` - -Alternatively, having run `pnpm dev`, click the green button at the top of the page and select the option 'Local'. - -## Connecting to a Custom RPC URL - -First run the following: - -```bash -pnpm dev -``` - -Then, click the green button at the top and select the option 'Custom RPC URL'. Type the Custom RPC URL into the input box that emerges. +If you want to use the explorer with another network, you can select your preferred network in the header of the explorer. ## Connecting to the Static Data From ad1703ff93308efdf3c22375abced2696e6402f5 Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Thu, 15 Sep 2022 14:33:35 -0700 Subject: [PATCH 5/7] Update explorer/client/README.md Co-authored-by: Randall-Mysten <109545725+randall-Mysten@users.noreply.github.com> --- explorer/client/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/explorer/client/README.md b/explorer/client/README.md index f7abfb5eeb340..ed4d8f9d854e9 100644 --- a/explorer/client/README.md +++ b/explorer/client/README.md @@ -14,7 +14,7 @@ $ pnpm install # How to Switch Environment -By default, the Sui Explorer will attempt to connect to a locally running RPC server. Refer to [Local RPC Server & JSON-RPC API Quick Start](../../doc/src/build/json-rpc.md) on setting up a Local RPC Server. +By default, the Sui Explorer attempts to connect to a local RPC server. For more information about using a local RPC server, see [Local RPC Server & JSON-RPC API Quick Start](../../doc/src/build/json-rpc.md). If you want to use the explorer with another network, you can select your preferred network in the header of the explorer. From d883120822ae4242fefcc12c86df356688597a26 Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Fri, 16 Sep 2022 11:46:08 -0700 Subject: [PATCH 6/7] Use prod instead of dev --- .../client/src/components/cookies-consent/CookiesConsent.tsx | 2 +- explorer/client/src/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/explorer/client/src/components/cookies-consent/CookiesConsent.tsx b/explorer/client/src/components/cookies-consent/CookiesConsent.tsx index 58244f310a4ff..19edd5162e702 100644 --- a/explorer/client/src/components/cookies-consent/CookiesConsent.tsx +++ b/explorer/client/src/components/cookies-consent/CookiesConsent.tsx @@ -6,7 +6,7 @@ import { useEffect } from 'react'; const COOKIE_NAME = 'sui_explorer_cookie_consent'; async function loadAndEnableAnalytics() { - if (process.env.NODE_ENV === 'production') { + if (import.meta.env.PROD) { await import('./analytics'); } } diff --git a/explorer/client/src/index.tsx b/explorer/client/src/index.tsx index 647e12b520282..d8bd814722f32 100644 --- a/explorer/client/src/index.tsx +++ b/explorer/client/src/index.tsx @@ -12,7 +12,7 @@ import { CURRENT_ENV } from './utils/envUtil'; import './index.css'; -if (import.meta.env.DEV) { +if (import.meta.env.PROD) { Sentry.init({ dsn: 'https://e4251274d1b141d7ba272103fa0f8d83@o1314142.ingest.sentry.io/6564988', integrations: [new BrowserTracing()], From 04a854a78ce942d2eb07d6c550657d9bf61d8708 Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Fri, 16 Sep 2022 11:49:14 -0700 Subject: [PATCH 7/7] Lint fix --- explorer/client/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/explorer/client/README.md b/explorer/client/README.md index ed4d8f9d854e9..dfd3cb4f971fc 100644 --- a/explorer/client/README.md +++ b/explorer/client/README.md @@ -14,7 +14,7 @@ $ pnpm install # How to Switch Environment -By default, the Sui Explorer attempts to connect to a local RPC server. For more information about using a local RPC server, see [Local RPC Server & JSON-RPC API Quick Start](../../doc/src/build/json-rpc.md). +By default, the Sui Explorer attempts to connect to a local RPC server. For more information about using a local RPC server, see [Local RPC Server & JSON-RPC API Quick Start](../../doc/src/build/json-rpc.md). If you want to use the explorer with another network, you can select your preferred network in the header of the explorer.