Borrow page adjustments (#114)

* Hide activeBorrowings when not present

* add extra info to borrowmodal

src/components/Borrow/AssetExpanded.tsx

@@ -26,7 +26,8 @@ export default function AssetExpanded(props: AssetRowProps) {
   if (!asset) return null
 
   function borrowHandler() {
-    useStore.setState({ borrowModal: true })
+    if (!asset) return null
+    useStore.setState({ borrowModal: { asset: asset, marketData: props.row.original } })
   }
 
   function repayHandler() {

src/components/Borrow/Borrowings.tsx

@@ -6,6 +6,10 @@ import { getMarketAssets } from 'utils/assets'
 
 import { BorrowTable } from './BorrowTable'
 
+interface Props extends PageProps {
+  type: 'active' | 'available'
+}
+
 async function Content(props: Props) {
   const debtData = await getAccountDebts(props.params?.account)
   const borrowData = await getBorrowData()
@@ -35,7 +39,22 @@ async function Content(props: Props) {
 
   const { available, active } = getBorrowAssets()
 
-  return <BorrowTable data={props.type === 'active' ? active : available} />
+  const assets = props.type === 'active' ? active : available
+
+  if (!assets.length) return null
+
+  if (props.type === 'active') {
+    return (
+      <Card
+        className='h-fit w-full'
+        title={props.type === 'active' ? 'Borrowings' : 'Available to borrow'}
+      >
+        <BorrowTable data={assets} />
+      </Card>
+    )
+  }
+
+  return <BorrowTable data={assets} />
 }
 
 function Fallback() {
@@ -50,20 +69,22 @@ function Fallback() {
   return <BorrowTable data={available} />
 }
 
-export default function BorrowPage(props: Props) {
+export function AvailableBorrowings(props: PageProps) {
   return (
-    <Card
-      className='h-fit w-full'
-      title={props.type === 'active' ? 'Borrowings' : 'Available to borrow'}
-    >
+    <Card className='h-fit w-full' title={'Available to borrow'}>
       <Suspense fallback={<Fallback />}>
         {/* @ts-expect-error Server Component */}
-        <Content params={props.params} type={props.type} />
+        <Content params={props.params} type='available' />
       </Suspense>
     </Card>
   )
 }
 
-interface Props extends PageProps {
-  type: 'active' | 'available'
+export function ActiveBorrowings(props: PageProps) {
+  return (
+    <Suspense fallback={null}>
+      {/* @ts-expect-error Server Component */}
+      <Content params={props.params} type='active' />
+    </Suspense>
+  )
 }

src/components/BorrowModal.tsx

@@ -1,22 +1,53 @@
-import useStore from 'store'
 import { Modal } from 'components/Modal'
 import TitleAndSubCell from 'components/TitleAndSubCell'
+import { usePathname } from 'next/navigation'
+import useStore from 'store'
+import Image from 'next/image'
+import { Text } from 'components/Text'
+import { formatPercent, formatValue } from 'utils/formatters'
 
 export default function BorrowModal() {
-  const open = useStore((s) => s.borrowModal)
+  const modal = useStore((s) => s.borrowModal)
 
   function setOpen(isOpen: boolean) {
-    useStore.setState({ borrowModal: isOpen })
+    useStore.setState({ borrowModal: null })
   }
 
+  if (!modal) return null
+
+  const liquidityAmount: string = formatValue(modal.marketData.liquidity?.amount || '0', {
+    abbreviated: true,
+    decimals: 6,
+  })
+
+  const liquidityValue: string = formatValue(modal.marketData.liquidity?.value || '0', {
+    abbreviated: true,
+    decimals: 6,
+  })
+
   return (
-    <Modal open={open} setOpen={setOpen} title='Borrow OSMO'>
+    <Modal
+      open={true}
+      setOpen={setOpen}
+      title={
+        <span className='flex items-center gap-4'>
+          <Image src={modal?.asset.logo} alt='token' width={24} height={24} />
+          <Text>Borrow {modal.asset.symbol}</Text>
+        </span>
+      }
+    >
       <div className='flex gap-3'>
-        <TitleAndSubCell title='10.00%' sub={'Borrow rate'} />
+        <TitleAndSubCell
+          title={formatPercent(modal.marketData.borrowRate || '0')}
+          sub={'Borrow rate'}
+        />
         <div className='h-100 w-[1px] bg-white/10'></div>
-        <TitleAndSubCell title='$200' sub={'Borrowed'} />
+        <TitleAndSubCell title={'$0'} sub={'Borrowed'} />
         <div className='h-100 w-[1px] bg-white/10'></div>
-        <TitleAndSubCell title='10.5M ($105M)' sub={'Liquidity available'} />
+        <TitleAndSubCell
+          title={`${liquidityAmount} (${liquidityValue})`}
+          sub={'Liquidity available'}
+        />
       </div>
       <div className='flex'></div>
     </Modal>

src/components/Modal.tsx

@@ -6,7 +6,7 @@ import { Text } from 'components/Text'
 import { Button } from 'components/Button'
 
 interface Props {
-  title: string
+  title: string | ReactNode
   children?: ReactNode | string
   content?: ReactNode | string
   className?: string

src/components/pages/borrow.tsx

@@ -1,4 +1,5 @@
-import Borrowings from 'components/Borrow/Borrowings'
+import { AvailableBorrowings } from 'components/Borrow/Borrowings'
+import { ActiveBorrowings } from 'components/Borrow/Borrowings'
 
 interface Props {
   params: PageParams
@@ -7,8 +8,8 @@ interface Props {
 export default function BorrowPage(props: Props) {
   return (
     <div className='flex w-full flex-col gap-4'>
-      <Borrowings params={props.params} type='active' />
-      <Borrowings params={props.params} type='available' />
+      <ActiveBorrowings params={props.params} />
+      <AvailableBorrowings params={props.params} />
     </div>
   )
 }

src/store/slices/common.ts

@@ -13,7 +13,10 @@ import { formatValue } from 'utils/formatters'
 
 export interface CommonSlice {
   address?: string
-  borrowModal: boolean
+  borrowModal: {
+    asset: Asset
+    marketData: BorrowAsset | BorrowAssetActive
+  } | null
   client?: WalletClient
   clients: {
     accountNft?: MarsAccountNftClient
@@ -38,7 +41,7 @@ export interface CommonSlice {
 
 export function createCommonSlice(set: SetState<CommonSlice>, get: GetState<CommonSlice>) {
   return {
-    borrowModal: false,
+    borrowModal: null,
     createAccountModal: false,
     clients: {},
     creditAccounts: null,