Update Exchange.js

packages/react-app/src/components/Exchange.js

@@ -21,66 +21,66 @@ const Exchange = ({ pools }) => {
 
     return (
         <div className="flex flex-col w-full items-center">
-            <div className="mb-8">
-                <AmountIn
-                    value={fromValue}
-                    onChange={onFromValueChange}
-                    currencyValue={fromToken}
-                    onSelect={onFromTokenChange}
-                    currencies={availableTokens}
-                    isSwapping={isSwapping && hasEnoughBalance}
-                />
-                <Balance tokenBalance={fromTokenBalance} />
-            </div>
-
-            <div className="mb-8 w-[100%]">
-                <AmountOut
-                    fromToken={fromToken}
-                    toToken={toToken}
-                    amountIn={fromValueBigNumber}
-                    pairContract={pairAddress}
-                    currencyValue={toToken}
-                    onSelect={onToTokenChange}
-                    currencies={counterpartTokens}
-                />
-                <Balance tokenBalance={toTokenBalance} />
-            </div>
-
-            {approvedNeeded && !isSwapping ? (
-                <button
-                    disabled={!canApprove}
-                    onClick={onApproveRequested}
-                    className={`${
-                        canApprove
-                            ? "bg-site-pink text-white"
-                            : "bg-site-dim2 text-site-dim2"
-                    } ${styles.actionButton}`}
-                >
-                    {isApproving ? "Approving..." : "Approve"}
-                </button>
-            ) : (
-                <button
-                    disabled={!canSwap}
-                    onClick={onSwapRequested}
-                    className={`${
-                        canSwap ? "bg-site-pink text-white" : "bg-site-dim2 text-site-dim2"
-                    } ${styles.actionButton}`}
-                >
-                    {isSwapping
-                        ? "Swapping..."
-                        : hasEnoughBalance
-                            ? "Swap"
-                            : "Insufficient balance"}
-                </button>
-            )}
-
-            {failureMessage && !resetState ? (
-                <p className={styles.message}>{failureMessage}</p>
-            ) : successMessage ? (
-                <p className={styles.message}>{successMessage}</p>
-            ) : (
-                ""
-            )}
+          <div className="mb-8">
+            <AmountIn
+              value={fromValue}
+              onChange={onFromValueChange}
+              currencyValue={fromToken}
+              onSelect={onFromTokenChange}
+              currencies={availableTokens}
+              isSwapping={isSwapping && hasEnoughBalance}
+            />
+            <Balance tokenBalance={fromTokenBalance} />
+          </div>
+    
+          <div className="mb-8 w-[100%]">
+            <AmountOut
+              fromToken={fromToken}
+              toToken={toToken}
+              amountIn={fromValueBigNumber}
+              pairContract={pairAddress}
+              currencyValue={toToken}
+              onSelect={onToTokenChange}
+              currencies={counterpartTokens}
+            />
+            <Balance tokenBalance={toTokenBalance} />
+          </div>
+    
+          {approvedNeeded && !isSwapping ? (
+            <button
+              disabled={!canApprove}
+              onClick={onApproveRequested}
+              className={`${
+                canApprove
+                  ? "bg-site-pink text-white"
+                  : "bg-site-dim2 text-site-dim2"
+              } ${styles.actionButton}`}
+            >
+              {isApproving ? "Approving..." : "Approve"}
+            </button>
+          ) : (
+            <button
+              disabled={!canSwap}
+              onClick={onSwapRequested}
+              className={`${
+                canSwap ? "bg-site-pink text-white" : "bg-site-dim2 text-site-dim2"
+              } ${styles.actionButton}`}
+            >
+              {isSwapping
+                ? "Swapping..."
+                : hasEnoughBalance
+                ? "Swap"
+                : "Insufficient balance"}
+            </button>
+          )}
+    
+          {failureMessage && !resetState ? (
+            <p className={styles.message}>{failureMessage}</p>
+          ) : successMessage ? (
+            <p className={styles.message}>{successMessage}</p>
+          ) : (
+            ""
+          )}
         </div>
     );
 }