From 5bf46d4da07c9d2de91ebc7432fe206a9927313b Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Wed, 20 Sep 2023 15:53:33 +0200
Subject: [PATCH] fix: all your codebase belongs to us (#492)

---
 .../Account/AccountBalancesTable/index.tsx    |  2 +-
 src/components/RangeInput/InputOverlay.tsx    | 34 +++++--------
 src/components/RangeInput/index.tsx           | 51 +++++--------------
 src/components/Trade/AccountDetailsCard.tsx   | 11 ++--
 .../TradeModule/SwapForm/AssetAmountInput.tsx | 43 ++++++----------
 .../SwapForm/OrderTypeSelector/index.tsx      | 21 +++-----
 .../TradeModule/SwapForm/TradeSummary.tsx     | 38 +++++++-------
 .../Trade/TradeModule/SwapForm/index.tsx      | 22 +-------
 8 files changed, 73 insertions(+), 149 deletions(-)

diff --git a/src/components/Account/AccountBalancesTable/index.tsx b/src/components/Account/AccountBalancesTable/index.tsx
index 37622ab8..39f9ac5d 100644
--- a/src/components/Account/AccountBalancesTable/index.tsx
+++ b/src/components/Account/AccountBalancesTable/index.tsx
@@ -145,7 +145,7 @@ export default function Index(props: Props) {
         },
       },
     ],
