fix: outdated version warning

.github/workflows/build-extension.yml

@@ -7,6 +7,7 @@ env:
   SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
   SEGMENT_WRITE_KEY: ${{ secrets.SEGMENT_WRITE_KEY_STAGING }}
   TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
+  PR_NUMBER: ${{ github.event.number }}
   WALLET_ENVIRONMENT: feature
 
 jobs:
@@ -55,7 +56,7 @@ jobs:
       - uses: actions/upload-artifact@v3
         name: Upload Chrome Extension Zip
         with:
-          name: stacks-wallet-chromium
+          name: leather-chromium
           path: leather-chromium.zip
 
   build_firefox:
@@ -90,5 +91,5 @@ jobs:
 
       - uses: actions/upload-artifact@v3
         with:
-          name: stacks-wallet-firefox
+          name: leather-firefox
           path: leather-firefox.zip

package.json

@@ -128,6 +128,7 @@
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",
+    "@octokit/types": "12.0.0",
     "@radix-ui/colors": "2.1.0",
     "@radix-ui/react-accessible-icon": "1.0.3",
     "@radix-ui/react-switch": "1.0.3",

src/app/components/header.tsx

@@ -14,6 +14,7 @@ import { useDrawers } from '@app/common/hooks/use-drawers';
 import { LeatherLogo } from '@app/components/leather-logo';
 import { NetworkModeBadge } from '@app/components/network-mode-badge';
 import { Title } from '@app/components/typography';
+import { useIsOutdatedPrQuery } from '@app/query/common/outdated-pr/outdated-pr.query';
 
 import { LeatherButton } from './button/button';
 import { HamburgerIcon } from './icons/hamburger-icon';
