Basin UI - Fix home height + Fix connect wallet disabled

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

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

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 { ActionWalletButton } from "../ConnectWalletButton";
 
 type BaseAddLiquidityProps = {
   slippage: number;
@@ -403,7 +404,7 @@ const AddLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, han
                 return null;
               })}
             <ButtonWrapper>
-              <AddLiquidityButton
+              <ActionWalletButton
                 disabled={!addLiquidityButtonEnabled}
                 loading={false}
                 label={`${buttonLabel} →`}

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 { ActionWalletButton } from "../ConnectWalletButton";
 
 type BaseRemoveLiquidityProps = {
   slippage: number;
@@ -416,9 +417,8 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler,
               />
             </ButtonWrapper>
           )}
-
           <ButtonWrapper>
-            <Button
+            <ActionWalletButton
               disabled={!removeLiquidityButtonEnabled}
               label={buttonLabel}
               onClick={removeLiquidityButtonClickHandler}

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

@@ -8,14 +8,14 @@ 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 { ActionWalletButton } from "src/components/ConnectWalletButton";
 
 const NULL_ADDRESS = "0x0000000000000000000000000000000000000000";
 
@@ -320,15 +320,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 +374,7 @@ export const SwapRoot = () => {
         tokenPrices={prices}
       />
       <SwapButtonContainer data-trace="true">
-        <Button label={getLabel()} disabled={!buttonEnabled} onClick={handleButtonClick} loading={txLoading} />
+        <ActionWalletButton label={getLabel()} disabled={!buttonEnabled} onClick={handleButtonClick} loading={txLoading} />
       </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%;