feat(ledger-browser): implement dynamic app setup

.gitignore

@@ -54,6 +54,7 @@ cactus-openapi-spec-*.json
 build/
 .gradle/
 site/
+.env
 
 .build-cache/*.tsbuildinfo
 

packages/cacti-ledger-browser/.env.template

@@ -0,0 +1,3 @@
+VITE_SUPABASE_URL=__SUPABSE_URL__
+VITE_SUPABASE_KEY=__SUPABASE_KEY__
+VITE_SUPABASE_SCHEMA=public

packages/cacti-ledger-browser/src/main/typescript/CactiLedgerBrowserApp.tsx

@@ -1,28 +1,37 @@
-import { useRoutes, BrowserRouter, RouteObject } from "react-router-dom";
+import {
+  useRoutes,
+  BrowserRouter,
+  RouteObject,
+  Outlet,
+} from "react-router-dom";
 import CssBaseline from "@mui/material/CssBaseline";
+import CircularProgress from "@mui/material/CircularProgress";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from "@tanstack/react-query";
 // import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { themeOptions } from "./theme";
 import ContentLayout from "./components/Layout/ContentLayout";
 import HeaderBar from "./components/Layout/HeaderBar";
 import HomePage from "./pages/home/HomePage";
-import { AppConfig, AppListEntry } from "./common/types/app";
+import { AppInstance, AppListEntry } from "./common/types/app";
 import { patchAppRoutePath } from "./common/utils";
 import { NotificationProvider } from "./common/context/NotificationContext";
-
-type AppConfigProps = {
-  appConfig: AppConfig[];
-};
+import { guiAppConfig } from "./common/queries";
+import createApplications from "./common/createApplications";
+import ConnectionFailedDialog from "./components/ConnectionFailedDialog/ConnectionFailedDialog";
 
 /**
  * Get list of all apps from the config
  */
