Merge pull request #449 from arconnectio/development

ArConnect BETA 1.18.0

assets/_locales/en/messages.json

@@ -159,6 +159,10 @@
     "message": "Invalid password",
     "description": "Invalid password error"
   },
+  "invalid_qty_error": {
+    "message": "0.001 is the lowest amount. Please change your limit to a higher amount",
+    "description": "Warning message for setting a limit too low"
+  },
   "testnetLive": {
     "message": "Testnet is live",
     "description": "Testnet live message"
@@ -307,6 +311,14 @@
     "message": "Permissions",
     "description": "Permissions title"
   },
+  "edit_permissions": {
+    "message": "Edit permissions",
+    "description": "Edit permissions title"
+  },
+  "app_permissions": {
+    "message": "App permissions",
+    "description": "App permissions title"
+  },
   "allowance": {
     "message": "Allowance",
     "description": "Allowance title"
@@ -957,9 +969,31 @@
     "message": "Connect",
     "description": "Connect button text"
   },
+  "always_allow": {
+    "message": "Always allow",
+    "description": "Always allow button"
+  },
+  "always_ask_permission": {
+    "message": "Always ask permission",
+    "description": "Always allow button"
+  },
+  "always_ask_tooltip":{
+    "message": "Always ask for confirmation before any interaction",
+    "description": "Always allow tooltip"
+  },
+  "allow_selected_permissions": {
+    "message": "Allow selected permissions",
+    "description": "Always allow button"
+  },
   "allow_these_permissions": {
-    "message": "Allow these permissions for the application:",
-    "description": "Auth permissions label"
+    "message": "$APPNAME$ wants to connect to your wallet with the following permissions",
+    "description": "Auth permissions label",
+    "placeholders": {
+      "appname": {
+        "content": "$1",
+        "example": "permafacts.arweave.dev"
+      }
+    }
   },
   "reset_allowance": {
     "message": "Reset allowance",

assets/_locales/zh_CN/messages.json

@@ -307,6 +307,14 @@
       "message": "权限",
       "description": "Permissions title"
   },
+  "edit_permissions": {
+    "message": "编辑权限",
+    "description": "Edit permissions title"
+  },
+  "app_permissions": {
+    "message": "应用权限",
+    "description": "App permissions title"
+  },
   "allowance": {
       "message": "额度",
       "description": "Allowance title"
@@ -953,9 +961,27 @@
       "message": "连接",
       "description": "Connect button text"
   },
