fix: width of price impact speedbump (#557)

* fix: width of price impact speedbump * fix: rename const
Uniswap · Mar 16, 2023 · 14b32b4 · 14b32b4 · vercel · Mar 16, 2023
1 parent 7bae76a
commit 14b32b4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 15 deletions.
diff --git 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
@@ -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 (
     <SpeedBumpWrapper>
       <Column flex gap={0.75}>
-        <HeaderRow>
+        <HeaderRow flex align="center" justify="flex-end">
           <StyledXButton onClick={onClose} />
         </HeaderRow>
         <IconWrapper>

diff --git 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,24 +287,25 @@ export function SummaryDialog(props: SummaryDialogProps) {
   }, [ackPriceImpact, props.impact, showSpeedbump])
 
   return (
-    <>
+    <Column
+      style={{ minWidth: isPageCentered ? Math.min(MIN_PAGE_CENTERED_DIALOG_WIDTH, width) : 'auto', height: '100%' }}
+      ref={setBoundary}
+    >
       {showSpeedbump && props.impact ? (
         <SpeedBumpDialog onAcknowledge={onAcknowledgeSpeedbump}>
           {t`This transaction will result in a`}{' '}
           <PriceImpactText>{formatPriceImpact(props.impact?.percent)} </PriceImpactText>
           {t`price impact on the market price of this pool. Do you wish to continue? `}
         </SpeedBumpDialog>
       ) : (
-        <Column style={{ minWidth: isPageCentered ? Math.min(400, width) : 'auto', height: '100%' }} ref={setBoundary}>
-          <PopoverBoundaryProvider value={boundary}>
-            <Header title={<Trans>Review swap</Trans>} />
-            <Body flex align="stretch">
-              <Details {...props} />
-            </Body>
-            <ConfirmButton {...props} triggerImpactSpeedbump={triggerImpactSpeedbump} />
-          </PopoverBoundaryProvider>
-        </Column>
+        <PopoverBoundaryProvider value={boundary}>
+          <Header title={<Trans>Review swap</Trans>} />
+          <Body flex align="stretch">
+            <Details {...props} />
+          </Body>
+          <ConfirmButton {...props} triggerImpactSpeedbump={triggerImpactSpeedbump} />
+        </PopoverBoundaryProvider>
       )}
-    </>
+    </Column>
   )
 }
diff --git 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()