Merge pull request #12 from aave/fix/supply-example

fix: supply example dropdown

Author: cesarenaldi

examples/supply/src/App.tsx

@@ -13,9 +13,9 @@ export function App() {
   const [market, setMarket] = useState<Market | null>(null);
   const [reserve, setReserve] = useState<Reserve | null>(null);
 
-  const handleMarketSelect = (market: Market) => {
+  const handleMarketSelect = (market: Market | null) => {
     setMarket(market);
-    setReserve(market.supplyReserves[0]);
+    setReserve(market?.supplyReserves[0] ?? null);
   };
 
   return (

examples/supply/src/MarketSelector.tsx

@@ -1,9 +1,8 @@
 import { type ChainId, type Market, useAaveMarkets } from '@aave/react';
-import { useEffect } from 'react';
 
 interface MarketSelectorProps {
   chainId: ChainId;
-  onChange: (market: Market) => void;
+  onChange: (market: Market | null) => void;
 }
 
 export function MarketSelector({
@@ -15,19 +14,12 @@ export function MarketSelector({
     suspense: true,
   });
 
-  useEffect(() => {
-    if (markets.length > 0) {
-      onMarketSelect(markets[0]);
-    }
-  }, [markets, onMarketSelect]);
-
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const selectedMarket = markets.find(
       (market) => market.address === event.target.value,
     );
-    if (selectedMarket) {
-      onMarketSelect(selectedMarket);
-    }
+
+    onMarketSelect(selectedMarket ?? null);
   };
 
   if (markets.length === 0) {
@@ -42,6 +34,7 @@ export function MarketSelector({
         disabled={markets.length === 1}
         style={{ padding: '8px', width: '100%' }}
       >
+        <option value=''>Select a market</option>
         {markets.map((market) => (
           <option key={market.address} value={market.address}>
             {market.name} - ${market.totalMarketSize}