Merge pull request #30 from blockworks-foundation/stats-table-mobile

stats table mobile

components/TableElements.tsx

@@ -57,7 +57,7 @@ export const ExpandableRow = ({
                 : `bg-[rgba(255,255,255,0.07)]`
             } default-transition font-normal p-4 rounded-none text-th-fgd-1 w-full hover:bg-th-bkg-4 focus:outline-none`}
           >
-            <div className="grid grid-cols-12 grid-rows-1 gap-4">
+            <div className="grid grid-cols-12 grid-rows-1">
               {buttonTemplate}
               <div className="flex items-center justify-end">
                 <ChevronDownIcon

components/stats-page/StatsTotals.tsx

@@ -1,7 +1,11 @@
-import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import { I80F48 } from '@blockworks-foundation/mango-client'
 import Chart from '../Chart'
 import { tokenPrecision } from '../../utils'
+import { useViewport } from '../../hooks/useViewport'
+import { breakpoints } from '../TradePageGrid'
+import { Table, Td, Th, TrBody, TrHead } from '../TableElements'
+import { ExpandableRow } from '../TableElements'
+import MobileTableHeader from '../mobile/MobileTableHeader'
 
 function formatNumberString(x: number, decimals): string {
   return new Intl.NumberFormat('en-US', {
@@ -12,6 +16,8 @@ function formatNumberString(x: number, decimals): string {
 
 export default function StatsTotals({ latestStats, stats }) {
   const startTimestamp = 1622905200000
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.sm : false
 
   const trimmedStats = stats.filter(
     (stat) => new Date(stat.hourly).getTime() >= startTimestamp
@@ -119,39 +125,22 @@ export default function StatsTotals({ latestStats, stats }) {
           />
         </div>
       </div>
-      <div className="md:flex md:flex-col min-w-full">
+      {!isMobile ? (
-        <Table className="min-w-full divide-y divide-th-bkg-2">
+        <Table>
-          <Thead>
+          <thead>
-            <Tr className="text-th-fgd-3 text-xs">
+            <TrHead>
-              <Th scope="col" className="px-6 py-3 text-left font-normal">
+              <Th>Asset</Th>
-                Asset
+              <Th>Total Deposits</Th>
-              </Th>
+              <Th>Total Borrows</Th>
-              <Th scope="col" className="px-6 py-3 text-left font-normal">
+              <Th>Deposit Interest</Th>
-                Total Deposits
+              <Th>Borrow Interest</Th>
-              </Th>
+              <Th>Utilization</Th>
-              <Th scope="col" className="px-6 py-3 text-left font-normal">
+            </TrHead>
-                Total Borrows
+          </thead>
-              </Th>
+          <tbody>
-              <Th scope="col" className="px-6 py-3 text-left font-normal">
-                Deposit Interest
-              </Th>
-              <Th scope="col" className="px-6 py-3 text-left font-normal">
-                Borrow Interest
-              </Th>
-              <Th scope="col" className="px-6 py-3 text-left font-normal">
-                Utilization
-              </Th>
-            </Tr>
-          </Thead>
-          <Tbody>
             {latestStats.map((stat, index) => (
-              <Tr
+              <TrBody key={stat.name} index={index}>
-                key={stat.name}
+                <Td>
-                className={`border-b border-th-bkg-2
-                  ${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
-                `}
-              >
-                <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
                   <div className="flex items-center">
                     <img
                       alt=""
@@ -163,36 +152,114 @@ export default function StatsTotals({ latestStats, stats }) {
                     {stat.name}
                   </div>
                 </Td>
-                <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
+                <Td>
                   {formatNumberString(
                     stat.totalDeposits,
                     tokenPrecision[stat.name]
                   )}
                 </Td>
-                <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
+                <Td>
                   {formatNumberString(
                     stat.totalBorrows,
                     tokenPrecision[stat.name]
                   )}
                 </Td>
-                <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
+                <Td>
+                  <span className="text-th-green">
                     {formatNumberString(stat.depositInterest.toNumber(), 2)}%
+                  </span>
                 </Td>
-                <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
+                <Td>
+                  <span className="text-th-red">
                     {formatNumberString(stat.borrowInterest.toNumber(), 2)}%
+                  </span>
                 </Td>
-                <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
+                <Td>
                   {formatNumberString(
                     stat.utilization.mul(I80F48.fromNumber(100)).toNumber(),
                     2
                   )}
                   %
                 </Td>
-              </Tr>
+              </TrBody>
             ))}
-          </Tbody>
+          </tbody>
         </Table>
+      ) : (
+        <>
+          <MobileTableHeader
+            headerTemplate={<div className="col-span-11">Asset</div>}
+          />
+          {latestStats.map((stat, index) => (
+            <ExpandableRow
+              buttonTemplate={
+                <div className="col-span-11">
+                  <div className="col-span-11 flex items-center pb-3 text-fgd-1">
+                    <div className="flex items-center">
+                      <img
+                        alt=""
+                        width="20"
+                        height="20"
+                        src={`/assets/icons/${stat.name
+                          .split(/-|\//)[0]
+                          .toLowerCase()}.svg`}
+                        className={`mr-2.5`}
+                      />
+                      <div className="mb-0.5 text-left">{stat.name}</div>
                     </div>
+                  </div>
+                  <div className="grid grid-cols-11 grid-rows-1 gap-4">
+                    <div className="col-span-6 text-left">
+                      <div className="pb-0.5 text-th-fgd-3 text-xs">
+                        Total Deposits
+                      </div>
+                      {formatNumberString(stat.totalDeposits, 0)}
+                    </div>
+                    <div className="col-span-5 text-left">
+                      <div className="pb-0.5 text-th-fgd-3 text-xs">
+                        Total Borrows
+                      </div>
+                      {formatNumberString(stat.totalBorrows, 0)}
+                    </div>
+                  </div>
+                </div>
+              }
+              key={`${index}`}
+              index={index}
+              panelTemplate={
+                <>
+                  <div className="col-span-1 text-left">
+                    <div className="pb-0.5 text-th-fgd-3 text-xs">
+                      Deposit Rate
+                    </div>
+                    <span className="text-th-green">
+                      {formatNumberString(stat.depositInterest.toNumber(), 2)}%
+                    </span>
+                  </div>
+                  <div className="col-span-1 text-left">
+                    <div className="pb-0.5 text-th-fgd-3 text-xs">
+                      Borrow Rate
+                    </div>
+                    <span className="text-th-red">
+                      {formatNumberString(stat.borrowInterest.toNumber(), 2)}%
+                    </span>
+                  </div>
+                  <div className="col-span-1 text-left">
+                    <div className="pb-0.5 text-th-fgd-3 text-xs">
+                      Utilization
+                    </div>
+                    {formatNumberString(
+                      stat.utilization.mul(I80F48.fromNumber(100)).toNumber(),
+                      2
+                    )}
+                    %
+                  </div>
+                </>
+              }
+            />
+          ))}
+        </>
+      )}
     </>
   )
 }

pages/account.tsx

@@ -118,7 +118,7 @@ export default function Account() {
             </>
           ) : null}
         </div>
-        <div className="bg-th-bkg-2 overflow-none p-6 rounded-lg">
+        <div className="bg-th-bkg-2 overflow-none p-4 sm:p-6 rounded-lg">
           {mangoAccount ? (
             <>
               <div className="border-b border-th-fgd-4 mb-8">

pages/borrow.tsx

@@ -30,7 +30,7 @@ export default function Borrow() {
             Borrow Funds
           </h1>
         </div>
-        <div className="p-6 rounded-lg bg-th-bkg-2">
+        <div className="bg-th-bkg-2 overflow-none p-4 sm:p-6 rounded-lg">
           {selectedMangoAccount ? (
             <AccountBorrows />
           ) : connected ? (

pages/stats.tsx

@@ -29,7 +29,7 @@ export default function StatsPage() {
         <div className="flex flex-col sm:flex-row pt-8 pb-3 sm:pb-6 md:pt-10">
           <h1 className={`text-th-fgd-1 text-2xl font-semibold`}>Stats</h1>
         </div>
-        <div className="bg-th-bkg-2 overflow-none p-6 rounded-lg">
+        <div className="bg-th-bkg-2 overflow-none p-4 sm:p-6 rounded-lg">
           <div className="border-b border-th-fgd-4 mb-4">
             <nav className={`-mb-px flex space-x-6`} aria-label="Tabs">
               {TABS.map((tabName) => (