feat(mfi-v2-ui): added slippage modal & icon

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

@@ -0,0 +1,15 @@
+import React from "react";
+
+export const SettingsIcon: React.FC<React.SVGAttributes<SVGElement>> = ({ width = "12", height = "12" }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 12 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.67559 1.39922C4.18425 1.39922 3.78594 1.79753 3.78594 2.28887C3.78594 2.78022 4.18425 3.17853 4.67559 3.17853C5.16694 3.17853 5.56525 2.78022 5.56525 2.28887C5.56525 1.79753 5.16694 1.39922 4.67559 1.39922ZM1.19961 2.88867H2.67329C2.93107 3.75043 3.72998 4.37853 4.67559 4.37853C5.62121 4.37853 6.42012 3.75043 6.67789 2.88867H10.7996C11.131 2.88867 11.3996 2.62004 11.3996 2.28867C11.3996 1.9573 11.131 1.68867 10.7996 1.68867H6.67777C6.41987 0.827121 5.62106 0.199219 4.67559 0.199219C3.73013 0.199219 2.93132 0.827121 2.67342 1.68867H1.19961C0.868239 1.68867 0.599609 1.9573 0.599609 2.28867C0.599609 2.62004 0.868239 2.88867 1.19961 2.88867ZM0.599609 7.58555C0.599609 7.25418 0.868239 6.98555 1.19961 6.98555H5.98367C6.24157 6.124 7.04038 5.49609 7.98585 5.49609C8.93131 5.49609 9.73012 6.124 9.98802 6.98555H10.7995C11.1309 6.98555 11.3995 7.25418 11.3995 7.58555C11.3995 7.91692 11.1309 8.18555 10.7995 8.18555H9.98814C9.73037 9.04731 8.93146 9.6754 7.98585 9.6754C7.04023 9.6754 6.24132 9.04731 5.98355 8.18555H1.19961C0.868239 8.18555 0.599609 7.91692 0.599609 7.58555ZM7.09619 7.58575C7.09619 7.09441 7.4945 6.69609 7.98585 6.69609C8.47719 6.69609 8.8755 7.09441 8.8755 7.58575C8.8755 8.07709 8.47719 8.4754 7.98585 8.4754C7.4945 8.4754 7.09619 8.07709 7.09619 7.58575Z"
+        fill="currentColor"
+        fillOpacity="0.5"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,74 @@
+import { Typography, Modal, SvgIcon } from "@mui/material";
+import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from "react";
+import { Close } from "@mui/icons-material";
+import { TokenData } from "./StakingCard";
+import Image from "next/image";
+import { PublicKey } from "@solana/web3.js";
+import { NumberFormatValues, NumericFormat } from "react-number-format";
+import { PrimaryButton } from "./PrimaryButton";
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  handleClose: () => void;
+  setSelectedSlippage: Dispatch<SetStateAction<number>>;
+  selectedSlippage: number;
+}
+
+const SLIPPAGE_PRESET = [0.1, 0.5, 1.0, 5.0];
+
+export const SettingsModal: FC<SettingsModalProps> = ({
+  isOpen,
+  handleClose,
+  selectedSlippage,
+  setSelectedSlippage,
+}) => {
+  const [localSlippage, setLocalSlippage] = useState<number>();
+  useEffect(() => setLocalSlippage(selectedSlippage), [selectedSlippage]);
+
+  const onSaveSettings = () => {
+    setSelectedSlippage(localSlippage);
+    handleClose();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={handleClose}
+      aria-labelledby="parent-modal-title"
+      aria-describedby="parent-modal-description"
+      className="border-none"
+    >
+      <div className="mx-auto mt-48 rounded-xl bg-[#1C2023] w-[400px] max-w-[90%]  p-4">
+        <div className="flex flex-row justify-between mb-3">
+          <Typography className="font-aeonik font-[700] text-2xl inline">Swap Settings</Typography>
+          <div className="cursor-pointer" onClick={handleClose}>
+            <Close />
+          </div>
+        </div>
+        <Typography className="font-aeonik font-[500] text-xl">Slippage Settings</Typography>
+        <div className="flex flex-row items-center mt-2.5 rounded-xl overflow-hidden text-sm mb-10">
+          {SLIPPAGE_PRESET.map((slippage, idx) => {
+            const displayText = Number(slippage) + "%";
+            const isHighlighted = localSlippage === slippage;
+            return (
+              <a
+                key={idx}
+                className={`relative cursor-pointer flex-1 text-secondary py-3 ${
+                  isHighlighted ? "bg-[#303437]" : "bg-[#1B1B1E]"
+                }`}
+                onClick={() => {
+                  setLocalSlippage(slippage);
+                }}
+              >
+                <div className="h-full w-full leading-none flex justify-center items-center">
+                  <Typography className={`text-secondary mt-[2px]`}>{displayText}</Typography>
+                </div>
+              </a>
+            );
+          })}
+        </div>
+        <PrimaryButton onClick={() => onSaveSettings()}>Save</PrimaryButton>
+      </div>
+    </Modal>
+  );
+};

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

