diff --git a/package.json b/package.json index e1bb636f..85ff3863 100644 --- a/package.json +++ b/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" diff --git a/src/components/AppContainer.tsx b/src/components/AppContainer.tsx index c077057b..af504feb 100644 --- a/src/components/AppContainer.tsx +++ b/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 = (props) => { + diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 69d083af..4d4d2d0c 100644 --- a/src/components/Layout/index.tsx +++ b/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 (
{ // } export default Layout + +const temporaryAlerts: { id: string; content: ReactNode }[] = [ + { + id: 'aave-issues-04-11-2023', + content: ( + + Aave has temporarily paused deposits and withdrawals on some assets until{' '} + + proposal 358 + {' '} + 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.{' '} + + ) + } +] diff --git a/src/components/SonnerToaster.tsx b/src/components/SonnerToaster.tsx new file mode 100644 index 00000000..383b956e --- /dev/null +++ b/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 ( + + ) +} diff --git a/yarn.lock b/yarn.lock index 6b9ce3d0..cb19e991 100644 --- a/yarn.lock +++ b/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"