Basin UI - (1) QoL fixes & UI tweaks

projects/dex-ui/src/components/Frame/Footer.tsx

@@ -1,16 +1,24 @@
 import React from "react";
 import styled from "styled-components";
-import { Discord, Github, Twitter } from "../Icons";
+import { BeanstalkLogoBlack, Discord, Github, Twitter } from "../Icons";
 import { size } from "src/breakpoints";
 
 export const Footer = () => (
   <Container>
     <Box href="https://docs.basin.exchange" rel="noopener noreferrer" target="_blank">
-      <div><span role="img" aria-label="Documentation">📃 Protocol Documentation</span></div> 
+      <div>
+        <span role="img" aria-label="Documentation">
+          📃 Protocol Documentation
+        </span>
+      </div>
       <StyledLink>Visit the Docs →</StyledLink>
     </Box>
     <Box href="https://immunefi.com/bounty/beanstalk/" rel="noopener noreferrer" target="_blank">
-      <div><span role="img" aria-label="Bug Bounty">👾 Basin Bug Bounty Program</span></div>
+      <div>
+        <span role="img" aria-label="Bug Bounty">
+          👾 Basin Bug Bounty Program
+        </span>
+      </div>
       <StyledLink>Learn More →</StyledLink>
     </Box>
     <SmallBox href="https://basin.exchange/discord" rel="noopener noreferrer" target="_blank">
@@ -22,6 +30,9 @@ export const Footer = () => (
     <SmallBox href="https://github.com/BeanstalkFarms/Basin" rel="noopener noreferrer" target="_blank">
       <Github width={20} />
     </SmallBox>
+    <SmallBox href="https://app.bean.money" rel="noopener noreferrer" target="_blank">
+      <BeanstalkLogoBlack width={20} />
+    </SmallBox>
   </Container>
 );
 
@@ -63,11 +74,12 @@ const SmallBox = styled.a`
   width: 64px;
   border-left: 1px solid black;
   justify-content: center;
+  align-items: center;
   :hover {
     background-color: #f0fdf4;
   }
 `;
 
 const StyledLink = styled.span`
   text-decoration: underline;
-`
+`;

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

@@ -11,7 +11,7 @@ import CustomToaster from "../TxnToast/CustomToaster";
 import swapIcon from "src/assets/images/navbar/swap.svg";
 import wellsIcon from "src/assets/images/navbar/wells.svg";
 import { LinksNav } from "../Typography";
-import { BurgerMenuIcon, Discord, Github, Logo, Twitter, X } from "../Icons";
+import { BurgerMenuIcon, Discord, Github, Logo, Twitter, X, BeanstalkLogoBlack } from "../Icons";
 import { size } from "src/breakpoints";
 import { useNetwork } from "wagmi";
 import { Title } from "../PageComponents/Title";
@@ -92,19 +92,32 @@ export const Frame: FC<{}> = ({ children }) => {
               <Box href="https://github.com/BeanstalkFarms/Basin" rel="noopener noreferrer" target="_blank">
                 <Github width={20} />
               </Box>
+              <Box href="https://app.bean.money" rel="noopener noreferrer" target="_blank">
+                <BeanstalkLogoBlack width={20} />
+              </Box>
             </MobileLargeNavRow>
-            <MobileNavRow href="https://immunefi.com/bounty/beanstalk/" rel="noopener noreferrer" target="_blank" onClick={() => setMobileMenuOpen(false)}>
+            <MobileNavRow
+              href="https://immunefi.com/bounty/beanstalk/"
+              rel="noopener noreferrer"
+              target="_blank"
+              onClick={() => setMobileMenuOpen(false)}
+            >
               Bug Bounty Program
             </MobileNavRow>
-            <MobileNavRow href="https://docs.basin.exchange/" rel="noopener noreferrer" target="_blank" onClick={() => setMobileMenuOpen(false)}>
+            <MobileNavRow
+              href="https://docs.basin.exchange/"
+              rel="noopener noreferrer"
+              target="_blank"
+              onClick={() => setMobileMenuOpen(false)}
+            >
               Documentation
             </MobileNavRow>
           </MobileNavLinkContainer>
           <MobileConnectContainer>
             <BasinConnectButton />
           </MobileConnectContainer>
         </BurgerMenu>
-        {chain?.unsupported ? <Title title="Unsupported Chain"/> : children}
+        {chain?.unsupported ? <Title title="Unsupported Chain" /> : children}
       </Window>
       <Footer />
     </Container>

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

@@ -45,6 +45,14 @@ export const Github = ({ color = "#000", width, height }: SVGProps) => (
   </svg>
 );
 
+export const BeanstalkLogoBlack = ({ color = "#000", width = 24, height = 24 }: SVGProps) => (
+  <svg width={width} height={height} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="48" height="48" rx="24" fill={color} />
+    <path d="M30.7438 5.05786L16.7279 42.5026C16.7279 42.5026 1.18757 15.9919 30.7438 5.05786Z" fill="white" />
+    <path d="M19.9849 40.1793L29.8344 13.4126C29.8344 13.4126 47.9863 28.0973 19.9849 40.1793Z" fill="white" />
+  </svg>
+);
+
 export const YieldSparkle = ({ color = "#000", width = 16, height = 16 }: SVGProps) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} fill="none">
     <path
@@ -209,9 +217,9 @@ export const RightArrow = ({ color = "#000", width = 24, height = 24 }: SVGProps
   </svg>
 );
 
-export const BurgerMenuIcon = ({ color = "#000", width = 24, height = 24}: SVGProps) => (
-  <svg width={width}height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <line x1="4" y1="7" x2="20" y2="7" stroke={color} strokeWidth="2"/>
-    <line x1="4" y1="15" x2="20" y2="15" stroke={color} strokeWidth="2"/>
+export const BurgerMenuIcon = ({ color = "#000", width = 24, height = 24 }: SVGProps) => (
+  <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <line x1="4" y1="7" x2="20" y2="7" stroke={color} strokeWidth="2" />
+    <line x1="4" y1="15" x2="20" y2="15" stroke={color} strokeWidth="2" />
   </svg>
 );

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

@@ -31,12 +31,7 @@ export type AddLiquidityQuote = {
   estimate: TokenValue;
 };
 
-export const AddLiquidity = ({
-  well,
-  slippage,
-  slippageSettingsClickHandler,
-  handleSlippageValueChange
-}: AddLiquidityProps) => {
+export const AddLiquidity = ({ well, slippage, slippageSettingsClickHandler, handleSlippageValueChange }: AddLiquidityProps) => {
   const { address } = useAccount();
   const [amounts, setAmounts] = useState<LiquidityAmounts>({});
   const inputs = Object.values(amounts);
@@ -54,7 +49,7 @@ export const AddLiquidity = ({
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [useWETH, setUseWETH] = useState(false);
-  
+
   useEffect(() => {
     const run = async () => {
       if (!well?.tokens) return;
@@ -85,15 +80,15 @@ export const AddLiquidity = ({
 
   const indexWETH = useMemo(() => {
     if (!hasWETH || !well.tokens || well.tokens.length === 0) return null;
-    
+
     let index = null;
     for (let i = 0; i < well.tokens.length; i++) {
       if (well.tokens[i].symbol === "WETH") {
         return i;
       }
     }
     return index;
-  }, [hasWETH, well.tokens])
+  }, [hasWETH, well.tokens]);
 
   const useNativeETH = !useWETH && indexWETH && inputs[indexWETH] && inputs[indexWETH].gt(TokenValue.ZERO);
 
@@ -142,9 +137,7 @@ export const AddLiquidity = ({
           `Token ${token.symbol} with amount ${amounts[index].toHuman()} has approval ${tokenHasMinAllowance}`
         );
         if (token.symbol === "WETH" && !useWETH && hasWETH) {
-          Log.module("AddLiquidity").debug(
-            `Using Native ETH, no approval needed!`
-          );
+          Log.module("AddLiquidity").debug(`Using Native ETH, no approval needed!`);
           _tokenAllowance.push(true);
         } else {
           _tokenAllowance.push(tokenHasMinAllowance);
@@ -184,41 +177,45 @@ export const AddLiquidity = ({
 
   const allTokensHaveMinAllowance = useMemo(() => tokenAllowance.filter((a) => a === false).length === 0, [tokenAllowance]);
 
-  const { data: quote } = useQuery(["wells", "quote", "addliquidity", address, amounts, allTokensHaveMinAllowance], async () => {
-    if (!atLeastOneAmountNonZero) {
-      setShowQuoteDetails(false);
-      return null;
-    }
+  const { data: quote } = useQuery(
+    ["wells", "quote", "addliquidity", address, amounts, allTokensHaveMinAllowance],
+    async () => {
+      if (!atLeastOneAmountNonZero) {
+        setShowQuoteDetails(false);
+        return null;
+      }
 
-    try {
-      let quote;
-      let estimate;
-      let gas;
-      quote = await well.addLiquidityQuote(inputs);
-      if (allTokensHaveMinAllowance && tokenAllowance.length) {
-        if (useNativeETH) {
-          const addLiq = new AddLiquidityETH(sdk.wells);
-          estimate = await addLiq.doGasEstimate(well, inputs, quote, address);
+      try {
+        let quote;
+        let estimate;
+        let gas;
+        quote = await well.addLiquidityQuote(inputs);
+        if (allTokensHaveMinAllowance && tokenAllowance.length) {
+          if (useNativeETH) {
+            const addLiq = new AddLiquidityETH(sdk.wells);
+            estimate = await addLiq.doGasEstimate(well, inputs, quote, address);
+          } else {
+            estimate = await well.addLiquidityGasEstimate(inputs, quote, address);
+          }
         } else {
-          estimate = await well.addLiquidityGasEstimate(inputs, quote, address);
+          estimate = TokenValue.ZERO;
         }
-      } else {
-        estimate = TokenValue.ZERO;
+        setShowQuoteDetails(true);
+        gas = estimate;
+        return {
+          quote,
+          gas,
+          estimate
+        };
+      } catch (error: any) {
+        Log.module("addliquidity").error("Error during quote: ", (error as Error).message);
+        return null;
       }
-      setShowQuoteDetails(true);
-      gas = estimate;
-      return {
-        quote,
-        gas,
-        estimate
-      };
-    } catch (error: any) {
-      Log.module("addliquidity").error("Error during quote: ", (error as Error).message);
-      return null;
+    },
+    {
+      enabled: !isSubmitting
     }
-  },{
-    enabled: !isSubmitting
-  });
+  );
 
   const addLiquidityButtonClickHandler = useCallback(async () => {
     if (quote && address) {
@@ -233,7 +230,13 @@ export const AddLiquidity = ({
         let addLiquidityTxn;
         if (useNativeETH) {
           const addLiquidityNativeETH = new AddLiquidityETH(sdk.wells);
-          addLiquidityTxn = await addLiquidityNativeETH.addLiquidity(well, inputs, quoteAmountLessSlippage, address, quote.estimate.mul(1.2));
+          addLiquidityTxn = await addLiquidityNativeETH.addLiquidity(
+            well,
+            inputs,
+            quoteAmountLessSlippage,
+            address,
+            quote.estimate.mul(1.2)
+          );
         } else {
           addLiquidityTxn = await well.addLiquidity(inputs, quoteAmountLessSlippage, address, undefined, {
             gasLimit: quote.estimate.mul(1.2).toBigNumber()
@@ -283,6 +286,26 @@ export const AddLiquidity = ({
     [amounts, prices, well.tokens]
   );
 
+  const toggleBalanceMode = useCallback(() => {
+    const newMode = !balancedMode;
+
+    setBalancedMode(newMode);
+
+    /// if we are toggling balancedMode to false, no need to handle re-balancing.
+    if (!newMode) return;
+
+    if (amounts[0] && amounts[1]) {
+      /// If both are zero, already balanced
+      if (amounts[0].eq(0) && amounts[1].eq(0)) return;
+
+      /// If amount1 is non-zero, re-balance to amount1, otherwise, re-balance to amount2
+      const nonZeroValueIndex = Number(!amounts[0].gt(0));
+
+      /// This fires even though the value is the same, so we need to check if it's actually changed
+      handleBalancedInputChange(nonZeroValueIndex)(amounts[nonZeroValueIndex]);
+    }
+  }, [balancedMode, amounts, handleBalancedInputChange]);
+
   useEffect(() => {
     if (!address) {
       return;
@@ -314,10 +337,12 @@ export const AddLiquidity = ({
     [address, well.tokens, amounts, useNativeETH, well.address, sdk.addresses.DEPOT.MAINNET, checkMinAllowanceForAllTokens]
   );
 
-  const buttonLabel = useMemo(
-    () => (!atLeastOneAmountNonZero ? "Enter Amount(s)" : !hasEnoughBalance ? "Insufficient Balance" : "Add Liquidity"),
-    [atLeastOneAmountNonZero, hasEnoughBalance]
-  );
+  const buttonLabel = useMemo(() => {
+    if (!address) return "Connect Wallet";
+    if (!hasEnoughBalance) return "Insufficient Balance";
+    if (!atLeastOneAmountNonZero) return "Enter Amount(s)";
+    return "Add Liquidity";
+  }, [atLeastOneAmountNonZero, hasEnoughBalance, address]);
 
   return (
     <div>
@@ -338,10 +363,8 @@ export const AddLiquidity = ({
             ))}
           </TokenListContainer>
           <div>
-            <Checkbox label={"Add tokens in balanced proportion"} checked={balancedMode} onClick={() => setBalancedMode(!balancedMode)} />
-            {hasWETH && (
-              <Checkbox label={"Use Wrapped ETH"} checked={useWETH} onClick={() => setUseWETH(!useWETH)} />
-            )}
+            <Checkbox label={"Add tokens in balanced proportion"} checked={balancedMode} onClick={() => toggleBalanceMode()} />
+            {hasWETH && <Checkbox label={"Use Wrapped ETH"} checked={useWETH} onClick={() => setUseWETH(!useWETH)} />}
           </div>
           {showQuoteDetails && (
             <QuoteDetails
@@ -357,7 +380,8 @@ export const AddLiquidity = ({
             />
           )}
           <MediumGapContainer>
-            {well.tokens!.length > 0 && hasEnoughBalance &&
+            {well.tokens!.length > 0 &&
+              hasEnoughBalance &&
               well.tokens!.map((token: Token, index: number) => {
                 if (amounts[index] && amounts[index].gt(TokenValue.ZERO) && tokenAllowance[index] === false) {
                   return (

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

@@ -10,6 +10,7 @@ import { ImageButton } from "../ImageButton";
 import { Tooltip } from "../Tooltip";
 import { BodyXS } from "../Typography";
 import { size } from "src/breakpoints";
+import { displayTokenSymbol } from "src/utils/format";
 
 type QuoteDetailsProps = {
   type: LIQUIDITY_OPERATION_TYPE | "FORWARD_SWAP" | "REVERSE_SWAP";
@@ -96,7 +97,7 @@ const QuoteDetails = ({
 
     if (type === LIQUIDITY_OPERATION_TYPE.ADD) {
       const _quoteValue = quote?.quote as TokenValue;
-      return `${_quoteValue.toHuman("short")} ${wellLpToken!.symbol}`;
+      return `${_quoteValue.toHuman("short")} ${displayTokenSymbol(wellLpToken!)}`;
     }
 
     if (removeLiquidityMode === REMOVE_LIQUIDITY_MODE.Custom) {

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

@@ -20,6 +20,7 @@ import { getPrice } from "src/utils/price/usePrice";
 import { useWellReserves } from "src/wells/useWellReserves";
 import { Checkbox } from "../Checkbox";
 import { size } from "src/breakpoints";
+import { displayTokenSymbol } from "src/utils/format";
 
 type RemoveLiquidityProps = {
   well: Well;
@@ -125,7 +126,6 @@ export const RemoveLiquidity = ({ well, slippage, slippageSettingsClickHandler,
       });
       let removeLiquidityTxn;
       try {
-
         if (removeLiquidityMode === REMOVE_LIQUIDITY_MODE.OneToken) {
           if (!oneTokenQuote) {
             return;
@@ -423,7 +423,7 @@ export const RemoveLiquidity = ({ well, slippage, slippageSettingsClickHandler,
               <ApproveTokenButton
                 disabled={approveButtonDisabled}
                 loading={false}
-                label={`Approve ${wellLpToken.symbol}`}
+                label={`Approve ${displayTokenSymbol(wellLpToken)}`}
                 onClick={approveTokenButtonClickHandler}
               />
             </ButtonWrapper>