Merge pull request #145 from chuckbergeron/production

Unavailable Aave Vaults Toast Notice

package.json

@@ -106,6 +106,7 @@
     "react-spring-bottom-sheet": "3.5.0-alpha.0",
     "react-toastify": "^8.2.0",
     "react-tooltip": "^4.2.21",
+    "sonner": "^1.2.0",
     "tailwindcss": "^2.2.19",
     "typescript": "4",
     "wagmi": "0.12.17"

src/components/AppContainer.tsx

@@ -18,6 +18,7 @@ import { ToastContainer, ToastContainerProps } from 'react-toastify'
 import { useAccount } from 'wagmi'
 import { CustomErrorBoundary } from './CustomErrorBoundary'
 import { WalletConnectionContainer } from './WalletConnectionContainer'
+import { Toaster } from './SonnerToaster'
 
 // Initialize react-query Query Client
 const queryClient = new QueryClient({
@@ -74,6 +75,7 @@ export const AppContainer: React.FC<AppProps> = (props) => {
       <JotaiProvider>
         <QueryClientProvider client={queryClient}>
           <ThemeProvider attribute='class' defaultTheme='dark'>
+            <Toaster />
             <ReactQueryDevtools />
             <ThemedToastContainer />
             <CustomErrorBoundary>

src/components/Layout/index.tsx

@@ -1,7 +1,13 @@
 import { PageHeader } from '@components/Layout/PageHeader'
 import classNames from 'classnames'
-import React from 'react'
+import React, { useEffect, ReactNode } from 'react'
 import { Navigation } from './Navigation'
+import { ExternalLink } from '@pooltogether/react-components'
+
+/**
+ * Sonner Toasts
+ */
+import { toast } from 'sonner'
 
 interface LayoutProps {
   className?: string
@@ -12,6 +18,12 @@ interface LayoutProps {
 const Layout = (props: LayoutProps) => {
   const { children, className, backgroundClassName } = props
 
+  useEffect(() => {
+    temporaryAlerts.forEach((alert) => {
+      toast(alert.content, { id: alert.id })
+    })
+  })
+
   return (
     <div
       className={classNames(
@@ -34,3 +46,24 @@ const Layout = (props: LayoutProps) => {
 // }
 
 export default Layout
+
+const temporaryAlerts: { id: string; content: ReactNode }[] = [
+  {
+    id: 'aave-issues-04-11-2023',
+    content: (
+      <span className='flex flex-col items-center text-center text-xxs'>
+        Aave has temporarily paused deposits and withdrawals on some assets until{' '}
+        <ExternalLink
+          href='https://app.aave.com/governance/proposal/?proposalId=358'
+          className='text-pt-teal transition hover:opacity-90 underline'
+          underline
+        >
+          proposal 358
+        </ExternalLink>{' '}
+        passes, due to a security issue. While no funds are at risk, the Optimism prize pool will be
+        unavailable in the meantime. Deposits will be paused for the Optimism prize pool until
+        further updates. No funds are at risk.{' '}
+      </span>
+    )
+  }
+]

src/components/SonnerToaster.tsx

@@ -0,0 +1,50 @@
+import { Toaster as SonnerToaster } from 'sonner'
+
+interface SonnerToasterProps {
+  invert?: boolean
+  theme?: 'light' | 'dark'
+  position?:
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'top-center'
+    | 'bottom-center'
+  hotkey?: string[]
+  richColors?: boolean
+  expand?: boolean
+  duration?: number
+  visibleToasts?: number
+  closeButton?: boolean
+  toastOptions?: { className?: string; descriptionClassName?: string; style?: React.CSSProperties }
+  className?: string
+  style?: React.CSSProperties
+  offset?: string | number
+}
+
+export interface ToasterProps extends SonnerToasterProps {}
+
+export const Toaster = (props: ToasterProps) => {
+  const { duration, offset, style, toastOptions, ...rest } = props
+
+  return (
+    <SonnerToaster
+      theme='dark'
+      position='top-right'
+      duration={duration ?? 300_000}
+      offset={offset ?? '4.5rem'}
+      style={{ fontSize: '0.5rem', marginRight: '-3.5rem', ...style }}
+      toastOptions={{
+        className: toastOptions?.className,
+        descriptionClassName: toastOptions?.descriptionClassName,
+        style: {
+          padding: '1.5rem',
+          backgroundColor: '#4C249F',
+          borderRadius: '0.5rem',
+          ...toastOptions?.style
+        }
+      }}
+      {...rest}
+    />
+  )
+}

yarn.lock

@@ -14624,6 +14624,11 @@ sonic-boom@^2.2.1:
   dependencies:
     atomic-sleep "^1.0.0"
 
+sonner@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-1.2.0.tgz#26e7520d0f93b9f70763130099b4e1b16f121f11"
+  integrity sha512-4bIPKrhF+Z4yEC4EZvNBswcVzMrUhztOQXqyIoiZqiqN1TT39FeK+TgRsQidvvztnYgOn4+S3LdAsri61c7ATA==
+
 sort-keys-length@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sort-keys-length/-/sort-keys-length-1.0.1.tgz#9cb6f4f4e9e48155a6aa0671edd336ff1479a188"