fix: outdated version warning

.dependency-cruiser.js

@@ -19,6 +19,21 @@ module.exports = {
         path: '^(domain|constants|sys|_linklist|_stream_wrap)$',
       },
     },
+    // Overriding from recommended set
+    {
+      name: 'not-to-unresolvable',
+      comment:
+        "This module depends on a module that cannot be found ('resolved to disk'). " +
+        "If it's an npm module: add it to your package.json. In all other cases you " +
+        'likely already know what to do.',
+      severity: 'error',
+      from: {},
+      to: {
+        // Depcruiser fails on some legitimate type imports, so allowing them there
+        dependencyTypesNot: ['type-only'],
+        couldNotResolve: true,
+      },
+    },
     {
       name: 'no-orphans',
       severity: 'error',

.github/workflows/build-extension.yml

@@ -8,6 +8,7 @@ env:
   SEGMENT_WRITE_KEY: ${{ secrets.SEGMENT_WRITE_KEY_STAGING }}
   TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
   PR_NUMBER: ${{ github.event.number }}
+  COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
   WALLET_ENVIRONMENT: feature
 
 jobs:
@@ -38,6 +39,8 @@ jobs:
       - pre-run
     steps:
       - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
 
       - uses: actions/cache@v3
         id: cache-node-modules
@@ -47,6 +50,8 @@ jobs:
 
       - uses: ./.github/actions/provision
 
+      - run: echo ${{ github.event.pull_request.head.sha }}
+
       - name: Build project
         run: yarn build
 
@@ -70,7 +75,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          ref: ${{ github.event.pull_request.head.ref }}
+          ref: ${{ github.event.pull_request.head.sha }}
 
       - uses: actions/cache@v3
         id: cache-node-modules

package.json

@@ -5,10 +5,10 @@
   "version": "6.9.2",
   "author": "Hiro Systems PBC",
   "scripts": {
-    "dev": "cross-env WALLET_ENVIRONMENT=development concurrently --raw \"node webpack/dev-server.js\" \"redux-devtools --hostname=localhost --port=8000\"",
+    "dev": "concurrently --raw \"node webpack/dev-server.js\" \"redux-devtools --hostname=localhost --port=8000\"",
     "dev:test-app": "webpack serve --config test-app/webpack/webpack.config.dev.js",
-    "build": "cross-env WALLET_ENVIRONMENT=production webpack --config webpack/webpack.config.prod.js",
-    "build:analyze": "cross-env ANALYZE=true WALLET_ENVIRONMENT=production webpack --config webpack/webpack.config.prod.js",
+    "build": "webpack --config webpack/webpack.config.prod.js",
+    "build:analyze": "cross-env ANALYZE=true webpack --config webpack/webpack.config.prod.js",
     "build:dev": "cross-env WALLET_ENVIRONMENT=development webpack --config webpack/webpack.config.dev.js",
     "build:ext:test": "cross-env WALLET_ENVIRONMENT=testing webpack --config webpack/webpack.config.prod.js",
     "build:ext:test:watch": "cross-env WALLET_ENVIRONMENT=testing webpack --config webpack/webpack.config.prod.js --watch",
@@ -290,7 +290,7 @@
     "cross-env": "7.0.3",
     "crypto-browserify": "3.12.0",
     "deepmerge": "4.3.1",
-    "dependency-cruiser": "14.1.0",
+    "dependency-cruiser": "14.1.1",
     "dotenv-webpack": "8.0.1",
     "esbuild": "0.19.4",
     "esbuild-loader": "4.0.2",

scripts/generate-manifest.js

@@ -3,9 +3,11 @@
  */
 const deepMerge = require('deepmerge');
 
-const IS_DEV = process.env.WALLET_ENVIRONMENT === 'development';
+// Manifest can only be prod or dev
+const WALLET_ENVIRONMENT =
+  process.env.WALLET_ENVIRONMENT === 'production' ? 'production' : 'development';
 
-const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT ?? 'development';
+const IS_DEV = WALLET_ENVIRONMENT === 'development';
 
 const PREVIEW_RELEASE = process.env.PREVIEW_RELEASE;
 
@@ -20,9 +22,6 @@ function generateImageAssetUrlsWithSuffix(suffix = '') {
 }
 
 const environmentIcons = {
-  testing: {
-    icons: generateImageAssetUrlsWithSuffix(PREVIEW_RELEASE ? '-preview' : ''),
-  },
   development: {
     icons: generateImageAssetUrlsWithSuffix('-dev'),
   },
@@ -32,14 +31,12 @@ const environmentIcons = {
 };
 
 const contentSecurityPolicyEnvironment = {
-  testing: `default-src 'none'; connect-src *; style-src 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'wasm-unsafe-eval'; object-src 'none'; frame-src 'none'; frame-ancestors 'none';`,
   development:
     "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src 'none'; frame-ancestors 'none';",
   production: `default-src 'none'; connect-src *; style-src 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'wasm-unsafe-eval'; object-src 'none'; frame-src 'none'; frame-ancestors 'none';`,
 };
 
 const defaultIconEnvironment = {
-  testing: 'assets/connect-logo/Stacks128w.png',
   development: 'assets/connect-logo/Stacks128w-dev.png',
   production: 'assets/connect-logo/Stacks128w.png',
 };

src/app/components/app-version.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { forwardRef } from 'react';
+
+import { HTMLStyledProps, styled } from 'leather-styles/jsx';
+
+import { BRANCH_NAME, COMMIT_SHA } from '@shared/environment';
+
+import { openInNewTab } from '@app/common/utils/open-in-new-tab';
+import { useIsLatestPullRequestBuild } from '@app/query/common/outdated-pr/outdated-pr.query';
+
+import { Tooltip } from './tooltip';
+
+interface AppVersionLabelProps extends HTMLStyledProps<'span'> {
+  isLatestVersion: boolean;
+}
+const AppVersionLabel = forwardRef<HTMLSpanElement, AppVersionLabelProps>(
+  ({ children, isLatestVersion, ...props }: AppVersionLabelProps, ref) => (
+    <styled.span
+      ref={ref}
+      textStyle="mono"
+      fontSize="10px"
+      marginRight="10px"
+      mb="-4px"
+      ml="tight"
+      opacity={0.5}
+      textDecoration={isLatestVersion ? 'none' : 'line-through'}
+      {...props}
+    >
+      {children}
+    </styled.span>
+  )
+);
+
+export function AppVersion() {
+  const { pullRequestLink, isLatestBuild } = useIsLatestPullRequestBuild();
+
+  const version = useMemo(() => {
+    // eslint-disable-next-line no-console
+    console.log('process.env.WALLET_ENVIRONMENT', process.env.WALLET_ENVIRONMENT);
+    switch (process.env.WALLET_ENVIRONMENT) {
+      case 'development':
+        return `dev@${BRANCH_NAME}`;
+      case 'feature':
+        return `${BRANCH_NAME}#${COMMIT_SHA?.slice(0, 8)}`;
+      default:
+        return `v${VERSION}`;
+    }
+  }, []);
+
+  if (!isLatestBuild && process.env.WALLET_ENVIRONMENT === 'feature') {
+    return (
+      <Tooltip label="Outdated PR build, download the latest version">
+        <AppVersionLabel
+          isLatestVersion={false}
+          cursor="pointer"
+          onClick={() => openInNewTab(pullRequestLink ?? '')}
+        >
+          {version}
+        </AppVersionLabel>
+      </Tooltip>
+    );
+  }
+
+  return <AppVersionLabel isLatestVersion>{version}</AppVersionLabel>;
+}

src/app/components/header.tsx

@@ -1,21 +1,20 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import { FiArrowLeft } from 'react-icons/fi';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Box, Flex, FlexProps, IconButton, Stack, Text, useMediaQuery } from '@stacks/ui';
+import { Box, Flex, FlexProps, IconButton, Stack, useMediaQuery } from '@stacks/ui';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { token } from 'leather-styles/tokens';
 
-import { BRANCH_NAME, COMMIT_SHA } from '@shared/environment';
 import { RouteUrls } from '@shared/route-urls';
 
 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 { AppVersion } from './app-version';
 import { LeatherButton } from './button/button';
 import { HamburgerIcon } from './icons/hamburger-icon';
 
@@ -25,15 +24,12 @@ interface HeaderProps extends FlexProps {
   onClose?(): void;
   title?: string;
 }
-export const Header: React.FC<HeaderProps> = memo(props => {
+export function Header(props: HeaderProps) {
   const { actionButton, hideActions, onClose, title, ...rest } = props;
   const { isShowingSettings, setIsShowingSettings } = useDrawers();
   const { pathname } = useLocation();
   const navigate = useNavigate();
 
-  const { data } = useIsOutdatedPrQuery();
-  console.log({ data });
-
   const [desktopViewport] = useMediaQuery(`(min-width: ${token('sizes.desktopViewportMinWidth')})`);
 
   const leatherLogoIsClickable = useMemo(() => {
@@ -45,20 +41,6 @@ export const Header: React.FC<HeaderProps> = memo(props => {
     );
   }, [pathname]);
 
-  const version = useMemo(() => {
-    switch (process.env.WALLET_ENVIRONMENT) {
-      case 'feature':
-        return `${BRANCH_NAME}#${COMMIT_SHA?.slice(0, 8)}`;
-      case 'development':
-        return 'dev';
-      case 'production':
-      case 'preview':
-        return `v${VERSION}`;
-      default:
-        return null;
-    }
-  }, []);
-
   return (
     <Flex
       alignItems={hideActions ? 'center' : 'flex-start'}
@@ -90,18 +72,7 @@ export const Header: React.FC<HeaderProps> = memo(props => {
               isClickable={leatherLogoIsClickable}
               onClick={leatherLogoIsClickable ? () => navigate(RouteUrls.Home) : undefined}
             />
-            <Text
-              display={!version ? 'none' : 'unset'}
-              fontFamily="mono"
-              fontSize="10px"
-              marginRight="10px"
-              mb="-3px"
-              ml="tight"
-              // opacity={0.5}
-              color={data ? 'green' : 'red'}
-            >
-              {version}
-            </Text>
+            <AppVersion />
           </Flex>
         </Flex>
       ) : (
@@ -133,4 +104,4 @@ export const Header: React.FC<HeaderProps> = memo(props => {
       </Stack>
     </Flex>
   );
-});
+}

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

@@ -1,26 +1,40 @@
-import { Endpoints } from '@octokit/types';
+import type { 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'];
+type PrDetailsResp = Endpoints['GET /repos/{owner}/{repo}/pulls/{pull_number}']['response']['data'];
 
-async function getPullRequestDetails(pr: string): Promise<PrInfoResp> {
-  return axios.get(`https://api.github.com/repos/${GITHUB_ORG}/${GITHUB_REPO}/pulls/${pr}`);
+async function getPullRequestDetails(pr: string): Promise<PrDetailsResp> {
+  const resp = await axios.get(
+    `https://api.github.com/repos/${GITHUB_ORG}/${GITHUB_REPO}/pulls/${pr}`
+  );
+
+  return resp.data;
 }
 
-export function useIsOutdatedPrQuery() {
+function usePullRequestDetailsQuery() {
   return useQuery({
     enabled: isDefined(PR_NUMBER) && isDefined(COMMIT_SHA),
-    queryKey: ['outdated-pr-', PR_NUMBER],
+    queryKey: ['pull-request-details', PR_NUMBER],
     async queryFn() {
       return getPullRequestDetails(PR_NUMBER ?? '');
     },
-    select(resp) {
-      return resp.data.head.sha.startsWith(COMMIT_SHA ?? '');
-    },
   });
 }
+
+export function useIsLatestPullRequestBuild() {
+  const { data: pullRequest } = usePullRequestDetailsQuery();
+  if (!pullRequest) return { isLatestBuild: true };
+  // eslint-disable-next-line no-console
+  console.log('debug info', { fromGithubApi: pullRequest.head.sha, fromEnv: COMMIT_SHA });
+  return {
+    // If the latest commit SHA on the PR is not the same one used for this build,
+    // we can assume it's outdated
+    isLatestBuild: pullRequest.head.sha.startsWith(COMMIT_SHA ?? ''),
+    pullRequestLink: pullRequest.html_url,
+  };
+}

src/shared/environment.ts

@@ -2,7 +2,7 @@ export const BRANCH = process.env.GITHUB_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.COMMIT_SHA ?? process.env.GITHUB_SHA;
+export const COMMIT_SHA = process.env.GITHUB_SHA ?? process.env.COMMIT_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

@@ -30,7 +30,9 @@ function executeGitCommand(command) {
 }
 
 const BRANCH_NAME = executeGitCommand('git rev-parse --abbrev-ref HEAD');
-const COMMIT_SHA = executeGitCommand('git rev-parse HEAD');
+const COMMIT_SHA = process.env.COMMIT_SHA;
+
+console.log({ BRANCH_NAME, COMMIT_SHA });
 
 // For non main branch builds, add a random number
 const getVersionWithRandomSuffix = ref => {
@@ -255,6 +257,7 @@ const config = {
       BRANCH_NAME: BRANCH_NAME,
       COMMIT_SHA: COMMIT_SHA,
     }),
+
     new webpack.ProvidePlugin({
       process: 'process/browser',
       Buffer: ['buffer', 'Buffer'],

yarn.lock

@@ -10767,10 +10767,10 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
-[email protected].0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/dependency-cruiser/-/dependency-cruiser-14.1.0.tgz#7312f17e905f6183e3e47298ed2019b20534b217"
-  integrity sha512-JF7F0SFG4K5vXmUMvgYHKQnMuU2JzO18/+r/hTuaGEr3KTlMYkR16WNc+WDqS0y5fjq8khDy/WKO4bR5xhw2sQ==
+[email protected].1:
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/dependency-cruiser/-/dependency-cruiser-14.1.1.tgz#8d466ebe69af7c85af3670ba947c7b196d23260d"
+  integrity sha512-npNLWv11pMH9BW4GBLuA5p6KYOXA9UjVDKQ4DzorEhAac5BS1J23K5I2WpEfkJMpwl9PKMsF4T/GDLSq3pogTw==
   dependencies:
     acorn "8.10.0"
     acorn-jsx "5.3.2"
@@ -10796,7 +10796,7 @@ [email protected]:
     semver-try-require "6.2.3"
     teamcity-service-messages "0.1.14"
     tsconfig-paths-webpack-plugin "4.1.0"
-    watskeburt "1.0.1"
+    watskeburt "2.0.0"
     wrap-ansi "8.1.0"
 
 dequal@^2.0.0:
@@ -20207,10 +20207,10 @@ [email protected], watchpack@^2.4.0:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
-watskeburt@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/watskeburt/-/watskeburt-1.0.1.tgz#157e87319cedac222c2524e138136fad70ba253e"
-  integrity sha512-MOvC8vf3hAVo1HPF/pkba7065mt6A/P9unLlFvYhZ7Yyuht16tmfCYi/LqHABG4hIRMZCbvY8eDWHPy81eSADA==
+watskeburt@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/watskeburt/-/watskeburt-2.0.0.tgz#9599978fdf3c994354390bac7ca368726b6771ac"
+  integrity sha512-RJ961Bcw9sfHr1NqZwvcFBYWo6bN9xE1CeBy6LigLqpzzrdnvsMT5HFg2JhOe4ioDOrCndjNa3tsErIVZtCc3g==
 
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"