feat: Add 'Supply' Button to Position Page

app/markets/components/markets.tsx

@@ -10,12 +10,12 @@ import * as keys from '@/utils/storageKeys';
 import { ERC20Token, getUniqueTokens } from '@/utils/tokens';
 import { Market } from '@/utils/types';
 
+import { SupplyModal } from '@/components/supplyModal';
 import AssetFilter from './AssetFilter';
 import CheckFilter from './CheckFilter';
 import { SortColumn } from './constants';
 import MarketsTable from './marketsTable';
 import NetworkFilter from './NetworkFilter';
-import { SupplyModal } from './supplyModal';
 import { applyFilterAndSort } from './utils';
 
 const defaultSortColumn = Number(

app/positions/components/PositionsContent.tsx

@@ -10,11 +10,13 @@ import LoadingScreen from '@/components/Status/LoadingScreen';
 import useUserPositions from '@/hooks/useUserPositions';
 
 import { MarketPosition } from '@/utils/types';
+import { SupplyModal } from '@/components/supplyModal';
+import { WithdrawModal } from '@/components/withdrawModal';
 import { PositionsSummaryTable } from './PositionsSummaryTable';
-import { WithdrawModal } from './withdrawModal';
 
 export default function Positions() {
-  const [showModal, setShowModal] = useState<boolean>(false);
+  const [showSupplyModal, setShowSupplyModal] = useState<boolean>(false);
+  const [showWithdrawModal, setShowWithdrawModal] = useState<boolean>(false);
   const [selectedPosition, setSelectedPosition] = useState<MarketPosition | null>(null);
 
   const { account } = useParams<{ account: string }>();
@@ -49,17 +51,27 @@ export default function Positions() {
           </div>
         </div>
 
-        {showModal && selectedPosition && (
+        {showWithdrawModal && selectedPosition && (
           <WithdrawModal
             position={selectedPosition}
             onClose={() => {
-              setShowModal(false);
+              setShowWithdrawModal(false);
               setSelectedPosition(null);
             }}
             refetch={refetch}
           />
         )}
 
+        {showSupplyModal && selectedPosition && (
+          <SupplyModal
+            market={selectedPosition.market}
+            onClose={() => {
+              setShowSupplyModal(false);
+              setSelectedPosition(null);
+            }}
+          />
+        )}
+
         {loading ? (
           <LoadingScreen message="Loading Supplies..." />
         ) : !hasSuppliedMarkets ? (
@@ -68,7 +80,8 @@ export default function Positions() {
           <div className="mt-4">
             <PositionsSummaryTable
               marketPositions={marketPositions}
-              setShowModal={setShowModal}
+              setShowWithdrawModal={setShowWithdrawModal}
+              setShowSupplyModal={setShowSupplyModal}
               setSelectedPosition={setSelectedPosition}
               refetch={refetch}
               isRefetching={isRefetching}

app/positions/components/PositionsSummaryTable.tsx

@@ -4,11 +4,10 @@ import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import Image from 'next/image';
 import { GrRefresh } from 'react-icons/gr';
 import { toast } from 'react-toastify';
-import { useAccount } from 'wagmi';
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable, formatBalance } from '@/utils/balance';
 import { getNetworkImg } from '@/utils/networks';
-import { MarketPosition, GroupedPosition } from '@/utils/types';
+import { MarketPosition, GroupedPosition, WarningWithDetail } from '@/utils/types';
 import {
   MarketAssetIndicator,
   MarketOracleIndicator,
@@ -17,23 +16,23 @@ import {
 import { RebalanceModal } from './RebalanceModal';
 import { SuppliedMarketsDetail } from './SuppliedMarketsDetail';
 
-type PositionTableProps = {
+type PositionsSummaryTableProps = {
   marketPositions: MarketPosition[];
-  setShowModal: (show: boolean) => void;
+  setShowWithdrawModal: (show: boolean) => void;
+  setShowSupplyModal: (show: boolean) => void;
   setSelectedPosition: (position: MarketPosition) => void;
   refetch: (onSuccess?: () => void) => void;
   isRefetching: boolean;
 };
 
 export function PositionsSummaryTable({
   marketPositions,
-  setShowModal,
+  setShowWithdrawModal,
+  setShowSupplyModal,
   setSelectedPosition,
   refetch,
   isRefetching,
-}: PositionTableProps) {
-  const { address: account } = useAccount();
-
+}: PositionsSummaryTableProps) {
   const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
   const [showRebalanceModal, setShowRebalanceModal] = useState(false);
   const [selectedGroupedPosition, setSelectedGroupedPosition] = useState<GroupedPosition | null>(
@@ -70,15 +69,15 @@ export function PositionsSummaryTable({
 
       // Combine warnings from all markets
       groupedPosition.allWarnings = [
-        ...new Set([...groupedPosition.allWarnings, ...position.warningsWithDetail]),
-      ];
+        ...new Set([...groupedPosition.allWarnings, ...(position.market.warningsWithDetail || [])]),
+      ] as WarningWithDetail[];
 
       const supplyAmount = Number(
         formatBalance(position.supplyAssets, position.market.loanAsset.decimals),
       );
       groupedPosition.totalSupply += supplyAmount;
 
-      const weightedApy = supplyAmount * position.market.dailyApys.netSupplyApy;
+      const weightedApy = supplyAmount * position.market.state.supplyApy;
       groupedPosition.totalWeightedApy += weightedApy;
 
       const collateralAddress = position.market.collateralAsset?.address;
@@ -163,9 +162,8 @@ export function PositionsSummaryTable({
   };
 
   const handleManualRefresh = () => {
-    refetch(() => {
-      toast.info('Data refreshed', { icon: <span>🚀</span> });
-    });
+    refetch(() => toast.info('Data refreshed', { icon: <span>🚀</span> }));
+    ;
   };
 
   return (
@@ -268,29 +266,27 @@ export function PositionsSummaryTable({
                     </div>
                   </td>
                   <td data-label="Actions" className="text-right">
-                    <button
-                      type="button"
-                      className="bg-hovered rounded-sm p-2 text-xs duration-300 ease-in-out hover:bg-orange-500"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (account) {
+                    <div className="flex space-x-2">
+                      <button
+                        type="button"
+                        className="bg-hovered rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out hover:bg-monarch-primary"
+                        onClick={() => {
                           setSelectedGroupedPosition(position);
                           setShowRebalanceModal(true);
-                        } else {
-                          toast.info('Please connect your wallet to rebalance');
-                        }
-                      }}
-                    >
-                      Rebalance
-                    </button>
+                        }}
+                      >
+                        Rebalance
+                      </button>
+                    </div>
                   </td>
                 </tr>
                 {isExpanded && (
                   <tr>
                     <td colSpan={7} className="p-0">
                       <SuppliedMarketsDetail
                         groupedPosition={position}
-                        setShowModal={setShowModal}
+                        setShowSupplyModal={setShowSupplyModal}
+                        setShowWithdrawModal={setShowWithdrawModal}
                         setSelectedPosition={setSelectedPosition}
                       />
                     </td>

app/positions/components/SuppliedMarketsDetail.tsx

@@ -11,7 +11,8 @@ import { getCollateralColor } from '../utils/colors';
 
 type SuppliedMarketsDetailProps = {
   groupedPosition: GroupedPosition;
-  setShowModal: (show: boolean) => void;
+  setShowWithdrawModal: (show: boolean) => void;
+  setShowSupplyModal: (show: boolean) => void;
   setSelectedPosition: (position: MarketPosition) => void;
 };
 
@@ -38,7 +39,8 @@ function WarningTooltip({ warnings }: { warnings: WarningWithDetail[] }) {
 
 export function SuppliedMarketsDetail({
   groupedPosition,
-  setShowModal,
+  setShowWithdrawModal,
+  setShowSupplyModal,
   setSelectedPosition,
 }: SuppliedMarketsDetailProps) {
   const sortedMarkets = [...groupedPosition.markets].sort(
@@ -115,16 +117,16 @@ export function SuppliedMarketsDetail({
             );
             const percentageOfPortfolio =
               totalSupply > 0 ? (suppliedAmount / totalSupply) * 100 : 0;
-            const warningColor = getWarningColor(position.warningsWithDetail);
+            const warningColor = getWarningColor(position.market.warningsWithDetail);
 
             return (
               <tr key={position.market.uniqueKey} className="gap-1">
                 <td data-label="Market" className="text-center">
                   <div className="flex items-center justify-center">
                     <div className="mr-1 w-4">
-                      {position.warningsWithDetail.length > 0 ? (
+                      {position.market.warningsWithDetail.length > 0 ? (
                         <Tooltip
-                          content={<WarningTooltip warnings={position.warningsWithDetail} />}
+                          content={<WarningTooltip warnings={position.market.warningsWithDetail} />}
                           placement="top"
                         >
                           <div>
@@ -193,17 +195,27 @@ export function SuppliedMarketsDetail({
                     </span>
                   </div>
                 </td>
-                <td data-label="Actions" className="text-right">
+                <td data-label="Actions" className="flex justify-center gap-2 text-right">
                   <button
                     type="button"
                     className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500"
                     onClick={() => {
-                      setShowModal(true);
                       setSelectedPosition(position);
+                      setShowWithdrawModal(true);
                     }}
                   >
                     Withdraw
                   </button>
+                  <button
+                    type="button"
+                    className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500"
+                    onClick={() => {
+                      setSelectedPosition(position);
+                      setShowSupplyModal(true);
+                    }}
+                  >
+                    Supply
+                  </button>
                 </td>
               </tr>
             );