Merge #760

760: Fix the balance-too-low check for the Long button disable r=da-kami a=da-kami

fixes https://github.com/itchysats/itchysats/issues/754

- Pass in the balance so it can be evaluated 🤪
- The condition using `&&` did not evaluate correctly when the balance is `0` (because of how integers are evaluated in a boolean expression). The wallet balance in the `Trade` component is always a number (if we don't know a balance set it to 0...) which simplifies the logic.

Tested the behaviour in the UI with different balances (0, < margin, > margin) and it behaves as expected.

Co-authored-by: Daniel Karzel <daniel@comit.network>

taker-frontend/src/App.tsx

@@ -124,6 +124,7 @@ export const App = () => {
                                     margin={margin}
                                     leverage={leverage}
                                     liquidationPrice={liquidationPrice}
+                                    walletBalance={walletInfo ? walletInfo.balance : 0}
                                     onQuantityChange={(valueString: string) => {
                                         setUserHasEdited(true);
                                         setQuantity(valueString);

taker-frontend/src/components/Trade.tsx

@@ -63,7 +63,7 @@ interface TradeProps {
     quantity: string;
     liquidationPrice?: number;
     onQuantityChange: any;
-    walletBalance?: number;
+    walletBalance: number;
     onLongSubmit: (payload: CfdOrderRequestPayload) => void;
     isLongSubmitting: boolean;
 }
@@ -108,7 +108,7 @@ export default function Trade({
 
     const parse = (val: any) => Number.parseInt(val.replace(/^\$/, ""));
 
-    const balanceTooLow = walletBalance && walletBalance < margin;
+    const balanceTooLow = walletBalance < margin;
     const quantityTooHigh = maxQuantity < parse(quantity);
     const quantityTooLow = minQuantity > parse(quantity);
     const quantityGreaterZero = parse(quantity) > 0;
@@ -127,7 +127,7 @@ export default function Trade({
         if (balanceTooLow) {
             alertBox = <AlertBox
                 title={"Your balance is too low!"}
-                description={"Pleas deposit more into you wallet."}
+                description={"Please deposit more into you wallet."}
             />;
         }
         if (quantityTooHigh) {