Merge branch 'main' into info/explore-page

public/.well-known/assetlinks.json

@@ -3,27 +3,27 @@
     "relation": ["delegate_permission/common.handle_all_urls"],
     "target": {
       "namespace": "android_app",
-      "package_name": "com.uniswap",
+      "package_name": "com.uniswap.mobile",
       "sha256_cert_fingerprints":
-        ["97:A5:81:51:DA:AF:8F:6E:65:3A:90:1E:82:12:6C:FB:61:2D:36:C7:CF:20:61:6B:A3:4C:52:CA:BC:58:43:8E", "F9:E9:E3:F0:04:28:66:62:81:44:50:7E:D6:A9:5F:B9:65:39:02:70:1D:13:74:15:D3:E1:A3:1B:D4:38:3A:1F"]
+        ["49:D9:3D:5D:FB:AA:64:A4:64:80:85:0F:39:A8:C1:D9:25:D3:D4:BC:8E:6B:1F:45:0C:EA:AF:B1:0C:27:DF:B8", "F9:E9:E3:F0:04:28:66:62:81:44:50:7E:D6:A9:5F:B9:65:39:02:70:1D:13:74:15:D3:E1:A3:1B:D4:38:3A:1F"]
     }
   },
   {
     "relation": ["delegate_permission/common.handle_all_urls"],
     "target": {
       "namespace": "android_app",
-      "package_name": "com.uniswap.beta",
+      "package_name": "com.uniswap.mobile.beta",
       "sha256_cert_fingerprints":
-        ["E5:39:87:DC:4D:FD:4C:1B:A6:74:36:7D:3A:3B:6B:ED:9E:B3:66:89:92:8A:1B:B8:FC:1B:22:56:56:B4:46:A3", "54:4B:62:33:17:9B:5F:A8:E6:5D:D3:A6:E5:9D:80:5F:A5:02:7F:E2:14:B8:C1:7A:AC:4B:8D:E0:65:49:87:41"]
+        ["75:41:9C:2D:01:4A:88:4E:8D:C6:EF:E5:51:54:28:6B:99:05:31:43:AD:84:B4:EB:39:28:B8:C3:C4:CE:48:E3", "54:4B:62:33:17:9B:5F:A8:E6:5D:D3:A6:E5:9D:80:5F:A5:02:7F:E2:14:B8:C1:7A:AC:4B:8D:E0:65:49:87:41"]
     }
   },
   {
     "relation": ["delegate_permission/common.handle_all_urls"],
     "target": {
       "namespace": "android_app",
-      "package_name": "com.uniswap.dev",
+      "package_name": "com.uniswap.mobile.dev",
       "sha256_cert_fingerprints":
-        ["5A:6D:23:50:2F:1E:0D:01:DC:96:65:F3:3A:18:4C:4C:8C:67:E0:09:99:9B:B1:9B:BF:44:99:D0:D1:D0:FC:5E", "02:E6:1C:76:8C:75:C3:78:C8:8C:FE:7B:2E:8F:4B:E1:FA:47:F2:F6:1A:DB:57:69:4A:41:99:C6:71:2C:AB:E3", "FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"]
+        ["45:F8:15:02:C5:4F:AD:82:E7:51:F0:9C:D1:CA:77:C8:C9:BF:06:A6:D9:5A:55:4F:9E:B8:5F:81:33:2B:D0:DB", "02:E6:1C:76:8C:75:C3:78:C8:8C:FE:7B:2E:8F:4B:E1:FA:47:F2:F6:1A:DB:57:69:4A:41:99:C6:71:2C:AB:E3", "FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"]
     }
   }
 ]

src/components/AnimatedDropdown/index.tsx

@@ -1,11 +1,13 @@
-import { animated, useSpring } from 'react-spring'
+import { animated, useSpring, UseSpringProps } from 'react-spring'
 import useResizeObserver from 'use-resize-observer'
 
+type AnimatedDropdownProps = React.PropsWithChildren<{ open: boolean; springProps?: UseSpringProps }>
 /**
  * @param open conditional to show content or hide
+ * @param springProps additional props to include in spring animation
  * @returns Wrapper to smoothly hide and expand content
  */
