Explorer: Add explorer to pnpm workspace (MystenLabs#4152)

* Migrate explorer to pnpm workspace * Add pnpm setup to e2e tests * Remove install command for cypress * Install cypress before runs
ninja88666 · Aug 19, 2022 · 314b36f · 314b36f
1 parent 24ebf22
commit 314b36f
Show file tree

Hide file tree

Showing 9 changed files with 1,791 additions and 11,375 deletions.
diff --git a/.github/workflows/explorer-client-prs.yml b/.github/workflows/explorer-client-prs.yml
@@ -25,24 +25,17 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "16"
-          cache: "yarn"
-          cache-dependency-path: ./explorer/client/yarn.lock
-      - name: Install sdk dependencies
+          cache: "pnpm"
+      - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - name: Build SDK
         run: pnpm --filter @mysten/sui.js build
-      - name: Install yarn dependencies
-        working-directory: ./explorer/client
-        run: yarn install --force
       - name: Lint
-        working-directory: ./explorer/client
-        run: yarn lint
+        run: pnpm --filter sui-explorer lint
       - name: Unit Tests
-        working-directory: ./explorer/client
-        run: yarn test:unit
+        run: pnpm --filter sui-explorer test:unit
       - name: Build
-        working-directory: ./explorer/client
-        run: yarn build
+        run: pnpm --filter sui-explorer build
   end_to_end:
     name: End-to-end tests
     needs: diff
@@ -51,18 +44,23 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - uses: pnpm/[email protected]
+        with:
+          version: 7
       - name: Install Nodejs
         uses: actions/setup-node@v3
         with:
           node-version: "16"
-          cache: "yarn"
-          cache-dependency-path: ./explorer/client/yarn.lock
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
       - name: Build TS sdk
-        working-directory: ./sdk/typescript
-        run: yarn install; yarn build
+        run: pnpm --filter @mysten/sui.js build
+      - name: Install Cypress
+        run: pnpm --filter sui-explorer exec cypress install
       - name: Run e2e tests
         uses: cypress-io/github-action@v4
         with:
-          install-command: yarn --frozen-lockfile
-          start: yarn start:static
+          install: false
+          start: pnpm dev:static
           working-directory: ./explorer/client
diff --git a/explorer/client/README.md b/explorer/client/README.md
@@ -6,30 +6,19 @@
 
 **Requirements**: Node 14.0.0 or later.
 
-Currently the Explorer depends on an unreleased version of `sui.js`, the TypeScript SDK for Sui. Therefore, you need to build the SDK first:
+Dependencies are managed using [`pnpm`](https://pnpm.io/). You can start by installing dependencies in the root of the Sui repository:
 
-```bash
-$ cd <Your Sui Repository>/sdk/typescript
-$ yarn && yarn build
 ```
-
-Then, in the project directory, run:
-
-```bash
-$ yarn
+$ pnpm install
 ```
 
-> **Note:** If you are updating the SDK and Explorer at the same time, you need to run the following commands to make sure the Explorer depends on the updated SDK.
+Currently the Explorer depends on an unreleased version of `sui.js`, the TypeScript SDK for Sui. Therefore, you need to build the SDK first:
 
 ```bash
-$ cd <Your Sui Repository>/sdk/typescript
-$ yarn build
-
-$ cd ../../explorer/client
-$ rm -rf node_modules/ && yarn
+$ pnpm --filter @mysten/sui.js... build
 ```
 
-Before running any of the following scripts `yarn` must run in order to install the necessary dependencies.
+> **Note:** If you are updating the SDK and Explorer at the same time, you need to re-build the SDK whenever you makes changes for it to be reflected in the Explorer.
 
 # How to Switch Environment
 
@@ -38,7 +27,7 @@ Before running any of the following scripts `yarn` must run in order to install
 The Sui Explorer frontend will use the DevNet Gateway server by default: https://gateway.devnet.sui.io:443
 
 ```bash
-yarn start
+pnpm dev
 
 ```
 
@@ -47,18 +36,18 @@ yarn start
 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
-yarn start:local
+pnpm dev:local
 
 ```
 
-Alternatively, having run `yarn start`, click the green button at the top of the page and select the option '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
-yarn start
+pnpm dev
 
 ```
 
@@ -71,27 +60,27 @@ The Sui Explorer can also connect to a local, static JSON dataset that can be fo
 For example, suppose we wish to locally run the website using the static JSON dataset and not the API, then we could run the following:
 
 ```bash
-yarn start:static
+pnpm dev:static
 
 ```
 
-# Other Yarn commands
+# Other pnpm commands
 
-### `yarn test`
+### `pnpm test`
 
 This runs a series of end-to-end browser tests using the website as connected to the static JSON dataset. This command is run by the GitHub checks. The tests must pass before merging a branch into main.
 
-### `yarn build`
+### `pnpm build`
 
 Builds the app for production to the `build` folder.
 
 It bundles React in production mode and optimizes the build for the best performance.
 
-### `yarn lint`
+### `pnpm lint`
 
 Run linting check (prettier/eslint/stylelint).
 
-### `yarn lint:fix`
+### `pnpm lint:fix`
 
 Run linting check but also try to fix any issues.
 

diff --git a/explorer/client/package.json b/explorer/client/package.json
@@ -29,7 +29,7 @@
         "typescript": "^4.5.5"
     },
     "dependencies": {
-        "@mysten/sui.js": "file:../../sdk/typescript",
+        "@mysten/sui.js": "workspace:*",
         "@sentry/react": "^7.6.0",
         "@sentry/tracing": "^7.6.0",
         "@tanstack/react-query": "^4.0.10",
@@ -51,29 +51,23 @@
         "web-vitals": "^2.1.4"
     },
     "scripts": {
-        "start": "react-scripts start",
-        "start:static": "REACT_APP_DATA=static PORT=8080 react-scripts start",
-        "start:local": "REACT_APP_DATA=local react-scripts start",
-        "test": "yarn test:unit && yarn test:cypress",
+        "dev": "react-scripts start",
+        "dev:static": "REACT_APP_DATA=static PORT=8080 react-scripts start",
+        "dev:local": "REACT_APP_DATA=local react-scripts start",
+        "test": "pnpm test:unit && pnpm test:cypress",
         "test:unit": "react-scripts test --detectOpenHandles --watchAll=false",
-        "test:cypress": "start-server-and-test start:static 8080 'cypress run'",
+        "test:cypress": "start-server-and-test dev:static 8080 'cypress run'",
         "build": "react-scripts build",
         "build:staging": "REACT_APP_DATA=staging react-scripts build",
         "build:prod": "REACT_APP_DATA=prod react-scripts build",
         "eslint:check": "eslint --max-warnings=0 .eslintrc.js \"./src/**/*.{js,jsx,ts,tsx}\"",
-        "eslint:fix": "yarn eslint:check --fix",
+        "eslint:fix": "pnpm eslint:check --fix",
         "prettier:check": "prettier -c --ignore-unknown .",
         "prettier:fix": "prettier -w --ignore-unknown .",
         "stylelint:check": "stylelint \"**/*.{css,scss}\"",
-        "stylelint:fix": "yarn stylelint:check --fix",
-        "lint": "yarn eslint:check && yarn prettier:check && yarn stylelint:check",
-        "lint:fix": "yarn eslint:fix && yarn prettier:fix && yarn stylelint:fix"
-    },
-    "resolutions": {
-        "async": "3.2.2",
-        "nth-check": "2.0.1",
-        "@types/react": "17.x",
-        "@types/react-dom": "17.x"
+        "stylelint:fix": "pnpm stylelint:check --fix",
+        "lint": "pnpm eslint:check && pnpm prettier:check && pnpm stylelint:check",
+        "lint:fix": "pnpm eslint:fix && pnpm prettier:fix && pnpm stylelint:fix"
     },
     "browserslist": {
         "production": [

diff --git a/explorer/client/src/components/cookies-consent/CookiesConsent.tsx b/explorer/client/src/components/cookies-consent/CookiesConsent.tsx
@@ -52,7 +52,6 @@ export function CookiesConsent() {
                                 role: 'accept_necessary',
                             },
                         },
-                        // @ts-expect-error no types
                         settings_modal: {
                             title: 'Cookie preferences',
                             save_settings_btn: 'Save settings',

diff --git a/explorer/client/src/context.ts b/explorer/client/src/context.ts
@@ -47,7 +47,7 @@ export function useNetwork(): [
 ] {
     const [searchParams] = useSearchParams();
     const [network, setNetwork] = useState<Network | string>(() => {
-        // If running yarn start:local, ignore what is in storage and use Local network:
+        // 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()) {