feat(dw): add boot status

kadena-community · Nov 14, 2024 · e1895eb · e1895eb
1 parent 8d87f41
commit e1895eb
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 28 deletions.
diff --git a/packages/apps/dev-wallet/index.html b/packages/apps/dev-wallet/index.html
@@ -8,8 +8,6 @@
     <link rel="stylesheet" href="./boot.css" />
   </head>
   <body class="boot">
-    <div id="root"></div>
-    <!-- Welcome message will be removed after wallet is loaded -->
     <div id="welcome-message" class="welcome-wrapper">
       <div class="welcome-message-content">
         <img
@@ -19,9 +17,11 @@
           style="margin: 0"
         />
         <h1 style="margin: 0; font-weight: 400">Chainweaver v3</h1>
-        <p style="margin: 0">Loading</p>
+        <div id="loading-content">Loading...</div>
       </div>
     </div>
+    <div id="root"></div>
+    <!-- Welcome message will be removed after wallet is loaded -->
 
     <script type="module" src="/src/index.ts"></script>
   </body>

diff --git a/packages/apps/dev-wallet/public/boot.css b/packages/apps/dev-wallet/public/boot.css
@@ -1,20 +1,26 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 .welcome-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   height: 100vh;
-  background: #050e1b;
   opacity: 0;
 }
 .welcome-message-content {
   display: flex;
-  padding: 40px 100px;
+  padding: 40px;
+  max-width: 455px;
+  width: 455px;
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -27,8 +33,30 @@
   text-align: center;
   -webkit-font-smoothing: antialiased;
 }
