From f63ffbb1204ec1fc645b85ea42170c422ee0d04c Mon Sep 17 00:00:00 2001
From: David Klakurka <klakurka@gmail.com>
Date: Thu, 23 Jul 2026 23:59:26 -0700
Subject: [PATCH] Misc Sideshift page polish

---
 .../components/Widget/AltpaymentWidget.tsx    | 96 +++++++++++++------
 react/lib/components/Widget/Widget.tsx        |  4 +-
 2 files changed, 71 insertions(+), 29 deletions(-)

diff --git a/react/lib/components/Widget/AltpaymentWidget.tsx b/react/lib/components/Widget/AltpaymentWidget.tsx
index 876a1e54..cab47251 100644
--- a/react/lib/components/Widget/AltpaymentWidget.tsx
+++ b/react/lib/components/Widget/AltpaymentWidget.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react'
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react'
 import { TextField, Select, MenuItem, InputLabel, FormControl, Box, CircularProgress } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import { QRCodeSVG } from 'qrcode.react'
@@ -377,38 +377,30 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
     }
   }
 
-  const SideshiftCtn = styled('div')({
+  const SideshiftCtn = useMemo(() => styled('div')({
     alignItems: 'center',
     justifyContent: 'flex-start',
     display: 'flex',
     flexDirection: 'column',
     boxSizing: 'border-box',
-    position: 'absolute',
-    zIndex: 9,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+    position: 'relative',
     background: '#f5f5f7',
-    overflowY: 'auto',
-    overflowX: 'hidden',
+    width: '100%',
     padding: '16px',
     '@media (min-width: 760px)': {
       padding: '24px',
     },
-  })
+  }), [])
 
   const LoadingCenter = styled('div')({
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center',
     gap: '16px',
     textAlign: 'center',
-    width: 'max-content',
+    width: '100%',
+    minHeight: '300px',
     maxWidth: '100%',
   })
 
@@ -419,11 +411,18 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
   })
 
   const BackLink = styled('div')({
-    fontSize: '14px', marginTop: '20px', cursor: 'pointer',
+    fontSize: '14px', cursor: 'pointer',
     border: '1px solid #000', opacity: '0.7', padding: '2px 20px',
     borderRadius: '3px', '&:hover': { opacity: '1' },
   })
 
+  const BackRow = styled('div')({
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: '30px',
+  })
+
   const ShiftReady = styled('div')({
     width: '100%', display: 'flex', flexDirection: 'column',
     minWidth: 0,
@@ -479,8 +478,16 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
   })
 
   const AmountError = styled('p')({
-    position: 'absolute', bottom: '10px', textAlign: 'center',
-    background: '#00000014', padding: '10px', borderRadius: '5px'
+    margin: '12px auto 0',
+    textAlign: 'center',
+    background: '#00000014',
+    padding: '10px',
+    borderRadius: '5px',
+    minHeight: '28px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'opacity 120ms ease',
   })
 
   const ErrorMsg = styled('p')({
@@ -699,6 +706,13 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
 
   const isAutoStart = Boolean(preselectedCoin)
   const isAutoStartLoading = isAutoStart && !altpaymentShift && !altpaymentError
+  const showManualAmountBackButton = altpaymentEditable
+  const amountValidationMessage =
+    pairAmount && !isAboveMinimumAltpaymentAmount
+      ? 'Amount is below minimum.'
+      : pairAmount && !isBelowMaximumAltpaymentAmount
+      ? 'Amount is above maximum.'
+      : ''
 
   const renderLoading = (message: string) => (
     <LoadingCenter>
@@ -717,12 +731,28 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
     </LoadingCenter>
   )
 
+  const backToWidget = () => {
+    setUseAltpayment(false)
+  }
+
+  const backToRateSelection = () => {
+    autoQuoteRequestedRef.current = false
+    setAltpaymentError(undefined)
+    setAltpaymentShift(undefined)
+    setLoadingShift(false)
+    setCoinPair(undefined)
+  }
+
   return (
     <SideshiftCtn>
       {altpaymentError ? (
         <Fragment>
           <ErrorMsg>Error: {altpaymentError.errorMessage}</ErrorMsg>
-          <BackLink onClick={resetTrade}>Back</BackLink>
+          {showManualAmountBackButton ? (
+            <BackRow>
+              <BackLink onClick={resetTrade}>Back</BackLink>
+            </BackRow>
+          ) : null}
         </Fragment>
       ) : isAutoStartLoading ? (
         renderLoading('Loading SideShift...')
@@ -822,6 +852,11 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
                       </CopyCtn>
                     </ShiftReadyMain>
                   </ShiftReadyBody>
+                  {showManualAmountBackButton ? (
+                    <BackRow>
+                      <BackLink onClick={resetTrade}>Back</BackLink>
+                    </BackRow>
+                  ) : null}
                 </ShiftReady>
               )
             ) : loadingShift ? (
@@ -870,12 +905,17 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
                   animation={animation}
                 />
                 </div>
-                {pairAmount && !isAboveMinimumAltpaymentAmount && (
-                  <AmountError>Amount is below minimum.</AmountError>
-                )}
-                {pairAmount && !isBelowMaximumAltpaymentAmount && (
-                  <AmountError>Amount is above maximum.</AmountError>
-                )}
+                <AmountError
+                  aria-live="polite"
+                  style={amountValidationMessage ? { opacity: 1, visibility: 'visible' } : { opacity: 0, visibility: 'hidden' }}
+                >
+                  {amountValidationMessage || '\u00A0'}
+                </AmountError>
+                {showManualAmountBackButton ? (
+                  <BackRow>
+                    <BackLink onClick={backToRateSelection}>Back</BackLink>
+                  </BackRow>
+                ) : null}
               </Fragment>
             ) : (
               <Fragment>
@@ -961,7 +1001,9 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
                     animation={animation}
                   />
                 )}
-                <BackLink onClick={() => {setUseAltpayment(false)}}>Back</BackLink>
+                <BackRow>
+                  <BackLink onClick={backToWidget}>Back</BackLink>
+                </BackRow>
               </Fragment>
             )
             // END: Altpayment region
diff --git a/react/lib/components/Widget/Widget.tsx b/react/lib/components/Widget/Widget.tsx
index 3256abd8..52deef23 100644
--- a/react/lib/components/Widget/Widget.tsx
+++ b/react/lib/components/Widget/Widget.tsx
@@ -1148,7 +1148,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
           ...(thisUseAltpayment ? {
             minWidth: 320,
             width: thisAltpaymentShift ? 'min(94vw, 600px)' : 'min(92vw, 420px)',
-            minHeight: thisAltpaymentShift ? 640 : 520,
+            minHeight: 420,
           } : {}),
         }}
         pt={0}
@@ -1183,7 +1183,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
           px={thisUseAltpayment ? 0 : 3}
           pt={thisUseAltpayment ? 0 : 2}
           position="relative"
-          sx={thisUseAltpayment ? { minHeight: 480, flex: 1, alignSelf: 'stretch', width: '100%' } : undefined}
+          sx={thisUseAltpayment ? { flex: 1, alignSelf: 'stretch', width: '100%' } : undefined}
         >
           {thisUseAltpayment ? (
             <AltpaymentWidget