-function getAppList(appConfig: AppConfig[]) {
+function getAppList(appConfig: AppInstance[]) {
   const appList: AppListEntry[] = appConfig.map((app) => {
     return {
-      path: app.options.path,
+      path: app.path,
       name: app.appName,
     };
   });
@@ -38,17 +47,17 @@ function getAppList(appConfig: AppConfig[]) {
 /**
  * Create header bar for each app based on app menuEntries field in config.
  */
-function getHeaderBarRoutes(appConfig: AppConfig[]) {
+function getHeaderBarRoutes(appConfig: AppInstance[]) {
   const appList = getAppList(appConfig);
 
   const headerRoutesConfig = appConfig.map((app) => {
     return {
-      key: app.options.path,
-      path: `${app.options.path}/*`,
+      key: app.path,
+      path: `${app.path}/*`,
       element: (
         <HeaderBar
           appList={appList}
-          path={app.options.path}
+          path={app.path}
           menuEntries={app.menuEntries}
         />
       ),
@@ -65,15 +74,16 @@ function getHeaderBarRoutes(appConfig: AppConfig[]) {
 /**
  * Create content routes
  */
-function getContentRoutes(appConfig: AppConfig[]) {
+function getContentRoutes(appConfig: AppInstance[]) {
   const appRoutes: RouteObject[] = appConfig.map((app) => {
     return {
-      key: app.options.path,
-      path: app.options.path,
+      key: app.path,
+      path: app.path,
+      element: <Outlet context={app.options} />,
       children: app.routes.map((route) => {
         return {
           key: route.path,
-          path: patchAppRoutePath(app.options.path, route.path),
+          path: patchAppRoutePath(app.path, route.path),
           element: route.element,
           children: route.children,
         };
@@ -84,7 +94,7 @@ function getContentRoutes(appConfig: AppConfig[]) {
   // Include landing / welcome page
   appRoutes.push({
     index: true,
-    element: <HomePage />,
+    element: <HomePage appConfig={appConfig} />,
   });
 
   return useRoutes([
@@ -96,38 +106,54 @@ function getContentRoutes(appConfig: AppConfig[]) {
   ]);
 }
 
-const App: React.FC<AppConfigProps> = ({ appConfig }) => {
+function App() {
+  const { isError, isPending, data } = useQuery(guiAppConfig());
+
+  if (isError) {
+    return <ConnectionFailedDialog />;
+  }
+
+  const appConfig = createApplications(data);
+
   const headerRoutes = getHeaderBarRoutes(appConfig);
   const contentRoutes = getContentRoutes(appConfig);
 
   return (
     <div>
+      {isPending && (
+        <CircularProgress
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            zIndex: 9999,
+          }}
+        />
+      )}
       {headerRoutes}
       {contentRoutes}
     </div>
   );
-};
+}
 
 // MUI Theme
 const theme = createTheme(themeOptions);
 
 // React Query client
 const queryClient = new QueryClient();
 
-const CactiLedgerBrowserApp: React.FC<AppConfigProps> = ({ appConfig }) => {
+export default function CactiLedgerBrowserApp() {
   return (
     <BrowserRouter>
       <ThemeProvider theme={theme}>
         <QueryClientProvider client={queryClient}>
           <NotificationProvider>
             <CssBaseline />
-            <App appConfig={appConfig} />
+            <App />
             {/* <ReactQueryDevtools initialIsOpen={false} /> */}
           </NotificationProvider>
         </QueryClientProvider>
       </ThemeProvider>
     </BrowserRouter>
   );
-};
-
-export default CactiLedgerBrowserApp;
+}

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/AccountERC20View/AccountERC20View.tsx

@@ -3,9 +3,9 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
 
-import { TokenERC20 } from "../../../../common/supabase-types";
 import ERC20TokenList from "./ERC20TokenList";
 import ERC20TokenDetails from "./ERC20TokenDetails";
+import { TokenERC20 } from "../../supabase-types";
 
 export type AccountERC20ViewProps = {
   accountAddress: string;

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20BalanceHistoryTable.tsx

@@ -14,8 +14,8 @@ import Typography from "@mui/material/Typography";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 
-import { TokenHistoryItem20 } from "../../../../common/supabase-types";
 import ShortenedTypography from "../../../../components/ui/ShortenedTypography";
+import { TokenHistoryItem20 } from "../../supabase-types";
 
 const StyledHeaderCell = styled(TableCell)(({ theme }) => ({
   color: theme.palette.primary.main,

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20TokenDetails.tsx

@@ -7,12 +7,12 @@ import Typography from "@mui/material/Typography";
 import Skeleton from "@mui/material/Skeleton";
 
 import { ethERC20TokenHistory } from "../../queries";
-import { TokenERC20 } from "../../../../common/supabase-types";
 import ShortenedTypography from "../../../../components/ui/ShortenedTypography";
 import { useNotification } from "../../../../common/context/NotificationContext";
 import ERC20BalanceHistoryChart from "./ERC20BalanceHistoryChart";
 import ERC20BalanceHistoryTable from "./ERC20BalanceHistoryTable";
 import { createBalanceHistoryList } from "./balanceHistory";
+import { TokenERC20 } from "../../supabase-types";
 
 function TokenDetailsPlaceholder() {
   return (

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/AccountERC20View/ERC20TokenList.tsx

@@ -14,8 +14,8 @@ import TableHead from "@mui/material/TableHead";
 import CircularProgress from "@mui/material/CircularProgress";
 
 import { useNotification } from "../../../../common/context/NotificationContext";
-import { TokenERC20 } from "../../../../common/supabase-types";
 import { ethAllERC20TokensByAccount } from "../../queries";
+import { TokenERC20 } from "../../supabase-types";
 
 const StyledHeaderCell = styled(TableCell)(({ theme }) => ({
   color: theme.palette.primary.main,

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/AccountERC20View/balanceHistory.ts

@@ -1,4 +1,4 @@
-import { TokenHistoryItem20 } from "../../../../common/supabase-types";
+import { TokenHistoryItem20 } from "../../supabase-types";
 
 export type BalanceHistoryListData = {
   created_at: string;

packages/cacti-ledger-browser/src/main/typescript/apps/eth/hooks.tsx

@@ -0,0 +1,16 @@
+import { useOutletContext } from "react-router-dom";
+import { AppInstancePersistencePluginOptions } from "../../common/types/app";
+
+export function useEthAppConfig() {
+  return useOutletContext<AppInstancePersistencePluginOptions>();
+}
+
+export function useEthSupabaseConfig() {
+  const appConfig = useEthAppConfig();
+
+  return {
+    schema: appConfig.supabaseSchema,
+    url: appConfig.supabaseUrl,
+    key: appConfig.supabaseKey,
+  };
+}

packages/cacti-ledger-browser/src/main/typescript/apps/eth/index.tsx

@@ -2,49 +2,84 @@ import Dashboard from "./pages/Dashboard/Dashboard";
 import Blocks from "./pages/Blocks/Blocks";
 import Transactions from "./pages/Transactions/Transactions";
 import Accounts from "./pages/Accounts/Accounts";
-import { AppConfig } from "../../common/types/app";
+import {
+  AppInstancePersistencePluginOptions,
+  AppDefinition,
+} from "../../common/types/app";
 import { usePersistenceAppStatus } from "../../common/hook/use-persistence-app-status";
 import PersistencePluginStatus from "../../components/PersistencePluginStatus/PersistencePluginStatus";
+import { GuiAppConfig } from "../../common/supabase-types";
+import { AppCategory } from "../../common/app-category";
 
-const ethConfig: AppConfig = {
+const ethBrowserAppDefinition: AppDefinition = {
   appName: "Ethereum Browser",
-  options: {
-    instanceName: "Ethereum",
-    description:
-      "Applicaion for browsing Ethereum ledger blocks, transactions and tokens. Requires Ethereum persistence plugin to work correctly.",
-    path: "/eth",
+  category: AppCategory.LedgerBrowser,
+  defaultInstanceName: "My Eth Browser",
+  defaultDescription:
+    "Application for browsing Ethereum ledger blocks, transactions and tokens. Requires Ethereum persistence plugin to work correctly.",
+  defaultPath: "/eth",
+  defaultOptions: {
+    supabaseUrl: "http://localhost:8000",
+    supabaseKey:
+      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE",
+    supabaseSchema: "ethereum",
+  },
+
+  createAppInstance(app: GuiAppConfig) {
+    const supabaseOptions =
+      app.options as any as AppInstancePersistencePluginOptions;
+
+    if (
+      !supabaseOptions ||
+      !supabaseOptions.supabaseUrl ||
+      !supabaseOptions.supabaseKey ||
+      !supabaseOptions.supabaseSchema
+    ) {
+      throw new Error(
+        `Invalid ethereum app specific options in the database: ${JSON.stringify(supabaseOptions)}`,
+      );
+    }
+
+    return {
+      id: app.id,
+      appName: "Ethereum Browser",
+      instanceName: app.instance_name,
+      description: app.description,
+      path: app.path,
+      options: supabaseOptions,
+      menuEntries: [
+        {
+          title: "Dashboard",
+          url: "/",
+        },
+        {
+          title: "Accounts",
+          url: "/accounts",
+        },
+      ],
+      routes: [
+        {
+          element: <Dashboard />,
+        },
+        {
+          path: "blocks",
+          element: <Blocks />,
+        },
+        {
+          path: "transactions",
+          element: <Transactions />,
+        },
+        {
+          path: "accounts",
+          element: <Accounts />,
+        },
+      ],
+      useAppStatus: () => usePersistenceAppStatus("PluginPersistenceEthereum"),
+      StatusComponent: (
+        <PersistencePluginStatus pluginName="PluginPersistenceEthereum" />
+      ),
+    };
   },
-  menuEntries: [
-    {
-      title: "Dashboard",
-      url: "/",
-    },
-    {
-      title: "Accounts",
-      url: "/accounts",
-    },
-  ],
-  routes: [
-    {
-      element: <Dashboard />,
-    },
-    {
-      path: "blocks",
-      element: <Blocks />,
-    },
-    {
-      path: "transactions",
-      element: <Transactions />,
-    },
-    {
-      path: "accounts",
-      element: <Accounts />,
-    },
-  ],
-  useAppStatus: () => usePersistenceAppStatus("PluginPersistenceEthereum"),
-  StatusComponent: (
-    <PersistencePluginStatus pluginName="PluginPersistenceEthereum" />
-  ),
 };
 
-export default ethConfig;
+export default ethBrowserAppDefinition;