@@ -30,6 +31,9 @@ export const Header: React.FC<HeaderProps> = memo(props => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
 
+  const { data } = useIsOutdatedPrQuery();
+  console.log({ data });
+
   const [desktopViewport] = useMediaQuery(`(min-width: ${token('sizes.desktopViewportMinWidth')})`);
 
   const leatherLogoIsClickable = useMemo(() => {
@@ -43,13 +47,13 @@ export const Header: React.FC<HeaderProps> = memo(props => {
 
   const version = useMemo(() => {
     switch (process.env.WALLET_ENVIRONMENT) {
-      case 'production':
-      case 'preview':
-        return `v${VERSION}`;
       case 'feature':
         return `${BRANCH_NAME}#${COMMIT_SHA?.slice(0, 8)}`;
       case 'development':
         return 'dev';
+      case 'production':
+      case 'preview':
+        return `v${VERSION}`;
       default:
         return null;
     }
@@ -94,6 +98,7 @@ export const Header: React.FC<HeaderProps> = memo(props => {
               mb="-3px"
               ml="tight"
               opacity={0.5}
+              color={data ? 'green' : 'red'}
             >
               {version}
             </Text>

src/app/query/common/outdated-pr/outdated-pr.query.ts

@@ -0,0 +1,26 @@
+import { Endpoints } from '@octokit/types';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+import { GITHUB_ORG, GITHUB_REPO } from '@shared/constants';
+import { COMMIT_SHA, PR_NUMBER } from '@shared/environment';
+import { isDefined } from '@shared/utils';
+
+type PrInfoResp = Endpoints['GET /repos/{owner}/{repo}/pulls/{pull_number}']['response'];
+
+async function getPullRequestDetails(pr: string): Promise<PrInfoResp> {
+  return axios.get(`https://api.github.com/repos/${GITHUB_ORG}/${GITHUB_REPO}/pulls/${pr}`);
+}
+
+export function useIsOutdatedPrQuery() {
+  return useQuery({
+    enabled: isDefined(PR_NUMBER) && isDefined(COMMIT_SHA),
+    queryKey: ['outdated-pr-', PR_NUMBER],
+    async queryFn() {
+      return getPullRequestDetails(PR_NUMBER ?? '');
+    },
+    select(resp) {
+      return resp.data.head.sha.startsWith(COMMIT_SHA ?? '');
+    },
+  });
+}

src/shared/environment.ts

@@ -1,7 +1,8 @@
 export const BRANCH = process.env.GITHUB_REF;
-export const BRANCH_NAME = process.env.GITHUB_HEAD_REF;
+export const BRANCH_NAME = process.env.GITHUB_HEAD_REF ?? process.env.BRANCH_NAME;
+export const PR_NUMBER = process.env.PR_NUMBER;
 export const COINBASE_APP_ID = process.env.COINBASE_APP_ID ?? '';
-export const COMMIT_SHA = process.env.GITHUB_SHA;
+export const COMMIT_SHA = process.env.COMMIT_SHA ?? process.env.GITHUB_SHA;
 export const IS_DEV_ENV = process.env.WALLET_ENVIRONMENT === 'development';
 export const IS_TEST_ENV = process.env.WALLET_ENVIRONMENT === 'testing';
 export const MOONPAY_API_KEY = process.env.MOONPAY_API_KEY ?? '';

webpack/webpack.config.base.js

@@ -10,31 +10,34 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const SRC_ROOT_PATH = path.join(__dirname, '../', 'src');
 const DIST_ROOT_PATH = path.join(__dirname, '../', 'dist');
+const { execSync } = require('child_process');
 
-const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT || 'development';
+const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT ?? 'development';
 const ANALYZE_BUNDLE = process.env.ANALYZE === 'true';
 const IS_PUBLISHING = !!process.env.IS_PUBLISHING;
-const BRANCH = process.env.GITHUB_REF;
 
 const IS_DEV = WALLET_ENVIRONMENT === 'development';
 const IS_PROD = !IS_DEV;
 const MAIN_BRANCH = 'refs/heads/main';
 
+function executeGitCommand(command) {
+  return execSync(command)
+    .toString('utf8')
+    .replace(/[\n\r\s]+$/, '');
+}
+
+const BRANCH_NAME = executeGitCommand('git rev-parse --abbrev-ref HEAD');
+const COMMIT_SHA = executeGitCommand('git rev-parse HEAD');
+
 // For non main branch builds, add a random number
 const getVersionWithRandomSuffix = ref => {
   if (ref === MAIN_BRANCH || !ref || IS_PUBLISHING) return _version;
   return `${_version}.${Math.floor(Math.floor(Math.random() * 1000))}`;
 };
-const VERSION = getVersionWithRandomSuffix(BRANCH);
-
-const smp = new SpeedMeasurePlugin({
-  disable: !ANALYZE_BUNDLE,
-  granularLoaderData: true,
-});
+const VERSION = getVersionWithRandomSuffix(BRANCH_NAME);
 
 const HTML_OPTIONS = {
   inject: 'body',
@@ -247,6 +250,11 @@ const config = {
     new webpack.DefinePlugin({
       VERSION: JSON.stringify(VERSION),
     }),
+
+    new webpack.EnvironmentPlugin({
+      BRANCH_NAME: BRANCH_NAME,
+      COMMIT_SHA: COMMIT_SHA,
+    }),
     new webpack.ProvidePlugin({
       process: 'process/browser',
       Buffer: ['buffer', 'Buffer'],

yarn.lock

@@ -2016,6 +2016,18 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
+"@octokit/openapi-types@^19.0.0":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-19.0.0.tgz#0101bf62ab14c1946149a0f8385440963e1253c4"
+  integrity sha512-PclQ6JGMTE9iUStpzMkwLCISFn/wDeRjkZFIKALpvJQNBGwDoYYi2fFvuHwssoQ1rXI5mfh6jgTgWuddeUzfWw==
+
+"@octokit/[email protected]":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-12.0.0.tgz#6b34309288b6f5ac9761d2589e3165cde1b95fee"
+  integrity sha512-EzD434aHTFifGudYAygnFlS1Tl6KhbTynEWELQXIbTY8Msvb5nEqTZIm7sbPEt4mQYLZwu3zPKVdeIrw0g7ovg==
+  dependencies:
+    "@octokit/openapi-types" "^19.0.0"
+
 "@pandacss/[email protected]", "@pandacss/config@^0.15.4":
   version "0.15.4"
   resolved "https://registry.yarnpkg.com/@pandacss/config/-/config-0.15.4.tgz#3300288a182e02d5f6e1f2907948b396f62b760f"