fix: Add correct back functions

arconnectio · Jul 3, 2024 · 0f0a669 · 0f0a669
1 parent d818034
commit 0f0a669
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 57 deletions.
diff --git a/src/routes/popup/settings/apps/[url]/index.tsx b/src/routes/popup/settings/apps/[url]/index.tsx
@@ -95,7 +95,10 @@ export default function AppSettings({ url }: Props) {
 
   return (
     <>
-      <HeadV2 title={settings?.name || settings?.url} />
+      <HeadV2
+        title={settings?.name || settings?.url}
+        back={() => setLocation("/quick-settings/apps")}
+      />
       <Wrapper>
         <div>
           <Flex alignItems="center" justifyContent="space-between">
@@ -380,14 +383,15 @@ const TitleV1 = styled(Text).attrs({
 })`
   margin-bottom: 0;
   font-size: 1.125rem;
+  font-weight: 500;
 `;
 
 const TitleV2 = styled(Text).attrs({
   heading: true
 })`
   margin-bottom: 0.6em;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
 `;
 
 const NumberInputV2 = styled(InputV2)`

diff --git a/src/routes/popup/settings/apps/[url]/permissions.tsx b/src/routes/popup/settings/apps/[url]/permissions.tsx
@@ -5,17 +5,22 @@ import styled from "styled-components";
 import HeadV2 from "~components/popup/HeadV2";
 import { permissionData, type PermissionType } from "~applications/permissions";
 import Checkbox from "~components/Checkbox";
+import { useLocation } from "wouter";
 
 export default function AppPermissions({ url }: Props) {
   // app settings
   const app = new Application(url);
   const [settings, updateSettings] = app.hook();
+  const [, setLocation] = useLocation();
 
   if (!settings) return <></>;
 
   return (
     <>
-      <HeadV2 title={settings?.name || settings?.url} />
+      <HeadV2
+        title={settings?.name || settings?.url}
+        back={() => setLocation(`/quick-settings/apps/${url}`)}
+      />
       <Wrapper>
         <Title noMargin>{browser.i18n.getMessage("permissions")}</Title>
         {Object.keys(permissionData).map(

diff --git a/src/routes/popup/settings/apps/index.tsx b/src/routes/popup/settings/apps/index.tsx
@@ -78,7 +78,10 @@ export default function Applications() {
 
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("setting_apps")} />
+      <HeadV2
+        title={browser.i18n.getMessage("setting_apps")}
+        back={() => setLocation("/quick-settings")}
+      />
       <Wrapper>
         <SearchWrapper>
           <SearchInput

diff --git a/src/routes/popup/settings/contacts/[address]/index.tsx b/src/routes/popup/settings/contacts/[address]/index.tsx
@@ -2,15 +2,21 @@ import HeadV2 from "~components/popup/HeadV2";
 import browser from "webextension-polyfill";
 import { default as ContactSettingsComponent } from "~components/dashboard/subsettings/ContactSettings";
 import styled from "styled-components";
+import { useLocation } from "wouter";
 
 interface ContactSettingsProps {
   address: string;
 }
 
 export default function ContactSettings({ address }: ContactSettingsProps) {
+  const [, setLocation] = useLocation();
+
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("setting_contact")} />
+      <HeadV2
+        title={browser.i18n.getMessage("setting_contact")}
+        back={() => setLocation("/quick-settings/contacts")}
+      />
       <Wrapper>
         <ContactSettingsComponent address={address} isQuickSetting={true} />
       </Wrapper>
@@ -23,5 +29,5 @@ const Wrapper = styled.div`
   flex-direction: column;
   justify-content: space-between;
   padding: 0 1rem;
-  height: calc(100vh - 80px);
+  height: calc(100vh - 70px);
 `;
diff --git a/src/routes/popup/settings/contacts/index.tsx b/src/routes/popup/settings/contacts/index.tsx
@@ -2,11 +2,17 @@ import HeadV2 from "~components/popup/HeadV2";
 import browser from "webextension-polyfill";
 import styled from "styled-components";
 import { default as ContactsComponent } from "~components/dashboard/Contacts";
+import { useLocation } from "wouter";
 
 export default function Contacts() {
+  const [, setLocation] = useLocation();
+
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("setting_contacts")} />
+      <HeadV2
+        title={browser.i18n.getMessage("setting_contacts")}
+        back={() => setLocation("/quick-settings")}
+      />
       <Wrapper>
         <ContactsComponent isQuickSetting={true} />
       </Wrapper>

diff --git a/src/routes/popup/settings/contacts/new.tsx b/src/routes/popup/settings/contacts/new.tsx
@@ -2,11 +2,17 @@ import HeadV2 from "~components/popup/HeadV2";
 import browser from "webextension-polyfill";
 import AddContact from "~components/dashboard/subsettings/AddContact";
 import styled from "styled-components";
+import { useLocation } from "wouter";
 
 export default function NewContact() {
+  const [, setLocation] = useLocation();
+
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("new_contact")} />
+      <HeadV2
+        title={browser.i18n.getMessage("new_contact")}
+        back={() => setLocation("/quick-settings/contacts")}
+      />
       <Wrapper>
         <AddContact isQuickSetting={true} />
       </Wrapper>

diff --git a/src/routes/popup/settings/notifications/index.tsx b/src/routes/popup/settings/notifications/index.tsx
@@ -3,17 +3,16 @@ import styled from "styled-components";
 import { ExtensionStorage } from "~utils/storage";
 import { Spacer, Text, TooltipV2 } from "@arconnect/components";
 import browser from "webextension-polyfill";
-import {
-  RadioWrapper,
-  RadioItem,
-  RadioInner
-} from "~components/dashboard/Setting";
+import { RadioWrapper, RadioItem } from "~components/dashboard/Setting";
 import HeadV2 from "~components/popup/HeadV2";
 import { ToggleSwitch } from "~routes/popup/subscriptions/subscriptionDetails";
 import { InformationIcon } from "@iconicicons/react";
 import Checkbox from "~components/Checkbox";
+import { useLocation } from "wouter";
 
 export default function NotificationSettings() {
+  const [, setLocation] = useLocation();
+
   const [notificationSettings, setNotificationSettings] = useStorage(
     {
       key: "setting_notifications",
@@ -40,7 +39,10 @@ export default function NotificationSettings() {
 
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("setting_notifications")} />
+      <HeadV2
+        title={browser.i18n.getMessage("setting_notifications")}
+        back={() => setLocation("/quick-settings")}
+      />
       <Wrapper>
         <ToggleSwitchWrapper>
           <TitleWrapper>

diff --git a/src/routes/popup/settings/quickSettings.tsx b/src/routes/popup/settings/quickSettings.tsx
@@ -7,39 +7,13 @@ import {
   LinkExternal02,
   Coins04
 } from "@untitled-ui/icons-react";
-import Wallets from "~components/dashboard/Wallets";
-import Applications from "~components/dashboard/Applications";
-import Contacts from "~components/dashboard/Contacts";
-import NotificationSettings from "~components/dashboard/NotificationSettings";
-import Tokens from "../tokens";
 import { useLocation } from "wouter";
 import { useMemo } from "react";
 import { ListItem, ListItemIcon } from "@arconnect/components";
 import type { Icon } from "~settings/setting";
 import type { HTMLProps, ReactNode } from "react";
 import styled from "styled-components";
 
-interface Props {
-  params: {
-    setting?: string;
-    subsetting?: string;
-  };
-}
-
-interface Setting extends SettingItemData {
-  name: string;
-  component?: (...args: any[]) => JSX.Element;
-  externalLink?: string;
-}
-
-type SettingItemData = {
-  icon: Icon;
-  displayName: string;
-  description: string;
-  active: boolean;
-  isExternalLink?: boolean;
-};
-
 export default function QuickSettings({ params }: Props) {
   // router location
   const [, setLocation] = useLocation();
@@ -49,7 +23,10 @@ export default function QuickSettings({ params }: Props) {
 
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("quick_settings")} />
+      <HeadV2
+        title={browser.i18n.getMessage("quick_settings")}
+        back={() => setLocation("/")}
+      />
       <SettingsList>
         {allSettings.map((setting, i) => (
           <SettingListItem
@@ -102,6 +79,27 @@ function SettingListItem({
   );
 }
 
+interface Props {
+  params: {
+    setting?: string;
+    subsetting?: string;
+  };
+}
+
+interface Setting extends SettingItemData {
+  name: string;
+  component?: (...args: any[]) => JSX.Element;
+  externalLink?: string;
+}
+
+type SettingItemData = {
+  icon: Icon;
+  displayName: string;
+  description: string;
+  active: boolean;
+  isExternalLink?: boolean;
+};
+
 const ExternalLinkIcon = styled(LinkExternal02)`
   height: 1rem;
   width: 1rem;
@@ -128,36 +126,31 @@ const allSettings: Omit<Setting, "active">[] = [
     name: "wallets",
     displayName: "setting_wallets",
     description: "setting_wallets_description",
-    icon: WalletIcon,
-    component: Wallets
+    icon: WalletIcon
   },
   {
     name: "apps",
     displayName: "setting_apps",
     description: "setting_apps_description",
-    icon: GridIcon,
-    component: Applications
+    icon: GridIcon
   },
   {
     name: "tokens",
     displayName: "setting_tokens",
     description: "setting_tokens_description",
-    icon: Coins04,
-    component: Tokens
+    icon: Coins04
   },
   {
     name: "contacts",
     displayName: "setting_contacts",
     description: "setting_contacts_description",
-    icon: Users01,
-    component: Contacts
+    icon: Users01
   },
   {
     name: "notifications",
     displayName: "setting_notifications",
     description: "setting_notifications_description",
-    icon: BellIcon,
-    component: NotificationSettings
+    icon: BellIcon
   },
   {
     name: "All Settings",

diff --git a/src/routes/popup/settings/tokens/[id]/index.tsx b/src/routes/popup/settings/tokens/[id]/index.tsx
@@ -79,7 +79,10 @@ export default function TokenSettings({ id }: Props) {
 
   return (
     <>
-      <HeadV2 title={token.name} />
+      <HeadV2
+        title={token.name}
+        back={() => setLocation("/quick-settings/tokens")}
+      />
       <Wrapper>
         <div>
           <Spacer y={0.45} />

diff --git a/src/routes/popup/settings/tokens/index.tsx b/src/routes/popup/settings/tokens/index.tsx
@@ -98,7 +98,10 @@ export default function Tokens() {
 
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("setting_tokens")} />
+      <HeadV2
+        title={browser.i18n.getMessage("setting_tokens")}
+        back={() => setLocation("/quick-settings")}
+      />
       <Wrapper>
         <div>
           <SearchInput

diff --git a/src/routes/popup/settings/tokens/new.tsx b/src/routes/popup/settings/tokens/new.tsx
@@ -2,11 +2,17 @@ import HeadV2 from "~components/popup/HeadV2";
 import browser from "webextension-polyfill";
 import AddToken from "~components/dashboard/subsettings/AddToken";
 import styled from "styled-components";
+import { useLocation } from "wouter";
 
 export default function NewToken() {
+  const [, setLocation] = useLocation();
+
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("import_token")} />
+      <HeadV2
+        title={browser.i18n.getMessage("import_token")}
+        back={() => setLocation("/quick-settings/tokens")}
+      />
       <Wrapper>
         <AddToken isQuickSetting={true} />
       </Wrapper>

diff --git a/src/routes/popup/settings/wallets/[address]/export.tsx b/src/routes/popup/settings/wallets/[address]/export.tsx
@@ -15,8 +15,11 @@ import { downloadFile } from "~utils/file";
 import browser from "webextension-polyfill";
 import styled from "styled-components";
 import HeadV2 from "~components/popup/HeadV2";
+import { useLocation } from "wouter";
 
 export default function ExportWallet({ address }: Props) {
+  const [, setLocation] = useLocation();
+
   // wallets
   const [wallets] = useStorage<StoredWallet[]>(
     {
@@ -79,7 +82,10 @@ export default function ExportWallet({ address }: Props) {
 
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("export_keyfile")} />
+      <HeadV2
+        title={browser.i18n.getMessage("export_keyfile")}
+        back={() => setLocation(`/quick-settings/wallets/${address}`)}
+      />
       <Wrapper>
         <Text style={{ fontSize: "0.98rem" }}>
           {browser.i18n.getMessage("export_keyfile_description")}

diff --git a/src/routes/popup/settings/wallets/[address]/index.tsx b/src/routes/popup/settings/wallets/[address]/index.tsx
@@ -124,7 +124,10 @@ export default function Wallet({ address }: Props) {
 
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("edit_wallet")} />
+      <HeadV2
+        title={browser.i18n.getMessage("edit_wallet")}
+        back={() => setLocation("/quick-settings/wallets")}
+      />
       <Wrapper>
         <div>
           <WalletWrapper>

diff --git a/src/routes/popup/settings/wallets/index.tsx b/src/routes/popup/settings/wallets/index.tsx
@@ -81,7 +81,10 @@ export default function Wallets() {
 
   return (
     <>
-      <HeadV2 title={browser.i18n.getMessage("setting_wallets")} />
+      <HeadV2
+        title={browser.i18n.getMessage("setting_wallets")}
+        back={() => setLocation("/quick-settings")}
+      />
       <Wrapper>
         <div style={{ height: "100%" }}>
           <SearchInput