From 14b32b431d396c4175a23c9dd1662b365416874c Mon Sep 17 00:00:00 2001 From: eddie <66155195+just-toby@users.noreply.github.com> Date: Thu, 16 Mar 2023 10:35:13 -0700 Subject: [PATCH] fix: width of price impact speedbump (#557) * fix: width of price impact speedbump * fix: rename const --- src/components/Dialog.tsx | 2 ++ src/components/Swap/Speedbump/index.tsx | 4 +-- src/components/Swap/Summary/index.tsx | 25 ++++++++++--------- .../Swap/Toolbar/ToolbarContext.tsx | 2 +- 4 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 69264a43b..c340d259b 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -46,6 +46,8 @@ export enum DialogAnimationType { NONE = 'none', } +export const MIN_PAGE_CENTERED_DIALOG_WIDTH = 400 + const Context = createContext({ element: null as HTMLElement | null, options: {} as DialogOptions | undefined, diff --git a/src/components/Swap/Speedbump/index.tsx b/src/components/Swap/Speedbump/index.tsx index 3d5af8669..fb4290746 100644 --- a/src/components/Swap/Speedbump/index.tsx +++ b/src/components/Swap/Speedbump/index.tsx @@ -13,6 +13,7 @@ const SpeedBumpWrapper = styled(Column)` display: flex; height: 100%; justify-content: space-between; + max-width: 420px; padding: 1rem; text-align: center; ` @@ -28,7 +29,6 @@ const SpeedbumpButtonStyle = css` padding: 1rem; ` const HeaderRow = styled(Row)` - align-items: flex-start; width: 100%; ` @@ -56,7 +56,7 @@ export default function SpeedBumpDialog({ onAcknowledge, children }: PropsWithCh return ( - + diff --git a/src/components/Swap/Summary/index.tsx b/src/components/Swap/Summary/index.tsx index 511b1b473..238b2b5ef 100644 --- a/src/components/Swap/Summary/index.tsx +++ b/src/components/Swap/Summary/index.tsx @@ -3,7 +3,7 @@ import { formatPriceImpact } from '@uniswap/conedison/format' import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core' import ActionButton, { Action, ActionButtonColor } from 'components/ActionButton' import Column from 'components/Column' -import { Header, useCloseDialog, useIsDialogPageCentered } from 'components/Dialog' +import { Header, MIN_PAGE_CENTERED_DIALOG_WIDTH, useCloseDialog, useIsDialogPageCentered } from 'components/Dialog' import { PopoverBoundaryProvider } from 'components/Popover' import { SmallToolTipBody, TooltipText } from 'components/Tooltip' import { UserRejectedRequestError } from 'errors' @@ -287,7 +287,10 @@ export function SummaryDialog(props: SummaryDialogProps) { }, [ackPriceImpact, props.impact, showSpeedbump]) return ( - <> + {showSpeedbump && props.impact ? ( {t`This transaction will result in a`}{' '} @@ -295,16 +298,14 @@ export function SummaryDialog(props: SummaryDialogProps) { {t`price impact on the market price of this pool. Do you wish to continue? `} ) : ( - - -
Review swap} /> - -
- - - - + +
Review swap} /> + +
+ + + )} - + ) } diff --git a/src/components/Swap/Toolbar/ToolbarContext.tsx b/src/components/Swap/Toolbar/ToolbarContext.tsx index 46662f47b..67f19216e 100644 --- a/src/components/Swap/Toolbar/ToolbarContext.tsx +++ b/src/components/Swap/Toolbar/ToolbarContext.tsx @@ -21,8 +21,8 @@ export function Provider({ children }: PropsWithChildren) { [Field.INPUT]: { currency: inputCurrency }, [Field.OUTPUT]: { currency: outputCurrency }, } = useSwapInfo() - const isWrap = useIsWrap() + useEffect(() => { if (isWrap) { collapse()