Merge branch 'enable-stake-button' into merged-lp-stake

.eslintrc.js

@@ -64,6 +64,7 @@ module.exports = {
     "react/jsx-no-bind": "off",
     "jsx-a11y/no-noninteractive-tabindex": "off",
     "@typescript-eslint/no-explicit-any": ["off"],
+    "react/destructuring-assignment": ["off"],
   },
   settings: {
     react: {

README.md

@@ -6,8 +6,8 @@ Update for deployment.
 
 To run this project locally:
 
-1. Prerequisites: Make sure you've installed [Node.js] ≥ 12
-2. Install dependencies: `yarn install`.
+1. Prerequisites: Make sure you've installed [Node.js] ≥ 12.
+2. Install dependencies: `yarn install`
 3. Run the local development server: `yarn dev` (see `package.json` for a
    full list of `scripts` you can run with `yarn`)
 

api/get-farm.ts

@@ -16,5 +16,20 @@ const getFarm = async (farmId: "NetTvl"): Promise<NetTvlFarm> => {
     throw new Error("getFarm");
   }
 };
+export const getAllFarms = async (): Promise<[Record<string, string>, NetTvlFarm][]> => {
+  const { view, logicContract } = await getBurrow();
+
+  try {
+    const farms = (await view(
+      logicContract,
+      ViewMethodsLogic[ViewMethodsLogic.get_asset_farms_paged],
+    )) as any[];
+
+    return farms;
+  } catch (e) {
+    console.error(e);
+    throw new Error("getAllFarms");
+  }
+};
 
 export default getFarm;

components/ContentBox/ContentBox.tsx

@@ -14,6 +14,25 @@ export const ContentBox = ({ children, style, className, padding }: BoxProps) =>
     </StyledBox>
   );
 };
+export const ContentTipBox = ({ children, style, className, padding }: BoxProps) => {
+  return (
+    <StyledTipBox style={style} className={className} padding={padding}>
+      {children}
+    </StyledTipBox>
+  );
+};
+
+const StyledTipBox = styled.div<{ padding?: string }>`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+  border-radius: 6px;
+  border: 1px solid #4f5178;
+  background: #2e304b;
+  font-size: 12px;
+  padding: ${(p) => p.padding ?? "20px 30px"};
+`;
 
 const StyledBox = styled.div<{ padding?: string }>`
   position: relative;

components/CustomModal/CustomModal.tsx

@@ -83,11 +83,6 @@ const StyledWrapper = styled.div`
       }
     }
   }
