added risk slider to borrow input

src/actions/borrow.tsx

@@ -125,7 +125,7 @@ export const borrow = async (
         signers
       )
     : undefined;
-  
+
   let amountLamports: number = 0;
   let fromLamports: number = 0;
   if (amountType === BorrowAmountType.LiquidityBorrowAmount) {
@@ -152,7 +152,6 @@ export const borrow = async (
     fromLamports = amountLamports;
   }
 
-
   const fromAccount = ensureSplAccount(
     instructions,
     finalCleanupInstructions,
@@ -202,7 +201,7 @@ export const borrow = async (
     fromAccount,
     wallet.publicKey,
     fromLamports,
-    false,
+    false
   );
   signers.push(transferAuthority);
 

src/components/BorrowInput/index.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useUserBalance, useUserObligationByReserve } from "../../hooks";
+import {
+  useSliderInput,
+  useUserBalance,
+  useUserDeposits,
+  useUserObligationByReserve,
+} from "../../hooks";
 import {
   BorrowAmountType,
   LendingReserve,
@@ -16,8 +21,8 @@ import { ActionConfirmation } from "./../ActionConfirmation";
 import { BackButton } from "./../BackButton";
 import { ConnectButton } from "../ConnectButton";
 import CollateralInput from "../CollateralInput";
-import { ArrowDownOutlined } from "@ant-design/icons";
 import { useMidPriceInUSD } from "../../contexts/market";
+import { RiskSlider } from "../RiskSlider";
 
 export const BorrowInput = (props: {
   className?: string;
@@ -25,7 +30,6 @@ export const BorrowInput = (props: {
 }) => {
   const connection = useConnection();
   const { wallet } = useWallet();
-  const [value, setValue] = useState("");
   const [collateralValue, setCollateralValue] = useState("");
   const [lastTyped, setLastTyped] = useState("collateral");
   const [pendingTx, setPendingTx] = useState(false);
@@ -43,7 +47,6 @@ export const BorrowInput = (props: {
 
     return cache.get(id) as ParsedAccount<LendingReserve>;
   }, [collateralReserveKey]);
-
   const borrowPrice = useMidPriceInUSD(
     borrowReserve.info.liquidityMint.toBase58()
   ).price;
@@ -51,6 +54,30 @@ export const BorrowInput = (props: {
     collateralReserve?.info.liquidityMint.toBase58()
   )?.price;
 
+  const include = useMemo(
+    () => new Set([collateralReserve?.pubkey.toBase58()]),
+    [collateralReserve]
+  );
+
+  const exclude = useMemo(() => new Set([]), []);
+
+  const { userDeposits: accountBalance } = useUserDeposits(exclude, include);
+  const tokenBalance = accountBalance[0]?.info.amount || 0;
+
+  const convert = useCallback(
+    (val: string | number) => {
+      const minAmount = Math.min(tokenBalance, Infinity);
+      if (typeof val === "string") {
+        return (parseFloat(val) / minAmount) * 100;
+      } else {
+        return (val * minAmount) / 100;
+      }
+    },
+    [tokenBalance]
+  );
+
+  const { value, setValue, pct } = useSliderInput(convert);
+
   useEffect(() => {
     if (collateralReserve && lastTyped === "collateral") {
       const ltv = borrowReserve.info.config.loanToValueRatio / 100;
@@ -71,6 +98,7 @@ export const BorrowInput = (props: {
     borrowPrice,
     borrowReserve,
     collateralValue,
+    setValue,
   ]);
 
   useEffect(() => {
@@ -95,15 +123,13 @@ export const BorrowInput = (props: {
     value,
   ]);
 
-  const { accounts: fromAccounts } = useUserBalance(
-    collateralReserve?.info.collateralMint
-  );
-
   const { userObligationsByReserve } = useUserObligationByReserve(
     borrowReserve?.pubkey,
     collateralReserve?.pubkey
   );
-
+  const { accounts: fromAccounts } = useUserBalance(
+    collateralReserve?.info.collateralMint
+  );
   const onBorrow = useCallback(() => {
     if (!collateralReserve) {
       return;
@@ -198,7 +224,7 @@ export const BorrowInput = (props: {
               useFirstReserve={true}
             />
           </div>
-          <ArrowDownOutlined />
+          <RiskSlider value={pct} />
           <div
             style={{
               display: "flex",

src/components/RiskSlider/index.tsx

@@ -0,0 +1,15 @@
+import { riskMarks } from "../../constants";
+import { Slider } from "antd";
+import React from "react";
+import "./style.less";
+
+export const RiskSlider = (props: { value: number }) => {
+  return (
+    <Slider
+      className="risk-slider"
+      marks={riskMarks}
+      value={props.value}
+      included={false}
+    />
+  );
+};

src/components/RiskSlider/style.less

@@ -0,0 +1,9 @@
+@import "~antd/dist/antd.dark.less";
+
+.risk-slider {
+  color: @text-color-secondary;
+
+  .ant-slider-rail {
+    background-image: linear-gradient(to right, darkgreen, darkred) !important;
+  }
+}

src/constants/labels.ts

@@ -91,4 +91,6 @@ export const LABELS = {
   NO_DEPOSIT_MESSAGE:
     "You need to deposit coin of this type into oyster before trading with it on margin.",
   NO_COLL_TYPE_MESSAGE: "Choose Collateral CCY",
+  SAFER: "Safer",
+  RISKIER: "Riskier",
 };

src/constants/marks.ts

@@ -1,3 +1,5 @@
+import { LABELS } from "./labels";
+
 export const marks = {
   0: "0%",
   25: "25%",
@@ -5,3 +7,17 @@ export const marks = {
   75: "75%",
   100: "100%",
 };
+export const riskMarks = {
+  0: {
+    style: {
+      color: "darkgreen",
+    },
+    label: LABELS.SAFER,
+  },
+  100: {
+    style: {
+      color: "darkred",
+    },
+    label: LABELS.RISKIER,
+  },
+};