feat: new error dialog design (Uniswap#511)

* feat: new error view

* fix: expandos for settings

* fix: merge and delete file

* fix: rename column

* fix: use global x icon

src/components/Error/ErrorBoundary.tsx

@@ -1,8 +1,8 @@
-import { DEFAULT_ERROR_ACTION, DEFAULT_ERROR_HEADER, WidgetError } from 'errors'
+import { t } from '@lingui/macro'
+import { DEFAULT_ERROR_HEADER, WidgetError } from 'errors'
 import { Component, ErrorInfo, PropsWithChildren, useCallback, useState } from 'react'
 
-import Dialog from '../Dialog'
-import ErrorDialog from './ErrorDialog'
+import ErrorView from './ErrorView'
 
 export type OnError = (error: Error, info?: ErrorInfo) => void
 
@@ -53,30 +53,30 @@ export default class ErrorBoundary extends Component<PropsWithChildren<ErrorBoun
     this.props.onError?.(error, errorInfo)
   }
 
-  renderErrorDialog(error: Error) {
+  renderErrorView(error: Error) {
     const header = error instanceof WidgetError ? error.header : DEFAULT_ERROR_HEADER
-    const action = error instanceof WidgetError ? error.action : DEFAULT_ERROR_ACTION
     return (
-      <Dialog color="dialog" forceContain>
-        <ErrorDialog
-          message={header}
-          error={error}
-          action={action}
-          onClick={
-            error instanceof WidgetError && error.dismissable
-              ? () => {
-                  this.setState({ error: undefined })
-                }
-              : () => window.location.reload()
-          }
-        />
-      </Dialog>
+      <ErrorView
+        message={header}
+        error={error}
+        action={t`Get support`}
+        onDismiss={
+          error instanceof WidgetError && error.dismissable
+            ? () => {
+                this.setState({ error: undefined })
+              }
+            : () => window.location.reload()
+        }
+        onClick={() => {
+          window.open('https://support.uniswap.org/', '_blank', 'noopener,noreferrer')
+        }}
+      />
     )
   }
 
   render() {
     if (this.state.error) {
-      return this.renderErrorDialog(this.state.error)
+      return this.renderErrorView(this.state.error)
     }
     return this.props.children
   }

src/components/Error/ErrorView.tsx

@@ -0,0 +1,86 @@
+import { Trans } from '@lingui/macro'
+import ActionButton from 'components/ActionButton'
+import Column from 'components/Column'
+import Expando from 'components/Expando'
+import Row from 'components/Row'
+import { AlertTriangle, Icon, LargeIcon, StyledXButton } from 'icons'
+import { ReactNode, useState } from 'react'
+import styled from 'styled-components/macro'
+import { Color, ThemedText } from 'theme'
+
+const HeaderIcon = styled(LargeIcon)`
+  flex-grow: 1;
+  margin: 2em 0;
+`
+
+interface StatusHeaderProps {
+  icon: Icon
+  iconColor?: Color
+  iconSize?: number
+  children: ReactNode
+}
+
+export function StatusHeader({ icon: Icon, iconColor, iconSize = 2.5, children }: StatusHeaderProps) {
+  return (
+    <>
+      <Column flex style={{ flexGrow: 1 }}>
+        <HeaderIcon icon={Icon} color={iconColor} size={iconSize} />
+        <Column gap={0.75} flex style={{ textAlign: 'center' }}>
+          {children}
+        </Column>
+      </Column>
+    </>
+  )
+}
+
+const ExpandoContent = styled(ThemedText.Code)`
+  margin: 0.5em;
+`
+
+const ErrorDialogWrapper = styled(Column)`
+  background-color: ${({ theme }) => theme.container};
+`
+
+interface ErrorDialogProps {
+  header?: ReactNode
+  message: ReactNode
+  error?: Error
+  action: ReactNode
+  onClick: () => void
+  onDismiss: () => void
+}
+
+export default function ErrorDialog({ header, message, error, action, onClick, onDismiss }: ErrorDialogProps) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <ErrorDialogWrapper flex padding="1em 0.5em 0.25em" gap={0.5} align="stretch">
+      <Row flex flow="row-reverse">
+        <LargeIcon icon={StyledXButton} onClick={onDismiss} />
+      </Row>
+      <StatusHeader icon={AlertTriangle} iconColor="warning" iconSize={2.5}>
+        <Column gap={0.75}>
+          <ThemedText.H4>{header || <Trans>Something went wrong</Trans>}</ThemedText.H4>
+          <ThemedText.Body1 color="secondary">{message}</ThemedText.Body1>
+        </Column>
+      </StatusHeader>
+      {error ? (
+        <Expando
+          title={open ? <Trans>Show less</Trans> : <Trans>Show more</Trans>}
+          open={open}
+          onExpand={() => setOpen((open) => !open)}
+          maxHeight={11.5 /* em */}
+        >
+          <Column flex grow padded>
+            <ExpandoContent userSelect>{error.toString()}</ExpandoContent>
+          </Column>
+        </Expando>
+      ) : (
+        <Column style={{ height: '7.5em' }} />
+      )}
+      <ActionButton color="accentSoft" onClick={onClick} narrow>
+        {action}
+      </ActionButton>
+    </ErrorDialogWrapper>
+  )
+}

src/components/Swap/Status/StatusDialog.tsx

@@ -1,5 +1,6 @@
 import { Trans } from '@lingui/macro'
-import ErrorDialog, { StatusHeader } from 'components/Error/ErrorDialog'
+import ErrorView from 'components/Error/ErrorView'
+import { StatusHeader } from 'components/Error/ErrorView'
 import EtherscanLink from 'components/EtherscanLink'
 import Row from 'components/Row'
 import SwapSummary from 'components/Swap/Summary'
@@ -56,7 +57,7 @@ function TransactionStatus({ tx, onClose }: TransactionStatusProps) {
 
 export default function TransactionStatusDialog({ tx, onClose }: TransactionStatusProps) {
   return tx.receipt?.status === 0 ? (
-    <ErrorDialog
+    <ErrorView
       header={<Trans>Your swap failed.</Trans>}
       message={
         <Trans>
@@ -67,6 +68,7 @@ export default function TransactionStatusDialog({ tx, onClose }: TransactionStat
       }
       action={<Trans>Dismiss</Trans>}
       onClick={onClose}
+      onDismiss={onClose}
     />
   ) : (
     <TransactionStatus tx={tx} onClose={onClose} />