ArConnect 1.5.0 - Notifications

assets/_locales/en/messages.json

@@ -407,6 +407,14 @@
     "message": "Wayfinder",
     "description": "Wayfinder settings title"
   },
+  "setting_notifications": {
+    "message": "Notifications",
+    "description": "Notifications settings title"
+  },
+  "setting_notifications_description": {
+    "message": "Toggle to receive alerts for new transactions in your wallet.",
+    "description": "Notifications settings description"
+  },
   "setting_apps_description": {
     "message": "View all connected apps & settings",
     "description": "App settings description"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "arconnect",
   "displayName": "ArConnect",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "__MSG_extensionDescription__",
   "author": "th8ta",
   "packageManager": "yarn@1.22.18",

src/background.ts

@@ -6,6 +6,7 @@ import { handleGatewayUpdate } from "~gateways/cache";
 import { onMessage } from "@arconnect/webext-bridge";
 import { handleTabUpdate } from "~applications/tab";
 import protocolHandler from "~gateways/ar_protocol";
+import { notificationsHandler } from "~notifications/api";
 import { appsChangeListener } from "~applications";
 import handleFeeAlarm from "~api/modules/sign/fee";
 import { ExtensionStorage } from "~utils/storage";
@@ -27,6 +28,9 @@ browser.tabs.onActivated.addListener(({ tabId }) => handleTabUpdate(tabId));
 // handle fee alarm (send fees asyncronously)
 browser.alarms.onAlarm.addListener(handleFeeAlarm);
 
+// handle norifications
+browser.alarms.onAlarm.addListener(notificationsHandler);
+
 browser.alarms.onAlarm.addListener(trackBalance);
 
 // handle alarm for updating gateways

src/components/dashboard/NotificationSettings.tsx

@@ -0,0 +1,93 @@
+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 browser from "webextension-polyfill";
+import { Radio, RadioInner, RadioItem, RadioWrapper } from "./Setting";
+
+export default function NotificationSettings() {
+  const [notificationSettings, setNotificationSettings] = useStorage(
+    {
+      key: "setting_notifications",
+      instance: ExtensionStorage
+    },
+    false
+  );
+  const [notificationCustomizeSettings, setNotificationCustomizeSettings] =
+    useStorage(
+      {
+        key: "setting_notifications_customize",
+        instance: ExtensionStorage
+      },
+      ["default"]
+    );
+
+  const toggleNotificationSetting = () => {
+    setNotificationSettings(!notificationSettings);
+  };
+
+  const handleRadioChange = (setting) => {
+    setNotificationCustomizeSettings([setting]);
+  };
+
+  return (
+    <>
+      <Wrapper>
+        <PermissionCheckbox
+          onChange={toggleNotificationSetting}
+          checked={notificationSettings}
+        >
+          {browser.i18n.getMessage(
+            !!notificationSettings ? "enabled" : "disabled"
+          )}
+          <br />
+          <Text noMargin>
+            {browser.i18n.getMessage("setting_notifications_description")}
+          </Text>
+        </PermissionCheckbox>
+        <Spacer y={1.7} />
+        <RadioWrapper>
+          {/* AR AND AO TRANSFER NOTIFICATIONS  */}
+          <RadioItem onClick={() => handleRadioChange("default")}>
+            <Radio>
+              {notificationCustomizeSettings &&
+                notificationCustomizeSettings.includes("default") && (
+                  <RadioInner />
+                )}
+            </Radio>
+            <Text noMargin>
+              Enable Arweave and ao Transaction Notifications
+            </Text>
+          </RadioItem>
+          {/* JUST AR TRANSFER NOTIFICATIONS  */}
+          <RadioItem
+            onClick={() => handleRadioChange("arTransferNotifications")}
+          >
+            <Radio>
+              {notificationCustomizeSettings &&
+                notificationCustomizeSettings.includes(
+                  "arTransferNotifications"
+                ) && <RadioInner />}
+            </Radio>
+            <Text noMargin>Enable Arweave Transaction Notifications</Text>
+          </RadioItem>
+          {/* ALL NOTIFICATIONS */}
+          <RadioItem onClick={() => handleRadioChange("allTxns")}>
+            <Radio>
+              {notificationCustomizeSettings &&
+                notificationCustomizeSettings.includes("allTxns") && (
+                  <RadioInner />
+                )}
+            </Radio>
+            <Text noMargin>Enable all Arweave and ao Notifications</Text>
+          </RadioItem>
+        </RadioWrapper>
+      </Wrapper>
+    </>
+  );
+}
+
+const Wrapper = styled.div`
+  position: relative;
+`;

src/components/dashboard/Setting.tsx

@@ -139,13 +139,13 @@ interface Props {
   setting: SettingType;
 }
 
-const RadioWrapper = styled.div`
+export const RadioWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.05rem;
 `;
 
-const Radio = styled(Squircle).attrs((props) => ({
+export const Radio = styled(Squircle).attrs((props) => ({
   outline: `rgba(${props.theme.theme}, .7)`
 }))`
   position: relative;
@@ -154,7 +154,7 @@ const Radio = styled(Squircle).attrs((props) => ({
   height: 1rem;
 `;
 
-const RadioInner = styled(Squircle)`
+export const RadioInner = styled(Squircle)`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -165,7 +165,7 @@ const RadioInner = styled(Squircle)`
   transition: all 0.23s ease-in-out;
 `;
 
-const RadioItem = styled.div`
+export const RadioItem = styled.div`
   display: flex;
   align-items: center;
   gap: 0.7rem;

src/components/popup/WalletHeader.tsx

@@ -41,8 +41,9 @@ import browser from "webextension-polyfill";
 import styled from "styled-components";
 import copy from "copy-to-clipboard";
 import { type Gateway } from "~gateways/gateway";
-import { Settings01 } from "@untitled-ui/icons-react";
+import { Bell03 } from "@untitled-ui/icons-react";
 import { svgie } from "~utils/svgies";
+import { useHistory } from "~utils/hash_router";
 
 export default function WalletHeader() {
   // current address
@@ -126,7 +127,18 @@ export default function WalletHeader() {
   // ui theme
   const theme = useTheme();
 
-  // scroll position
+  // router push
+  const [push] = useHistory();
+
+  // has notifications
+  const [newNotifications, setNewNotifications] = useStorage<boolean>(
+    {
+      key: "new_notifications",
+      instance: ExtensionStorage
+    },
+    false
+  );
+
   const [scrollY, setScrollY] = useState(0);
 
   useEffect(() => {
@@ -220,6 +232,16 @@ export default function WalletHeader() {
         </Tooltip>
       </AddressContainer>
       <WalletActions>
+        <Tooltip content="Notifications" position="bottom">
+          <Action
+            as={Bell03}
+            onClick={() => {
+              setNewNotifications(false);
+              push("/notifications");
+            }}
+          />
+          {newNotifications && <Notifier />}
+        </Tooltip>
         <Tooltip content="Viewblock" position="bottom">
           <Action
             as={BoxIcon}
@@ -466,6 +488,17 @@ const ExpandArrow = styled(ChevronDownIcon)<{ open: boolean }>`
   transform: ${(props) => (props.open ? "rotate(180deg)" : "rotate(0)")};
 `;
 
+const Notifier = styled.div`
+  position: absolute;
+  right: -0.7px;
+  top: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: ${(props) => props.theme.fail};
+  border: 1px solid rgb(${(props) => props.theme.background});
+`;
+
 const AppAction = styled.div`
   position: relative;
   display: flex;