feat: confirm price impact (#3288)

* refactor: action button naming

* feat: high price impact acknowledgement

src/lib/components/ActionButton.tsx

@@ -15,7 +15,7 @@ const StyledButton = styled(Button)`
   }
 `
 
-const UpdateRow = styled(Row)``
+const ActionRow = styled(Row)``
 
 const grow = keyframes`
   from {
@@ -28,12 +28,12 @@ const grow = keyframes`
   }
 `
 
-const updateCss = css`
+const actionCss = css`
   border: 1px solid ${({ theme }) => theme.outline};
   padding: calc(0.25em - 1px);
   padding-left: calc(0.75em - 1px);
 
-  ${UpdateRow} {
+  ${ActionRow} {
     animation: ${grow} 0.25s ease-in;
     white-space: nowrap;
   }
@@ -45,45 +45,37 @@ const updateCss = css`
   }
 `
 
-export const Overlay = styled(Row)<{ update?: boolean }>`
+export const Overlay = styled(Row)<{ action?: boolean }>`
   border-radius: ${({ theme }) => theme.borderRadius}em;
   flex-direction: row-reverse;
   min-height: 3.5em;
   transition: padding 0.25s ease-out;
 
-  ${({ update }) => update && updateCss}
+  ${({ action }) => action && actionCss}
 `
 
 export interface ActionButtonProps {
   color?: Color
   disabled?: boolean
-  update?: { message: ReactNode; action: ReactNode; icon?: Icon }
+  action?: { message: ReactNode; icon?: Icon; onClick: () => void; children: ReactNode }
   onClick: () => void
-  onUpdate?: () => void
   children: ReactNode
 }
 
