Merge pull request #400 from arconnectio/staging

ArConnect 1.14.2

package.json

@@ -47,7 +47,7 @@
     ]
   },
   "dependencies": {
-    "@arconnect/components": "^0.3.8",
+    "@arconnect/components": "^0.3.11",
     "@arconnect/keystone-sdk": "^0.0.5",
     "@arconnect/warp-dre": "^0.0.1",
     "@arconnect/webext-bridge": "^5.0.6",
@@ -59,11 +59,12 @@
     "@plasmohq/storage": "^1.7.2",
     "@segment/analytics-next": "^1.53.2",
     "@untitled-ui/icons-react": "^0.1.1",
+    "ao-tokens": "^0.0.4",
     "ar-gql": "1.2.9",
-    "ao-tokens": "^0.0.3",
     "arbundles": "^0.9.5",
     "arweave": "^1.13.0",
     "axios": "^1.7.2",
+    "bignumber.js": "^9.1.2",
     "bip39-web-crypto": "^4.0.1",
     "check-password-strength": "^2.0.7",
     "copy-to-clipboard": "^3.3.2",

shim.d.ts

@@ -49,6 +49,7 @@ declare module "styled-components" {
     secondaryTextv2: string;
     background: string;
     backgroundSecondary: string;
+    secondaryBtnHover: string;
     inputField: string;
     primary: string;
     cardBorder: string;

src/api/modules/arweave_config/arweave_config.background.ts

@@ -1,6 +1,6 @@
 import type { ModuleFunction } from "~api/background";
 import Application from "~applications/application";
-import { Gateway } from "~gateways/gateway";
+import { type Gateway } from "~gateways/gateway";
 
 const background: ModuleFunction<Gateway> = async (appData) => {
   const app = new Application(appData.appURL);

src/api/modules/connect/connect.foreground.ts

@@ -1,7 +1,7 @@
 import type { PermissionType } from "~applications/permissions";
 import type { AppInfo } from "~applications/application";
 import type { ModuleFunction } from "~api/module";
-import { Gateway } from "~gateways/gateway";
+import { type Gateway } from "~gateways/gateway";
 import { getAppURL } from "~utils/format";
 
 const foreground: ModuleFunction<any[]> = async (

src/api/modules/decrypt/decrypt.foreground.ts

@@ -1,4 +1,4 @@
-import { TransformFinalizer } from "~api/foreground";
+import { type TransformFinalizer } from "~api/foreground";
 import type { ModuleFunction } from "~api/module";
 
 const foreground: ModuleFunction<unknown> = (data, options) => {

src/api/modules/dispatch/allowance.ts

@@ -1,5 +1,5 @@
 import { freeDecryptedWallet } from "~wallets/encryption";
-import type { Allowance } from "~applications/allowance";
+import type { Allowance, AllowanceBigNumber } from "~applications/allowance";
 import type { ModuleAppData } from "~api/background";
 import { defaultGateway } from "~gateways/gateway";
 import type { JWKInterface } from "warp-contracts";
@@ -8,16 +8,17 @@ import { signAuth } from "../sign/sign_auth";
 import Arweave from "arweave";
 import type { DataItem } from "arbundles";
 import type Transaction from "arweave/web/lib/transaction";
+import type BigNumber from "bignumber.js";
 
 /**
  * Ensure allowance for dispatch
  */
 export async function ensureAllowanceDispatch(
   dataEntry: DataItem | Transaction,
   appData: ModuleAppData,
-  allowance: Allowance,
+  allowance: AllowanceBigNumber,
   keyfile: JWKInterface,
-  price: number
+  price: number | BigNumber
 ) {
   const arweave = new Arweave(defaultGateway);
 

src/api/modules/dispatch/dispatch.background.ts

@@ -19,6 +19,7 @@ import browser from "webextension-polyfill";
 import Arweave from "arweave";
 import { ensureAllowanceDispatch } from "./allowance";
 import { updateAllowance } from "../sign/allowance";
+import BigNumber from "bignumber.js";
 
 type ReturnType = {
   arConfetti: string | false;
@@ -124,7 +125,7 @@ const background: ModuleFunction<ReturnType> = async (
       transaction.addTag(arcTag.name, arcTag.value);
     }
     // calculate price
-    const price = +transaction.reward + parseInt(transaction.quantity);
+    const price = BigNumber(transaction.reward).plus(transaction.quantity);
 
     // ensure allowance
     await ensureAllowanceDispatch(

src/api/modules/sign/allowance.ts

@@ -1,6 +1,11 @@
-import { type Allowance, defaultAllowance } from "~applications/allowance";
+import {
+  type Allowance,
+  type AllowanceBigNumber,
+  defaultAllowance
+} from "~applications/allowance";
 import Application from "~applications/application";
 import authenticate from "../connect/auth";
+import BigNumber from "bignumber.js";
 
 /**
  * Get allowance for an app
@@ -23,7 +28,10 @@ export async function getAllowance(tabURL: string) {
  * @param price Price to update the allowance spent amount
  * with (quantity + reward)
  */
-export async function updateAllowance(tabURL: string, price: number) {
+export async function updateAllowance(
+  tabURL: string,
+  price: number | BigNumber
+) {
   // construct application
   const app = new Application(tabURL);
 
@@ -33,7 +41,9 @@ export async function updateAllowance(tabURL: string, price: number) {
       allowance: {
         ...defaultAllowance,
         ...allowance,
-        spent: (allowance?.spent || 0) + price
+        spent: BigNumber(allowance?.spent || 0)
+          .plus(price)
+          .toString()
       }
     };
   });
@@ -49,15 +59,15 @@ export async function updateAllowance(tabURL: string, price: number) {
  * @param price Price to check the allowance for (quantity + reward)
  */
 export async function allowanceAuth(
-  allowance: Allowance,
+  allowance: AllowanceBigNumber,
   tabURL: string,
-  price: number
+  price: number | BigNumber
 ) {
   // spent amount after this transaction
-  const total = allowance.spent + price;
+  const total = allowance.spent.plus(price);
 
   // check if the price goes over the allowed total limit
-  const hasEnoughAllowance = allowance.limit >= total;
+  const hasEnoughAllowance = total.lte(allowance.limit);
 
   // if the allowance is enough, return
   if (hasEnoughAllowance) return;

src/api/modules/sign/fee.ts

@@ -1,5 +1,5 @@
 import { getActiveAddress, getActiveKeyfile } from "~wallets";
-import { defaultGateway, Gateway } from "~gateways/gateway";
+import { defaultGateway, type Gateway } from "~gateways/gateway";
 import { freeDecryptedWallet } from "~wallets/encryption";
 import type { Alarms } from "webextension-polyfill";
 import { findGateway } from "~gateways/wayfinder";
@@ -10,6 +10,7 @@ import { gql } from "~gateways/api";
 import Application from "~applications/application";
 import browser from "webextension-polyfill";
 import Arweave from "arweave/web/common";
+import BigNumber from "bignumber.js";
 //import redstone from "redstone-api";
 
 /**
@@ -57,7 +58,9 @@ export default async function handleFeeAlarm(alarmInfo: Alarms.Alarm) {
 
       // fee multiplication
       if (feeMultiplier > 1) {
-        feeTx.reward = (+feeTx.reward * feeMultiplier).toFixed(0);
+        feeTx.reward = BigNumber(feeTx.reward)
+          .multipliedBy(feeMultiplier)
+          .toFixed(0, BigNumber.ROUND_FLOOR);
       }
 
       await arweave.transactions.sign(feeTx, keyfile);
@@ -186,13 +189,13 @@ export async function getFeeAmount(address: string, app: Application) {
     arPrice = res.arweave.usd;
   }*/
   const arPrice = await getArPrice("usd");
-  const usdPrice = 1 / arPrice; // 1 USD how much AR
+  const usdPrice = BigNumber(1).dividedBy(arPrice); // 1 USD how much AR
 
   if (res.data.transactions.edges.length) {
     const usd = res.data.transactions.edges.length >= 10 ? 0.01 : 0.03;
 
-    return arweave.ar.arToWinston((usdPrice * usd).toString());
-  } else return arweave.ar.arToWinston((usdPrice * 0.01).toString());
+    return arweave.ar.arToWinston(usdPrice.multipliedBy(usd).toString());
+  } else return arweave.ar.arToWinston(usdPrice.multipliedBy(0.01).toString());
 }
 
 /**

src/api/modules/sign/sign.background.ts

@@ -22,6 +22,7 @@ import Application from "~applications/application";
 import browser from "webextension-polyfill";
 import Arweave from "arweave";
 import { EventType, trackDirect } from "~utils/analytics";
+import BigNumber from "bignumber.js";
 
 const background: ModuleFunction<BackgroundResult> = async (
   appData,
@@ -83,7 +84,7 @@ const background: ModuleFunction<BackgroundResult> = async (
   // validate the user's allowance for this app
   // if it is not enough, we need the user to
   // raise it or cancel the transaction
-  const price = +transaction.reward + parseInt(transaction.quantity);
+  const price = BigNumber(transaction.reward).plus(transaction.quantity);
 
   // get allowance
   const allowance = await getAllowance(appData.appURL);

src/api/modules/sign/utils.ts

@@ -6,6 +6,7 @@ import { ExtensionStorage } from "~utils/storage";
 import iconUrl from "url:/assets/icon512.png";
 import browser from "webextension-polyfill";
 import Arweave from "arweave";
+import BigNumber from "bignumber.js";
 
 /**
  * Fetch current arconfetti icon
@@ -52,9 +53,9 @@ export async function calculateReward({ reward }: Transaction) {
   if (multiplier === 1) return reward;
 
   // calculate fee with multiplier
-  const fee = +reward * multiplier;
+  const fee = BigNumber(reward).multipliedBy(multiplier);
 
-  return fee.toFixed(0);
+  return fee.toFixed(0, BigNumber.ROUND_FLOOR);
 }
 
 /**
@@ -66,7 +67,7 @@ export async function calculateReward({ reward }: Transaction) {
  * @param type Signed transaction type
  */
 export async function signNotification(
-  price: number,
+  price: number | BigNumber,
   id: string,
   appURL: string,
   type: "sign" | "dispatch" = "sign"
@@ -87,18 +88,16 @@ export async function signNotification(
   const arweave = new Arweave(gateway);
 
   // calculate price in AR
-  const arPrice = parseFloat(arweave.ar.winstonToAr(price.toString()));
+  const arPrice = BigNumber(arweave.ar.winstonToAr(price.toString()));
 
   // format price
   let maximumFractionDigits = 0;
 
-  if (arPrice < 0.1) maximumFractionDigits = 6;
-  else if (arPrice < 10) maximumFractionDigits = 4;
-  else if (arPrice < 1000) maximumFractionDigits = 2;
+  if (arPrice.lt(0.1)) maximumFractionDigits = 6;
+  else if (arPrice.lt(10)) maximumFractionDigits = 4;
+  else if (arPrice.lt(1000)) maximumFractionDigits = 2;
 
-  const formattedPrice = arPrice.toLocaleString(undefined, {
-    maximumFractionDigits
-  });
+  const formattedPrice = arPrice.toFormat(maximumFractionDigits);
 
   // give an ID to the notification
   const notificationID = nanoid();

src/api/modules/sign_data_item/sign_data_item.background.ts

@@ -14,6 +14,7 @@ import browser from "webextension-polyfill";
 import { signAuth } from "../sign/sign_auth";
 import Arweave from "arweave";
 import authenticate from "../connect/auth";
+import BigNumber from "bignumber.js";
 
 const background: ModuleFunction<number[]> = async (
   appData,
@@ -34,6 +35,19 @@ const background: ModuleFunction<number[]> = async (
       (tag) => tag.name === "Data-Protocol" && tag.value === "ao"
     )
   ) {
+    try {
+      const tags = dataItem?.tags || [];
+      const quantityTag = tags.find((tag) => tag.name === "Quantity");
+      if (quantityTag) {
+        const quantity = BigNumber(quantityTag.value).toFixed(
+          0,
+          BigNumber.ROUND_FLOOR
+        );
+        if (!isNaN(+quantity)) {
+          quantityTag.value = quantity;
+        }
+      }
+    } catch {}
     try {
       await authenticate({
         type: "signDataItem",

src/applications/allowance.ts

@@ -1,11 +1,19 @@
+import type BigNumber from "bignumber.js";
+
 export interface Allowance {
   enabled: boolean;
-  limit: number; // in winstons
-  spent: number; // in winstons
+  limit: string; // in winstons
+  spent: string; // in winstons
+}
+
+export interface AllowanceBigNumber {
+  enabled: boolean;
+  limit: BigNumber; // in winstons
+  spent: BigNumber; // in winstons
 }
 
 export const defaultAllowance: Allowance = {
   enabled: true,
-  limit: 1000000000000,
-  spent: 0
+  limit: "1000000000000",
+  spent: "0"
 };

src/applications/application.ts

@@ -1,9 +1,14 @@
 import { getMissingPermissions, type PermissionType } from "./permissions";
-import { type Allowance, defaultAllowance } from "./allowance";
+import {
+  type Allowance,
+  type AllowanceBigNumber,
+  defaultAllowance
+} from "./allowance";
 import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
 import type { Storage } from "@plasmohq/storage";
-import { defaultGateway, Gateway } from "~gateways/gateway";
+import { defaultGateway, type Gateway } from "~gateways/gateway";
+import BigNumber from "bignumber.js";
 
 export const PREFIX = "app_";
 export const defaultBundler = "https://turbo.ardrive.io";
@@ -135,10 +140,15 @@ export default class Application {
   /**
    * Allowance limit and spent qty
    */
-  async getAllowance(): Promise<Allowance> {
+  async getAllowance(): Promise<AllowanceBigNumber> {
     const settings = await this.#getSettings();
 
-    return settings.allowance || defaultAllowance;
+    const allowance = settings.allowance || defaultAllowance;
+    return {
+      enabled: allowance.enabled,
+      limit: BigNumber(allowance.limit),
+      spent: BigNumber(allowance.spent)
+    };
   }
 
   /**

src/components/auth/App.tsx

@@ -4,7 +4,7 @@ import {
   Spacer,
   Text
 } from "@arconnect/components";
-import { defaultGateway, Gateway } from "~gateways/gateway";
+import { defaultGateway, type Gateway } from "~gateways/gateway";
 import { useTheme as useDisplayTheme } from "~utils/theme";
 import type { Allowance } from "~applications/allowance";
 import { formatTokenBalance } from "~tokens/currency";
@@ -15,6 +15,7 @@ import browser from "webextension-polyfill";
 import Arweave from "arweave";
 import styled from "styled-components";
 import Label from "./Label";
+import { Quantity } from "ao-tokens";
 
 export default function App({
   appIcon,
@@ -25,23 +26,23 @@ export default function App({
 }: Props) {
   // allowance spent in AR
   const spent = useMemo(() => {
-    if (!allowance) return 0;
+    if (!allowance) return new Quantity("0");
 
     return winstonToArFormatted(allowance.spent);
   }, [allowance]);
 
   // allowance limit in AR
   const limit = useMemo(() => {
-    if (!allowance) return 0;
+    if (!allowance) return new Quantity("0");
 
     return winstonToArFormatted(allowance.limit);
   }, [allowance]);
 
-  function winstonToArFormatted(val: number) {
+  function winstonToArFormatted(val: string) {
     const arweave = new Arweave(defaultGateway);
     const arVal = arweave.ar.winstonToAr(val.toString());
 
-    return parseFloat(arVal);
+    return new Quantity("0", 20n).fromString(arVal);
   }
 
   // display theme