Feat/lp zapping

public/locales/en/common.json

@@ -94,6 +94,7 @@
   "liquidity": "Liquidity",
   "rewards": "Rewards",
   "connectWallet": "Connect wallet",
+  "zap": "Zap",
   "chart": "chart",
   "off": "off"
 }

public/locales/en/pool.json

@@ -22,5 +22,6 @@
   "pairsList.pair": "Pair",
   "pairsList.farming": "Farming",
   "pairsList.myPairs": "My Pairs",
-  "pairsList.accountAnalyticsAndAccruedFees": "Account analytics and accrued fees"
+  "pairsList.accountAnalyticsAndAccruedFees": "Account analytics and accrued fees",
+  "pair.zap": "Zap"
 }

public/locales/en/swap.json

@@ -18,6 +18,7 @@
   "settings.MEVProtection": "MEV Protection",
   "tabs.limit": "Limit",
   "tabs.bridgeSwap": "Bridge Swap",
+  "tabs.zap": "Zap",
   "button.priceImpactTooHigh": "Price Impact Too High",
   "button.swapWith": "Swap with",
   "button.anyway": "Anyway",
@@ -32,6 +33,14 @@
   "button.enterCurrencyAmount": "Enter {{ currency }} amount",
   "tradeDetails.bestPriceFoundOn": "Best price found on <0>{{platform}}</0>.",
   "tradeDetails.swapWithNoAdditionalFees": "Swap with <0>no additional fees</0>.",
+  "tradeDetails.priceImpact": "Price impact: <0>{{priceImpact}} %</0>.",
+  "button.selectPair": "Select pair",
+  "button.tradeNotFound": "Trade not found",
+  "button.zap": "Zap",
+  "button.zapInTo": "Zap in to",
+  "button.zapOutFrom": "Zap out from",
+  "button.zapAnyway": "Zap anyway",
+  "button.zapNotAvailable": "Zap not available",
   "advancedTradingView.column.trades": "Trades",
   "advancedTradingView.column.openOrders": "Open orders",
   "advancedTradingView.column.orderHistory": "Order history",

src/components/CurrencyInputPanel/CurrencyInputPanel.component.tsx

@@ -1,4 +1,4 @@
-import { Currency } from '@swapr/sdk'
+import { Currency, Pair } from '@swapr/sdk'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
@@ -13,6 +13,7 @@ import { NumericalInput } from '../Input/NumericalInput'
 import { Loader } from '../Loader'
 import { RowBetween } from '../Row'
 import { CurrencySearchModalComponent } from '../SearchModal/CurrencySearchModal'
