fix: gracefully handle swapper account loading (#7741)

* fix: gracefully handle swapper account loading * fix: loading button --------- Co-authored-by: woody <[email protected]>
shapeshift · Sep 12, 2024 · 0c069b5 · 0c069b5
1 parent 67591cd
commit 0c069b5
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 9 deletions.
diff --git 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
@@ -238,6 +238,10 @@ export const ConfirmSummary = ({
     translate,
   ])
 
+  const buttonText = useMemo(() => {
+    return <Text translation={quoteStatusTranslation} />
+  }, [quoteStatusTranslation])
+
   return (
     <>
       <CardFooter
@@ -303,14 +307,16 @@ export const ConfirmSummary = ({
         />
 
         <Button
+          isLoading={isAccountMetadataLoading}
+          loadingText={buttonText}
           type='submit'
           colorScheme={quoteHasError ? 'red' : 'blue'}
           size='lg-multiline'
           data-test='trade-form-preview-button'
           isDisabled={shouldDisablePreviewButton}
           mx={-2}
         >
-          <Text translation={quoteStatusTranslation} />
+          {buttonText}
         </Button>
       </CardFooter>
     </>

diff --git 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<ManualAddressEntryProps> = 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<ManualAddressEntryProps> = 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<ManualAddressEntryProps> = 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
@@ -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<RecipientAddressProps> = ({
 }) => {
   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<RecipientAddressProps> = ({
 
   const handleFormSubmit = useMemo(() => handleSubmit(onSubmit), [handleSubmit, onSubmit])
 
-  if (!receiveAddress || shouldForceManualAddressEntry) return null
+  if (!receiveAddress || shouldForceManualAddressEntry || isAccountMetadataLoading) return null
 
   return isRecipientAddressEditing ? (
     <form>

diff --git 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
@@ -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 (
     <Stack spacing={0}>
@@ -162,6 +162,7 @@ export const TradeInputBody = ({
         onAccountIdChange={setSellAssetAccountId}
         labelPostFix={sellTradeAssetSelect}
         percentOptions={percentOptions}
+        isLoading={isLoading}
       />
       <Flex alignItems='center' justifyContent='center' my={-2}>
         <Divider />