Layout (#97)

* chore: a bunch of ux/styling tweaks
adjust table borders
adjust table transaction expand/collapse to support click the entire row
add app studio page + placeholder content
reduce memory footprint by reducing cache period
refine loaders
add latest block/transaction animation
change app call badge icon
add subtle animation on loadable
tweak settings page

Author: neilcampbell

src/App.routes.tsx

@@ -15,6 +15,7 @@ import { SettingsPage } from './features/settings/pages/settings-page'
 import { TxPage } from './features/transactions/pages/tx-page'
 import { IndexPage } from '@/index-page'
 import { NetworkPage } from '@/features/network/pages/network-page'
+import { AppStudioPage, appStudioPageTitle } from './features/app-studio/pages/app-studio-page'
 
 export const routes = evalTemplates([
   {
@@ -96,7 +97,8 @@ export const routes = evalTemplates([
       },
       {
         template: Urls.AppStudio,
-        element: <ErrorPage title="App Studio" />,
+        errorElement: <ErrorPage title={appStudioPageTitle} />,
+        element: <AppStudioPage />,
       },
       {
         template: Urls.Settings,

src/assets/icons/chevron-down.svg

@@ -9,6 +9,7 @@ import { useLoadableAccount } from '../data'
 import { AccountDetails } from '../components/account-details'
 import { useCallback } from 'react'
 import { PageTitle } from '@/features/common/components/page-title'
+import { PageLoader } from '@/features/common/components/page-loader'
 
 export const accountPageTitle = 'Account'
 export const accountInvalidAddressMessage = 'Address is invalid'
@@ -36,7 +37,7 @@ export function AccountPage() {
   return (
     <>
       <PageTitle title={accountPageTitle} canRefreshPage={isStale} onRefresh={refresh} />
-      <RenderLoadable loadable={loadableAccount} transformError={transformError}>
+      <RenderLoadable loadable={loadableAccount} transformError={transformError} fallback={<PageLoader />}>
         {(account: Account) => <AccountDetails account={account} />}
       </RenderLoadable>
     </>

src/assets/icons/chevron-left-line.svg

@@ -0,0 +1,22 @@
+import { PageTitle } from '@/features/common/components/page-title'
+
+export const appStudioPageTitle = 'App Studio'
+
+export function AppStudioPage() {
+  return (
+    <>
+      <PageTitle title={appStudioPageTitle} />
+      <div>
+        <p>
+          Comming soon!
+          <br />
+          In the meantime, we recommend{' '}
+          <a href="https://app.dappflow.org/beaker-studio/" className="text-primary underline" rel="nofollow" target="_blank">
+            Dappflow
+          </a>{' '}
+          for your application needs.
+        </p>
+      </div>
+    </>
+  )
+}

src/assets/icons/chevron-left.svg

@@ -8,6 +8,7 @@ import { ApplicationDetails } from '../components/application-details'
 import { is404 } from '@/utils/error'
 import { useCallback } from 'react'
 import { PageTitle } from '@/features/common/components/page-title'
+import { PageLoader } from '@/features/common/components/page-loader'
 
 const transformError = (e: Error) => {
   if (is404(e)) {
@@ -38,7 +39,7 @@ export function ApplicationPage() {
   return (
     <>
       <PageTitle title={applicationPageTitle} canRefreshPage={isStale} onRefresh={refresh} />
-      <RenderLoadable loadable={loadableApplication} transformError={transformError}>
+      <RenderLoadable loadable={loadableApplication} transformError={transformError} fallback={<PageLoader />}>
         {(application) => <ApplicationDetails application={application} />}
       </RenderLoadable>
     </>

src/assets/icons/chevron-right-line.svg

@@ -8,6 +8,7 @@ import { AssetDetails } from '../components/asset-details'
 import { useLoadableAsset } from '../data'
 import { useCallback } from 'react'
 import { PageTitle } from '@/features/common/components/page-title'
+import { PageLoader } from '@/features/common/components/page-loader'
 
 const transformError = (e: Error) => {
   if (is404(e)) {
@@ -38,7 +39,7 @@ export function AssetPage() {
   return (
     <>
       <PageTitle title={assetPageTitle} canRefreshPage={isStale} onRefresh={refresh} />
-      <RenderLoadable loadable={loadableAsset} transformError={transformError}>
+      <RenderLoadable loadable={loadableAsset} transformError={transformError} fallback={<PageLoader />}>
         {(asset) => <AssetDetails asset={asset} />}
       </RenderLoadable>
     </>

src/assets/icons/chevron-right.svg

@@ -17,7 +17,7 @@ export function LatestBlocks() {
         <ul>
           {latestBlocks.map((block) => (
             <li key={block.round} className="border-b last:border-0">
-              <BlockLink round={block.round} className="flex p-3 text-sm hover:bg-accent">
+              <BlockLink round={block.round} className="flex p-3.5 text-sm animate-in fade-in-0 zoom-in-90 hover:bg-accent">
                 <Box className="hidden text-primary sm:max-lg:block xl:block" />
                 <div className={cn('mx-2')}>
                   <h3 className={cn('leading-none mb-2')}>{block.round}</h3>

src/features/accounts/pages/account-page.tsx

@@ -132,6 +132,7 @@ describe('block-page', () => {
               rows: [
                 {
                   cells: [
+                    '',
                     ellipseId(transactionResult1.id),
                     ellipseId(transactionResult1.group),
                     ellipseAddress(transactionResult1.sender),
@@ -142,6 +143,7 @@ describe('block-page', () => {
                 },
                 {
                   cells: [
+                    '',
                     ellipseId(transactionResult2.id),
                     ellipseId(transactionResult2.group),
                     ellipseAddress(transactionResult2.sender),

src/features/app-studio/pages/app-studio-page.tsx

@@ -7,6 +7,7 @@ import { is404 } from '@/utils/error'
 import { useLoadableBlock } from '../data'
 import { isInteger } from '@/utils/is-integer'
 import { PageTitle } from '@/features/common/components/page-title'
+import { PageLoader } from '@/features/common/components/page-loader'
 
 const transformError = (e: Error) => {
   if (is404(e)) {
@@ -32,7 +33,7 @@ export function BlockPage() {
   return (
     <>
       <PageTitle title={blockPageTitle} />
-      <RenderLoadable loadable={loadableBlock} transformError={transformError}>
+      <RenderLoadable loadable={loadableBlock} transformError={transformError} fallback={<PageLoader />}>
         {(block) => <BlockDetails block={block} />}
       </RenderLoadable>
     </>

src/features/applications/pages/application-page.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/features/common/utils'
-import { CircleDollarSign, SquareArrowRight, SquareArrowOutDownLeft, Bolt, Snowflake, ShieldCheck, Key } from 'lucide-react'
+import { CircleDollarSign, SquareArrowRight, Bolt, Snowflake, ShieldCheck, Key, Parentheses } from 'lucide-react'
 import { TransactionType } from '@/features/transactions/models'
 
 const badgeVariants = cva(
@@ -35,7 +35,7 @@ const iconClasses = 'mr-1 size-4'
 const transactionTypeBadgeIcon = new Map([
   [TransactionType.Payment.toString(), <CircleDollarSign className={iconClasses} />],
   [TransactionType.AssetTransfer.toString(), <SquareArrowRight className={iconClasses} />],
-  [TransactionType.AppCall.toString(), <SquareArrowOutDownLeft className={iconClasses} />],
+  [TransactionType.AppCall.toString(), <Parentheses className={iconClasses} />],
   [TransactionType.AssetConfig.toString(), <Bolt className={iconClasses} />],
   [TransactionType.AssetFreeze.toString(), <Snowflake className={iconClasses} />],
   [TransactionType.StateProof.toString(), <ShieldCheck className={iconClasses} />],

src/features/assets/pages/asset-page.tsx

@@ -1,12 +1,7 @@
-import SvgChevronLeft from '@/features/common/components/icons/chevron-left'
-import SvgChevronRight from '@/features/common/components/icons/chevron-right'
-
 import { Table } from '@tanstack/react-table'
-
 import { Button } from '@/features/common/components/button'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/common/components/select'
-import SvgChevronLeftLine from './icons/chevron-left-line'
-import SvgChevronRightLine from './icons/chevron-right-line'
+import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react'
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>
@@ -44,29 +39,37 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
         <div className="flex shrink grow basis-0 items-center justify-end space-x-2">
           <Button
             variant="outline"
+            size="icon"
             className="hidden size-8 p-0 lg:flex"
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
-            <SvgChevronLeftLine className="size-4" />
+            <ChevronFirst />
           </Button>
-          <Button variant="outline" className="size-8 p-0" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
             <span className="sr-only">Go to previous page</span>
-            <SvgChevronLeft className="size-4" />
+            <ChevronLeft />
           </Button>
-          <Button variant="outline" className="size-8 p-0" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+          <Button variant="outline" size="icon" className="size-8 p-0" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
             <span className="sr-only">Go to next page</span>
-            <SvgChevronRight className="size-4" />
+            <ChevronRight />
           </Button>
           <Button
             variant="outline"
+            size="icon"
             className="hidden size-8 p-0 lg:flex"
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
-            <SvgChevronRightLine className="size-4" />
+            <ChevronLast />
           </Button>
         </div>
       </div>

src/features/blocks/components/latest-blocks.tsx

@@ -40,7 +40,7 @@ export function DataTable<TData, TValue>({ columns, data, getSubRows, subRowsExp
 
   return (
     <div>
-      <div className="grid rounded-md border">
+      <div className="grid border-y">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -58,7 +58,11 @@ export function DataTable<TData, TValue>({ columns, data, getSubRows, subRowsExp
           <TableBody>
             {table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  {...(row.getCanExpand() ? { className: 'cursor-pointer', onClick: row.getToggleExpandedHandler() } : {})}
+                >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                   ))}

src/features/blocks/pages/block-page.test.tsx

@@ -1,7 +1,6 @@
-import SvgChevronLeft from '@/features/common/components/icons/chevron-left'
-import SvgChevronRight from '@/features/common/components/icons/chevron-right'
 import { Button } from '@/features/common/components/button'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/common/components/select'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
 
 interface Props {
   pageSize: number
@@ -49,13 +48,13 @@ export function LazyLoadDataTablePagination({
         </div>
         <div className="flex shrink grow basis-0 items-center justify-center text-sm font-medium">Page {currentPage}</div>
         <div className="flex shrink grow basis-0 items-center justify-end space-x-2">
-          <Button variant="outline" className="size-8 p-0" onClick={() => previousPage()} disabled={!previousPageEnabled}>
+          <Button variant="outline" size="icon" className="size-8 p-0" onClick={() => previousPage()} disabled={!previousPageEnabled}>
             <span className="sr-only">Go to previous page</span>
-            <SvgChevronLeft className="size-4" />
+            <ChevronLeft />
           </Button>
-          <Button variant="outline" className="size-8 p-0" onClick={() => nextPage()} disabled={!nextPageEnabled}>
+          <Button variant="outline" size="icon" className="size-8 p-0" onClick={() => nextPage()} disabled={!nextPageEnabled}>
             <span className="sr-only">Go to next page</span>
-            <SvgChevronRight className="size-4" />
+            <ChevronRight />
           </Button>
         </div>
       </div>

src/features/blocks/pages/block-page.tsx

@@ -53,7 +53,7 @@ export function LazyLoadDataTable<TData, TValue>({ columns, createLoadablePage,
 
   return (
     <div>
-      <div className="grid rounded-md border">
+      <div className="grid border-y">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -88,7 +88,11 @@ export function LazyLoadDataTable<TData, TValue>({ columns, createLoadablePage,
             {loadablePage.state === 'hasData' &&
               table.getRowModel().rows.length > 0 &&
               table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  {...(row.getCanExpand() ? { className: 'cursor-pointer', onClick: row.getToggleExpandedHandler() } : {})}
+                >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                   ))}

src/features/common/components/badge.tsx

@@ -0,0 +1,10 @@
+import { Loader2 as Loader } from 'lucide-react'
+
+export function PageLoader() {
+  return (
+    <div className="mt-10 flex flex-col items-center justify-center">
+      <Loader className="size-16 animate-spin" />
+      <span className="mt-2">Loading...</span>
+    </div>
+  )
+}

src/features/common/components/data-table-pagination.tsx

@@ -9,7 +9,7 @@ export const refreshButtonLabel = 'Refresh'
 
 export function RefreshButton({ onClick }: Props) {
   return (
-    <Button onClick={onClick} variant="ghost" size="icon" aria-label={refreshButtonLabel} className="ml-auto">
+    <Button onClick={onClick} variant="outline" size="icon" aria-label={refreshButtonLabel} className="ml-auto">
       <RefreshCw className="size-[1.2rem]" />
       <span className="sr-only">{refreshButtonLabel}</span>
     </Button>

src/features/common/components/data-table.tsx

@@ -11,7 +11,7 @@ export type RenderLoadableProps<T> = {
 
 export function RenderLoadable<T>({ loadable, children, fallback, transformError }: RenderLoadableProps<T>) {
   if (loadable.state === 'hasData') {
-    return <>{children(loadable.data)}</>
+    return <div className="animate-in fade-in-40">{children(loadable.data)}</div>
   } else if (loadable.state === 'loading') {
     return <>{fallback ?? <Loader className="size-10 animate-spin" />}</>
   }

src/features/common/components/icons/chevron-down.tsx

@@ -9,8 +9,8 @@ import { applicationResultsAtom } from '@/features/applications/data'
 import { assetMetadataResultsAtom, assetResultsAtom } from '@/features/assets/data'
 
 const cleanUpIntervalMillis = 600_000 // 10 minutes
-const expirationMillis = 3_600_000 // 1 hour
-// Run every 10 minutes and cleanup data that hasn't been accessed in the last 1 hour
+const expirationMillis = 1_800_000 // 30 minutes
+// Run every 10 minutes and cleanup data that hasn't been accessed in the last 30 minutes
 
 const stateCleanupEffect = atomEffect((get, set) => {
   const cleanup = setInterval(() => {

src/features/common/components/icons/chevron-left-line.tsx

@@ -121,7 +121,7 @@ describe('group-page', () => {
             // This table has 10+ row, we only test the first 2 rows
             rows: [
               {
-                cells: ['INDQXWQ...', '/oRSr2u...', 'AACC...EN4A', '1201559522', 'Application Call', ''],
+                cells: ['', 'INDQXWQ...', '/oRSr2u...', 'AACC...EN4A', '1201559522', 'Application Call', ''],
               },
             ],
           })