feat: borrow assets

Author: grinry

apps/indexer/src/app/app.ts

@@ -30,7 +30,9 @@ export async function app(fastify: FastifyInstance, opts: AppOptions) {
   });
 
   fastify.addHook('onError', async (request, _reply, error) => {
-    request.log.error({ err: error }, 'unhandled error');
-    // push to Sentry, Prometheus, etc.
+    if (error?.statusCode === 500) {
+      // push to Sentry, Prometheus, etc.
+      request.log.error({ err: error }, 'unhandled error');
+    }
   });
 }

apps/indexer/src/app/routes/_chain/routes.ts

@@ -8,6 +8,7 @@ import { TTokenSelected, tTokensSelectors } from '../../../database/selectors';
 import {
   fetchPoolList,
   fetchPoolReserves,
+  selectPoolById,
 } from '../../../libs/loaders/money-market';
 import { paginationResponse, paginationSchema } from '../../../libs/pagination';
 import { areAddressesEqual } from '../../../libs/utils/helpers';
@@ -127,20 +128,18 @@ export default async function (fastify: FastifyInstance) {
   );
 
   fastify.withTypeProvider<ZodTypeProvider>().get(
-    '/money-market/:pool',
+    '/money-market/:pool/reserves',
     {
       schema: {
         querystring: paginationSchema,
       },
-      // config: {
-      //   cache: true,
-      // },
+      config: {
+        cache: true,
+      },
     },
     async (req: FastifyRequest<{ Params: { pool: string } }>, reply) => {
       const pools = await fetchPoolList(req.chain.chainId);
-      const pool = pools.find(
-        (p) => p.address.toLowerCase() === req.params.pool.toLowerCase(),
-      );
+      const pool = selectPoolById(req.params.pool, pools);
 
       if (!pool) {
         return reply.notFound('Pool not found');
@@ -167,18 +166,19 @@ export default async function (fastify: FastifyInstance) {
           // const { virtualAccActive } = reserveRaw;
           return {
             originalId: index,
-            id: `!!${req.chain.chainId}-${reserveRaw.underlyingAsset}-${pool.address}`.toLowerCase(),
-            underlyingAsset: reserveRaw.underlyingAsset.toLowerCase(),
+            id: `${req.chain.chainId}-${reserveRaw.underlyingAsset}-${pool.address}`.toLowerCase(),
+            // underlyingAsset: reserveRaw.underlyingAsset.toLowerCase(),
 
             token: tokens.find((t) =>
               areAddressesEqual(t.address, reserveRaw.underlyingAsset),
             ),
+            pool,
 
-            name: reserveRaw.name,
+            // name: reserveRaw.name,
             // symbol: ammSymbolMap[reserveRaw.underlyingAsset.toLowerCase()]
             //   ? ammSymbolMap[reserveRaw.underlyingAsset.toLowerCase()]
             //   : reserveRaw.symbol,
-            decimals: reserveRaw.decimals.toNumber(),
+            // decimals: reserveRaw.decimals.toNumber(),
             baseLTVasCollateral: reserveRaw.baseLTVasCollateral.toString(),
             reserveLiquidationThreshold:
               reserveRaw.reserveLiquidationThreshold.toString(),

apps/indexer/src/libs/loaders/money-market.ts

@@ -354,6 +354,7 @@ const uiPoolDataProviderAbi = [
 ] as const;
 
 type PoolDefinition = {
+  id: string | 'default';
   name: string;
   logoURI: string;
   address: Address;
@@ -364,7 +365,7 @@ type PoolDefinition = {
   weth: Address;
   treasury: Address;
   subgraphURI: string;
-  priceFeedUrl: string;
+  priceFeedURI: string;
 };
 
 export async function fetchPoolList(chainId: ChainId) {
@@ -383,6 +384,13 @@ export async function fetchPoolList(chainId: ChainId) {
   return data.items;
 }
 
+export function selectPoolById(
+  id: PoolDefinition['id'],
+  pools: PoolDefinition[],
+) {
+  return pools.find((pool) => pool.id === id);
+}
+
 export async function fetchPoolReserves(
   chainId: ChainSelector,
   pool: PoolDefinition,

apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx

@@ -13,7 +13,7 @@ import { AmountRenderer } from '@/components/ui/amount-renderer';
 import { Button } from '@/components/ui/button';
 import { Dialog } from '@/components/ui/dialog';
 import { InfoButton } from '@/components/ui/info-button';
-import { type MoneyMarketPoolReserve } from '@sovryn/slayer-sdk';
+import type { MoneyMarketPoolReserve } from '@sovryn/slayer-sdk';
 
 type AssetsTableProps = {
   assets: MoneyMarketPoolReserve[];
@@ -108,20 +108,12 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
                 </TableCell>
                 <TableCell className="border-neutral-800 border-y">
                   <span className="flex items-center gap-1">
-                    <AmountRenderer
-                      value={
-                        Number(asset.totalLiquidity) /
-                        Math.pow(10, asset.token.decimals)
-                      }
-                    />
+                    <AmountRenderer value={asset.availableLiquidity} />
                     {asset.token.symbol}
                   </span>
                   <p className="text-neutral-500 font-medium text-xs">
                     <AmountRenderer
-                      value={
-                        Number(asset.totalLiquidity) /
-                        Math.pow(10, asset.token.decimals)
-                      }
+                      value={asset.availableLiquidity}
                       prefix="$"
                       decimals={2}
                       showApproxSign

apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx

@@ -13,7 +13,6 @@ import { sdk } from '@/lib/sdk';
 import { useSlayerTx } from '@/lib/transactions';
 import { validateDecimal } from '@/lib/validations';
 import { BORROW_RATE_MODES } from '@sovryn/slayer-sdk';
-import { useQuery } from '@tanstack/react-query';
 import { useAccount } from 'wagmi';
 import z from 'zod';
 import { useStore } from 'zustand';
@@ -38,21 +37,6 @@ const BorrowDialogForm = () => {
   });
   const { address } = useAccount();
 
-  useQuery({
-    queryKey: ['reserve-data', reserve.id],
-    queryFn: async () => {
-      console.log('Fetching reserve data for:', reserve.id);
-      const data = await sdk.moneyMarket.useReserve(reserve).getReservesData();
-      console.log('Reserve data:', data);
-      return data;
-    },
-    enabled: !!reserve,
-    throwOnError(error, query) {
-      console.error('Error fetching reserve data:', error, query);
-      return true;
-    },
-  });
-
   const form = useAppForm({
     defaultValues: {
       amount: '',
@@ -63,11 +47,14 @@ const BorrowDialogForm = () => {
     },
     onSubmit: ({ value }) => {
       begin(() =>
-        sdk.moneyMarket
-          .useReserve(reserve)
-          .borrow(value.amount, BORROW_RATE_MODES.variable, {
+        sdk.moneyMarket.borrow(
+          reserve,
+          value.amount,
+          BORROW_RATE_MODES.variable,
+          {
             account: address!,
-          }),
+          },
+        ),
       );
     },
     onSubmitInvalid(props) {

apps/web-app/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

apps/web-app/src/routes/money-market.tsx

@@ -15,35 +15,57 @@ import {
   netWorth,
 } from '@/components/MoneyMarket/MoneyMarket.constants';
 import { Heading } from '@/components/ui/heading/heading';
+import { getContext } from '@/integrations/tanstack-query/root-provider';
 import { sdk } from '@/lib/sdk';
-import { isAbortError } from '@sovryn/slayer-shared';
+import { useQuery } from '@tanstack/react-query';
 import z from 'zod';
 
 const poolSearchSchema = z.object({
   offset: z.number().min(0).default(0),
   limit: z.number().min(1).max(100).default(20),
   search: z.string().default(''),
+  pool: z.string().default('default'),
 });
 
 export const Route = createFileRoute('/money-market')({
   component: RouteComponent,
   validateSearch: poolSearchSchema,
-  loaderDeps: ({ search: { offset, limit, search } }) => ({
+  loaderDeps: ({ search: { offset, limit, search, pool } }) => ({
     offset,
     limit,
     search,
+    pool,
   }),
-  loader: ({ abortController, deps }) =>
-    sdk.moneyMarket
-      .listReserves({
-        signal: abortController.signal,
-        query: deps,
-      })
-      .catch((e) => (isAbortError(e) ? null : Promise.reject(e))),
+  loader: ({ deps: { pool } }) => {
+    const client = getContext().queryClient;
+    client.prefetchQuery({
+      queryKey: ['money-market:pools'],
+      queryFn: () => sdk.moneyMarket.listPools(),
+      staleTime: 1000 * 60 * 60, // 1 hour
+    });
+
+    client.prefetchQuery({
+      queryKey: ['money-market:reserve', pool || 'default'],
+      queryFn: () => sdk.moneyMarket.listReserves(pool || 'default'),
+      staleTime: 1000 * 60 * 60, // 1 hour
+    });
+  },
 });
 
 function RouteComponent() {
-  const pools = Route.useLoaderData();
+  const { pool } = Route.useLoaderDeps();
+
+  // const { data: pools } = useQuery({
+  //   queryKey: ['money-market:pools'],
+  //   queryFn: () => sdk.moneyMarket.listPools(),
+  //   staleTime: 1000 * 60 * 60, // 1 hour
+  // });
+
+  const { data: reserves } = useQuery({
+    queryKey: ['money-market:reserve', pool || 'default'],
+    queryFn: () => sdk.moneyMarket.listReserves(pool || 'default'),
+    staleTime: 1000 * 60 * 60, // 1 hour
+  });
 
   return (
     <>
@@ -64,7 +86,7 @@ function RouteComponent() {
         <div className="grid grid-cols-1 2xl:grid-cols-2 2xl:gap-4 space-y-4">
           <div className="space-y-4">
             <LendPositionsList
-              lendPositions={(pools?.data ?? []).map((r) => r.data)}
+              lendPositions={reserves?.data ?? []}
               supplyBalance={100}
               collateralBalance={50}
               supplyWeightedApy={2.5}
@@ -78,9 +100,7 @@ function RouteComponent() {
               borrowPower={1.29}
               supplyWeightedApy={0.05}
             />
-            <BorrowAssetsList
-              borrowAssets={(pools?.data ?? []).map((r) => r.data)}
-            />
+            <BorrowAssetsList borrowAssets={reserves?.data ?? []} />
           </div>
         </div>
       </div>

packages/sdk/src/lib/context.ts

@@ -4,7 +4,7 @@ import { Chain, PublicClient, Transport, WalletClient } from 'viem';
 import { INDEXER_URL, Mode, modes } from '../constants.js';
 import { SdkPaginatedQuery } from '../types.js';
 
-const logger = debug('slayer-sdk:context');
+const log = debug('slayer-sdk:context');
 
 export type FetchLike = typeof fetch;
 
@@ -49,7 +49,7 @@ export class Context<chain extends Chain> {
       throw new Error('publicClient is required in SdkConfig');
     if (cfg.indexerBaseUrl) {
       cfg.mode = modes.custom;
-      logger.log('Using custom indexer base URL:', cfg.indexerBaseUrl);
+      log('Using custom indexer base URL:', cfg.indexerBaseUrl);
     }
     if (!cfg.mode) cfg.mode = modes.production;
     this.config = cfg;