-
-  //input {
-  //  border: 1px solid #40435a;
-  //  background: #282a42;
-  //}
 `;
 
 export default CustomModal;

components/Header/menuData.tsx

@@ -16,4 +16,4 @@ export const mainMenuList: Imenu[] = [
   { title: "Dashboard", link: "/dashboard", allLinks: ["/dashboard"], icon: <DashboardIcon /> },
   { title: "Staking", link: "/staking", allLinks: ["/staking"], icon: <StakeIcon /> },
 ];
-export const helpMenu: Imenu = { title: "Help", link: "https://docs.burrow.finance/" };
+export const helpMenu: Imenu = { title: "Docs", link: "https://docs.burrow.finance/" };

components/Modal/Action.tsx

@@ -12,26 +12,19 @@ import { withdraw } from "../../store/actions/withdraw";
 import { adjustCollateral } from "../../store/actions/adjustCollateral";
 import { useAppSelector, useAppDispatch } from "../../redux/hooks";
 import { getSelectedValues, getAssetData, getConfig } from "../../redux/appSelectors";
-import { trackActionButton, trackUseAsCollateral } from "../../utils/telemetry";
+import { trackActionButton } from "../../utils/telemetry";
 import { useDegenMode } from "../../hooks/hooks";
-import { SubmitButton, AlertWarning } from "./components";
+import { SubmitButton } from "./components";
 import { expandToken } from "../../store";
-import { getContractConfig } from "../../store/helper";
 
 export default function Action({ maxBorrowAmount, healthFactor, poolAsset }) {
   const [loading, setLoading] = useState(false);
-  const [enable_pyth_oracle, set_enable_pyth_oracle] = useState<boolean>(false);
   const { amount, useAsCollateral, isMax } = useAppSelector(getSelectedValues);
-  // const { enable_pyth_oracle } = useAppSelector(getConfig);
+  const { enable_pyth_oracle } = useAppSelector(getConfig);
   const dispatch = useAppDispatch();
   const asset = useAppSelector(getAssetData);
   const { action = "Deposit", tokenId, borrowApy, price, borrowed } = asset;
   const { isRepayFromDeposits } = useDegenMode();
-  useEffect(() => {
-    getContractConfig().then((c) => {
-      set_enable_pyth_oracle(c.enable_pyth_oracle);
-    });
-  }, []);
   const { available, canUseAsCollateral, extraDecimals, collateral, disabled, decimals } =
     getModalData({
       ...asset,

components/Modal/RangeSlider.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from "react";
 import { twMerge } from "tailwind-merge";
 import Decimal from "decimal.js";
+import ReactSlider from "react-slider";
 import { toPrecision } from "../../utils/number";
 
 // temp
@@ -133,3 +134,42 @@ export default function RangeSlider(props: any) {
     </div>
   );
 }
+
+export function MonthSlider({ min, max, monthList, months, handleMonthChange }) {
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-1 -mx-1.5">
+        {monthList.map((p) => {
+          return (
+            <div
+              key={p}
+              className="flex flex-col items-center cursor-pointer"
+              onClick={() => {
+                handleMonthChange(p);
+              }}
+            >
+              <span
+                className={twMerge(
+                  `flex items-center justify-center text-xs text-gray-300 w-8 py-0.5 border border-transparent hover:border-v3LiquidityRemoveBarColor rounded-lg`,
+                  p === months && "bg-black bg-opacity-20",
+                )}
+              >
+                {p}
+              </span>
+              <span style={{ height: "5px", width: "1px" }} className="bg-gray-300 mt-1" />
+            </div>
+          );
+        })}
+      </div>
+      <ReactSlider
+        className="month-slider"
+        min={min}
+        max={max}
+        value={months}
+        onChange={(v) => {
+          handleMonthChange(v);
+        }}
+      />
+    </div>
+  );
+}

components/Modal/components.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Box, Typography, Stack, Alert, Link, useTheme } from "@mui/material";
 import { FcInfo } from "@react-icons/all-files/fc/FcInfo";
 import { BeatLoader } from "react-spinners";
+import { twMerge } from "tailwind-merge";
 import TokenIcon from "../TokenIcon";
 import { actionMapTitle } from "./utils";
 import APYCell from "../Table/common/apy-cell";
@@ -256,7 +257,7 @@ export const SubmitButton = ({ action, disabled, onClick, loading }) => {
   );
 };
 
-export const Alerts = ({ data }) => {
+export const Alerts = ({ data, errorClassName }: any) => {
   const sort = (b: any, a: any) => {
     if (b[1].severity === "error") return 1;
     if (a[1].severity === "error") return -1;
@@ -271,7 +272,13 @@ export const Alerts = ({ data }) => {
           if (data[alert].severity === "warning") {
             return <AlertWarning className="-mt-2" key={alert} title={data[alert].title} />;
           } else {
-            return <AlertError className="pb-5 -mb-7" key={alert} title={data[alert].title} />;
+            return (
+              <AlertError
+                className={twMerge("pb-5 -mb-7", errorClassName || "")}
+                key={alert}
+                title={data[alert].title}
+              />
+            );
           }
         })}
     </div>

components/Modal/index.tsx

@@ -4,7 +4,7 @@ import { Modal as MUIModal, Typography, Box, Stack, useTheme } from "@mui/materi
 import Decimal from "decimal.js";
 import { USD_FORMAT } from "../../store";
 import { useAppSelector, useAppDispatch } from "../../redux/hooks";
-import { hideModal } from "../../redux/appSlice";
+import { hideModal, fetchConfig } from "../../redux/appSlice";
 import { getModalStatus, getAssetData, getSelectedValues } from "../../redux/appSelectors";
 import { getWithdrawMaxAmount } from "../../redux/selectors/getWithdrawMaxAmount";
 import { getAccountId } from "../../redux/accountSelectors";
@@ -86,6 +86,7 @@ const Modal = () => {
   useEffect(() => {
     if (isOpen) {
       dispatch(fetchAssets()).then(() => dispatch(fetchRefPrices()));
+      dispatch(fetchConfig());
     }
   }, [isOpen]);
   if (action === "Adjust") {