feat(dw): experimental features

Author: javadkh2

packages/apps/dev-wallet/src/App/Layout/SideBar.tsx

@@ -1,9 +1,9 @@
 import {
-  MonoApps,
   MonoCheck,
   MonoContacts,
   MonoContrast,
   MonoDarkMode,
+  MonoExtension,
   MonoKey,
   MonoLightMode,
   MonoLogout,
@@ -117,12 +117,14 @@ export const SideBar: FC = () => {
             component={Link}
             href="/contacts"
           />
-          <SideBarItem
-            visual={<MonoApps />}
-            label="Plugins"
-            component={Link}
-            href="/plugins"
-          />
+          {profile?.showExperimentalFeatures && (
+            <SideBarItem
+              visual={<MonoExtension />}
+              label="Plugins"
+              component={Link}
+              href="/plugins"
+            />
+          )}
         </>
       }
       context={

packages/apps/dev-wallet/src/App/routes.tsx

@@ -22,7 +22,6 @@ import { Keyset } from '@/pages/keyset/keyset';
 import { Networks } from '@/pages/networks/networks';
 import { Plugins } from '@/pages/plugins/plugins';
 import { Ready } from '@/pages/ready/ready';
-import { AutoBackup } from '@/pages/settings/auto-backup/auto-backup';
 import { ChangePassword } from '@/pages/settings/change-password/change-password';
 import { ExportData } from '@/pages/settings/export-data/export-data';
 import { ImportData } from '@/pages/settings/import-data/import-data';
@@ -81,7 +80,7 @@ const RouteContext: FC = () => {
 };
 
 export const Routes: FC = () => {
-  const { isUnlocked } = useWallet();
+  const { isUnlocked, profile } = useWallet();
   const isLocked = !isUnlocked;
   const { origin, setOrigin } = useGlobalState();
 
@@ -127,10 +126,18 @@ export const Routes: FC = () => {
             <Route path="/transfer" element={<TransferV2 />} />
             <Route path="/contacts" element={<Contacts />} />
             <Route path="/settings" element={<Settings />} />
-            <Route path="/settings/auto-backup" element={<AutoBackup />} />
             <Route path="/settings/export-data" element={<ExportData />} />
             <Route path="/settings/import-data" element={<ImportData />} />
-            <Route path="/plugins" element={<Plugins />} />
+            <Route
+              element={
+                <Redirect
+                  if={!profile || !profile.showExperimentalFeatures}
+                  to="/"
+                />
+              }
+            >
+              <Route path="/plugins" element={<Plugins />} />
+            </Route>
             <Route
               path="/account-discovery/:keySourceId"
               element={<AccountDiscovery />}

packages/apps/dev-wallet/src/modules/wallet/wallet.repository.ts

@@ -26,6 +26,7 @@ export interface IProfile {
   securityPhraseId: string;
   accentColor: string;
   selectedNetworkUUID?: UUID;
+  showExperimentalFeatures?: boolean;
   options: {
     rememberPassword: 'never' | 'session' | 'short-time';
   } & (

packages/apps/dev-wallet/src/pages/settings/auto-backup/auto-backup.tsx

@@ -1,25 +1,20 @@
 import { backupDatabase } from '@/modules/backup/backup.service';
 import { useSubscribe } from '@/modules/db/useSubscribe';
 import { IBackup, walletRepository } from '@/modules/wallet/wallet.repository';
-import { Button, Heading, Notification, Stack, Text } from '@kadena/kode-ui';
+import { successClass } from '@/pages/transaction/components/style.css';
+import {
+  MonoSettingsBackupRestore,
+  MonoToggleOff,
+  MonoToggleOn,
+} from '@kadena/kode-icons/system';
+import { Button } from '@kadena/kode-ui';
 import {
   getDirectoryHandle,
   isFileSystemAccessSupported,
 } from '../../../modules/backup/fileApi';
 
 export function AutoBackup() {
   const backupOptions = useSubscribe<IBackup>('backup', 'backup-id');
-  if (!isFileSystemAccessSupported()) {
-    return (
-      <Stack gap="lg" flexDirection={'column'}>
-        <Heading variant="h4">Auto Backup</Heading>
-        <Text>
-          Your browser does not support the File System Access API. This feature
-          is not available. You can use the manual backup feature instead.
-        </Text>
-      </Stack>
-    );
-  }
 
   async function enableAutoBackup() {
     const handle = await getDirectoryHandle();
@@ -37,29 +32,23 @@ export function AutoBackup() {
     });
   }
 
+  const isEnabled = backupOptions && backupOptions.directoryHandle;
+
   return (
-    <Stack gap="lg" flexDirection={'column'}>
-      <Heading variant="h4">Auto Backup</Heading>
-      {backupOptions?.directoryHandle && (
-        <Notification intent="positive" role="status">
-          Enabled
-        </Notification>
-      )}
-      <Text>
-        This feature allows you to automatically backup your wallet data to your
-        computer. You can enable or disable this feature at any time.
-      </Text>
-      <Stack>
-        {backupOptions && backupOptions.directoryHandle ? (
-          <Button variant="warning" onClick={disableAutoBackup}>
-            Disable Auto Backup
-          </Button>
+    <Button
+      variant="outlined"
+      isDisabled={!isFileSystemAccessSupported()}
+      onClick={isEnabled ? disableAutoBackup : enableAutoBackup}
+      startVisual={<MonoSettingsBackupRestore />}
+      endVisual={
+        isEnabled ? (
+          <MonoToggleOn className={successClass} fontSize={40} />
         ) : (
-          <Button variant="primary" onClick={enableAutoBackup}>
-            Enable Auto Backup
-          </Button>
-        )}
-      </Stack>
-    </Stack>
+          <MonoToggleOff fontSize={40} />
+        )
+      }
+    >
+      Automatic Backup
+    </Button>
   );
 }

packages/apps/dev-wallet/src/pages/settings/settings.tsx

@@ -3,6 +3,7 @@ import { usePrompt } from '@/Components/PromptProvider/Prompt';
 import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { dbService } from '@/modules/db/db.service';
 import { useWallet } from '@/modules/wallet/wallet.hook';
+import { walletRepository } from '@/modules/wallet/wallet.repository';
 import { deleteProfile } from '@/modules/wallet/wallet.service';
 import { getErrorMessage } from '@/utils/getErrorMessage';
 import {
@@ -13,9 +14,11 @@ import {
   MonoPassword,
   MonoPerson,
   MonoRemoveRedEye,
+  MonoRocketLaunch,
   MonoSelectAll,
   MonoSettings,
-  MonoSettingsBackupRestore,
+  MonoToggleOff,
+  MonoToggleOn,
 } from '@kadena/kode-icons/system';
 import {
   Button,
@@ -28,8 +31,12 @@ import {
 import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { isFileSystemAccessSupported } from '../../modules/backup/fileApi';
 import { linkClass } from '../home/style.css';
+import {
+  failureClass,
+  successClass,
+} from '../transaction/components/style.css';
+import { AutoBackup } from './auto-backup/auto-backup';
 import { ProfileNameColorForm } from './components/ProfileNameColorForm';
 import { downloadAsFile } from './utils/download-file';
 
@@ -100,15 +107,6 @@ export function Settings() {
       >
         Download Entire Database
       </Button>
-      <UiLink
-        href="/settings/auto-backup"
-        component={Link}
-        variant="outlined"
-        startVisual={<MonoSettingsBackupRestore />}
-        isDisabled={!isFileSystemAccessSupported()}
-      >
-        Set automatic backup
-      </UiLink>
       <UiLink
         href={`/account-discovery/${keySources[0].uuid}`}
         component={Link}
@@ -118,9 +116,30 @@ export function Settings() {
       >
         Start Account Discovery
       </UiLink>
+      <AutoBackup />
+      <Button
+        startVisual={<MonoRocketLaunch />}
+        endVisual={
+          profile?.showExperimentalFeatures ? (
+            <MonoToggleOn className={successClass} fontSize={40} />
+          ) : (
+            <MonoToggleOff fontSize={40} />
+          )
+        }
+        variant="outlined"
+        onClick={() => {
+          if (profile?.uuid) {
+            walletRepository.patchProfile(profile.uuid, {
+              showExperimentalFeatures: !profile.showExperimentalFeatures,
+            });
+          }
+        }}
+      >
+        Experimental Features
+      </Button>
       <Button
-        variant="negative"
-        startVisual={<MonoDangerous />}
+        variant="outlined"
+        startVisual={<MonoDangerous className={failureClass} />}
         onClick={async () => {
           if (!profile) return;
           const answer = await prompt((resolve, reject) => (