ci(release): publish latest release

RELEASE

 IPFS hash of the deployment:
-- CIDv0: `QmTcGpuhdwLHa429mtTtCTpbSk31UsQDAnDkiuD5BwvBPz`
-- CIDv1: `bafybeicojl6bm5fa5lxr4fluhdsc2lhj5nkanb5vo4dg7vjdiwbkhgy5qu`
+- CIDv0: `QmciGvhbiSVjSu6u9JwRzFp5uBRnawnd5M8NMk8d9XNACT`
+- CIDv1: `bafybeigvrxb4vjhzc3k7xqtwa4dijoev545kpjmo4anikgsbckku45k4qq`
 
 The latest release is always mirrored at [app.uniswap.org](https://app.uniswap.org).
 
@@ -10,70 +10,15 @@ You can also access the Uniswap Interface from an IPFS gateway.
 Your Uniswap settings are never remembered across different URLs.
 
 IPFS gateways:
-- https://bafybeicojl6bm5fa5lxr4fluhdsc2lhj5nkanb5vo4dg7vjdiwbkhgy5qu.ipfs.dweb.link/
-- https://bafybeicojl6bm5fa5lxr4fluhdsc2lhj5nkanb5vo4dg7vjdiwbkhgy5qu.ipfs.cf-ipfs.com/
-- [ipfs://QmTcGpuhdwLHa429mtTtCTpbSk31UsQDAnDkiuD5BwvBPz/](ipfs://QmTcGpuhdwLHa429mtTtCTpbSk31UsQDAnDkiuD5BwvBPz/)
+- https://bafybeigvrxb4vjhzc3k7xqtwa4dijoev545kpjmo4anikgsbckku45k4qq.ipfs.dweb.link/
+- https://bafybeigvrxb4vjhzc3k7xqtwa4dijoev545kpjmo4anikgsbckku45k4qq.ipfs.cf-ipfs.com/
+- [ipfs://QmciGvhbiSVjSu6u9JwRzFp5uBRnawnd5M8NMk8d9XNACT/](ipfs://QmciGvhbiSVjSu6u9JwRzFp5uBRnawnd5M8NMk8d9XNACT/)
 
-## 5.7.0 (2024-02-07)
+## 5.8.0 (2024-02-09)
 
 
 ### Features
 
-* **web:** "open limits" button in MP (#5952) ffcff07
-* **web:** [info] convert v3 & v2 pools queries to GQL BE (#5851) 925b6e7
-* **web:** [info] Implement search for top pools (#6075) 23b79fa
-* **web:** [info] numerator based pdp tx table (#5989) 352642b
-* **web:** [info] TDP color extraction (#5981) 5944365
-* **web:** [info] truncate timestamps on tx tables (#5777) 6327b62
-* **web:** [info] Use token links in Tx tables (#5997) 8ca5e44
-* **web:** add "open limits" button below the limit form (#6039) 74120b4
-* **web:** Add feature flagging for limit fees (#6055) 14a026b
-* **web:** Add fees to limit orders (#5917) f318b89
-* **web:** add incrementing buttons to limit form (#5718) 57754f1
-* **web:** Add L2 logos to token icons in token selector and swap review (#5934) a1db924
-* **web:** Add network switcher in token selector (#5867) 58f760b
-* **web:** add warning to review modal for limits (#6037) 6c7ce6c
-* **web:** allow importing any package from packages/* (#5974) 2cffcf3
-* **web:** Autofill limit market price (#5862) 327834c
-* **web:** basel grotesk fonts (#6036) 9dded2a
-* **web:** build limits-specific ActivityRow for Mini Portfolio (#5971) fdbc470
-* **web:** cancel X orders (#5424) 861a906
-* **web:** constrain limits tokens to default list (#5749) 94ab5f3
-* **web:** create reusable Dialog component (#6000) c161ab2
-* **web:** filter limits from pending activity (#5951) 3a63a90
-* **web:** fix content in review/error modal for limits (#5954) 46f9de0
-* **web:** fixes to eslint config for formatting on save (#5970) b5b9e1b
-* **web:** limit order submission (#5680) 60a1c39
-* **web:** limit orders in MP and fixes (#5842) 2bd205f
-* **web:** limits cancel modal (#6032) 5038aef
-* **web:** limits cancel multiple (#6107) 0859595
-* **web:** limits menu in MP (#5953) 706633a
-* **web:** restyle swap tabs (#5722) 6e331ab
-* **web:** switch ordering for Swap header (#5879) f7a2976
-* **web:** update TDP tab titles again (#5724) 3666d5f
-
-
-### Bug Fixes
-
-* **web:** [info] add back info section to TDP on mobile view (#5799) b54daac
-* **web:** [info] Allow filter row item selection on mobile (#5969) fa83983
-* **web:** [info] don't grow first column in the table (#6093) 31230de
-* **web:** [landing-page] hotfix (#6180) d1c3c2e
-* **web:** [landing-page] update token cloud (#5985) 0678e9c
-* **web:** Add one to UniswapX nonce and lowercase swapper address  (#6112) 1ee4657
-* **web:** console error and unused flag (#6116) d05720b
-* **web:** fix cypress not running for web checks (#5949) 9297239
-* **web:** fix web_quality_checks always not running web cypress (#6025) 917df2e
-* **web:** hotfix send fixes (#6140) b930680
-* **web:** limits local activity tracking bugs (#6106) 7d7f78d
-* **web:** make currency url params case-insensitive (#5834) 768940b
-* **web:** move checks out of web_quality to rely on turbo more (#6089) 1e0db1d
-* **web:** re-disable uniswapx e2e tests (#5950) eff86ee
-* **web:** remove helper text in swap preview (#5861) f5e76d1
-* **web:** Revert the correct PR for blank page bug (#5945) d1a2f29
-* **web:** send flow UI fixes (#6031) e393802
-* **web:** swap header tab button spacing (#6092) b37007d
-* **web:** token page swap reset (#6098) f4070a3
-* **web): Revert "chore(web:** added opensea api to csp and made long csp directives into lists" (#5936) 47858e0
+* **web:** outage banner for arbitrum, optimism, polygon (#6218) e57ca63
 
 

VERSION

-web/5.7.0
\ No newline at end of file
+web/5.8.0
\ No newline at end of file

apps/web/src/components/Banner/MobileAppAnnouncementBanner/index.tsx

@@ -24,7 +24,7 @@ import {
   StyledXButton,
   TextContainer,
   Thumbnail,
-} from './styled'
+} from '../shared/styled'
 
 export default function WalletAppPromoBanner() {
   const [hideAppPromoBanner, toggleHideAppPromoBanner] = useHideAppPromoBanner()

apps/web/src/components/Banner/Outage/OutageBanner.tsx

+import { Trans } from '@lingui/macro'
+import { ChainId } from '@uniswap/sdk-core'
+import { Container, PopupContainer, StyledXButton, TextContainer } from 'components/Banner/shared/styled'
+import { chainIdToBackendName } from 'graphql/data/util'
+import { useState } from 'react'
+import { Globe } from 'react-feather'
+import styled, { useTheme } from 'styled-components'
+import { ExternalLink, ThemedText } from 'theme/components'
+import { capitalize } from 'tsafe'
+
+const IconContainer = styled.div`
+  height: 100%;
+  margin: 12px 0 0 12px;
+  align-self: flex-start;
+`
+
+const IconBackground = styled.div`
+  background-color: #1f1e02;
+  padding: 10px;
+  border-radius: 12px;
+`
+
+const StyledPopupContainer = styled(PopupContainer)`
+  height: unset;
+`
+
+const OutageTextContainer = styled(TextContainer)`
+  padding: 10px 10px 10px 0;
+`
+
+const HelpCenterLink = styled(ExternalLink)`
+  font-size: 14px;
+  margin-top: 4px;
+`
+
+export function getOutageBannerSessionStorageKey(chainId: ChainId) {
+  return `hideOutageBanner-${chainId}`
+}
+
+export function OutageBanner({ chainId }: { chainId: ChainId }) {
+  const [hidden, setHidden] = useState(false)
+  const theme = useTheme()
+
+  return (
+    <StyledPopupContainer show={!hidden}>
+      <Container>
+        <IconContainer>
+          <IconBackground>
+            <Globe size={28} color={theme.warning2} />
+          </IconBackground>
+        </IconContainer>
+        <OutageTextContainer>
+          <ThemedText.BodySmall lineHeight="20px">
+            <Trans>Data will be back soon</Trans>
+          </ThemedText.BodySmall>
+          <ThemedText.LabelMicro>
+            <Trans>
+              The subgraph for {capitalize(chainIdToBackendName(chainId).toLowerCase())} is down right now, but we
+              expect the issue to be resolved shortly.
+            </Trans>
+          </ThemedText.LabelMicro>
+          <ThemedText.LabelMicro>
+            <Trans>You can still swap and provide liquidity for this token without issue.</Trans>
+          </ThemedText.LabelMicro>
+          <HelpCenterLink href="https://support.uniswap.org/hc/en-us/articles/23952001935373-Subgraph-downtime">
+            <Trans>Learn more</Trans>
+          </HelpCenterLink>
+        </OutageTextContainer>
+        <StyledXButton
+          data-testid="uniswap-outage-banner"
+          size={24}
+          onClick={() => {
+            setHidden(true)
+            sessionStorage.setItem(getOutageBannerSessionStorageKey(chainId), 'true')
+          }}
+        />
+      </Container>
+    </StyledPopupContainer>
+  )
+}

apps/web/src/components/Banner/shared/Banners.tsx

+import { InterfacePageName } from '@uniswap/analytics-events'
+import { ChainId } from '@uniswap/sdk-core'
+import WalletAppPromoBanner from 'components/Banner/MobileAppAnnouncementBanner'
+import { OutageBanner, getOutageBannerSessionStorageKey } from 'components/Banner/Outage/OutageBanner'
+import { useOutageBanners } from 'featureFlags/flags/outageBanner'
+import { getValidUrlChainId } from 'graphql/data/util'
+import { useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
+import { getCurrentPageFromLocation } from 'utils/urlRoutes'
+
+export function Banners() {
+  const { pathname } = useLocation()
+  const currentPage = getCurrentPageFromLocation(pathname)
+
+  const outageBanners = useOutageBanners()
+
+  // Calculate the chainId for the current page's contextual chain (e.g. /tokens/ethereum or /tokens/arbitrum), if it exists.
+  const pageChainId = useMemo(() => {
+    const chainName = pathname.split('/').find((maybeChainName) => {
+      const validatedChainId = getValidUrlChainId(maybeChainName)
+      return validatedChainId !== undefined
+    })
+    return chainName ? getValidUrlChainId(chainName) : undefined
+  }, [pathname])
+
+  const showOutageBanner = useMemo(() => {
+    return (
+      currentPage &&
+      pageChainId &&
+      outageBanners[pageChainId as ChainId] &&
+      !sessionStorage.getItem(getOutageBannerSessionStorageKey(pageChainId)) &&
+      [
+        InterfacePageName.EXPLORE_PAGE,
+        InterfacePageName.TOKEN_DETAILS_PAGE,
+        // InterfacePageName.POOL_DETAILS_PAGE,
+        InterfacePageName.TOKENS_PAGE,
+      ].includes(currentPage)
+    )
+  }, [currentPage, outageBanners, pageChainId])
+
+  // Outage Banners should take precedence over the Wallet Download Banner
+  if (pageChainId && showOutageBanner) {
+    return <OutageBanner chainId={pageChainId} />
+  }
+
+  return <WalletAppPromoBanner />
+}

apps/web/src/components/Banner/MobileAppAnnouncementBanner/styled.tsx → apps/web/src/components/Banner/shared/styled.tsx

@@ -11,11 +11,12 @@ export const PopupContainer = styled.div<{ show: boolean }>`
   color: ${({ theme }) => theme.neutral1};
   position: fixed;
   z-index: ${Z_INDEX.sticky};
-  user-select: none;
-  border-radius: 20px;
   bottom: 40px;
   right: 20px;
   width: 360px;
+
+  user-select: none;
+  border-radius: 20px;
   height: 92px;
   border: 1.3px solid ${({ theme }) => theme.surface3};
 

apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -15,6 +15,11 @@ import { useExitAnimationFlag, useLandingPageV2Flag } from 'featureFlags/flags/l
 import { useLimitsEnabledFlag } from 'featureFlags/flags/limits'
 import { useLimitsFeeesEnabledFlag } from 'featureFlags/flags/limitsFees'
 import { useMultichainUXFlag } from 'featureFlags/flags/multichainUx'
+import {
+  useOutageBannerArbitrum,
+  useOutageBannerOptimism,
+  useOutageBannerPolygon,
+} from 'featureFlags/flags/outageBanner'
 import { useProgressIndicatorV2Flag } from 'featureFlags/flags/progressIndicatorV2'
 import { useQuickRouteMainnetFlag } from 'featureFlags/flags/quickRouteMainnet'
 import { useSendEnabledFlag } from 'featureFlags/flags/send'
@@ -397,6 +402,26 @@ export default function FeatureFlagModal() {
             label="Info site migration - Support live view graphs"
           />
         </FeatureFlagGroup>
+        <FeatureFlagGroup name="Outage Banners">
+          <FeatureFlagOption
+            variant={BaseVariant}
+            value={useOutageBannerArbitrum()}
+            featureFlag={FeatureFlag.outageBannerArbitrum}
+            label="Outage Banner for Arbitrum"
+          />
+          <FeatureFlagOption
+            variant={BaseVariant}
+            value={useOutageBannerPolygon()}
+            featureFlag={FeatureFlag.outageBannerPolygon}
+            label="Outage Banner for Polygon"
+          />
+          <FeatureFlagOption
+            variant={BaseVariant}
+            value={useOutageBannerOptimism()}
+            featureFlag={FeatureFlag.outageBannerOptimism}
+            label="Outage Banner for Optimism"
+          />
+        </FeatureFlagGroup>
         <FeatureFlagGroup name="Debug">
           <FeatureFlagOption
             variant={TraceJsonRpcVariant}

apps/web/src/components/TopLevelModals/index.tsx

@@ -2,7 +2,7 @@ import { useWeb3React } from '@web3-react/core'
 import { OffchainActivityModal } from 'components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal'
 import UniwalletModal from 'components/AccountDrawer/UniwalletModal'
 import AirdropModal from 'components/AirdropModal'
-import WalletAppPromoBanner from 'components/Banner/MobileAppAnnouncementBanner'
+import { Banners } from 'components/Banner/shared/Banners'
 import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
@@ -33,7 +33,9 @@ export default function TopLevelModals() {
       <ConnectedAccountBlocked account={account} isOpen={accountBlocked} />
       <Bag />
       <UniwalletModal />
-      <WalletAppPromoBanner />
+
+      <Banners />
+
       <OffchainActivityModal />
       <TransactionCompleteModal />
       <AirdropModal />

apps/web/src/featureFlags/flags/outageBanner.ts

+import { ChainId } from '@uniswap/sdk-core'
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useOutageBannerOptimism(): BaseVariant {
+  return useBaseFlag(FeatureFlag.outageBannerOptimism)
+}
+
+function useShowOutageBannerOptimism(): boolean {
+  return useOutageBannerOptimism() === BaseVariant.Enabled
+}
+
+export function useOutageBannerArbitrum(): BaseVariant {
+  return useBaseFlag(FeatureFlag.outageBannerArbitrum)
+}
+
+function useShowOutageBannerArbitrum(): boolean {
+  return useOutageBannerArbitrum() === BaseVariant.Enabled
+}
+
+export function useOutageBannerPolygon(): BaseVariant {
+  return useBaseFlag(FeatureFlag.outageBannerPolygon)
+}
+
+function useShowOutageBannerPolygon(): boolean {
+  return useOutageBannerPolygon() === BaseVariant.Enabled
+}
+
+export function useOutageBanners(): Record<ChainId, boolean> {
+  return {
+    [ChainId.OPTIMISM]: useShowOutageBannerOptimism(),
+    [ChainId.ARBITRUM_ONE]: useShowOutageBannerArbitrum(),
+    [ChainId.POLYGON]: useShowOutageBannerPolygon(),
+
+    [ChainId.MAINNET]: false,
+    [ChainId.GOERLI]: false,
+    [ChainId.SEPOLIA]: false,
+    [ChainId.OPTIMISM_GOERLI]: false,
+    [ChainId.ARBITRUM_GOERLI]: false,
+    [ChainId.POLYGON_MUMBAI]: false,
+    [ChainId.CELO]: false,
+    [ChainId.CELO_ALFAJORES]: false,
+    [ChainId.GNOSIS]: false,
+    [ChainId.MOONBEAM]: false,
+    [ChainId.BNB]: false,
+    [ChainId.AVALANCHE]: false,
+    [ChainId.BASE_GOERLI]: false,
+    [ChainId.BASE]: false,
+  }
+}

apps/web/src/featureFlags/index.tsx

@@ -26,6 +26,10 @@ export enum FeatureFlag {
   landingPageV2 = 'landing_page_v2',
   limitsFees = 'limits_fees',
   exitAnimation = 'exit_animation',
+  // TODO(WEB-3625): Remove these once we have a generalized system for outage banners.
+  outageBannerOptimism = 'outage_banner_feb_2024_optimism',
+  outageBannerArbitrum = 'outage_banner_feb_2024_arbitrum',
+  outageBannerPolygon = 'outage_banner_feb_2024_polygon',
 }
 
 interface FeatureFlagsContextType {

apps/web/src/graphql/data/util.tsx

@@ -138,6 +138,17 @@ const URL_CHAIN_PARAM_TO_BACKEND: { [key: string]: InterfaceGqlChain } = {
   base: Chain.Base,
 }
 
+const URL_CHAIN_PARAM_TO_CHAIN_ID: { [key: string]: ChainId } = {
+  ethereum: ChainId.MAINNET,
+  polygon: ChainId.POLYGON,
+  celo: ChainId.CELO,
+  arbitrum: ChainId.ARBITRUM_ONE,
+  optimism: ChainId.OPTIMISM,
+  bnb: ChainId.BNB,
+  avalanche: ChainId.AVALANCHE,
+  base: ChainId.BASE,
+}
+
 /**
  * @param chainName parsed in chain name from url query parameter
  * @returns if chainName is a valid chain name, returns the backend chain name, otherwise returns undefined
@@ -147,6 +158,15 @@ export function getValidUrlChainName(chainName: string | undefined): Chain | und
   return validChainName ? validChainName : undefined
 }
 
+/**
+ * @param chainName parsed in chain name from the url query parameter
+ * @returns if chainName is a valid chain name, returns the ChainId, otherwise returns undefined
+ */
+export function getValidUrlChainId(chainName: string | undefined): ChainId | undefined {
+  const validChainId = chainName && URL_CHAIN_PARAM_TO_CHAIN_ID[chainName]
+  return validChainId ? validChainId : undefined
+}
+
 /**
  * @param chainName parsed in chain name from url query parameter
  * @returns if chainName is a valid chain name supported by the backend, returns the backend chain name, otherwise returns Chain.Ethereum

apps/web/src/theme/colors.ts

@@ -182,6 +182,8 @@ export const darkTheme = {
   success: colors.success,
   critical: colors.critical,
   scrim: colors.scrim,
+
+  warning2: colors.gold200,
 }
 
 export const lightTheme: ThemeColors = {
@@ -210,4 +212,6 @@ export const lightTheme: ThemeColors = {
   success: colors.success,
   critical: colors.critical,
   scrim: colors.scrim,
+
+  warning2: colors.gold200,
 }