+  "always_allow": {
+    "message": "始终允许",
+    "description": "Always allow button"
+  },
+  "always_ask_permission": {
+    "message": "始终询问权限",
+    "description": "Always allow button"
+  },
+  "allow_selected_permissions": {
+    "message": "允许选择的权限",
+    "description": "Always allow button"
+  },
   "allow_these_permissions": {
-      "message": "允许这些权限给应用程序：",
-      "description": "Auth permissions label"
+      "message": "$APPNAME$ 想要使用以下权限连接到您的钱包",
+      "description": "Auth permissions label",
+      "placeholders": {
+        "appname": {
+          "content": "$1",
+          "example": "permafacts.arweave.dev"
+        }
+      }
   },
   "reset_allowance": {
       "message": "重置额度",

src/api/modules/dispatch/allowance.ts

@@ -18,16 +18,14 @@ export async function ensureAllowanceDispatch(
   appData: ModuleAppData,
   allowance: AllowanceBigNumber,
   keyfile: JWKInterface,
-  price: number | BigNumber
+  price: number | BigNumber,
+  alwaysAsk?: boolean
 ) {
   const arweave = new Arweave(defaultGateway);
 
   // allowance or sign auth
   try {
-    if (allowance.enabled) {
-      await allowanceAuth(allowance, appData.appURL, price);
-    } else {
-      // get address
+    if (alwaysAsk) {
       const address = await arweave.wallets.jwkToAddress(keyfile);
 
       await signAuth(
@@ -37,8 +35,13 @@ export async function ensureAllowanceDispatch(
         address
       );
     }
+
+    if (allowance.enabled) {
+      await allowanceAuth(allowance, appData.appURL, price, alwaysAsk);
+    }
   } catch (e) {
     freeDecryptedWallet(keyfile);
     throw new Error(e?.message || e);
   }
+  return;
 }

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

@@ -81,6 +81,9 @@ const background: ModuleFunction<ReturnType> = async (
   // get allowance
   const allowance = await app.getAllowance();
 
+  // always ask
+  const alwaysAsk = allowance.enabled && allowance.limit.eq(BigNumber("0"));
+
   // attempt to create a bundle
   try {
     // create bundlr tx as a data entry
@@ -95,7 +98,8 @@ const background: ModuleFunction<ReturnType> = async (
       appData,
       allowance,
       decryptedWallet.keyfile,
-      price
+      price,
+      alwaysAsk
     );
 
     // sign and upload bundler tx
@@ -133,7 +137,8 @@ const background: ModuleFunction<ReturnType> = async (
       appData,
       allowance,
       decryptedWallet.keyfile,
-      price
+      price,
+      alwaysAsk
     );
 
     // sign and upload

src/api/modules/sign/allowance.ts

@@ -61,16 +61,17 @@ export async function updateAllowance(
 export async function allowanceAuth(
   allowance: AllowanceBigNumber,
   tabURL: string,
-  price: number | BigNumber
+  price: number | BigNumber,
+  override: boolean = false
 ) {
   // spent amount after this transaction
   const total = allowance.spent.plus(price);
 
   // check if the price goes over the allowed total limit
   const hasEnoughAllowance = total.lte(allowance.limit);
 
-  // if the allowance is enough, return
-  if (hasEnoughAllowance) return;
+  // if the allowance is enough or override is true, return
+  if (hasEnoughAllowance || override) return;
 
   // try to authenticate to raise the allowance amount
   await authenticate({

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

@@ -89,19 +89,13 @@ const background: ModuleFunction<BackgroundResult> = async (
   // get allowance
   const allowance = await getAllowance(appData.appURL);
 
-  // check if there is an allowance limit
-  // if there isn't, we need to ask the user
-  // to manually confirm the transaction
-  if (allowance.enabled && activeWallet.type === "local") {
-    // authenticate user if the allowance
-    // limit is reached
-    try {
-      await allowanceAuth(allowance, appData.appURL, price);
-    } catch (e) {
-      freeDecryptedWallet(keyfile);
-      throw new Error(e?.message || e);
-    }
-  } else {
+  // always ask
+  const alwaysAsk = allowance.enabled && allowance.limit.eq(BigNumber("0"));
+
+  // check if there is an allowance limit, if there is we need to check allowance
+  // if alwaysAsk is true, then we'll need to signAuth popup
+  // if allowance is disabled, proceed with signing
+  if (alwaysAsk) {
     // get address of keyfile
     const addr =
       activeWallet.type === "local"
@@ -126,6 +120,15 @@ const background: ModuleFunction<BackgroundResult> = async (
 
       throw new Error("User failed to sign the transaction manually");
     }
+  } else if (allowance.enabled && activeWallet.type === "local") {
+    // authenticate user if the allowance
+    // limit is reached
+    try {
+      await allowanceAuth(allowance, appData.appURL, price, alwaysAsk);
+    } catch (e) {
+      freeDecryptedWallet(keyfile);
+      throw new Error(e?.message || e);
+    }
   }
 
   // sign the transaction if local wallet

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

@@ -33,6 +33,10 @@ const background: ModuleFunction<number[]> = async (
     throw new Error(err);
   }
 
+  const app = new Application(appData.appURL);
+  const allowance = await app.getAllowance();
+  const alwaysAsk = allowance.enabled && allowance.limit.eq(BigNumber("0"));
+
   if (
     dataItem.tags?.some(
       (tag) => tag.name === "Action" && tag.value === "Transfer"
@@ -76,7 +80,6 @@ const background: ModuleFunction<number[]> = async (
   });
 
   // create app
-  const app = new Application(appData.appURL);
 
   // create arweave client
   const arweave = new Arweave(await app.getGatewayConfig());
@@ -92,11 +95,11 @@ const background: ModuleFunction<number[]> = async (
 
     // check allowance
     // const price = await getPrice(dataEntry, await app.getBundler());
-    const allowance = await app.getAllowance();
+    // we are no longer checking for allowance on this page
 
     // allowance or sign auth
     try {
-      if (!allowance.enabled) {
+      if (alwaysAsk) {
         // get address
         const address = await arweave.wallets.jwkToAddress(
           decryptedWallet.keyfile

src/components/Checkbox.tsx

@@ -1,4 +1,10 @@
-import { useEffect, useMemo, useState, type HTMLProps } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type HTMLProps
+} from "react";
 import styled from "styled-components";
 
 export const Checkbox = ({
@@ -10,18 +16,15 @@ export const Checkbox = ({
   const [state, setState] = useState(checked);
   const effectiveId = useMemo(() => id || generateUniqueId(), []);
 
-  async function toggle() {
-    let newVal = state;
-
-    setState((val) => {
-      newVal = !val;
-      return newVal;
+  const toggle = useCallback(async () => {
+    setState((prevState) => {
+      const newState = !prevState;
+      if (onChange) {
+        onChange(newState);
+      }
+      return newState;
     });
-
-    if (onChange) {
-      await onChange(newVal);
-    }
-  }
+  }, [onChange]);
 
   useEffect(() => setState(checked), [checked]);
 

src/components/auth/App.tsx

@@ -2,7 +2,8 @@ import {
   type DisplayTheme,
   Section,
   Spacer,
-  Text
+  Text,
+  ListItem
 } from "@arconnect/components";
 import { defaultGateway, type Gateway } from "~gateways/gateway";
 import { useTheme as useDisplayTheme } from "~utils/theme";
@@ -22,7 +23,8 @@ export default function App({
   appName,
   appUrl,
   gateway,
-  allowance
+  allowance,
+  showTitle = true
 }: Props) {
   // allowance spent in AR
   const spent = useMemo(() => {
@@ -50,16 +52,28 @@ export default function App({
 
   return (
     <>
-      <SidePaddingSection>
-        <Label>
-          {browser.i18n.getMessage(
-            gateway ? "app_wants_to_connect" : "allowance_limit_reached"
-          )}
-        </Label>
-      </SidePaddingSection>
-      <Spacer y={0.4} />
+      {showTitle && (
+        <>
+          <SidePaddingSection>
+            <Label>
+              {browser.i18n.getMessage(
+                gateway ? "app_wants_to_connect" : "allowance_limit_reached"
+              )}
+            </Label>
+          </SidePaddingSection>
+          <Spacer y={0.4} />
+        </>
+      )}
       <SidePaddingSection size="slim">
-        <Wrapper displayTheme={theme}>
+        <ListItem
+          title={appName || appUrl}
+          img={appIcon}
+          description={`${browser.i18n.getMessage("gateway")}: ${
+            gateway?.host || ""
+          }`}
+          style={{ pointerEvents: "none" }}
+        />
+        {/* <Wrapper displayTheme={theme}>
           <AppData>
             <AppIcon img={appIcon} key={appIcon}>
               {!appIcon && <NoAppIcon />}
@@ -91,7 +105,7 @@ export default function App({
               {" AR"}
             </AllowanceSpent>
           )}
-        </Wrapper>
+        </Wrapper> */}
       </SidePaddingSection>
     </>
   );
@@ -103,12 +117,9 @@ const SidePaddingSection = styled(Section)`
 `;
 
 const Wrapper = styled.div<{ displayTheme: DisplayTheme }>`
-  background-color: rgb(
-    ${(props) =>
-      props.displayTheme === "light" ? "0, 0, 0" : props.theme.cardBackground}
-  );
-  border-radius: 27px;
-  padding: 1rem;
+  border-radius: 10px;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -164,4 +175,5 @@ interface Props {
   appUrl: string;
   gateway?: Gateway;
   allowance?: Allowance;
+  showTitle?: boolean;
 }