Merge pull request #190 from NearSocial/release-2.6.1

## 2.6.1 - Add option to bypass the commit modal and skip transaction confirmation modal for all widgets (`features.commitModalBypass.bypassAll` and `features.bypassTransactionConfirmation`). This is intended to use by the gateways that expects external wallet to confirm all transactions. ```js initNear({ features: { commitModalBypass: { bypassAll: true, }, bypassTransactionConfirmation: true, }, }); ``` - Support `Big` and `BN` during a deep copy. - Fix typo. - FIX: Addresses a scoping error on the optional `config.errorCallback` function triggerd during Compliation errors and 'VM is dead' errors. - FIX: Prevent adding `data-component` key to `<Fragment>` elements.
NearSocial · Apr 22, 2024 · 6047c6a · 6047c6a
2 parents c7346d6 + 61d4c74
commit 6047c6a
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,22 @@
 # Changelog
 
-## Pending
+## 2.6.1
 
+- Add option to bypass the commit modal and skip transaction confirmation modal for all widgets (`features.commitModalBypass.bypassAll` and `features.bypassTransactionConfirmation`). This is intended to use by the gateways that expects external wallet to confirm all transactions.
+```js
+initNear({
+  features: {
+    commitModalBypass: {
+      bypassAll: true,
+    },
+    bypassTransactionConfirmation: true,
+  },
+});
+```
 - Support `Big` and `BN` during a deep copy.
 - Fix typo.
+- FIX: Addresses a scoping error on the optional `config.errorCallback` function triggerd during Compliation errors and 'VM is dead' errors.
+- FIX: Prevent adding `data-component` key to `<Fragment>` elements.
 
 ## 2.6.0
 