-export default function AnimatedDropdown({ open, children }: React.PropsWithChildren<{ open: boolean }>) {
+export default function AnimatedDropdown({ open, springProps, children }: AnimatedDropdownProps) {
   const { ref, height } = useResizeObserver()
 
   const props = useSpring({
@@ -20,6 +22,7 @@ export default function AnimatedDropdown({ open, children }: React.PropsWithChil
       clamp: true,
       velocity: 0.01,
     },
+    ...springProps,
   })
   return (
     <animated.div

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -11,6 +11,7 @@ import { useInfoLiveViewsFlag } from 'featureFlags/flags/infoLiveViews'
 import { useInfoPoolPageFlag } from 'featureFlags/flags/infoPoolPage'
 import { useInfoTDPFlag } from 'featureFlags/flags/infoTDP'
 import { useMultichainUXFlag } from 'featureFlags/flags/multichainUx'
+import { useProgressIndicatorV2Flag } from 'featureFlags/flags/progressIndicatorV2'
 import { useQuickRouteMainnetFlag } from 'featureFlags/flags/quickRouteMainnet'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useUniswapXDefaultEnabledFlag } from 'featureFlags/flags/uniswapXDefault'
@@ -290,6 +291,12 @@ export default function FeatureFlagModal() {
           featureFlag={FeatureFlag.fotAdjustedmentsEnabled}
           label="Enable fee-on-transfer UI and slippage adjustments"
         />
+        <FeatureFlagOption
+          variant={BaseVariant}
+          value={useProgressIndicatorV2Flag()}
+          featureFlag={FeatureFlag.progressIndicatorV2}
+          label="Refreshed swap progress indicator"
+        />
         <FeatureFlagGroup name="Quick routes">
           <FeatureFlagOption
             variant={BaseVariant}

src/components/TransactionConfirmationModal/index.tsx

@@ -188,7 +188,7 @@ export function ConfirmationModalContent({
         </Row>
         {topContent()}
       </AutoColumn>
-      {bottomContent && <BottomSection gap="12px">{bottomContent()}</BottomSection>}
+      {bottomContent && <BottomSection gap="16px">{bottomContent()}</BottomSection>}
     </Wrapper>
   )
 }

src/components/swap/SwapLineItem.tsx

@@ -9,6 +9,7 @@ import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useHoverProps from 'hooks/useHoverProps'
 import { useIsMobile } from 'nft/hooks'
 import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { animated, SpringValue } from 'react-spring'
 import { InterfaceTrade, TradeFillType } from 'state/routing/types'
 import { isPreviewTrade, isUniswapXTrade } from 'state/routing/utils'
 import { useUserSlippageTolerance } from 'state/user/hooks'
@@ -238,11 +239,12 @@ function ValueWrapper({ children, lineItem, labelHovered, syncing }: ValueWrappe
   )
 }
 
-interface SwapLineItemProps {
+export interface SwapLineItemProps {
   trade: InterfaceTrade
   syncing: boolean
   allowedSlippage: Percent
   type: SwapLineItemType
+  animatedOpacity?: SpringValue<number>
 }
 
 function SwapLineItem(props: SwapLineItemProps) {
@@ -252,14 +254,16 @@ function SwapLineItem(props: SwapLineItemProps) {
   if (!LineItem) return null
 
   return (
-    <RowBetween>
-      <LabelText {...hoverProps} hasTooltip={!!LineItem.TooltipBody} data-testid="swap-li-label">
-        <LineItem.Label />
-      </LabelText>
-      <ValueWrapper lineItem={LineItem} labelHovered={labelHovered} syncing={props.syncing}>
-        <LineItem.Value />
-      </ValueWrapper>
-    </RowBetween>
+    <animated.div style={{ opacity: props.animatedOpacity }}>
+      <RowBetween>
+        <LabelText {...hoverProps} hasTooltip={!!LineItem.TooltipBody} data-testid="swap-li-label">
+          <LineItem.Label />
+        </LabelText>
+        <ValueWrapper lineItem={LineItem} labelHovered={labelHovered} syncing={props.syncing}>
+          <LineItem.Value />
+        </ValueWrapper>
+      </RowBetween>
+    </animated.div>
   )
 }
 

src/components/swap/SwapModalFooter.tsx

@@ -2,28 +2,33 @@ import { Trans } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
 import { Percent } from '@uniswap/sdk-core'
 import { TraceEvent } from 'analytics'
+import AnimatedDropdown from 'components/AnimatedDropdown'
 import Column from 'components/Column'
 import SpinningLoader from 'components/Loader/SpinningLoader'
 import { SwapResult } from 'hooks/useSwapCallback'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
-import { ReactNode } from 'react'
+import ms from 'ms'
+import { ReactNode, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
+import { easings, useSpring } from 'react-spring'
 import { InterfaceTrade, RouterPreference } from 'state/routing/types'
 import { isClassicTrade } from 'state/routing/utils'
 import { useRouterPreference, useUserSlippageTolerance } from 'state/user/hooks'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme/components'
+import { Separator, ThemedText } from 'theme/components'
 import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
 import { formatSwapButtonClickEventProperties } from 'utils/loggingFormatters'
 
+import { ReactComponent as ExpandoIconClosed } from '../../assets/svg/expando-icon-closed.svg'
+import { ReactComponent as ExpandoIconOpened } from '../../assets/svg/expando-icon-opened.svg'
 import { ButtonError, SmallButtonPrimary } from '../Button'
 import Row, { AutoRow, RowBetween, RowFixed } from '../Row'
 import { SwapCallbackError, SwapShowAcceptChanges } from './styled'
-import { SwapLineItemType } from './SwapLineItem'
+import { SwapLineItemProps, SwapLineItemType } from './SwapLineItem'
 import SwapLineItem from './SwapLineItem'
 
 const DetailsContainer = styled(Column)`
-  padding: 0 8px;
+  padding-bottom: 8px;
 `
 
 const StyledAlertTriangle = styled(AlertTriangle)`
@@ -33,9 +38,45 @@ const StyledAlertTriangle = styled(AlertTriangle)`
 
 const ConfirmButton = styled(ButtonError)`
   height: 56px;
-  margin-top: 10px;
 `
 
+const DropdownControllerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: -6px;
+
+  padding: 0 16px;
+  min-width: fit-content;
+  white-space: nowrap;
+`
+
+const DropdownButton = styled.button`
+  padding: 0;
+  margin-top: 16px;
+  height: 28px;
+  text-decoration: none;
+  display: flex;
+  background: none;
+  border: none;
+  align-items: center;
+  cursor: pointer;
+`
+
+function DropdownController({ open, onClick }: { open: boolean; onClick: () => void }) {
+  return (
+    <DropdownButton onClick={onClick}>
+      <Separator />
+      <DropdownControllerWrapper>
+        <ThemedText.BodySmall color="neutral2">
+          {open ? <Trans>Show less</Trans> : <Trans>Show more</Trans>}
+        </ThemedText.BodySmall>
+        {open ? <ExpandoIconOpened /> : <ExpandoIconClosed />}
+      </DropdownControllerWrapper>
+      <Separator />
+    </DropdownButton>
+  )
+}
+
 export default function SwapModalFooter({
   trade,
   allowedSlippage,
@@ -66,17 +107,16 @@ export default function SwapModalFooter({
   const [routerPreference] = useRouterPreference()
   const routes = isClassicTrade(trade) ? getRoutingDiagramEntries(trade) : undefined
   const theme = useTheme()
+  const [showMore, setShowMore] = useState(false)
 
   const lineItemProps = { trade, allowedSlippage, syncing: false }
 
   return (
     <>
+      <DropdownController open={showMore} onClick={() => setShowMore(!showMore)} />
       <DetailsContainer gap="md">
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.EXCHANGE_RATE} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.MAX_SLIPPAGE} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} />
+        <ExpandableLineItems {...lineItemProps} open={showMore} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.NETWORK_COST} />
@@ -141,3 +181,43 @@ export default function SwapModalFooter({
     </>
   )
 }
+
+function AnimatedLineItem(props: SwapLineItemProps & { open: boolean; delay: number }) {
+  const { open, delay } = props
+
+  const animatedProps = useSpring({
+    animatedOpacity: open ? 1 : 0,
+    config: { duration: ms('300ms'), easing: easings.easeOutSine },
+    delay,
+  })
+
+  return <SwapLineItem {...props} {...animatedProps} />
+}
+
+function ExpandableLineItems(props: { trade: InterfaceTrade; allowedSlippage: Percent; open: boolean }) {
+  const { open, trade, allowedSlippage } = props
+
+  if (!trade) return null
+
+  const lineItemProps = { trade, allowedSlippage, syncing: false, open }
+
+  return (
+    <AnimatedDropdown
+      open={open}
+      springProps={{
+        marginTop: open ? 0 : -12,
+        config: {
+          duration: ms('200ms'),
+          easing: easings.easeOutSine,
+        },
+      }}
+    >
+      <Column gap="md">
+        <AnimatedLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} delay={ms('50ms')} />
+        <AnimatedLineItem {...lineItemProps} type={SwapLineItemType.MAX_SLIPPAGE} delay={ms('100ms')} />
+        <AnimatedLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} delay={ms('120ms')} />
+        <AnimatedLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} delay={ms('120ms')} />
+      </Column>
+    </AnimatedDropdown>
+  )
+}

src/components/swap/SwapModalHeader.tsx

@@ -6,14 +6,10 @@ import { InterfaceTrade } from 'state/routing/types'
 import { isPreviewTrade } from 'state/routing/utils'
 import { Field } from 'state/swap/actions'
 import styled from 'styled-components'
-import { Divider, ThemedText } from 'theme/components'
+import { ThemedText } from 'theme/components'
 
 import { SwapModalHeaderAmount } from './SwapModalHeaderAmount'
 
-const Rule = styled(Divider)`
-  margin: 16px 2px 24px 2px;
-`
-
 const HeaderContainer = styled(AutoColumn)`
   margin-top: 16px;
 `
@@ -50,30 +46,29 @@ export default function SwapModalHeader({
           isLoading={isPreviewTrade(trade) && trade.tradeType === TradeType.EXACT_INPUT}
           tooltipText={
             trade.tradeType === TradeType.EXACT_INPUT ? (
-              <ThemedText.BodySmall>
+              <ThemedText.Caption>
                 <Trans>
                   Output is estimated. You will receive at least{' '}
                   <b>
                     {trade.minimumAmountOut(allowedSlippage).toSignificant(6)} {trade.outputAmount.currency.symbol}
                   </b>{' '}
                   or the transaction will revert.
                 </Trans>
-              </ThemedText.BodySmall>
+              </ThemedText.Caption>
             ) : (
-              <ThemedText.BodySmall>
+              <ThemedText.Caption>
                 <Trans>
                   Input is estimated. You will sell at most{' '}
                   <b>
                     {trade.maximumAmountIn(allowedSlippage).toSignificant(6)} {trade.inputAmount.currency.symbol}
                   </b>{' '}
                   or the transaction will revert.
                 </Trans>
-              </ThemedText.BodySmall>
+              </ThemedText.Caption>
             )
           }
         />
       </Column>
-      <Rule />
     </HeaderContainer>
   )
 }

src/components/swap/SwapModalHeaderAmount.tsx

@@ -61,7 +61,7 @@ export function SwapModalHeaderAmount({
       <Column gap="xs">
         <ThemedText.BodySecondary>
           <MouseoverTooltip text={tooltipText} disabled={!tooltipText}>
-            <Label cursor="help">{label}</Label>
+            <Label cursor={tooltipText ? 'help' : undefined}>{label}</Label>
           </MouseoverTooltip>
         </ThemedText.BodySecondary>
         <Column gap="xs">