fix: surface StakeKit API errors to user when yield quote fails

When a yield quote API call fails (e.g. StakeKit returns
DriftLendingInsufficientSolForRentError), the error was silently
swallowed — the deposit button was disabled with no explanation.

Changes:
- Return quoteError from useYieldTransactionFlow hook
- Show red error text above the action button in:
  - YieldEnterModal
  - YieldForm
  - YieldActionModal
- Change button text to 'Quote Failed' when error present
- Change button color scheme to red when error present
- Parse StakeKit/Axios error responses for user-friendly messages

Closes #12052

Author: gomes-bot

src/pages/Yields/components/YieldActionModal.tsx

@@ -81,6 +81,7 @@ export const YieldActionModal = memo(function YieldActionModal({
     handleClose,
     isQuoteLoading,
     quoteData,
+    quoteError,
     isAllowanceCheckPending,
     isUsdtResetRequired,
   } = useYieldTransactionFlow({
@@ -202,7 +203,20 @@ export const YieldActionModal = memo(function YieldActionModal({
     yieldItem.mechanics.type,
   ])
 
+  const quoteErrorMessage = useMemo(() => {
+    if (!quoteError) return null
+    try {
+      const axiosError = quoteError as { response?: { data?: { message?: string } } }
+      if (axiosError?.response?.data?.message) return axiosError.response.data.message
+      if (quoteError instanceof Error) return quoteError.message
+    } catch {
+      // ignore parsing errors
+    }
+    return translate('yieldXYZ.errors.quoteFailedDescription')
+  }, [quoteError, translate])
+
   const buttonText = useMemo(() => {
+    if (quoteError && amount) return translate('yieldXYZ.errors.quoteFailedTitle')
     const yieldType = yieldItem.mechanics.type
     // Use the current step's type/title for a clean button label (e.g., "Stake", "Unstake", "Approve")
     if (activeStepIndex >= 0 && transactionSteps[activeStepIndex]) {
@@ -226,6 +240,8 @@ export const YieldActionModal = memo(function YieldActionModal({
   }, [
     action,
     translate,
+    quoteError,
+    amount,
     activeStepIndex,
     transactionSteps,
     quoteData,
@@ -412,8 +428,13 @@ export const YieldActionModal = memo(function YieldActionModal({
       </DialogBody>
       {isInProgress && (
         <DialogFooter borderTop='1px solid' borderColor='border.base' pt={4} pb={4}>
+          {quoteErrorMessage && (
+            <Text fontSize='sm' color='red.500' mb={3} textAlign='center'>
+              {quoteErrorMessage}
+            </Text>
+          )}
           <Button
-            colorScheme='blue'
+            colorScheme={quoteErrorMessage ? 'red' : 'blue'}
             size='lg'
             width='full'
             height='56px'

src/pages/Yields/components/YieldEnterModal.tsx

@@ -319,6 +319,7 @@ export const YieldEnterModal = memo(
       handleClose: hookHandleClose,
       isQuoteLoading,
       quoteData,
+      quoteError,
       isAllowanceCheckPending,
       isUsdtResetRequired,
     } = useYieldTransactionFlow({
@@ -357,9 +358,24 @@ export const YieldEnterModal = memo(
       [isConnected, isLoading, yieldItem.status.enter, cryptoAmount, isBelowMinimum, quoteData],
     )
 
+    const quoteErrorMessage = useMemo(() => {
+      if (!quoteError) return null
+      try {
+        // Axios errors have response.data with error details
+        const axiosError = quoteError as { response?: { data?: { message?: string } } }
+        if (axiosError?.response?.data?.message) return axiosError.response.data.message
+        // Fall back to error message
+        if (quoteError instanceof Error) return quoteError.message
+      } catch {
+        // ignore parsing errors
+      }
+      return translate('yieldXYZ.errors.quoteFailedDescription')
+    }, [quoteError, translate])
+
     const enterButtonText = useMemo(() => {
       if (!isConnected) return translate('common.connectWallet')
       if (isQuoteActive) return translate('yieldXYZ.loadingQuote')
+      if (quoteError && cryptoAmount) return translate('yieldXYZ.errors.quoteFailedTitle')
 
       if (isSubmitting && transactionSteps.length > 0) {
         const activeStep = transactionSteps.find(s => s.status !== 'success')
@@ -397,6 +413,8 @@ export const YieldEnterModal = memo(
     }, [
       isConnected,
       isQuoteActive,
+      quoteError,
+      cryptoAmount,
       isSubmitting,
       transactionSteps,
       activeStepIndex,
@@ -673,8 +691,13 @@ export const YieldEnterModal = memo(
         </DialogBody>
         {isInProgress && (
           <DialogFooter borderTop='1px solid' borderColor='border.base' pt={4} pb={4}>
+            {quoteErrorMessage && (
+              <Text fontSize='sm' color='red.500' mb={3} textAlign='center'>
+                {quoteErrorMessage}
+              </Text>
+            )}
             <Button
-              colorScheme='blue'
+              colorScheme={quoteErrorMessage ? 'red' : 'blue'}
               size='lg'
               width='full'
               height='56px'

src/pages/Yields/components/YieldForm.tsx

@@ -343,6 +343,7 @@ export const YieldForm = memo(
       handleConfirm,
       isQuoteLoading,
       quoteData,
+      quoteError,
       isAllowanceCheckPending,
       isUsdtResetRequired,
     } = useYieldTransactionFlow({
@@ -402,9 +403,22 @@ export const YieldForm = memo(
       quoteData,
     ])
 
+    const quoteErrorMessage = useMemo(() => {
+      if (!quoteError) return null
+      try {
+        const axiosError = quoteError as { response?: { data?: { message?: string } } }
+        if (axiosError?.response?.data?.message) return axiosError.response.data.message
+        if (quoteError instanceof Error) return quoteError.message
+      } catch {
+        // ignore parsing errors
+      }
+      return translate('yieldXYZ.errors.quoteFailedDescription')
+    }, [quoteError, translate])
+
     const buttonText = useMemo(() => {
       if (!isConnected) return translate('common.connectWallet')
       if (isQuoteActive) return translate('yieldXYZ.loadingQuote')
+      if (quoteError && cryptoAmount) return translate('yieldXYZ.errors.quoteFailedTitle')
 
       if (isSubmitting && transactionSteps.length > 0) {
         const activeStep = transactionSteps.find(s => s.status !== 'success')
@@ -451,6 +465,8 @@ export const YieldForm = memo(
     }, [
       isConnected,
       isQuoteActive,
+      quoteError,
+      cryptoAmount,
       isSubmitting,
       transactionSteps,
       activeStepIndex,
@@ -737,8 +753,13 @@ export const YieldForm = memo(
         </Flex>
 
         <Box pt={4} pb={4}>
+          {quoteErrorMessage && (
+            <Text fontSize='sm' color='red.500' mb={3} textAlign='center'>
+              {quoteErrorMessage}
+            </Text>
+          )}
           <Button
-            colorScheme='blue'
+            colorScheme={quoteErrorMessage ? 'red' : 'blue'}
             size='lg'
             width='full'
             height='56px'

src/pages/Yields/hooks/useYieldTransactionFlow.ts

@@ -829,6 +829,7 @@ export const useYieldTransactionFlow = ({
       handleClose,
       isQuoteLoading,
       quoteData,
+      quoteError,
       isAllowanceCheckPending,
       isUsdtResetRequired,
     }),
@@ -843,6 +844,7 @@ export const useYieldTransactionFlow = ({
       handleClose,
       isQuoteLoading,
       quoteData,
+      quoteError,
       isAllowanceCheckPending,
       isUsdtResetRequired,
     ],