console.info({ SwapFormValues: values })

Fix: 'Connect Wallet' state on entering any values, naming and shortened if
mento-protocol · Dec 27, 2024 · 51b6fe6 · 51b6fe6
1 parent 3dc2bb1
commit 51b6fe6
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 34 deletions.
diff --git a/src/components/buttons/3DButton.tsx b/src/components/buttons/3DButton.tsx
@@ -2,48 +2,51 @@ import { PropsWithChildren } from 'react'
 
 type BaseButtonProps = {
   onClick?: () => void
-  error?: boolean
-  fullWidth?: boolean
   type?: 'button' | 'submit' | 'reset'
-  disabled?: boolean
+  isError?: boolean
+  isFullWidth?: boolean
+  isDisabled?: boolean
+  isAccountReady?: boolean
 }
 
 export const Button3D = ({ children, ...restProps }: PropsWithChildren<BaseButtonProps>) => {
   return <_3DButtonLink {...restProps}>{children}</_3DButtonLink>
 }
 
-const _3DButtonLink = ({
-  children,
-  error,
-  fullWidth,
-  onClick,
-  type,
-  disabled,
-}: PropsWithChildren<BaseButtonProps>) => {
+const _3DButtonLink = (props: PropsWithChildren<BaseButtonProps>) => {
+  const {
+    children,
+    onClick,
+    type = 'button',
+    isError,
+    isFullWidth,
+    isDisabled,
+    isAccountReady,
+  } = props
   return (
     <button
-      className={fullWidth ? 'w-full' : ''}
+      className={isFullWidth ? 'w-full' : ''}
       onClick={onClick}
-      type={type ?? 'button'}
-      disabled={disabled}
+      type={type}
+      disabled={isDisabled}
     >
       <span
         className={`group font-inter outline-offset-4 cursor-pointer ${
-          disabled ? 'bg-[#666666]' : error ? 'bg-[#863636]' : 'bg-[#2A326A]'
+          isDisabled ? 'bg-[#666666]' : isError && isAccountReady ? 'bg-[#863636]' : 'bg-[#2A326A]'
         } ${
-          fullWidth ? 'w-full ' : ''
+          isFullWidth ? 'w-full ' : ''
         } border-b rounded-lg border-primary-dark font-medium select-none inline-block`}
       >
         <span
-          className={`${'pr-10'} pl-10 group-active:-translate-y-[2px] block py-[18px] transition-transform delay-[250] ${
-            disabled ? 'hover:translate-y-[-4px]' : 'hover:-translate-y-[6px]'
+          className={`pr-10 pl-10 group-active:-translate-y-[2px] block py-[18px] transition-transform delay-[250] ${
+            isDisabled ? 'hover:translate-y-[-4px]' : 'hover:-translate-y-[6px]'
           } -translate-y-[4px] font-medium text-[15px] border rounded-lg border-primary-dark leading-5 ${
-            disabled
+            isDisabled
               ? 'bg-[#888888] text-white cursor-not-allowed'
-              : error
+              : isError && isAccountReady
               ? 'bg-[#E14F4F] text-white'
               : 'bg-[#4D62F0] text-white '
-          } ${fullWidth ? 'w-full flex items-center justify-center' : ''} `}
+          } ${isFullWidth ? 'w-full flex items-center justify-center' : ''} `}
         >
           <span className="flex items-center">{children}</span>
         </span>

diff --git a/src/features/swap/SwapConfirm.tsx b/src/features/swap/SwapConfirm.tsx
@@ -230,7 +230,7 @@ export function SwapConfirmCard({ formValues }: Props) {
       </div>
 
       <div className="flex w-full px-6 pb-6 mt-6">
-        <Button3D fullWidth onClick={onSubmit}>
+        <Button3D isFullWidth onClick={onSubmit}>
           Swap
         </Button3D>
       </div>

diff --git a/src/features/swap/SwapForm.tsx b/src/features/swap/SwapForm.tsx
@@ -355,9 +355,7 @@ function SubmitButton() {
     if (isValidating && (!errors.amount || !quoteLikelyStillLoading)) return 'Continue'
     if (!isAccountReady) return 'Connect Wallet'
     if (!isOnCelo) return 'Switch to Celo Network'
-    if (hasError) {
-      return showLongError ? 'Error' : errorText
-    }
+    if (hasError) return showLongError ? 'Error' : errorText
     return 'Continue'
   }, [
     errors.amount,
@@ -387,11 +385,12 @@ function SubmitButton() {
         <div className="bg-[#E14F4F] rounded-md text-white p-4 mb-6">{errorText}</div>
       ) : null}
       <Button3D
-        disabled={isValidating}
-        error={hasError}
-        fullWidth
+        isDisabled={isValidating}
+        isError={hasError}
+        isFullWidth
         onClick={onClick}
         type={buttonType}
+        isAccountReady={isAccountReady}
       >
         {buttonText}
       </Button3D>

diff --git a/src/features/swap/useSwapQuote.ts b/src/features/swap/useSwapQuote.ts
@@ -41,12 +41,9 @@ export function useSwapQuote(
       const toTokenAddr = getTokenAddress(toTokenId, chainId)
       const mento = await getMentoSdk(chainId)
 
-      let quoteWei: string
-      if (isSwapIn) {
-        quoteWei = (await mento.getAmountOut(fromTokenAddr, toTokenAddr, amountWeiBN)).toString()
-      } else {
-        quoteWei = (await mento.getAmountIn(fromTokenAddr, toTokenAddr, amountWeiBN)).toString()
-      }
+      const quoteWei = isSwapIn
+        ? (await mento.getAmountOut(fromTokenAddr, toTokenAddr, amountWeiBN)).toString()
+        : (await mento.getAmountIn(fromTokenAddr, toTokenAddr, amountWeiBN)).toString()
 
       const quote = fromWei(quoteWei, quoteDecimals)
       const rateIn = calcExchangeRate(amountWei, amountDecimals, quoteWei, quoteDecimals)