wanderwallet · Danziger · Dec 10, 2024 · Oct 15, 2024 · Oct 16, 2024 · Oct 16, 2024
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn fmt
-git add -A
+git add -A
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ArConnect Embedded Wallet</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="/assets/popup.css" />
+  </head>
+  <body>
+    <div id="cover"></div>
+    <div id="root"></div>
+    <!-- <script type="text/javascript" src="/assets/popup.js"></script> -->
+    <script type="module" src="/src/iframe/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -77,7 +77,6 @@
     "js-confetti": "^0.11.0",
     "mitt": "^3.0.0",
     "nanoid": "^4.0.0",
-    "path-to-regexp": "^6.2.1",
     "plimit-lit": "^3.0.1",
     "pretty-bytes": "^6.0.0",
     "qrcode.react": "^3.1.0",
@@ -93,7 +92,7 @@
     "uuid": "^9.0.0",
     "warp-contracts": "^1.2.13",
     "webextension-polyfill": "^0.10.0",
-    "wouter": "^2.8.0-alpha.2"
+    "wouter": "^3.3.5"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",

diff --git a/src/api/background/background-setup.ts b/src/api/background/background-setup.ts
@@ -26,8 +26,14 @@ import {
   handleTabClosed,
   handleTabUpdate
 } from "~api/background/handlers/browser/tabs/tabs.handler";
