begin sidebar work

chrome-extension/manifest.js

@@ -2,7 +2,6 @@ import fs from 'node:fs';
 import deepmerge from 'deepmerge';
 
 const packageJson = JSON.parse(fs.readFileSync('../package.json', 'utf8'));
-
 const isFirefox = process.env.__FIREFOX__ === 'true';
 
 const sidePanelConfig = {
@@ -20,22 +19,18 @@ const manifest = deepmerge(
   {
     manifest_version: 3,
     default_locale: 'en',
-    /**
-     * if you want to support multiple languages, you can use the following reference
-     * https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization
-     */
     name: '__MSG_extensionName__',
     version: packageJson.version,
     description: '__MSG_extensionDescription__',
     host_permissions: ['<all_urls>'],
-    permissions: ['storage', 'scripting', 'tabs', 'notifications'],
+    permissions: ['storage', 'scripting', 'tabs', 'notifications', 'commands'],
     options_page: 'options/index.html',
     background: {
       service_worker: 'background.iife.js',
       type: 'module',
     },
     action: {
-      default_popup: 'popup/index.html',
+      default_popup: '', // Removed popup by default to control it dynamically
       default_icon: 'icon-34.png',
     },
     icons: {
@@ -52,7 +47,7 @@ const manifest = deepmerge(
       },
       {
         matches: ['http://*/*', 'https://*/*', '<all_urls>'],
-        css: ['content.css'], // public folder
+        css: ['content.css'],
       },
     ],
     devtools_page: 'devtools/index.html',

chrome-extension/src/background/index.ts

@@ -5,6 +5,7 @@ import { handleWalletRequest } from './methods';
 import { listenForApproval } from './approvals';
 import { JsonRpcProvider } from 'ethers';
 import { Chain } from '@coinmasters/types';
+import { exampleSidebarStorage } from '@extension/storage'; // Re-import the storage
 
 const TAG = ' | background/index.js | ';
 console.log('Background script loaded');
@@ -191,3 +192,31 @@ chrome.runtime.onMessage.addListener((message: any, sender: any, sendResponse: a
 
   return false;
 });
+
+// Example usage of exampleSidebarStorage to get the user's preference
+exampleSidebarStorage
+  .get()
+  .then(openSidebar => {
+    console.log('openSidebar:', openSidebar);
+    // Update the click handler for the extension icon
+    chrome.action.onClicked.addListener((tab: any) => {
+      // Check the user's preference for opening the side panel or popup
+      if (openSidebar === true) {
+        // If true, open the side panel
+        chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+          chrome.sidePanel.open({ tabId: tab.id }, () => {
+            if (chrome.runtime.lastError) {
+              console.error('Error opening side panel:', chrome.runtime.lastError);
+            }
+          });
+        });
+      } else {
+        // Otherwise, fallback to popup
+        chrome.action.setPopup({ popup: 'popup/index.html' });
+        chrome.action.openPopup();
+      }
+    });
+  })
+  .catch(error => {
+    console.error('Error fetching sidebar storage:', error);
+  });

packages/storage/lib/exampleThemeStorage.ts

@@ -1,21 +1,44 @@
 import { BaseStorage, createStorage, StorageType } from './base';
 
 type Theme = 'light' | 'dark';
+type SidebarPreference = boolean;
 
 type ThemeStorage = BaseStorage<Theme> & {
-  toggle: () => Promise<void>;
+  toggleTheme: () => Promise<void>;
 };
 
-const storage = createStorage<Theme>('theme-storage-key', 'dark', {
+type SidebarStorage = BaseStorage<SidebarPreference> & {
+  toggleSidebar: () => Promise<void>;
+};
+
+// Storage for theme preference
+const themeStorage = createStorage<Theme>('theme-storage-key', 'dark', {
+  storageType: StorageType.Local,
+  liveUpdate: true,
+});
+
+// Storage for sidebar preference
+const sidebarStorage = createStorage<SidebarPreference>('sidebar-storage-key', true, {
   storageType: StorageType.Local,
   liveUpdate: true,
 });
 
+// Example theme storage with a toggle function
 export const exampleThemeStorage: ThemeStorage = {
-  ...storage,
-  toggle: async () => {
-    await storage.set(currentTheme => {
-      return currentTheme === 'dark' ? 'dark' : 'dark';
+  ...themeStorage,
+  toggleTheme: async () => {
+    await themeStorage.set(currentTheme => {
+      return currentTheme === 'dark' ? 'light' : 'dark';
+    });
+  },
+};
+
+// Example sidebar storage with a toggle function
+export const exampleSidebarStorage: SidebarStorage = {
+  ...sidebarStorage,
+  toggleSidebar: async () => {
+    await sidebarStorage.set(currentSidebar => {
+      return currentSidebar === true ? false : true;
     });
   },
 };

packages/storage/lib/index.ts

@@ -8,6 +8,7 @@ import {
   assetContextStorage,
 } from './customStorage';
 import { chainIdStorage } from './providerStorage';
+import { exampleThemeStorage, exampleSidebarStorage } from './exampleThemeStorage';
 
 export {
   chainIdStorage,
@@ -20,5 +21,8 @@ export {
   StorageType,
   SessionAccessLevel,
   assetContextStorage,
+  exampleThemeStorage,
+  exampleSidebarStorage,
 };
+
 export type { BaseStorage };

pages/options/src/Options.tsx

@@ -1,8 +1,43 @@
 import '@src/Options.css';
+import { useEffect, useState } from 'react';
 import { withErrorBoundary, withSuspense } from '@extension/shared';
+import { exampleSidebarStorage } from '@extension/storage'; // Re-import the storage
 
 const Options = () => {
-  return <div>Options page</div>;
+  const [openSidebar, setOpenSidebar] = useState<boolean>(true);
+
+  // Fetch the stored preference on component mount
+  useEffect(() => {
+    const fetchSidebarPreference = async () => {
+      const storedValue = await exampleSidebarStorage.get();
+      if (typeof storedValue !== 'undefined') {
+        setOpenSidebar(storedValue);
+      } else {
+        // Set default value to true if no preference is found
+        await exampleSidebarStorage.set(true);
+        setOpenSidebar(true);
+      }
+    };
+    fetchSidebarPreference();
+  }, []);
+
+  // Handle toggle change
+  const handleToggle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.checked;
+    setOpenSidebar(value);
+    await exampleSidebarStorage.set(value);
+  };
+
+  return (
+    <div className="options-container">
+      <h1>Extension Options</h1>
+      <label>
+        <input type="checkbox" checked={openSidebar} onChange={handleToggle} />
+        Open Sidebar instead of Popup
+      </label>
+    </div>
+  );
 };
 
-export default withErrorBoundary(withSuspense(Options, <div> Loading ... </div>), <div> Error Occur </div>);
+// Wrapping the component with error boundary and suspense
+export default withErrorBoundary(withSuspense(Options, <div>Loading...</div>), <div>Error Occurred</div>);