Decouple input disable logic from amount type support

Author: samholmes

src/components/scenes/RampCreateScene.tsx

@@ -75,12 +75,6 @@ type Props = (
   direction: 'buy' | 'sell'
 }
 
-// Helper function to determine which input types should be disabled
-interface AmountTypeSupport {
-  fiatInputDisabled: boolean
-  cryptoInputDisabled: boolean
-}
-
 export const RampCreateScene: React.FC<Props> = (props: Props) => {
   const { direction, navigation, route } = props
   const { regionCode: initialRegionCode, forcedWalletResult } =
@@ -216,16 +210,15 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
   }, [selectedFiatCurrencyCode])
 
   // Determine which input types should be disabled
-  const { fiatInputDisabled, cryptoInputDisabled } =
-    getAmountTypeSupport(supportedPlugins)
+  const amountTypeSupport = getAmountTypeSupport(supportedPlugins)
 
   // On first entry, initialize the fiat amount to approximately $500 USD
   React.useEffect(() => {
     const applyInitial = async (): Promise<void> => {
       // Don't override if the user has started typing or fiat input is disabled
       if (
         hasAppliedInitialAmount.current ||
-        fiatInputDisabled ||
+        amountTypeSupport.onlyCrypto ||
         'empty' in exchangeAmount ||
         lastUsedInput != null ||
         shouldShowRegionSelect
@@ -267,7 +260,7 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
 
     applyInitial().catch(() => {})
   }, [
-    fiatInputDisabled,
+    amountTypeSupport.onlyCrypto,
     isLightAccount,
     lastUsedInput,
     selectedWallet,
@@ -291,8 +284,8 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
 
     // Guard against creating request with disabled input type
     if (
-      (lastUsedInput === 'fiat' && fiatInputDisabled) ||
-      (lastUsedInput === 'crypto' && cryptoInputDisabled)
+      (lastUsedInput === 'fiat' && amountTypeSupport.onlyCrypto) ||
+      (lastUsedInput === 'crypto' && amountTypeSupport.onlyFiat)
     ) {
       return null
     }
@@ -320,8 +313,8 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
     lastUsedInput,
     countryCode,
     stateProvinceCode,
-    fiatInputDisabled,
-    cryptoInputDisabled,
+    amountTypeSupport.onlyCrypto,
+    amountTypeSupport.onlyFiat,
     direction
   ])
 
@@ -390,7 +383,7 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
   // Derived state for display values
   const displayFiatAmount = React.useMemo(() => {
     // Don't show any value if fiat input is disabled
-    if (fiatInputDisabled) return ''
+    if (amountTypeSupport.onlyCrypto) return ''
     if ('empty' in exchangeAmount) return ''
 
     if ('max' in exchangeAmount) {
@@ -416,7 +409,7 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
       return ''
     }
   }, [
-    fiatInputDisabled,
+    amountTypeSupport.onlyCrypto,
     maxQuoteForMaxFlow,
     exchangeAmount,
     lastUsedInput,
@@ -425,7 +418,7 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
 
   const displayCryptoAmount = React.useMemo(() => {
     // Don't show any value if crypto input is disabled
-    if (cryptoInputDisabled) return ''
+    if (amountTypeSupport.onlyFiat) return ''
     if ('empty' in exchangeAmount || lastUsedInput === null) return ''
 
     if ('max' in exchangeAmount) {
@@ -451,7 +444,7 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
       return ''
     }
   }, [
-    cryptoInputDisabled,
+    amountTypeSupport.onlyFiat,
     maxQuoteForMaxFlow,
     exchangeAmount,
     lastUsedInput,
@@ -574,11 +567,14 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
       !isLoadingQuotes
     ) {
       // Persist the chosen amount so it remains after returning
-      if (!fiatInputDisabled && maxQuoteForMaxFlow.fiatAmount != null) {
+      if (
+        !amountTypeSupport.onlyCrypto &&
+        maxQuoteForMaxFlow.fiatAmount != null
+      ) {
         setLastUsedInput('fiat')
         setExchangeAmount({ amount: maxQuoteForMaxFlow.fiatAmount })
       } else if (
-        !cryptoInputDisabled &&
+        !amountTypeSupport.onlyFiat &&
         maxQuoteForMaxFlow.cryptoAmount != null
       ) {
         setLastUsedInput('crypto')
@@ -597,8 +593,8 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
     isLoadingQuotes,
     rampQuoteRequest,
     navigation,
-    fiatInputDisabled,
-    cryptoInputDisabled,
+    amountTypeSupport.onlyCrypto,
+    amountTypeSupport.onlyFiat,
     exchangeAmount
   ])
 
@@ -619,6 +615,13 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
     )
   }
 
+  const fiatInputDisabled =
+    'max' in exchangeAmount || amountTypeSupport.onlyCrypto
+  const cryptoInputDisabled =
+    isLoadingPersistedCryptoSelection ||
+    'max' in exchangeAmount ||
+    amountTypeSupport.onlyFiat
+
   // Render trade form view
   return (
     <>
@@ -675,7 +678,7 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
               maxDecimals={2}
               returnKeyType="done"
               showSpinner={isFetchingQuotes && lastUsedInput === 'crypto'}
-              disabled={'max' in exchangeAmount || fiatInputDisabled}
+              disabled={fiatInputDisabled}
               expand
             />
           </View>
@@ -720,11 +723,7 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
                   maxDecimals={6}
                   returnKeyType="done"
                   showSpinner={isFetchingQuotes && lastUsedInput === 'fiat'}
-                  disabled={
-                    isLoadingPersistedCryptoSelection ||
-                    'max' in exchangeAmount ||
-                    cryptoInputDisabled
-                  }
+                  disabled={cryptoInputDisabled}
                   expand
                 />
               </>
@@ -833,8 +832,8 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
           lastUsedInput === null ||
           supportedPlugins.length === 0 ||
           sortedQuotes.length === 0 ||
-          (lastUsedInput === 'fiat' && fiatInputDisabled) ||
-          (lastUsedInput === 'crypto' && cryptoInputDisabled)
+          (lastUsedInput === 'fiat' && amountTypeSupport.onlyCrypto) ||
+          (lastUsedInput === 'crypto' && amountTypeSupport.onlyFiat)
         }
       />
     </>
@@ -915,11 +914,17 @@ const getStyles = cacheStyles((theme: ReturnType<typeof useTheme>) => ({
   }
 }))
 
+// Helper function to determine which input types should be disabled
+interface AmountTypeSupport {
+  onlyCrypto: boolean
+  onlyFiat: boolean
+}
+
 function getAmountTypeSupport(
   supportedPlugins: SupportedPluginResult[]
 ): AmountTypeSupport {
   if (supportedPlugins.length === 0) {
-    return { fiatInputDisabled: false, cryptoInputDisabled: false }
+    return { onlyCrypto: false, onlyFiat: false }
   }
 
   // Collect all supported amount types from all plugins
@@ -945,7 +950,7 @@ function getAmountTypeSupport(
     allSupportedTypes.has('crypto') && !allSupportedTypes.has('fiat')
 
   return {
-    fiatInputDisabled: onlyCrypto,
-    cryptoInputDisabled: onlyFiat
+    onlyCrypto,
+    onlyFiat
   }
 }