+import { PairSearchModal } from '../SearchModal/PairSearchModal'
 import {
   Aligner,
   Container,
@@ -23,7 +24,7 @@ import {
   LabelRow,
   UppercaseHelper,
 } from './CurrencyInputPanel.styles'
-import { CurrencyInputPanelProps } from './CurrencyInputPanel.types'
+import { CurrencyInputPanelProps, InputType } from './CurrencyInputPanel.types'
 import { CurrencyUserBalance } from './CurrencyUserBalance'
 import { CurrencyView } from './CurrencyView'
 
@@ -36,6 +37,7 @@ export const CurrencyInputPanelComponent = ({
   balance,
   currency,
   disabled,
+  isDisabledStyled = false,
   hideInput = false,
   isLoading = false,
   fiatValue,
@@ -52,6 +54,10 @@ export const CurrencyInputPanelComponent = ({
   currencyWrapperSource = CurrencyWrapperSource.SWAP,
   disableCurrencySelect = false,
   isOutputPanel,
+  inputType = InputType.currency,
+  onPairSelect,
+  filterPairs,
+  inputTitle,
 }: CurrencyInputPanelProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [focused, setFocused] = useState(false)
@@ -93,12 +99,19 @@ export const CurrencyInputPanelComponent = ({
     [isMaxAmount, onCurrencySelect]
   )
 
+  const handleOnPairSelect = useCallback(
+    (pair: Pair) => {
+      if (onPairSelect) onPairSelect(pair)
+    },
+    [onPairSelect]
+  )
+
   const handleOnUserInput = useCallback(
     (value: string) => {
       if (maxAmount?.toExact() === value) setIsMaxAmount(true)
       else setIsMaxAmount(false)
 
-      onUserInput(value)
+      if (onUserInput) onUserInput(value)
     },
     [maxAmount, onUserInput]
   )
@@ -116,7 +129,7 @@ export const CurrencyInputPanelComponent = ({
 
   return (
     <InputPanel id={id}>
-      <Container focused={focused}>
+      <Container disabled={isDisabledStyled} focused={focused}>
         <Content>
           {!hideInput && label && (
             <LabelRow>
@@ -141,6 +154,7 @@ export const CurrencyInputPanelComponent = ({
                   }}
                   disabled={disabled}
                   data-testid={'transaction-value-input'}
+                  title={inputTitle}
                 />
               </>
             )}
@@ -160,6 +174,7 @@ export const CurrencyInputPanelComponent = ({
                     currency={currency}
                     chainIdOverride={chainIdOverride}
                     currencyWrapperSource={currencyWrapperSource}
+                    inputType={inputType}
                   />
                 )}
               </Aligner>
@@ -181,17 +196,27 @@ export const CurrencyInputPanelComponent = ({
           </div>
         </Content>
       </Container>
-      {!disableCurrencySelect && onCurrencySelect && (
-        <CurrencySearchModalComponent
-          isOpen={isOpen}
-          onDismiss={onDismiss}
-          onCurrencySelect={handleOnCurrencySelect}
-          selectedCurrency={currency}
-          otherSelectedCurrency={new Array(1).fill(otherCurrency)}
-          showCommonBases={showCommonBases}
-          isOutputPanel={isOutputPanel}
-        />
-      )}
+      {!disableCurrencySelect &&
+        (onCurrencySelect && inputType === InputType.currency ? (
+          <CurrencySearchModalComponent
+            isOpen={isOpen}
+            onDismiss={onDismiss}
+            onCurrencySelect={handleOnCurrencySelect}
+            selectedCurrency={currency}
+            otherSelectedCurrency={new Array(1).fill(otherCurrency)}
+            showCommonBases={showCommonBases}
+            isOutputPanel={isOutputPanel}
+          />
+        ) : (
+          onPairSelect && (
+            <PairSearchModal
+              isOpen={isOpen}
+              onDismiss={onDismiss}
+              onPairSelect={handleOnPairSelect}
+              filterPairs={filterPairs}
+            />
+          )
+        ))}
     </InputPanel>
   )
 }

src/components/CurrencyInputPanel/CurrencyInputPanel.styles.ts

@@ -70,8 +70,9 @@ export const InputPanel = styled.div`
   z-index: 1;
 `
 
-export const Container = styled.div<{ focused: boolean }>`
-  background-color: ${({ theme }) => theme.bg1And2};
+export const Container = styled.div<{ focused: boolean; disabled?: boolean }>`
+  background-color: ${({ theme, disabled }) =>
+    disabled ? 'linear-gradient(90deg,#4c4c76 19.74%,#292942 120.26%)' : theme.bg1And2};
   border: solid 1px ${({ focused, theme }) => (focused ? theme.bg3 : theme.bg1And2)};
   border-radius: 12px;
   transition: border 0.3s ease;

src/components/CurrencyInputPanel/CurrencyInputPanel.types.ts

@@ -11,10 +11,11 @@ export interface CurrencyInputPanelProps {
   balance?: CurrencyAmount
   currency?: Currency | null
   disabled?: boolean
+  isDisabledStyled?: boolean
   hideInput?: boolean
   fiatValue?: CurrencyAmount | null
   isLoading?: boolean
-  onUserInput: (value: string) => void
+  onUserInput?: (value: string) => void
   hideBalance?: boolean
   priceImpact?: Percent
   otherCurrency?: Currency | null
@@ -29,15 +30,24 @@ export interface CurrencyInputPanelProps {
   setDisplayedValue?: (val: string) => void
   maxAmount?: CurrencyAmount
   isOutputPanel?: boolean
+  inputType?: InputType
+  onPairSelect?: (pair: Pair) => void
+  filterPairs?: (pair: Pair) => boolean
+  inputTitle?: string
 }
 
 export type CurrencyViewProps = Pick<
   CurrencyInputPanelProps,
-  'currency' | 'currency' | 'chainIdOverride' | 'currencyWrapperSource' | 'disableCurrencySelect' | 'pair'
+  'currency' | 'currency' | 'chainIdOverride' | 'currencyWrapperSource' | 'disableCurrencySelect' | 'pair' | 'inputType'
 >
 export type CurrencyUserBalanceProps = Pick<
   CurrencyInputPanelProps,
   'hideBalance' | 'currency' | 'pair' | 'balance' | 'customBalanceText' | 'onMax'
 > & {
   selectedCurrencyBalance: CurrencyAmount | undefined
 }
+
+export enum InputType {
+  currency,
+  pair,
+}

src/components/CurrencyInputPanel/CurrencyView.tsx

@@ -3,18 +3,19 @@ import { useTranslation } from 'react-i18next'
 import { CurrencyLogo } from '../CurrencyLogo'
 import { DoubleCurrencyLogo } from '../DoubleCurrencyLogo'
 import { StyledDropDown, StyledTokenName } from './CurrencyInputPanel.styles'
-import { CurrencyViewProps } from './CurrencyInputPanel.types'
+import { CurrencyViewProps, InputType } from './CurrencyInputPanel.types'
 
 export const CurrencyView = ({
   pair,
   currency,
   chainIdOverride,
   currencyWrapperSource,
   disableCurrencySelect,
+  inputType,
 }: CurrencyViewProps) => {
   const { t } = useTranslation('swap')
 
-  if (pair) {
+  if (pair && (currency?.symbol === 'DXS' || !currency)) {
     return (
       <>
         <DoubleCurrencyLogo marginRight={4} currency0={pair.token0} currency1={pair.token1} size={20} />
@@ -45,7 +46,12 @@ export const CurrencyView = ({
           ? currency.symbol.slice(0, 4) +
             '...' +
             currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
-          : currency?.symbol) || <div data-testid="select-token-button"> {t('currencyView.selectToken')}</div>}
+          : currency?.symbol) || (
+          <div data-testid="select-token-button">
+            {' '}
+            {inputType === InputType.currency ? t('button.selectToken') : t('button.selectPair')}
+          </div>
+        )}
       </StyledTokenName>
       {!disableCurrencySelect && (pair || currency) && <StyledDropDown selected={!!currency} />}
     </>

src/components/Header/index.tsx

@@ -287,6 +287,10 @@ function Header() {
               ↗
             </Text>
           </HeaderLink>
+          <HeaderLink data-testid="zap-nav-link" id="zap-nav-link" to="/zap">
+            {t('zap')}
+            <HeaderLinkBadge label="BETA" />
+          </HeaderLink>
         </HeaderLinks>
       </HeaderRow>
       <AdditionalDataWrap>

src/components/Input/NumericalInput/index.tsx

@@ -9,6 +9,7 @@ export const NumericalInput = memo(function InnerInput({
   value,
   onUserInput,
   placeholder,
+  title,
   ...rest
 }: {
   value: string | number
@@ -34,7 +35,7 @@ export const NumericalInput = memo(function InnerInput({
       }}
       // universal input options
       inputMode="decimal"
-      title="Token Amount"
+      title={title ?? 'Token Amount'}
       autoComplete="off"
       autoCorrect="off"
       // text-specific options

src/components/RecipientField/index.tsx

@@ -1,10 +1,10 @@
+import { ActionCreatorWithPayload } from '@reduxjs/toolkit'
 import { ChangeEvent, useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import styled from 'styled-components'
 
 import useENS from '../../hooks/useENS'
-import { setRecipient } from '../../state/swap/actions'
 import { TYPE } from '../../theme'
 import { SearchInput } from '../SearchModal/shared'
 
@@ -20,9 +20,15 @@ const SearchInputStyled = styled(SearchInput)<{ error: boolean }>`
 
 export interface RecipientFieldProps {
   recipient: string | null
+  setRecipient: ActionCreatorWithPayload<
+    {
+      recipient: string | null
+    },
+    string
+  >
 }
 
-export const RecipientField = ({ recipient }: RecipientFieldProps) => {
+export const RecipientField = ({ recipient, setRecipient }: RecipientFieldProps) => {
   const { t } = useTranslation('swap')
   const dispatch = useDispatch()
   const { address, loading } = useENS(recipient)
@@ -36,15 +42,15 @@ export const RecipientField = ({ recipient }: RecipientFieldProps) => {
       const input = event.target.value
       dispatch(setRecipient({ recipient: input }))
     },
-    [dispatch]
+    [dispatch] // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   // Unset recipient on unmount
   useEffect(() => {
     return () => {
       dispatch(setRecipient({ recipient: null }))
     }
-  }, [dispatch])
+  }, [dispatch]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div>

src/components/SearchModal/PairSearch/PairSearch.component.tsx

@@ -34,6 +34,7 @@ export const PairSearch = ({ selectedPair, onPairSelect, onDismiss, isOpen, filt
 
   const filteredPairs: Pair[] = useMemo(() => {
     let pairs = allPairs
+    // TODO add loading indicator during filtering
     if (filterPairs) pairs = allPairs.filter(filterPairs)
     if (isAddressSearch) return searchPair ? [searchPair] : []
     return filterPairsBySearchQuery(pairs, searchQuery)

src/components/SearchModal/utils/filtering.ts

@@ -1,8 +1,9 @@
-import { Currency, Pair, Token } from '@swapr/sdk'
+import { ChainId, Currency, Pair, Token } from '@swapr/sdk'
 
 import { TokenInfo } from '@uniswap/token-lists'
 import { useMemo } from 'react'
 
+import { SUPPORTED_ZAP_PAIRS } from '../../../constants'
 import { isAddress } from '../../../utils'
 
 const alwaysTrue = () => true
@@ -143,3 +144,7 @@ export const useSortedTokensByQuery = (tokens: Token[] | undefined, searchQuery:
     return [...exactMatches, ...symbolSubtrings, ...rest]
   }, [tokens, searchQuery])
 }
+
+export const filterPairsForZap = (pair: Pair, chainId: ChainId): boolean => {
+  return SUPPORTED_ZAP_PAIRS[chainId].includes(pair.liquidityToken.address)
+}