chore: remove upgrade banner

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

apps/governance/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState, useCallback } from 'react';
+import { useMemo, useEffect, useState, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AsyncRenderer, Pagination } from '@vegaprotocol/ui-toolkit';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
@@ -86,12 +86,18 @@ export const EpochIndividualRewards = ({
     [epochId, page, refetch, delegationsPagination, pubKey]
   );
 
+  const prevEpochIdRef = useRef<number | null>(null);
+
   useEffect(() => {
-    // when the epoch changes, we want to refetch the data to update the current page
-    if (data) {
+    if (prevEpochIdRef.current === null) {
+      prevEpochIdRef.current = epochId;
+    } else if (epochId !== prevEpochIdRef.current) {
+      // When the epoch changes, we want to refetch the data to update the current page
       refetchData();
     }
-  }, [epochId, data, refetchData]);
+
+    prevEpochIdRef.current = epochId;
+  }, [epochId, refetchData]);
 
   return (
     <AsyncRenderer

apps/trading/.env

@@ -23,7 +23,7 @@ NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=false
+NX_METAMASK_SNAPS=true
 
 NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket

apps/trading/.env.mainnet

@@ -17,10 +17,6 @@ NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-ma
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-mainnet
 NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
 
-
-# TAG name of the current app version - TODO: bump to the latest upon release
-NX_APP_VERSION=v0.21.2-core-0.72.14
-
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true

apps/trading/components/banner/announcement-banner.tsx

@@ -9,5 +9,11 @@ export const AnnouncementBanner = () => {
     return null;
   }
 
-  return <Banner app="console" configUrl={ANNOUNCEMENTS_CONFIG_URL} />;
+  return (
+    <Banner
+      app="console"
+      configUrl={ANNOUNCEMENTS_CONFIG_URL}
+      background="url('/banner-bg.jpg')"
+    />
+  );
 };

apps/trading/components/banner/index.tsx

@@ -1,2 +1 @@
 export * from './announcement-banner';
-export * from './upgrade-banner';

apps/trading/components/banner/upgrade-banner.tsx

