aave · foodaka · Jul 17, 2025 · Jul 17, 2025 · Jul 22, 2025 · Jul 22, 2025
diff --git a/examples/user-positions/README.md b/examples/user-positions/README.md
@@ -0,0 +1,3 @@
+# query for user positions on aave v3
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/aave/aave-sdk/tree/main/examples/user-positions)
diff --git a/examples/user-positions/index.html b/examples/user-positions/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/lens.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">
+    <title>query for user positions on aave v3</title>
+  </head>
+  <body>
+    <main id="root"></main>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/user-positions/package.json b/examples/user-positions/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "user-positions",
+  "description": "query for user positions on aave v3",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@aave/react": "workspace:*",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@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"
+  }
+}
diff --git a/examples/user-positions/public/aave.svg b/examples/user-positions/public/aave.svg
diff --git a/examples/user-positions/src/App.tsx b/examples/user-positions/src/App.tsx
@@ -0,0 +1,238 @@
+import { AaveProvider, useUserSupplies, useUserBorrows, evmAddress, chainId, useAaveMarkets, ZERO_ADDRESS  } from '@aave/react';
+import { client } from './client';
+
+// TODO: change to your address or any address you want to query
+const user = evmAddress(ZERO_ADDRESS);
+
+function UserPositions() {
+  const { data: markets, loading: marketsLoading } = useAaveMarkets({
+    chainIds: [chainId(1), chainId(8453)],
+  });
+
+  const marketAddresses = markets?.map(market => ({
+    address: market.address,
+    chainId: market.chain.chainId,
+  })) || [];
+
+  const { data: userSupplies, loading: userSuppliesLoading } = useUserSupplies({
+    markets: marketAddresses,
+    user,
+  });
+
+  const { data: userBorrows, loading: userBorrowsLoading } = useUserBorrows({
+    markets: marketAddresses,
+    user,
+  });
+
+  if (userSuppliesLoading || userBorrowsLoading || marketsLoading) {
+    return <p>Loading positions...</p>;
+  }
+
+  return (
+    <>
+      <header>
+        <h1>👻 Aave V3 User Positions</h1>
+        <p>Address: {user}</p>
+      </header>
+
+      <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+        <h2>Supply Positions ({userSupplies?.length || 0})</h2>
+
+        {userSupplies?.map((position, index) => (
+          <div key={index} style={{
+            border: '1px solid #ddd',
+            borderRadius: '8px',
+            padding: '16px',
+            margin: '16px 0',
+            backgroundColor: '#f9f9f9'
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
+              <img 
+                src={position.currency.imageUrl} 
+                alt={position.currency.symbol}
+                style={{ width: '32px', height: '32px', marginRight: '12px' }}
+              />
+              <div style={{ flex: 1 }}>
+                <h3 style={{ margin: '0', color: '#333' }}>
+                  {position.currency.name} ({position.currency.symbol})
+                </h3>
+                <p style={{ margin: '0', color: '#666', fontSize: '14px' }}>
+                  {position.market.name}
+                </p>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <img 
+                  src={position.market.chain.icon} 
+                  alt={position.market.chain.name}
+                  style={{ width: '20px', height: '20px' }}
+                />
+                <div style={{ textAlign: 'right' }}>
+                  <p style={{ margin: '0', fontWeight: 'bold', fontSize: '14px', color: '#333' }}>
+                    {position.market.chain.name}
+                  </p>
+                  <p style={{ margin: '0', fontSize: '12px', color: '#666' }}>
+                    Chain ID: {position.market.chain.chainId}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
+              <div>
+                <p style={{ margin: '4px 0', fontWeight: 'bold', color: '#333' }}>Balance</p>
+                <p style={{ margin: '4px 0', fontSize: '18px' }}>
+                  {parseFloat(position.balance.amount.value).toFixed(6)} {position.currency.symbol}
+                </p>
+                <p style={{ margin: '4px 0', color: '#666' }}>
+                  ${parseFloat(position.balance.usd).toFixed(2)} USD
+                </p>
+              </div>
+
+              <div>
+                <p style={{ margin: '4px 0', fontWeight: 'bold', color: '#333' }}>Supply APY</p>
+                <p style={{ margin: '4px 0', fontSize: '18px', color: '#00a86b' }}>
+                  {(parseFloat(position.apy.value) * 100).toFixed(2)}%
+                </p>
+              </div>
+
+              <div>
+                <p style={{ margin: '4px 0', fontWeight: 'bold', color: '#333' }}>Token Price</p>
+                <p style={{ margin: '4px 0', fontSize: '18px' }}>
+                  ${parseFloat(position.balance.usdPerToken).toLocaleString()}
+                </p>
+              </div>
+
+              <div>
+                <p style={{ margin: '4px 0', fontWeight: 'bold', color: '#333' }}>Collateral Status</p>
+                <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                  <span style={{
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    fontSize: '12px',
+                    backgroundColor: position.canBeCollateral ? '#e8f5e8' : '#f5e8e8',
+                    color: position.canBeCollateral ? '#2d5016' : '#5d1a1a'
+                  }}>
+                    {position.canBeCollateral ? '✅ Can Collateralize' : '❌ Cannot Collateralize'}
+                  </span>
+                  {position.isCollateral && (
+                    <span style={{
+                      padding: '4px 8px',
+                      borderRadius: '4px',
+                      fontSize: '12px',
+                      backgroundColor: '#e3f2fd',
+                      color: '#1565c0'
+                    }}>
+                      🔒 Used as Collateral
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {userSupplies?.length === 0 && (
+          <p style={{ textAlign: 'center', color: '#666', fontStyle: 'italic' }}>
+            No supply positions found for this address.
+          </p>
+        )}
+
+        <h2>Borrow Positions ({userBorrows?.length || 0})</h2>
+
+        {userBorrows?.map((position, index) => (
+          <div key={index} style={{
+            border: '1px solid #ddd',
+            borderRadius: '8px',
+            padding: '16px',
+            margin: '16px 0',
+            backgroundColor: '#fff9f9'
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
+              <img 
+                src={position.currency.imageUrl} 
+                alt={position.currency.symbol}
+                style={{ width: '32px', height: '32px', marginRight: '12px' }}
+              />
+              <div style={{ flex: 1 }}>
+                <h3 style={{ margin: '0', color: '#333' }}>
+                  {position.currency.name} ({position.currency.symbol})
+                </h3>
+                <p style={{ margin: '0', color: '#666', fontSize: '14px' }}>
+                  {position.market.name}
+                </p>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <img 
+                  src={position.market.chain.icon} 
+                  alt={position.market.chain.name}
+                  style={{ width: '20px', height: '20px' }}
+                />
+                <div style={{ textAlign: 'right' }}>
+                  <p style={{ margin: '0', fontWeight: 'bold', fontSize: '14px', color: '#333' }}>
+                    {position.market.chain.name}
+                  </p>
+                  <p style={{ margin: '0', fontSize: '12px', color: '#666' }}>
+                    Chain ID: {position.market.chain.chainId}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
+              <div>
+                <p style={{ margin: '4px 0', fontWeight: 'bold', color: '#333' }}>Debt Amount</p>
+                <p style={{ margin: '4px 0', fontSize: '18px' }}>
+                  {parseFloat(position.debt.amount.value).toFixed(6)} {position.currency.symbol}
+                </p>
+                <p style={{ margin: '4px 0', color: '#666' }}>
+                  ${parseFloat(position.debt.usd).toFixed(2)} USD
+                </p>
+              </div>
+
+              <div>
+                <p style={{ margin: '4px 0', fontWeight: 'bold', color: '#333' }}>Borrow APY</p>
+                <p style={{ margin: '4px 0', fontSize: '18px', color: '#d73527' }}>
+                  {(parseFloat(position.apy.value) * 100).toFixed(2)}%
+                </p>
+              </div>
+
+              <div>
+                <p style={{ margin: '4px 0', fontWeight: 'bold', color: '#333' }}>Token Price</p>
+                <p style={{ margin: '4px 0', fontSize: '18px' }}>
+                  ${parseFloat(position.debt.usdPerToken).toLocaleString()}
+                </p>
+              </div>
+
+              <div>
+                <p style={{ margin: '4px 0', fontWeight: 'bold', color: '#333' }}>Borrow Type</p>
+                <span style={{
+                  padding: '4px 8px',
+                  borderRadius: '4px',
+                  fontSize: '12px',
+                  backgroundColor: '#ffe8e8',
+                  color: '#8b0000'
+                }}>
+                  📉 Borrowed Debt
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {userBorrows?.length === 0 && (
+          <p style={{ textAlign: 'center', color: '#666', fontStyle: 'italic' }}>
+            No borrow positions found for this address.
+          </p>
+        )}
+      </div>
+    </>
+  );
+}
+
+export function App() {
+  return (
+    <AaveProvider client={client}>
+      <UserPositions />
+    </AaveProvider>
+  );
+}
diff --git a/examples/user-positions/src/client.ts b/examples/user-positions/src/client.ts
@@ -0,0 +1,5 @@
+import { AaveClient, staging } from '@aave/react';
+
+export const client = AaveClient.create({
+  environment: staging,
+});
diff --git a/examples/user-positions/src/main.tsx b/examples/user-positions/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/user-positions/src/vite-env.d.ts b/examples/user-positions/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/user-positions/tsconfig.json b/examples/user-positions/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/user-positions/vite.config.ts b/examples/user-positions/vite.config.ts
@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# query for user positions on aave v3

		[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/aave/aave-sdk/tree/main/examples/user-positions)