Merge pull request #347 from arconnectio/development

ArConnect BETA 1.12.0 (Subscriptions, misc bug fixes)

assets/_locales/en/messages.json

@@ -1765,5 +1765,37 @@
   "token_imported": {
     "message": "Token Succesfully Added",
     "description": "token added"
+  },
+  "subscription_allowance": {
+    "message": "Subscription Allowance",
+    "description": "subscription settings title"
+  },
+  "subscription_title": {
+    "message": "Subscription",
+    "description": "subscription title"
+  },
+  "subscribe_description": {
+    "message": "APPNAME requests to set up a subscription with recurring payments",
+    "description": "subscribe description"
+  },
+  "subscription_description": {
+    "message": "Manage auto withdrawal allowance",
+    "description": "subscription setting description"
+  },
+  "subscription_cancelled": {
+    "message": "Subscription Cancelled",
+    "description": "The subscription has been successfully cancelled."
+  },
+  "subscription_cancelled_error": {
+    "message": "Subscription Cancellation Error",
+    "description": "There was an error cancelling the subscription. Please try again."
+  },
+  "subscription_deleted": {
+    "message": "Subscription Deleted",
+    "description": "The subscription has been successfully deleted."
+  },
+  "subscription_delete_error": {
+    "message": "Subscription Deletion Error",
+    "description": "There was an error deleting the subscription. Please try again."
   }
 }

package.json

@@ -59,11 +59,11 @@
     "@plasmohq/storage": "^1.7.2",
     "@segment/analytics-next": "^1.53.2",
     "@untitled-ui/icons-react": "^0.1.1",
+    "ar-gql": "1.2.9",
     "ao-tokens": "^0.0.3",
-    "ar-gql": "^0.0.6",
     "arbundles": "^0.9.5",
     "arweave": "^1.13.0",
-    "axios": "^1.1.3",
+    "axios": "^1.7.2",
     "bip39-web-crypto": "^4.0.1",
     "check-password-strength": "^2.0.7",
     "copy-to-clipboard": "^3.3.2",
@@ -108,7 +108,7 @@
     "https-browserify": "^1.0.0",
     "husky": "^8.0.0",
     "path-browserify": "^1.0.1",
-    "plasmo": "^0.82.0",
+    "plasmo": "0.86.3",
     "prettier": "^2.2.1",
     "querystring-es3": "^0.2.1",
     "semantic-release": "^23.0.0",
@@ -121,8 +121,9 @@
   },
   "resolutions": {
     "arbundles/arweave": "^1.13.0",
+    "**/msgpackr": ">=1.10.1",
     "human-crypto-keys/node-forge": "^1.3.1",
     "human-crypto-keys/crypto-key-composer/node-forge": "^1.3.1",
-    "@parcel/runtime-js": "2.8.3"
+    "axios": "^1.7.2"
   }
 }

shim.d.ts

@@ -54,6 +54,7 @@ declare module "styled-components" {
     cardBorder: string;
     fail: string;
     cardBackground: string;
+    primaryBtnHover: string;
     primaryTextv2: string;
   }
 }

src/api/background.ts

@@ -39,6 +39,8 @@ import verifyMessageModule from "./modules/verify_message";
 import verifyMessage from "./modules/verify_message/verify_message.background";
 import signDataItemModule from "./modules/sign_data_item";
 import signDataItem from "./modules/sign_data_item/sign_data_item.background";
+import subscriptionModule from "./modules/subscription";
+import subscription from "./modules/subscription/subscription.background";
 
 /** Background modules */
 const modules: BackgroundModule<any>[] = [
@@ -60,7 +62,8 @@ const modules: BackgroundModule<any>[] = [
   { ...signMessageModule, function: signMessage },
   { ...privateHashModule, function: privateHash },
   { ...verifyMessageModule, function: verifyMessage },
-  { ...signDataItemModule, function: signDataItem }
+  { ...signDataItemModule, function: signDataItem },
+  { ...subscriptionModule, function: subscription }
 ];
 
 export default modules;

src/api/foreground.ts

@@ -47,6 +47,8 @@ import signMessageModule from "./modules/sign_message";
 import signMessage, {
   finalizer as signMessageFinalizer
 } from "./modules/sign_message/sign_message.foreground";
+import subscriptionModule from "./modules/subscription";
+import subscription from "./modules/subscription/subscription.foreground";
 import privateHashModule from "./modules/private_hash";
 import privateHash, {
   finalizer as privateHashFinalizer
@@ -90,7 +92,8 @@ const modules: ForegroundModule[] = [
     ...signDataItemModule,
     function: signDataItem,
     finalizer: signDataItemFinalizer
-  }
+  },
+  { ...subscriptionModule, function: subscription }
 ];
 
 export default modules;

src/api/modules/connect/auth.ts

@@ -10,6 +10,7 @@ export type AuthType =
   | "unlock"
   | "token"
   | "sign"
