Merge pull request #642 from onflow/546-feature-remove-background-col…

…our-change-on-dev-builds
onflow · Mar 3, 2025 · be8b4b2 · be8b4b2
2 parents af8b19d + 49a721d
commit be8b4b2
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 49 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -4,22 +4,45 @@ on:
   push:
 
 jobs:
+  determine-env:
+    runs-on: ubuntu-latest
+    outputs:
+      env_name: ${{ steps.set_env.outputs.env_name }}
+    steps:
+      - id: set_env
+        run: |
+          ENV_NAME="${{ github.ref_type == 'tag' && 'production' || github.ref_name == 'master' && 'production' || github.ref_name == 'dev' && 'staging' || 'development' }}"
+          echo "env_name=$ENV_NAME" >> $GITHUB_OUTPUT
+          echo "Environment name: $ENV_NAME"
+
   build:
+    needs: determine-env
     runs-on: ubuntu-latest
-    environment: >-
-      ${{
-        github.ref_type == 'tag' && 'production' ||
-        github.ref_name == 'master' && 'production' ||
-        github.ref_name == 'dev' && 'staging' ||
-        'development'
-      }}
+    environment: ${{ needs.determine-env.outputs.env_name }}
 
     strategy:
       matrix:
         node-version: [22.x]
 
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Fetch all history for tags
+          fetch-tags: true # Explicitly fetch all tags
+
+      - name: Get latest tag
+        id: latest_tag
+        run: |
+          LATEST_TAG=$(git tag --sort=-committerdate | head -n 1 || echo "v0.0.0")
+          echo "LATEST_TAG=$LATEST_TAG" >> $GITHUB_ENV
+          echo "Latest tag: $LATEST_TAG"
+
+      - name: Get repository URL
+        id: repo_url
+        run: |
+          REPO_URL="https://github.com/${{ github.repository }}"
+          echo "REPO_URL=$REPO_URL" >> $GITHUB_ENV
+          echo "Repository URL: $REPO_URL"
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -33,16 +56,20 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Create .env.pro file
+      - name: Create environment files
         run: |
-          cat << EOF > .env.pro
+          # Function to create environment file with given name
+          create_env_file() {
+            local file_name=$1
+            cat << EOF > $file_name
           # Git info
           COMMIT_SHA="${{ github.sha }}"
           BRANCH_NAME="${{ github.ref_name }}"
           PR_TITLE="${{ github.event.pull_request.title || '' }}"
           PR_NUMBER="${{ github.event.pull_request.number || '' }}"
-          BUILD_BACKGROUND="${{ vars.BUILD_BACKGROUND }}"
-          DEPLOYMENT_ENV="${{ github.ref_type == 'tag' && 'production' || github.ref_name == 'master' && 'production' || github.ref_name == 'dev' && 'staging' || 'development' }}"
+          DEPLOYMENT_ENV="${{ needs.determine-env.outputs.env_name }}"
+          LATEST_TAG="${{ env.LATEST_TAG }}"
+          REPO_URL="${{ env.REPO_URL }}"
 
           # Google drive
           GD_BACKUP_NAME="${{ vars.GD_BACKUP_NAME }}"
@@ -65,6 +92,7 @@ jobs:
           API_CONFIG_PATH="${{ vars.API_CONFIG_PATH }}"
           API_BASE_URL="${{ vars.API_BASE_URL }}"
           # manifest
+          MANIFEST_KEY="${{ secrets.MANIFEST_KEY }}"
           OAUTH2_CLIENT_ID="${{ secrets.OAUTH2_CLIENT_ID }}"
           OAUTH2_SCOPES="${{ vars.OAUTH2_SCOPES }}"
           WC_PROJECTID="${{ secrets.WC_PROJECTID }}"
@@ -79,19 +107,33 @@ jobs:
           TEST_RECEIVER_EVM_ADDR="${{ secrets.TEST_RECEIVER_EVM_ADDR }}"
           TEST_RECEIVER_METAMASK_EVM_ADDR="${{ secrets.TEST_RECEIVER_METAMASK_EVM_ADDR }}"
           EOF
+          }
+
+          # Always create .env.pro
+          create_env_file ".env.pro"
+
+          # Create .env.dev if environment is development
+          if [[ "${{ needs.determine-env.outputs.env_name }}" == "development" ]]; then
+            create_env_file ".env.dev"
+          fi
 
       - name: Run tests
         run: pnpm test
 
       - name: Build
