replace old with new trade input selector

IndexCoop · Oct 23, 2023 · 6744e3b · 6744e3b
1 parent 8b6dc3e
commit 6744e3b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 206 deletions.
diff --git a/src/components/trade/_shared/TradeInputSelector.tsx b/src/components/trade/_shared/TradeInputSelector.tsx
diff --git a/src/components/trade/flashmint/DirectIssuance.tsx b/src/components/trade/flashmint/DirectIssuance.tsx
@@ -10,7 +10,7 @@ import { Box, Flex, Image, Text } from '@chakra-ui/react'
 
 import { Token } from '@/constants/tokens'
 
-import TradeInputSelector from '../_shared/TradeInputSelector'
+import { TradeInputSelector } from '../trade-input-selector'
 
 type DirectIssuanceProps = {
   indexToken: Token
@@ -43,7 +43,6 @@ const DirectIssuance = ({
   inputOutputTokenFiatFormatted,
   isIssue,
   isMintable,
-  isNarrow,
   onClickBalance,
   onChangeBuyTokenAmount,
   onSelectIndexToken,
@@ -74,22 +73,23 @@ const DirectIssuance = ({
         paddingTop='16px'
       >
         <TradeInputSelector
+          caption=''
           config={{
-            isDarkMode,
             isInputDisabled: isIssue && !isMintable,
-            isNarrowVersion: isNarrow,
             isSelectorDisabled: isIssue && !isMintable,
             isReadOnly: isIssue && !isMintable,
-            showMaxLabel: isIssue && isMintable,
           }}
+          balance={indexTokenBalanceFormatted}
           selectedToken={indexToken}
           selectedTokenAmount={indexTokenAmountFormatted}
-          selectedTokenBalance={indexTokenBalanceFormatted}
           formattedFiat={indexTokenFiatFormatted}
-          priceImpact={priceImpact}
+          priceImpact={{
+            colorCoding: priceImpact?.colorCoding ?? '',
+            value: priceImpact?.priceImpact ?? '',
+          }}
           onChangeInput={onChangeBuyTokenAmount}
           onClickBalance={onClickBalance}
-          onSelectedToken={(_) => onSelectIndexToken()}
+          onSelectToken={onSelectIndexToken}
         />
         <Text marginTop='16px'>
           {isIssue

diff --git a/src/components/trade/swap/index.tsx b/src/components/trade/swap/index.tsx
@@ -35,12 +35,13 @@ import {
   getTradeInfoData0x,
   shouldShowWarningSign,
 } from '../_shared/QuickTradeFormatter'
-import TradeInputSelector from '../_shared/TradeInputSelector'
 import {
   getSelectTokenListItems,
   SelectTokenModal,
 } from '../_shared/SelectTokenModal'
 
+import { TradeInputSelector } from '../trade-input-selector'
+
 import { BetterQuoteState, BetterQuoteView } from './BetterQuoteView'
 import { TradeDetails } from './trade-details'
 import { TradeInfoItem } from './trade-details/trade-info'
@@ -472,52 +473,51 @@ const QuickTrade = (props: QuickTradeProps) => {
 
   return (
     <Box>
-      <Flex direction='column' m='40px 0 20px'>
+      <Flex direction='column' m='4px 0 6px'>
         <TradeInputSelector
-          config={{
-            isDarkMode,
-            isInputDisabled: false,
-            isNarrowVersion: isNarrow,
-            isSelectorDisabled: false,
-            isReadOnly: false,
-            showMaxLabel: true,
-          }}
+          config={{ isReadOnly: false }}
+          balance={inputTokenBalanceFormatted}
+          caption='You pay'
+          formattedFiat={sellTokenFiat}
           selectedToken={sellToken}
           selectedTokenAmount={inputTokenAmountFormatted}
-          selectedTokenBalance={inputTokenBalanceFormatted}
-          formattedFiat={sellTokenFiat}
           onChangeInput={onChangeInputTokenAmount}
           onClickBalance={onClickInputBalance}
-          onSelectedToken={(_) => {
+          onSelectToken={() => {
             if (inputTokenItems.length > 1) onOpenSelectInputToken()
           }}
         />
-        <Box h='12px' alignSelf={'center'}>
+        <Box h='6px' alignSelf={'center'}>
           <IconButton
-            background={colors.icGray1}
+            background={colors.icWhite}
             margin={'-16px 0 0 0'}
-            aria-label='switch buy/sell tokens'
-            color={isDarkMode ? colors.icWhite : colors.black}
+            aria-label='switch input/output tokens'
+            color={colors.icGray2}
             icon={<UpDownIcon />}
             onClick={onSwitchTokens}
           />
         </Box>
         <TradeInputSelector
           config={{
-            isDarkMode,
             isInputDisabled: true,
-            isNarrowVersion: isNarrow,
             isSelectorDisabled: false,
             isReadOnly: true,
-            showMaxLabel: false,
           }}
+          caption={'You receive'}
           selectedToken={buyToken}
           selectedTokenAmount={buyTokenAmountFormatted}
-          selectedTokenBalance={outputTokenBalanceFormatted}
+          balance={outputTokenBalanceFormatted}
           formattedFiat={buyTokenFiat}
-          priceImpact={priceImpact ?? undefined}
+          priceImpact={
+            priceImpact
+              ? {
+                  value: priceImpact.priceImpact,
+                  colorCoding: priceImpact.colorCoding,
+                }
+              : undefined
+          }
           onClickBalance={onClickOutputBalance}
-          onSelectedToken={(_) => {
+          onSelectToken={() => {
             if (outputTokenItems.length > 1) onOpenSelectOutputToken()
           }}
         />