feat: markets example

Author: foodaka

examples/create-app/package.json

@@ -9,12 +9,15 @@
   },
   "dependencies": {
     "@aave/react": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@aave/types": "workspace:*",
+    "@aave/env": "workspace:*",
+    "@aave/client": "workspace:*",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "typescript": "^5.6.3",
     "vite": "^5.4.9"

examples/create-app/src/App.tsx

@@ -2,24 +2,21 @@ import { AaveProvider, useAaveChains, useAaveMarkets } from '@aave/react';
 import { chainId } from '@aave/types';
 import { client } from './client';
 
-console.log("client", client);
 
 function MarketDisplay() {
   const { data: markets, loading, error } = useAaveMarkets({
-    chainIds: [chainId(1)], // Mainnet
+    chainIds: [chainId(1)]
   });
 
-  const { data: chains, loading: chainsLoading, error: chainsError } = useAaveChains();
-
-  console.log("chains", chains);
-  console.log("markets", markets);
   if (loading) return <div>Loading mainnet market...</div>;
-  console.error("error", error);
 
   if (error) return <div>Error loading market</div>;
   if (!markets || markets.length === 0) return <div>No markets found</div>;
 
-  const mainnetMarket = markets[0];
+
+  const mainnetMarket = markets.find((market: any) => market.name === "AaveV3Ethereum");
+
+  if (!mainnetMarket) return <div>Mainnet market not found</div>;
 
   return (
     <div>
@@ -36,9 +33,9 @@ function MarketDisplay() {
 
         {mainnetMarket.supplyReserves && mainnetMarket.supplyReserves.length > 0 && (
           <div>
-            <h3>First few supply reserves:</h3>
+            <h3>Supply Reserves:</h3>
             <ul>
-              {mainnetMarket.supplyReserves.slice(0, 3).map((reserve: any, index: number) => (
+              {mainnetMarket.supplyReserves.map((reserve: any, index: number) => (
                 <li key={index}>
                   {reserve.underlyingToken.name} ({reserve.underlyingToken.symbol})
                 </li>
@@ -55,12 +52,9 @@ export function App() {
   return (
     <AaveProvider client={client}>
       <header>
-        <h1>example-create-app</h1>
+        <h1>Fetching Aave Markets</h1>
       </header>
       <div>
-        <p>
-          Edit <code>src/App.tsx</code>.
-        </p>
         <MarketDisplay />
       </div>
     </AaveProvider>

packages/client/src/actions/markets.ts

@@ -12,7 +12,7 @@ import type { ChainId, EvmAddress, ResultAsync } from '@aave/types';
 import type { AaveClient } from '../client';
 import type { UnexpectedError } from '../errors';
 
-const defaultMarketReservesRequestOrderBy: MarketReservesRequestOrderBy = {
+export const defaultMarketReservesRequestOrderBy: MarketReservesRequestOrderBy = {
   tokenName: OrderDirection.Asc,
 };
 

packages/react/src/markets.ts

@@ -1,4 +1,5 @@
 import type { MarketRequest, MarketsRequest } from '@aave/client/actions';
+import { defaultMarketReservesRequestOrderBy } from '@aave/client/actions';
 import { type Market, MarketQuery, MarketsQuery } from '@aave/graphql';
 import type {
   ReadResult,
@@ -46,8 +47,8 @@ export function useAaveMarket({
   address,
   chainId,
   user,
-  borrowsOrderBy,
-  suppliesOrderBy,
+  borrowsOrderBy = defaultMarketReservesRequestOrderBy,
+  suppliesOrderBy = defaultMarketReservesRequestOrderBy,
 }: UseAaveMarketArgs & {
   suspense?: boolean;
 }): SuspendableResult<Market | null> {
@@ -97,8 +98,8 @@ export function useAaveMarkets({
   suspense = false,
   chainIds,
   user,
-  borrowsOrderBy,
-  suppliesOrderBy,
+  borrowsOrderBy = defaultMarketReservesRequestOrderBy,
+  suppliesOrderBy = defaultMarketReservesRequestOrderBy,
 }: UseAaveMarketsArgs & {
   suspense?: boolean;
 }): SuspendableResult<Market[]> {