fix: integration fixes (Uniswap#437)

* fix: integration fixes * chore: consolidate isExpandable logic * fix: typing * fix: cursor and propagation * fix: typecheck Co-authored-by: Zach Pomerantz <[email protected]>
recehantoken · Jan 24, 2023 · c7a560b · c7a560b
1 parent b40daf5
commit c7a560b
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 43 deletions.
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -143,7 +143,7 @@ export const DecimalInput = forwardRef(function DecimalInput(props: InputProps,
 export const inputCss = css`
   background-color: ${({ theme }) => theme.module};
   border: 1px solid ${({ theme }) => theme.outline};
-  border-radius: ${({ theme }) => theme.borderRadius}em;
+  border-radius: ${({ theme }) => theme.borderRadius.medium}em;
   cursor: text;
   padding: calc(0.75em - 1px);
 

diff --git a/src/components/Swap/Price.tsx b/src/components/Swap/Price.tsx
@@ -57,8 +57,8 @@ export default function Price({ trade, outputUSDC }: PriceProps) {
     <TextButton
       color="primary"
       onClick={(e) => {
-        e.stopPropagation()
         onClick()
+        e.stopPropagation()
       }}
     >
       <ThemedText.Body2>

diff --git a/src/components/Swap/Toolbar/Caption.tsx b/src/components/Swap/Toolbar/Caption.tsx
@@ -171,28 +171,13 @@ export interface TradeProps {
 
 interface ExpandProps {
   expanded: boolean
-  onToggleOpen: () => void
 }
 
-const Expander = ({ expanded, onToggleOpen }: ExpandProps) => {
-  return (
-    <ExpandIcon
-      $expanded={expanded}
-      onClick={(e: React.MouseEvent) => {
-        onToggleOpen()
-        e.stopPropagation()
-      }}
-    />
-  )
+const Expander = ({ expanded }: ExpandProps) => {
+  return <ExpandIcon $expanded={expanded} />
 }
 
-export function Trade({
-  trade,
-  outputUSDC,
-  gasUseEstimateUSD,
-  expanded,
-  onToggleOpen,
-}: TradeProps & TradeTooltip & ExpandProps) {
+export function Trade({ trade, outputUSDC, gasUseEstimateUSD, expanded }: TradeProps & TradeTooltip & ExpandProps) {
   return (
     <>
       <Caption caption={<Price trade={trade} outputUSDC={outputUSDC} />} />
@@ -202,7 +187,7 @@ export function Trade({
             <GasEstimateTooltip gasUseEstimateUSD={gasUseEstimateUSD} trade={trade} />
           </CaptionRow>
         )}
-        <Expander expanded={expanded} onToggleOpen={onToggleOpen} />
+        <Expander expanded={expanded} />
       </CaptionRow>
     </>
   )
@@ -218,7 +203,7 @@ export const PriceImpactWarningTooltipContent = () => (
   </ThemedText.Caption>
 )
 
-export function PriceImpact({ impact, expanded, onToggleOpen }: PriceImpactProps & ExpandProps) {
+export function PriceImpact({ impact, expanded }: PriceImpactProps & ExpandProps) {
   return (
     <>
       <Caption
@@ -234,7 +219,7 @@ export function PriceImpact({ impact, expanded, onToggleOpen }: PriceImpactProps
         <ThemedText.Body2 userSelect={false} color={impact.warning}>
           {formatPriceImpact(impact?.percent)}
         </ThemedText.Body2>
-        <Expander expanded={expanded} onToggleOpen={onToggleOpen} />
+        <Expander expanded={expanded} />
       </CaptionRow>
     </>
   )

diff --git a/src/components/Swap/Toolbar/GasEstimateTooltip.tsx b/src/components/Swap/Toolbar/GasEstimateTooltip.tsx
@@ -36,8 +36,9 @@ export function GasEstimateTooltip({ gasUseEstimateUSD, trade }: TradeTooltip) {
     <>
       <Row
         gap={0.25}
-        onClick={() => {
+        onClick={(e) => {
           setOpen((open) => !open)
+          e.stopPropagation()
         }}
       >
         <Gas color="secondary" />

diff --git a/src/components/Swap/Toolbar/index.tsx b/src/components/Swap/Toolbar/index.tsx
@@ -8,7 +8,7 @@ import { useIsWrap } from 'hooks/swap/useWrapCallback'
 import { AllowanceState } from 'hooks/usePermit2Allowance'
 import { usePermit2 as usePermit2Enabled } from 'hooks/useSyncFlags'
 import { AlertTriangle, Info } from 'icons'
-import { createContext, memo, PropsWithChildren, useContext, useMemo, useState } from 'react'
+import { createContext, memo, PropsWithChildren, ReactNode, useCallback, useContext, useMemo, useState } from 'react'
 import { TradeState } from 'state/routing/types'
 import { Field } from 'state/swap'
 import styled from 'styled-components/macro'
@@ -29,8 +29,8 @@ const StyledExpando = styled(Expando)`
 
 const COLLAPSED_TOOLBAR_HEIGHT_EM = 3.5
 
-const ToolbarRow = styled(Row)`
-  cursor: pointer;
+const ToolbarRow = styled(Row)<{ isExpandable?: true }>`
+  cursor: ${({ isExpandable }) => isExpandable && 'pointer'};
   flex-wrap: nowrap;
   gap: 0.5em;
   height: ${COLLAPSED_TOOLBAR_HEIGHT_EM}em;
@@ -79,50 +79,50 @@ export default memo(function Toolbar() {
     return inputBalance && inputAmount && inputBalance.lessThan(inputAmount)
   }, [inputAmount, inputBalance])
 
-  const caption = useMemo(() => {
+  const { caption, isExpandable } = useMemo((): { caption: ReactNode; isExpandable?: true } => {
     switch (error) {
       case ChainError.ACTIVATING_CHAIN:
-        return <Caption.Connecting />
+        return { caption: <Caption.Connecting /> }
       case ChainError.UNSUPPORTED_CHAIN:
-        return <Caption.UnsupportedNetwork />
+        return { caption: <Caption.UnsupportedNetwork /> }
       case ChainError.MISMATCHED_TOKEN_CHAINS:
-        return <Caption.Error />
+        return { caption: <Caption.Error /> }
       default:
     }
 
     if (state === TradeState.LOADING) {
-      return <Caption.LoadingTrade gasUseEstimateUSD={gasUseEstimateUSD} />
+      return { caption: <Caption.LoadingTrade gasUseEstimateUSD={gasUseEstimateUSD} /> }
     }
 
     if (inputCurrency && outputCurrency && isAmountPopulated) {
       if (insufficientBalance) {
-        return <Caption.InsufficientBalance currency={inputCurrency} />
+        return { caption: <Caption.InsufficientBalance currency={inputCurrency} /> }
       }
       if (isWrap) {
-        return <Caption.Wrap inputCurrency={inputCurrency} outputCurrency={outputCurrency} />
+        return { caption: <Caption.Wrap inputCurrency={inputCurrency} outputCurrency={outputCurrency} /> }
       }
       if (state === TradeState.NO_ROUTE_FOUND || (trade && !trade.swaps)) {
-        return <Caption.InsufficientLiquidity />
+        return { caption: <Caption.InsufficientLiquidity /> }
       }
       if (trade?.inputAmount && trade.outputAmount) {
-        return impact?.warning ? (
-          <Caption.PriceImpact impact={impact} expanded={open} onToggleOpen={onToggleOpen} />
+        const caption = impact?.warning ? (
+          <Caption.PriceImpact impact={impact} expanded={open} />
         ) : (
           <Caption.Trade
             trade={trade}
             outputUSDC={outputUSDC}
             gasUseEstimateUSD={open ? null : gasUseEstimateUSD}
             expanded={open}
-            onToggleOpen={onToggleOpen}
           />
         )
+        return { caption, isExpandable: true }
       }
       if (state === TradeState.INVALID) {
-        return <Caption.Error />
+        return { caption: <Caption.Error /> }
       }
     }
 
-    return <Caption.MissingInputs />
+    return { caption: <Caption.MissingInputs /> }
   }, [
     error,
     state,
@@ -135,10 +135,15 @@ export default memo(function Toolbar() {
     trade,
     impact,
     open,
-    onToggleOpen,
     outputUSDC,
   ])
 
+  const maybeToggleOpen = useCallback(() => {
+    if (isExpandable) {
+      onToggleOpen()
+    }
+  }, [isExpandable, onToggleOpen])
+
   const tradeSummaryRows: SummaryRowProps[] = useMemo(() => {
     const currencySymbol = trade?.outputAmount?.currency.symbol ?? ''
     const rows: SummaryRowProps[] = [
@@ -194,14 +199,20 @@ export default memo(function Toolbar() {
   return (
     <StyledExpando
       title={
-        <ToolbarRow flex justify="space-between" data-testid="toolbar" onClick={onToggleOpen}>
+        <ToolbarRow
+          flex
+          justify="space-between"
+          data-testid="toolbar"
+          onClick={maybeToggleOpen}
+          isExpandable={isExpandable}
+        >
           {caption}
         </ToolbarRow>
       }
       styledTitleWrapper={false}
       showBottomGradient={false}
       open={open}
-      onExpand={onToggleOpen}
+      onExpand={maybeToggleOpen}
       maxHeight={16}
     >
       <Column>

diff --git a/src/index.tsx b/src/index.tsx
@@ -14,6 +14,7 @@ export { SwapWidgetSkeleton } from 'components/Swap/Skeleton'
 export { SupportedChainId } from 'constants/chains'
 export type { SupportedLocale } from 'constants/locales'
 export { DEFAULT_LOCALE, SUPPORTED_LOCALES } from 'constants/locales'
+export { RouterPreference } from 'hooks/routing/types'
 export type { SwapController } from 'hooks/swap/useSyncController'
 export type { FeeOptions } from 'hooks/swap/useSyncConvenienceFee'
 export type { DefaultAddress, TokenDefaults } from 'hooks/swap/useSyncTokenDefaults'