Merge branch 'master' into grown-stalk-per-bdv

BeanstalkFarms · Jul 11, 2023 · 0c3d362 · 0c3d362
2 parents 4e17136 + cd116fd
commit 0c3d362
Show file tree

Hide file tree

Showing 61 changed files with 1,201 additions and 630 deletions.
diff --git a/README.md b/README.md
@@ -15,8 +15,8 @@
 
 [![Discord][discord-badge]][discord-url]
 
-Code Version: `2.3.1` <br>
-Whitepaper Version: `2.3.0`
+Code Version: `2.4.1` <br>
+Whitepaper Version: `2.4.0`
 
 ## About
 

diff --git a/beanstalk.pdf b/beanstalk.pdf
diff --git a/projects/dex-ui/netlify.toml b/projects/dex-ui/netlify.toml
@@ -0,0 +1,9 @@
+[[redirects]]
+  from = "/discord"
+  to = "https://discord.gg/3QcnNe6ZBD"
+  status = 308
+
+[[redirects]]
+  from = "/*"
+  to = "index.html"
+  status = 200
diff --git a/projects/dex-ui/package.json b/projects/dex-ui/package.json
@@ -27,6 +27,7 @@
     "connectkit": "1.2.1",
     "ethers": "^5",
     "graphql-request": "5.2.0",
+    "lightweight-charts": "4.0.1",
     "loadash": "1.0.0",
     "prettier": "2.7.1",
     "react": "^18.2.0",

