fix: all your codebase belongs to us (#492)

2023-09-20 15:53:33 +02:00 · 2023-09-20 15:53:33 +02:00 · 5bf46d4da0
commit 5bf46d4da0
parent 574dedec23
8 changed files with 73 additions and 149 deletions
--- 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({
--- 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
--- 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
--- 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',
-}
--- 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',
-}
--- 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',
-}
--- 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',
-}
--- 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}