Merge pull request #1883 from IndexCoop/feat/chakra-popover-input-refactor

0xonramp · web-flow · commit f58e68346e3f · 2025-04-24T10:28:46.000-04:00
feat: chakra popover/input refactor
diff --git a/src/app/earn/components/earn-widget/components/trade-input-selector.tsx b/src/app/earn/components/earn-widget/components/trade-input-selector.tsx
@@ -1,7 +1,6 @@
-import { Flex, Input } from '@chakra-ui/react'
+import { Input } from '@headlessui/react'
 import { useState } from 'react'
 
-import { colors } from '@/lib/styles/colors'
 import { cn } from '@/lib/utils/tailwind'
 
 import { Caption } from './caption'
@@ -13,13 +12,7 @@ export type InputSelectorToken = {
   symbol: string
 }
 
-interface TradeInputSelectorConfig {
-  isInputDisabled?: boolean
-  isReadOnly?: boolean
-  isSelectorDisabled?: boolean
-}
 interface TradeInputSelectorProps {
-  config: TradeInputSelectorConfig
   caption: string
   balance: string
   formattedFiat: string
@@ -36,7 +29,6 @@ interface TradeInputSelectorProps {
 export const TradeInputSelector = (props: TradeInputSelectorProps) => {
   const {
     balance,
-    config,
     formattedFiat,
     selectedToken,
     showSelectorButton = true,
@@ -45,13 +37,7 @@ export const TradeInputSelector = (props: TradeInputSelectorProps) => {
   const [isFocused, setIsFocused] = useState(false)
 
   const onChangeInput = (amount: string) => {
-    if (
-      props.onChangeInput === undefined ||
-      config.isInputDisabled === true ||
-      config.isSelectorDisabled === true ||
-      config.isReadOnly === true
-    )
-      return
+    if (props.onChangeInput === undefined) return
     props.onChangeInput(selectedToken, amount)
   }
 
@@ -63,61 +49,34 @@ export const TradeInputSelector = (props: TradeInputSelectorProps) => {
       )}
     >
       <Caption caption={props.caption} />
-      <Flex align='center' direction='row' justify='space-between' mt='6px'>
-        {config.isReadOnly ? (
-          <p
-            className={cn(
-              'text-ellipsis whitespace-nowrap pr-1 text-[25px] font-medium',
-              props.selectedTokenAmount === '0'
-                ? 'text-ic-gray-400'
-                : 'text-ic-black',
-            )}
-          >
-            {props.selectedTokenAmount}
-          </p>
-        ) : (
-          <Input
-            className='text-ic-black dark:text-ic-white bg-transparent pr-1 text-3xl'
-            fontSize='25px'
-            fontWeight={500}
-            overflow='hidden'
-            placeholder='0'
-            _placeholder={{ color: colors.ic.gray[400] }}
-            type='number'
-            onWheel={(e) => e.target instanceof HTMLElement && e.target.blur()}
-            step='any'
-            textOverflow='ellipsis'
-            variant='unstyled'
-            whiteSpace='nowrap'
-            disabled={config.isInputDisabled ?? false}
-            isReadOnly={config.isReadOnly ?? false}
-            value={props.selectedTokenAmount}
-            onChange={(event) => {
-              onChangeInput(event.target.value)
-            }}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-          />
-        )}
+      <div className='mt-1.5 flex items-center justify-between'>
+        <Input
+          className='placeholder:text-ic-gray-400 text-ic-black dark:text-ic-white w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent pr-1 text-[25px] font-medium outline-none'
+          placeholder='0'
+          type='number'
+          onWheel={(e) => e.target instanceof HTMLElement && e.target.blur()}
+          step='any'
+          value={props.selectedTokenAmount}
+          onChange={(event) => {
+            onChangeInput(event.target.value)
+          }}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        />
         <SelectorButton
           image={selectedToken.image}
           symbol={selectedToken.symbol}
           showChevron={props.showSelectorButtonChevron}
           visible={showSelectorButton}
           onClick={props.onSelectToken}
         />
-      </Flex>
-      <Flex
-        align='flex-start'
-        direction='row'
-        justify='space-between'
-        mt='10px'
-      >
+      </div>
+      <div className='mt-2.5 flex items-start justify-between'>
         <PriceUsd fiat={formattedFiat} priceImpact={props.priceImpact} />
         {showSelectorButton ? (
           <Balance balance={balance} onClick={props.onClickBalance} />
         ) : null}
-      </Flex>
+      </div>
     </div>
   )
 }
@@ -155,12 +114,12 @@ interface PriceUsdProps {
 }
 
 const PriceUsd = (props: PriceUsdProps) => (
-  <Flex>
+  <div className='flex'>
     <p className='text-ic-gray-400 text-xs font-medium'>{props.fiat}</p>
     {props.priceImpact && (
       <p className={cn('text-xs', props.priceImpact.colorCoding)}>
         &nbsp;{props.priceImpact.value}
       </p>
     )}
-  </Flex>
+  </div>
 )
diff --git a/src/app/earn/components/earn-widget/index.tsx b/src/app/earn/components/earn-widget/index.tsx
@@ -120,7 +120,6 @@ export function EarnWidget() {
       />
       <TradeInputSelector
         showSelectorButtonChevron={isMinting}
-        config={{ isReadOnly: false }}
         balance={inputBalanceFormatted}
         caption={isMinting ? 'Deposit' : 'Withdraw'}
         formattedFiat={inputAmoutUsd}
diff --git a/src/app/legacy/components/redeem-widget/index.tsx b/src/app/legacy/components/redeem-widget/index.tsx
@@ -135,7 +135,6 @@ export function RedeemWidget() {
     <div className='widget w-full min-w-80 max-w-xl flex-1 flex-col space-y-4 self-center rounded-3xl p-6'>
       <Title />
       <TradeInputSelector
-        config={{ isReadOnly: false }}
         balance={inputTokenBalanceFormatted}
         caption='You redeem'
         formattedFiat={inputAmoutUsd}
diff --git a/src/app/leverage/components/leverage-widget/index.tsx b/src/app/leverage/components/leverage-widget/index.tsx
@@ -10,7 +10,6 @@ import { supportedNetworks } from '@/app/leverage/constants'
 import { useLeverageToken } from '@/app/leverage/provider'
 import { tradeMachineAtom } from '@/app/store/trade-machine'
 import { Receive } from '@/components/receive'
-import { Settings } from '@/components/settings'
 import { SmartTradeButton } from '@/components/smart-trade-button'
 import { SelectTokenModal } from '@/components/swap/components/select-token-modal'
 import { TransactionReviewModal } from '@/components/swap/components/transaction-review'
@@ -21,7 +20,6 @@ import { useGasData } from '@/lib/hooks/use-gas-data'
 import { useSupportedNetworks } from '@/lib/hooks/use-network'
 import { useQueryParams } from '@/lib/hooks/use-query-params'
 import { useWallet } from '@/lib/hooks/use-wallet'
-import { useSlippage } from '@/lib/providers/slippage'
 import { formatWei } from '@/lib/utils'
 import { getMaxBalance } from '@/lib/utils/max-balance'
 
@@ -87,13 +85,6 @@ export function LeverageWidget() {
     onClose: onCloseSelectOutputToken,
   } = useDisclosure()
 
-  const {
-    auto: autoSlippage,
-    isAuto: isAutoSlippage,
-    set: setSlippage,
-    slippage,
-  } = useSlippage()
-
   const onClickBalance = useCallback(() => {
     if (!inputBalance) return
     const maxBalance = getMaxBalance(inputToken, inputBalance, gasData)
@@ -136,7 +127,6 @@ export function LeverageWidget() {
       />
       <div className='relative'>
         <TradeInputSelector
-          config={{ isReadOnly: false }}
           balance={inputBalanceFormatted}
           caption='Pay'
           formattedFiat={inputAmoutUsd}
@@ -146,15 +136,6 @@ export function LeverageWidget() {
           onClickBalance={onClickBalance}
           onSelectToken={onOpenSelectInputToken}
         />
-        <div className='absolute right-2 top-2'>
-          <Settings
-            isAuto={isAutoSlippage}
-            isDarkMode={true}
-            slippage={slippage}
-            onChangeSlippage={setSlippage}
-            onClickAuto={autoSlippage}
-          />
-        </div>
       </div>
 
       <Receive
diff --git a/src/app/leverage/components/leverage-widget/trade-input-selector.tsx b/src/app/leverage/components/leverage-widget/trade-input-selector.tsx
@@ -1,8 +1,9 @@
-import { Flex, Input } from '@chakra-ui/react'
+import { Input } from '@headlessui/react'
 
+import { Settings } from '@/components/settings'
 import { Caption } from '@/components/swap/components/caption'
 import { SelectorButton } from '@/components/swap/components/selector-button'
-import { colors } from '@/lib/styles/colors'
+import { useSlippage } from '@/lib/providers/slippage'
 import { cn } from '@/lib/utils/tailwind'
 
 export type InputSelectorToken = {
@@ -11,13 +12,7 @@ export type InputSelectorToken = {
   symbol: string
 }
 
-interface TradeInputSelectorConfig {
-  isInputDisabled?: boolean
-  isReadOnly?: boolean
-  isSelectorDisabled?: boolean
-}
 interface TradeInputSelectorProps {
-  config: TradeInputSelectorConfig
   caption: string
   balance: string
   formattedFiat: string
@@ -34,79 +29,61 @@ interface TradeInputSelectorProps {
 export const TradeInputSelector = (props: TradeInputSelectorProps) => {
   const {
     balance,
-    config,
     formattedFiat,
     selectedToken,
     showSelectorButton = true,
   } = props
 
+  const {
+    auto: autoSlippage,
+    isAuto: isAutoSlippage,
+    set: setSlippage,
+    slippage,
+  } = useSlippage()
+
   const onChangeInput = (amount: string) => {
-    if (
-      props.onChangeInput === undefined ||
-      config.isInputDisabled === true ||
-      config.isSelectorDisabled === true ||
-      config.isReadOnly === true
-    )
-      return
+    if (props.onChangeInput === undefined) return
     props.onChangeInput(selectedToken, amount)
   }
 
   return (
-    <div className='bg-ic-white border-ic-gray-100 flex flex-col rounded-lg border px-4 py-5 dark:border-[#D4D4D4] dark:bg-zinc-800'>
-      <Caption caption={props.caption} />
-      <Flex align='center' direction='row' justify='space-between' mt='6px'>
-        {config.isReadOnly ? (
-          <p
-            className={cn(
-              'text-ellipsis whitespace-nowrap pr-1 text-[25px] font-medium',
-              props.selectedTokenAmount === '0'
-                ? 'text-ic-gray-400'
-                : 'text-ic-black',
-            )}
-          >
-            {props.selectedTokenAmount}
-          </p>
-        ) : (
-          <Input
-            className='text-ic-black dark:text-ic-white bg-transparent pr-1 text-3xl'
-            fontSize='25px'
-            fontWeight={500}
-            overflow='hidden'
-            placeholder='0'
-            _placeholder={{ color: colors.ic.gray[400] }}
-            type='number'
-            onWheel={(e) => e.target instanceof HTMLElement && e.target.blur()}
-            step='any'
-            textOverflow='ellipsis'
-            variant='unstyled'
-            whiteSpace='nowrap'
-            disabled={config.isInputDisabled ?? false}
-            isReadOnly={config.isReadOnly ?? false}
-            value={props.selectedTokenAmount}
-            onChange={(event) => {
-              onChangeInput(event.target.value)
-            }}
-          />
-        )}
+    <div className='bg-ic-white border-ic-gray-100 flex flex-col rounded-lg border px-4 py-4 dark:border-[#D4D4D4] dark:bg-zinc-800'>
+      <div className='flex justify-between'>
+        <Caption caption={props.caption} />
+        <Settings
+          isAuto={isAutoSlippage}
+          isDarkMode={true}
+          slippage={slippage}
+          onChangeSlippage={setSlippage}
+          onClickAuto={autoSlippage}
+        />
+      </div>
+      <div className='mt-1.5 flex items-center justify-between'>
+        <Input
+          className='placeholder:text-ic-gray-400 text-ic-black dark:text-ic-white w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent pr-1 text-[25px] font-medium outline-none'
+          placeholder='0'
+          type='number'
+          onWheel={(e) => e.target instanceof HTMLElement && e.target.blur()}
+          step='any'
+          value={props.selectedTokenAmount}
+          onChange={(event) => {
+            onChangeInput(event.target.value)
+          }}
+        />
         <SelectorButton
           image={selectedToken.image}
           symbol={selectedToken.symbol}
           showChevron={props.showSelectorButtonChevron}
           visible={showSelectorButton}
           onClick={props.onSelectToken}
         />
-      </Flex>
-      <Flex
-        align='flex-start'
-        direction='row'
-        justify='space-between'
-        mt='10px'
-      >
+      </div>
+      <div className='mt-3 flex items-start justify-between'>
         <PriceUsd fiat={formattedFiat} priceImpact={props.priceImpact} />
         {showSelectorButton ? (
           <Balance balance={balance} onClick={props.onClickBalance} />
         ) : null}
-      </Flex>
+      </div>
     </div>
   )
 }
@@ -146,12 +123,12 @@ interface PriceUsdProps {
 }
 
 const PriceUsd = (props: PriceUsdProps) => (
-  <Flex>
+  <div className='flex'>
     <p className='text-xs font-medium text-neutral-400'>{props.fiat}</p>
     {props.priceImpact && (
       <p className={cn('text-xs', props.priceImpact.colorCoding)}>
         &nbsp;{props.priceImpact.value}
       </p>
     )}
-  </Flex>
+  </div>
 )
diff --git a/src/app/prt-staking/components/prt-section/prt-widget.tsx b/src/app/prt-staking/components/prt-section/prt-widget.tsx
@@ -188,7 +188,6 @@ export function PrtWidget({ token, onClose }: Props) {
       <WidgetTabs currentTab={currentTab} setCurrentTab={setCurrentTab} />
       {currentTab === WidgetTab.CLAIM ? <ClaimablePanel /> : <StakedPanel />}
       <TradeInputSelector
-        config={{ isReadOnly: false }}
         balance={balance.toString()}
         caption={inputSelectorCaption}
         formattedFiat=''
diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx
diff --git a/src/components/swap/components/trade-input-selector.tsx b/src/components/swap/components/trade-input-selector.tsx
diff --git a/src/components/swap/index.tsx b/src/components/swap/index.tsx
