diff --git a/apps/governance/src/app/context/index.tsx b/apps/governance/src/app/context/index.tsx index 2ea9aed1..2727e63a 100644 --- a/apps/governance/src/app/context/index.tsx +++ b/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 } diff --git a/apps/governance/src/app/index.tsx b/apps/governance/src/app/index.tsx index 44ec29e2..f4949fae 100644 --- a/apps/governance/src/app/index.tsx +++ b/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' }, diff --git a/apps/protocol/src/app/index.tsx b/apps/protocol/src/app/index.tsx index 0cf99c92..d29b71b6 100644 --- a/apps/protocol/src/app/index.tsx +++ b/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') diff --git a/libs/base/src/lib/components/layout/BannerMessage.tsx b/libs/base/src/lib/components/layout/BannerMessage.tsx index 37118616..010ab9de 100644 --- a/libs/base/src/lib/components/layout/BannerMessage.tsx +++ b/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 ? {content} : null diff --git a/libs/base/src/lib/components/layout/Layout.tsx b/libs/base/src/lib/components/layout/Layout.tsx index ee39309f..e4cf7ecd 100644 --- a/libs/base/src/lib/components/layout/Layout.tsx +++ b/libs/base/src/lib/components/layout/Layout.tsx @@ -248,8 +248,8 @@ export const Layout: FC = ({ children }) => { - +
{children}
 diff --git a/libs/base/src/lib/components/layout/MessageHandler.tsx b/libs/base/src/lib/components/layout/MessageHandler.tsx index cabdd779..e5786cfa 100644 --- a/libs/base/src/lib/components/layout/MessageHandler.tsx +++ b/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 = {

), }, + shutdown: { + status: 'none', + content: ( + + + +

mStable has been aquired by dHedge. Following the outlined aquisition update, certain mStable products will be sunset.

+

+ 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. +

+

+ 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. +

+ + Read the Announcement + + + + ), + }, } diff --git a/libs/base/src/lib/context/BannerProvider.tsx b/libs/base/src/lib/context/BannerProvider.tsx index 3fcd3692..7332e31f 100644 --- a/libs/base/src/lib/context/BannerProvider.tsx +++ b/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(undefined) diff --git a/libs/icons/src/lib/warning-alt.svg b/libs/icons/src/lib/warning-alt.svg new file mode 100644 index 00000000..19ee870a --- /dev/null +++ b/libs/icons/src/lib/warning-alt.svg @@ -0,0 +1,11 @@ + + + + + + + + + +