Dex: Well page updates - DO NOT MERGE BEFORE BIP37

projects/dex-ui/src/components/Well/LearnYield.tsx

@@ -11,15 +11,15 @@ function YieldDetails() {
   return (
     <TextContainer>
       <div>
-        The BEAN:WETH Well has <strong>zero</strong> trading fees!
-      </div>
-      <div>
-        If <span><StyledLink href="https://app.bean.money/#/governance">BIP-37</StyledLink></span> passes, Beanstalk will 
-        issue Stalk and Seeds to users who Deposit LP tokens in the Silo.
-      </div>
-      <div>
-        Stalkholders receive Bean seigniorage. Check out 
-        the <span><StyledLink href="https://docs.bean.money/almanac/farm/silo">Beanstalk docs.</StyledLink></span>
+        Liquidity providers can earn yield by depositing BEANETH LP in the Beanstalk Silo. You can add liquidity and deposit the LP token in
+        the Silo in a single transaction on the{" "}
+        <StyledLink
+          href="https://app.bean.money/#/silo/0xbea0e11282e2bb5893bece110cf199501e872bad"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Beanstalk UI
+        </StyledLink>
       </div>
     </TextContainer>
   );

projects/dex-ui/src/components/Well/LiquidityBox.tsx

@@ -7,13 +7,15 @@ import { FC } from "src/types";
 import { Token } from "@beanstalk/sdk";
 import { useTokenBalance } from "src/tokens/useTokenBalance";
 import { size } from "src/breakpoints";
+import { useSiloBalance } from "src/tokens/useSiloBalance";
 
 type Props = {
   lpToken: Token;
 };
 
 export const LiquidityBox: FC<Props> = ({ lpToken }) => {
   const { data: balance } = useTokenBalance(lpToken);
+  const { data: siloBalance } = useSiloBalance(lpToken);
 
   return (
     <InfoBox>
@@ -33,12 +35,9 @@ export const LiquidityBox: FC<Props> = ({ lpToken }) => {
         </InfoBox.Row>
         <InfoBox.Row>
           <InfoBox.Key>Deposited in the Silo</InfoBox.Key>
-          <InfoBox.Value>-</InfoBox.Value>
+          <InfoBox.Value>{siloBalance ? siloBalance.toHuman("short") : "-"}</InfoBox.Value>
         </InfoBox.Row>
       </InfoBox.Body>
-      {/* <InfoBox.Footer>
-        <FooterAmount>USD Total: $69,420</FooterAmount>
-      </InfoBox.Footer> */}
     </InfoBox>
   );
 };

projects/dex-ui/src/tokens/useSiloBalance.tsx

@@ -0,0 +1,40 @@
+import { DataSource, Token, TokenValue } from "@beanstalk/sdk";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import useSdk from "src/utils/sdk/useSdk";
+import { useAccount } from "wagmi";
+
+export const useSiloBalance = (token: Token) => {
+  const { address } = useAccount();
+  const sdk = useSdk();
+  const queryClient = useQueryClient();
+
+  const key = ["silo", "balance", sdk, token.symbol];
+
+  const { data, isLoading, error, refetch, isFetching } = useQuery<TokenValue, Error>(
+    key,
+    async () => {
+      let balance: TokenValue;
+      if (!address) {
+        balance = TokenValue.ZERO;
+      } else {
+        const sdkLPToken = sdk.tokens.findByAddress(token.address);
+        const result = await sdk.silo.getBalance(sdkLPToken!, address, {source: DataSource.LEDGER});
+        balance = result.amount;
+      }
+      return balance;
+    },
+    /**
+     * Token balances are cached for 30 seconds, refetch value every 30 seconds,
+     * when the window is hidden/not visible, stop background refresh,
+     * when the window gains focus, force a refresh even if cache is not stale     *
+     */
+    {
+      staleTime: 1000 * 30,
+      refetchInterval: 1000 * 30,
+      refetchIntervalInBackground: false,
+      refetchOnWindowFocus: "always"
+    }
+  );
+
+  return { data, isLoading, error, refetch, isFetching };
+};