From 241b21c09f680fb6016d0494d168c6bb651a7c5c Mon Sep 17 00:00:00 2001
From: eddie <66155195+just-toby@users.noreply.github.com>
Date: Thu, 2 Mar 2023 11:40:26 -0800
Subject: [PATCH] feat: new error dialog design (#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      |  40 ++++----
 src/components/Error/ErrorDialog.tsx        | 105 --------------------
 src/components/Error/ErrorView.tsx          |  86 ++++++++++++++++
 src/components/Swap/Status/StatusDialog.tsx |   6 +-
 4 files changed, 110 insertions(+), 127 deletions(-)
 delete mode 100644 src/components/Error/ErrorDialog.tsx
 create mode 100644 src/components/Error/ErrorView.tsx

diff --git a/src/components/Error/ErrorBoundary.tsx b/src/components/Error/ErrorBoundary.tsx
index 5fba5ff07..3d0272db1 100644
--- a/src/components/Error/ErrorBoundary.tsx
+++ b/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
   }
diff --git a/src/components/Error/ErrorDialog.tsx b/src/components/Error/ErrorDialog.tsx
deleted file mode 100644
index a31360003..000000000
--- a/src/components/Error/ErrorDialog.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-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 { Info as InfoIcon } from 'icons'
-import { ReactNode, useCallback, useState } from 'react'
-import styled from 'styled-components/macro'
-import { AnimationSpeed, Color, ThemedText } from 'theme'
-
-const HeaderIcon = styled(LargeIcon)`
-  flex-grow: 1;
-  transition: height ${AnimationSpeed.Medium}, width ${AnimationSpeed.Medium};
-
-  svg {
-    transition: height ${AnimationSpeed.Medium}, width ${AnimationSpeed.Medium};
-  }
-`
-
-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 ErrorHeader = styled(Column)<{ open: boolean }>`
-  transition: gap ${AnimationSpeed.Medium};
-
-  div:last-child {
-    max-height: ${({ open }) => (open ? 0 : 60 / 14)}em; // 3 * line-height
-    overflow-y: hidden;
-    transition: max-height ${AnimationSpeed.Medium};
-  }
-`
-
-const ExpandoContent = styled(ThemedText.Code)`
-  margin: 0.5em 0;
-`
-
-interface ErrorDialogProps {
-  header?: ReactNode
-  message: ReactNode
-  error?: Error
-  action: ReactNode
-  onClick: () => void
-}
-
-export default function ErrorDialog({ header, message, error, action, onClick }: ErrorDialogProps) {
-  const [open, setOpen] = useState(false)
-  const onExpand = useCallback(() => setOpen((open) => !open), [])
-
-  return (
-    <Column flex padded gap={0.75} align="stretch" style={{ height: '100%' }}>
-      <Row flex flow="row-reverse">
-        <LargeIcon icon={StyledXButton} onClick={onClick} />
-      </Row>
-      <StatusHeader icon={AlertTriangle} iconColor="critical" iconSize={open ? 3 : 4}>
-        <ErrorHeader gap={open ? 0 : 0.75} open={open}>
-          <ThemedText.Subhead1>{header || <Trans>Something went wrong.</Trans>}</ThemedText.Subhead1>
-          {!open && <ThemedText.Body2>{message}</ThemedText.Body2>}
-        </ErrorHeader>
-      </StatusHeader>
-      <Column gap={open ? 0 : 0.75} style={{ transition: `gap ${AnimationSpeed.Medium}` }}>
-        {error ? (
-          <Expando
-            title={
-              <>
-                <InfoIcon style={{ marginRight: '5px' }} color="secondary" />
-                <Trans>Error details</Trans>
-              </>
-            }
-            open={open}
-            onExpand={onExpand}
-            height={7.5}
-          >
-            <ExpandoContent userSelect>
-              {error.name}
-              {error.message ? `: ${error.message}` : ''}
-            </ExpandoContent>
-          </Expando>
-        ) : (
-          <Column style={{ height: '7.5em' }} />
-        )}
-        <ActionButton color="critical" onClick={onClick}>
-          {action}
-        </ActionButton>
-      </Column>
-    </Column>
-  )
-}
diff --git a/src/components/Error/ErrorView.tsx b/src/components/Error/ErrorView.tsx
new file mode 100644
index 000000000..df152a48e
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/Swap/Status/StatusDialog.tsx b/src/components/Swap/Status/StatusDialog.tsx
index b3b677843..7e276ce70 100644
--- a/src/components/Swap/Status/StatusDialog.tsx
+++ b/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} />