+import { log, LOG_GROUP } from "~utils/log/log.utils";
 
 export function setupBackgroundService() {
+  log(
+    LOG_GROUP.SETUP,
+    `background-setup.ts > setupBackgroundService(PLASMO_PUBLIC_APP_TYPE = "${process.env.PLASMO_PUBLIC_APP_TYPE}")`
+  );
+
   // MESSAGES:
   // Watch for API call and chunk messages:
   onMessage("api_call", handleApiCallMessage);
@@ -36,12 +42,9 @@ export function setupBackgroundService() {
   // LIFECYCLE:
 
   // Open welcome page on extension install.
-  // TODO: This needs to be adapted to work with the embedded wallet (it cannot just be removed / skipped):
   browser.runtime.onInstalled.addListener(handleInstall);
 
   // ALARMS:
-  // TODO: Mock/polyfill alarms to work with setTimeout/clearTimeout and also a lazy version that just checks the last update time on start.
-
   browser.alarms.onAlarm.addListener(handleNotificationsAlarm);
   browser.alarms.onAlarm.addListener(handleSubscriptionsAlarm);
   browser.alarms.onAlarm.addListener(handleTrackBalanceAlarm);
@@ -74,19 +77,24 @@ export function setupBackgroundService() {
   });
 
   // listen for app config updates
+  // `ExtensionStorage.watch` requires a callbackMap param, so this cannot be done using `ExtensionStorage` directly.
   browser.storage.onChanged.addListener(handleAppConfigChange);
 
-  // ONLY EXTENSION:
+  if (process.env.PLASMO_PUBLIC_APP_TYPE !== "extension") return;
+
+  // ONLY BROWSER EXTENSION BELOW THIS LINE:
 
   // When the last window connected to the extension is closed, the decryption key will be removed from memory. This is no needed in the embedded wallet because
   // each wallet instance will be removed automatically when its tab/window is closed.
   browser.windows.onRemoved.addListener(handleWindowClose);
 
   // handle tab change (icon, context menus)
-  browser.tabs.onUpdated.addListener((tabId, changeInfo) =>
-    handleTabUpdate(tabId, changeInfo)
-  );
-  browser.tabs.onActivated.addListener(({ tabId }) => handleTabUpdate(tabId));
+  browser.tabs.onUpdated.addListener((tabId, changeInfo) => {
+    handleTabUpdate(tabId, changeInfo);
+  });
+  browser.tabs.onActivated.addListener(({ tabId }) => {
+    handleTabUpdate(tabId);
+  });
   browser.tabs.onRemoved.addListener(handleTabClosed);
 
   // handle ar:// protocol

diff --git a/src/api/background/handlers/storage/app-config-change/app-config-change.handler.ts b/src/api/background/handlers/storage/app-config-change/app-config-change.handler.ts
@@ -48,7 +48,7 @@ export async function handleAppConfigChange(
       storedNewValue as unknown as string
     ) as InitAppParams;
 
-    // check if permission event emiting is needed
+    // check if permission event emitting is needed
     // get missing permissions
     const missingPermissions = getMissingPermissions(
       oldValue?.permissions || [],

diff --git a/src/components/dashboard/About.tsx b/src/components/dashboard/About.tsx
@@ -4,7 +4,7 @@ import logo from "url:/assets/icon512.png";
 import styled from "styled-components";
 import { getPreReleaseVersionLabel, getVersionLabel } from "~utils/runtime";
 
-export default function About() {
+export function AboutDashboardView() {
   const preReleaseVersionLabel = getPreReleaseVersionLabel();
 
   return (

diff --git a/src/components/dashboard/Applications.tsx b/src/components/dashboard/Applications.tsx
@@ -3,14 +3,27 @@ import { useEffect, useMemo, useState } from "react";
 import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
 import { SettingsList } from "./list/BaseElement";
-import { useLocation, useRoute } from "wouter";
+import { useRoute } from "wouter";
 import Application from "~applications/application";
 import AppListItem from "./list/AppListItem";
 import browser from "webextension-polyfill";
 import SearchInput from "./SearchInput";
 import styled from "styled-components";
+import { useLocation } from "~wallets/router/router.utils";
+import type { CommonRouteProps } from "~wallets/router/router.types";
+
+export interface ApplicationsDashboardViewParams {
+  app?: string;
+}
+
+export type ApplicationsDashboardViewProps =
+  CommonRouteProps<ApplicationsDashboardViewParams>;
+
+export function ApplicationsDashboardView() {
+  const { navigate } = useLocation();
+  // TODO: Replace with useParams:
+  const [, params] = useRoute<{ app?: string }>("/apps/:app?");
 
-export default function Applications() {
   // connected apps
   const [connectedApps] = useStorage<string[]>(
     {
@@ -43,10 +56,6 @@ export default function Applications() {
     })();
   }, [connectedApps]);
 
-  // router
-  const [, params] = useRoute<{ app?: string }>("/apps/:app?");
-  const [, setLocation] = useLocation();
-
   // active subsetting val
   const activeApp = useMemo(
     () => (params?.app ? decodeURIComponent(params.app) : undefined),
@@ -60,7 +69,7 @@ export default function Applications() {
       return;
     }
 
-    setLocation("/apps/" + firstApp);
+    navigate(`/apps/${firstApp}`);
   }, [connectedApps]);
 
   // search
@@ -96,7 +105,7 @@ export default function Applications() {
             url={app.url}
             icon={app.icon}
             active={activeApp === app.url}
-            onClick={() => setLocation("/apps/" + encodeURIComponent(app.url))}
+            onClick={() => navigate(`/apps/${encodeURIComponent(app.url)}`)}
             key={i}
           />
         ))}

diff --git a/src/components/dashboard/Contacts.tsx b/src/components/dashboard/Contacts.tsx
@@ -4,7 +4,7 @@ import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
 import { SettingsList } from "./list/BaseElement";
 import ContactListItem from "./list/ContactListItem";
-import { useLocation, useRoute } from "wouter";
+import { useRoute } from "wouter";
 import browser from "webextension-polyfill";
 import SearchInput from "./SearchInput";
 import styled from "styled-components";
@@ -13,12 +13,27 @@ import { multiSort } from "~utils/multi_sort";
 import { enrichContact } from "~contacts/hooks";
 import { EventType, trackEvent } from "~utils/analytics";
 import type { Contacts } from "~components/Recipient";
+import { useLocation } from "~wallets/router/router.utils";
+import type { CommonRouteProps } from "~wallets/router/router.types";
 
-interface ContactsProps {
+export interface ContactsDashboardViewParams {
+  contact?: string;
+}
+
+export interface ContactsDashboardViewProps
+  extends CommonRouteProps<ContactsDashboardViewParams> {
   isQuickSetting?: boolean;
 }
 
-export default function Contacts({ isQuickSetting }: ContactsProps) {
+export function ContactsDashboardView({
+  isQuickSetting
+}: ContactsDashboardViewProps) {
+  const { navigate } = useLocation();
+  // TODO: Replace with useParams:
+  const [matches, params] = useRoute<{ contact?: string }>(
+    "/contacts/:contact?"
+  );
+
   // contacts
   const [storedContacts, setStoredContacts] = useStorage(
     {
@@ -91,12 +106,6 @@ export default function Contacts({ isQuickSetting }: ContactsProps) {
     [contacts]
   );
 
-  // router
-  const [matches, params] = useRoute<{ contact?: string }>(
-    "/contacts/:contact?"
-  );
-  const [, setLocation] = useLocation();
-
   // active subsetting
   const activeContact = useMemo(
     () => (params?.contact ? decodeURIComponent(params.contact) : undefined),
@@ -105,7 +114,7 @@ export default function Contacts({ isQuickSetting }: ContactsProps) {
 
   // Update the URL when a contact is clicked
   const handleContactClick = (contactAddress: string) => {
-    setLocation(
+    navigate(
       `/${isQuickSetting ? "quick-settings/" : ""}contacts/${encodeURIComponent(
         contactAddress
       )}`
@@ -130,7 +139,7 @@ export default function Contacts({ isQuickSetting }: ContactsProps) {
 
   const addContact = () => {
     trackEvent(EventType.ADD_CONTACT, { fromContactSettings: true });
-    setLocation(`/${isQuickSetting ? "quick-settings/" : ""}contacts/new`);
+    navigate(`/${isQuickSetting ? "quick-settings/" : ""}contacts/new`);
   };
 
   return (

diff --git a/src/components/dashboard/NotificationSettings.tsx b/src/components/dashboard/NotificationSettings.tsx
@@ -2,11 +2,11 @@ import { useStorage } from "@plasmohq/storage/hook";
 import styled from "styled-components";
 import PermissionCheckbox from "~components/auth/PermissionCheckbox";
 import { ExtensionStorage } from "~utils/storage";
-import { Input, Spacer, Text } from "@arconnect/components";
+import { Spacer, Text } from "@arconnect/components";
 import browser from "webextension-polyfill";
 import { Radio, RadioInner, RadioItem, RadioWrapper } from "./Setting";
 
-export default function NotificationSettings() {
+export function NotificationSettingsDashboardView() {
   const [notificationSettings, setNotificationSettings] = useStorage(
     {
       key: "setting_notifications",

diff --git a/src/components/dashboard/Reset.tsx b/src/components/dashboard/Reset.tsx
@@ -13,7 +13,7 @@ import browser from "webextension-polyfill";
 import styled from "styled-components";
 import { useTheme } from "~utils/theme";
 
-export default function Reset() {
+export function ResetDashboardView() {
   // reset modal
   const resetModal = useModal();
 

diff --git a/src/components/dashboard/Setting.tsx b/src/components/dashboard/Setting.tsx
@@ -11,7 +11,11 @@ import { createCoinWithAnimation } from "~api/modules/sign/animation";
 import { arconfettiIcon } from "~api/modules/sign/utils";
 import { EventType, trackEvent } from "~utils/analytics";
 
-export default function Setting({ setting }: Props) {
+export interface SettingDashboardViewProps {
+  setting: SettingType;
+}
+
+export function SettingDashboardView({ setting }: SettingDashboardViewProps) {
   // setting state
   const [settingState, updateSetting] = useSetting(setting.name);
 
@@ -132,14 +136,11 @@ export default function Setting({ setting }: Props) {
       );
 
     default:
+      // TODO: Should this be a redirect?
       return <></>;
   }
 }
 
-interface Props {
-  setting: SettingType;
-}
-
 export const RadioWrapper = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/src/components/dashboard/SignSettings.tsx b/src/components/dashboard/SignSettings.tsx
@@ -7,7 +7,7 @@ import { ExtensionStorage } from "~utils/storage";
 import { useStorage } from "@plasmohq/storage/hook";
 import { EventType, trackEvent } from "~utils/analytics";
 
-export default function SignSettings() {
+export function SignSettingsDashboardView() {
   const [signSettingsState, setSignSettingsState] = useState(false);
 
   const [signatureAllowance, setSignatureAllowance] = useStorage({

diff --git a/src/components/dashboard/Tokens.tsx b/src/components/dashboard/Tokens.tsx
@@ -1,6 +1,6 @@
 import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
-import { useLocation, useRoute } from "wouter";
+import { useRoute } from "wouter";
 import { useEffect, useMemo, useState } from "react";
 import type { Token, TokenType } from "~tokens/token";
 import { Reorder } from "framer-motion";
@@ -10,8 +10,13 @@ import PermissionCheckbox from "~components/auth/PermissionCheckbox";
 import browser from "webextension-polyfill";
 import { ButtonV2, Label, Spacer, Text } from "@arconnect/components";
 import { type TokenInfoWithBalance } from "~tokens/aoTokens/ao";
+import { useLocation } from "~wallets/router/router.utils";
+
+export function TokensDashboardView() {
+  const { navigate } = useLocation();
+  // TODO: Replace with useParams:
+  const [matches, params] = useRoute<{ id?: string }>("/tokens/:id?");
 
-export default function Tokens() {
   // tokens
   const [tokens, setTokens] = useStorage<Token[]>(
     {
@@ -56,10 +61,6 @@ export default function Tokens() {
     await ExtensionStorage.set("setting_ao_support", newSetting);
   };
 
-  // router
-  const [matches, params] = useRoute<{ id?: string }>("/tokens/:id?");
-  const [, setLocation] = useLocation();
-
   // active subsetting val
   const activeTokenSetting = useMemo(
     () => (params?.id ? params.id : undefined),
@@ -84,12 +85,12 @@ export default function Tokens() {
     }
 
     if (allTokens.length > 0) {
-      setLocation("/tokens/" + allTokens[0].id);
+      navigate(`/tokens/${allTokens[0].id}`);
     }
   }, [tokens, enhancedAoTokens, activeTokenSetting, matches]);
 
   const addToken = () => {
-    setLocation("/tokens/new");
+    navigate("/tokens/new");
   };
 
   const handleTokenClick = (token: {
@@ -100,7 +101,7 @@ export default function Tokens() {
     type?: TokenType;
     name?: string;
   }) => {
-    setLocation(`/tokens/${token.id}`);
+    navigate(`/tokens/${token.id}`);
   };
 
   return (