fix: limit orders display buy amount (#8420)

shapeshift · Dec 19, 2024 · 9bef22e · 9bef22e
1 parent b4cf01a
commit 9bef22e
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 70 deletions.
diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
@@ -1059,7 +1059,7 @@
     "confirmInfo": "The limit order may not fill exactly when on-chain prices reach the limit price.",
     "learnMore": "Learn More",
     "previewOrder": "Preview Order",
-    "youGet": "You Get",
+    "youGet": "You get at least",
     "whenPriceReaches": "When price reaches",
     "expiry": "Expiry",
     "noOpenOrders": "No open orders yet.",

diff --git a/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderBuyAsset.tsx b/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderBuyAsset.tsx
@@ -1,35 +1,32 @@
-import { Flex, FormLabel, Stack } from '@chakra-ui/react'
 import type { AccountId, ChainId } from '@shapeshiftoss/caip'
 import type { Asset } from '@shapeshiftoss/types'
-import { bnOrZero } from '@shapeshiftoss/utils'
 import React, { memo, useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import type { AccountDropdownProps } from 'components/AccountDropdown/AccountDropdown'
-import { AccountDropdown } from 'components/AccountDropdown/AccountDropdown'
 import { TradeAssetSelect } from 'components/AssetSelection/AssetSelection'
-import { Balance } from 'components/DeFi/components/Balance'
-import { Text } from 'components/Text'
 import { useModal } from 'hooks/useModal/useModal'
+import { positiveOrZero } from 'lib/bignumber/bignumber'
 import {
-  selectMarketDataByAssetIdUserCurrency,
-  selectPortfolioCryptoPrecisionBalanceByFilter,
-} from 'state/slices/selectors'
+  selectBuyAmountCryptoPrecision,
+  selectBuyAmountUserCurrency,
+  selectManualReceiveAddress,
+} from 'state/slices/limitOrderInputSlice/selectors'
 import { useAppSelector } from 'state/store'
 
+import { TradeAssetInput } from '../../TradeAssetInput'
+
 export type TradeAmountInputFormValues = {
   amountFieldInput: string
   amountCryptoPrecision: string
   amountUserCurrency: string
 }
 
-const buttonProps = {
-  variant: 'unstyled',
-  display: 'flex',
-  height: 'auto',
-  lineHeight: '1',
-  width: '100%',
+const emptyPercentOptions: number[] = []
+const formControlProps = {
+  borderRadius: 0,
+  background: 'transparent',
+  borderWidth: 0,
 }
-const boxProps = { px: 0, m: 0, maxWidth: '220px' }
 
 export type LimitOrderBuyAssetProps = {
   asset: Asset
@@ -39,13 +36,14 @@ export type LimitOrderBuyAssetProps = {
   chainIdFilterPredicate: (chainId: ChainId) => boolean
   onAccountIdChange: AccountDropdownProps['onChange']
   onSetBuyAsset: (asset: Asset) => void
+  isLoading: boolean
 }
 
 export const LimitOrderBuyAsset: React.FC<LimitOrderBuyAssetProps> = memo(
   ({
     asset,
+    isLoading,
     accountId,
-    isInputtingFiatSellAmount,
     assetFilterPredicate,
     chainIdFilterPredicate,
     onAccountIdChange,
@@ -54,36 +52,10 @@ export const LimitOrderBuyAsset: React.FC<LimitOrderBuyAssetProps> = memo(
     const translate = useTranslate()
     const buyAssetSearch = useModal('buyTradeAssetSearch')
 
-    const marketData = useAppSelector(state =>
-      selectMarketDataByAssetIdUserCurrency(state, asset.assetId),
-    )
-
-    const filter = useMemo(
-      () => ({
-        accountId: accountId ?? '',
-        assetId: asset.assetId,
-      }),
-      [accountId, asset],
-    )
-    const balance = useAppSelector(state =>
-      selectPortfolioCryptoPrecisionBalanceByFilter(state, filter),
-    )
-
-    const fiatBalance = bnOrZero(balance).times(marketData.price).toString()
+    const buyAmountCryptoPrecision = useAppSelector(selectBuyAmountCryptoPrecision)
+    const buyAmountUserCurrency = useAppSelector(selectBuyAmountUserCurrency)
 
-    const accountDropdownLabel = useMemo(
-      () => (
-        <Balance
-          cryptoBalance={balance ?? ''}
-          fiatBalance={fiatBalance ?? ''}
-          symbol={asset.symbol}
-          isFiat={isInputtingFiatSellAmount}
-          label={`${translate('common.balance')}:`}
-          textAlign='right'
-        />
-      ),
-      [asset, balance, fiatBalance, isInputtingFiatSellAmount, translate],
-    )
+    const manualReceiveAddress = useAppSelector(selectManualReceiveAddress)
 
     const handleAssetClick = useCallback(() => {
       buyAssetSearch.open({
@@ -94,35 +66,37 @@ export const LimitOrderBuyAsset: React.FC<LimitOrderBuyAssetProps> = memo(
       })
     }, [assetFilterPredicate, buyAssetSearch, chainIdFilterPredicate, onSetBuyAsset])
 
-    return (
-      <Stack mt={4}>
-        <Flex justifyContent='space-between' alignItems='center' px={6} width='full' mb={2}>
-          <Flex alignItems='center'>
-            <FormLabel mb={0} fontSize='sm'>
-              <Text translation='limitOrder.youGet' />
-            </FormLabel>
-          </Flex>
-          {balance && (
-            <AccountDropdown
-              defaultAccountId={accountId}
-              assetId={asset.assetId}
-              onChange={onAccountIdChange}
-              disabled={false}
-              autoSelectHighestBalance={false}
-              buttonProps={buttonProps}
-              boxProps={boxProps}
-              showLabel={false}
-              label={accountDropdownLabel}
-            />
-          )}
-        </Flex>
+    const tradeAssetSelect = useMemo(
+      () => (
         <TradeAssetSelect
           assetId={asset.assetId}
           onAssetClick={handleAssetClick}
           onAssetChange={onSetBuyAsset}
           onlyConnectedChains={false}
         />
-      </Stack>
+      ),
+      [asset.assetId, handleAssetClick, onSetBuyAsset],
+    )
+
+    return (
+      <TradeAssetInput
+        // Disable account selection when user set a manual receive address
+        isAccountSelectionHidden={Boolean(manualReceiveAddress)}
+        isReadOnly={true}
+        accountId={accountId}
+        onAccountIdChange={onAccountIdChange}
+        assetId={asset.assetId}
+        assetSymbol={asset.symbol}
+        assetIcon={asset.icon}
+        cryptoAmount={positiveOrZero(buyAmountCryptoPrecision).toFixed()}
+        fiatAmount={positiveOrZero(buyAmountUserCurrency).toFixed()}
+        percentOptions={emptyPercentOptions}
+        showInputSkeleton={isLoading}
+        showFiatSkeleton={isLoading}
+        label={translate('limitOrder.youGet')}
+        formControlProps={formControlProps}
+        labelPostFix={tradeAssetSelect}
+      />
     )
   },
 )
diff --git a/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx b/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx
@@ -410,6 +410,7 @@ export const LimitOrderInput = ({
       >
         <Stack>
           <LimitOrderBuyAsset
+            isLoading={isLoading}
             asset={buyAsset}
             accountId={buyAccountId}
             isInputtingFiatSellAmount={isInputtingFiatSellAmount}

diff --git a/src/state/slices/limitOrderInputSlice/selectors.ts b/src/state/slices/limitOrderInputSlice/selectors.ts
@@ -1,4 +1,4 @@
-import { bn, convertPrecision } from '@shapeshiftoss/utils'
+import { bn, convertPrecision, fromBaseUnit } from '@shapeshiftoss/utils'
 import { createSelector } from 'reselect'
 
 import { createTradeInputBaseSelectors } from '../common/tradeInputBase/createTradeInputBaseSelectors'
@@ -84,3 +84,19 @@ export const selectBuyAmountCryptoBaseUnit = createSelector(
     }).toFixed(0)
   },
 )
+
+export const selectBuyAmountCryptoPrecision = createSelector(
+  selectBuyAmountCryptoBaseUnit,
+  selectInputBuyAsset,
+  (buyAmountCryptoBaseUnit, buyAsset) => fromBaseUnit(buyAmountCryptoBaseUnit, buyAsset.precision),
+)
+
+export const selectBuyAmountUserCurrency = createSelector(
+  selectBuyAmountCryptoPrecision,
+  selectInputBuyAssetUserCurrencyRate,
+  (buyAmountCryptoPrecision, buyAssetUserCurrencyRate) => {
+    return bn(buyAmountCryptoPrecision)
+      .times(buyAssetUserCurrencyRate ?? '0')
+      .toFixed(2)
+  },
+)