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>
     </>