BAN-2813: App redesign

package.json

@@ -47,6 +47,7 @@
     "@tanstack/react-query-persist-client": "^4.33.0",
     "antd": "^5.7.3",
     "axios": "^1.4.0",
+    "banx-vaults-sdk": "0.0.12",
     "bs58": "^5.0.0",
     "chart.js": "^4.4.0",
     "classnames": "^2.3.2",

src/api/tokens/core/requests.ts

@@ -19,7 +19,7 @@ import {
   TokenLoanSchema,
   TokenMarketPreviewSchema,
   TokenOfferPreviewSchema,
-  WalletTokenLoansAndOffersShema,
+  VaultPreviewSchema,
 } from './schemas'
 import {
   BorrowOfferRaw,
@@ -32,7 +32,7 @@ import {
   TokenMarketPreview,
   TokenMarketPreviewResponse,
   TokenOfferPreview,
-  WalletTokenLoansAndOffers,
+  VaultPreview,
 } from './types'
 
 type FetchTokenMarketsPreview = (
@@ -80,7 +80,7 @@ export const fetchTokenMarketOffers: FetchTokenMarketOffers = async ({
 
 type FetchTokenOffersPreview = (props: {
   walletPubkey: string
-  tokenType: LendingTokenType
+  tokenType?: LendingTokenType
 }) => Promise<TokenOfferPreview[] | undefined>
 export const fetchTokenOffersPreview: FetchTokenOffersPreview = async ({
   walletPubkey,
@@ -89,21 +89,24 @@ export const fetchTokenOffersPreview: FetchTokenOffersPreview = async ({
   const queryParams = new URLSearchParams({
     getAll: String(true),
     isPrivate: String(IS_PRIVATE_MARKETS),
-    marketType: String(convertToMarketType(tokenType)),
   })
 
+  if (tokenType) {
+    queryParams.append('marketType', convertToMarketType(tokenType))
+  }
+
   const { data } = await axios.get<{ data: TokenOfferPreview[] }>(
-    `${BACKEND_BASE_URL}/spl-offers/my-offers/${walletPubkey}?${queryParams.toString()}`,
+    `${BACKEND_BASE_URL}/spl-offers/my-offers-v2/${walletPubkey}?${queryParams.toString()}`,
   )
 
   return await parseResponseSafe<TokenOfferPreview[]>(data?.data, TokenOfferPreviewSchema.array())
 }
 
 type FetchWalletTokenLoansAndOffers = (props: {
   walletPublicKey: string
-  tokenType: LendingTokenType
+  tokenType?: LendingTokenType
   getAll?: boolean
-}) => Promise<WalletTokenLoansAndOffers | undefined>
+}) => Promise<TokenLoan[] | undefined>
 
 export const fetchWalletTokenLoansAndOffers: FetchWalletTokenLoansAndOffers = async ({
   walletPublicKey,
@@ -112,23 +115,23 @@ export const fetchWalletTokenLoansAndOffers: FetchWalletTokenLoansAndOffers = as
 }) => {
   const queryParams = new URLSearchParams({
     getAll: String(getAll),
-    marketType: String(convertToMarketType(tokenType)),
     isPrivate: String(IS_PRIVATE_MARKETS),
   })
 
-  const { data } = await axios.get<{ data: WalletTokenLoansAndOffers }>(
-    `${BACKEND_BASE_URL}/spl-loans/borrower/${walletPublicKey}?${queryParams.toString()}`,
-  )
+  if (tokenType) {
+    queryParams.append('marketType', convertToMarketType(tokenType))
+  }
 
-  return await parseResponseSafe<WalletTokenLoansAndOffers>(
-    data?.data,
-    WalletTokenLoansAndOffersShema,
+  const { data } = await axios.get<{ data: TokenLoan[] }>(
+    `${BACKEND_BASE_URL}/spl-loans/borrower-v2/${walletPublicKey}?${queryParams.toString()}`,
   )
+
+  return await parseResponseSafe<TokenLoan[]>(data?.data, TokenLoanSchema.array())
 }
 
 type FetchTokenLenderLoans = (props: {
   walletPublicKey: string
-  tokenType: LendingTokenType
+  tokenType?: LendingTokenType
   getAll?: boolean
 }) => Promise<TokenLoan[] | undefined>
 export const fetchTokenLenderLoans: FetchTokenLenderLoans = async ({
@@ -137,11 +140,14 @@ export const fetchTokenLenderLoans: FetchTokenLenderLoans = async ({
   getAll = true,
 }) => {
   const queryParams = new URLSearchParams({
-    marketType: String(convertToMarketType(tokenType)),
     isPrivate: String(IS_PRIVATE_MARKETS),
     getAll: String(getAll),
   })
 
+  if (tokenType) {
+    queryParams.append('marketType', convertToMarketType(tokenType))
+  }
+
   const { data } = await axios.get<{ data: TokenLoan[] }>(
     `${BACKEND_BASE_URL}/spl-loans/lender/${walletPublicKey}?${queryParams.toString()}`,
   )
@@ -203,7 +209,7 @@ export const fetchTokenLoanAuctionsAndListings: fetchTokenLoanAuctionsAndListing
 
 type FetchUserTokenLoanListings = (props: {
   walletPubkey: string
-  tokenType: LendingTokenType
+  tokenType?: LendingTokenType
   getAll?: boolean
 }) => Promise<TokenLoan[] | undefined>
 
@@ -213,11 +219,14 @@ export const fetchUserTokenLoanListings: FetchUserTokenLoanListings = async ({
   getAll = true,
 }) => {
   const queryParams = new URLSearchParams({
-    marketType: String(convertToMarketType(tokenType)),
     isPrivate: String(IS_PRIVATE_MARKETS),
     getAll: String(getAll),
   })
 
+  if (tokenType) {
+    queryParams.append('marketType', convertToMarketType(tokenType))
+  }
+
   const { data } = await axios.get<{ data: TokenLoan[] }>(
     `${BACKEND_BASE_URL}/spl-loans/borrower-requests/${walletPubkey}?${queryParams.toString()}`,
   )
@@ -252,6 +261,24 @@ export const fetchExtraTokenReward = async (): Promise<MarketTokenRewardsRespons
   return data
 }
 
+type FetchVaultsPreview = (props: {
+  walletPubkey: string
+  tokenType: LendingTokenType
+}) => Promise<VaultPreview[]>
+export const fetchVaultsPreview: FetchVaultsPreview = async ({ walletPubkey, tokenType }) => {
+  const queryParams = new URLSearchParams({
+    getAll: String(true),
+    isPrivate: String(IS_PRIVATE_MARKETS),
+    marketType: String(convertToMarketType(tokenType)),
+  })
+
+  const { data } = await axios.get<{ data: VaultPreview[] }>(
+    `${BACKEND_BASE_URL}/vaults/preview?walletPublicKey=${walletPubkey}&${queryParams.toString()}`,
+  )
+
+  return await VaultPreviewSchema.array().parseAsync(data.data)
+}
+
 type FetchOfferWithMaxMultiplier = (params: {
   marketPubkey: string
   tokenType: LendingTokenType

src/api/tokens/core/schemas.ts

@@ -4,7 +4,6 @@ import { z } from 'zod'
 import {
   BondTradeTransactionSchema,
   FraktBondSchema,
-  OfferSchema,
   SerializedBNSchema,
   SerializedIntBNSchema,
   SerializedPublicKeySchema,
@@ -35,7 +34,7 @@ export const TokenLoanSchema = z.object({
   collateral: TokenMetaSchema,
   collateralPrice: StringIntSchema,
   totalRepaidAmount: z.number().optional(),
-  pnl: z.number().optional(),
+  pnl: z.number().nullable().optional(),
 })
 
 export const TokenMarketPreviewSchema = z.object({
@@ -91,7 +90,12 @@ export const BondOfferV3Schema = z.object({
 export const TokenOfferPreviewSchema = z.object({
   publicKey: z.string(),
   bondOffer: BondOfferV3Schema,
-  tokenMarketPreview: TokenMarketPreviewSchema,
+  tokenMarketPreview: z.object({
+    marketPubkey: z.string(),
+    collateral: TokenMetaSchema,
+    collateralPrice: StringIntSchema,
+    marketCategory: z.array(z.string().or(z.nativeEnum(MarketCategory))),
+  }),
   tokenOfferPreview: z.object({
     publicKey: z.string(),
     liquidatedLoansAmount: z.number(),
@@ -103,11 +107,6 @@ export const TokenOfferPreviewSchema = z.object({
   }),
 })
 
-export const WalletTokenLoansAndOffersShema = z.object({
-  loans: z.array(TokenLoanSchema),
-  offers: z.record(OfferSchema.array()),
-})
-
 export const TokenLoanAuctionsAndListingsSchema = z.object({
   auctions: TokenLoanSchema.array(),
   listings: TokenLoanSchema.array(),
@@ -161,6 +160,51 @@ export const BorrowOfferSchemaRaw = z.object({
   assetReceiver: z.string(),
 })
 
+export const VaultPreviewSchema = z.object({
+  vaultPubkey: z.string(),
+  vaultName: z.string(),
+  lenderWalletPubkey: z.string(),
+
+  totalDepositedAmount: z.number(),
+  maxCapacity: z.number(),
+  loansTvl: z.number(),
+  currentApy: z.number(),
+  targetApy: z.number(),
+  performance: z.number(),
+
+  reserves: StringIntSchema,
+  requestedWithdrawAmount: StringIntSchema,
+  userTotalDepositedAmount: StringIntSchema,
+  pendingClaimAmount: StringIntSchema,
+
+  assetsAllocation: z.array(
+    z.object({
+      allocation: z.number(),
+      mint: z.string(),
+      ticker: z.string(),
+      logoUrl: z.string(),
+      totalDepositedAmount: z.number(),
+      maxCapacity: z.number(),
+      liquidationLtv: z.number(),
+      avgLtv: z.number(),
+      apr: z.number(),
+    }),
+  ),
+
+  assetsDetails: z.array(
+    z.object({
+      mint: z.string(),
+      ticker: z.string(),
+      logoUrl: z.string(),
+    }),
+  ),
+
+  curatorDetails: z.object({
+    name: z.string(),
+    logoUrl: z.string(),
+  }),
+})
+
 export const OfferWithMaxMultiplierSchema = z.object({
   offer: z.object({
     id: z.string(),

src/api/tokens/core/types.ts

@@ -13,7 +13,7 @@ import {
   TokenMarketPreviewSchema,
   TokenMetaSchema,
   TokenOfferPreviewSchema,
-  WalletTokenLoansAndOffersShema,
+  VaultPreviewSchema,
 } from './schemas'
 
 export type TokenMeta = z.infer<typeof TokenMetaSchema>
@@ -25,8 +25,6 @@ export type TokenMarketPreviewResponse = ResponseWithPagination<TokenMarketPrevi
 
 export type TokenOfferPreview = z.infer<typeof TokenOfferPreviewSchema>
 
-export type WalletTokenLoansAndOffers = z.infer<typeof WalletTokenLoansAndOffersShema>
-
 export type TokenLoanAuctionsAndListings = z.infer<typeof TokenLoanAuctionsAndListingsSchema>
 export type TokenLoanAuctionsAndListingsResponse =
   ResponseWithPagination<TokenLoanAuctionsAndListings>
@@ -62,4 +60,5 @@ export interface MarketTokenRewards {
 
 export type MarketTokenRewardsResponse = Record<string, MarketTokenRewards>
 
+export type VaultPreview = z.infer<typeof VaultPreviewSchema>
 export type OfferWithMaxMultiplier = z.infer<typeof OfferWithMaxMultiplierSchema>

src/components/BanxNotifications/BanxNotificationsSider/BanxNotificationsSider.module.less

@@ -2,18 +2,39 @@
 .sider {
   background-color: var(--bg-primary);
   right: 0;
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
+
+  transform: translateX(0);
+  transition: transform 0.3s ease-in-out;
 }
+
 .siderHidden {
-  display: none;
+  transform: translateX(100%);
+}
+
+.siderOverlay {
+  background: var(--overlay-bg);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-overlay);
+
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  pointer-events: none;
+
+  &.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 //? Sider header styles
 .header {
-  padding: 12px 24px;
-  border-bottom: var(--border-less-primary);
+  padding: 24px 24px 8px;
 }
 
 .headerTitleContainer {
@@ -23,13 +44,8 @@
 }
 
 .headerTitle {
-  color: var(--content-secondary);
-  font: var(--title-lg);
+  font: var(--title-md);
   text-transform: uppercase;
-
-  @media (max-width: 640px) {
-    font: var(--title-md);
-  }
 }
 
 .clearNotificationsBtn {
@@ -70,15 +86,14 @@
 }
 
 .contentTitle {
-  font: var(--title-lg);
+  font: var(--title-md);
   text-transform: uppercase;
   width: 100%;
   text-align: center;
   margin-bottom: 16px;
 
   @media (max-width: 640px) {
     margin-bottom: 8px;
-    font: var(--title-md);
   }
 }
 .contentTitleSign {
@@ -151,3 +166,40 @@
   color: var(--content-secondary);
   font: var(--body-text-xs);
 }
+
+.closeIcon {
+  display: none;
+
+  @media (max-width: 640px) {
+    background: var(--bg-primary);
+    border: var(--border-less-primary);
+    border-radius: 100px;
+    cursor: pointer;
+
+    display: none;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 16px;
+    left: -40px;
+    z-index: var(--z-sidebar);
+
+    min-height: 32px;
+    min-width: 32px;
+
+    &.visible {
+      display: flex;
+    }
+
+    svg {
+      width: 12px;
+
+      stroke: var(--content-primary);
+
+      rect {
+        fill: var(--content-primary);
+      }
+    }
+  }
+}