-        run: pnpm run build:ci
+        run: |
+          if [[ "${{ needs.determine-env.outputs.env_name }}" == "development" ]]; then
+            pnpm run build:dev-ci
+          else
+            pnpm run build:ci
+          fi
         env:
           CI: true
           COMMIT_SHA: ${{ github.sha }}
           BRANCH_NAME: ${{ github.ref_name }}
           PR_TITLE: ${{ github.event.pull_request.title || '' }}
           PR_NUMBER: ${{ github.event.pull_request.number || '' }}
-          DEPLOYMENT_ENV: ${{ github.ref_type == 'tag' && 'production' || github.ref_name == 'master' && 'production' || github.ref_name == 'dev' && 'staging' || 'development' }}
+          DEPLOYMENT_ENV: ${{ needs.determine-env.outputs.env_name }}
 
       - name: Upload build artifacts
         uses: actions/upload-artifact@v4
@@ -105,28 +147,24 @@ jobs:
           du -sh dist/
 
   test:
-    needs: build
+    needs: [determine-env, build]
     runs-on: ubuntu-latest
     concurrency:
       group: tests-${{ github.workflow }}
       cancel-in-progress: false
-    environment: >-
-      ${{
-        github.ref_type == 'tag' && 'production' ||
-        github.ref_name == 'master' && 'production' ||
-        github.ref_name == 'dev' && 'staging' ||
-        'development'
-      }}
+    environment: ${{ needs.determine-env.outputs.env_name }}
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
+
       - name: Download build artifacts
         uses: actions/download-artifact@v4
         with:
           name: extension-build
           path: dist/
+
       - name: Create .env.test file
         run: |
           cat << EOF > .env.test
@@ -142,6 +180,7 @@ jobs:
           TEST_RECEIVER_EVM_ADDR="${{ secrets.TEST_RECEIVER_EVM_ADDR }}"
           TEST_RECEIVER_METAMASK_EVM_ADDR="${{ secrets.TEST_RECEIVER_METAMASK_EVM_ADDR }}"
           EOF
+
       - name: Install pnpm
         uses: pnpm/action-setup@v4
       - name: Install dependencies

diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+
+# Get the current branch name
+BRANCH_NAME=$(git symbolic-ref --short HEAD)
+
+# Extract issue number from branch name (assuming format like "546-feature-remove-background-colour")
+ISSUE_NUMBER=$(echo $BRANCH_NAME | grep -o '^[0-9]\+')
+
+# Get the current commit message
+COMMIT_MSG=$(cat "$1")
+
+# Only append "Closes #issue" if:
+# 1. Issue number exists in the branch name
+# 2. It's not already in the commit message
+if [[ ! -z "$ISSUE_NUMBER" && ! "$COMMIT_MSG" =~ "Closes #$ISSUE_NUMBER" ]]; then
+  echo "$COMMIT_MSG" > "$1"
+  echo "" >> "$1"  # Add a blank line
+  echo "Closes #$ISSUE_NUMBER" >> "$1"
+fi
diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
     "clean": "mkdir -p dist && rm -rf dist/* && cp -r _raw/* dist",
     "winClean": "if not exist dist mkdir dist && del /Q /F dist\\* && xcopy /E /I _raw dist",
     "winBuild:dev": "set NODE_OPTIONS=--max-old-space-size=8192 && copy _raw\\manifest\\manifest.dev.json _raw\\manifest.json && pnpm run prepare:dev && pnpm run winClean && webpack --progress --env config=dev",
+    "winBuild:dev-ci": "set NODE_OPTIONS=--max-old-space-size=8192 && copy _raw\\manifest\\manifest.dev.json _raw\\manifest.json && pnpm run prepare:dev && pnpm run winClean && webpack --env config=dev --no-watch",
     "build:dev": "NODE_OPTIONS=--max-old-space-size=8192 && cp _raw/manifest/manifest.dev.json _raw/manifest.json && pnpm run prepare:dev && pnpm run clean && webpack --progress --env config=dev",
