feat: update affected UIs

BeanstalkFarms · Jun 12, 2024 · 3cd46b3 · 3cd46b3
1 parent 4105729
commit 3cd46b3
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 24 deletions.
diff --git a/projects/dex-ui/src/components/Well/OtherSection.tsx b/projects/dex-ui/src/components/Well/OtherSection.tsx
@@ -7,19 +7,20 @@ import { size } from "src/breakpoints";
 import { displayTokenSymbol } from "src/utils/format";
 import { Token } from "@beanstalk/sdk";
 import { Skeleton } from "../Skeleton";
-import { useWellImplementations } from "src/wells/useWellImplementations";
 import { useWhitelistedWellComponents } from "../Create/useWhitelistedWellComponents";
+import { useWellImplementations } from "src/wells/useWellImplementations";
 
 type Props = { well: Well };
 
 const OtherSectionContent: FC<Props> = ({ well }) => {
   const { data: implementations } = useWellImplementations();
-  const [items, setItems] = useState<{ name: string; address: string }[]>([]);
-  const [wellFunctionName, setWellFunctionName] = useState<string>("");
   const {
     lookup: { pump: pumpLookup }
   } = useWhitelistedWellComponents();
 
+  const [items, setItems] = useState<{ name: string; address: string }[]>([]);
+  const [wellFunctionName, setWellFunctionName] = useState<string>("");
+
   const implementationAddress = implementations?.[well.address];
 
   const wellTokenDetail = well.tokens
@@ -38,10 +39,10 @@ const OtherSectionContent: FC<Props> = ({ well }) => {
 
   useEffect(() => {
     const data: typeof items = [];
-
     well.pumps?.forEach((pump) => {
-      if (pump.address.toLowerCase() in pumpLookup) {
-        const pumpInfo = pumpLookup[pump.address.toLowerCase()].component;
+      const pumpAddress = pump.address.toLowerCase();
+      if (pumpAddress in pumpLookup) {
+        const pumpInfo = pumpLookup[pumpAddress].component;
         data.push({
           name: pumpInfo?.fullName || pumpInfo.name,
           address: pump.address
@@ -53,24 +54,19 @@ const OtherSectionContent: FC<Props> = ({ well }) => {
         });
       }
     });
-
     data.push({
       name: wellFunctionName ?? "Well Function",
       address: well.wellFunction?.address || "--"
     });
-
     data.push({
       name: "Well Implementation",
       address: implementationAddress || "--"
     });
-
     data.push({
       name: "Aquifer",
       address: well.aquifer?.address || "--"
     });
 
-    console.log("items: ", data);
-
     setItems(data);
   }, [
     implementationAddress,

diff --git a/projects/dex-ui/src/components/Well/Table/WellDetailRow.tsx b/projects/dex-ui/src/components/Well/Table/WellDetailRow.tsx
@@ -66,7 +66,7 @@ export const WellDetailRow: FC<{
         <Amount>${liquidity ? liquidity.toHuman("short") : "-.--"}</Amount>
       </DesktopContainer>
       <DesktopContainer align="right">
-        <Amount>${price ? price.toHuman("short") : "-.--"}</Amount>
+        <Amount>${price && price.gt(0) ? price.toHuman("short") : "-.--"}</Amount>
       </DesktopContainer>
       <DesktopContainer align="right">
         <Amount>${volume ? volume.toHuman("short") : "-.--"}</Amount>
@@ -163,6 +163,13 @@ const DesktopContainer = styled(Td)`
       display: none;
     }
   }
+
+  :nth-child(3) {
+    @media (max-width: ${size.tablet}) {
+      display: none;
+    }
+  }
+
   @media (max-width: ${size.mobile}) {
     display: none;
   }
@@ -215,7 +222,7 @@ const Amount = styled.div`
 const Reserves = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content flex-end;
+  justify-content: flex-end;
   align-items: center;
   gap: 4px;
   flex: 1;

diff --git a/projects/dex-ui/src/components/Well/WellYieldWithTooltip.tsx b/projects/dex-ui/src/components/Well/WellYieldWithTooltip.tsx
@@ -17,9 +17,14 @@ type Props = {
   apy?: TokenValue;
   loading?: boolean;
   tooltipProps?: Partial<Pick<TooltipProps, "offsetX" | "offsetY" | "side">>;
+  returnNullOnNoAPY?: boolean;
 };
 
-export const WellYieldWithTooltip: React.FC<Props> = ({ tooltipProps, well }) => {
+export const WellYieldWithTooltip: React.FC<Props> = ({ 
+  tooltipProps, 
+  well,
+  returnNullOnNoAPY = false,
+}) => {
   const sdk = useSdk();
 
   const bean = sdk.tokens.BEAN;
@@ -37,6 +42,7 @@ export const WellYieldWithTooltip: React.FC<Props> = ({ tooltipProps, well }) =>
   const tooltipWidth = isMobile ? 250 : 360;
 
   if (!apy) {
+    if (returnNullOnNoAPY) return null;
     return <>{"-"}</>;
   }
 

diff --git a/projects/dex-ui/src/pages/Well.tsx b/projects/dex-ui/src/pages/Well.tsx
@@ -66,7 +66,7 @@ export const Well = () => {
       }
 
       if (well.wellFunction) {
-        const _wellName = await well.wellFunction.contract.name();
+        const _wellName = await well.wellFunction.getName();
         setWellFunctionName(_wellName);
       }
     };
@@ -75,7 +75,9 @@ export const Well = () => {
   }, [sdk, well]);
 
   const title = (well?.tokens ?? []).map((t) => t.symbol).join("/");
-  const logos: ReactNode[] = (well?.tokens || []).map((token) => <TokenLogo token={token} size={48} mobileSize={24} key={token.symbol} />);
+  const logos: ReactNode[] = (well?.tokens || []).map((token) => (
+    <TokenLogo token={token} size={48} mobileSize={24} key={token.symbol} />
+  ));
 
   const reserves = (well?.reserves ?? []).map((amount, i) => {
     const token = well!.tokens![i];
@@ -88,18 +90,26 @@ export const Well = () => {
       percentage: TokenValue.ZERO
     };
   });
-  const totalUSD = reserves.reduce((total, r) => total.add(r.dollarAmount ?? TokenValue.ZERO), TokenValue.ZERO);
+  const totalUSD = reserves.reduce(
+    (total, r) => total.add(r.dollarAmount ?? TokenValue.ZERO),
+    TokenValue.ZERO
+  );
 
   reserves.forEach((reserve) => {
-    reserve.percentage = reserve.dollarAmount && totalUSD.gt(TokenValue.ZERO) ? reserve.dollarAmount.div(totalUSD) : TokenValue.ZERO;
+    reserve.percentage =
+      reserve.dollarAmount && totalUSD.gt(TokenValue.ZERO)
+        ? reserve.dollarAmount.div(totalUSD)
+        : TokenValue.ZERO;
   });
 
   const twaReserves = useMemo(() => getTWAReservesWithWell(well), [well, getTWAReservesWithWell]);
 
   const goLiquidity = () => navigate(`./liquidity`);
 
   const goSwap = () =>
-    well && well.tokens ? navigate(`../swap?fromToken=${well.tokens[0].symbol}&toToken=${well.tokens[1].symbol}`) : null;
+    well && well.tokens
+      ? navigate(`../swap?fromToken=${well.tokens[0].symbol}&toToken=${well.tokens[1].symbol}`)
+      : null;
 
   // Code below detects if the component with the Add/Remove Liq + Swap buttons is sticky
   const [isSticky, setIsSticky] = useState(false);
@@ -139,7 +149,12 @@ export const Well = () => {
   return (
     <Page>
       <ContentWrapper>
-        <StyledTitle title={title} parent={{ title: "Liquidity", path: "/wells" }} fontWeight="550" center />
+        <StyledTitle
+          title={title}
+          parent={{ title: "Liquidity", path: "/wells" }}
+          fontWeight="550"
+          center
+        />
 
         {/*
          *Header
@@ -160,6 +175,7 @@ export const Well = () => {
                       offsetY: 0,
                       side: "top"
                     }}
+                    returnNullOnNoAPY={true}
                   />
                 </div>
               </Header>
@@ -193,12 +209,26 @@ export const Well = () => {
         <ActivityOtherButtons gap={24} mobileGap={"0px"}>
           <LoadingItem loading={loading} onLoading={<SkeletonButtonsRow />}>
             <Item stretch>
-              <TabButton onClick={(e) => showTab(e, 0)} active={tab === 0} stretch justify bold hover>
+              <TabButton
+                onClick={(e) => showTab(e, 0)}
+                active={tab === 0}
+                stretch
+                justify
+                bold
+                hover
+              >
                 Activity
               </TabButton>
             </Item>
             <Item stretch>
-              <TabButton onClick={(e) => showTab(e, 1)} active={tab === 1} stretch justify bold hover>
+              <TabButton
+                onClick={(e) => showTab(e, 1)}
+                active={tab === 1}
+                stretch
+                justify
+                bold
+                hover
+              >
                 Contract Addresses
               </TabButton>
             </Item>
@@ -209,7 +239,14 @@ export const Well = () => {
          * Well History & Contract Info Tables
          */}
         <BottomContainer>
-          {tab === 0 && <WellHistory well={well} tokenPrices={prices} reservesUSD={totalUSD} loading={loading} />}
+          {tab === 0 && (
+            <WellHistory
+              well={well}
+              tokenPrices={prices}
+              reservesUSD={totalUSD}
+              loading={loading}
+            />
+          )}
           {tab === 1 && <OtherSection well={well} loading={loading} />}
         </BottomContainer>
 

diff --git a/projects/dex-ui/src/pages/Wells.tsx b/projects/dex-ui/src/pages/Wells.tsx
@@ -206,14 +206,15 @@ const MobileHeader = styled(Th)`
 
 const DesktopHeader = styled(Th)`
   :nth-child(1) {
-    width: 12em
+    width: 10em
   }
   :nth-child(2) {
     width: 12em
   }
   :nth-child(3) {
     width: 12em
   }
+
   :nth-child(5) {
     @media (max-width: ${size.desktop}) {
       display: none;
@@ -224,6 +225,12 @@ const DesktopHeader = styled(Th)`
       display: none;
     }
   }
+
+  :nth-child(3) {
+    @media (max-width: ${size.tablet}) {
+      display: none;
+    }
+  }
   @media (max-width: ${size.mobile}) {
     display: none;
   }