Skip to content

Commit

Permalink
chore: clean up of trade related slices and selectors (#6035)
Browse files Browse the repository at this point in the history
* chore: remove unused selectors in swapper slice

* chore: merge swapperApi into swappersApi

* chore: rename swappersApi to swapeprApi

* chore: rename swappersSlice to tradeInputSlice

* chore: rename trade input selectors to include the word input for clarity

* chore: cleaned up and improved naming of trade selectors

* feat: bring bakk paranoia

* fix: merge

---------

Co-authored-by: gomes <17035424+gomesalexandre@users.noreply.github.com>
Co-authored-by: Apotheosis <0xapotheosis@gmail.com>
  • Loading branch information
3 people committed Jan 19, 2024
1 parent ce65093 commit deffcae
Show file tree
Hide file tree
Showing 48 changed files with 653 additions and 866 deletions.
4 changes: 2 additions & 2 deletions src/components/FeeExplainer/FeeExplainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { calculateFees } from 'lib/fees/model'
import { FEE_CURVE_MAX_FEE_BPS, FEE_CURVE_NO_FEE_THRESHOLD_USD } from 'lib/fees/parameters'
import { isSome } from 'lib/utils'
import { selectVotingPower } from 'state/apis/snapshot/selectors'
import { selectSellAmountUsd, selectUserCurrencyToUsdRate } from 'state/slices/selectors'
import { selectInputSellAmountUsd, selectUserCurrencyToUsdRate } from 'state/slices/selectors'
import { useAppSelector } from 'state/store'

import { CHART_TRADE_SIZE_MAX_USD } from './common'
Expand Down Expand Up @@ -336,7 +336,7 @@ type FeeExplainerProps = CardProps

export const FeeExplainer: React.FC<FeeExplainerProps> = props => {
const votingPower = useAppSelector(selectVotingPower)
const sellAmountUsd = useAppSelector(selectSellAmountUsd)
const sellAmountUsd = useAppSelector(selectInputSellAmountUsd)

const [tradeSize, setTradeSize] = useState(
sellAmountUsd ? Number.parseFloat(sellAmountUsd) : FEE_CURVE_NO_FEE_THRESHOLD_USD,
Expand Down
12 changes: 6 additions & 6 deletions src/components/MultiHopTrade/MultiHopTrade.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { MemoryRouter, Route, Switch, useLocation, useParams } from 'react-route
import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
import { useIsSnapInstalled } from 'hooks/useIsSnapInstalled/useIsSnapInstalled'
import { selectAssetById } from 'state/slices/assetsSlice/selectors'
import { swappers } from 'state/slices/swappersSlice/swappersSlice'
import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
import { useAppDispatch, useAppSelector } from 'state/store'

import { TradeRoutePaths } from './types'
Expand Down Expand Up @@ -78,10 +78,10 @@ export const MultiHopTrade = memo(
const defaultSellAsset = useAppSelector(state => selectAssetById(state, defaultSellAssetId))

useEffect(() => {
dispatch(swappers.actions.clear())
if (defaultSellAsset) dispatch(swappers.actions.setSellAsset(defaultSellAsset))
if (routeBuyAsset) dispatch(swappers.actions.setBuyAsset(routeBuyAsset))
else if (defaultBuyAsset) dispatch(swappers.actions.setBuyAsset(defaultBuyAsset))
dispatch(tradeInput.actions.clear())
if (defaultSellAsset) dispatch(tradeInput.actions.setSellAsset(defaultSellAsset))
if (routeBuyAsset) dispatch(tradeInput.actions.setBuyAsset(routeBuyAsset))
else if (defaultBuyAsset) dispatch(tradeInput.actions.setBuyAsset(defaultBuyAsset))
}, [defaultBuyAsset, defaultSellAsset, dispatch, routeBuyAsset])

return (
Expand All @@ -108,7 +108,7 @@ const MultiHopRoutes = memo(() => {
// Reset the swapper slice to initial state on mount
// Don't move me to one of the trade route components, this needs to be at router-level
// We only want to clear swapper state when trade components are fully unmounted, not when trade routes change
dispatch(swappers.actions.clear())
dispatch(tradeInput.actions.clear())
}
}, [dispatch])

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { RawText, Text } from 'components/Text'
import { bn, bnOrZero } from 'lib/bignumber/bignumber'
import { calculateFees } from 'lib/fees/model'
import { selectVotingPower } from 'state/apis/snapshot/selectors'
import { selectSellAmountUsd, selectUserCurrencyToUsdRate } from 'state/slices/selectors'
import { selectInputSellAmountUsd, selectUserCurrencyToUsdRate } from 'state/slices/selectors'
import { selectQuoteAffiliateFeeUserCurrency } from 'state/slices/tradeQuoteSlice/selectors'
import { useAppSelector } from 'state/store'

Expand All @@ -16,7 +16,7 @@ const divider = <Divider />
export const FeeBreakdown = () => {
const translate = useTranslate()
const votingPower = useAppSelector(selectVotingPower)
const sellAmountUsd = useAppSelector(selectSellAmountUsd)
const sellAmountUsd = useAppSelector(selectInputSellAmountUsd)
const { foxDiscountUsd, foxDiscountPercent, feeUsdBeforeDiscount, feeBpsBeforeDiscount } =
calculateFees({
tradeAmountUsd: bnOrZero(sellAmountUsd),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { WithBackButton } from 'components/MultiHopTrade/components/WithBackButt
import { TradeRoutePaths } from 'components/MultiHopTrade/types'
import { SlideTransition } from 'components/SlideTransition'
import { Text } from 'components/Text'
import { swappers as swappersSlice } from 'state/slices/swappersSlice/swappersSlice'
import { tradeInput as swappersSlice } from 'state/slices/tradeInputSlice/tradeInputSlice'
import { selectTradeExecutionState } from 'state/slices/tradeQuoteSlice/selectors'
import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { bnOrZero } from 'lib/bignumber/bignumber'
import {
selectActiveSwapperName,
selectLastHopBuyAsset,
selectSellAmountUserCurrency,
selectQuoteSellAmountUserCurrency,
selectTotalNetworkFeeUserCurrencyPrecision,
selectTradeExecutionState,
} from 'state/slices/tradeQuoteSlice/selectors'
Expand All @@ -34,7 +34,7 @@ export const Footer = () => {
const lastHopBuyAsset = useAppSelector(selectLastHopBuyAsset)
const tradeExecutionState = useAppSelector(selectTradeExecutionState)
const networkFeeUserCurrency = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
const sellAmountBeforeFeesUserCurrency = useAppSelector(selectSellAmountUserCurrency)
const sellAmountBeforeFeesUserCurrency = useAppSelector(selectQuoteSellAmountUserCurrency)
const { isModeratePriceImpact } = usePriceImpact()

const handleConfirm = useCallback(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@ import type { AccountId } from '@shapeshiftoss/caip'
import { isEvmChainId } from '@shapeshiftoss/chain-adapters'
import type { TradeQuoteStep } from '@shapeshiftoss/swapper'
import { useEffect, useMemo, useState } from 'react'
import { selectFirstHopSellAccountId } from 'state/slices/selectors'
import { selectFirstHopSellAccountId, selectSecondHopSellAccountId } from 'state/slices/selectors'
import {
selectFirstHop,
selectIsActiveQuoteMultiHop,
selectSecondHop,
selectSecondHopSellAccountId,
} from 'state/slices/tradeQuoteSlice/selectors'
import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
import { useAppDispatch, useAppSelector } from 'state/store'
Expand Down
8 changes: 4 additions & 4 deletions src/components/MultiHopTrade/components/SlippagePopover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ import { HelperTooltip } from 'components/HelperTooltip/HelperTooltip'
import { Row } from 'components/Row/Row'
import { Text } from 'components/Text'
import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
import { selectUserSlippagePercentage } from 'state/slices/swappersSlice/selectors'
import { swappers } from 'state/slices/swappersSlice/swappersSlice'
import { selectUserSlippagePercentage } from 'state/slices/tradeInputSlice/selectors'
import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
import { selectDefaultSlippagePercentage } from 'state/slices/tradeQuoteSlice/selectors'
import { useAppDispatch, useAppSelector } from 'state/store'

Expand Down Expand Up @@ -79,9 +79,9 @@ export const SlippagePopover: FC = () => {

const handleClose = useCallback(() => {
if (slippageType === SlippageType.Custom && !isInvalid)
dispatch(swappers.actions.setSlippagePreferencePercentage(slippageAmount))
dispatch(tradeInput.actions.setSlippagePreferencePercentage(slippageAmount))
else if (slippageType === SlippageType.Auto)
dispatch(swappers.actions.setSlippagePreferencePercentage(undefined))
dispatch(tradeInput.actions.setSlippagePreferencePercentage(undefined))
}, [dispatch, isInvalid, slippageAmount, slippageType])

const handleSlippageTypeChange = useCallback(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ import { getMixPanel } from 'lib/mixpanel/mixPanelSingleton'
import { MixPanelEvent } from 'lib/mixpanel/types'
import { THORCHAIN_STREAM_SWAP_SOURCE } from 'lib/swapper/swappers/ThorchainSwapper/constants'
import { assertUnreachable } from 'lib/utils'
import { selectManualReceiveAddress } from 'state/slices/swappersSlice/selectors'
import { selectManualReceiveAddress } from 'state/slices/tradeInputSlice/selectors'
import {
selectActiveQuote,
selectActiveStepOrDefault,
Expand All @@ -65,8 +65,8 @@ import {
selectFirstHopSellFeeAsset,
selectLastHop,
selectLastHopBuyAsset,
selectSellAmountBeforeFeesCryptoPrecision,
selectSellAmountUserCurrency,
selectQuoteSellAmountBeforeFeesCryptoPrecision,
selectQuoteSellAmountUserCurrency,
selectTotalNetworkFeeUserCurrencyPrecision,
selectTradeSlippagePercentageDecimal,
} from 'state/slices/tradeQuoteSlice/selectors'
Expand Down Expand Up @@ -137,14 +137,14 @@ export const TradeConfirm = () => {
const buyAmountAfterFeesCryptoPrecision = useAppSelector(selectBuyAmountAfterFeesCryptoPrecision)
const slippageDecimal = useAppSelector(selectTradeSlippagePercentageDecimal)
const netBuyAmountUserCurrency = useAppSelector(selectBuyAmountAfterFeesUserCurrency)
const sellAmountBeforeFeesUserCurrency = useAppSelector(selectSellAmountUserCurrency)
const sellAmountBeforeFeesUserCurrency = useAppSelector(selectQuoteSellAmountUserCurrency)
const networkFeeCryptoHuman = useAppSelector(selectFirstHopNetworkFeeCryptoPrecision)
const networkFeeUserCurrency = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
const buyAmountBeforeFeesCryptoPrecision = useAppSelector(
selectBuyAmountBeforeFeesCryptoPrecision,
)
const sellAmountBeforeFeesCryptoPrecision = useAppSelector(
selectSellAmountBeforeFeesCryptoPrecision,
selectQuoteSellAmountBeforeFeesCryptoPrecision,
)

const sellAsset = useAppSelector(selectFirstHopSellAsset)
Expand Down
24 changes: 12 additions & 12 deletions src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,14 @@ import {
selectSwappersApiTradeQuotes,
selectTradeQuoteRequestErrors,
selectTradeQuoteRequestFailed,
} from 'state/apis/swappers/selectors'
} from 'state/apis/swapper/selectors'
import {
selectBuyAsset,
selectInputBuyAsset,
selectInputSellAmountCryptoPrecision,
selectInputSellAsset,
selectManualReceiveAddressIsValidating,
selectSellAmountCryptoPrecision,
selectSellAsset,
} from 'state/slices/selectors'
import { swappers } from 'state/slices/swappersSlice/swappersSlice'
import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
import {
selectActiveQuote,
selectActiveQuoteErrors,
Expand Down Expand Up @@ -118,8 +118,8 @@ export const TradeInput = memo(() => {
const isKeplr = useMemo(() => !!wallet && isKeplrHDWallet(wallet), [wallet])
const buyAssetSearch = useModal('buyAssetSearch')
const sellAssetSearch = useModal('sellAssetSearch')
const buyAsset = useAppSelector(selectBuyAsset)
const sellAsset = useAppSelector(selectSellAsset)
const buyAsset = useAppSelector(selectInputBuyAsset)
const sellAsset = useAppSelector(selectInputSellAsset)
const percentOptions = useMemo(() => {
if (!sellAsset?.assetId) return []
if (!isToken(fromAssetId(sellAsset.assetId).assetReference)) return []
Expand All @@ -136,7 +136,7 @@ export const TradeInput = memo(() => {
const buyAmountAfterFeesUserCurrency = useAppSelector(selectBuyAmountAfterFeesUserCurrency)
const totalNetworkFeeFiatPrecision = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
const manualReceiveAddressIsValidating = useAppSelector(selectManualReceiveAddressIsValidating)
const sellAmountCryptoPrecision = useAppSelector(selectSellAmountCryptoPrecision)
const sellAmountCryptoPrecision = useAppSelector(selectInputSellAmountCryptoPrecision)
const slippageDecimal = useAppSelector(selectTradeSlippagePercentageDecimal)
const activeQuoteErrors = useAppSelector(selectActiveQuoteErrors)
const quoteRequestErrors = useAppSelector(selectTradeQuoteRequestErrors)
Expand All @@ -162,15 +162,15 @@ export const TradeInput = memo(() => {
}, [activeQuoteErrors, quoteRequestErrors])

const setBuyAsset = useCallback(
(asset: Asset) => dispatch(swappers.actions.setBuyAsset(asset)),
(asset: Asset) => dispatch(tradeInput.actions.setBuyAsset(asset)),
[dispatch],
)
const setSellAsset = useCallback(
(asset: Asset) => dispatch(swappers.actions.setSellAsset(asset)),
(asset: Asset) => dispatch(tradeInput.actions.setSellAsset(asset)),
[dispatch],
)
const handleSwitchAssets = useCallback(
() => dispatch(swappers.actions.switchAssets()),
() => dispatch(tradeInput.actions.switchAssets()),
[dispatch],
)

Expand All @@ -180,7 +180,7 @@ export const TradeInput = memo(() => {
dispatch(tradeQuoteSlice.actions.resetConfirmedQuote())
// clear the active quote index on mount to prevent stale data affecting the selectors
dispatch(tradeQuoteSlice.actions.resetActiveQuoteIndex())
dispatch(swappers.actions.setSlippagePreferencePercentage(undefined))
dispatch(tradeInput.actions.setSlippagePreferencePercentage(undefined))
}, [dispatch])

const {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,11 @@ import { useModal } from 'hooks/useModal/useModal'
import { useWallet } from 'hooks/useWallet/useWallet'
import { useWalletSupportsChain } from 'hooks/useWalletSupportsChain/useWalletSupportsChain'
import { parseAddressInputWithChainId } from 'lib/address/address'
import { selectBuyAsset, selectManualReceiveAddress } from 'state/slices/swappersSlice/selectors'
import { swappers } from 'state/slices/swappersSlice/swappersSlice'
import {
selectInputBuyAsset,
selectManualReceiveAddress,
} from 'state/slices/tradeInputSlice/selectors'
import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
import { useAppDispatch, useAppSelector } from 'state/store'

export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
Expand All @@ -31,7 +34,7 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
const { open: openSnapsModal } = useModal('snaps')

const wallet = useWallet().state.wallet
const { chainId: buyAssetChainId, assetId: buyAssetAssetId } = useAppSelector(selectBuyAsset)
const { chainId: buyAssetChainId, assetId: buyAssetAssetId } = useAppSelector(selectInputBuyAsset)
const isYatSupportedByReceiveChain = buyAssetChainId === ethChainId // yat only supports eth mainnet
const isYatSupported = isYatFeatureEnabled && isYatSupportedByReceiveChain

Expand All @@ -54,7 +57,7 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {

// Reset the manual address input state when the user changes the buy asset
useEffect(() => {
dispatch(swappers.actions.setManualReceiveAddress(undefined))
dispatch(tradeInput.actions.setManualReceiveAddress(undefined))
setFormValue(SendFormFields.Input, '')
}, [buyAssetAssetId, dispatch, setFormValue])

Expand All @@ -64,7 +67,7 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
}, [dispatch, manualReceiveAddress, setFormValue])

useEffect(() => {
dispatch(swappers.actions.setManualReceiveAddressIsValidating(isValidating))
dispatch(tradeInput.actions.setManualReceiveAddressIsValidating(isValidating))
}, [dispatch, isValidating])

const rules = useMemo(
Expand All @@ -82,15 +85,15 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
disableUrlParsing: true,
}
const { address } = await parseAddressInputWithChainId(parseAddressInputWithChainIdArgs)
dispatch(swappers.actions.setManualReceiveAddress(address || undefined))
dispatch(tradeInput.actions.setManualReceiveAddress(address || undefined))
const invalidMessage = isYatSupported
? 'common.invalidAddressOrYat'
: 'common.invalidAddress'
return address ? true : invalidMessage
} catch (e) {
// This function should never throw, but in case it ever does, we never want to have a stale manual receive address stored
console.error(e)
dispatch(swappers.actions.setManualReceiveAddress(undefined))
dispatch(tradeInput.actions.setManualReceiveAddress(undefined))
}
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { TradeAssetInputProps } from 'components/MultiHopTrade/components/T
import { TradeAssetInput } from 'components/MultiHopTrade/components/TradeAssetInput'
import { bnOrZero, positiveOrZero } from 'lib/bignumber/bignumber'
import { selectMarketDataByFilter } from 'state/slices/selectors'
import { swappers } from 'state/slices/swappersSlice/swappersSlice'
import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
import { useAppDispatch, useAppSelector } from 'state/store'

const formControlProps = { borderRadius: 0, background: 'transparent', borderWidth: 0 }
Expand Down Expand Up @@ -45,7 +45,7 @@ export const SellAssetInput = memo(
setSellAmountCryptoPrecision(sellAmountCryptoPrecision)

dispatch(
swappers.actions.setSellAmountCryptoPrecision(
tradeInput.actions.setSellAmountCryptoPrecision(
positiveOrZero(sellAmountCryptoPrecision).toString(),
),
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@ import { useIsTradingActive } from 'components/MultiHopTrade/hooks/useIsTradingA
import { RawText } from 'components/Text'
import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter'
import { bn, bnOrZero } from 'lib/bignumber/bignumber'
import { type ApiQuote, TradeQuoteValidationError } from 'state/apis/swappers'
import { type ApiQuote, TradeQuoteValidationError } from 'state/apis/swapper'
import {
selectBuyAsset,
selectFeeAssetByChainId,
selectFeeAssetById,
selectInputBuyAsset,
selectInputSellAmountCryptoPrecision,
selectInputSellAsset,
selectMarketDataByFilter,
selectMarketDataById,
selectSellAmountCryptoPrecision,
selectSellAsset,
selectUserSlippagePercentageDecimal,
} from 'state/slices/selectors'
import {
Expand Down Expand Up @@ -86,15 +86,15 @@ export const TradeQuoteLoaded: FC<TradeQuoteProps> = ({

const { isTradingActive } = useIsTradingActive()

const buyAsset = useAppSelector(selectBuyAsset)
const sellAsset = useAppSelector(selectSellAsset)
const buyAsset = useAppSelector(selectInputBuyAsset)
const sellAsset = useAppSelector(selectInputSellAsset)
const userSlippagePercentageDecimal = useAppSelector(selectUserSlippagePercentageDecimal)

const buyAssetMarketData = useAppSelector(state =>
selectMarketDataById(state, buyAsset.assetId ?? ''),
)

const sellAmountCryptoPrecision = useAppSelector(selectSellAmountCryptoPrecision)
const sellAmountCryptoPrecision = useAppSelector(selectInputSellAmountCryptoPrecision)

// NOTE: don't pull this from the slice - we're not displaying the active quote here
const networkFeeUserCurrencyPrecision = useMemo(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import { SlideTransitionY } from 'components/SlideTransitionY'
import { useIsSnapInstalled } from 'hooks/useIsSnapInstalled/useIsSnapInstalled'
import { useWallet } from 'hooks/useWallet/useWallet'
import { useWalletSupportsChain } from 'hooks/useWalletSupportsChain/useWalletSupportsChain'
import type { ApiQuote } from 'state/apis/swappers'
import { selectBuyAsset } from 'state/slices/selectors'
import type { ApiQuote } from 'state/apis/swapper'
import { selectInputBuyAsset } from 'state/slices/selectors'
import { selectActiveQuoteIndex } from 'state/slices/tradeQuoteSlice/selectors'
import { useAppSelector } from 'state/store'

Expand All @@ -26,7 +26,7 @@ const arrowDownIcon = <ArrowDownIcon />
export const TradeQuotes: React.FC<TradeQuotesProps> = memo(
({ sortedQuotes: _sortedQuotes, isLoading }) => {
const wallet = useWallet().state.wallet
const { chainId: buyAssetChainId } = useAppSelector(selectBuyAsset)
const { chainId: buyAssetChainId } = useAppSelector(selectInputBuyAsset)
const isSnapInstalled = useIsSnapInstalled()
const walletSupportsBuyAssetChain = useWalletSupportsChain({
chainId: buyAssetChainId,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { TradeQuoteError as SwapperTradeQuoteError } from '@shapeshiftoss/swapper'
import type { InterpolationOptions } from 'node-polyglot'
import { assertUnreachable } from 'lib/utils'
import type { ErrorWithMeta } from 'state/apis/swappers'
import { type TradeQuoteError, TradeQuoteValidationError } from 'state/apis/swappers'
import type { ErrorWithMeta } from 'state/apis/swapper'
import { type TradeQuoteError, TradeQuoteValidationError } from 'state/apis/swapper'

export const getQuoteErrorTranslation = (
tradeQuoteError: ErrorWithMeta<TradeQuoteError>,
Expand Down

0 comments on commit deffcae

Please sign in to comment.