diff --git a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx index 953099cb5bf..c3d62656297 100644 --- a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx +++ b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx @@ -26,7 +26,11 @@ import { getMixPanel } from 'lib/mixpanel/mixPanelSingleton' import { MixPanelEvent } from 'lib/mixpanel/types' import { isKeplrHDWallet } from 'lib/utils' import { selectIsSnapshotApiQueriesPending, selectVotingPower } from 'state/apis/snapshot/selectors' -import { selectHasUserEnteredAmount, selectInputSellAsset } from 'state/slices/selectors' +import { + selectHasUserEnteredAmount, + selectInputSellAsset, + selectIsAccountMetadataLoading, +} from 'state/slices/selectors' import { selectActiveQuote, selectFirstHop, @@ -77,6 +81,7 @@ export const TradeInput = ({ isCompact, tradeInputRef }: TradeInputProps) => { const [shouldShowArbitrumBridgeAcknowledgement, setShouldShowArbitrumBridgeAcknowledgement] = useState(false) const isKeplr = useMemo(() => !!wallet && isKeplrHDWallet(wallet), [wallet]) + const isAccountMetadataLoading = useAppSelector(selectIsAccountMetadataLoading) const sellAsset = useAppSelector(selectInputSellAsset) const tradeQuoteStep = useAppSelector(selectFirstHop) @@ -113,6 +118,7 @@ export const TradeInput = ({ isCompact, tradeInputRef }: TradeInputProps) => { const isLoading = useMemo( () => + isAccountMetadataLoading || (!isAnyTradeQuoteLoaded && !isTradeQuoteRequestAborted) || isConfirmationLoading || // Only consider snapshot API queries as pending if we don't have voting power yet @@ -124,6 +130,7 @@ export const TradeInput = ({ isCompact, tradeInputRef }: TradeInputProps) => { isTradeQuoteRequestAborted, isConfirmationLoading, isVotingPowerLoading, + isAccountMetadataLoading, ], ) diff --git a/src/components/MultiHopTrade/components/TradeInput/components/ConfirmSummary.tsx b/src/components/MultiHopTrade/components/TradeInput/components/ConfirmSummary.tsx index 48bdb4e068f..81f7d3b4b84 100644 --- a/src/components/MultiHopTrade/components/TradeInput/components/ConfirmSummary.tsx +++ b/src/components/MultiHopTrade/components/TradeInput/components/ConfirmSummary.tsx @@ -238,6 +238,10 @@ export const ConfirmSummary = ({ translate, ]) + const buttonText = useMemo(() => { + return + }, [quoteStatusTranslation]) + return ( <> diff --git a/src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx b/src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx index 32188bdb4fe..e5047ce7157 100644 --- a/src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx +++ b/src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx @@ -15,7 +15,7 @@ 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 { selectAccountIdsByAssetId } from 'state/slices/selectors' +import { selectAccountIdsByAssetId, selectIsAccountMetadataLoading } from 'state/slices/selectors' import { selectInputBuyAsset } from 'state/slices/tradeInputSlice/selectors' import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice' import { useAppDispatch, useAppSelector } from 'state/store' @@ -28,6 +28,7 @@ type ManualAddressEntryProps = { export const ManualAddressEntry: FC = memo( ({ description, shouldForceManualAddressEntry }: ManualAddressEntryProps): JSX.Element | null => { const dispatch = useAppDispatch() + const isAccountMetadataLoading = useAppSelector(selectIsAccountMetadataLoading) const { formState: { isValidating }, @@ -57,6 +58,7 @@ export const ManualAddressEntry: FC = memo( const { manualReceiveAddress } = useReceiveAddress(useReceiveAddressArgs) const shouldShowManualReceiveAddressInput = useMemo(() => { + if (isAccountMetadataLoading) return false if (shouldForceManualAddressEntry) return true if (manualReceiveAddress) return false // Ledger "supports" all chains, but may not have them connected @@ -69,6 +71,7 @@ export const ManualAddressEntry: FC = memo( wallet, walletSupportsBuyAssetChain, shouldForceManualAddressEntry, + isAccountMetadataLoading, ]) const chainAdapterManager = getChainAdapterManager() diff --git a/src/components/MultiHopTrade/components/TradeInput/components/RecipientAddress.tsx b/src/components/MultiHopTrade/components/TradeInput/components/RecipientAddress.tsx index b03ab45f711..04e1dbacb52 100644 --- a/src/components/MultiHopTrade/components/TradeInput/components/RecipientAddress.tsx +++ b/src/components/MultiHopTrade/components/TradeInput/components/RecipientAddress.tsx @@ -25,7 +25,7 @@ import type { TextPropTypes } from 'components/Text/Text' import { useWallet } from 'hooks/useWallet/useWallet' import { parseAddressInputWithChainId } from 'lib/address/address' import { middleEllipsis } from 'lib/utils' -import { selectInputBuyAsset } from 'state/slices/selectors' +import { selectInputBuyAsset, selectIsAccountMetadataLoading } from 'state/slices/selectors' import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice' import { useAppDispatch, useAppSelector } from 'state/store' @@ -42,6 +42,7 @@ export const RecipientAddress: React.FC = ({ }) => { const translate = useTranslate() const dispatch = useAppDispatch() + const isAccountMetadataLoading = useAppSelector(selectIsAccountMetadataLoading) const wallet = useWallet().state.wallet const useReceiveAddressArgs = useMemo( () => ({ @@ -154,7 +155,7 @@ export const RecipientAddress: React.FC = ({ const handleFormSubmit = useMemo(() => handleSubmit(onSubmit), [handleSubmit, onSubmit]) - if (!receiveAddress || shouldForceManualAddressEntry) return null + if (!receiveAddress || shouldForceManualAddressEntry || isAccountMetadataLoading) return null return isRecipientAddressEditing ? (
diff --git a/src/components/MultiHopTrade/components/TradeInput/components/SellAssetInput.tsx b/src/components/MultiHopTrade/components/TradeInput/components/SellAssetInput.tsx index 9f89f466401..b3c4f74c4bd 100644 --- a/src/components/MultiHopTrade/components/TradeInput/components/SellAssetInput.tsx +++ b/src/components/MultiHopTrade/components/TradeInput/components/SellAssetInput.tsx @@ -24,6 +24,8 @@ export type SellAssetInputProps = { onAccountIdChange: AccountDropdownProps['onChange'] labelPostFix?: TradeAssetInputProps['labelPostFix'] percentOptions: number[] + isReadOnly?: TradeAssetInputProps['isReadOnly'] + isLoading?: boolean } export const SellAssetInput = memo( @@ -33,6 +35,7 @@ export const SellAssetInput = memo( label, onAccountIdChange, percentOptions, + isLoading, ...rest }: SellAssetInputProps) => { const sellAmountCryptoPrecision = useAppSelector(selectInputSellAmountCryptoPrecision) @@ -99,8 +102,8 @@ export const SellAssetInput = memo( isSendMaxDisabled={false} onChange={handleSellAssetInputChange} percentOptions={percentOptions} - showInputSkeleton={false} - showFiatSkeleton={false} + showInputSkeleton={isLoading} + showFiatSkeleton={isLoading} label={label} formControlProps={formControlProps} onAccountIdChange={onAccountIdChange} diff --git a/src/components/MultiHopTrade/components/TradeInput/components/TradeInputBody.tsx b/src/components/MultiHopTrade/components/TradeInput/components/TradeInputBody.tsx index 7b5ca270694..f06acd4c97f 100644 --- a/src/components/MultiHopTrade/components/TradeInput/components/TradeInputBody.tsx +++ b/src/components/MultiHopTrade/components/TradeInput/components/TradeInputBody.tsx @@ -150,8 +150,8 @@ export const TradeInputBody = ({ // disable switching assets if the buy asset isn't supported const shouldDisableSwitchAssets = useMemo(() => { - return !walletSupportsBuyAssetChain - }, [walletSupportsBuyAssetChain]) + return !walletSupportsBuyAssetChain || isLoading + }, [walletSupportsBuyAssetChain, isLoading]) return ( @@ -162,6 +162,7 @@ export const TradeInputBody = ({ onAccountIdChange={setSellAssetAccountId} labelPostFix={sellTradeAssetSelect} percentOptions={percentOptions} + isLoading={isLoading} />