@@ -17,9 +17,10 @@ import JSBI from "jsbi";
 import { usePrevious } from "~/utils";
 import { createJupiterApiClient, instanceOfSwapResponse } from "@jup-ag/api";
 import { toast } from "react-toastify";
+import { SettingsModal } from "./SettingsModal";
+import { SettingsIcon } from "./SettingsIcon";
 
 const SOL_MINT = new PublicKey("So11111111111111111111111111111111111111112");
-const SLIPPAGE_BPS = 5; // 0.5% slippage
 
 export interface TokenData {
   mint: PublicKey;
@@ -45,6 +46,8 @@ export const StakingCard: FC = () => {
   const [swapping, setSwapping] = useState<boolean>(false);
   const [depositAmount, setDepositAmount] = useState<number | null>(null);
   const [selectedMint, setSelectedMint] = useState<PublicKey>(SOL_MINT);
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
+  const [selectedSlippage, setSelectedSlippage] = useState<number>(0.5);
 
   const prevWalletAddress = usePrevious(walletAddress);
   useEffect(() => {
@@ -90,7 +93,7 @@ export const StakingCard: FC = () => {
     inputMint: selectedMint,
     outputMint: SOL_MINT,
     swapMode: SwapMode.ExactIn,
-    slippageBps: SLIPPAGE_BPS, // 0.5% slippage
+    slippageBps: selectedSlippage, // 0.5% slippage
     debounceTime: 250, // debounce ms time before refresh
   });
 
@@ -147,14 +150,14 @@ export const StakingCard: FC = () => {
           throw new Error("Route not calculated yet");
         }
         const outAmount = JSBI.toNumber(quoteResponseMeta.quoteResponse.outAmount);
-        const finalAmount = Math.floor(outAmount * (1 - SLIPPAGE_BPS / 1000));
+        const finalAmount = Math.floor(outAmount * (1 - selectedSlippage / 1000));
 
         const avoidSlippageIssues = await jupiterApiClient.quoteGet({
           amount: finalAmount, // add slippage
           inputMint: selectedMint.toBase58(),
           outputMint: SOL_MINT.toBase58(),
           swapMode: SwapMode.ExactOut,
-          slippageBps: SLIPPAGE_BPS,
+          slippageBps: selectedSlippage,
         });
 
         const swapResult = await jupiterApiClient.swapPost({
@@ -246,6 +249,15 @@ export const StakingCard: FC = () => {
           <Typography className="font-aeonik font-[400] text-lg">Deposit</Typography>
           {connected && selectedMintInfo && (
             <div className="flex flex-row gap-2 items-center">
+              <div
+                className={`p-2 h-7 gap-2 flex flex-row items-center justify-center border rounded-2xl border-white/10 bg-black/10 cursor-pointer`}
+                onClick={() => setIsSettingsModalOpen(true)}
+              >
+                <SettingsIcon />
+                <Typography className={`text-xs text-secondary mt-2px`}>
+                  {isNaN(selectedSlippage) ? "0" : selectedSlippage}%
+                </Typography>
+              </div>
               <div className="leading-5">
                 <WalletIcon />
               </div>
@@ -350,6 +362,12 @@ export const StakingCard: FC = () => {
           <Typography className="font-aeonik font-[700] text-lg">0%</Typography>
         </div>
       </div>
+      <SettingsModal
+        isOpen={isSettingsModalOpen}
+        handleClose={() => setIsSettingsModalOpen(false)}
+        selectedSlippage={selectedSlippage}
+        setSelectedSlippage={setSelectedSlippage}
+      />
     </>
   );
 };