From 5f192d79a089b76f4a70af99ad3d56ecadff61d3 Mon Sep 17 00:00:00 2001
From: Anton Cheng <antonassocareer@gmail.com>
Date: Fri, 11 Oct 2024 16:41:34 +0800
Subject: [PATCH 1/5] chore: new way to display positions

---
 app/home/HomePage.tsx                         |   5 +-
 app/layout.tsx                                |   2 +-
 app/positions/components/PositionsContent.tsx |   2 +-
 .../components/PositionsSummaryTable.tsx      | 109 ++++++++----------
 .../components/SuppliedMarketsDetail.tsx      | 104 +++++++++++------
 src/components/TokenIcon.tsx                  |  21 ++++
 src/components/layout/header/Navbar.tsx       |   8 +-
 src/hooks/useUserPositions.ts                 |  18 ++-
 src/utils/types.ts                            |   2 +
 9 files changed, 164 insertions(+), 107 deletions(-)
 create mode 100644 src/components/TokenIcon.tsx

diff --git a/app/home/HomePage.tsx b/app/home/HomePage.tsx
index 3676ad88..aa9c2801 100644
--- a/app/home/HomePage.tsx
+++ b/app/home/HomePage.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
+import { useAccount } from 'wagmi';
 import PrimaryButton from '@/components/common/PrimaryButton';
 import Footer from '@/components/layout/footer/Footer';
 import backgroundImage from '@/imgs/bg/bg.png';
@@ -16,6 +17,8 @@ export default function HomePage() {
     return () => clearInterval(interval);
   }, []);
 
+  const { address } = useAccount();
+
   return (
     <div className="flex min-h-screen flex-col bg-primary">
       <div
@@ -49,7 +52,7 @@ export default function HomePage() {
           <PrimaryButton isSecondary href="/info">
             Why Monarch
           </PrimaryButton>
-          <PrimaryButton href="/markets">View Markets</PrimaryButton>
+          <PrimaryButton href={`/positions/${address ?? ''}`}>View Portfolio</PrimaryButton>
         </div>
       </div>
       <Footer />
diff --git a/app/layout.tsx b/app/layout.tsx
index 5a90b55f..a84da744 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -33,7 +33,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             {children}
             <RiskNotificationModal />
           </OnchainProviders>
-          <ToastContainer position="bottom-right" />
+          <ToastContainer position="bottom-right" bodyClassName="font-zen" />
         </Providers>
       </body>
       <GoogleAnalytics />
diff --git a/app/positions/components/PositionsContent.tsx b/app/positions/components/PositionsContent.tsx
index e0f267e5..b952b5b1 100644
--- a/app/positions/components/PositionsContent.tsx
+++ b/app/positions/components/PositionsContent.tsx
@@ -28,7 +28,7 @@ export default function Positions() {
       <Header />
       <div className="container gap-8" style={{ padding: '0 5%' }}>
         <div className="flex items-center justify-between pb-4">
-          <h1 className="flex items-center gap-2 py-4 font-zen text-2xl">Your Supplies</h1>
+          <h1 className="flex items-center gap-2 py-4 font-zen text-2xl">Portfolio</h1>
           <div className="flex gap-4">
             <Link href={`/history/${account}`}>
               <button
diff --git a/app/positions/components/PositionsSummaryTable.tsx b/app/positions/components/PositionsSummaryTable.tsx
index 1b2c73db..edb2aae8 100644
--- a/app/positions/components/PositionsSummaryTable.tsx
+++ b/app/positions/components/PositionsSummaryTable.tsx
@@ -5,11 +5,15 @@ 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 { findToken } from '@/utils/tokens';
-import { MarketPosition, GroupedPosition } from '@/utils/types';
-import { getCollateralColor } from '../utils/colors';
+import { MarketPosition, GroupedPosition, Market } from '@/utils/types';
+import {
+  MarketAssetIndicator,
+  MarketDebtIndicator,
+  MarketOracleIndicator,
+} from 'app/markets/components/RiskIndicator';
 import { RebalanceModal } from './RebalanceModal';
 import { SuppliedMarketsDetail } from './SuppliedMarketsDetail';
 
@@ -57,6 +61,7 @@ export function PositionsSummaryTable({
           collaterals: [],
           markets: [],
           processedCollaterals: [],
+          warningsWithDetail: [],
         };
         acc.push(groupedPosition);
       }
@@ -91,6 +96,16 @@ export function PositionsSummaryTable({
       }
 
       groupedPosition.markets.push(position);
+
+      // Combine warnings from all markets
+      if (!groupedPosition.warningsWithDetail) {
+        groupedPosition.warningsWithDetail = [];
+      }
+      groupedPosition.warningsWithDetail = [
+        ...groupedPosition.warningsWithDetail,
+        ...position.warningsWithDetail,
+      ];
+
       return acc;
     }, []);
   }, [marketPositions]);
