feat: introduce globalState hook

src/index.js

@@ -6,7 +6,7 @@ import { useCache } from "./lib/data/cache";
 import * as utils from "./lib/data/utils";
 import { CommitButton } from "./lib/components/Commit";
 import { EthersProviderContext } from "./lib/components/ethers";
-
+import { GlobalStateContext } from "./lib/components/globalState";
 export {
   Widget,
   CommitButton,
@@ -17,4 +17,5 @@ export {
   useAccountId,
   utils,
   EthersProviderContext,
+  GlobalStateContext,
 };

src/lib/components/Widget.js

@@ -25,6 +25,7 @@ import { useAccountId } from "../data/account";
 import Big from "big.js";
 import uuid from "react-uuid";
 import { EthersProviderContext } from "./ethers";
+import { GlobalStateContext } from "./globalState";
 
 const computeSrcOrCode = (src, code, configs) => {
   let srcOrCode = src ? { src } : code ? { code } : null;
@@ -74,6 +75,7 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
   const [configs, setConfigs] = useState(null);
   const [srcOrCode, setSrcOrCode] = useState(null);
   const ethersProviderContext = useContext(EthersProviderContext);
+  const globalStateContext = useContext(GlobalStateContext);
 
   const networkId =
     configs &&
@@ -189,6 +191,7 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
       version: uuid(),
       widgetConfigs: configs,
       ethersProviderContext,
+      globalStateContext,
     });
     setVm(vm);
     return () => {
@@ -203,6 +206,7 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
     confirmTransactions,
     configs,
     ethersProviderContext,
+    globalStateContext
   ]);
 
   useEffect(() => {

src/lib/components/globalState.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const GlobalStateContext = React.createContext(null);

src/lib/vm/vm.js

@@ -175,6 +175,7 @@ const ApprovedTagsSimple = {
 const ApprovedTagsCustom = {
   Widget: false,
   CommitButton: true,
+  GlobalStateProvider: true,
   IpfsImageUpload: false,
   Markdown: false,
   Fragment: true,
@@ -621,6 +622,16 @@ class VmStack {
       );
     }
 
+    if (element === "GlobalStateProvider") {
+      if(!attributes.value) {
+        throw new Error("GlobalStateProvider requires a value prop");
+      }
+      if(!isArray(attributes.value) || attributes.value.length !== 2) {
+        throw new Error("Invalid value prop for GlobalStateProvider");
+      }
+      this.vm.globalStateContext = attributes.value;
+    }
+
     const children = code.children.map((child, i) => {
       this.vm.gIndex = i;
       return this.executeExpression(child);
@@ -995,6 +1006,18 @@ class VmStack {
           return f(...args);
         }
         return this.vm.cachedEthersCall(callee, args);
+      } else if (callee === "useGlobalState") {
+        if(args.length < 1 || !isString(args[0])) {
+          throw new Error("Method: useGlobalState. Requires string argument");
+        }
+        const [globalState, setGlobalState] = this.vm.globalStateContext
+        return [
+          globalState[args[0]], 
+          (value) => setGlobalState({
+            ...globalState,
+            [args[0]]: value,
+          })
+        ];
       } else if (keyword === "WebSocket") {
         if (callee === "WebSocket") {
           const websocket = new WebSocket(...args);
@@ -1875,6 +1898,7 @@ export default class VM {
       version,
       widgetConfigs,
       ethersProviderContext,
+      globalStateContext,
       isModule,
     } = options;
 
@@ -1931,7 +1955,7 @@ export default class VM {
     this.ethersProvider = ethersProviderContext?.provider
       ? new ethers.providers.Web3Provider(ethersProviderContext.provider)
       : null;
-
+    this.globalStateContext = globalStateContext;
     this.timeouts = new Set();
     this.intervals = new Set();
     this.websockets = [];