-    [baseCurrency.decimals, markets],
+    [markets],
   )
 
   const table = useReactTable({
diff --git a/src/components/RangeInput/InputOverlay.tsx b/src/components/RangeInput/InputOverlay.tsx
index f93377d5..f68cce2c 100644
--- a/src/components/RangeInput/InputOverlay.tsx
+++ b/src/components/RangeInput/InputOverlay.tsx
@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import { VerticalThreeLine } from 'components/Icons'
 import { formatValue } from 'utils/formatters'
 
@@ -19,7 +21,7 @@ function InputOverlay({ max, value, marginThreshold }: Props) {
   return (
     <>
       <div
-        className={className.marksWrapper}
+        className='absolute flex-1 flex w-full justify-evenly bg-no-repeat top-[8.5px] pointer-events-none pt-[2.5px] pb-[2.5px] rounded-lg'
         style={{
           backgroundImage:
             'linear-gradient(270deg, rgba(255, 97, 141, 0.89) 0%, rgba(66, 58, 70, 0.05) 100%)',
@@ -27,16 +29,16 @@ function InputOverlay({ max, value, marginThreshold }: Props) {
         }}
       >
         {Array.from(Array(9).keys()).map((i) => (
-          <div key={`mark-${i}`} className={className.mark} />
+          <div key={`mark-${i}`} className='w-1 h-1 bg-black rounded-full bg-opacity-30' />
         ))}
         {marginThreshold !== undefined && (
           <div
             key='margin-mark'
-            className={className.marginMarkContainer}
+            className='absolute w-[33px] flex justify-center'
             style={{ left: `calc(${markPosPercent}% - ${markPadRight}px)` }}
           >
-            <div className={className.marginMark} />
-            <div className={className.marginMarkOverlay}>
+            <div className='w-1 h-1 bg-white rounded-full' />
+            <div className='absolute top-2.5 flex-col text-xs w-[33px] items-center flex'>
               <VerticalThreeLine className='h-2 w-[1px]' />
               <div className={!hasPastMarginThreshold ? 'opacity-50' : 'opacity-100'}>Margin</div>
             </div>
@@ -44,7 +46,12 @@ function InputOverlay({ max, value, marginThreshold }: Props) {
         )}
       </div>
       <div
-        className={className.inputThumbOverlay}
+        className={classNames(
+          'w-[33px] h-4 absolute text-[10px] top-[5px]',
+          'pointer-events-none text-center font-bold',
+          'bg-pink shadow-md border-b-0 border-1',
+          'border-solid rounded-sm backdrop-blur-sm border-white/10',
+        )}
         style={{ left: `calc(${thumbPosPercent}% - ${thumbPadRight}px)` }}
       >
         {formatValue(value, { maxDecimals: 2, abbreviated: true, rounded: true })}
@@ -53,19 +60,4 @@ function InputOverlay({ max, value, marginThreshold }: Props) {
   )
 }
 
-const className = {
-  inputThumbOverlay: `
-    w-[33px] h-4 absolute text-[10px] top-[5px]
-    pointer-events-none text-center font-bold
-    bg-pink shadow-md border-b-0 border-1
-    border-solid rounded-sm backdrop-blur-sm border-white/10
-  `,
-  mark: `w-1 h-1 bg-black rounded-full bg-opacity-30`,
-  marginMark: `w-1 h-1 bg-white rounded-full`,
-  marginMarkContainer: 'absolute w-[33px] flex justify-center',
-  marginMarkOverlay: 'absolute top-2.5 flex-col text-xs w-[33px] items-center flex',
-  marksWrapper: `absolute flex-1 flex w-full justify-evenly bg-no-repeat
-    top-[8.5px] pointer-events-none pt-[2.5px] pb-[2.5px] rounded-lg`,
-}
-
 export default InputOverlay
diff --git a/src/components/RangeInput/index.tsx b/src/components/RangeInput/index.tsx
index d3cb0c93..b5872152 100644
--- a/src/components/RangeInput/index.tsx
+++ b/src/components/RangeInput/index.tsx
@@ -29,13 +29,21 @@ function RangeInput(props: Props) {
 
   return (
     <div
-      className={classNames(className.containerDefault, wrapperClassName, {
-        [className.disabled]: disabled,
-      })}
+      className={classNames(
+        'relative min-h-3 w-full transition-opacity',
+        wrapperClassName,
+        disabled && 'pointer-events-none opacity-50',
+      )}
     >
-      <div className={className.inputWrapper}>
+      <div className='relative h-[30px]'>
         <input
-          className={className.input}
+          className={classNames(
+            'relative w-full appearance-none bg-transparent hover:cursor-pointer',
+            '[&::-webkit-slider-runnable-track]:bg-white [&::-webkit-slider-runnable-track]:bg-opacity-20 [&::-webkit-slider-runnable-track]:h-[9px] [&::-webkit-slider-runnable-track]:rounded-lg',
+            '[&::-moz-range-track]:bg-white [&::-moz-range-track]:bg-opacity-20 [&::-moz-range-track]:h-1 [&::-moz-range-track]:pb-[5px] [&::-moz-range-track]:rounded-lg',
+            '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:w-[33px] [&::-webkit-slider-thumb]:h-4',
+            '[&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:opacity-0 [&::-moz-range-thumb]:w-[33px] [&::-moz-range-thumb]:h-4',
+          )}
           type='range'
           value={value.toFixed(2)}
           step={max / 101}
@@ -46,7 +54,7 @@ function RangeInput(props: Props) {
         />
         <InputOverlay max={max} marginThreshold={marginThreshold} value={value} />
       </div>
-      <div className={className.legendWrapper}>
+      <div className={'flex w-full justify-between text-xs text-opacity-50 text-white font-bold'}>
         <span>{markPosPercent > LEFT_MARGIN ? 0 : ''}</span>
         <span>{max.toFixed(2)}</span>
       </div>
@@ -54,35 +62,4 @@ function RangeInput(props: Props) {
   )
 }
 
-const className = {
-  containerDefault: 'relative min-h-3 w-full transition-opacity',
-  disabled: 'pointer-events-none opacity-50',
-  legendWrapper: 'flex w-full justify-between text-xs text-opacity-50 text-white font-bold',
-  inputWrapper: 'relative h-[30px]',
-  input: `
-    relative w-full appearance-none bg-transparent hover:cursor-pointer
-  
-    [&::-webkit-slider-runnable-track]:bg-white
-    [&::-webkit-slider-runnable-track]:bg-opacity-20
-    [&::-webkit-slider-runnable-track]:h-[9px]
-    [&::-webkit-slider-runnable-track]:rounded-lg
-
-    [&::-moz-range-track]:bg-white
-    [&::-moz-range-track]:bg-opacity-20
-    [&::-moz-range-track]:h-1
-    [&::-moz-range-track]:pb-[5px]
-    [&::-moz-range-track]:rounded-lg
-  
-    [&::-webkit-slider-thumb]:appearance-none
-    [&::-webkit-slider-thumb]:-mt-1
-    [&::-webkit-slider-thumb]:w-[33px]
-    [&::-webkit-slider-thumb]:h-4
-
-    [&::-moz-range-thumb]:appearance-none
-    [&::-moz-range-thumb]:opacity-0
-    [&::-moz-range-thumb]:w-[33px]
-    [&::-moz-range-thumb]:h-4
-  `,
-}
-
 export default RangeInput
diff --git a/src/components/Trade/AccountDetailsCard.tsx b/src/components/Trade/AccountDetailsCard.tsx
index 0be40e2e..2d1aa857 100644
--- a/src/components/Trade/AccountDetailsCard.tsx
+++ b/src/components/Trade/AccountDetailsCard.tsx
@@ -22,8 +22,10 @@ export default function AccountDetailsCard() {
   )
 
   const tabs = (
-    <div className={className.tabWrapper}>
-      <div className={className.tab}>Balances</div>
+    <div className='flex items-center w-full pt-4 pl-4 font-semibold bg-white/10'>
+      <div className='flex flex-row pb-3 mr-4 border-b-2 border-solid select-none hover:cursor-pointer border-pink'>
+        Balances
+      </div>
     </div>
   )
 
@@ -39,8 +41,3 @@ export default function AccountDetailsCard() {
       </Card>
     )
 }
-
-const className = {
-  tabWrapper: 'flex w-full items-center bg-white/10 pt-4 pl-4 font-semibold',
-  tab: 'mr-4 pb-3 hover:cursor-pointer select-none flex flex-row border-b-2 border-pink border-solid',
-}
diff --git a/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx b/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx
index d09565e4..4a9e441c 100644
--- a/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/AssetAmountInput.tsx
@@ -1,8 +1,8 @@
-import classNames from 'classnames'
 import { useCallback, useMemo } from 'react'
 
+import DisplayCurrency from 'components/DisplayCurrency'
 import NumberInput from 'components/NumberInput'
-import { formatValue } from 'utils/formatters'
+import { BNCoin } from 'types/classes/BNCoin'
 
 interface Props {
   label?: string
@@ -11,7 +11,6 @@ interface Props {
   amount: BigNumber
   disabled: boolean
   maxButtonLabel: string
-  assetUSDValue: BigNumber
   amountValueText?: string
   containerClassName?: string
   setAmount: (amount: BigNumber) => void
@@ -27,7 +26,6 @@ export default function AssetAmountInput(props: Props) {
     asset,
     disabled,
     setAmount,
-    assetUSDValue,
     maxButtonLabel,
     containerClassName,
     onFocus,
@@ -44,14 +42,14 @@ export default function AssetAmountInput(props: Props) {
   }, [asset.decimals, max])
 
   return (
-    <div className={classNames(className.container, containerClassName)}>
+    <div className={containerClassName}>
       <label>
         {label}
-        <div className={className.inputWrapper}>
+        <div className='flex flex-1 flex-row py-3 border-[1px] border-white border-opacity-20 rounded bg-white bg-opacity-5 pl-3 pr-2 mt-2'>
           <NumberInput
             asset={asset}
             amount={amount}
-            className={className.input}
+            className='border-none bg-transparent outline-none flex-1 !text-left'
             maxDecimals={asset.decimals}
             max={max}
             disabled={disabled}
@@ -61,33 +59,22 @@ export default function AssetAmountInput(props: Props) {
           />
           <span>{asset.symbol}</span>
         </div>
-        <div className={className.footer}>
-          <div className={className.maxButtonWrapper}>
-            <span className={className.maxButtonLabel}>{maxButtonLabel}</span>
-            <span className={className.maxValue}>{maxValue}</span>
-            <div className={className.maxButton} onClick={handleMaxClick}>
+        <div className='flex flex-row flex-1'>
+          <div className='flex flex-row flex-1 mt-2'>
+            <span className='text-xs font-bold'>{maxButtonLabel}</span>
+            <span className='mx-1 text-xs font-bold text-white text-opacity-60'>{maxValue}</span>
+            <div
+              className='hover:cursor-pointer select-none bg-white bg-opacity-20 text-2xs !leading-3 font-bold py-0.5 px-1.5 rounded'
+              onClick={handleMaxClick}
+            >
               MAX
             </div>
           </div>
-          <div className={className.assetValue}>
-            {formatValue(assetUSDValue.toString(), { prefix: '~ $', minDecimals: 2 })}
+          <div className='mt-2 text-xs text-white text-opacity-60'>
+            <DisplayCurrency coin={BNCoin.fromDenomAndBigNumber(asset.denom, amount)} />
           </div>
         </div>
       </label>
     </div>
   )
 }
-
-const className = {
-  container: '',
-  inputWrapper:
-    'flex flex-1 flex-row py-3 border-[1px] border-white border-opacity-20 rounded bg-white bg-opacity-5 pl-3 pr-2 mt-2',
-  input: 'border-none bg-transparent outline-none flex-1 !text-left',
-  footer: 'flex flex-1 flex-row',
-  maxButtonWrapper: 'flex flex-1 flex-row mt-2',
-  maxButtonLabel: 'font-bold text-xs',
-  maxValue: 'font-bold text-xs text-white text-opacity-60 mx-1',
-  maxButton:
-    'hover:cursor-pointer select-none bg-white bg-opacity-20 text-2xs !leading-3 font-bold py-0.5 px-1.5 rounded',
-  assetValue: 'text-xs text-white text-opacity-60 mt-2',
-}
diff --git a/src/components/Trade/TradeModule/SwapForm/OrderTypeSelector/index.tsx b/src/components/Trade/TradeModule/SwapForm/OrderTypeSelector/index.tsx
index ac5cef39..956719ba 100644
--- a/src/components/Trade/TradeModule/SwapForm/OrderTypeSelector/index.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/OrderTypeSelector/index.tsx
@@ -16,13 +16,14 @@ export default function OrderTypeSelector(props: Props) {
   const { selected, onChange } = props
 
   return (
-    <div className={className.wrapper}>
+    <div className='flex flex-row flex-1 px-3 pt-4'>
       {ORDER_TYPE_TABS.map((tab) => {
         const isSelected = tab.type === selected
-        const classes = classNames(className.tab, {
-          [className.selectedTab]: isSelected,
-          [className.disabledTab]: tab.isDisabled,
-        })
+        const classes = classNames(
+          'mr-4 pb-2 hover:cursor-pointer select-none flex flex-row',
+          isSelected && 'border-b-2 border-pink border-solid',
+          tab.isDisabled && 'opacity-20 pointer-events-none',
+        )
 
         return (
           <ConditionalWrapper
@@ -36,7 +37,7 @@ export default function OrderTypeSelector(props: Props) {
           >
             <div onClick={() => onChange(tab.type)} className={classes}>
               {tab.type}
-              {tab.isDisabled && <InfoCircle className={className.infoCircle} />}
+              {tab.isDisabled && <InfoCircle className='w-4 h-4 mt-1 ml-2' />}
             </div>
           </ConditionalWrapper>
         )
@@ -44,11 +45,3 @@ export default function OrderTypeSelector(props: Props) {
     </div>
   )
 }
-
-const className = {
-  wrapper: 'flex flex-1 flex-row px-3 pt-4',
-  tab: 'mr-4 pb-2 hover:cursor-pointer select-none flex flex-row',
-  selectedTab: 'border-b-2 border-pink border-solid',
-  disabledTab: 'opacity-20 pointer-events-none',
-  infoCircle: 'w-4 h-4 ml-2 mt-1',
-}
diff --git a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
index 22bd3945..8a4e67a8 100644
--- a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
@@ -49,18 +49,25 @@ export default function TradeSummary(props: Props) {
     [buyAsset.symbol, routes],
   )
 
+  const infoLineClasses = 'flex flex-row justify-between flex-1 mb-1 text-xs text-white'
+
   return (
-    <div className={classNames(containerClassName, className.container)}>
-      <div className={className.summaryWrapper}>
-        <span className={className.title}>Summary</span>
-        <div className={className.infoLine}>
-          <span className={className.infoLineLabel}>Fees</span>
+    <div
+      className={classNames(
+        containerClassName,
+        'flex flex-1 flex-col bg-white bg-opacity-5 rounded border-[1px] border-white border-opacity-20',
+      )}
+    >
+      <div className='flex flex-col flex-1 m-3'>
+        <span className='mb-2 text-xs font-bold'>Summary</span>
+        <div className={infoLineClasses}>
+          <span className='opacity-40'>Fees</span>
           <span>{formatAmountWithSymbol(estimatedFee.amount[0])}</span>
         </div>
         {isMargin && (
           <>
-            <div className={className.infoLine}>
-              <span className={className.infoLineLabel}>Borrowing</span>
+            <div className={infoLineClasses}>
+              <span className='opacity-40'>Borrowing</span>
               <FormattedNumber
                 amount={borrowAmount.toNumber()}
                 options={{
@@ -74,15 +81,15 @@ export default function TradeSummary(props: Props) {
                 animate
               />
             </div>
-            <div className={className.infoLine}>
-              <span className={className.infoLineLabel}>Borrow rate</span>
+            <div className={infoLineClasses}>
+              <span className='opacity-40'>Borrow rate</span>
               <span>{formatPercent(borrowRate || 0)}</span>
             </div>
           </>
         )}
 
-        <div className={className.infoLine}>
-          <span className={className.infoLineLabel}>Route</span>
+        <div className={infoLineClasses}>
+          <span className='opacity-40'>Route</span>
           <span>{parsedRoutes}</span>
         </div>
       </div>
@@ -98,12 +105,3 @@ export default function TradeSummary(props: Props) {
     </div>
   )
 }
-
-const className = {
-  container:
-    'flex flex-1 flex-col bg-white bg-opacity-5 rounded border-[1px] border-white border-opacity-20 ',
-  title: 'text-xs font-bold mb-2',
-  summaryWrapper: 'flex flex-1 flex-col m-3',
-  infoLine: 'flex flex-1 flex-row text-xs text-white justify-between mb-1',
-  infoLineLabel: 'opacity-40',
-}
diff --git a/src/components/Trade/TradeModule/SwapForm/index.tsx b/src/components/Trade/TradeModule/SwapForm/index.tsx
index 1ee14959..d0d5b493 100644
--- a/src/components/Trade/TradeModule/SwapForm/index.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/index.tsx
@@ -27,7 +27,7 @@ import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
 import { defaultFee } from 'utils/constants'
 import { getCapLeftWithBuffer } from 'utils/generic'
-import { BN, asyncThrottle } from 'utils/helpers'
+import { asyncThrottle, BN } from 'utils/helpers'
 
 interface Props {
   buyAsset: Asset
@@ -138,24 +138,6 @@ export default function SwapForm(props: Props) {
     return maxBuyableAmountEstimation.multipliedBy(marginRatio)
   }, [marginRatio, maxBuyableAmountEstimation])
 
-  const [buyAssetValue, sellAssetValue] = useMemo(() => {
-    const buyAssetPrice = prices.find(byDenom(buyAsset.denom))?.amount ?? BN_ZERO
-    const sellAssetPrice = prices.find(byDenom(sellAsset.denom))?.amount ?? BN_ZERO
-
-    return [
-      buyAssetPrice.multipliedBy(buyAssetAmount.shiftedBy(-buyAsset.decimals)),
-      sellAssetPrice.multipliedBy(sellAssetAmount.shiftedBy(-sellAsset.decimals)),
-    ]
-  }, [
-    prices,
-    buyAsset.denom,
-    buyAsset.decimals,
-    sellAsset.denom,
-    sellAsset.decimals,
-    buyAssetAmount,
-    sellAssetAmount,
-  ])
-
   const swapTx = useMemo(() => {
     const borrowCoin = sellAssetAmount.isGreaterThan(sellSideMarginThreshold)
       ? BNCoin.fromDenomAndBigNumber(
@@ -262,7 +244,6 @@ export default function SwapForm(props: Props) {
           amount={buyAssetAmount}
           setAmount={onChangeBuyAmount}
           asset={buyAsset}
-          assetUSDValue={buyAssetValue}
           maxButtonLabel='Max Amount:'
           disabled={isConfirming}
         />
@@ -286,7 +267,6 @@ export default function SwapForm(props: Props) {
           max={maxSellAmount}
           amount={sellAssetAmount}
           setAmount={onChangeSellAmount}
-          assetUSDValue={sellAssetValue}
           asset={sellAsset}
           maxButtonLabel='Balance:'
           disabled={isConfirming}