-body.boot.boot-theme-light .welcome-wrapper {
-  background: #f5f5f5;
+
+#loading-content {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  font-family: 'Roboto', sans-serif;
+  font-smooth: antialiased;
+  line-height: 1rem;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  width: 300px;
+  background: black;
+  height: 80px;
+  padding: 10px;
+  box-sizing: border-box;
+  text-align: left;
+  font-size: 1rem;
+  gap: 4px;
+  border-radius: 4px;
+}
+
+body.boot.boot-theme-light #loading-content {
+  background: #f0f0f0;
 }
 
 body.boot.boot-theme-light .welcome-wrapper .welcome-message-content {

diff --git a/packages/apps/dev-wallet/src/App/app.tsx b/packages/apps/dev-wallet/src/App/app.tsx
@@ -1,32 +1,33 @@
 import { DatabaseProvider } from '@/modules/db/db.provider';
 import { WalletProvider } from '@/modules/wallet/wallet.provider';
-import { MediaContextProvider } from '@kadena/kode-ui';
+import { MediaContextProvider, useTheme } from '@kadena/kode-ui';
 import { LayoutProvider } from '@kadena/kode-ui/patterns';
 import { useEffect } from 'react';
 import { PromptProvider } from '../Components/PromptProvider/Prompt';
 import { Routes } from './routes';
 import { SessionProvider } from './session';
 
 function Providers({ children }: { children: React.ReactNode }) {
+  useTheme();
   useEffect(() => {
     if (!localStorage.getItem('theme')) {
       localStorage.setItem('theme', 'dark');
     }
   }, []);
   return (
     <MediaContextProvider>
-      <SessionProvider>
-        <PromptProvider>
-          <DatabaseProvider>
-            <WalletProvider>
-              <LayoutProvider>
+      <LayoutProvider>
+        <SessionProvider>
+          <PromptProvider>
+            <DatabaseProvider>
+              <WalletProvider>
                 {/* TODO: fixed the issue with prompt and remove this one in favor of the one above */}
                 <PromptProvider>{children}</PromptProvider>
-              </LayoutProvider>
-            </WalletProvider>
-          </DatabaseProvider>
-        </PromptProvider>
-      </SessionProvider>
+              </WalletProvider>
+            </DatabaseProvider>
+          </PromptProvider>
+        </SessionProvider>
+      </LayoutProvider>
     </MediaContextProvider>
   );
 }

diff --git a/packages/apps/dev-wallet/src/App/layout-mini.tsx b/packages/apps/dev-wallet/src/App/layout-mini.tsx
@@ -1,10 +1,9 @@
-import { Stack, useTheme } from '@kadena/kode-ui';
+import { Stack } from '@kadena/kode-ui';
 import { FC } from 'react';
 import { Outlet } from 'react-router-dom';
 import { containerStyle } from './layout-mini.css';
 
 export const LayoutMini: FC = () => {
-  useTheme();
   return (
     <>
       <Stack className={containerStyle}>

diff --git a/packages/apps/dev-wallet/src/App/session.tsx b/packages/apps/dev-wallet/src/App/session.tsx
@@ -1,4 +1,6 @@
+import { LoadingContent } from '@/Components/LoadingContent/LoadingContent';
 import { Session } from '@/utils/session';
+import { Text } from '@kadena/kode-ui';
 import {
   FC,
   PropsWithChildren,
@@ -42,7 +44,13 @@ export const SessionProvider: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <sessionContext.Provider value={Session}>
-      {loaded ? children : 'Loading session...'}
+      {loaded ? (
+        children
+      ) : (
+        <LoadingContent>
+          <Text>Loading session...</Text>
+        </LoadingContent>
+      )}
     </sessionContext.Provider>
   );
 };
diff --git a/packages/apps/dev-wallet/src/Components/LoadingContent/LoadingContent.tsx b/packages/apps/dev-wallet/src/Components/LoadingContent/LoadingContent.tsx
@@ -0,0 +1,15 @@
+import { Stack } from '@kadena/kode-ui';
+import { createPortal } from 'react-dom';
+
+export function LoadingContent({ children }: { children: React.ReactNode }) {
+  const loadingContent = document.getElementById('loading-content');
+  if (!loadingContent) {
+    return children;
+  }
+  return createPortal(
+    <Stack justifyContent={'flex-start'} alignItems={'flex-start'}>
+      {children}
+    </Stack>,
+    loadingContent,
+  );
+}
diff --git a/packages/apps/dev-wallet/src/index.ts b/packages/apps/dev-wallet/src/index.ts
@@ -7,12 +7,17 @@ const removeBootTheme = () => {
   document.body.classList.remove(`boot-theme-${getTheme()}`);
 };
 
+const loadingContent = document.getElementById('loading-content');
+
 // the entry file for the dev wallet app
 // TODO: we need to do setup app here like service worker, etc
 async function bootstrap() {
   registerServiceWorker();
   addBootTheme();
   import('./App/main').then(async ({ renderApp }) => {
+    if (loadingContent) {
+      loadingContent.innerHTML = '';
+    }
     renderApp();
     globalThis.addEventListener('wallet-loaded', function () {
       document.getElementById('welcome-message')?.remove();
@@ -29,6 +34,9 @@ async function bootstrap() {
 }
 
 function registerServiceWorker() {
+  if (loadingContent) {
+    loadingContent.innerHTML = 'Loading Service Worker...';
+  }
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker
       .register('/sw.js')
@@ -37,6 +45,9 @@ function registerServiceWorker() {
           'Service Worker registered with scope:',
           registration.scope,
         );
+        if (loadingContent) {
+          loadingContent.innerHTML = 'Service Worker registered!';
+        }
         registration.onupdatefound = () => {
           const newWorker = registration.installing;
           if (!newWorker) return;
@@ -49,6 +60,10 @@ function registerServiceWorker() {
         };
       })
       .catch((error) => {
+        if (loadingContent) {
+          loadingContent.innerHTML =
+            '<div>Service Worker registration failed!</div><div>using fallback mode</div><div>Loading UI...</div>';
+        }
         console.error('Service Worker registration failed:', error);
       });
   }

diff --git a/packages/apps/dev-wallet/src/modules/db/db.provider.tsx b/packages/apps/dev-wallet/src/modules/db/db.provider.tsx
@@ -1,13 +1,22 @@
+import { LoadingContent } from '@/Components/LoadingContent/LoadingContent';
 import { sleep } from '@/utils/helpers';
+import { Stack, Text } from '@kadena/kode-ui';
 import { FC, ReactNode, useEffect, useState } from 'react';
 import { addDefaultFungibles } from '../account/account.repository';
 import { addDefaultNetworks } from '../network/network.repository';
 import { closeDatabaseConnections, setupDatabase } from './db.service';
 
 const renderDefaultError = ({ message }: Error) => (
-  <div>
-    DataBase Error happens; <br /> {message}
-  </div>
+  <Stack
+    textAlign="left"
+    justifyContent={'flex-start'}
+    alignItems={'flex-start'}
+  >
+    <Stack flexDirection={'column'} gap={'xxs'}>
+      <Text color="emphasize">DataBase Error!</Text>
+      <Text>{message}</Text>
+    </Stack>
+  </Stack>
 );
 
 export const DatabaseProvider: FC<{
@@ -16,7 +25,7 @@ export const DatabaseProvider: FC<{
   renderError?: (error: Error) => ReactNode;
 }> = ({
   children,
-  fallback = 'initializing database',
+  fallback = <Text>initializing database ...</Text>,
   renderError = renderDefaultError,
 }) => {
   const [initialized, setInitialized] = useState(false);
@@ -61,8 +70,8 @@ export const DatabaseProvider: FC<{
   }, []);
 
   if (errorObject) {
-    return renderError(errorObject);
+    return <LoadingContent> {renderError(errorObject)}</LoadingContent>;
   }
 
-  return initialized ? children : fallback;
+  return initialized ? children : <LoadingContent>{fallback}</LoadingContent>;
 };