@@ -1,84 +0,0 @@
-import { useMemo, useState } from 'react';
-import { gt, prerelease } from 'semver';
-import {
-  ReleasesFeed,
-  useEnvironment,
-  useReleases,
-  Networks,
-} from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
-import {
-  CopyWithTooltip,
-  ExternalLink,
-  Intent,
-  NotificationBanner,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-
-// v0.20.12-core-0.71.4 -> v0.20.12
-// we need to strip the "core" suffix in order to determine whether a release
-// is a pre-release (candidate); example: v.0.21.0-beta.1-core-0.71.4
-const parseTagName = (tagName: string) => tagName.replace(/-core-[\d.]+$/i, '');
-
-type UpgradeBannerProps = {
-  showVersionChange: boolean;
-};
-export const UpgradeBanner = ({ showVersionChange }: UpgradeBannerProps) => {
-  const [visible, setVisible] = useState(true);
-  const { data } = useReleases(ReleasesFeed.FrontEnd);
-  const { APP_VERSION, VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
-
-  const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
-
-  const newest = useMemo(() => {
-    if (!APP_VERSION || !data) return undefined;
-    const newer = data.filter((r) => gt(r.tagName, APP_VERSION));
-    const valid =
-      // filter pre-releases on mainnet
-      VEGA_ENV === Networks.MAINNET
-        ? newer?.filter((r) => !prerelease(parseTagName(r.tagName)))
-        : newer;
-    return valid.sort((a, b) => (gt(a.tagName, b.tagName) ? -1 : 1))[0];
-  }, [APP_VERSION, VEGA_ENV, data]);
-
-  if (!visible || !newest) {
-    return null;
-  }
-
-  return (
-    <NotificationBanner
-      intent={Intent.Warning}
-      onClose={() => {
-        setVisible(false);
-      }}
-    >
-      <div className="uppercase mb-1">
-        <ExternalLink href={CANONICAL_URL}>
-          {t('Upgrade to the latest version of Console')}
-        </ExternalLink>
-      </div>
-      <div data-testid="bookmark-message">
-        <a
-          className="underline"
-          href={newest.htmlUrl}
-          rel="noreferrer nofollow noopener"
-          target="_blank"
-        >
-          {t("View what's changed")}
-        </a>{' '}
-        {t(' or bookmark')}{' '}
-        <a className="underline" href={CANONICAL_URL}>
-          {t('console.vega.xyz')}
-        </a>{' '}
-        <CopyWithTooltip text={CANONICAL_URL}>
-          <button title={t('Copy %s', CANONICAL_URL)}>
-            <span className="sr-only">{t('Copy %s', CANONICAL_URL)}</span>
-            <VegaIcon size={14} name={VegaIconNames.COPY} />
-          </button>
-        </CopyWithTooltip>{' '}
-        {'to always see the latest version.'}
-      </div>
-    </NotificationBanner>
-  );
-};

apps/trading/pages/_app.page.tsx

@@ -38,7 +38,7 @@ import { AppLoader, DynamicLoader } from '../components/app-loader';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
 import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';
-import { AnnouncementBanner, UpgradeBanner } from '../components/banner';
+import { AnnouncementBanner } from '../components/banner';
 import { Navbar } from '../components/navbar';
 import classNames from 'classnames';
 import {
@@ -115,7 +115,6 @@ function AppBody({ Component }: AppProps) {
           />
           <ProtocolUpgradeInProgressNotification />
           <ViewingBanner />
-          <UpgradeBanner showVersionChange={true} />
         </div>
         <div data-testid={`pathname-${location.pathname}`}>
           <Component />

apps/trading/pages/_document.page.tsx

@@ -4,33 +4,24 @@ export default function Document() {
   return (
     <>
       <Head>
-        {/* 
+        {/*
           meta tags
-          - next advised against using _document for this, so they exist in our 
+          - next advised against using _document for this, so they exist in our
           - single page index.page.tsx
         */}
 
-        {/* icons */}
-        <link
-          rel="icon"
-          type="image/x-icon"
-          href="https://static.vega.xyz/favicon.ico"
-        />
-        <link
-          rel="apple-touch-icon"
-          content="https://static.vega.xyz/favicon.ico"
-        />
-
-        {/* fonts */}
+        {/* preload fonts */}
         <link
           rel="preload"
-          href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
+          href="/AlphaLyrae-Medium.woff2"
           as="font"
           type="font/woff2"
         />
 
-        {/* styles */}
-        <link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
+        {/* icons */}
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" content="/favicon.ico" />
+
         {/* eslint-disable-next-line @next/next/no-css-tags */}
         <link rel="stylesheet" href="/preloader.css" media="all" />
 

apps/trading/pages/index.page.tsx

@@ -19,17 +19,11 @@ export default function Index() {
         <meta name="og:url" content="https://console.vega.xyz/" />
         <meta name="og:title" content="Vega Protocol - Console" />
         <meta name="og:site_name" content="Vega Protocol - Console" />
-        <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
-        <meta
-          name="twitter:card"
-          content="https://static.vega.xyz/favicon.ico"
-        />
+        <meta name="og:image" content="./favicon.ico" />
+        <meta name="twitter:card" content="./favicon.ico" />
         <meta name="twitter:title" content="Vega Protocol - Console" />
         <meta name="twitter:description" content="Vega Protocol - Console" />
-        <meta
-          name="twitter:image"
-          content="https://static.vega.xyz/favicon.ico"
-        />
+        <meta name="twitter:image" content="./favicon.ico" />
         <meta name="twitter:image:alt" content="VEGA logo" />
         <meta name="twitter:site" content="@vegaprotocol" />
       </Head>

apps/trading/pages/styles.css

@@ -1,6 +1,13 @@
 @import 'ag-grid-community/styles/ag-grid.css';
 @import 'ag-grid-community/styles/ag-theme-balham.css';
 
+/** Load AlphaLyrae font */
+@font-face {
+  font-family: AlphaLyrae;
+  src: url('/AlphaLyrae-Medium.woff2') format('woff2'),
+    url('/AlphaLyrae-Medium.woff') format('woff');
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

libs/announcements/src/lib/announcements.tsx

@@ -14,6 +14,7 @@ import {
 export type AnnouncementBannerProps = {
   app: AppNameType;
   configUrl: string;
+  background?: string;
 };
 
 // run only if below the allowed maximum delay ~24.8 days (https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value)
@@ -36,6 +37,7 @@ const doesEndInTheFuture = (now: Date, data: Announcement) => {
 export const AnnouncementBanner = ({
   app,
   configUrl,
+  background,
 }: AnnouncementBannerProps) => {
   const [isVisible, setVisible] = useState(false);
   const { data, reload } = useAnnouncement(app, configUrl);
@@ -79,10 +81,10 @@ export const AnnouncementBanner = ({
   }
 
   return (
-    <Banner className="relative px-10">
+    <Banner className="relative px-10" background={background}>
       <div
         data-testid="app-announcement"
-        className="relative font-alpha flex gap-2 justify-center text-center text-lg text-white"
+        className="relative flex justify-center text-lg text-center text-white font-alpha gap-2"
       >
         <span>{data.text}</span>{' '}
         {data.urlText && data.url && (
@@ -90,7 +92,7 @@ export const AnnouncementBanner = ({
         )}
       </div>
       <button
-        className="absolute right-0 top-0 p-4 w-10 h-full flex items-center justify-center text-white"
+        className="absolute top-0 right-0 flex items-center justify-center w-10 h-full p-4 text-white"
         data-testid="app-announcement-close"
         onClick={() => {
           setVisible(false);

libs/ui-toolkit/src/components/announcement-banner/announcement-banner.tsx

@@ -4,14 +4,27 @@ import type { ReactNode } from 'react';
 export interface BannerProps {
   children?: ReactNode;
   className?: string;
+  background?: string;
 }
 
-export const AnnouncementBanner = ({ className, children }: BannerProps) => {
-  const bannerClasses = classnames(
-    "bg-[url('https://static.vega.xyz/assets/img/banner-bg.jpg')] bg-cover bg-center bg-no-repeat",
-    'p-4',
-    className
-  );
+export const AnnouncementBanner = ({
+  className,
+  children,
+  background = 'url("https://static.vega.xyz/assets/img/banner-bg.jpg")',
+}: BannerProps) => {
+  const bannerClasses = classnames('p-4', className);
 
-  return <div className={bannerClasses}>{children}</div>;
+  return (
+    <div
+      className={bannerClasses}
+      style={{
+        background,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+      }}
+    >
+      {children}
+    </div>
+  );
 };

package.json

@@ -87,7 +87,6 @@
     "recharts": "^2.1.2",
     "recursive-key-filter": "^1.0.2",
     "regenerator-runtime": "0.13.7",
-    "semver": "^7.5.1",
     "toml": "^3.0.0",
     "tslib": "^2.3.0",
     "uuid": "^8.3.2",

yarn.lock

@@ -22591,13 +22591,6 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.5.1:
-  version "7.5.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
-  integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==
-  dependencies:
-    lru-cache "^6.0.0"
-
 semver@^7.5.3:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"