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

.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+npm-debug.log
+
+yarn-debug.log*
+yarn-error.log*

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20.15-alpine as build
+WORKDIR /app
+COPY package.json ./
+COPY yarn.lock ./
+RUN yarn
+COPY . .
+RUN yarn build
+
+FROM nginx:1.11.13-alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

functions/common.js

@@ -61,7 +61,7 @@ export async function socialGet(keys, blockHeight, parse) {
 }
 
 export async function viewCall({ contractId, method, args }) {
-  const res = await fetch("https://rpc.mainnet.near.org", {
+  const res = await fetch("https://mainnet.near.dapplets.org", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

package.json

@@ -27,8 +27,9 @@
     "dompurify": "^3.0.6",
     "error-polyfill": "^0.1.2",
     "local-storage": "^2.0.0",
+    "mutable-web-engine": "github:dapplets/mutable-web-engine",
     "near-api-js": "^2.1.3",
-    "near-social-vm": "git+https://github.com/NearSocial/VM.git#2.6.1",
+    "near-social-vm": "github:dapplets/near-social-vm",
     "near-social-vm-types": "^1.0.0",
     "prettier": "^2.7.1",
     "qrcode.react": "^3.1.0",

src/App.js

@@ -32,6 +32,10 @@ import { NetworkId, Widgets } from "./data/widgets";
 import { useEthersProviderContext } from "./data/web3";
 import SignInPage from "./pages/SignInPage";
 import { isValidAttribute } from "dompurify";
+import { Engine, customElements } from "mutable-web-engine";
+import { MutableWebProvider } from "./contexts/mutable-web-context";
+import MutableOverlayContainer from "./components/navigation/MutableOverlayContainer";
+import { useMatomoAnalytics } from "./hooks/useMatomoAnalytics";
 
 export const refreshAllowanceObj = {};
 const documentationHref = "https://social.near-docs.io/";
@@ -41,7 +45,7 @@ const getNetworkPreset = (networkId) => {
     case "mainnet":
       return {
         networkId,
-        nodeUrl: "https://rpc.mainnet.near.org",
+        nodeUrl: "https://mainnet.near.dapplets.org",
         helperUrl: "https://helper.mainnet.near.org",
         explorerUrl: "https://nearblocks.io",
         indexerUrl: "https://api.kitwallet.app",
@@ -65,6 +69,7 @@ function App(props) {
   const [signedAccountId, setSignedAccountId] = useState(null);
   const [availableStorage, setAvailableStorage] = useState(null);
   const [walletModal, setWalletModal] = useState(null);
+  const [mutationEngine, setMutationEngine] = useState(null);
   const [widgetSrc, setWidgetSrc] = useState(null);
 
   const ethersProviderContext = useEthersProviderContext();
@@ -77,13 +82,18 @@ function App(props) {
   const injectedConfig = window?.InjectedConfig;
 
   useEffect(() => {
-    const features = {};
+    const features = {
+      enableComponentPropsDataKey: true,
+      enableComponentSrcDataKey: true,
+      skipTxConfirmationPopup: true,
+    };
+
     const rpcUrl =
       injectedConfig?.rpcUrl ??
       (window.location.hostname === "near.social"
         ? "https://rpc.fastnear.com"
         : NetworkId === "mainnet"
-        ? "https://free.rpc.fastnear.com"
+        ? "https://mainnet.near.dapplets.org"
         : "https://rpc.testnet.near.org");
     if (injectedConfig?.skipConfirmations) {
       features.commitModalBypass = {
@@ -127,6 +137,7 @@ function App(props) {
           }
           return <Link {...props} />;
         },
+        ...customElements,
       },
       config: {
         defaultFinality: undefined,
@@ -149,6 +160,30 @@ function App(props) {
     });
   }, [near]);
 
+  useEffect(() => {
+    if (!near) {
+      return;
+    }
+    near.selector.then((selector) => {
+      const engine = new Engine({
+        networkId: NetworkId,
+        selector: selector,
+        gatewayId: "near-social",
+        bosElementStyleSrc: "/bootstrap.min.css",
+      });
+
+      const mutationId = window.sessionStorage.getItem("mutableweb:mutationId");
+
+      if (!mutationId) {
+        engine.start().then(() => setMutationEngine(engine));
+      } else if (mutationId !== "null") {
+        engine.start(mutationId).then(() => setMutationEngine(engine));
+      } else {
+        setMutationEngine(engine);
+      }
+    });
+  }, [near]);
+
   const requestSignIn = useCallback(
     (e) => {
       e && e.preventDefault();
@@ -195,6 +230,12 @@ function App(props) {
     );
   }, [account]);
 
+  // Mutable Web
+  useMatomoAnalytics({
+    matomoUrl: "https://mtmo.mooo.com",
+    siteId: 4,
+  });
+
   const passProps = {
     refreshAllowance: () => refreshAllowance(),
     setWidgetSrc,
@@ -207,30 +248,34 @@ function App(props) {
     requestSignIn,
     widgets: Widgets,
     documentationHref,
+    mutationEngine,
   };
 
   return (
     <div className="App">
       <EthersProviderContext.Provider value={ethersProviderContext}>
-        <Router basename={process.env.PUBLIC_URL}>
-          <Switch>
-            <Route path={"/signin"}>
-              <NavigationWrapper {...passProps} />
-              <SignInPage {...passProps} />
-            </Route>
-            <Route path={"/embed/:widgetSrc*"}>
-              <EmbedPage {...passProps} />
-            </Route>
-            <Route path={"/edit/:widgetSrc*"}>
-              <NavigationWrapper {...passProps} />
-              <EditorPage {...passProps} />
-            </Route>
-            <Route path={"/:widgetSrc*"}>
-              <NavigationWrapper {...passProps} />
-              <ViewPage {...passProps} />
-            </Route>
-          </Switch>
-        </Router>
+        <MutableWebProvider engine={mutationEngine}>
+          <Router basename={process.env.PUBLIC_URL}>
+            <Switch>
+              <Route path={"/signin"}>
+                <NavigationWrapper {...passProps} />
+                <SignInPage {...passProps} />
+              </Route>
+              <Route path={"/embed/:widgetSrc*"}>
+                <EmbedPage {...passProps} />
+              </Route>
+              <Route path={"/edit/:widgetSrc*"}>
+                <NavigationWrapper {...passProps} />
+                <EditorPage {...passProps} />
+              </Route>
+              <Route path={"/:widgetSrc*"}>
+                <NavigationWrapper {...passProps} />
+                <ViewPage {...passProps} />
+              </Route>
+            </Switch>
+          </Router>
+          <MutableOverlayContainer />
+        </MutableWebProvider>
       </EthersProviderContext.Provider>
     </div>
   );

src/components/icons/Arrow.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export function Arrow() {
+  return (
+    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1 1L7 7L13 1"
+        stroke="#C1C6CE"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

src/components/icons/Back.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export function Back() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0.75 3V7.5H5.25"
+        stroke="#3D7FFF"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.6325 11.25C3.1188 12.6302 4.0405 13.8151 5.25874 14.626C6.47698 15.4369 7.92576 15.8299 9.38679 15.7458C10.8478 15.6617 12.2419 15.1051 13.3591 14.1598C14.4763 13.2145 15.2559 11.9317 15.5807 10.5047C15.9054 9.07777 15.7576 7.58393 15.1595 6.24829C14.5614 4.91264 13.5454 3.80756 12.2646 3.09953C10.9839 2.39151 9.50768 2.11891 8.05851 2.3228C6.60934 2.52669 5.26568 3.19603 4.23 4.22996L0.75 7.49996"
+        stroke="#3D7FFF"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

src/components/navigation/MutableOverlayContainer.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { MiniOverlay, AppSwitcher } from "mutable-web-engine";
+import {
+  useMutableWeb,
+  useMutationApp,
+} from "../../contexts/mutable-web-context";
+
+function AppSwitcherContainer({ app }) {
+  const { enableApp, disableApp, isLoading } = useMutationApp(app.id);
+  return (
+    <AppSwitcher
+      app={app}
+      enableApp={enableApp}
+      disableApp={disableApp}
+      isLoading={isLoading}
+    />
+  );
+}
+
+function MutableOverlayContainer() {
+  const { selectedMutation, mutationApps } = useMutableWeb();
+  return (
+    <MiniOverlay baseMutation={selectedMutation} mutationApps={mutationApps}>
+      {mutationApps.map((app) => (
+        <AppSwitcherContainer key={app.id} app={app} />
+      ))}
+    </MiniOverlay>
+  );
+}
+export default MutableOverlayContainer;

src/components/navigation/desktop/DesktopNavigation.js

@@ -8,6 +8,7 @@ import { SignInButton } from "../SignInButton";
 import { UserDropdown } from "./UserDropdown";
 import { DevActionsDropdown } from "./DevActionsDropdown";
 import { NotificationWidget } from "../NotificationWidget";
+import { MutationDropdown } from "./MutationDropdown";
 import { StarButton } from "../StarButton";
 
 const StyledNavigation = styled.div`
@@ -27,7 +28,7 @@ const StyledNavigation = styled.div`
     }
   }
 
-  .container {
+  .container-xl {
     display: flex;
     align-items: center;
 
@@ -58,13 +59,20 @@ const StyledNavigation = styled.div`
     .arrow-up-right {
       margin-left: 4px;
     }
+
+    .mutable-section {
+      margin-left: auto;
+      transform: translate(-16px);
+      flex: 1;
+      max-width: 292px;
+    }
   }
 `;
 
 export function DesktopNavigation(props) {
   return (
     <StyledNavigation>
-      <div className="container">
+      <div className="container-xl">
         <Link
           to="/"
           className="logo-link"
@@ -82,6 +90,9 @@ export function DesktopNavigation(props) {
             <ArrowUpRight />
           </NavigationButton>
         </div>
+        <div className="mutable-section">
+          <MutationDropdown imageSrc={props.widgets.image} />
+        </div>
         <div className="user-section">
           <StarButton {...props} />
           <DevActionsDropdown {...props} />