Feat/the end (#241)

* feat: add shutdown banner 🚧 WIP

* feat: reword and restyle banner

* feat: add link to announcement

* refactor: wording

* fix: lint formatting

* fix: lint formatting

* feat: update link

---------

Co-authored-by: Dimitri <69167058+dimsome@users.noreply.github.com>

apps/governance/src/app/context/index.tsx

@@ -1,6 +1,4 @@
-import { useQuestsQuery } from '@apps/artifacts/graphql/questbook'
 import { useStakingQuery as useStakingQueryHook } from '@apps/artifacts/graphql/staking'
-import { useAccount } from '@apps/base/context/account'
 import { useApolloClients } from '@apps/base/context/apollo'
 import { useIdlePollInterval } from '@apps/hooks'
 import { composedComponent } from '@apps/react-utils'
@@ -13,20 +11,13 @@ import type { FC } from 'react'
 
 const StakingAccountQueryUpdater: FC = () => {
   const clients = useApolloClients()
-  const account = useAccount()
   const pollIntervalStaking = useIdlePollInterval(30e3)
-  const pollIntervalQuest = useIdlePollInterval(60e3)
 
   // Poll and cache
   useStakingQueryHook({
     client: clients.staking,
     pollInterval: pollIntervalStaking,
   })
-  useQuestsQuery({
-    variables: { userId: account ?? '', hasUser: !!account },
-    client: clients.questbook,
-    pollInterval: pollIntervalQuest,
-  })
 
   return null
 }

apps/governance/src/app/index.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 
-import { useBaseCtx } from '@apps/base'
+import { MessageHandler, useBaseCtx } from '@apps/base'
+import { useBannerMessage } from '@apps/base/context/banner'
 import { useUnsupportedNetwork } from '@apps/base/hooks'
 import { APP_NAME } from '@apps/types'
 import { Redirect, Route, Switch } from 'react-router-dom'
@@ -35,8 +36,14 @@ const GovernanceRoutes: FC = () => {
 
 export const GovernanceApp: FC = () => {
   const [, setBaseCtx] = useBaseCtx()
+  const [, setBannerMessage] = useBannerMessage()
+
   useUnsupportedNetwork()
 
+  useLayoutEffect(() => {
+    setBannerMessage(MessageHandler.shutdown)
+  }, [setBannerMessage])
+
   useEffect(() => {
     const navItems = [
       { title: 'Stake', path: '/stake' },

apps/protocol/src/app/index.tsx

@@ -6,7 +6,7 @@ import { ChainIds, useChainIdCtx, useNetwork } from '@apps/base/context/network'
 import { useUnsupportedNetwork } from '@apps/base/hooks'
 import { useURLQuery } from '@apps/hooks'
 import { useSelectedMassetState } from '@apps/masset-hooks'
-import { useSelectedMasset, useSelectedMassetConfig, useSelectedMassetName } from '@apps/masset-provider'
+import { useSelectedMasset, useSelectedMassetName } from '@apps/masset-provider'
 import { APP_NAME } from '@apps/types'
 import { Redirect, Route, Switch, useHistory } from 'react-router-dom'
 import { useEffectOnce } from 'react-use'
@@ -71,12 +71,10 @@ const ProtocolRoutes: FC = () => {
 export const ProtocolApp: FC = () => {
   const massetState = useSelectedMassetState()
   const massetName = useSelectedMassetName()
-  const massetConfig = useSelectedMassetConfig()
   const hasFeederPools = massetState?.hasFeederPools
   const [, setBannerMessage] = useBannerMessage()
-  const { undergoingRecol } = useSelectedMassetState() ?? {}
   const urlQuery = useURLQuery()
-  const [chainId, setChainId] = useChainIdCtx()
+  const [, setChainId] = useChainIdCtx()
   const [, setBaseCtx] = useBaseCtx()
 
   useUnsupportedNetwork()
@@ -96,19 +94,8 @@ export const ProtocolApp: FC = () => {
 
   // Handle message prioritisation:
   useLayoutEffect(() => {
-    // let message: BannerMessageProps | undefined
-    // const isPolygon = chainId === ChainIds.MaticMainnet
-
-    // if (isPolygon) {
-    //   message = MessageHandler.graph
-    // }
-
-    // if (undergoingRecol) {
-    //   message = (undergoingRecol && MessageHandler.recollat(massetConfig)) || undefined
-    // }
-
-    setBannerMessage(MessageHandler.renbtc)
-  }, [chainId, massetConfig, setBannerMessage, undergoingRecol])
+    setBannerMessage(MessageHandler.shutdown)
+  }, [setBannerMessage])
 
   useLayoutEffect(() => {
     const network = urlQuery.get('network')

libs/base/src/lib/components/layout/BannerMessage.tsx

@@ -10,7 +10,6 @@ const Container = styled.div<{ statusColor: string | undefined }>`
   text-align: center;
   font-size: 0.75rem;
   line-height: 1.5rem;
-  border-bottom: 1px solid ${({ statusColor }) => statusColor};
   overflow-wrap: normal;
   display: none;
 
@@ -35,6 +34,7 @@ export const BannerMessage: FC = () => {
     {
       warning: Color.yellowTransparent,
       info: Color.coolBlueTransparent,
+      none: 'transparent',
     }[status]
 
   return bannerMessage ? <Container statusColor={statusColor}>{content}</Container> : null

libs/base/src/lib/components/layout/Layout.tsx

@@ -248,8 +248,8 @@ export const Layout: FC = ({ children }) => {
     <ModalDataProvider>
       <ModalProvider rootComponent={TransitionGroup}>
         <Background />
-        <BannerMessage />
         <AppBar />
+        <BannerMessage />
         <Container>
           <Main>{children}</Main>
         </Container>

libs/base/src/lib/components/layout/MessageHandler.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
 
+import { ReactComponent as WarningIcon } from '@apps/icons/warning-alt.svg'
+import styled from 'styled-components'
+
 import type { MassetConfig } from '@apps/masset-provider'
 
 import type { BannerMessageProps } from '../../context/BannerProvider'
@@ -9,8 +12,30 @@ interface Props {
   graph: BannerMessageProps
   olympus: BannerMessageProps
   renbtc: BannerMessageProps
+  shutdown: BannerMessageProps
 }
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+`
+
+const Modal = styled.div`
+  padding: 2rem;
+  display: flex;
+  max-width: 968px;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  backdrop-filter: blur(2px);
+  border-radius: 1rem;
+  border: 1px solid #fac371;
+  font-size: 1rem;
+`
+
 export const MessageHandler: Props = {
   recollat: (massetConfig: MassetConfig) => ({
     status: 'warning',
@@ -65,4 +90,30 @@ export const MessageHandler: Props = {
       </p>
     ),
   },
+  shutdown: {
+    status: 'none',
+    content: (
+      <Container>
+        <Modal>
+          <WarningIcon />
+          <p>mStable has been aquired by dHedge. Following the outlined aquisition update, certain mStable products will be sunset.</p>
+          <p>
+            The contracts will always remain live and allow for withdrawals. However, it is recommended to withdraw remaining assets from
+            the contracts since value accrual has been disabled.
+          </p>
+          <p>
+            All products, except for mUSD on Ethereum mainnet and Polygon, are being sunset. Staking MTA and governance has been disabled,
+            and staked assets are unlocked. Use the withdrawal app to access remaining funds.
+          </p>
+          <a
+            href="https://medium.com/mstable/mstable-acquisition-completed-by-dhedge-the-next-chapter-of-defi-yield-vaults-begins-79a326157132"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read the Announcement
+          </a>
+        </Modal>
+      </Container>
+    ),
+  },
 }

libs/base/src/lib/context/BannerProvider.tsx

@@ -4,7 +4,7 @@ import type { ReactElement } from 'react'
 
 export interface BannerMessageProps {
   content: ReactElement
-  status: 'warning' | 'info'
+  status: 'warning' | 'info' | 'none'
 }
 
 export const [useBannerMessage, BannerProvider] = createStateContext<BannerMessageProps | undefined>(undefined)