feat: create layouts with design and basic setup (#2085)

* feat: basic app setup and create layouts with design * feat: move global styling to globals * feat: use react-router links in header * fix: move routes to correct layout
kadena-community · May 15, 2024 · f68ba2b · f68ba2b
1 parent 8e2a297
commit f68ba2b
Show file tree

Hide file tree

Showing 21 changed files with 166 additions and 71 deletions.
diff --git a/packages/apps/dev-wallet/index.html b/packages/apps/dev-wallet/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/logo.png" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Kadena Dev Wallet</title>
   </head>

diff --git a/packages/apps/dev-wallet/public/favicon.png b/packages/apps/dev-wallet/public/favicon.png
diff --git a/packages/apps/dev-wallet/src/App/app.tsx b/packages/apps/dev-wallet/src/App/app.tsx
@@ -1,17 +1,18 @@
-import { DatabaseProvider } from '@/modules/db/db.provider';
+import { darkThemeClass } from '@kadena/react-ui/styles';
 import { ThemeProvider } from 'next-themes';
-import { WalletProvider } from '../modules/wallet/wallet.provider';
+import { WalletProvider } from '@/modules/wallet/wallet.provider';
+import { DatabaseProvider } from '@/modules/db/db.provider';
 import { Routes } from './routes';
 
 function Providers({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider
       attribute="class"
-      enableSystem={true}
-      defaultTheme="light"
       value={{
         light: 'light',
+        dark: darkThemeClass,
       }}
+      defaultTheme="dark"
     >
       <DatabaseProvider>
         <WalletProvider>{children}</WalletProvider>

diff --git a/packages/apps/dev-wallet/src/App/layout-mini.css.ts b/packages/apps/dev-wallet/src/App/layout-mini.css.ts
@@ -0,0 +1,27 @@
+import { atoms, vars } from '@kadena/react-ui/styles';
+import { style } from '@vanilla-extract/css';
+
+const minHeaderHeight = '90px';
+
+export const headerStyle = style({
+  borderBottom: `1px solid ${vars.colors.$layoutSurfaceCard}`,
+  minHeight: minHeaderHeight,
+});
+
+export const mainStyle = style([
+  atoms({
+    width: '100%',
+  }),
+  {
+    minHeight: `calc(100vh - ${minHeaderHeight})`,  
+    background: 'transparent', // fallback in case radial-gradient is not working
+    backgroundImage: 'radial-gradient(circle farthest-side at 50% 170%, #42CEA0, transparent 75%)',
+    backgroundRepeat: 'no-repeat',
+  },
+]);
+
+export const containerStyle = style({
+  maxWidth: '500px',
+  margin: '0 auto',
+  textAlign: 'center',
+});
diff --git a/packages/apps/dev-wallet/src/App/layout-mini.tsx b/packages/apps/dev-wallet/src/App/layout-mini.tsx
@@ -0,0 +1,35 @@
+import {
+  KadenaLogo,
+  Stack,
+  Text,
+} from '@kadena/react-ui';
+import { FC } from 'react';
+import { Link, Outlet } from 'react-router-dom';
+import { headerStyle, mainStyle, containerStyle } from './layout-mini.css';
+
+export const LayoutMini: FC = () => {
+  return (
+    <>
+      <Stack
+        as="header"
+        alignItems="center"
+        flexDirection="row"
+        gap="md"
+        justifyContent="space-between"
+        padding="lg"
+        className={headerStyle}
+      >
+        <Link to="/">
+          <KadenaLogo height={40} />
+        </Link>
+        <Text>Go to <Link to="https://www.kadena.io/" target="_blank">kadena.io</Link></Text>
+      </Stack>
+      <main className={mainStyle}>
+        <div className={containerStyle}>
+          <Outlet />
+        </div>
+      </main>
+      <div id="modalportal"></div>
+    </>
+  );
+};
diff --git a/packages/apps/dev-wallet/src/App/layout.tsx b/packages/apps/dev-wallet/src/App/layout.tsx
@@ -1,26 +1,37 @@
 import { useNetwork } from '@/modules/network/network.hook';
-import { MonoPublic } from '@kadena/react-icons';
+import { MonoPublic, MonoContrast } from '@kadena/react-icons';
 import {
   KadenaLogo,
   NavHeader,
   NavHeaderLinkList,
   NavHeaderSelect,
+  NavHeaderLink,
+  NavHeaderButton,
   SelectItem,
-  Text,
 } from '@kadena/react-ui';
+import { atoms } from '@kadena/react-ui/styles';
 import { FC } from 'react';
 import { Link, Outlet } from 'react-router-dom';
+import { useTheme } from 'next-themes';
 
 export const Layout: FC = () => {
   const { networks, activeNetwork, setActiveNetwork } = useNetwork();
 
+  const { systemTheme, theme, setTheme } = useTheme();
+
   const handleNetworkUpdate = (value: string) => {
     const network = networks.find((network) => network.networkId === value);
     if (network) {
       setActiveNetwork(network);
     }
   };
 
+  const currentTheme = theme === 'system' ? systemTheme : theme;
+  const toggleTheme = (): void => {
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+  };
+
   return (
     <>
       <NavHeader
@@ -31,14 +42,26 @@ export const Layout: FC = () => {
         }
       >
         <NavHeaderLinkList>
-          <Link to="/">
-            <Text bold>DX-Wallet</Text>
-          </Link>
-          <Link to="/networks">
-            <Text bold>Network</Text>
-          </Link>
+          <NavHeaderLink asChild>
+            <Link to="/">DX Wallet</Link>
+          </NavHeaderLink>
+          <NavHeaderLink asChild>
+            <Link to="/networks">Network</Link>
+          </NavHeaderLink>
         </NavHeaderLinkList>
 
+        <NavHeaderButton
+          aria-label="Toggle theme"
+          onPress={() => toggleTheme()}
+          className={atoms({ marginInlineEnd: 'sm' })}
+        >
+          <MonoContrast
+            className={atoms({
+              color: 'text.base.default',
+            })}
+          />
+        </NavHeaderButton>
+
         <NavHeaderSelect
           aria-label="Select Network"
           selectedKey={activeNetwork?.networkId}
@@ -52,7 +75,9 @@ export const Layout: FC = () => {
           ))}
         </NavHeaderSelect>
       </NavHeader>
-      <Outlet />
+      <main>
+        <Outlet />
+      </main>
       <div id="modalportal"></div>
     </>
   );

diff --git a/packages/apps/dev-wallet/src/App/routes.tsx b/packages/apps/dev-wallet/src/App/routes.tsx
@@ -23,6 +23,7 @@ import { SelectProfile } from '../pages/select-profile/select-profile';
 import { UnlockProfile } from '../pages/unlock-profile/unlock-profile';
 import { getScriptType } from '../utils/window';
 import { Layout } from './layout';
+import { LayoutMini } from './layout-mini';
 
 const ProtectedRoute: FC<
   PropsWithChildren<{
@@ -41,33 +42,36 @@ const ProtectedRoute: FC<
 export const Routes: FC = () => {
   const { isUnlocked } = useWallet();
   const routes = createRoutesFromElements(
-    <Route element={<Layout />}>
-      <Route path="/" element={<HomePage />} />
-      <Route path="/select-profile" element={<SelectProfile />} />
-      <Route path="/networks" element={<Networks />} />
-      <Route path="/networks/create" element={<CreateNetwork />} />
-      <Route path="/create-profile" element={<CreateProfile />} />
-      <Route path="/import-wallet" element={<ImportWallet />} />
-      <Route path="/unlock-profile/:profileId" element={<UnlockProfile />} />
-      <Route element={<ProtectedRoute isAllowed={isUnlocked} />}>
-        <Route
-          path="/backup-recovery-phrase/:keySourceId"
-          element={<BackupRecoveryPhrase />}
-        />
-        <Route
-          path="/backup-recovery-phrase/:keySourceId/write-down"
-          element={<WriteDownRecoveryPhrase />}
-        />
-        <Route
-          path="/account-discovery/:keySourceId"
-          element={<AccountDiscovery />}
-        />
-        ,
+    <>
+      <Route element={<LayoutMini />}>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/select-profile" element={<SelectProfile />} />
+        <Route path="/create-profile" element={<CreateProfile />} />
+        <Route path="/unlock-profile/:profileId" element={<UnlockProfile />} />
+        <Route path="/import-wallet" element={<ImportWallet />} />
+        <Route element={<ProtectedRoute isAllowed={isUnlocked} />}>
+          <Route
+            path="/backup-recovery-phrase/:keySourceId"
+            element={<BackupRecoveryPhrase />}
+          />
+          <Route
+            path="/backup-recovery-phrase/:keySourceId/write-down"
+            element={<WriteDownRecoveryPhrase />}
+          />
+          <Route
+            path="/account-discovery/:keySourceId"
+            element={<AccountDiscovery />}
+          />
+        </Route>
+        <Route path="*" element={<p>Not found!</p>} />
+      </Route>
+      <Route element={<Layout />}>
         <Route path="/accounts/:account" element={<p>Account</p>} />,
         <Route path="/sig-builder" element={<SignatureBuilder />} />,
-      </Route>
-      <Route path="*" element={<p>Not found!</p>} />
-    </Route>,
+        <Route path="/networks" element={<Networks />} />
+        <Route path="/networks/create" element={<CreateNetwork />} />
+      </Route>,
+    </>
   );
 
   const handler =

diff --git a/packages/apps/dev-wallet/src/globals.css.ts b/packages/apps/dev-wallet/src/globals.css.ts
@@ -0,0 +1,8 @@
+
+import '@kadena/react-ui/global';
+import { globalStyle } from '@vanilla-extract/css';
+import { tokens } from '@kadena/react-ui/styles';
+
+globalStyle('body', {
+  backgroundColor: tokens.kda.foundation.color.neutral.n1,
+});
diff --git a/packages/apps/dev-wallet/src/main.tsx b/packages/apps/dev-wallet/src/main.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './App/app';
+import './globals.css.ts';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

diff --git a/packages/apps/dev-wallet/src/pages/account-discovery/account-dsicovery.tsx b/packages/apps/dev-wallet/src/pages/account-discovery/account-dsicovery.tsx
@@ -46,7 +46,7 @@ export function AccountDiscovery() {
   }
 
   return (
-    <main>
+    <>
       <Box margin="md">
         <Heading variant="h5">Account Discovery</Heading>
 
@@ -105,6 +105,6 @@ export function AccountDiscovery() {
           </ul>
         )}
       </Box>
-    </main>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
@@ -24,7 +24,7 @@ export function BackupRecoveryPhrase() {
     }
   };
   return (
-    <main>
+    <>
       <Box margin="md">
         <Heading variant="h5">Backup the recovery phrase</Heading>
         <Text>
@@ -50,6 +50,6 @@ export function BackupRecoveryPhrase() {
         )}
         <Link to="/">Skip for now</Link>
       </Box>
-    </main>
+    </>
   );
 }
diff --git a/...s/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx b/...s/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx
@@ -24,7 +24,7 @@ export function ConfirmRecoveryPhrase({
   console.log(mnemonic);
   console.log(wallet);
   return (
-    <main>
+    <>
       <Box margin="md">
         <Heading variant="h5">Confirm you wrote it down</Heading>
         <form onSubmit={handleSubmit(confirm)}>
@@ -34,6 +34,6 @@ export function ConfirmRecoveryPhrase({
         </form>
         {error && <Text>{error}</Text>}
       </Box>
-    </main>
+    </>
   );
 }
diff --git a/...pps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx b/...pps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx
@@ -52,7 +52,7 @@ export function WriteDownRecoveryPhrase() {
     );
   }
   return (
-    <main>
+    <>
       <Box margin="md">
         <Heading variant="h5">Write your recovery phrase down</Heading>
         <Text>
@@ -80,6 +80,6 @@ export function WriteDownRecoveryPhrase() {
           Confirm
         </Button>
       </Box>
-    </main>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/create-profile/create-profile.tsx b/packages/apps/dev-wallet/src/pages/create-profile/create-profile.tsx
@@ -53,7 +53,7 @@ export function CreateProfile() {
     );
   }
   return (
-    <main>
+    <>
       <Box margin="md">
         <Heading variant="h5">Create wallet</Heading>
         <Text>Enter a password to encrypt the wallet data with that</Text>
@@ -69,6 +69,6 @@ export function CreateProfile() {
           <Button type="submit">Create</Button>
         </form>
       </Box>
-    </main>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/home/home-page.tsx b/packages/apps/dev-wallet/src/pages/home/home-page.tsx
@@ -32,21 +32,21 @@ export function HomePage() {
   };
   console.log('keySources', keySources);
   return (
-    <main>
+    <>
       <Box margin="md">
-        <Heading variant="h5">Home Page</Heading>
-        <Heading variant="h6">Available key sources</Heading>
+        <Heading as="h1">Welcome to Chainweaver 3.0</Heading>
+        <Heading as="h3">Available key sources</Heading>
         {keySources.map((ks) => (
           <Card>
-            <Heading variant="h6">{ks.source}</Heading>
+            <Heading as="h6">{ks.source}</Heading>
             <Button onPress={() => createAccount(ks)}>Add k account</Button>
             <br />
             <Link to={`/backup-recovery-phrase/${ks.uuid}`}>
               Back up recovery phrase
             </Link>
           </Card>
         ))}
-        <Heading variant="h6">Accounts</Heading>
+        <Heading as="h6">Accounts</Heading>
         {accounts.length ? (
           <ul>
             {' '}
@@ -63,6 +63,6 @@ export function HomePage() {
       <Box>
         <Link to="/sig-builder">Sig Builder</Link>
       </Box>
-    </main>
+    </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/home/style.css.ts b/packages/apps/dev-wallet/src/pages/home/style.css.ts
@@ -1,6 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const layout = style({
-  width: 800,
-  margin: '0 auto',
-});