From 453d2e9cf338faaa67e7a0b6c5ba070a6c55320c Mon Sep 17 00:00:00 2001
From: Zak <zmooney@hotmail.co.uk>
Date: Tue, 17 Dec 2024 14:41:58 +0000
Subject: [PATCH 1/2] feat: date range picker for yield pools

---
 src/components/vault/yield/PoolChart.jsx      |  45 +++---
 src/components/vault/yield/YieldItem.jsx      | 133 +++++++++++-------
 src/components/vault/yield/YieldParentNew.jsx | 125 +++++++++++-----
 .../vault/yield/YieldViewModalNew.jsx         | 116 ++++++++++-----
 src/store/Store.jsx                           |  11 ++
 5 files changed, 291 insertions(+), 139 deletions(-)

diff --git a/src/components/vault/yield/PoolChart.jsx b/src/components/vault/yield/PoolChart.jsx
index 5458803..765ad15 100644
--- a/src/components/vault/yield/PoolChart.jsx
+++ b/src/components/vault/yield/PoolChart.jsx
@@ -6,33 +6,34 @@ import {
   useLocalThemeModeStore,
 } from "../../../store/Store";
 
+// const YieldPoolChart = ({ hypervisorData, yieldPair }) => {
 const YieldPoolChart = ({ hypervisorData, yieldPair }) => {
   const { localThemeModeStore } = useLocalThemeModeStore();
   const isLight = localThemeModeStore && localThemeModeStore.includes('light');
 
-  const [chartWidth, setChartWidth] = useState(200);
-  const [chartHeight, setChartHeight] = useState(60);
-  const [lineColor, setLineColor] = useState("green");
+  let series = [];
+  let xAxis = [];
+  if (hypervisorData && hypervisorData.length) {
+    series = [
+      {
+        name: 'Position',
+        data: hypervisorData?.map(item => item.period_gamma_netApr)
+      },
+      {
+        name: `If Held ${yieldPair[0] || ''}`,
+        data: hypervisorData?.map(item => item.period_hodl_token0)
+      },
+      {
+        name: `If Held ${yieldPair[1] || ''}`,
+        data: hypervisorData?.map(item => item.period_hodl_token1)
+      },
+    ];
 
-  const series = [
-    {
-      name: 'Position',
-      data: hypervisorData?.map(item => item.period_gamma_netApr)
-    },
-    {
-      name: `If Held ${yieldPair[0] || ''}`,
-      data: hypervisorData?.map(item => item.period_hodl_token0)
-    },
-    {
-      name: `If Held ${yieldPair[1] || ''}`,
-      data: hypervisorData?.map(item => item.period_hodl_token1)
-    },
-  ];
-
-  const xAxis = hypervisorData?.map((item) => {
-    // const formattedDate = moment.unix(Number(item.timestamp)).format('MMM DD');
-    return item.timestamp;
-  });
+    xAxis = hypervisorData?.map((item) => {
+      // const formattedDate = moment.unix(Number(item.timestamp)).format('MMM DD');
+      return item.timestamp;
+    });
+  }
 
   const dataColors = [
     '#facc15',
diff --git a/src/components/vault/yield/YieldItem.jsx b/src/components/vault/yield/YieldItem.jsx
index 9ffa1b2..83c5bc7 100644
--- a/src/components/vault/yield/YieldItem.jsx
+++ b/src/components/vault/yield/YieldItem.jsx
@@ -15,7 +15,7 @@ import {
 } from '@heroicons/react/24/outline';
 
 import {
-  useVaultAddressStore,
+  useSelectedYieldPoolStore,
 } from "../../../store/Store";
 
 import {
@@ -45,8 +45,18 @@ const YieldItem = (props) => {
     handleOpenModal,
     isPositive,
     getYieldColor,
+    yieldRange
   } = props;
 
+  const {
+    selectedYieldPool,
+    setSelectedYieldPool,
+    selectedYieldPoolData,
+    setSelectedYieldPoolData,
+    selectedYieldPoolDataLoading,
+    setSelectedYieldPoolDataLoading,
+  } = useSelectedYieldPoolStore();
+
   const [ open, setOpen ] = useState('');
   const chainId = useChainId();
 
@@ -54,6 +64,8 @@ const YieldItem = (props) => {
   const [ hypervisorDataLoading, setHypervisorDataLoading ] = useState(false);
   const [ hypervisorDataErr, setHypervisorDataErr ] = useState(false);
 
+  const [ modalData, setModalData ] = useState({});
+
   const yieldVaultsInfo = chainId === arbitrumSepolia.id
   ? SepoliaVaults
   : ArbitrumVaults;
@@ -62,23 +74,7 @@ const YieldItem = (props) => {
   ? SepoliaGammaVaults
   : ArbitrumGammaVaults;
 
-  // const handleCloseModal = () => {
-  //   // setYieldPair([]);
-  //   // setYieldQuantities([]);
-  //   // setYieldHypervisor('');
-  //   setOpen('');
-  //   setModalDataObj({})
-  // };
-
-  // const handleOpenModal = (useData, type) => {
-  //   setModalDataObj(useData)
-  //   // setYieldPair(pair);
-  //   // setYieldQuantities(quantities);
-  //   // setYieldHypervisor(hypervisor);
-  //   setOpen(type);
-  // }
-
-  const dataPeriod = 14;
+  const dataPeriod = yieldRange;
 
   const hypervisorAddress = hypervisor?.address.toLowerCase();
 
@@ -100,13 +96,42 @@ const YieldItem = (props) => {
     if (hypervisor) {
       getHypervisorData();
     }
-  }, [hypervisor]);
+  }, [hypervisor, dataPeriod]);
+
+  useEffect(() => {
+    if (hypervisorData) {
+      const dataObj = {
+        yieldPair: [tokenA, tokenB],
+        hypervisor: hypervisor,
+        gammaUser: gammaUser,
+        hypervisorData: hypervisorData,
+        hypervisorDataLoading: hypervisorDataLoading,
+        gammaPosition: gammaPosition,
+        holdA: holdA,
+        holdB: holdB,
+        dataPeriod: dataPeriod,
+        apyBase: apyBase,
+        apyReward: apyReward,
+        apyTotal: apyTotal,
+        showBalance: showBalance,
+        yieldQuantities: quantities,
+        positionUser: userData,
+      };
+
+      setModalData(dataObj);
+
+      if (selectedYieldPool === usePair) {
+        setSelectedYieldPoolData(dataObj)
+      }
+    }
+  }, [hypervisorData, dataPeriod]);
 
   const getHypervisorData = async () => {  
     const hyperAddress = hypervisor?.address;
 
     try {
       setHypervisorDataLoading(true);
+      setSelectedYieldPoolDataLoading(true);
       const response = await axios.get(
         `https://wire3.gamma.xyz/frontend/analytics/returns/chart?hypervisor_address=${hyperAddress}&chain=arbitrum&period=${dataPeriod}`
       );
@@ -115,9 +140,11 @@ const YieldItem = (props) => {
 
       setHypervisorData(useData);
       setHypervisorDataLoading(false);
+      setSelectedYieldPoolDataLoading(false);
       setHypervisorDataErr(false);
     } catch (error) {
       setHypervisorDataLoading(false);
+      setSelectedYieldPoolDataLoading(false);
       setHypervisorDataErr(true);
       console.log(error);
     }
@@ -168,23 +195,7 @@ const YieldItem = (props) => {
 
   const showBalance = '$'+balanceUSD?.toFixed(2) || '';
 
-  const modalData = {
-    yieldPair: [tokenA, tokenB],
-    hypervisor: hypervisor,
-    gammaUser: gammaUser,
-    hypervisorData: hypervisorData,
-    hypervisorDataLoading: hypervisorDataLoading,
-    gammaPosition: gammaPosition,
-    holdA: holdA,
-    holdB: holdB,
-    dataPeriod: dataPeriod,
-    apyBase: apyBase,
-    apyReward: apyReward,
-    apyTotal: apyTotal,
-    showBalance: showBalance,
-    yieldQuantities: quantities,
-    positionUser: userData,
-  };
+  const usePair = tokenA + tokenB;
 
   return (
     <>
@@ -250,10 +261,18 @@ const YieldItem = (props) => {
                   />
                 </Typography>
               </Tooltip>
-              <Typography variant="p" className={`text-sm ${getYieldColor(gammaPosition)}`}>
-                {isPositive(gammaPosition) ? ('+') : null}
-                {Math.abs(gammaPosition) >= 0 ? (`${gammaPosition.toFixed(3)}%`) : ('')}
-              </Typography>
+              {hypervisorDataLoading ? (
+                <>
+                  <span className="block loading loading-bars loading-xs"></span>
+                </>
+              ) : (
+                <>
+                  <Typography variant="p" className={`text-sm ${getYieldColor(gammaPosition)}`}>
+                    {isPositive(gammaPosition) ? ('+') : null}
+                    {Math.abs(gammaPosition) >= 0 ? (`${gammaPosition.toFixed(3)}%`) : ('')}
+                  </Typography>
+                </>
+              )}
             </div>
             <div>
               <Tooltip
@@ -268,10 +287,18 @@ const YieldItem = (props) => {
                   />
                 </Typography>
               </Tooltip>
-              <Typography variant="p" className={`text-sm ${getYieldColor(holdA)}`}>
-                {isPositive(holdA) ? ('+') : null}
-                {Math.abs(holdA) >= 0 ? (`${holdA.toFixed(3)}%`) : ('')}
-              </Typography>
+              {hypervisorDataLoading ? (
+                <>
+                  <span className="block loading loading-bars loading-xs"></span>
+                </>
+              ) : (
+                <>
+                  <Typography variant="p" className={`text-sm ${getYieldColor(holdA)}`}>
+                    {isPositive(holdA) ? ('+') : null}
+                    {Math.abs(holdA) >= 0 ? (`${holdA.toFixed(3)}%`) : ('')}
+                  </Typography>
+                </>
+              )}
             </div>
             <div>
               <Tooltip
@@ -286,10 +313,18 @@ const YieldItem = (props) => {
                   />
                 </Typography>
               </Tooltip>
-              <Typography variant="p" className={`text-sm ${getYieldColor(holdB)}`}>
-                {isPositive(holdB) ? ('+') : null}
-                {Math.abs(holdB) >= 0 ? (`${holdB.toFixed(3)}%`) : ('')}
-              </Typography>
+              {hypervisorDataLoading ? (
+                <>
+                  <span className="block loading loading-bars loading-xs"></span>
+                </>
+              ) : (
+                <>
+                  <Typography variant="p" className={`text-sm ${getYieldColor(holdB)}`}>
+                    {isPositive(holdB) ? ('+') : null}
+                    {Math.abs(holdB) >= 0 ? (`${holdB.toFixed(3)}%`) : ('')}
+                  </Typography>
+                </>
+              )}
             </div>
           </>
 
@@ -308,7 +343,7 @@ const YieldItem = (props) => {
               <Button
                 variant="outline"
                 size="sm"
-                onClick={() => handleOpenModal(modalData, 'VIEW')}
+                onClick={() => handleOpenModal(usePair, modalData, 'VIEW')}
                 disabled={!balanceUSD}
               >
                 View
diff --git a/src/components/vault/yield/YieldParentNew.jsx b/src/components/vault/yield/YieldParentNew.jsx
index 9642aa3..7108c1e 100644
--- a/src/components/vault/yield/YieldParentNew.jsx
+++ b/src/components/vault/yield/YieldParentNew.jsx
@@ -13,6 +13,7 @@ import {
 import {
   useVaultAddressStore,
   useSmartVaultABIStore,
+  useSelectedYieldPoolStore,
 } from "../../../store/Store";
 
 import YieldItem from "./YieldItem";
@@ -22,12 +23,58 @@ import YieldClaimModal from "./YieldClaimModalNew";
 import Card from "../../ui/Card";
 import Typography from "../../ui/Typography";
 import Button from "../../ui/Button";
+import Select from "../../ui/Select";
+
+const allYieldRanges = [
+  {
+    name: '1 Day',
+    short: '1d',
+    value: '1',
+  },
+  {
+    name: '7 Days',
+    short: '7d',
+    value: '7',
+  },
+  {
+    name: '14 Days',
+    short: '14d',
+    value: '14',
+  },
+  {
+    name: '30 Days',
+    short: '30d',
+    value: '30',
+  },
+  {
+    name: '90 Days',
+    short: '90d',
+    value: '90',
+  },
+  {
+    name: '180 Days',
+    short: '180d',
+    value: '180',
+  },
+  {
+    name: '365 Days',
+    short: '1y',
+    value: '365',
+  },
+];
 
 const YieldParent = (props) => {
   const { yieldEnabled } = props;
   const { vaultAddress } = useVaultAddressStore();
   const { smartVaultABI } = useSmartVaultABIStore();
 
+  const {
+    selectedYieldPool,
+    setSelectedYieldPool,
+    selectedYieldPoolData,
+    setSelectedYieldPoolData,
+  } = useSelectedYieldPoolStore();
+
   const [ gammaUser, setGammaUser ] = useState({});
   const [ gammaUserLoading, setGammaUserLoading ] = useState(false);
   const [ gammaUserErr, setGammaUserErr ] = useState(false);
@@ -47,15 +94,21 @@ const YieldParent = (props) => {
   const [ userPositions, setUserPositions ] = useState([])
 
   const [ open, setOpen ] = useState('');
+  
   const [ modalDataObj, setModalDataObj ] = useState({});
 
+  const [ yieldRange, setYieldRange ] = useState('14');
+
   const handleCloseModal = () => {
     setOpen('');
-    setModalDataObj({})
+    // setModalDataObj({})
+    setSelectedYieldPool('');
+    setSelectedYieldPoolData({});
   };
 
-  const handleOpenModal = (useData, type) => {
-    setModalDataObj(useData)
+  const handleOpenModal = (selectedPool, poolData, type) => {
+    setSelectedYieldPool(selectedPool);
+    setSelectedYieldPoolData(poolData);
     setOpen(type);
   }
 
@@ -187,12 +240,27 @@ const YieldParent = (props) => {
         <>
           <Card className="card-compact mb-4">
             <div className="card-body">
-              <Typography variant="h2" className="card-title flex gap-0">
-                <AdjustmentsHorizontalIcon
-                  className="mr-2 h-6 w-6 inline-block"
-                />
-                Yield Pools
-              </Typography>
+              <div className="flex justify-between items-center">
+                <Typography variant="h2" className="flex items-center gap-0 mb-0">
+                  <AdjustmentsHorizontalIcon
+                    className="mr-2 h-6 w-6 inline-block"
+                  />
+                  Yield Pools
+                </Typography>
+
+                <Select
+                  id="yield-range-select"
+                  value={yieldRange}
+                  label="Asset"
+                  handleChange={(e) => setYieldRange(e.target.value)}
+                  optName="name"
+                  optValue="value"
+                  options={allYieldRanges || []}
+                  className="select-sm"
+                  disabled={gammaUserPositionsLoading}
+                >
+                </Select>
+              </div>
               <div className="grid grid-cols-1 gap-4">
                 {gammaUserPositionsLoading ? (
                   <>
@@ -213,12 +281,13 @@ const YieldParent = (props) => {
                               gammaUser={gammaUser}
                               merklPools={merklPools}
                               merklPoolsLoading={merklPoolsLoading}
-                              modalDataObj={modalDataObj}
-                              setModalDataObj={setModalDataObj}
+                              modalDataObj={selectedYieldPoolData}
+                              // setModalDataObj={setModalDataObj}
                               handleCloseModal={handleCloseModal}
                               handleOpenModal={handleOpenModal}
                               getYieldColor={getYieldColor}
-                              isPositive={isPositive}              
+                              isPositive={isPositive}
+                              yieldRange={yieldRange}            
                             />
                           )
                         })}
@@ -250,35 +319,23 @@ const YieldParent = (props) => {
           <YieldClaimModal
             handleCloseModal={() => handleCloseModal()}
             isOpen={open === 'CLAIM'}
-            modalDataObj={modalDataObj}
-            yieldPair={modalDataObj?.yieldPair}
-            yieldHypervisor={modalDataObj?.hypervisor}
-            yieldQuantities={modalDataObj?.yieldQuantities}
-            positionUser={modalDataObj?.positionUser}
+            modalDataObj={selectedYieldPoolData}
+            yieldPair={selectedYieldPoolData?.yieldPair}
+            yieldHypervisor={selectedYieldPoolData?.hypervisor}
+            yieldQuantities={selectedYieldPoolData?.yieldQuantities}
+            positionUser={selectedYieldPoolData?.positionUser}
           />
 
           <YieldViewModal
-            handleCloseModal={() => handleCloseModal()}
             isOpen={open === 'VIEW'}
+            handleCloseModal={() => handleCloseModal()}
             openClaim={handleOpenModal}
             getYieldColor={getYieldColor}
             isPositive={isPositive}
-
-            modalDataObj={modalDataObj}
-            yieldPair={modalDataObj?.yieldPair}
-            hypervisor={modalDataObj?.hypervisor}
-            gammaUser={modalDataObj?.gammaUser}
-            hypervisorData={modalDataObj?.hypervisorData}
-            hypervisorDataLoading={modalDataObj?.hypervisorDataLoading}
-
-            gammaPosition={modalDataObj?.gammaPosition}
-            holdA={modalDataObj?.holdA}
-            holdB={modalDataObj?.holdB}
-            dataPeriod={modalDataObj?.dataPeriod}
-            apyBase={modalDataObj?.apyBase}
-            apyReward={modalDataObj?.apyReward}
-            apyTotal={modalDataObj?.apyTotal}
-            showBalance={modalDataObj?.showBalance}
+            yieldRange={yieldRange}
+            setYieldRange={setYieldRange}
+            allYieldRanges={allYieldRanges}
+            modalDataObj={selectedYieldPoolData}
           />
         </>
       ) : (
diff --git a/src/components/vault/yield/YieldViewModalNew.jsx b/src/components/vault/yield/YieldViewModalNew.jsx
index ac0394e..4dcf694 100644
--- a/src/components/vault/yield/YieldViewModalNew.jsx
+++ b/src/components/vault/yield/YieldViewModalNew.jsx
@@ -6,6 +6,10 @@ import {
   QuestionMarkCircleIcon
 } from '@heroicons/react/24/outline';
 
+import {
+  useSelectedYieldPoolStore,
+} from "../../../store/Store";
+
 import Button from "../../ui/Button";
 import Modal from "../../ui/Modal";
 import Typography from "../../ui/Typography";
@@ -17,22 +21,32 @@ const YieldViewModal = ({
   isOpen,
   handleCloseModal,
   openClaim,
-  modalDataObj,
-  dataPeriod,
-  gammaPosition,
-  holdA,
-  holdB,
   getYieldColor,
   isPositive,
-  yieldPair,
-  apyTotal,
-  showBalance,
-
-  hypervisor,
-  hypervisorDataLoading,
-  hypervisorData,
+  yieldRange,
+  setYieldRange,
+  allYieldRanges,
+  modalDataObj,
 }) => {
 
+  const {
+    selectedYieldPool,
+    selectedYieldPoolDataLoading,
+  } = useSelectedYieldPoolStore();
+
+  const {
+    yieldPair,
+    hypervisor,
+    hypervisorData,
+    hypervisorDataLoading,
+    gammaPosition,
+    holdA,
+    holdB,
+    dataPeriod,
+    apyTotal,
+    showBalance,
+  } = modalDataObj;
+
   const formatTVL = (num) => {
     if (num) {
       const k = num / 1000;
@@ -41,8 +55,8 @@ const YieldViewModal = ({
       return '';
     }
    }
-
-  return (
+ 
+   return (
     <>
       <Modal
         open={isOpen}
@@ -108,18 +122,28 @@ const YieldViewModal = ({
             </div>
 
             <div className="bg-base-300/40 p-2 rounded-lg w-full mb-2">
-              {hypervisorDataLoading ? (
-                <>
-                  <span className="loading loading-spinner loading-md"></span>
-                </>
-              ) : (
-                <>
+            <>
+                  <div className="flex justify-end w-full -mb-4 relative z-10">
+                    <div className="join">
+                      {allYieldRanges.map((item, index) => (
+                        <Button
+                          key={index}
+                          size="sm"
+                          className={yieldRange === item.value ? 'join-item btn-primary' : 'join-item'}
+                          variant={yieldRange === item.value? '' : 'outline'}
+                          active={yieldRange === item.value}
+                          onClick={() => setYieldRange(item.value)}
+                        >
+                          {item.short || ''}
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
                   <YieldPoolChart
                     hypervisorData={hypervisorData}
                     yieldPair={yieldPair}
                   />
                 </>
-              )}
             </div>
 
             <div className="grid grid-cols-3 gap-2">
@@ -136,10 +160,18 @@ const YieldViewModal = ({
                     />
                   </Typography>
                 </Tooltip>
-                <Typography variant="p" className={`text-sm ${getYieldColor(gammaPosition)}`}>
-                  {isPositive(gammaPosition) ? ('+') : null}
-                  {Math.abs(gammaPosition) >= 0 ? (`${gammaPosition?.toFixed(3)}%`) : ('')}
-                </Typography>
+                {selectedYieldPoolDataLoading ? (
+                  <>
+                    <span className="block loading loading-bars loading-xs"></span>
+                  </>
+                ) : (
+                  <>
+                    <Typography variant="p" className={`text-sm ${getYieldColor(gammaPosition)}`}>
+                      {isPositive(gammaPosition) ? ('+') : null}
+                      {Math.abs(gammaPosition) >= 0 ? (`${gammaPosition?.toFixed(3)}%`) : ('')}
+                    </Typography>
+                  </>
+                )}
               </div>
               <div className="bg-base-300/40 p-2 rounded-lg">
                 <Tooltip
@@ -154,10 +186,18 @@ const YieldViewModal = ({
                     />
                   </Typography>
                 </Tooltip>
-                <Typography variant="p" className={`text-sm ${getYieldColor(holdA)}`}>
-                  {isPositive(holdA) ? ('+') : null}
-                  {Math.abs(holdA) >= 0 ? (`${holdA?.toFixed(3)}%`) : ('')}
-                </Typography>
+                {selectedYieldPoolDataLoading ? (
+                  <>
+                    <span className="block loading loading-bars loading-xs"></span>
+                  </>
+                ) : (
+                  <>
+                    <Typography variant="p" className={`text-sm ${getYieldColor(holdA)}`}>
+                      {isPositive(holdA) ? ('+') : null}
+                      {Math.abs(holdA) >= 0 ? (`${holdA?.toFixed(3)}%`) : ('')}
+                    </Typography>
+                  </>
+                )}
               </div>
               <div className="bg-base-300/40 p-2 rounded-lg">
                 <Tooltip
@@ -172,10 +212,18 @@ const YieldViewModal = ({
                     />
                   </Typography>
                 </Tooltip>
-                <Typography variant="p" className={`text-sm ${getYieldColor(holdB)}`}>
-                  {isPositive(holdB) ? ('+') : null}
-                  {Math.abs(holdB) >= 0 ? (`${holdB?.toFixed(3)}%`) : ('')}
-                </Typography>
+                {selectedYieldPoolDataLoading ? (
+                  <>
+                    <span className="block loading loading-bars loading-xs"></span>
+                  </>
+                ) : (
+                  <>
+                    <Typography variant="p" className={`text-sm ${getYieldColor(holdB)}`}>
+                      {isPositive(holdB) ? ('+') : null}
+                      {Math.abs(holdB) >= 0 ? (`${holdB?.toFixed(3)}%`) : ('')}
+                    </Typography>
+                  </>
+                )}
               </div>
             </div>
 
@@ -192,7 +240,7 @@ const YieldViewModal = ({
             <Button
               className="w-full lg:w-64"
               variant="outline"
-              onClick={() => openClaim(modalDataObj, 'CLAIM')}
+              onClick={() => openClaim(selectedYieldPool, modalDataObj, 'CLAIM')}
             >
               Stop Earning Yield
             </Button>
diff --git a/src/store/Store.jsx b/src/store/Store.jsx
index 532f891..5a430ea 100644
--- a/src/store/Store.jsx
+++ b/src/store/Store.jsx
@@ -301,3 +301,14 @@ export const useMerklRewardsUSD = create(
     setMerklRewardsUSD: (merklRewardsUSD) => set(() => ({ merklRewardsUSD: merklRewardsUSD })),
   })
 );
+
+export const useSelectedYieldPoolStore = create(
+  (set) => ({
+    selectedYieldPool: '',
+    setSelectedYieldPool: (selectedYieldPool) => set(() => ({ selectedYieldPool: selectedYieldPool })),
+    selectedYieldPoolData: {},
+    setSelectedYieldPoolData: (selectedYieldPoolData) => set(() => ({ selectedYieldPoolData: selectedYieldPoolData })),
+    selectedYieldPoolDataLoading: false,
+    setSelectedYieldPoolDataLoading: (selectedYieldPoolDataLoading) => set(() => ({ selectedYieldPoolDataLoading: selectedYieldPoolDataLoading })),
+  })
+);

From ce7ff7514b196000d032a046ffa2dff31cfc182a Mon Sep 17 00:00:00 2001
From: Zak <zmooney@hotmail.co.uk>
Date: Tue, 17 Dec 2024 14:43:48 +0000
Subject: [PATCH 2/2] feat: default yield stable to 20

---
 src/components/vault/yield/YieldDepositModal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/vault/yield/YieldDepositModal.jsx b/src/components/vault/yield/YieldDepositModal.jsx
index 27d3fdf..8454411 100644
--- a/src/components/vault/yield/YieldDepositModal.jsx
+++ b/src/components/vault/yield/YieldDepositModal.jsx
@@ -40,7 +40,7 @@ const YieldDepositModal = (props) => {
   const { localThemeModeStore } = useLocalThemeModeStore();
   const chainId = useChainId();
   const [ yieldStage, setYieldStage ] = useState('');
-  const [ stableRatio, setStableRatio ] = useState(10);
+  const [ stableRatio, setStableRatio ] = useState(20);
   const [ minCollateral, setMinCollateral ] = useState(50);
 
   const formattedSymbol = ethers.encodeBytes32String(symbol);