+  | "subscription"
   | "signMessage"
   | "signature"
   | "signDataItem";

src/api/modules/sign/fee.ts

@@ -171,11 +171,6 @@ export async function getFeeAmount(address: string, app: Application) {
   );
 
   const arweave = new Arweave(await findGateway({ graphql: true }));
-  // TODO: figure out a way to use redstone here
-  // problem: the redstone-api package uses the
-  // window object, which is undefined in the
-  // manifest v3 service workers
-
   /*let arPrice = 0;
 
   try {

src/api/modules/subscription/index.ts

@@ -0,0 +1,11 @@
+import type { PermissionType } from "~applications/permissions";
+import type { ModuleProperties } from "~api/module";
+
+const permissions: PermissionType[] = ["ACCESS_ADDRESS"];
+
+const subscriptionModule: ModuleProperties = {
+  functionName: "subscription",
+  permissions
+};
+
+export default subscriptionModule;

src/api/modules/subscription/subscription.background.ts

@@ -0,0 +1,68 @@
+import {
+  isAddress,
+  isLocalWallet,
+  isSubscriptionType
+} from "~utils/assertions";
+import { getActiveAddress, getActiveKeyfile, getWallets } from "~wallets";
+import type { ModuleFunction } from "~api/background";
+import authenticate from "../connect/auth";
+import { getSubscriptionData } from "~subscriptions";
+import {
+  RecurringPaymentFrequency,
+  type SubscriptionData
+} from "~subscriptions/subscription";
+
+const background: ModuleFunction<void> = async (
+  appData,
+  subscriptionData: SubscriptionData
+) => {
+  // validate input
+  isAddress(subscriptionData.arweaveAccountAddress);
+
+  isSubscriptionType(subscriptionData);
+  const address = await getActiveAddress();
+
+  // if is hardware wallet
+  const decryptedWallet = await getActiveKeyfile();
+  isLocalWallet(decryptedWallet);
+
+  // check if subsciption exists
+  let subscriptions = await getSubscriptionData(address);
+
+  if (
+    subscriptions &&
+    subscriptions.find(
+      (subscription) =>
+        subscription.arweaveAccountAddress ===
+        subscriptionData.arweaveAccountAddress
+    )
+  ) {
+    throw new Error("Account is already subscribed");
+  }
+
+  await authenticate({
+    type: "subscription",
+    url: appData.appURL,
+    arweaveAccountAddress: subscriptionData.arweaveAccountAddress,
+    applicationName: subscriptionData.applicationName,
+    subscriptionName: subscriptionData.subscriptionName,
+    subscriptionManagementUrl: subscriptionData.subscriptionManagementUrl,
+    subscriptionFeeAmount: subscriptionData.subscriptionFeeAmount,
+    recurringPaymentFrequency: subscriptionData.recurringPaymentFrequency,
+    nextPaymentDue: subscriptionData.nextPaymentDue,
+    subscriptionStartDate: subscriptionData.subscriptionStartDate,
+    subscriptionEndDate: subscriptionData.subscriptionEndDate,
+    applicationIcon: subscriptionData?.applicationIcon
+  });
+
+  subscriptions = await getSubscriptionData(address);
+  const subscription = subscriptions.find(
+    (subscription) =>
+      subscription.arweaveAccountAddress ===
+      subscriptionData.arweaveAccountAddress
+  );
+
+  return subscription;
+};
+
+export default background;

src/api/modules/subscription/subscription.foreground.ts

@@ -0,0 +1,39 @@
+import type { SubscriptionData } from "~subscriptions/subscription";
+import type { ModuleFunction } from "~api/module";
+
+const foreground: ModuleFunction<SubscriptionData[]> = (data) => {
+  // Validate required fields
+  const requiredFields: (keyof SubscriptionData)[] = [
+    "arweaveAccountAddress",
+    "applicationName",
+    "subscriptionName",
+    "subscriptionFeeAmount",
+    "recurringPaymentFrequency",
+    "subscriptionManagementUrl",
+    "subscriptionEndDate"
+  ];
+
+  for (const field of requiredFields) {
+    if (data[field] === undefined) {
+      throw new Error(`Missing required field: ${field}`);
+    }
+  }
+
+  // optional fields
+  const allFields = [...requiredFields, "applicationIcon"];
+
+  Object.keys(data).forEach((key) => {
+    if (!allFields.includes(key as keyof SubscriptionData)) {
+      throw new Error(`Unexpected extra field: ${key}`);
+    }
+  });
+
+  return [
+    {
+      ...data,
+      applicationIcon: data.applicationIcon
+    }
+  ];
+};
+
+export default foreground;

src/background.ts

@@ -14,6 +14,7 @@ import { onInstalled } from "~utils/runtime";
 import browser from "webextension-polyfill";
 import { syncLabels } from "~wallets";
 import { trackBalance } from "~utils/analytics";
+import { subscriptionsHandler } from "~subscriptions/api";
 
 // watch for API calls
 onMessage("api_call", handleApiCalls);
@@ -26,11 +27,14 @@ browser.tabs.onUpdated.addListener((tabId) => handleTabUpdate(tabId));
 browser.tabs.onActivated.addListener(({ tabId }) => handleTabUpdate(tabId));
 
 // handle fee alarm (send fees asyncronously)
-browser.alarms.onAlarm.addListener(handleFeeAlarm);
+// browser.alarms.onAlarm.addListener(handleFeeAlarm);
 
-// handle norifications
+// handle notifications
 browser.alarms.onAlarm.addListener(notificationsHandler);
 
+// handle subscriptions
+browser.alarms.onAlarm.addListener(subscriptionsHandler);
+
 browser.alarms.onAlarm.addListener(trackBalance);
 
 // handle alarm for updating gateways

src/components/dashboard/list/BaseElement.tsx

@@ -73,12 +73,16 @@ const ContentWrapper = styled.div`
   gap: ${setting_element_padding};
 `;
 
-const SettingIconWrapper = styled(Squircle)`
+export const SettingIconWrapper = styled(Squircle)<{
+  bg?: string;
+  customSize?: string;
+}>`
   position: relative;
   flex-shrink: 0;
-  width: 2.6rem;
-  height: 2.6rem;
-  color: rgb(${(props) => props.theme.theme});
+  width: ${(props) => props.customSize || "2.6rem"};
+  height: ${(props) => props.customSize || "2.6rem"};
+
+  color: rgb(${(props) => props.bg || props.theme.theme});
 `;
 
 export const SettingIcon = styled(SettingsIcon)`

src/components/hardware/HardwareWalletTheme.tsx

@@ -28,7 +28,9 @@ export default function HardwareWalletTheme({
 
     return {
       ...theme,
-      theme: hardwareApiTheme
+      theme: hardwareApiTheme,
+      primary: "#9AB8FF",
+      primaryBtnHover: "#6F93E1"
     };
   }
 

src/components/hardware/KeystoneButton.tsx

@@ -3,6 +3,7 @@ import {
   type KeystoneAccount
 } from "~wallets/hardware/keystone";
 import { addHardwareWallet } from "~wallets/hardware";
+import { usePatchWorker } from "~wallets/hardware/hooks";
 import { useScanner } from "@arconnect/keystone-sdk";
 import {
   Alert,
@@ -82,6 +83,9 @@ export default function KeystoneButton({ onSuccess }: Props) {
     cancel();
   });
 
+  // Patch Worker
+  usePatchWorker();
+
   return (
     <>
       <ButtonV2

src/components/popup/Navigation.tsx

@@ -83,7 +83,7 @@ export const NavigationBar = () => {
 
 const NavigationBarWrapper = styled.div<{ displayTheme: DisplayTheme }>`
   z-index: 5;
-  border-top: 2px solid #8e7bea;
+  border-top: 2px solid ${(props) => props.theme.primary};
   position: fixed;
   bottom: 0;
   color: white;

src/components/popup/Token.tsx

@@ -108,12 +108,12 @@ export default function Token({ onClick, ...props }: Props) {
             {isMillion ? (
               <BalanceTooltip content={totalBalance} position="topEnd">
                 <NativeBalance>
-                  {props.ao ? props.balance : balance} {props.ticker}
+                  {props.ao ? props.balance : balance}
                 </NativeBalance>
               </BalanceTooltip>
             ) : (
               <NativeBalance>
-                {props.ao ? props.balance : balance} {props.ticker}
+                {props.ao ? props.balance : balance}
               </NativeBalance>
             )}
           </>

src/components/popup/WalletHeader.tsx

@@ -39,8 +39,10 @@ import browser from "webextension-polyfill";
 import styled from "styled-components";
 import copy from "copy-to-clipboard";
 import { type Gateway } from "~gateways/gateway";
+
 import {
   Bell03,
+  CreditCard01,
   Container,
   DotsVertical,
   Expand01,
@@ -436,6 +438,13 @@ export default function WalletHeader() {
                 window.location.href.split("#")[0] + "?expanded=true"
               );
             }
+          },
+          {
+            icon: <CreditCard01 style={{ width: "18px", height: "17px" }} />,
+            title: "Subscriptions",
+            route: () => {
+              push("/subscriptions");
+            }
           }
         ]}
       />

src/components/popup/asset/Thumbnail.tsx

@@ -21,7 +21,7 @@ export default function Thumbnail({ src }: Props) {
       <FullScreenButton
         href={src}
         target="_blank"
-        rel="noopener noreferer"
+        rel="noopener noreferrer"
         onClick={(e) => e.stopPropagation()}
       >
         <MaximizeIcon />