fix(staking-ui.footer): fix hash to show CF_PAGES first (#41)

* fix(staking-ui.footer): fix hash to show CF_PAGES first * ci(staking-ui): fix isProd from url to env * fix(staking-ui.footer): fix forget to add () * ci(staking-ui): fix env name * ci(staking-ui): update dev script * update pnpm-lock * fix(staking-ui.footer): remove branch in prod --------- Co-authored-by: Nick <[email protected]>
jventures-jdn · Jun 9, 2023 · 13b1cab · 13b1cab
1 parent e6a4467
commit 13b1cab
Show file tree

Hide file tree

Showing 8 changed files with 5,337 additions and 2,062 deletions.
diff --git a/apps/staking-ui/build.sh b/apps/staking-ui/build.sh
@@ -4,10 +4,14 @@
 
 echo $CF_PAGES_BRANCH
 
-if [[ $CF_PAGES_BRANCH =~ "mainnet" ]]; then
-    REACT_APP_ENVIRONMENT=jfin pnpm build
+if [[ $CF_PAGES_BRANCH == "release/mainnet" ]]; then
+    PROD_MODE=1 NETWORK=jfin pnpm build
+elif [[ $CF_PAGES_BRANCH == "release/testnet" ]]; then
+    PROD_MODE=1 NETWORK=jfintest pnpm build
+elif [[ $CF_PAGES_BRANCH =~ "mainnet" ]]; then
+    NETWORK=jfin pnpm build
 elif [[ $CF_PAGES_BRANCH =~ "testnet" ]]; then
-    REACT_APP_ENVIRONMENT=jfintest pnpm build
+    NETWORK=jfintest pnpm build
 else
     echo Error : network not found in branch name
     exit 1

diff --git a/apps/staking-ui/package.json b/apps/staking-ui/package.json
@@ -54,19 +54,20 @@
   },
   "scripts": {
     "lint": "eslint . --ext .ts,.tsx",
-    "start:jfin": "REACT_APP_ENVIRONMENT=jfin vite preview --port 3000",
-    "start:jfintest": "REACT_APP_ENVIRONMENT=jfintest vite preview --port 3000",
-    "dev:jfin": "REACT_APP_ENVIRONMENT=jfin REACT_APP_COMMIT=$(git rev-parse HEAD) vite --port 3000",
-    "dev:jfintest": "REACT_APP_ENVIRONMENT=jfintest REACT_APP_COMMIT=$(git rev-parse HEAD) vite --port 3000",
-    "build:jfin": "REACT_APP_ENVIRONMENT=jfin pnpm build",
-    "build:jfintest": "REACT_APP_ENVIRONMENT=jfintest pnpm build",
-    "deploy-preview:mainnet": "REACT_APP_ENVIRONMENT=jfin REACT_APP_COMMIT=$(git rev-parse HEAD) pnpm build:jfin && firebase deploy --only hosting:preview:mainnet",
-    "deploy-preview:testnet": "REACT_APP_ENVIRONMENT=jfintest REACT_APP_COMMIT=$(git rev-parse HEAD) pnpm build:jfintest && firebase deploy --only hosting:preview:testnet",
+    "start": "vite preview --port 3000",
+    "dev": "pnpm dev:jfin",
+    "dev:jfin": "NETWORK=jfin COMMIT_HASH=$(git rev-parse HEAD) vite --port 3000",
+    "dev:jfintest": "NETWORK=jfintest COMMIT_HASH=$(git rev-parse HEAD) vite --port 3000",
+    "build:jfin:dev": "NETWORK=jfin pnpm build",
+    "build:jfintest:dev": "NETWORK=jfintest pnpm build",
+    "build:jfin": "PROD_MODE=1 NETWORK=jfin pnpm build",
+    "build:jfintest": "PROD_MODE=1 NETWORK=jfintest pnpm build",
+    "deploy-preview:mainnet": "NETWORK=jfin COMMIT_HASH=$(git rev-parse HEAD) pnpm build:jfin && firebase deploy --only hosting:preview:mainnet",
+    "deploy-preview:testnet": "NETWORK=jfintest COMMIT_HASH=$(git rev-parse HEAD) pnpm build:jfintest && firebase deploy --only hosting:preview:testnet",
     "deploy-preview": "pnpm deploy-preview:testnet && pnpm deploy-preview:mainnet",
-    "deploy:mainnet": "firebase hosting:clone jfin-staking-mainnet-preview:live jfin-staking-mainnet:live",
-    "deploy:testnet": "firebase hosting:clone jfin-staking-testnet-preview:live jfin-staking-testnet:live",
-    "dev": "pnpm start:jfin",
-    "build": "pnpm lint && REACT_APP_COMMIT=$(git rev-parse HEAD) vite build ",
+    "deploy:mainnet": "PROD_MODE=1 firebase hosting:clone jfin-staking-mainnet-preview:live jfin-staking-mainnet:live",
+    "deploy:testnet": "PROD_MODE=1 firebase hosting:clone jfin-staking-testnet-preview:live jfin-staking-testnet:live",
+    "build": "pnpm lint && COMMIT_HASH=$(git rev-parse HEAD) vite build ",
     "test": "SERIAL_MODE=true playwright test --project=chromium",
     "test:ui": "SERIAL_MODE=true playwright test --ui --project=chromium",
     "test:debug": "SERIAL_MODE=true playwright test --debug --project=chromium"

diff --git a/apps/staking-ui/src/components/Layout/Footer/Footer.tsx b/apps/staking-ui/src/components/Layout/Footer/Footer.tsx
@@ -1,21 +1,33 @@
 import './Footer.css'
 import packageJson from '../../../../../../package.json'
+import { isProd } from '@/index'
 
 const Footer = () => {
   return (
-    <div className="footer">
+    <div className="footer container">
       <span>
         V{packageJson.version} Commit:{' '}
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href={`https://github.com/jventures-jdn/project-staking-ui/commit/${process.env.REACT_APP_COMMIT}`}
-        >
-          {`${process.env.REACT_APP_COMMIT?.slice(
-            0,
-            4,
-          )}...${process.env.REACT_APP_COMMIT?.slice(-4)}`}
-        </a>
+        {isProd ? (
+          <span>
+            {' '}
+            {`${(
+              process.env.CF_PAGES_COMMIT_SHA || process.env.COMMIT_HASH
+            )?.slice(0, 7)}`}{' '}
+          </span>
+        ) : (
+          <>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={`https://github.com/jventures-jdn/project-staking-ui/commit/${process.env.COMMIT_HASH}`}
+            >
+              {`${(
+                process.env.CF_PAGES_COMMIT_SHA || process.env.COMMIT_HASH
+              )?.slice(0, 7)}`}
+            </a>{' '}
+            {process.env.CF_PAGES_BRANCH}
+          </>
+        )}
         , Copyright ©2023
         <a href="https://www.jventures.co.th/"> {packageJson.author}</a>
       </span>

diff --git a/apps/staking-ui/src/index.tsx b/apps/staking-ui/src/index.tsx
@@ -16,13 +16,8 @@ import './assets/css/pagination.css'
 import './assets/css/modal.css'
 import { BrowserRouter } from 'react-router-dom'
 
-const hostname = window.location.hostname
-const isProd = [
-  'staking.jfinchain.com',
-  'staking.testnet.jfinchain.com',
-  'jfin-staking-mainnet.web.app',
-  'jfin-staking-testnet.web.app',
-].includes(hostname)
+export const isProd =
+  process.env.PROD_MODE === '1' || process.env.PROD_MODE === 'true' || false
 
 Sentry.init({
   dsn:
@@ -35,7 +30,7 @@ Sentry.init({
   // Session Replay
   replaysSessionSampleRate: isProd ? 0.0 : 0.0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
   replaysOnErrorSampleRate: isProd ? 1.0 : 0.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-  environment: `${process.env.REACT_APP_ENVIRONMENT}_${
+  environment: `${process.env.NETWORK}_${
     isProd ? 'production' : 'development'
   }`,
   attachStacktrace: true,

diff --git a/apps/staking-ui/src/stores/index.ts b/apps/staking-ui/src/stores/index.ts
@@ -1,7 +1,7 @@
 import ModalStore from './ModalStore'
 import WalletConnectStore from './WalletConnectStore'
 
-const currentEnvironment = process.env.REACT_APP_ENVIRONMENT
+const currentEnvironment = process.env.NETWORK
 const modalStore = new ModalStore()
 const walletConnectStore = new WalletConnectStore()