Basin UI - Fix home height + Fix connect wallet disabled

projects/dex-ui/src/components/ActionWalletButtonWrapper.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ConnectKitButton } from "connectkit";
+import { Button } from "src/components/Swap/Button";
+import { useAccount } from "wagmi";
+
+type ActionWalletButtonProps = { children: JSX.Element };
+
+export const ActionWalletButtonWrapper = ({ children }: ActionWalletButtonProps) => {
+  const { address } = useAccount();
+
+  return !address ? (
+    <ConnectKitButton.Custom>
+      {({ show }) => {
+        return <Button onClick={show} label="Connect Wallet" />;
+      }}
+    </ConnectKitButton.Custom>
+  ) : (
+    children
+  );
+};

projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx

@@ -17,6 +17,7 @@ import { useWellReserves } from "src/wells/useWellReserves";
 import { Checkbox } from "../Checkbox";
 import { size } from "src/breakpoints";
 import { LoadingTemplate } from "src/components/LoadingTemplate";
+import { ActionWalletButtonWrapper } from "src/components/ActionWalletButtonWrapper";
 
 type BaseAddLiquidityProps = {
   slippage: number;
@@ -403,12 +404,14 @@ const AddLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, han
                 return null;
               })}
             <ButtonWrapper>
-              <AddLiquidityButton
-                disabled={!addLiquidityButtonEnabled}
-                loading={false}
-                label={`${buttonLabel} →`}
-                onClick={addLiquidityButtonClickHandler}
-              />
+              <ActionWalletButtonWrapper>
+                <AddLiquidityButton
+                  disabled={!addLiquidityButtonEnabled}
+                  loading={false}
+                  label={`${buttonLabel} →`}
+                  onClick={addLiquidityButtonClickHandler}
+                />
+              </ActionWalletButtonWrapper>
             </ButtonWrapper>
           </MediumGapContainer>
         </LargeGapContainer>

projects/dex-ui/src/components/Liquidity/RemoveLiquidity.tsx

@@ -23,6 +23,7 @@ import { size } from "src/breakpoints";
 import { displayTokenSymbol } from "src/utils/format";
 import { LoadingTemplate } from "../LoadingTemplate";
 import { useLPPositionSummary } from "src/tokens/useLPPositionSummary";
+import { ActionWalletButtonWrapper } from "../ActionWalletButtonWrapper";
 
 type BaseRemoveLiquidityProps = {
   slippage: number;
@@ -416,14 +417,15 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler,
               />
             </ButtonWrapper>
           )}
-
           <ButtonWrapper>
-            <Button
-              disabled={!removeLiquidityButtonEnabled}
-              label={buttonLabel}
-              onClick={removeLiquidityButtonClickHandler}
-              loading={false}
-            />
+            <ActionWalletButtonWrapper>
+              <Button
+                disabled={!removeLiquidityButtonEnabled}
+                label={buttonLabel}
+                onClick={removeLiquidityButtonClickHandler}
+                loading={false}
+              />
+            </ActionWalletButtonWrapper>
           </ButtonWrapper>
         </LargeGapContainer>
       )}

projects/dex-ui/src/components/Swap/SwapRoot.tsx

@@ -8,14 +8,15 @@ import { useAllTokensBalance } from "src/tokens/useAllTokenBalance";
 import { useSwapBuilder } from "./useSwapBuilder";
 import { useAccount } from "wagmi";
 import { Quote, QuoteResult } from "@beanstalk/sdk/Wells";
-import { Button } from "./Button";
 import { Log } from "src/utils/logger";
 import { useSearchParams } from "react-router-dom";
 import { TransactionToast } from "../TxnToast/TransactionToast";
 import QuoteDetails from "../Liquidity/QuoteDetails";
 import { getPrice } from "src/utils/price/usePrice";
 import useSdk from "src/utils/sdk/useSdk";
 import { size } from "src/breakpoints";
+import { ActionWalletButtonWrapper } from "src/components/ActionWalletButtonWrapper";
+import { Button } from "./Button";
 
 const NULL_ADDRESS = "0x0000000000000000000000000000000000000000";
 
@@ -320,15 +321,14 @@ export const SwapRoot = () => {
   };
 
   const getLabel = useCallback(() => {
-    if (!account) return "Connect Wallet";
     if (!inAmount && !outAmount) return "Enter Amount";
     if (inToken.address === outToken.address) return "Select different output token";
     if (inAmount?.eq(TokenValue.ZERO) && outAmount?.eq(TokenValue.ZERO)) return "Enter Amount";
     if (!hasEnoughBalance) return "Insufficient Balance";
     if (needsApproval) return "Approve";
 
     return "Swap";
-  }, [account, hasEnoughBalance, inAmount, needsApproval, outAmount, inToken, outToken]);
+  }, [hasEnoughBalance, inAmount, needsApproval, outAmount, inToken, outToken]);
 
   if (Object.keys(tokens).length === 0)
     return <Container>There are no tokens. Please check you are connected to the right network.</Container>;
@@ -375,7 +375,9 @@ export const SwapRoot = () => {
         tokenPrices={prices}
       />
       <SwapButtonContainer data-trace="true">
-        <Button label={getLabel()} disabled={!buttonEnabled} onClick={handleButtonClick} loading={txLoading} />
+        <ActionWalletButtonWrapper>
+          <Button label={getLabel()} disabled={!buttonEnabled} onClick={handleButtonClick} loading={txLoading} />
+        </ActionWalletButtonWrapper>
       </SwapButtonContainer>
     </Container>
   );

projects/dex-ui/src/pages/Home.tsx

@@ -209,7 +209,7 @@ const InfoContainer = styled.div`
   gap: 8px;
   box-sizing: border-box;
   height: 100%;
-
+  
   ${mediaQuery.sm.up} {
     padding-top: min(25%, 185px);
     justify-content: flex-start
@@ -292,6 +292,10 @@ const AccordionContainer = styled.div`
   gap: 24px;
   width: 100%;
 
+  ${mediaQuery.sm.up} {
+    padding-bottom: 150px;
+  }
+
   /// Tablet
   ${mediaQuery.md.only} {
     width: 100%;