Feat/earn borrow

src/app/[lng]/earn/borrow/[chainId]/[marketId]/page.tsx

@@ -0,0 +1,34 @@
+import { BorrowMarketPage } from '@/app/ui/earn/BorrowMarketPage';
+import { EarnPageSkeleton } from '@/app/ui/earn';
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
+
+type Params = Promise<{ chainId: string; marketId: string }>;
+
+export const dynamicParams = true;
+export const revalidate = 300;
+
+export async function generateStaticParams(): Promise<Params[]> {
+  return [];
+}
+
+export default async function Page({ params }: { params: Params }) {
+  const { chainId, marketId } = await params;
+
+  console.log('25. BorrowMarketPage page', { chainId, marketId });
+
+  if (!chainId || !marketId) {
+    return notFound();
+  }
+
+  const parsedChainId = Number(chainId);
+  if (isNaN(parsedChainId)) {
+    return notFound();
+  }
+
+  return (
+    <Suspense fallback={<EarnPageSkeleton />}>
+      <BorrowMarketPage chainId={parsedChainId} marketId={marketId} />
+    </Suspense>
+  );
+}

src/app/lib/getLoopoorMarket.ts

@@ -0,0 +1,12 @@
+import type { HttpResponse, LoopoorMarket } from '@/types/jumper-backend';
+import { makeClient } from './client';
+
+export type GetLoopoorMarketResult = HttpResponse<LoopoorMarket, unknown>;
+
+export async function getLoopoorMarket(
+  chainId: number,
+  marketId: string,
+): Promise<GetLoopoorMarketResult> {
+  const client = makeClient();
+  return client.v1.loopoorControllerGetMarketV1(chainId, marketId);
+}

src/app/lib/getLoopoorMarketHistory.ts

@@ -0,0 +1,18 @@
+import type {
+  HttpResponse,
+  LoopoorMarketHistory,
+} from '@/types/jumper-backend';
+import { makeClient } from './client';
+
+export type GetLoopoorMarketHistoryResult = HttpResponse<
+  LoopoorMarketHistory,
+  unknown
+>;
+
+export async function getLoopoorMarketHistory(
+  chainId: number,
+  marketId: string,
+): Promise<GetLoopoorMarketHistoryResult> {
+  const client = makeClient();
+  return client.v1.loopoorControllerGetMarketHistoryV1(chainId, marketId);
+}

src/app/lib/getLoopoorMarkets.ts

@@ -0,0 +1,11 @@
+import type { HttpResponse, LoopoorMarket } from '@/types/jumper-backend';
+import { makeClient } from './client';
+
+export type GetLoopoorMarketsResult = HttpResponse<LoopoorMarket[], unknown>;
+
+export async function getLoopoorMarkets(
+  chainId: number,
+): Promise<GetLoopoorMarketsResult> {
+  const client = makeClient();
+  return client.v1.loopoorControllerListMarketsV1({ chainId: String(chainId) });
+}

src/app/lib/getLoopoorMaxLeverage.ts

@@ -0,0 +1,19 @@
+import type {
+  HttpResponse,
+  LoopoorMaxLeverageResponse,
+} from '@/types/jumper-backend';
+import { makeClient } from './client';
+
+export type GetLoopoorMaxLeverageResult = HttpResponse<
+  LoopoorMaxLeverageResponse,
+  unknown
+>;
+
+export async function getLoopoorMaxLeverage(
+  chainId: number,
+  marketId: string,
+  query?: { slippage?: number; safetyBuffer?: number },
+): Promise<GetLoopoorMaxLeverageResult> {
+  const client = makeClient();
+  return client.v1.loopoorControllerGetMaxLeverageV1(chainId, marketId, query);
+}

src/app/lib/getLoopoorStats.ts

@@ -0,0 +1,21 @@
+import type {
+  HttpResponse,
+  LoopoorStatsResponse,
+} from '@/types/jumper-backend';
+import { makeClient } from './client';
+
+export type GetLoopoorStatsResult = HttpResponse<LoopoorStatsResponse, unknown>;
+
+export async function getLoopoorStats(
+  chainId: number,
+  marketId: string,
+  query: {
+    leverageFactor: number;
+    amount?: string;
+    slippage?: number;
+    safetyBuffer?: number;
+  },
+): Promise<GetLoopoorStatsResult> {
+  const client = makeClient();
+  return client.v1.loopoorControllerGetStatsV1(chainId, marketId, query);
+}

src/app/ui/earn/BorrowMarketPage.tsx

@@ -0,0 +1,57 @@
+import { notFound } from 'next/navigation';
+import type { FC } from 'react';
+import { getLoopoorMarket } from 'src/app/lib/getLoopoorMarket';
+import { BorrowDetailsChart } from 'src/components/EarnDetails/BorrowDetailsChart';
+import { BorrowDetailsIntro } from 'src/components/EarnDetails/BorrowDetailsIntro';
+import { EarnDetailsSection } from 'src/components/EarnDetails/EarnDetailsSection';
+import { GoBack } from 'src/components/composite/GoBack/GoBack';
+import { AppPaths } from 'src/const/urls';
+import { getChainsQuery } from 'src/hooks/useChains';
+import { getChainById } from 'src/utils/tokenAndChain';
+import { transformLoopoorMarketToOpportunity } from 'src/utils/loopoor/transformLoopoorMarket';
+import type { ChainId } from '@lifi/sdk';
+
+interface BorrowMarketPageProps {
+  chainId: number;
+  marketId: string;
+}
+
+export const BorrowMarketPage: FC<BorrowMarketPageProps> = async ({
+  chainId,
+  marketId,
+}) => {
+  const result = await getLoopoorMarket(chainId, marketId).catch((error) => {
+    console.error('getLoopoorMarket failed', chainId, marketId, error);
+    return { ok: false as const, data: undefined, error };
+  });
+
+  if (!result.ok || !result.data) {
+    return notFound();
+  }
+
+  console.log('26. BorrowMarketPage market data', result.data);
+
+  const { chains } = await getChainsQuery().catch(() => ({ chains: [] }));
+  const chain = getChainById(chains, chainId as ChainId);
+  const chainKey = chain?.key ?? String(chainId);
+
+  const opportunity = transformLoopoorMarketToOpportunity(
+    //@ts-ignore - TODO: LF-14853: type this properly
+    result.data.data,
+    chainKey,
+    {
+      name: 'Morpho',
+      logo: 'https://strapi-staging.jumper.exchange/uploads/protocols_morpho_22aad9e9df.png',
+    },
+  );
+
+  return (
+    <>
+      <EarnDetailsSection>
+        <GoBack path={AppPaths.Earn} dataTestId="borrow-back-button" />
+        <BorrowDetailsIntro opportunity={opportunity} marketId={marketId} />
+        <BorrowDetailsChart chainId={chainId} marketId={marketId} />
+      </EarnDetailsSection>
+    </>
+  );
+};

src/app/ui/earn/EarnsPage.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
-
 import { EarnOpportunitiesAll } from './EarnOpportunitiesAll/EarnOpportunitiesAll';
 import { EarnTopOpportunities } from './EarnTopOpportunities';
+import { LoopoorMarketBanner } from './LoopoorMarketBanner';
 import { EarnPageTracking } from '@/components/headless/tracking/EarnPageTracking';
 
 interface EarnsPageProps {}
@@ -10,6 +10,7 @@ export const EarnsPage: FC<EarnsPageProps> = () => {
   return (
     <>
       <EarnTopOpportunities />
+      <LoopoorMarketBanner />
       <EarnOpportunitiesAll />
       <EarnPageTracking />
     </>