-export default function ActionButton({
-  color = 'accent',
-  disabled,
-  update,
-  onClick,
-  onUpdate,
-  children,
-}: ActionButtonProps) {
+export default function ActionButton({ color = 'accent', disabled, action, onClick, children }: ActionButtonProps) {
   const textColor = useMemo(() => (color === 'accent' && !disabled ? 'onAccent' : 'currentColor'), [color, disabled])
   return (
-    <Overlay update={Boolean(update)} flex align="stretch">
-      <StyledButton color={color} disabled={disabled} onClick={update ? onUpdate : onClick}>
-        <ThemedText.TransitionButton buttonSize={update ? 'medium' : 'large'} color={textColor}>
-          {update ? update.action : children}
+    <Overlay action={Boolean(action)} flex align="stretch">
+      <StyledButton color={color} disabled={disabled} onClick={action ? action.onClick : onClick}>
+        <ThemedText.TransitionButton buttonSize={action ? 'medium' : 'large'} color={textColor}>
+          {action ? action.children : children}
         </ThemedText.TransitionButton>
       </StyledButton>
-      {update && (
-        <UpdateRow gap={0.5}>
-          <LargeIcon color="currentColor" icon={update.icon || AlertTriangle} />
-          <ThemedText.Subhead2>{update?.message}</ThemedText.Subhead2>
-        </UpdateRow>
+      {action && (
+        <ActionRow gap={0.5}>
+          <LargeIcon color="currentColor" icon={action.icon || AlertTriangle} />
+          <ThemedText.Subhead2>{action?.message}</ThemedText.Subhead2>
+        </ActionRow>
       )}
     </Overlay>
   )

src/lib/components/Error/ErrorBoundary.tsx

@@ -36,7 +36,7 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
             error={this.state.error}
             header={<Trans>Something went wrong.</Trans>}
             action={<Trans>Reload the page</Trans>}
-            onAction={() => window.location.reload()}
+            onClick={() => window.location.reload()}
           />
         </Dialog>
       )

src/lib/components/Error/ErrorDialog.tsx

@@ -87,10 +87,10 @@ interface ErrorDialogProps {
   header?: ReactNode
   error: Error
   action: ReactNode
-  onAction: () => void
+  onClick: () => void
 }
 
-export default function ErrorDialog({ header, error, action, onAction }: ErrorDialogProps) {
+export default function ErrorDialog({ header, error, action, onClick }: ErrorDialogProps) {
   const [open, setOpen] = useState(false)
   const [details, setDetails] = useState<HTMLDivElement | null>(null)
   const scrollbar = useScrollbar(details)
@@ -123,7 +123,7 @@ export default function ErrorDialog({ header, error, action, onAction }: ErrorDi
             </ThemedText.Code>
           </Column>
         </ErrorColumn>
-        <ActionButton onClick={onAction}>{action}</ActionButton>
+        <ActionButton onClick={onClick}>{action}</ActionButton>
       </ExpandoColumn>
     </Column>
   )

src/lib/components/Swap/Status/StatusDialog.tsx

@@ -93,7 +93,7 @@ export default function TransactionStatusDialog({ tx, onClose }: TransactionStat
       header={errorMessage}
       error={new Error('TODO(zzmp)')}
       action={<Trans>Dismiss</Trans>}
-      onAction={onClose}
+      onClick={onClose}
     />
   ) : (
     <TransactionStatus tx={tx} onClose={onClose} />

src/lib/components/Swap/Summary/index.tsx

@@ -6,7 +6,7 @@ import { ALLOWED_PRICE_IMPACT_HIGH, ALLOWED_PRICE_IMPACT_MEDIUM } from 'constant
 import { useAtomValue } from 'jotai/utils'
 import { IconButton } from 'lib/components/Button'
 import useScrollbar from 'lib/hooks/useScrollbar'
-import { AlertTriangle, Expando, Info } from 'lib/icons'
+import { AlertTriangle, BarChart, Expando, Info } from 'lib/icons'
 import { MIN_HIGH_SLIPPAGE } from 'lib/state/settings'
 import { Field, independentFieldAtom } from 'lib/state/swap'
 import styled, { ThemedText } from 'lib/theme'
@@ -79,8 +79,6 @@ const Body = styled(Column)<{ open: boolean }>`
   }
 `
 
-const priceUpdate = { message: <Trans>Price updated</Trans>, action: <Trans>Accept</Trans> }
-
 interface SummaryDialogProps {
   trade: Trade<Currency, Currency, TradeType>
   allowedSlippage: Percent
@@ -92,8 +90,12 @@ export function SummaryDialog({ trade, allowedSlippage, onConfirm }: SummaryDial
   const inputCurrency = inputAmount.currency
   const outputCurrency = outputAmount.currency
   const priceImpact = useMemo(() => computeRealizedPriceImpact(trade), [trade])
-
   const independentField = useAtomValue(independentFieldAtom)
+  const { i18n } = useLingui()
+
+  const [open, setOpen] = useState(false)
+  const [details, setDetails] = useState<HTMLDivElement | null>(null)
+  const scrollbar = useScrollbar(details)
 
   const warning = useMemo(() => {
     if (priceImpact.greaterThan(ALLOWED_PRICE_IMPACT_HIGH)) return 'error'
@@ -102,18 +104,31 @@ export function SummaryDialog({ trade, allowedSlippage, onConfirm }: SummaryDial
     return
   }, [allowedSlippage, priceImpact])
 
+  const [ackPriceImpact, setAckPriceImpact] = useState(false)
+
   const [confirmedTrade, setConfirmedTrade] = useState(trade)
   const doesTradeDiffer = useMemo(
     () => Boolean(trade && confirmedTrade && tradeMeaningfullyDiffers(trade, confirmedTrade)),
     [confirmedTrade, trade]
   )
-  const [open, setOpen] = useState(false)
 
-  const [details, setDetails] = useState<HTMLDivElement | null>(null)
-
-  const scrollbar = useScrollbar(details)
-
-  const { i18n } = useLingui()
+  const action = useMemo(() => {
+    if (doesTradeDiffer) {
+      return {
+        message: <Trans>Price updated</Trans>,
+        icon: BarChart,
+        onClick: () => setConfirmedTrade(trade),
+        children: <Trans>Accept</Trans>,
+      }
+    } else if (priceImpact.greaterThan(ALLOWED_PRICE_IMPACT_HIGH) && !ackPriceImpact) {
+      return {
+        message: <Trans>High price impact</Trans>,
+        onClick: () => setAckPriceImpact(true),
+        children: <Trans>Acknowledge</Trans>,
+      }
+    }
+    return
+  }, [ackPriceImpact, doesTradeDiffer, priceImpact, trade])
 
   if (!(inputAmount && outputAmount && inputCurrency && outputCurrency)) {
     return null
@@ -163,11 +178,7 @@ export function SummaryDialog({ trade, allowedSlippage, onConfirm }: SummaryDial
               </Trans>
             )}
           </Estimate>
-          <ActionButton
-            onClick={onConfirm}
-            onUpdate={() => setConfirmedTrade(trade)}
-            update={doesTradeDiffer ? priceUpdate : undefined}
-          >
+          <ActionButton onClick={onConfirm} action={action}>
             <Trans>Confirm swap</Trans>
           </ActionButton>
         </ExpandoColumn>

src/lib/components/Swap/SwapButton.tsx

@@ -95,8 +95,9 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
                 </Row>
               </EtherscanLink>
             ),
-            action: <Trans>Approve</Trans>,
             icon: Spinner,
+            onClick: addApprovalTransaction,
+            children: <Trans>Approve</Trans>,
           },
         }
       } else if (approval === ApprovalState.NOT_APPROVED) {
@@ -111,7 +112,7 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
     }
 
     return { disabled: true }
-  }, [approval, approvalHash, chainId, disabled, inputCurrencyAmount, inputCurrencyBalance])
+  }, [addApprovalTransaction, approval, approvalHash, chainId, disabled, inputCurrencyAmount, inputCurrencyBalance])
 
   const deadline = useTransactionDeadline()
   const { signatureData } = useERC20PermitFromTrade(optimizedTrade, allowedSlippage, deadline)
@@ -156,7 +157,6 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
       <ActionButton
         color={tokenColorExtraction ? 'interactive' : 'accent'}
         onClick={() => setActiveTrade(trade.trade)}
-        onUpdate={addApprovalTransaction}
         {...actionProps}
       >
         <Trans>Review swap</Trans>

src/lib/icons/index.tsx

@@ -12,6 +12,7 @@ import {
   ArrowDown as ArrowDownIcon,
   ArrowRight as ArrowRightIcon,
   ArrowUp as ArrowUpIcon,
+  BarChart2 as BarChart2Icon,
   CheckCircle as CheckCircleIcon,
   ChevronDown as ChevronDownIcon,
   Clock as ClockIcon,
@@ -75,6 +76,7 @@ export const ArrowDown = icon(ArrowDownIcon)
 export const ArrowRight = icon(ArrowRightIcon)
 export const ArrowUp = icon(ArrowUpIcon)
 export const CheckCircle = icon(CheckCircleIcon)
+export const BarChart = icon(BarChart2Icon)
 export const ChevronDown = icon(ChevronDownIcon)
 export const Clock = icon(ClockIcon)
 export const HelpCircle = icon(HelpCircleIcon)