@@ -162,7 +177,7 @@ export function PositionsSummaryTable({
     <div className="space-y-4 overflow-x-auto">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <h2 className="text-xl font-semibold">Position Summary</h2>
+          <h2 className="text-xl font-semibold">Your Supply</h2>
           {isRefetching && <Spinner size="sm" />}
         </div>
         <button
@@ -180,10 +195,10 @@ export function PositionsSummaryTable({
           <tr>
             <th className="w-10" />
             <th className="w-10">Network</th>
-            <th>Asset</th>
-            <th>Total Supplied</th>
+            <th>Size</th>
             <th>Avg APY</th>
-            <th className="w-1/4">Collateral Exposure</th>
+            <th>Collateral Exposure</th>
+            <th>Warnings</th>
             <th>Actions</th>
           </tr>
         </thead>
@@ -208,65 +223,43 @@ export function PositionsSummaryTable({
                       />
                     </div>
                   </td>
-                  <td data-label="Asset">
+                  <td data-label="Size">
                     <div className="flex items-center justify-center gap-2">
-                      {findToken(position.loanAssetAddress, position.chainId)?.img && (
-                        <Image
-                          src={findToken(position.loanAssetAddress, position.chainId)?.img ?? ''}
-                          alt={position.loanAsset}
-                          width={24}
-                          height={24}
-                        />
-                      )}
-                      <span className="font-medium">{position.loanAsset}</span>
-                    </div>
-                  </td>
-                  <td data-label="Total Supplied">
-                    <div className="text-center">
-                      {formatReadable(position.totalSupply)} {position.loanAsset}
+                      <span className="font-medium">{formatReadable(position.totalSupply)}</span>
+                      <span>{position.loanAsset}</span>
+                      <TokenIcon
+                        address={position.loanAssetAddress}
+                        chainId={position.chainId}
+                        width={16}
+                        height={16}
+                      />
                     </div>
                   </td>
                   <td data-label="Avg APY">
                     <div className="text-center">{formatReadable(avgApy * 100)}%</div>
                   </td>
-                  <td data-label="Collateral Breakdown" className="w-1/4">
-                    <div className="flex h-3 w-full overflow-hidden rounded-full bg-secondary">
-                      {position.processedCollaterals.map((collateral, colIndex) => (
-                        <div
-                          key={`${collateral.address}-${colIndex}`}
-                          className="h-full opacity-70"
-                          style={{
-                            width: `${collateral.percentage}%`,
-                            backgroundColor:
-                              collateral.symbol === 'Others'
-                                ? '#A0AEC0'
-                                : getCollateralColor(collateral.address),
-                          }}
-                          title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`}
-                        />
-                      ))}
-                    </div>
-                    <div className="mt-1 flex flex-wrap justify-center text-xs">
-                      {position.processedCollaterals.map((collateral, colIndex) => (
-                        <span
-                          key={`${collateral.address}-${colIndex}`}
-                          className="mb-1 mr-2 opacity-70"
-                        >
-                          <span
-                            style={{
-                              color:
-                                collateral.symbol === 'Others'
-                                  ? '#A0AEC0'
-                                  : getCollateralColor(collateral.address),
-                            }}
-                          >
-                            ■
-                          </span>{' '}
-                          {collateral.symbol}
-                        </span>
-                      ))}
+                  <td data-label="Collateral Exposure">
+                    <div className="flex items-center justify-center gap-1">
+                      {position.collaterals.length > 0 ? (
+                        position.collaterals.map((collateral, index) => (
+                          <TokenIcon
+                            key={`${collateral.address}-${index}`}
+                            address={collateral.address}
+                            chainId={position.chainId}
+                            width={20}
+                            height={20}
+                          />
+                        ))
+                      ) : (
+                        <span className="text-sm text-gray-500">No known collaterals</span>
+                      )}
                     </div>
                   </td>
+                  <td data-label="Warnings" className="flex items-center justify-center gap-1 ">
+                    <MarketAssetIndicator market={position as unknown as Market} />
+                    <MarketOracleIndicator market={position as unknown as Market} />
+                    <MarketDebtIndicator market={position as unknown as Market} />
+                  </td>
                   <td data-label="Actions" className="text-right">
                     <button
                       type="button"
diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index 8d583df3..e1dac453 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
-import Image from 'next/image';
+import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable, formatBalance } from '@/utils/balance';
 import { getMarketURL } from '@/utils/external';
-import { findToken } from '@/utils/tokens';
 import { MarketPosition, GroupedPosition } from '@/utils/types';
+import { getCollateralColor } from '../utils/colors';
 
 type SuppliedMarketsDetailProps = {
   groupedPosition: GroupedPosition;
@@ -17,7 +17,6 @@ export function SuppliedMarketsDetail({
   setShowModal,
   setSelectedPosition,
 }: SuppliedMarketsDetailProps) {
-  // Sort markets by supplied size (descending order)
   const sortedMarkets = [...groupedPosition.markets].sort(
     (a, b) =>
       Number(formatBalance(b.supplyAssets, b.market.loanAsset.decimals)) -
@@ -27,30 +26,68 @@ export function SuppliedMarketsDetail({
   const totalSupply = groupedPosition.totalSupply;
 
   return (
-    <div className="bg-secondary px-2 py-4">
+    <div className="bg-secondary bg-opacity-20 p-4">
+      <div className="mb-4 flex items-center justify-center">
+        {/* collateral exposure block */}
+        <div className="my-4 w-1/2">
+          <h3 className="mb-2 text-base font-semibold">Collateral Exposure</h3>
+          <div className="flex h-3 w-full overflow-hidden rounded-full bg-gray-200">
+            {groupedPosition.processedCollaterals.map((collateral, colIndex) => (
+              <div
+                key={`${collateral.address}-${colIndex}`}
+                className="h-full opacity-70"
+                style={{
+                  width: `${collateral.percentage}%`,
+                  backgroundColor:
+                    collateral.symbol === 'Others'
+                      ? '#A0AEC0'
+                      : getCollateralColor(collateral.address),
+                }}
+                title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`}
+              />
+            ))}
+          </div>
+          <div className="mt-1 flex flex-wrap justify-center text-xs">
+            {groupedPosition.processedCollaterals.map((collateral, colIndex) => (
+              <span key={`${collateral.address}-${colIndex}`} className="mb-1 mr-2 opacity-70">
+                <span
+                  style={{
+                    color:
+                      collateral.symbol === 'Others'
+                        ? '#A0AEC0'
+                        : getCollateralColor(collateral.address),
+                  }}
+                >
+                  ■
+                </span>{' '}
+                {collateral.symbol}: {formatReadable(collateral.percentage)}%
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
       <table className="no-hover-effect w-full font-zen">
         <thead className="table-header">
           <tr>
-            <th>Market ID</th>
+            <th>Market</th>
             <th>Collateral</th>
             <th>LLTV</th>
             <th>APY</th>
             <th>Supplied</th>
-            <th>% of Market</th>
-            <th>% of My Supply</th>
+            <th>% of Portfolio</th>
             <th>Actions</th>
           </tr>
         </thead>
-        <tbody className="table-body text-sm">
+        <tbody className="table-body text-xs">
           {sortedMarkets.map((position) => {
             const suppliedAmount = Number(
               formatBalance(position.supplyAssets, position.market.loanAsset.decimals),
             );
-            const percentageOfMySupply = (suppliedAmount / totalSupply) * 100;
+            const percentageOfPortfolio = (suppliedAmount / totalSupply) * 100;
 
             return (
-              <tr key={position.market.uniqueKey}>
-                <td data-label="Market ID" className="text-center">
+              <tr key={position.market.uniqueKey} className="gap-1">
+                <td data-label="Market" className="text-center">
                   <a
                     className="group flex items-center justify-center gap-1 no-underline hover:underline"
                     href={getMarketURL(
@@ -67,22 +104,12 @@ export function SuppliedMarketsDetail({
                 <td data-label="Collateral" className="text-center">
                   {position.market.collateralAsset ? (
                     <div className="flex items-center justify-center gap-1">
-                      {findToken(
-                        position.market.collateralAsset.address,
-                        position.market.morphoBlue.chain.id,
-                      )?.img && (
-                        <Image
-                          src={
-                            findToken(
-                              position.market.collateralAsset.address,
-                              position.market.morphoBlue.chain.id,
-                            )?.img ?? ''
-                          }
-                          alt={position.market.collateralAsset.symbol}
-                          width={18}
-                          height={18}
-                        />
-                      )}
+                      <TokenIcon
+                        address={position.market.collateralAsset.address}
+                        chainId={position.market.morphoBlue.chain.id}
+                        width={18}
+                        height={18}
+                      />
                       {position.market.collateralAsset.symbol}
                     </div>
                   ) : (
@@ -98,20 +125,23 @@ export function SuppliedMarketsDetail({
                 <td data-label="Supplied" className="text-center">
                   {formatReadable(suppliedAmount)} {position.market.loanAsset.symbol}
                 </td>
-                <td data-label="% of Market" className="text-center">
-                  {formatReadable(
-                    (Number(position.supplyAssets) / Number(position.market.state.supplyAssets)) *
-                      100,
-                  )}
-                  %
-                </td>
-                <td data-label="% of My Supply" className="text-center">
-                  {formatReadable(percentageOfMySupply)}%
+                <td data-label="% of Portfolio" className="text-center">
+                  <div className="flex items-center">
+                    <div className="mr-2 h-2 w-full rounded-full bg-gray-200">
+                      <div
+                        className="h-full rounded-full bg-blue-500"
+                        style={{ width: `${percentageOfPortfolio}%` }}
+                       />
+                    </div>
+                    <span className="whitespace-nowrap">
+                      {formatReadable(percentageOfPortfolio)}%
+                    </span>
+                  </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"
+                    className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500"
                     onClick={() => {
                       setShowModal(true);
                       setSelectedPosition(position);
diff --git a/src/components/TokenIcon.tsx b/src/components/TokenIcon.tsx
new file mode 100644
index 00000000..08db7cb7
--- /dev/null
+++ b/src/components/TokenIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Image from 'next/image';
+import { findToken } from '@/utils/tokens';
+
+type TokenIconProps = {
+  address: string;
+  chainId: number;
+  width: number;
+  height: number;
+};
+
+export function TokenIcon({ address, chainId, width, height }: TokenIconProps) {
+  const token = findToken(address, chainId);
+
+  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+  if (!token || !token.img) {
+    return <div className="rounded-full bg-gray-300" style={{ width, height }} />;
+  }
+
+  return <Image src={token.img} alt={token.symbol || 'Token'} width={width} height={height} />;
+}
diff --git a/src/components/layout/header/Navbar.tsx b/src/components/layout/header/Navbar.tsx
index 53709e7c..1845131a 100644
--- a/src/components/layout/header/Navbar.tsx
+++ b/src/components/layout/header/Navbar.tsx
@@ -76,13 +76,13 @@ function Navbar() {
         <div className="flex items-center justify-start gap-8">
           <ul className="hidden items-center justify-start gap-4 text-opacity-80 md:flex">
             <li className="flex">
-              <NavbarLink href="/markets" matchKey="markets">
-                Markets
+              <NavbarLink href={`/positions/${address ?? ''}`} matchKey="positions">
+                Dashboard
               </NavbarLink>
             </li>
             <li className="flex">
-              <NavbarLink href={`/positions/${address ?? ''}`} matchKey="positions">
-                Portfolio
+              <NavbarLink href="/markets" matchKey="markets">
+                Markets
               </NavbarLink>
             </li>
             <li className="flex">
diff --git a/src/hooks/useUserPositions.ts b/src/hooks/useUserPositions.ts
index 54e63742..deeafe9f 100644
--- a/src/hooks/useUserPositions.ts
+++ b/src/hooks/useUserPositions.ts
@@ -2,7 +2,8 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { SupportedNetworks } from '@/utils/networks';
-import { MarketPosition, UserTransaction } from '@/utils/types';
+import { Market, MarketPosition, UserTransaction } from '@/utils/types';
+import { getMarketWarningsWithDetail } from '@/utils/warnings';
 
 const query = `query getUserMarketPositions(
   $address: String!
@@ -83,6 +84,11 @@ const query = `query getUserMarketPositions(
         oracleInfo {
           type
         }
+        warnings {
+          type
+          level
+          __typename
+        }
       }
     }
     transactions {
@@ -188,12 +194,14 @@ const useUserPositions = (user: string | undefined) => {
           }
         }
 
-        const filtered = marketPositions.filter(
-          (position: MarketPosition) => position.supplyShares.toString() !== '0',
-        );
+        const filtered = marketPositions
+          .filter((position: MarketPosition) => position.supplyShares.toString() !== '0')
+          .map((position: MarketPosition) => ({
+            ...position,
+            warningsWithDetail: getMarketWarningsWithDetail(position.market as unknown as Market),
+          }));
 
         setHistory(transactions);
-
         setData(filtered);
       } catch (_error) {
         setError(_error);
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 86755df5..13ccfa20 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -58,6 +58,7 @@ export type MarketPosition = {
       utilization: number;
     };
   };
+  warningsWithDetail: WarningWithDetail[];
 };
 
 export enum UserTxTypes {
@@ -238,6 +239,7 @@ export type GroupedPosition = {
     amount: number;
     percentage: number;
   }[];
+  warningsWithDetail: WarningWithDetail[];
 };
 
 // Add this type to the existing types in the file

From 8999f5c130a6d9695c3b5438f2048876751a6096 Mon Sep 17 00:00:00 2001
From: Anton Cheng <antonassocareer@gmail.com>
Date: Fri, 11 Oct 2024 17:28:27 +0800
Subject: [PATCH 2/5] chore: mostly done

---
 app/markets/components/RiskIndicator.tsx      | 62 +++++++++++---
 .../components/PositionsSummaryTable.tsx      | 83 ++++++++++---------
 .../components/SuppliedMarketsDetail.tsx      | 77 +++++++++++++----
 src/utils/types.ts                            |  2 +-
 src/utils/warnings.ts                         |  2 +-
 5 files changed, 155 insertions(+), 71 deletions(-)

diff --git a/app/markets/components/RiskIndicator.tsx b/app/markets/components/RiskIndicator.tsx
index 50714821..dd834bb1 100644
--- a/app/markets/components/RiskIndicator.tsx
+++ b/app/markets/components/RiskIndicator.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from '@nextui-org/tooltip';
-import { Market } from '@/utils/types';
+import { Market, WarningWithDetail } from '@/utils/types';
 import { WarningCategory } from '@/utils/types';
 
 type RiskFlagProps = {
@@ -22,57 +22,93 @@ export function RiskIndicator({ level, description }: RiskFlagProps) {
 export function RiskIndicatorFromWarning({
   market,
   category,
-  greeDescription,
+  greenDescription,
   yellowDescription,
   redDescription,
+  isBatched = false,
 }: {
-  market: Market;
+  market: { warningsWithDetail: WarningWithDetail[] };
   category: WarningCategory;
-  greeDescription: string;
+  greenDescription: string;
   yellowDescription: string;
   redDescription: string;
+  isBatched?: boolean;
 }) {
   const warnings = market.warningsWithDetail.filter((w) => w.category === category);
   if (warnings.length === 0) {
-    return <RiskIndicator level="green" description={greeDescription} />;
+    return <RiskIndicator level="green" description={greenDescription} />;
   }
   if (warnings.some((warning) => warning.level === 'alert')) {
-    return <RiskIndicator level="red" description={redDescription} />;
-  } else return <RiskIndicator level="yellow" description={yellowDescription} />;
+    return (
+      <RiskIndicator
+        level="red"
+        description={isBatched ? `One or more markets have: ${redDescription}` : redDescription}
+      />
+    );
+  } else
+    return (
+      <RiskIndicator
+        level="yellow"
+        description={
+          isBatched ? `One or more markets have: ${yellowDescription}` : yellowDescription
+        }
+      />
+    );
 }
 
-export function MarketAssetIndicator({ market }: { market: Market }) {
+export function MarketAssetIndicator({
+  market,
+  isBatched = false,
+}: {
+  market: { warningsWithDetail: WarningWithDetail[] };
+  isBatched?: boolean;
+}) {
   return (
     <RiskIndicatorFromWarning
       market={market}
       category={WarningCategory.asset}
-      greeDescription="Recognized assets"
+      greenDescription="Recognized assets"
       yellowDescription="Some warnings flagged with the assets"
       redDescription="Potentially dangerous assets"
+      isBatched={isBatched}
     />
   );
 }
 
-export function MarketOracleIndicator({ market }: { market: Market }) {
+export function MarketOracleIndicator({
+  market,
+  isBatched = false,
+}: {
+  market: { warningsWithDetail: WarningWithDetail[] };
+  isBatched?: boolean;
+}) {
   return (
     <RiskIndicatorFromWarning
       market={market}
       category={WarningCategory.oracle}
-      greeDescription="Recognized oracles"
+      greenDescription="Recognized oracles"
       yellowDescription="Some warnings flagged with the oracle"
       redDescription="Some alerts flagged with the oracle"
+      isBatched={isBatched}
     />
   );
 }
 
-export function MarketDebtIndicator({ market }: { market: Market }) {
+export function MarketDebtIndicator({
+  market,
+  isBatched = false,
+}: {
+  market: { warningsWithDetail: WarningWithDetail[] };
+  isBatched?: boolean;
+}) {
   return (
     <RiskIndicatorFromWarning
       market={market}
       category={WarningCategory.debt}
-      greeDescription="No bad debt"
+      greenDescription="No bad debt"
       yellowDescription="Bad debt has occurred"
       redDescription="Bad debt higher than 1% of supply"
+      isBatched={isBatched}
     />
   );
 }
diff --git a/app/positions/components/PositionsSummaryTable.tsx b/app/positions/components/PositionsSummaryTable.tsx
index edb2aae8..3371e8c7 100644
--- a/app/positions/components/PositionsSummaryTable.tsx
+++ b/app/positions/components/PositionsSummaryTable.tsx
@@ -8,14 +8,11 @@ import { useAccount } from 'wagmi';
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable, formatBalance } from '@/utils/balance';
 import { getNetworkImg } from '@/utils/networks';
-import { MarketPosition, GroupedPosition, Market } from '@/utils/types';
-import {
-  MarketAssetIndicator,
-  MarketDebtIndicator,
-  MarketOracleIndicator,
-} from 'app/markets/components/RiskIndicator';
+import { MarketPosition, GroupedPosition, WarningWithDetail, WarningCategory } from '@/utils/types';
+import { getCollateralColor } from '../utils/colors';
 import { RebalanceModal } from './RebalanceModal';
 import { SuppliedMarketsDetail } from './SuppliedMarketsDetail';
+import { MarketAssetIndicator, MarketOracleIndicator, MarketDebtIndicator } from 'app/markets/components/RiskIndicator';
 
 type PositionTableProps = {
   marketPositions: MarketPosition[];
@@ -39,6 +36,7 @@ export function PositionsSummaryTable({
   const [selectedGroupedPosition, setSelectedGroupedPosition] = useState<GroupedPosition | null>(
     null,
   );
+  const [hoveredWarningCategory, setHoveredWarningCategory] = useState<WarningCategory | null>(null);
 
   const groupedPositions: GroupedPosition[] = useMemo(() => {
     return marketPositions.reduce((acc: GroupedPosition[], position) => {
@@ -61,20 +59,24 @@ export function PositionsSummaryTable({
           collaterals: [],
           markets: [],
           processedCollaterals: [],
-          warningsWithDetail: [],
+          allWarnings: [], // Initialize allWarnings as an empty array
         };
         acc.push(groupedPosition);
       }
 
+      groupedPosition.markets.push(position);
+
+      // Combine warnings from all markets
+      groupedPosition.allWarnings = [
+        ...new Set([...groupedPosition.allWarnings, ...position.warningsWithDetail]),
+      ];
+
       const supplyAmount = Number(
         formatBalance(position.supplyAssets, position.market.loanAsset.decimals),
       );
       groupedPosition.totalSupply += supplyAmount;
 
       const weightedApy = supplyAmount * position.market.dailyApys.netSupplyApy;
-      if (!groupedPosition.totalWeightedApy) {
-        groupedPosition.totalWeightedApy = 0;
-      }
       groupedPosition.totalWeightedApy += weightedApy;
 
       const collateralAddress = position.market.collateralAsset?.address;
@@ -95,17 +97,6 @@ export function PositionsSummaryTable({
         }
       }
 
-      groupedPosition.markets.push(position);
-
-      // Combine warnings from all markets
-      if (!groupedPosition.warningsWithDetail) {
-        groupedPosition.warningsWithDetail = [];
-      }
-      groupedPosition.warningsWithDetail = [
-        ...groupedPosition.warningsWithDetail,
-        ...position.warningsWithDetail,
-      ];
-
       return acc;
     }, []);
   }, [marketPositions]);
@@ -140,6 +131,8 @@ export function PositionsSummaryTable({
     });
   }, [groupedPositions]);
 
+  console.log('processedPositions', processedPositions);
+
   // Update selectedGroupedPosition when groupedPositions change, don't depend on selectedGroupedPosition
   useEffect(() => {
     if (selectedGroupedPosition) {
@@ -173,6 +166,12 @@ export function PositionsSummaryTable({
     });
   };
 
+  const getWarningColor = (warnings: WarningWithDetail[]) => {
+    if (warnings.some(w => w.level === 'alert')) return 'text-red-500';
+    if (warnings.some(w => w.level === 'warning')) return 'text-yellow-500';
+    return '';
+  };
+
   return (
     <div className="space-y-4 overflow-x-auto">
       <div className="flex items-center justify-between">
@@ -207,6 +206,7 @@ export function PositionsSummaryTable({
             const rowKey = `${position.loanAssetAddress}-${position.chainId}`;
             const isExpanded = expandedRows.has(rowKey);
             const avgApy = position.totalWeightedApy / position.totalSupply;
+
             return (
               <React.Fragment key={rowKey}>
                 <tr className="cursor-pointer hover:bg-gray-50" onClick={() => toggleRow(rowKey)}>
@@ -239,26 +239,29 @@ export function PositionsSummaryTable({
                     <div className="text-center">{formatReadable(avgApy * 100)}%</div>
                   </td>
                   <td data-label="Collateral Exposure">
-                    <div className="flex items-center justify-center gap-1">
-                      {position.collaterals.length > 0 ? (
-                        position.collaterals.map((collateral, index) => (
-                          <TokenIcon
-                            key={`${collateral.address}-${index}`}
-                            address={collateral.address}
-                            chainId={position.chainId}
-                            width={20}
-                            height={20}
-                          />
-                        ))
-                      ) : (
-                        <span className="text-sm text-gray-500">No known collaterals</span>
-                      )}
+                    <div className="flex h-3 w-full overflow-hidden rounded-full bg-secondary">
+                      {position.processedCollaterals.map((collateral, colIndex) => (
+                        <div
+                          key={`${collateral.address}-${colIndex}`}
+                          className="h-full opacity-70"
+                          style={{
+                            width: `${collateral.percentage}%`,
+                            backgroundColor:
+                              collateral.symbol === 'Others'
+                                ? '#A0AEC0'
+                                : getCollateralColor(collateral.address),
+                          }}
+                          title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`}
+                        />
+                      ))}
                     </div>
                   </td>
-                  <td data-label="Warnings" className="flex items-center justify-center gap-1 ">
-                    <MarketAssetIndicator market={position as unknown as Market} />
-                    <MarketOracleIndicator market={position as unknown as Market} />
-                    <MarketDebtIndicator market={position as unknown as Market} />
+                  <td data-label="Warnings" className="align-middle">
+                    <div className="flex items-center justify-center gap-1">
+                      <MarketAssetIndicator market={{ warningsWithDetail: position.allWarnings }} isBatched />
+                      <MarketOracleIndicator market={{ warningsWithDetail: position.allWarnings }} isBatched />
+                      <MarketDebtIndicator market={{ warningsWithDetail: position.allWarnings }} isBatched />
+                    </div>
                   </td>
                   <td data-label="Actions" className="text-right">
                     <button
@@ -305,4 +308,4 @@ export function PositionsSummaryTable({
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index e1dac453..8568c4b4 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
+import { Tooltip } from '@nextui-org/tooltip';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
+import { IoWarningOutline } from "react-icons/io5";
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable, formatBalance } from '@/utils/balance';
 import { getMarketURL } from '@/utils/external';
-import { MarketPosition, GroupedPosition } from '@/utils/types';
+import { MarketPosition, GroupedPosition, WarningWithDetail, WarningCategory } from '@/utils/types';
 import { getCollateralColor } from '../utils/colors';
 
 type SuppliedMarketsDetailProps = {
@@ -25,10 +27,34 @@ export function SuppliedMarketsDetail({
 
   const totalSupply = groupedPosition.totalSupply;
 
+  const getWarningColor = (warnings: WarningWithDetail[]) => {
+    if (warnings.some(w => w.level === 'alert')) return 'text-red-500';
+    if (warnings.some(w => w.level === 'warning')) return 'text-yellow-500';
+    return '';
+  };
+
+  const WarningTooltip = ({ warnings }: { warnings: WarningWithDetail[] }) => (
+    <div className="p-2 font-zen">
+      {Object.values(WarningCategory).map(category => {
+        const categoryWarnings = warnings.filter(w => w.category === category);
+        if (categoryWarnings.length === 0) return null;
+        return (
+          <div key={category} className="mb-2">
+            <h4 className="font-bold capitalize">{category}</h4>
+            <ul className="list-none pl-0">
+              {categoryWarnings.map((warning, index) => (
+                <li key={index}>- {warning.description}</li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
+    </div>
+  );
+
   return (
     <div className="bg-secondary bg-opacity-20 p-4">
       <div className="mb-4 flex items-center justify-center">
-        {/* collateral exposure block */}
         <div className="my-4 w-1/2">
           <h3 className="mb-2 text-base font-semibold">Collateral Exposure</h3>
           <div className="flex h-3 w-full overflow-hidden rounded-full bg-gray-200">
@@ -84,22 +110,41 @@ export function SuppliedMarketsDetail({
               formatBalance(position.supplyAssets, position.market.loanAsset.decimals),
             );
             const percentageOfPortfolio = (suppliedAmount / totalSupply) * 100;
+            const warningColor = getWarningColor(position.warningsWithDetail);
 
             return (
               <tr key={position.market.uniqueKey} className="gap-1">
                 <td data-label="Market" className="text-center">
-                  <a
-                    className="group flex items-center justify-center gap-1 no-underline hover:underline"
-                    href={getMarketURL(
-                      position.market.uniqueKey,
-                      position.market.morphoBlue.chain.id,
-                    )}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {position.market.uniqueKey.slice(2, 8)}
-                    <ExternalLinkIcon className="opacity-0 group-hover:opacity-100" />
-                  </a>
+                  <div className="flex items-center justify-center">
+                    <div className="mr-1 w-4">
+                      {position.warningsWithDetail.length > 0 ? (
+                        <Tooltip
+                          content={<WarningTooltip warnings={position.warningsWithDetail} />}
+                          placement="top"
+                        >
+                          <div>
+                            <IoWarningOutline className={`h-4 w-4 ${warningColor}`} />
+                          </div>
+                        </Tooltip>
+                      ) : (
+                        <div className="h-4 w-4" />
+                      )}
+                    </div>
+                    {/* <Tooltip content="View on Explorer" placement="top"> */}
+                      <a
+                        className="group flex items-center justify-center no-underline hover:underline"
+                        href={getMarketURL(
+                          position.market.uniqueKey,
+                          position.market.morphoBlue.chain.id,
+                        )}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {position.market.uniqueKey.slice(2, 8)}
+                        <ExternalLinkIcon className="ml-1 opacity-0 group-hover:opacity-100" />
+                      </a>
+                    {/* </Tooltip> */}
+                  </div>
                 </td>
                 <td data-label="Collateral" className="text-center">
                   {position.market.collateralAsset ? (
@@ -131,7 +176,7 @@ export function SuppliedMarketsDetail({
                       <div
                         className="h-full rounded-full bg-blue-500"
                         style={{ width: `${percentageOfPortfolio}%` }}
-                       />
+                      />
                     </div>
                     <span className="whitespace-nowrap">
                       {formatReadable(percentageOfPortfolio)}%
@@ -157,4 +202,4 @@ export function SuppliedMarketsDetail({
       </table>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 13ccfa20..a91f39ba 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -239,7 +239,7 @@ export type GroupedPosition = {
     amount: number;
     percentage: number;
   }[];
-  warningsWithDetail: WarningWithDetail[];
+  allWarnings: WarningWithDetail[]; // Changed from warningsWithDetail to allWarnings
 };
 
 // Add this type to the existing types in the file
diff --git a/src/utils/warnings.ts b/src/utils/warnings.ts
index 88765638..9bbe9642 100644
--- a/src/utils/warnings.ts
+++ b/src/utils/warnings.ts
@@ -80,7 +80,7 @@ const morphoOfficialWarnings: WarningWithDetail[] = [
   {
     code: 'low_liquidity',
     level: 'warning',
-    description: 'This market has low liquidity, you may not be able to withdraw once supplied',
+    description: 'This market has low liquidity.',
     category: WarningCategory.general,
   },
   {

From 534a2eb67a33d1ced3c01d771a5e6db6c59daa63 Mon Sep 17 00:00:00 2001
From: Anton Cheng <antonassocareer@gmail.com>
Date: Fri, 11 Oct 2024 17:37:00 +0800
Subject: [PATCH 3/5] feat: change back to show icon

---
 .../components/PositionsSummaryTable.tsx      | 60 ++++++++++++-------
 .../components/SuppliedMarketsDetail.tsx      | 36 +++++------
 2 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/app/positions/components/PositionsSummaryTable.tsx b/app/positions/components/PositionsSummaryTable.tsx
index 3371e8c7..0b01065c 100644
--- a/app/positions/components/PositionsSummaryTable.tsx
+++ b/app/positions/components/PositionsSummaryTable.tsx
@@ -12,7 +12,11 @@ import { MarketPosition, GroupedPosition, WarningWithDetail, WarningCategory } f
 import { getCollateralColor } from '../utils/colors';
 import { RebalanceModal } from './RebalanceModal';
 import { SuppliedMarketsDetail } from './SuppliedMarketsDetail';
-import { MarketAssetIndicator, MarketOracleIndicator, MarketDebtIndicator } from 'app/markets/components/RiskIndicator';
+import {
+  MarketAssetIndicator,
+  MarketOracleIndicator,
+  MarketDebtIndicator,
+} from 'app/markets/components/RiskIndicator';
 
 type PositionTableProps = {
   marketPositions: MarketPosition[];
@@ -36,7 +40,9 @@ export function PositionsSummaryTable({
   const [selectedGroupedPosition, setSelectedGroupedPosition] = useState<GroupedPosition | null>(
     null,
   );
-  const [hoveredWarningCategory, setHoveredWarningCategory] = useState<WarningCategory | null>(null);
+  const [hoveredWarningCategory, setHoveredWarningCategory] = useState<WarningCategory | null>(
+    null,
+  );
 
   const groupedPositions: GroupedPosition[] = useMemo(() => {
     return marketPositions.reduce((acc: GroupedPosition[], position) => {
@@ -167,8 +173,8 @@ export function PositionsSummaryTable({
   };
 
   const getWarningColor = (warnings: WarningWithDetail[]) => {
-    if (warnings.some(w => w.level === 'alert')) return 'text-red-500';
-    if (warnings.some(w => w.level === 'warning')) return 'text-yellow-500';
+    if (warnings.some((w) => w.level === 'alert')) return 'text-red-500';
+    if (warnings.some((w) => w.level === 'warning')) return 'text-yellow-500';
     return '';
   };
 
@@ -239,28 +245,36 @@ export function PositionsSummaryTable({
                     <div className="text-center">{formatReadable(avgApy * 100)}%</div>
                   </td>
                   <td data-label="Collateral Exposure">
-                    <div className="flex h-3 w-full overflow-hidden rounded-full bg-secondary">
-                      {position.processedCollaterals.map((collateral, colIndex) => (
-                        <div
-                          key={`${collateral.address}-${colIndex}`}
-                          className="h-full opacity-70"
-                          style={{
-                            width: `${collateral.percentage}%`,
-                            backgroundColor:
-                              collateral.symbol === 'Others'
-                                ? '#A0AEC0'
-                                : getCollateralColor(collateral.address),
-                          }}
-                          title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`}
-                        />
-                      ))}
+                    <div className="flex items-center justify-center gap-1">
+                      {position.collaterals.length > 0 ? (
+                        position.collaterals.map((collateral, index) => (
+                          <TokenIcon
+                            key={`${collateral.address}-${index}`}
+                            address={collateral.address}
+                            chainId={position.chainId}
+                            width={20}
+                            height={20}
+                          />
+                        ))
+                      ) : (
+                        <span className="text-sm text-gray-500">No known collaterals</span>
+                      )}
                     </div>
                   </td>
                   <td data-label="Warnings" className="align-middle">
                     <div className="flex items-center justify-center gap-1">
-                      <MarketAssetIndicator market={{ warningsWithDetail: position.allWarnings }} isBatched />
-                      <MarketOracleIndicator market={{ warningsWithDetail: position.allWarnings }} isBatched />
-                      <MarketDebtIndicator market={{ warningsWithDetail: position.allWarnings }} isBatched />
+                      <MarketAssetIndicator
+                        market={{ warningsWithDetail: position.allWarnings }}
+                        isBatched
+                      />
+                      <MarketOracleIndicator
+                        market={{ warningsWithDetail: position.allWarnings }}
+                        isBatched
+                      />
+                      <MarketDebtIndicator
+                        market={{ warningsWithDetail: position.allWarnings }}
+                        isBatched
+                      />
                     </div>
                   </td>
                   <td data-label="Actions" className="text-right">
@@ -308,4 +322,4 @@ export function PositionsSummaryTable({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index 8568c4b4..ed881930 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tooltip } from '@nextui-org/tooltip';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
-import { IoWarningOutline } from "react-icons/io5";
+import { IoWarningOutline } from 'react-icons/io5';
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable, formatBalance } from '@/utils/balance';
 import { getMarketURL } from '@/utils/external';
@@ -28,15 +28,15 @@ export function SuppliedMarketsDetail({
   const totalSupply = groupedPosition.totalSupply;
 
   const getWarningColor = (warnings: WarningWithDetail[]) => {
-    if (warnings.some(w => w.level === 'alert')) return 'text-red-500';
-    if (warnings.some(w => w.level === 'warning')) return 'text-yellow-500';
+    if (warnings.some((w) => w.level === 'alert')) return 'text-red-500';
+    if (warnings.some((w) => w.level === 'warning')) return 'text-yellow-500';
     return '';
   };
 
   const WarningTooltip = ({ warnings }: { warnings: WarningWithDetail[] }) => (
     <div className="p-2 font-zen">
-      {Object.values(WarningCategory).map(category => {
-        const categoryWarnings = warnings.filter(w => w.category === category);
+      {Object.values(WarningCategory).map((category) => {
+        const categoryWarnings = warnings.filter((w) => w.category === category);
         if (categoryWarnings.length === 0) return null;
         return (
           <div key={category} className="mb-2">
@@ -131,18 +131,18 @@ export function SuppliedMarketsDetail({
                       )}
                     </div>
                     {/* <Tooltip content="View on Explorer" placement="top"> */}
-                      <a
-                        className="group flex items-center justify-center no-underline hover:underline"
-                        href={getMarketURL(
-                          position.market.uniqueKey,
-                          position.market.morphoBlue.chain.id,
-                        )}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        {position.market.uniqueKey.slice(2, 8)}
-                        <ExternalLinkIcon className="ml-1 opacity-0 group-hover:opacity-100" />
-                      </a>
+                    <a
+                      className="group flex items-center justify-center no-underline hover:underline"
+                      href={getMarketURL(
+                        position.market.uniqueKey,
+                        position.market.morphoBlue.chain.id,
+                      )}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {position.market.uniqueKey.slice(2, 8)}
+                      <ExternalLinkIcon className="ml-1 opacity-0 group-hover:opacity-100" />
+                    </a>
                     {/* </Tooltip> */}
                   </div>
                 </td>
@@ -202,4 +202,4 @@ export function SuppliedMarketsDetail({
       </table>
     </div>
   );
-}
\ No newline at end of file
+}

From e4839e4e132eb4826e622862a58040393dabe2aa Mon Sep 17 00:00:00 2001
From: Anton Cheng <antonassocareer@gmail.com>
Date: Fri, 11 Oct 2024 17:40:22 +0800
Subject: [PATCH 4/5] chore: clean build errors

---
 app/markets/components/RiskIndicator.tsx      |  2 +-
 .../components/PositionsSummaryTable.tsx      | 16 ++------
 .../components/SuppliedMarketsDetail.tsx      | 40 ++++++++++---------
 3 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/app/markets/components/RiskIndicator.tsx b/app/markets/components/RiskIndicator.tsx
index dd834bb1..dd08c618 100644
--- a/app/markets/components/RiskIndicator.tsx
+++ b/app/markets/components/RiskIndicator.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from '@nextui-org/tooltip';
-import { Market, WarningWithDetail } from '@/utils/types';
+import { WarningWithDetail } from '@/utils/types';
 import { WarningCategory } from '@/utils/types';
 
 type RiskFlagProps = {
diff --git a/app/positions/components/PositionsSummaryTable.tsx b/app/positions/components/PositionsSummaryTable.tsx
index 0b01065c..9e912ddb 100644
--- a/app/positions/components/PositionsSummaryTable.tsx
+++ b/app/positions/components/PositionsSummaryTable.tsx
@@ -8,15 +8,14 @@ import { useAccount } from 'wagmi';
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable, formatBalance } from '@/utils/balance';
 import { getNetworkImg } from '@/utils/networks';
-import { MarketPosition, GroupedPosition, WarningWithDetail, WarningCategory } from '@/utils/types';
-import { getCollateralColor } from '../utils/colors';
-import { RebalanceModal } from './RebalanceModal';
-import { SuppliedMarketsDetail } from './SuppliedMarketsDetail';
+import { MarketPosition, GroupedPosition } from '@/utils/types';
 import {
   MarketAssetIndicator,
   MarketOracleIndicator,
   MarketDebtIndicator,
 } from 'app/markets/components/RiskIndicator';
+import { RebalanceModal } from './RebalanceModal';
+import { SuppliedMarketsDetail } from './SuppliedMarketsDetail';
 
 type PositionTableProps = {
   marketPositions: MarketPosition[];
@@ -40,9 +39,6 @@ export function PositionsSummaryTable({
   const [selectedGroupedPosition, setSelectedGroupedPosition] = useState<GroupedPosition | null>(
     null,
   );
-  const [hoveredWarningCategory, setHoveredWarningCategory] = useState<WarningCategory | null>(
-    null,
-  );
 
   const groupedPositions: GroupedPosition[] = useMemo(() => {
     return marketPositions.reduce((acc: GroupedPosition[], position) => {
@@ -172,12 +168,6 @@ export function PositionsSummaryTable({
     });
   };
 
-  const getWarningColor = (warnings: WarningWithDetail[]) => {
-    if (warnings.some((w) => w.level === 'alert')) return 'text-red-500';
-    if (warnings.some((w) => w.level === 'warning')) return 'text-yellow-500';
-    return '';
-  };
-
   return (
     <div className="space-y-4 overflow-x-auto">
       <div className="flex items-center justify-between">
diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index ed881930..8fa31eeb 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -14,6 +14,27 @@ type SuppliedMarketsDetailProps = {
   setSelectedPosition: (position: MarketPosition) => void;
 };
 
+function WarningTooltip({ warnings }: { warnings: WarningWithDetail[] }) {
+  return (
+    <div className="p-2 font-zen">
+      {Object.values(WarningCategory).map((category) => {
+        const categoryWarnings = warnings.filter((w) => w.category === category);
+        if (categoryWarnings.length === 0) return null;
+        return (
+          <div key={category} className="mb-2">
+            <h4 className="font-bold capitalize">{category}</h4>
+            <ul className="list-none pl-0">
+              {categoryWarnings.map((warning, index) => (
+                <li key={index}>- {warning.description}</li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 export function SuppliedMarketsDetail({
   groupedPosition,
   setShowModal,
@@ -33,25 +54,6 @@ export function SuppliedMarketsDetail({
     return '';
   };
 
-  const WarningTooltip = ({ warnings }: { warnings: WarningWithDetail[] }) => (
-    <div className="p-2 font-zen">
-      {Object.values(WarningCategory).map((category) => {
-        const categoryWarnings = warnings.filter((w) => w.category === category);
-        if (categoryWarnings.length === 0) return null;
-        return (
-          <div key={category} className="mb-2">
-            <h4 className="font-bold capitalize">{category}</h4>
-            <ul className="list-none pl-0">
-              {categoryWarnings.map((warning, index) => (
-                <li key={index}>- {warning.description}</li>
-              ))}
-            </ul>
-          </div>
-        );
-      })}
-    </div>
-  );
-
   return (
     <div className="bg-secondary bg-opacity-20 p-4">
       <div className="mb-4 flex items-center justify-center">

From 4e4485f7f032f2e17ca5eafcf322d401e7f12290 Mon Sep 17 00:00:00 2001
From: Anton Cheng <antonassocareer@gmail.com>
Date: Fri, 11 Oct 2024 17:50:45 +0800
Subject: [PATCH 5/5] chore: review fixes

---
 app/positions/components/SuppliedMarketsDetail.tsx | 2 +-
 src/components/TokenIcon.tsx                       | 4 ++--
 src/hooks/useUserPositions.ts                      | 4 ++--
 src/utils/types.ts                                 | 3 ++-
 src/utils/warnings.ts                              | 4 ++--
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index 8fa31eeb..b2079174 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -111,7 +111,7 @@ export function SuppliedMarketsDetail({
             const suppliedAmount = Number(
               formatBalance(position.supplyAssets, position.market.loanAsset.decimals),
             );
-            const percentageOfPortfolio = (suppliedAmount / totalSupply) * 100;
+            const percentageOfPortfolio = totalSupply > 0 ? (suppliedAmount / totalSupply) * 100 : 0;
             const warningColor = getWarningColor(position.warningsWithDetail);
 
             return (
diff --git a/src/components/TokenIcon.tsx b/src/components/TokenIcon.tsx
index 08db7cb7..21511675 100644
--- a/src/components/TokenIcon.tsx
+++ b/src/components/TokenIcon.tsx
@@ -12,8 +12,8 @@ type TokenIconProps = {
 export function TokenIcon({ address, chainId, width, height }: TokenIconProps) {
   const token = findToken(address, chainId);
 
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-  if (!token || !token.img) {
+   
+  if (!token?.img) {
     return <div className="rounded-full bg-gray-300" style={{ width, height }} />;
   }
 
diff --git a/src/hooks/useUserPositions.ts b/src/hooks/useUserPositions.ts
index deeafe9f..1fa731c7 100644
--- a/src/hooks/useUserPositions.ts
+++ b/src/hooks/useUserPositions.ts
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { SupportedNetworks } from '@/utils/networks';
-import { Market, MarketPosition, UserTransaction } from '@/utils/types';
+import { MarketPosition, UserTransaction } from '@/utils/types';
 import { getMarketWarningsWithDetail } from '@/utils/warnings';
 
 const query = `query getUserMarketPositions(
@@ -198,7 +198,7 @@ const useUserPositions = (user: string | undefined) => {
           .filter((position: MarketPosition) => position.supplyShares.toString() !== '0')
           .map((position: MarketPosition) => ({
             ...position,
-            warningsWithDetail: getMarketWarningsWithDetail(position.market as unknown as Market),
+            warningsWithDetail: getMarketWarningsWithDetail(position.market),
           }));
 
         setHistory(transactions);
diff --git a/src/utils/types.ts b/src/utils/types.ts
index a91f39ba..a7ec64db 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -57,6 +57,7 @@ export type MarketPosition = {
       }[];
       utilization: number;
     };
+    warnings: MarketWarning[];
   };
   warningsWithDetail: WarningWithDetail[];
 };
@@ -239,7 +240,7 @@ export type GroupedPosition = {
     amount: number;
     percentage: number;
   }[];
-  allWarnings: WarningWithDetail[]; // Changed from warningsWithDetail to allWarnings
+  allWarnings: WarningWithDetail[];
 };
 
 // Add this type to the existing types in the file
diff --git a/src/utils/warnings.ts b/src/utils/warnings.ts
index 9bbe9642..6aca8fb6 100644
--- a/src/utils/warnings.ts
+++ b/src/utils/warnings.ts
@@ -1,4 +1,4 @@
-import { Market } from '@/utils/types';
+import { MarketWarning } from '@/utils/types';
 import { WarningCategory, WarningWithDetail } from './types';
 
 const morphoOfficialWarnings: WarningWithDetail[] = [
@@ -92,7 +92,7 @@ const morphoOfficialWarnings: WarningWithDetail[] = [
   },
 ];
 
-export const getMarketWarningsWithDetail = (market: Market) => {
+export const getMarketWarningsWithDetail = (market: {warnings: MarketWarning[]}) => {
   const result = [];
 
   // process official warnings