[Rel. 1] Mutable Web. B.O.S-VM patch

package.json

@@ -55,14 +55,13 @@
     "react-bootstrap": "^2.5.0",
     "react-bootstrap-typeahead": "^6.0.0",
     "react-error-boundary": "^3.1.4",
-    "react-files": "^3.0.0-alpha.3",
+    "react-files": "^3.0.1",
     "react-infinite-scroller": "^1.2.6",
-    "react-markdown": "^7.1.0",
-    "react-singleton-hook": "^3.1.1",
+    "react-markdown": "^9.0.1",
+    "react-singleton-hook": "^4.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-uuid": "^1.0.2",
     "remark-gfm": "^3.0.1",
-    "styled-components": "^5.3.6",
     "tweetnacl": "^1.0.3"
   },
   "devDependencies": {
@@ -101,7 +100,8 @@
   "peerDependencies": {
     "near-api-js": "2.1.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.6"
   },
   "scripts": {
     "webpack": "webpack",

src/lib/components/Markdown.js

@@ -18,7 +18,6 @@ export const Markdown = (props) => {
   } = props;
   return (
     <ReactMarkdown
-      plugins={[]}
       rehypePlugins={[]}
       remarkPlugins={[gfm, mentions, hashtags]}
       children={text}

src/lib/components/Widget.js

@@ -135,8 +135,13 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
         deposit: t.deposit ? Big(t.deposit) : Big(0),
         gas: t.gas ? Big(t.gas) : TGas.mul(30),
       }));
-      console.log("confirm txs", transactions);
-      setTransactions(transactions);
+
+      if (near.features.skipTxConfirmationPopup) {
+        near.sendTransactions(transactions);
+      } else {
+        console.log("confirm txs", transactions);
+        setTransactions(transactions);
+      }
     },
     [near]
   );
@@ -157,6 +162,7 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
       return;
     }
     setReactState({ hooks: [], state: undefined });
+
     const vm = new VM({
       near,
       rawCode: code,
@@ -204,6 +210,7 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
     if (!vm) {
       return;
     }
+
     const vmInput = {
       props: propsProps || {},
       context,

src/lib/data/account.js

@@ -33,6 +33,13 @@ async function updateAccount(near, walletState) {
   near.accountId = walletState?.accounts?.[0]?.accountId ?? null;
   if (near.accountId) {
     near.publicKey = null;
+
+    // Mutable Web Extension doesn't store keys in the local storage
+    // ToDo: parametrize key storage and pass internal extension storage to the VM 
+    if (walletState?.selectedWalletId === "mutable-web-extension") {
+      return;
+    }
+
     try {
       if (walletState?.selectedWalletId === "here-wallet") {
         const hereKeystore = ls.get("herewallet:keystore");

src/lib/data/near.js

@@ -331,7 +331,9 @@ async function web4ViewCall(contractId, methodName, args, fallback) {
 /**
  * Current VM Features:
  * - enableComponentSrcDataKey: Allows enabling the component source `data-component` attribute for rendered DOM elements. Disabled by default.
- **/
+ * - enableComponentPropsDataKey: Allows enabling the component props `data-props` attribute for rendered DOM elements. Disabled by default.
+ * - skipTxConfirmationPopup: Disables pop-ups that require the user to confirm each transaction. Disabled by default.
+ */
 async function _initNear({
   networkId,
   config,

src/lib/vm/vm.js

@@ -522,11 +522,9 @@ class VmStack {
         : requireJSXIdentifierOrMemberExpression(code.openingElement.name);
     let withChildren = ApprovedTags[element];
     let customElement = null;
-    if (withChildren === undefined) {
-      if (this.vm.near.config.customElements.hasOwnProperty(element)) {
-        withChildren = true;
-        customElement = this.vm.near.config.customElements[element];
-      }
+    if (this.vm.near.config.customElements.hasOwnProperty(element)) {
+      withChildren = true;
+      customElement = this.vm.near.config.customElements[element];
     }
     const RadixComp = assertRadixComponent(element);
 
@@ -649,11 +647,6 @@ class VmStack {
     attributes.key =
       attributes.key ?? `${this.vm.widgetSrc}-${element}-${this.vm.gIndex}`;
 
-    if (this.vm.near?.features?.enableComponentSrcDataKey == true) {
-      attributes["data-component"] =
-        attributes["data-component"] ?? this.vm.widgetSrc;
-    }
-
     delete attributes.dangerouslySetInnerHTML;
     delete attributes.is;
     const basicElement =
@@ -2303,7 +2296,17 @@ export default class VM {
       return <div className="alert alert-danger">{message}</div>;
     }
 
-    const result = this.execCode(args);
+    let result = this.execCode(args);
+
+    if (this.near.features?.enableComponentPropsDataKey && isReactObject(result)) {
+      result = { ...result };
+      result.props = { ...result.props, "data-props": JSON.stringify(args.props) };
+    }
+
+    if (this.near.features?.enableComponentSrcDataKey && isReactObject(result)) {
+      result = { ...result };
+      result.props = { ...result.props, "data-component": this.widgetSrc };
+    }
 
     return isReactObject(result) ||
       typeof result === "string" ||

webpack.config.js

@@ -33,6 +33,12 @@ module.exports = function (env) {
             amd: "react-dom",
             root: "ReactDOM",
           },
+          "styled-components": {
+            commonjs: "styled-components",
+            commonjs2: "styled-components",
+            amd: "styled-components",
+            root: "StyledComponents",
+          }
         },
       ],
       module: {