fix(RemoveLiquidity): fixed deps in callback, approval button is now displayed in correct circumstances

Author: zachdt

src/components/Market/OrderCard/components/AddLiquidity/AddLiquidity.tsx

@@ -529,7 +529,20 @@ const AddLiquidity: React.FC = () => {
         ) : (
           <>
             {isApproved() ? (
-              <> </>
+              <>
+                {' '}
+                <Button
+                  disabled={
+                    !isApproved() ||
+                    !parsedUnderlyingAmount?.gt(0) ||
+                    (hasLiquidity ? null : !parsedOptionAmount?.gt(0))
+                  }
+                  full
+                  size="sm"
+                  onClick={handleSubmitClick}
+                  text={`Add Liquidity`}
+                />
+              </>
             ) : (
               <>
                 <Button
@@ -541,18 +554,6 @@ const AddLiquidity: React.FC = () => {
                 />
               </>
             )}
-
-            <Button
-              disabled={
-                !isApproved() ||
-                !parsedUnderlyingAmount?.gt(0) ||
-                (hasLiquidity ? null : !parsedOptionAmount?.gt(0))
-              }
-              full
-              size="sm"
-              onClick={handleSubmitClick}
-              text={`Add Liquidity`}
-            />
           </>
         )}
       </Box>

src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx

@@ -149,11 +149,11 @@ const RemoveLiquidity: React.FC = () => {
 
   const isOptionApproved = useCallback(() => {
     return approved[0] || calculateLongBurn().isZero()
-  }, [approved, item.entity])
+  }, [approved, item.entity, ratio])
 
   const isLPApproved = useCallback(() => {
     return approved[1] || signData
-  }, [approved, item.entity, signData])
+  }, [approved, item.entity, signData, ratio])
 
   const uninitializedMarket = useCallback(() => {
     return (
@@ -225,8 +225,8 @@ const RemoveLiquidity: React.FC = () => {
   }, [uninitializedMarket, calculateLongBurn])
 
   const calculateReceived = useCallback(() => {
-    let underlyingReceived: string = '0'
-    let shortReceived: string = '0'
+    let underlyingReceived = '0'
+    let shortReceived = '0'
     if (uninitializedMarket()) {
       return { shortReceived, underlyingReceived }
     }