diff --git a/projects/dex-ui/public/_redirects b/projects/dex-ui/public/_redirects
diff --git a/projects/dex-ui/src/components/App/App.tsx b/projects/dex-ui/src/components/App/App.tsx
@@ -12,8 +12,8 @@ import { Settings } from "src/settings";
 import { Liquidity } from "src/pages/Liquidity";
 
 export const App = ({}) => {
-  const isNotProd = !Settings.PRODUCTION
-  
+  const isNotProd = !Settings.PRODUCTION;
+
   return (
     <Frame>
       <Routes>

diff --git a/projects/dex-ui/src/components/App/Wrapper.tsx b/projects/dex-ui/src/components/App/Wrapper.tsx
@@ -27,7 +27,7 @@ export const Wrapper: FC<{}> = ({ children }) => {
           }}
           customTheme={{
             "--ck-font-family": "PPMori",
-            "--ck-modal-box-shadow": "0px 0px 0px 2px black",
+            "--ck-modal-box-shadow": "0px 0px 0px 2px black"
           }}
         >
           <QueryClientProvider client={queryClient}>

diff --git a/projects/dex-ui/src/components/Checkbox.tsx b/projects/dex-ui/src/components/Checkbox.tsx
@@ -13,17 +13,17 @@ type Props = {
 export const Checkbox: FC<Props> = ({ label, checked = false, mode, checkboxColor, onClick = () => {} }) => {
   return (
     <StyledCheckbox>
-      <HiddenCheckbox type="checkbox" role={"checkbox"} checked={checked} readOnly/>
+      <HiddenCheckbox type="checkbox" role={"checkbox"} checked={checked} readOnly />
       <HoverContainer>
         <StyledCheckboxContainer checked={checked} onClick={onClick} mode={mode} checkboxColor={checkboxColor}>
           <HoverCheckmark checked={checked} checkboxColor={checkboxColor} />
           <Checkmark checked={checked} checkboxColor={checkboxColor} />
         </StyledCheckboxContainer>
-        {label &&
-        <CheckboxText checked={checked} onClick={onClick}>
-          {label}
-        </CheckboxText>
-        }
+        {label && (
+          <CheckboxText checked={checked} onClick={onClick}>
+            {label}
+          </CheckboxText>
+        )}
       </HoverContainer>
     </StyledCheckbox>
   );
@@ -55,25 +55,25 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
 `;
 
 const StyledCheckboxContainer = styled.div<CheckboxProps>`
-  border: 1px solid ${(props) => (props.checkboxColor && props.checked ? props.checkboxColor : '#000')};
+  border: 1px solid ${(props) => (props.checkboxColor && props.checked ? props.checkboxColor : "#000")};
   border-radius: 1em;
   width: 16px;
   height: 16px;
-  position: ${(props) => (props.mode === "checkOnly" ? 'relative' : 'absolute')};
-  top: ${(props) => (props.mode === "checkOnly" ? '0px' : '2px')};
+  position: ${(props) => (props.mode === "checkOnly" ? "relative" : "absolute")};
+  top: ${(props) => (props.mode === "checkOnly" ? "0px" : "2px")};
   cursor: pointer;
 `;
 
 const Checkmark = styled.div<CheckboxProps>`
-  border: 1px solid ${(props) => (props.checkboxColor ? props.checkboxColor : '#FFF')};
+  border: 1px solid ${(props) => (props.checkboxColor ? props.checkboxColor : "#FFF")};
   border-radius: 1em;
   width: 8px;
   height: 8px;
-  position: ${(props) => (props.mode === "checkOnly" ? 'relative' : 'absolute')};
+  position: ${(props) => (props.mode === "checkOnly" ? "relative" : "absolute")};
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: ${(props) => (props.checkboxColor ? props.checkboxColor : '#FFF')};
+  background: ${(props) => (props.checkboxColor ? props.checkboxColor : "#FFF")};
   filter: ${(props) => (props.checkboxColor ? "brightness(100%);" : "brightness(0%);")}
   opacity: ${(props) => (props.checked ? "1" : "0")};
   z-index: 2;
@@ -84,14 +84,14 @@ const HoverCheckmark = styled.div<CheckboxProps>`
   border-radius: 1em;
   width: 8px;
   height: 8px;
-  position: ${(props) => (props.mode === "checkOnly" ? 'relative' : 'absolute')};
+  position: ${(props) => (props.mode === "checkOnly" ? "relative" : "absolute")};
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: transparent;
   ${HoverContainer}:hover & {
-    border: 1px solid ${(props) => (props.checkboxColor ? props.checkboxColor : '#FFF')};
-    background: ${(props) => (props.checkboxColor ? props.checkboxColor : '#FFF')};
+    border: 1px solid ${(props) => (props.checkboxColor ? props.checkboxColor : "#FFF")};
+    background: ${(props) => (props.checkboxColor ? props.checkboxColor : "#FFF")};
     filter: brightness(50%);
   }
   z-index: 1;

diff --git a/projects/dex-ui/src/components/ExpandBox.tsx b/projects/dex-ui/src/components/ExpandBox.tsx
@@ -35,7 +35,14 @@ export const ExpandBox: FC<Props> & Composition = ({ width = 432, children }) =>
     <Container width={width} open={open} onClick={toggle} data-trace="true">
       <Header id="header" open={open}>
         {header}
-        <ImageButton component={ChevronDown} size={12} rotate={open ? "180" : "0"} onClick={toggle} padding="0px" alt="Click to expand this box and learn how to earn yield" />
+        <ImageButton
+          component={ChevronDown}
+          size={12}
+          rotate={open ? "180" : "0"}
+          onClick={toggle}
+          padding="0px"
+          alt="Click to expand this box and learn how to earn yield"
+        />
       </Header>
 
       {open && body}
@@ -49,17 +56,17 @@ const Container = styled.div<Props>`
   border-top: 0.5px solid #9ca3af;
   border-left: 0.5px solid #9ca3af;
   border-right: 0.5px solid #9ca3af;
-  border-bottom: ${(p) => p.open ? '0.5px' : '0px'} solid #9caeaf;
+  border-bottom: ${(p) => (p.open ? "0.5px" : "0px")} solid #9caeaf;
   width: ${(p) => p.width}px;
   min-width: ${(p) => p.width}px;
   cursor: pointer;
   :hover {
     border-top: 0.5px solid #46b955;
     border-left: 0.5px solid #46b955;
     border-right: 0.5px solid #46b955;
-    border-bottom: ${(p) => p.open ? '0.5px' : '0px'} solid #46b955;
+    border-bottom: ${(p) => (p.open ? "0.5px" : "0px")} solid #46b955;
     outline: 0.5px solid #46b955;
-  };
+  }
 `;
 const Header = styled.div<Props>`
   background-color: #f9f8f6;
@@ -70,8 +77,8 @@ const Header = styled.div<Props>`
   justify-content: space-between;
   align-items: center;
   :hover {
-    border-bottom: 0.5px solid ${(p) => !p.open ? '#46b955' : '#9ca3af'};
-  };
+    border-bottom: 0.5px solid ${(p) => (!p.open ? "#46b955" : "#9ca3af")};
+  }
 `;
 const Body = styled.div`
   display: flex;

diff --git a/projects/dex-ui/src/components/Frame/Footer.tsx b/projects/dex-ui/src/components/Frame/Footer.tsx
@@ -4,7 +4,9 @@ import { Discord, Github, Twitter } from "../Icons";
 
 export const Footer = () => (
   <Container>
-    <Box href="https://github.com/BeanstalkFarms/Beanstalk/tree/dex-prod/projects/dex-ui" rel="noopener noreferrer" target="_blank">We are open source. Contribute to this site →</Box>
+    <Box href="https://github.com/BeanstalkFarms/Beanstalk/tree/dex-prod/projects/dex-ui" rel="noopener noreferrer" target="_blank">
+      We are open source. Contribute to this site →
+    </Box>
     <Box>Join the discussion</Box>
     <SmallBox href="https://basin.exchange/discord" rel="noopener noreferrer" target="_blank">
       <Discord width={20} />

diff --git a/projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx b/projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx
@@ -31,7 +31,13 @@ export type AddLiquidityQuote = {
   estimate: TokenValue;
 };
 
-export const AddLiquidity = ({ well, txnCompleteCallback, slippage, slippageSettingsClickHandler, handleSlippageValueChange }: AddLiquidityProps) => {
+export const AddLiquidity = ({
+  well,
+  txnCompleteCallback,
+  slippage,
+  slippageSettingsClickHandler,
+  handleSlippageValueChange
+}: AddLiquidityProps) => {
   const { address } = useAccount();
   const [amounts, setAmounts] = useState<LiquidityAmounts>({});
   const [balancedMode, setBalancedMode] = useState(true);
@@ -41,7 +47,7 @@ export const AddLiquidity = ({ well, txnCompleteCallback, slippage, slippageSett
   const [prices, setPrices] = useState<(TokenValue | null)[]>([]);
 
   const sdk = useSdk();
-  const { reserves: wellReserves, refetch: refetchWellReserves }  = useWellReserves(well);
+  const { reserves: wellReserves, refetch: refetchWellReserves } = useWellReserves(well);
 
   useEffect(() => {
     const run = async () => {
@@ -64,7 +70,7 @@ export const AddLiquidity = ({ well, txnCompleteCallback, slippage, slippageSett
     const nonZeroValues = Object.values(amounts).filter((amount) => amount.value.gt("0")).length;
 
     return nonZeroValues !== 0;
-  }, [amounts, well.tokens])
+  }, [amounts, well.tokens]);
 
   const checkMinAllowanceForAllTokens = useCallback(async () => {
     if (!address) {
@@ -115,19 +121,18 @@ export const AddLiquidity = ({ well, txnCompleteCallback, slippage, slippageSett
   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;
     }
 
     try {
       const quote = await well.addLiquidityQuote(Object.values(amounts));
-      let estimate
+      let estimate;
       if (allTokensHaveMinAllowance) {
         estimate = await well.addLiquidityGasEstimate(Object.values(amounts), quote, address);
       } else {
-        estimate = TokenValue.ZERO
+        estimate = TokenValue.ZERO;
       }
       setShowQuoteDetails(true);
       return {
@@ -146,7 +151,7 @@ export const AddLiquidity = ({ well, txnCompleteCallback, slippage, slippageSett
         loading: "Adding liquidity...",
         error: "Approval failed",
         success: "Liquidity added"
-      }); 
+      });
       try {
         const quoteAmountLessSlippage = quote.quote.subSlippage(slippage);
         const addLiquidityTxn = await well.addLiquidity(Object.values(amounts), quoteAmountLessSlippage, address);
@@ -156,7 +161,7 @@ export const AddLiquidity = ({ well, txnCompleteCallback, slippage, slippageSett
         resetAmounts();
         checkMinAllowanceForAllTokens();
         refetchWellReserves();
-        txnCompleteCallback(); 
+        txnCompleteCallback();
       } catch (error) {
         Log.module("AddLiquidity").error("Error adding liquidity: ", (error as Error).message);
         toast.error(error);
@@ -176,18 +181,18 @@ export const AddLiquidity = ({ well, txnCompleteCallback, slippage, slippageSett
       if (!prices[index]) {
         setAmounts({ ...amounts, [index]: amount });
         return;
-      };
+      }
       const amountInUSD = amount.mul(prices[index] || TokenValue.ZERO);
       let _amounts = [];
       for (let i = 0; i < prices.length; i++) {
         if (i !== index) {
-          const conversion = prices[i] && prices[i]?.gt(TokenValue.ZERO) ? amountInUSD.div(prices[i]!) : TokenValue.ZERO
+          const conversion = prices[i] && prices[i]?.gt(TokenValue.ZERO) ? amountInUSD.div(prices[i]!) : TokenValue.ZERO;
           const conversionFormatted = TokenValue.fromHuman(conversion.humanString, well.tokens![i].decimals);
           _amounts[i] = conversionFormatted;
         } else {
           _amounts[i] = amount;
-        };
-      };
+        }
+      }
       setAmounts(Object.assign({}, _amounts));
     },
     [amounts, prices, well.tokens]
@@ -238,38 +243,38 @@ export const AddLiquidity = ({ well, txnCompleteCallback, slippage, slippageSett
     <div>
       {well.tokens!.length > 0 && (
         <LargeGapContainer>
-            <TokenListContainer>
-              {well.tokens?.map((token: Token, index: number) => (
-                <TokenInput
-                  key={`input${index}`}
-                  id={`input${index}`}
-                  label={`Input amount in ${token.symbol}`}
-                  token={well.tokens![index]}
-                  amount={amounts[index]}
-                  onAmountChange={balancedMode ? handleBalancedInputChange(index) : handleImbalancedInputChange(index)}
-                  canChangeToken={false}
-                  loading={false}
-                />
-              ))}
-            </TokenListContainer>
-            <Checkbox label={"Add tokens in balanced proportion"} checked={balancedMode} onClick={() => setBalancedMode(!balancedMode)} />
-            {showQuoteDetails && (
-              <QuoteDetails
-                type={LIQUIDITY_OPERATION_TYPE.ADD}
-                quote={quote}
-                inputs={Object.values(amounts)}
-                wellLpToken={well.lpToken}
-                slippageSettingsClickHandler={slippageSettingsClickHandler}
-                handleSlippageValueChange={handleSlippageValueChange}
-                slippage={slippage}
-                tokenPrices={prices}
-                tokenReserves={wellReserves}
+          <TokenListContainer>
+            {well.tokens?.map((token: Token, index: number) => (
+              <TokenInput
+                key={`input${index}`}
+                id={`input${index}`}
+                label={`Input amount in ${token.symbol}`}
+                token={well.tokens![index]}
+                amount={amounts[index]}
+                onAmountChange={balancedMode ? handleBalancedInputChange(index) : handleImbalancedInputChange(index)}
+                canChangeToken={false}
+                loading={false}
               />
-            )}
-            <MediumGapContainer>
+            ))}
+          </TokenListContainer>
+          <Checkbox label={"Add tokens in balanced proportion"} checked={balancedMode} onClick={() => setBalancedMode(!balancedMode)} />
+          {showQuoteDetails && (
+            <QuoteDetails
+              type={LIQUIDITY_OPERATION_TYPE.ADD}
+              quote={quote}
+              inputs={Object.values(amounts)}
+              wellLpToken={well.lpToken}
+              slippageSettingsClickHandler={slippageSettingsClickHandler}
+              handleSlippageValueChange={handleSlippageValueChange}
+              slippage={slippage}
+              tokenPrices={prices}
+              tokenReserves={wellReserves}
+            />
+          )}
+          <MediumGapContainer>
             {well.tokens!.length > 0 &&
               well.tokens!.map((token: Token, index: number) => {
-                if (amounts[index] && amounts[index].gt(TokenValue.ZERO) && tokenAllowance[index] === false ) {
+                if (amounts[index] && amounts[index].gt(TokenValue.ZERO) && tokenAllowance[index] === false) {
                   return (
                     <ButtonWrapper key={`approvebuttonwrapper${index}`}>
                       <ApproveTokenButton
@@ -292,7 +297,7 @@ export const AddLiquidity = ({ well, txnCompleteCallback, slippage, slippageSett
                 onClick={addLiquidityButtonClickHandler}
               />
             </ButtonWrapper>
-            </MediumGapContainer>
+          </MediumGapContainer>
         </LargeGapContainer>
       )}
     </div>
@@ -303,13 +308,13 @@ const LargeGapContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
-`
+`;
 
 const MediumGapContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
-`
+`;
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -328,4 +333,4 @@ const TokenListContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
-`;
+`;