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/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/LoadingPage.tsx → ...ents/page/common/loading/loading.view.tsx b/src/components/LoadingPage.tsx → ...ents/page/common/loading/loading.view.tsx
@@ -1,22 +1,22 @@
 import { Loading } from "@arconnect/components";
 import styled from "styled-components";
-import { Page } from "~components/popup/Route";
+import { withPage } from "~components/page/page.utils";
 
-export interface LoadingPageProps {
+export interface LoadingViewProps {
   label?: string;
 }
 
-export const LoadingPage = ({ label }: LoadingPageProps) => {
+export const LoadingView = ({ label }: LoadingViewProps) => {
   return (
-    <Page>
-      <DivWrapper>
-        <Loading style={{ width: "32px", height: "32px" }} />
-        <PLabel>{label || "Loading..."}</PLabel>
-      </DivWrapper>
-    </Page>
+    <DivWrapper>
+      <Loading style={{ width: "32px", height: "32px" }} />
+      <PLabel>{label || "Loading..."}</PLabel>
+    </DivWrapper>
   );
 };
 
+export const LoadingPage = withPage(LoadingView);
+
 const DivWrapper = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/src/components/page/page.component.tsx b/src/components/page/page.component.tsx
@@ -0,0 +1,33 @@
+import { type Variants, motion } from "framer-motion";
+import type { PropsWithChildren } from "react";
+import styled from "styled-components";
+
+export interface PageProps extends PropsWithChildren {}
+
+export function Page({ children }: PageProps) {
+  const opacityAnimation: Variants = {
+    initial: { opacity: 0 },
+    enter: { opacity: 1 },
+    exit: { opacity: 0, y: 0, transition: { duration: 0.2 } }
+  };
+
+  return (
+    <Main
+      initial="initial"
+      animate="enter"
+      exit="exit"
+      variants={opacityAnimation}
+      data-test-id="Page"
+    >
+      {children}
+    </Main>
+  );
+}
+
+const Main = styled(motion.main)`
+  position: relative;
+  top: 0;
+  width: 100%;
+  min-height: 100vh;
+  max-height: max-content;
+`;
diff --git a/src/components/page/page.utils.tsx b/src/components/page/page.utils.tsx
@@ -0,0 +1,15 @@
+import { Page } from "~components/page/page.component";
+
+export function withPage<P>(Component: React.ComponentType<P>) {
+  const PageComponent = (props: P) => {
+    return (
+      <Page>
+        <Component {...props} />
+      </Page>
+    );
+  };
+
+  PageComponent.displayName = `${Component.displayName || "Anonymous"}Page`;
+
+  return PageComponent;
+}
diff --git a/src/components/popup/Head.tsx b/src/components/popup/Head.tsx
@@ -15,7 +15,7 @@ import HardwareWalletIcon, {
   hwIconAnimateProps
 } from "~components/hardware/HardwareWalletIcon";
 import { useHardwareApi } from "~wallets/hooks";
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 import { useEffect, useMemo, useState } from "react";
 import keystoneLogo from "url:/assets/hardware/keystone.png";
 import WalletSwitcher from "./WalletSwitcher";

diff --git a/src/components/popup/HeadV2.tsx b/src/components/popup/HeadV2.tsx
@@ -15,7 +15,7 @@ import HardwareWalletIcon, {
   hwIconAnimateProps
 } from "~components/hardware/HardwareWalletIcon";
 import { useHardwareApi } from "~wallets/hooks";
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 import React, { useEffect, useMemo, useState } from "react";
 import keystoneLogo from "url:/assets/hardware/keystone.png";
 import WalletSwitcher from "./WalletSwitcher";

diff --git a/src/components/popup/HistoryProvider.tsx b/src/components/popup/HistoryProvider.tsx
@@ -5,7 +5,9 @@ import {
   type HistoryAction,
   HistoryContext,
   type PushAction
-} from "~utils/hash_router";
+} from "~wallets/router/hash/hash-router.hook";
+
+// TODO: Do we really need this instead of simply calling history.back()?
 
 export default function HistoryProvider({ children }: PropsWithChildren<{}>) {
   // current history action

diff --git a/src/components/popup/Navigation.tsx b/src/components/popup/Navigation.tsx
@@ -9,30 +9,34 @@ import {
 import browser from "webextension-polyfill";
 import styled from "styled-components";
 import { useLocation } from "wouter";
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 import { useTheme } from "~utils/theme";
 
 const buttons = [
   {
     title: "Home",
+    dictionaryKey: "home",
     icon: <Home02 />,
     size: "24px",
     route: "/"
   },
   {
     title: "Send",
+    dictionaryKey: "send",
     icon: <ArrowUpRight />,
     size: "24px",
     route: "/send/transfer"
   },
   {
     title: "Receive",
+    dictionaryKey: "receive",
     icon: <ArrowDownLeft />,
     size: "24px",
     route: "/receive"
   },
   {
     title: "Explore",
+    dictionaryKey: "explore",
     icon: <Compass03 />,
     size: "24px",
 
@@ -71,7 +75,7 @@ export const NavigationBar = () => {
             <IconWrapper displayTheme={theme} size={button.size}>
               {button.icon}
             </IconWrapper>
-            <div>{browser.i18n.getMessage(button.title)}</div>
+            <div>{browser.i18n.getMessage(button.dictionaryKey)}</div>
           </NavigationButton>
         );
       })}

diff --git a/src/components/popup/Route.tsx b/src/components/popup/Route.tsx
diff --git a/src/components/popup/WalletHeader.tsx b/src/components/popup/WalletHeader.tsx
@@ -50,7 +50,7 @@ import {
   Users01
 } from "@untitled-ui/icons-react";
 import { svgie } from "~utils/svgies";
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 import WalletMenu from "./WalletMenu";
 
 export default function WalletHeader() {

diff --git a/src/components/popup/WalletSwitcher.tsx b/src/components/popup/WalletSwitcher.tsx
@@ -27,7 +27,7 @@ import Arweave from "arweave";
 import { svgie } from "~utils/svgies";
 import { Action } from "./WalletHeader";
 import copy from "copy-to-clipboard";
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 
 export default function WalletSwitcher({
   open,
@@ -58,7 +58,7 @@ export default function WalletSwitcher({
   useEffect(
     () =>
       setWallets(
-        storedWallets.map((wallet) => ({
+        (storedWallets || []).map((wallet) => ({
           name: wallet.nickname,
           address: wallet.address,
           balance: "0",

diff --git a/src/components/popup/home/BuyButton.tsx b/src/components/popup/home/BuyButton.tsx
@@ -1,4 +1,4 @@
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 import { Button, ButtonV2 } from "@arconnect/components";
 import browser from "webextension-polyfill";
 import styled from "styled-components";

diff --git a/src/components/popup/home/Collectibles.tsx b/src/components/popup/home/Collectibles.tsx
@@ -1,6 +1,6 @@
 import { Heading, TokenCount, ViewAll } from "../Title";
 import { Spacer, Text } from "@arconnect/components";
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 import { useTokens } from "~tokens";
 import { useMemo } from "react";
 import browser from "webextension-polyfill";

diff --git a/src/components/popup/home/NoBalance.tsx b/src/components/popup/home/NoBalance.tsx
@@ -1,6 +1,6 @@
 import { ButtonV2, Section, Text } from "@arconnect/components";
 import { ArrowRightIcon } from "@iconicicons/react";
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 import noBalanceArt from "url:/assets/ar/no_funds.png";
 import browser from "webextension-polyfill";
 import styled from "styled-components";

diff --git a/src/components/popup/home/Tokens.tsx b/src/components/popup/home/Tokens.tsx
@@ -1,6 +1,6 @@
 import { Heading, TokenCount, ViewAll } from "../Title";
 import { Spacer, Text } from "@arconnect/components";
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 import { useTokens } from "~tokens";
 import { useMemo } from "react";
 import browser from "webextension-polyfill";

diff --git a/src/components/popup/home/Transactions.tsx b/src/components/popup/home/Transactions.tsx
@@ -13,7 +13,7 @@ import {
   AR_SENT_QUERY,
   PRINT_ARWEAVE_QUERY
 } from "~notifications/utils";
-import { useHistory } from "~utils/hash_router";
+import { useHistory } from "~wallets/router/hash/hash-router.hook";
 import { getArPrice } from "~lib/coingecko";
 import useSetting from "~settings/hook";
 import { printTxWorkingGateways, txHistoryGateways } from "~gateways/gateway";

diff --git a/src/iframe-placeholder.ts b/src/iframe-placeholder.ts