+    "build:dev-ci": "NODE_OPTIONS=--max-old-space-size=8192 && cp _raw/manifest/manifest.dev.json _raw/manifest.json && pnpm run prepare:dev && pnpm run clean && webpack --env config=dev --no-watch",
     "winBuild:pro": "copy _raw\\manifest\\manifest.pro.json _raw\\manifest.json && pnpm run prepare:pro && pnpm run winClean && webpack --progress --env config=pro",
     "build:ci": "cp _raw/manifest/manifest.pro.json _raw/manifest.json && pnpm run prepare:pro && pnpm run clean && webpack --env config=pro",
     "build:pro": "cp _raw/manifest/manifest.pro.json _raw/manifest.json && pnpm run prepare:pro && pnpm run clean && webpack --progress --env config=pro",

diff --git a/src/background/index.ts b/src/background/index.ts
@@ -36,6 +36,7 @@ import {
   mixpanelTrack,
 } from './service';
 import { getFirbaseConfig } from './utils/firebaseConfig';
+import { setEnvironmentBadge } from './utils/setEnvironmentBadge';
 import { storage } from './webapi';
 const { PortMessage } = Message;
 
@@ -427,25 +428,6 @@ function onMessage(msg, port) {
 
 console.log('Is fetch native?', fetch.toString().includes('[native code]'));
 
-// Set environment badge based on branch
-const setEnvironmentBadge = () => {
-  const deploymentEnv = process.env.DEPLOYMENT_ENV;
-
-  if (deploymentEnv === 'production') {
-    // No badge for production
-    chrome.action.setBadgeText({ text: '' });
-  } else if (deploymentEnv === 'staging') {
-    chrome.action.setBadgeText({ text: 'stg' });
-    chrome.action.setBadgeBackgroundColor({ color: process.env.BUILD_BACKGROUND || '#bf360c' });
-  } else if (deploymentEnv === 'development') {
-    chrome.action.setBadgeText({ text: '#' });
-    chrome.action.setBadgeBackgroundColor({ color: process.env.BUILD_BACKGROUND || '#666666' });
-  } else {
-    chrome.action.setBadgeText({ text: 'dev' });
-    chrome.action.setBadgeBackgroundColor({ color: process.env.BUILD_BACKGROUND || '#666666' });
-  }
-};
-
 // Call it when extension starts
 setEnvironmentBadge();
 

diff --git a/src/background/service/notification.ts b/src/background/service/notification.ts
@@ -3,10 +3,11 @@ import Events from 'events';
 import { ethErrors } from 'eth-rpc-errors';
 import { EthereumProviderError } from 'eth-rpc-errors/dist/classes';
 
-import { preferenceService } from 'background/service';
 import { winMgr } from 'background/webapi';
 import { IS_CHROME, IS_LINUX } from 'consts';
 
+import { setEnvironmentBadge } from '../utils/setEnvironmentBadge';
+
 interface Approval {
   data: {
     state: number;
@@ -35,9 +36,7 @@ class NotificationService extends Events {
   set approval(val: Approval | null) {
     this._approval = val;
     if (val === null) {
-      chrome.action.setBadgeText({
-        text: '',
-      });
+      setEnvironmentBadge();
     } else {
       chrome.action.setBadgeText({
         text: '1',

diff --git a/src/background/utils/setEnvironmentBadge.ts b/src/background/utils/setEnvironmentBadge.ts
@@ -0,0 +1,17 @@
+// Set environment badge based on branch
+
+export const setEnvironmentBadge = () => {
+  const deploymentEnv = process.env.DEPLOYMENT_ENV;
+
+  if (deploymentEnv === 'production') {
+    // No badge for production
+    chrome.action.setBadgeText({ text: '' });
+  } else if (deploymentEnv === 'staging') {
+    chrome.action.setBadgeText({ text: 'stg' });
+  } else if (deploymentEnv === 'development') {
+    chrome.action.setBadgeText({ text: 'dev' });
+  } else {
+    chrome.action.setBadgeText({ text: 'lcl' });
+  }
+  chrome.action.setBadgeBackgroundColor({ color: '#121212' });
+};
diff --git a/src/ui/style/LLTheme.ts b/src/ui/style/LLTheme.ts
@@ -1,8 +1,6 @@
 import { createTheme, type ThemeOptions } from '@mui/material/styles';
 import './fonts.css';
 
-const BUILD_BACKGROUND = process.env.BUILD_BACKGROUND || '#121212'; // Default to dark theme color if not set
-
 const themeOptions: ThemeOptions = {
   components: {
     MuiCssBaseline: {
@@ -57,7 +55,7 @@ const themeOptions: ThemeOptions = {
       light: '#E5404029',
     },
     background: {
-      default: BUILD_BACKGROUND,
+      default: '#121212',
       paper: '#282828',
     },
     primary: {

diff --git a/src/ui/views/Dashboard/Header.tsx b/src/ui/views/Dashboard/Header.tsx
@@ -18,6 +18,7 @@ import {
   Skeleton,
   CircularProgress,
   Icon,
+  Chip,
 } from '@mui/material';
 import Box from '@mui/material/Box';
 import { StyledEngineProvider } from '@mui/material/styles';
@@ -284,6 +285,19 @@ const Header = ({ loading = false }) => {
     [usewallet, toggleUsernameDrawer, history, setNetwork]
   );
 
+  // Function to construct GitHub comparison URL
+  const getComparisonUrl = useCallback(() => {
+    const repoUrl = process.env.REPO_URL || 'https://github.com/onflow/FRW-Extension';
+    const latestTag = process.env.LATEST_TAG || '';
+    const commitSha = process.env.COMMIT_SHA || '';
+
+    if (latestTag && commitSha) {
+      return `${repoUrl}/compare/${latestTag}...${commitSha}`;
+    }
+
+    return `${repoUrl}/commits`;
+  }, []);
+
   const AccountFunction = (props) => {
     return (
       <ListItem
@@ -490,11 +504,11 @@ const Header = ({ loading = false }) => {
       </Drawer>
     );
   };
-
+  const deploymentEnv = process.env.DEPLOYMENT_ENV || 'local';
   const appBarLabel = (props) => {
     return (
       <Toolbar sx={{ height: '56px', width: '100%', display: 'flex', px: '0px' }}>
-        <Box sx={{ flex: '0 0 68px', position: 'relative' }}>
+        <Box sx={{ flex: '0 0 68px', position: 'relative', display: 'flex', alignItems: 'center' }}>
           {isPending && (
             <CircularProgress
               size={'28px'}
@@ -532,6 +546,61 @@ const Header = ({ loading = false }) => {
               height="20px"
             />
           </IconButton>
+          {deploymentEnv !== 'production' && (
+            <Box sx={{ position: 'absolute', left: '30px', top: '-8px', zIndex: 10 }}>
+              <Tooltip
+                title={
+                  <Box>
+                    <Typography variant="caption">
+                      {`Build: ${process.env.DEPLOYMENT_ENV}`}
+                    </Typography>
+                    {process.env.LATEST_TAG && process.env.COMMIT_SHA && (
+                      <Typography variant="caption" display="block">
+                        {`Compare: ${process.env.LATEST_TAG}...${process.env.COMMIT_SHA?.substring(0, 7)}`}
+                      </Typography>
+                    )}
+                    <Typography variant="caption" display="block">
+                      {`Repo: ${process.env.REPO_URL?.replace('https://github.com/', '') || 'onflow/FRW-Extension'}`}
+                    </Typography>
+                    <Typography variant="caption" display="block">
+                      Click to view changes
+                    </Typography>
+                  </Box>
+                }
+                arrow
+              >
+                <Chip
+                  label={deploymentEnv}
+                  size="small"
+                  color={
+                    deploymentEnv === 'staging'
+                      ? 'default'
+                      : deploymentEnv === 'development'
+                        ? 'warning'
+                        : 'error'
+                  }
+                  sx={{
+                    height: '18px',
+                    fontSize: '10px',
+                    fontWeight: 'bold',
+                    minWidth: '16px',
+                    maxWidth: '90px',
+                    cursor: 'pointer',
+                    '& .MuiChip-label': {
+                      padding: '0 8px',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    },
+                  }}
+                  onClick={() => {
+                    const url = getComparisonUrl();
+                    window.open(url, '_blank');
+                  }}
+                />
+              </Tooltip>
+            </Box>
+          )}
         </Box>
 
         <Box