From b8bcbe06cfb6876d48c89f91fa6cfae4293c775e Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 11 Feb 2025 21:49:10 +0800
Subject: [PATCH] feat: allow supplying on market page

---
 app/market/[chainId]/[marketid]/content.tsx   | 30 ++++++++++++-------
 .../components/onboarding/SetupPositions.tsx  |  2 --
 src/components/supplyModal.tsx                |  2 +-
 src/contexts/MarketsContext.tsx               |  2 ++
 src/graphql/queries.ts                        |  1 +
 5 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/market/[chainId]/[marketid]/content.tsx b/app/market/[chainId]/[marketid]/content.tsx
index c5753724..850d4fa2 100644
--- a/app/market/[chainId]/[marketid]/content.tsx
+++ b/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>
diff --git a/app/positions/components/onboarding/SetupPositions.tsx b/app/positions/components/onboarding/SetupPositions.tsx
index d120fffd..449d16f4 100644
--- a/app/positions/components/onboarding/SetupPositions.tsx
+++ b/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);
     }
diff --git a/src/components/supplyModal.tsx b/src/components/supplyModal.tsx
index 39ddacc0..088dbef8 100644
--- a/src/components/supplyModal.tsx
+++ b/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,
diff --git a/src/contexts/MarketsContext.tsx b/src/contexts/MarketsContext.tsx
index fcc2ba30..e5e46bcb 100644
--- a/src/contexts/MarketsContext.tsx
+++ b/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 {
diff --git a/src/graphql/queries.ts b/src/graphql/queries.ts
index 75d563ad..001a62d9 100644
--- a/src/graphql/queries.ts
+++ b/src/graphql/queries.ts
@@ -19,6 +19,7 @@ export const marketFragment = `
     irmAddress
     oracleAddress
     collateralPrice
+    whitelisted
     morphoBlue {
       id
       address