[SWA-46] Limit order refactoring

.gitignore

@@ -47,5 +47,6 @@ mochawesome-report
 **/generated/**/*
 !src/analytics/generated/**/*
 !src/pages/Swap/LimitOrderBox/generated/**/*
+!src/pages/Swap/LimitOrder/generated/**/*
 storybook-static
 

src/pages/Swap/Components/Tabs.tsx

@@ -95,6 +95,16 @@ export function Tabs() {
           Swap
         </Button>
         <LimitOrderTab className={activeTab === SwapTab.LIMIT_ORDER ? 'active' : ''} setActiveTab={setActiveTab} />
+
+        <Button
+          onClick={() => setActiveTab(SwapTab.LIMIT_ORDER_NEW)}
+          title="Limit Order"
+          className={activeTab === SwapTab.LIMIT_ORDER_NEW ? 'active' : ''}
+        >
+          <StyledSliders height={11} />
+          {t('tabs.limit')}
+        </Button>
+
         <Button
           title="Bridge Swap"
           onClick={() => {

src/pages/Swap/LimitOrder/Components/ApprovalFlow.tsx

@@ -0,0 +1,33 @@
+import { ButtonPrimary } from '../../../../components/Button'
+import { Loader } from '../../../../components/Loader'
+import ProgressSteps from '../../../../components/ProgressSteps'
+import { ApprovalState } from '../../../../hooks/useApproveCallback'
+
+import { AutoRow } from './AutoRow'
+
+interface ApprovalFlowProps {
+  approval: ApprovalState
+  approveCallback: () => Promise<void>
+  tokenInSymbol: string
+}
+
+export const ApprovalFlow = ({ approval, approveCallback, tokenInSymbol }: ApprovalFlowProps) => (
+  <>
+    <ButtonPrimary
+      onClick={approveCallback}
+      disabled={approval !== ApprovalState.NOT_APPROVED}
+      altDisabledStyle={approval === ApprovalState.PENDING} // show solid button while waiting
+    >
+      {approval === ApprovalState.PENDING ? (
+        <AutoRow gap="6px" justify="center">
+          Approving <Loader />
+        </AutoRow>
+      ) : (
+        'Approve ' + tokenInSymbol
+      )}
+    </ButtonPrimary>
+    <div style={{ marginTop: '1rem' }}>
+      <ProgressSteps steps={[approval === ApprovalState.APPROVED]} />
+    </div>
+  </>
+)

src/pages/Swap/LimitOrder/Components/AutoRow.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+import { AutoRow as AutoRowBase } from '../../../../components/Row'
+
+export const AutoRow = styled(AutoRowBase)`
+  gap: 12px;
+  justify-items: space-between;
+  flex-wrap: nowrap;
+  > div {
+    width: 50%;
+  }
+`

src/pages/Swap/LimitOrder/Components/ConfirmLimitOrderModal/ConfirmationFooter.tsx

@@ -0,0 +1,59 @@
+import styled, { useTheme } from 'styled-components'
+
+import { ButtonPrimary } from '../../../../../components/Button'
+import { StyledKey, StyledValue } from '../../../Components/SwapModalFooter'
+
+export type FooterData = {
+  askPrice: string
+  marketPriceDifference: string
+  isDiffPositive: boolean
+  expiresIn: string
+  market: string
+  onConfirm: () => void
+}
+
+export const ConfirmationFooter = ({
+  askPrice,
+  onConfirm,
+  expiresIn,
+  marketPriceDifference,
+  isDiffPositive,
+  market,
+}: FooterData) => {
+  const theme = useTheme()
+  const priceDiffColor = isDiffPositive ? theme.green1 : theme.red1
+
+  return (
+    <Wrapper>
+      <SingleRow>
+        <StyledKey>Ask price</StyledKey>
+        <StyledValue>{askPrice}</StyledValue>
+      </SingleRow>
+      <SingleRow>
+        <StyledKey>Diff. market price</StyledKey>
+        <StyledValue color={priceDiffColor}>{marketPriceDifference}%</StyledValue>
+      </SingleRow>
+      <SingleRow>
+        <StyledKey>Expires in</StyledKey>
+        <StyledValue> {expiresIn}</StyledValue>
+      </SingleRow>
+      <SingleRow>
+        <StyledKey>Market</StyledKey>
+        <StyledValue>{market}</StyledValue>
+      </SingleRow>
+      <ButtonPrimary marginTop={'20px'} onClick={onConfirm}>
+        PLACE LIMIT ORDER
+      </ButtonPrimary>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  gap: 7px;
+  flex-direction: column;
+`
+const SingleRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+`

src/pages/Swap/LimitOrder/Components/ConfirmLimitOrderModal/ConfirmationHeader.tsx

@@ -0,0 +1,105 @@
+import { CurrencyAmount, TokenAmount } from '@swapr/sdk'
+
+import { ArrowDown } from 'react-feather'
+import styled from 'styled-components'
+
+import { CurrencyLogo } from '../../../../../components/CurrencyLogo'
+import { toFixedSix } from '../utils'
+
+export type HeaderData = {
+  fiatValueInput: CurrencyAmount | null
+  fiatValueOutput: CurrencyAmount | null
+  buyToken: TokenAmount
+  sellToken: TokenAmount
+}
+
+export const ConfirmationHeader = ({ fiatValueInput, fiatValueOutput, buyToken, sellToken }: HeaderData) => {
+  const fiatInput = fiatValueInput && fiatValueInput.toFixed(2, { groupSeparator: ',' })
+  const fiatOutput = fiatValueOutput && fiatValueOutput.toFixed(2, { groupSeparator: ',' })
+
+  return (
+    <Wrapper>
+      <CurrencyAmountContainer>
+        <CurrencyLogoInfo>
+          <PurpleText>YOU SWAP</PurpleText>
+          <LogoWithText>
+            <CurrencySymbol>{sellToken.currency.symbol}</CurrencySymbol>{' '}
+            <CurrencyLogo size="20px" currency={sellToken.currency} />
+          </LogoWithText>
+        </CurrencyLogoInfo>
+        <AmountWithUsd>
+          <Amount>{toFixedSix(Number(sellToken.toExact()))}</Amount>
+          {fiatInput && <PurpleText>${fiatInput}</PurpleText>}
+        </AmountWithUsd>
+      </CurrencyAmountContainer>
+      <StyledArrow />
+      <CurrencyAmountContainer>
+        <CurrencyLogoInfo>
+          <PurpleText>YOU RECIEVE</PurpleText>
+          <LogoWithText>
+            <CurrencySymbol>{buyToken.currency.symbol}</CurrencySymbol>{' '}
+            <CurrencyLogo size="20px" currency={buyToken.currency} />
+          </LogoWithText>
+        </CurrencyLogoInfo>
+        <AmountWithUsd>
+          <Amount>{toFixedSix(Number(buyToken.toExact()))}</Amount>
+          {fiatOutput && <PurpleText>${fiatOutput}</PurpleText>}
+        </AmountWithUsd>
+      </CurrencyAmountContainer>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+`
+const CurrencyAmountContainer = styled.div`
+  display: flex;
+  padding: 0 19px;
+  align-items: center;
+  justify-content: space-between;
+  height: 82px;
+  border: 1px solid ${({ theme }) => theme.bg3};
+  border-radius: 8.72381px;
+`
+const CurrencySymbol = styled.div`
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 24px;
+`
+const LogoWithText = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`
+const CurrencyLogoInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+const AmountWithUsd = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 4px;
+`
+const Amount = styled.div`
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 28px;
+`
+const PurpleText = styled.div`
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 12px;
+  letter-spacing: 0.08em;
+  color: ${({ theme }) => theme.purple3};
+`
+const StyledArrow = styled(ArrowDown)`
+  width: 100%;
+  margin: 4px 0;
+  height: 16px;
+`

src/pages/Swap/LimitOrder/Components/ConfirmLimitOrderModal/index.tsx

@@ -0,0 +1,111 @@
+import { CurrencyAmount } from '@swapr/sdk'
+
+import { useCallback } from 'react'
+
+import TransactionConfirmationModal, {
+  ConfirmationModalContent,
+  TransactionErrorContent,
+} from '../../../../../components/TransactionConfirmationModal'
+import { Kind, LimitOrderBase, MarketPrices, Providers } from '../../../../../services/LimitOrders'
+import { calculateMarketPriceDiffPercentage } from '../utils'
+
+import { ConfirmationFooter } from './ConfirmationFooter'
+import { ConfirmationHeader } from './ConfirmationHeader'
+
+interface ConfirmLimitOrderModalProps {
+  isOpen: boolean
+  attemptingTxn: boolean
+  errorMessage: string | undefined
+  onDismiss: () => void
+  onConfirm: () => void
+  marketPrices: MarketPrices
+  fiatValueInput: CurrencyAmount | null
+  fiatValueOutput: CurrencyAmount | null
+  protocol: LimitOrderBase
+}
+
+export default function ConfirmLimitOrderModal({
+  onConfirm,
+  onDismiss,
+  errorMessage,
+  isOpen,
+  attemptingTxn,
+  marketPrices,
+  fiatValueInput,
+  fiatValueOutput,
+
+  protocol,
+}: ConfirmLimitOrderModalProps) {
+  const {
+    buyAmount,
+    sellAmount,
+    limitPrice,
+    expiresAt,
+    expiresAtUnit,
+    kind,
+    limitOrderProtocol = Providers.COW,
+  } = protocol
+
+  const modalHeader = useCallback(() => {
+    return (
+      <ConfirmationHeader
+        fiatValueInput={fiatValueInput}
+        fiatValueOutput={fiatValueOutput}
+        buyToken={buyAmount}
+        sellToken={sellAmount}
+      />
+    )
+  }, [fiatValueInput, fiatValueOutput, buyAmount, sellAmount])
+
+  const [baseTokenAmount, quoteTokenAmount] = kind === Kind.Sell ? [sellAmount, buyAmount] : [buyAmount, sellAmount]
+  const askPrice = `${kind} ${baseTokenAmount?.currency?.symbol} at ${limitPrice} ${quoteTokenAmount?.currency?.symbol}`
+
+  let { marketPriceDiffPercentage, isDiffPositive } = calculateMarketPriceDiffPercentage(
+    kind ?? Kind.Sell,
+    marketPrices,
+    limitPrice!
+  )
+  const expiresInFormatted = `${expiresAt} ${expiresAtUnit}`
+
+  const modalBottom = useCallback(() => {
+    return onConfirm ? (
+      <ConfirmationFooter
+        onConfirm={onConfirm}
+        askPrice={askPrice}
+        expiresIn={expiresInFormatted}
+        marketPriceDifference={marketPriceDiffPercentage.toFixed(2)}
+        market={`${limitOrderProtocol} Protocol`}
+        isDiffPositive={isDiffPositive}
+      />
+    ) : null
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [marketPriceDiffPercentage, isDiffPositive, onConfirm, askPrice, expiresInFormatted])
+
+  // text to show while loading
+  const pendingText = 'Confirm Signature'
+
+  const confirmationContent = useCallback(
+    () =>
+      errorMessage ? (
+        <TransactionErrorContent onDismiss={onDismiss} message={errorMessage} />
+      ) : (
+        <ConfirmationModalContent
+          title="Confirm Limit Order"
+          onDismiss={onDismiss}
+          topContent={modalHeader}
+          bottomContent={modalBottom}
+        />
+      ),
+    [onDismiss, modalBottom, modalHeader, errorMessage]
+  )
+
+  return (
+    <TransactionConfirmationModal
+      isOpen={isOpen}
+      onDismiss={onDismiss}
+      attemptingTxn={attemptingTxn}
+      content={confirmationContent}
+      pendingText={pendingText}
+    />
+  )
+}