Merge pull request #248 from mrgnlabs/man0s/deposit-stake

Man0s/deposit stake

apps/marginfi-v2-ui/package.json

@@ -41,6 +41,7 @@
     "firebase": "^9.22.1",
     "firebase-admin": "^11.9.0",
     "jsbi": "^4.3.0",
+    "lodash.debounce": "^4.0.8",
     "next": "13.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -58,6 +59,7 @@
   "devDependencies": {
     "@mrgnlabs/eslint-config-custom": "*",
     "@mrgnlabs/tsconfig": "*",
+    "@types/lodash.debounce": "^4.0.7",
     "@types/node": "18.11.18",
     "@types/numeral": "^2.0.2",
     "@types/react": "18.0.26",

apps/marginfi-v2-ui/src/components/Staking/StakingCard/LstDepositToggle.tsx

@@ -0,0 +1,88 @@
+import { styled, Switch, SwitchProps } from "@mui/material";
+import { Dispatch, SetStateAction } from "react";
+
+interface LstDepositToggleProps extends SwitchProps {
+  checked: boolean;
+  setChecked: Dispatch<SetStateAction<boolean>>;
+}
+
+const LstDepositToggle = styled(({ checked, setChecked, ...switchProps }: LstDepositToggleProps) => {
+  const handleChange = () => {
+    setChecked((prev) => !prev);
+  };
+
+  return (
+    <Switch
+      {...switchProps}
+      focusVisibleClassName=".Mui-focusVisible"
+      disableRipple
+      checked={!checked}
+      onChange={handleChange}
+      disabled={false}
+    />
+  );
+})(({ disabled }) => ({
+  width: "100%",
+  height: "100%",
+  ...(disabled ? { cursor: "not-allowed" } : {}),
+  padding: 0,
+  backgroundColor: "rgba(0,0,0,1)", // @todo currently transparency is at 1 to hide the center thing that i can't make disappear
+  borderRadius: 5,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  fontFamily: "Aeonik Pro",
+  fontWeight: 400,
+  "&:before": {
+    content: '"Tokens"',
+    width: "50%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 10,
+    pointerEvents: "none",
+  },
+  "&:after": {
+    content: '"Native Stake"',
+    width: "50%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 10,
+    pointerEvents: "none",
+  },
+  "& .MuiSwitch-switchBase": {
+    padding: "0.25rem",
+    width: "50%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    transitionDuration: "300ms",
+    transform: "translateX(0%)",
+      "& + .MuiSwitch-track": {
+      opacity: 0,
+      width: 0,
+      height: "100%",
+    },
+    "&.Mui-disabled + .MuiSwitch-track": {
+      opacity: 0.5,
+    },
+    "&.Mui-checked": {
+      transform: "translateX(100%)",
+    },
+  },
+  "&:hover .MuiSwitch-thumb": {
+    backgroundColor: "#394147",
+  },
+  "& .MuiSwitch-thumb": {
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#2F373D",
+    borderRadius: 4,
+  },
+}));
+
+export { LstDepositToggle };