feat: allow supplying on market page

app/market/[chainId]/[marketid]/content.tsx

@@ -12,6 +12,7 @@ import { Spinner } from '@/components/common/Spinner';
 import { OracleFeedInfo } from '@/components/FeedInfo/OracleFeedInfo';
 import Header from '@/components/layout/header/Header';
 import OracleVendorBadge from '@/components/OracleVendorBadge';
+import { SupplyModal } from '@/components/supplyModal';
 import { useMarket, useMarketHistoricalData } from '@/hooks/useMarket';
 import MORPHO_LOGO from '@/imgs/tokens/morpho.svg';
 import { getExplorerURL, getMarketURL } from '@/utils/external';
@@ -31,6 +32,8 @@ function MarketContent() {
   const network = Number(chainId as string) as SupportedNetworks;
   const networkImg = getNetworkImg(network);
 
+  const [showSupplyModal, setShowSupplyModal] = useState(false);
+
   const router = useRouter();
   const searchParams = useSearchParams();
   const [rateTimeRange, setRateTimeRange] = useState<TimeseriesOptions>({
@@ -129,18 +132,25 @@ function MarketContent() {
             Back to Markets
           </Button>
 
-          <Button
-            size="md"
-            className="mb-4"
-            onClick={() =>
-              window.open(getMarketURL(market.uniqueKey, market.morphoBlue.chain.id), '_blank')
-            }
-          >
-            View on Morpho Blue
-            <Image src={MORPHO_LOGO} alt="Morpho Logo" width={20} height={20} className="ml-2" />
-          </Button>
+          <div className="flex gap-2">
+            <Button onClick={() => setShowSupplyModal(true)}>Supply</Button>
+            <Button
+              size="md"
+              className="mb-4"
+              onClick={() =>
+                window.open(getMarketURL(market.uniqueKey, market.morphoBlue.chain.id), '_blank')
+              }
+            >
+              View on Morpho
+              <Image src={MORPHO_LOGO} alt="Morpho Logo" width={20} height={20} className="ml-2" />
+            </Button>
+          </div>
         </div>
 
+        {showSupplyModal && (
+          <SupplyModal market={market} onClose={() => setShowSupplyModal(false)} />
+        )}
+
         <h1 className="mb-8 text-center text-3xl">
           {market.loanAsset.symbol}/{market.collateralAsset.symbol} Market
         </h1>

app/positions/components/onboarding/SetupPositions.tsx

@@ -239,8 +239,6 @@ export function SetupPositions() {
       // trigger the tx. goToNextStep() be called as a `onSuccess` callback
       await approveAndSupply();
     } catch (supplyError) {
-      console.error('Supply failed:', supplyError);
-      // Error toast is already shown in useMultiMarketSupply
     } finally {
       setIsSupplying(false);
     }

src/components/supplyModal.tsx

@@ -177,7 +177,7 @@ export function SupplyModal({ market, onClose }: SupplyModalProps): JSX.Element
       setShowProcessModal(false);
     } catch (error: unknown) {
       setShowProcessModal(false);
-      toast.error('Supply failed', 'Supply to market failed or cancelled');
+      toast.error('Supply Failed', 'Supply to market failed or cancelled');
     }
   }, [
     account,

src/contexts/MarketsContext.tsx

@@ -51,6 +51,8 @@ export function MarketsProvider({ children }: MarketsProviderProps) {
     refetch: refetchLiquidations,
   } = useLiquidations();
 
+  console.log('markets', markets);
+
   const fetchMarkets = useCallback(
     async (isRefetch = false) => {
       try {

src/graphql/queries.ts

@@ -19,6 +19,7 @@ export const marketFragment = `
     irmAddress
     oracleAddress
     collateralPrice
+    whitelisted
     morphoBlue {
       id
       address