feat(Trade page): account details card (#348)

* feat(Trade page): account details card

* feat(account details): dont display the card when account has no deposits

src/components/Account/AccountBalancesTable.tsx

@@ -29,6 +29,7 @@ interface Props {
   account: Account
   lendingData: LendingMarketTableData[]
   borrowingData: BorrowMarketTableData[]
+  tableBodyClassName?: string
 }
 
 function calculatePositionValues(
@@ -215,7 +216,7 @@ export default function AccountBalancesTable(props: Props) {
           </tr>
         ))}
       </thead>
-      <tbody>
+      <tbody className={props.tableBodyClassName}>
         {table.getRowModel().rows.map((row) => {
           return (
             <tr key={row.id} className=' text-white/60'>

src/components/Trade/AccountDetailsCard.tsx

@@ -0,0 +1,38 @@
+import Card from 'components/Card'
+import useCurrentAccount from 'hooks/useCurrentAccount'
+import AccountBalancesTable from 'components/Account/AccountBalancesTable'
+import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
+import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
+
+export default function AccountDetailsCard() {
+  const account = useCurrentAccount()
+  const { availableAssets: borrowAvailableAssets, accountBorrowedAssets } =
+    useBorrowMarketAssetsTableData()
+  const { availableAssets: lendingAvailableAssets, accountLentAssets } =
+    useLendingMarketAssetsTableData()
+  const borrowAssetsData = [...borrowAvailableAssets, ...accountBorrowedAssets]
+  const lendingAssetsData = [...lendingAvailableAssets, ...accountLentAssets]
+
+  const tabs = (
+    <div className={className.tabWrapper}>
+      <div className={className.tab}>Balances</div>
+    </div>
+  )
+
+  if (account && account.deposits.length)
+    return (
+      <Card className='h-fit' title={tabs}>
+        <AccountBalancesTable
+          account={account}
+          borrowingData={borrowAssetsData}
+          lendingData={lendingAssetsData}
+          tableBodyClassName='gradient-card-content'
+        />
+      </Card>
+    )
+}
+
+const className = {
+  tabWrapper: 'flex w-full items-center bg-white/10 pt-4 pl-4 font-semibold',
+  tab: 'mr-4 pb-3 cursor-pointer select-none flex flex-row border-b-2 border-pink border-solid',
+}

src/components/Trade/OrderBook.tsx

@@ -1,33 +0,0 @@
-import { Suspense } from 'react'
-import { useParams } from 'react-router-dom'
-
-import Card from 'components/Card'
-import Loading from 'components/Loading'
-import Text from 'components/Text'
-
-function Content() {
-  const params = useParams()
-  const address = params.address
-
-  return address ? (
-    <Text size='sm'>{`Order book for ${address}`}</Text>
-  ) : (
-    <Text size='sm' className='w-full text-center'>
-      You need to be connected to see the order book
-    </Text>
-  )
-}
-
-function Fallback() {
-  return <Loading className='h-4 w-50' />
-}
-
-export default function OrderBook() {
-  return (
-    <Card className='bg-white/5' title='Order Book' contentClassName='px-4 py-6'>
-      <Suspense fallback={<Fallback />}>
-        <Content />
-      </Suspense>
-    </Card>
-  )
-}

src/pages/TradePage.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
 
-import OrderBook from 'components/Trade/OrderBook'
 import TradeChart from 'components/Trade/TradeChart'
 import TradeModule from 'components/Trade/TradeModule'
 import { getEnabledMarketAssets } from 'utils/assets'
+import AccountDetailsCard from 'components/Trade/AccountDetailsCard'
 
 export default function TradePage() {
   const enabledMarketAssets = getEnabledMarketAssets()
@@ -19,7 +19,7 @@ export default function TradePage() {
         onChangeSellAsset={setSellAsset}
       />
       <TradeChart buyAsset={buyAsset} sellAsset={sellAsset} />
-      <OrderBook />
+      <AccountDetailsCard />
     </div>
   )
 }

tailwind.config.js

@@ -260,6 +260,9 @@ module.exports = {
             background:
               'linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
           },
+          '.gradient-card-content': {
+            backgroundImage: 'linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05))',
+          },
           '.gradient-hatched': {
             backgroundImage:
               'linear-gradient(135deg,transparent 33.33%,#826d6b 33.33%,#826d6b 50%,transparent 50%,transparent 83.33%,#826d6b 83.33%,#826d6b 100%)',