@@ -47,7 +60,7 @@ initNear({
 
 ## 2.5.3
 
-- FIX: Remove `cachedPropery` from `elliptic.utils`. Reported by BrunoModificato from OtterSec. 
+- FIX: Remove `cachedPropery` from `elliptic.utils`. Reported by BrunoModificato from OtterSec.
 - FIX: Replace url-sanitize library with dompurify. Reported by BrunoModificato from OtterSec.
 - FIX: Replace internal usage of `in` operator with `hasOwnProperty` on dictionaries to avoid exposing certain built-in methods and properties. Reported by BrunoModificato from OtterSec.
 - FIX: `atob` and `btoa` are working correctly now.
@@ -82,7 +95,7 @@ return (
 - Add `onLink` and `onImage` to Markdown component. It allows to display links and images differently.
 - Expose all VM functions into the state directly, it simplifies VM readability and implementation.
 - Expose certain native objects directly into the state. It should improve access to the functions.
-- Update the way events and errors are passed to the functions. 
+- Update the way events and errors are passed to the functions.
   - For events, expose `preventDefault()` and `stopPropagation()` functions.
   NOTE: Previously, all React's `SyntheticEvent`s were getting `preventDefault()` called by default.
   - For errors, expose `message`, `name` and `type`.
@@ -233,7 +246,7 @@ if (state.sender === undefined) {
 ```jsx
 // Import widget from testnet initialized VM
 
-<Widget 
+<Widget
   config={{
     networkId: 'mainnet'
   }}

diff --git a/dist/index.js b/dist/index.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "near-social-vm",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "Near Social VM",
   "main": "dist/index.js",
   "files": [

diff --git a/src/lib/components/Commit.js b/src/lib/components/Commit.js
@@ -165,9 +165,11 @@ export const CommitModal = (props) => {
   const bypassConfig = {
     authorIds: near?.features?.commitModalBypass?.authorIds ?? [],
     sources: near?.features?.commitModalBypass?.sources ?? [],
+    bypassAll: !!(near?.features?.commitModalBypass?.bypassAll ?? false),
   };
   const [widgetSrcAccountId] = (widgetSrc ?? "").split("/");
   const matchesModalBypassConfig =
+    bypassConfig.bypassAll ||
     (!!widgetSrcAccountId &&
       bypassConfig.authorIds.indexOf(widgetSrcAccountId) > -1) ||
     (!!widgetSrc && bypassConfig.sources.indexOf(widgetSrc.split("@")[0]) > -1);

diff --git a/src/lib/components/ConfirmTransactions.js b/src/lib/components/ConfirmTransactions.js
@@ -4,7 +4,12 @@ import Alert from "react-bootstrap/Alert";
 import Toast from "react-bootstrap/Toast";
 import ToastContainer from "react-bootstrap/ToastContainer";
 import { Markdown } from "./Markdown";
-import { displayGas, displayNear, Loading, computeWritePermission } from "../data/utils";
+import {
+  displayGas,
+  displayNear,
+  Loading,
+  computeWritePermission,
+} from "../data/utils";
 import { useNear } from "../data/near";
 import { useCache } from "../data/cache";
 import { useAccountId } from "../data/account";
@@ -36,9 +41,13 @@ export default function ConfirmTransactions(props) {
   const [transactions] = useState(props.transactions);
   const [dontAskForConfirmation, setDontAskForConfirmation] = useState(null);
   const [dontAskAgainChecked, setDontAskAgainChecked] = useState(false);
-  const [dontAskAgainErrorMessage, setDontAskAgainErrorMessage] = useState(null);
+  const [dontAskAgainErrorMessage, setDontAskAgainErrorMessage] =
+    useState(null);
 
   const widgetSrc = props.widgetSrc;
+  const bypassTransactionConfirmation = !!(
+    near?.features?.bypassTransactionConfirmation ?? false
+  );
 
   const getWidgetContractPermission = async (widgetSrc, contractId) =>
     await cache.asyncLocalStorageGet(StorageDomain, {
@@ -47,17 +56,32 @@ export default function ConfirmTransactions(props) {
       type: StorageType.SendTransactionWithoutConfirmation,
     });
 
-  const eligibleForDontAskAgain = transactions[0].contractName !== near.contract.contractId && transactions.length === 1 && !(transactions[0].deposit && transactions[0].deposit.gt(0));
+  const eligibleForDontAskAgain =
+    bypassTransactionConfirmation ||
+    (transactions[0].contractName !== near.contract.contractId &&
+      transactions.length === 1 &&
+      !(transactions[0].deposit && transactions[0].deposit.gt(0)));
 
   useEffect(() => {
     (async () => {
       if (eligibleForDontAskAgain) {
         const contractId = transactions[0].contractName;
-        const isSignedIntoContract = await near.isSignedIntoContract(contractId);
+        const isSignedIntoContract = await near.isSignedIntoContract(
+          contractId
+        );
 
-        const widgetContractPermission = await getWidgetContractPermission(widgetSrc, contractId);
+        const widgetContractPermission = await getWidgetContractPermission(
+          widgetSrc,
+          contractId
+        );
 
-        const dontAskForConfirmation = !!(isSignedIntoContract && widgetContractPermission && widgetContractPermission[transactions[0].methodName]);
+        const dontAskForConfirmation =
+          bypassTransactionConfirmation ||
+          !!(
+            isSignedIntoContract &&
+            widgetContractPermission &&
+            widgetContractPermission[transactions[0].methodName]
+          );
 
         setDontAskForConfirmation(dontAskForConfirmation);
 
@@ -89,11 +113,12 @@ export default function ConfirmTransactions(props) {
     return (
       <ToastContainer position="bottom-end" className="position-fixed">
         <Toast show={show} bg="info">
-          <Toast.Header>
-            Sending transaction {Loading}
-          </Toast.Header>
+          <Toast.Header>Sending transaction {Loading}</Toast.Header>
           <Toast.Body>
-            Calling contract <span className="font-monospace">{transaction.contractName}</span> with method <span className="font-monospace">{transaction.methodName}</span>
+            Calling contract{" "}
+            <span className="font-monospace">{transaction.contractName}</span>{" "}
+            with method{" "}
+            <span className="font-monospace">{transaction.methodName}</span>
           </Toast.Body>
         </Toast>
       </ToastContainer>
@@ -119,7 +144,9 @@ export default function ConfirmTransactions(props) {
                 </div>
                 <div>
                   <span className="text-secondary">Method name: </span>
-                  <span className="font-monospace">{transaction.methodName}</span>
+                  <span className="font-monospace">
+                    {transaction.methodName}
+                  </span>
                 </div>
                 {transaction.deposit && transaction.deposit.gt(0) && (
                   <div>
@@ -138,10 +165,13 @@ export default function ConfirmTransactions(props) {
                 <Markdown text={jsonMarkdown(transaction.args)} />
               </div>
             ))}
-          {eligibleForDontAskAgain ?
+          {eligibleForDontAskAgain ? (
             <>
               <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" id="dontaskagaincheckbox"
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  id="dontaskagaincheckbox"
                   checked={dontAskAgainChecked}
                   onChange={() => dontAskAgainCheckboxChange()}
                 />
@@ -150,15 +180,18 @@ export default function ConfirmTransactions(props) {
                   <span className="font-monospace">{widgetSrc}</span>
                 </label>
               </div>
-              {dontAskAgainErrorMessage ?
+              {dontAskAgainErrorMessage ? (
                 <Alert variant="danger">
-                  There was an error when choosing "Don't ask again": {dontAskAgainErrorMessage}
+                  There was an error when choosing "Don't ask again":{" "}
+                  {dontAskAgainErrorMessage}
                 </Alert>
-                : <></>}
+              ) : (
+                <></>
+              )}
             </>
-            :
+          ) : (
             <></>
-          }
+          )}
         </Modal.Body>
         <Modal.Footer>
           <button
@@ -171,7 +204,9 @@ export default function ConfirmTransactions(props) {
                 const pendingTransaction = transactions[0];
                 const contractId = pendingTransaction.contractName;
                 const methodName = pendingTransaction.methodName;
-                const permissionObject = (await getWidgetContractPermission(widgetSrc, contractId)) || {};
+                const permissionObject =
+                  (await getWidgetContractPermission(widgetSrc, contractId)) ||
+                  {};
                 permissionObject[methodName] = true;
 
                 cache.localStorageSet(
@@ -186,9 +221,18 @@ export default function ConfirmTransactions(props) {
 
                 try {
                   if (!(await near.isSignedIntoContract(contractId))) {
-                    const results = await near.signInAndSetPendingTransaction(pendingTransaction);
+                    const results = await near.signInAndSetPendingTransaction(
+                      pendingTransaction
+                    );
                     setLoading(false);
-                    onHide(results ? results.find(result => result.transaction.receiver_id === contractId) : results);
+                    onHide(
+                      results
+                        ? results.find(
+                            (result) =>
+                              result.transaction.receiver_id === contractId
+                          )
+                        : results
+                    );
                     return;
                   }
                 } catch (e) {
@@ -212,7 +256,7 @@ export default function ConfirmTransactions(props) {
             Close
           </button>
         </Modal.Footer>
-      </Modal >
+      </Modal>
     );
   }
 }
diff --git a/src/lib/vm/vm.js b/src/lib/vm/vm.js
@@ -735,7 +735,8 @@ class VmStack {
     } else if (element === "Markdown") {
       return <Markdown {...attributes} />;
     } else if (element === "Fragment") {
-      return <React.Fragment {...attributes}>{children}</React.Fragment>;
+      const { "data-component": _, ...restAttributes } = attributes;
+      return <React.Fragment {...restAttributes}>{children}</React.Fragment>;
     } else if (element === "IpfsImageUpload") {
       return (
         <div className="d-inline-block" key={attributes.key}>
@@ -2287,7 +2288,7 @@ export default class VM {
   renderCode(args) {
     if (this.compileError) {
       const { message, stack } = this.compileError;
-      this.vm.near.config.errorCallback({scope: ErrorScopes.Compilation, message});
+      this.near.config.errorCallback({scope: ErrorScopes.Compilation, message});
       return (
         <div className="alert alert-danger">
           Compilation error:
@@ -2298,7 +2299,7 @@ export default class VM {
     }
     if (!this.alive) {
       const message = "VM is dead";
-      this.vm.near.config.errorCallback({scope: ErrorScopes.Render, message});
+      this.near.config.errorCallback({scope: ErrorScopes.Render, message});
       return <div className="alert alert-danger">{message}</div>;
     }