Teleport

package.json

@@ -4,6 +4,10 @@
   "homepage": "/",
   "private": true,
   "dependencies": {
+    "@babel/generator": "^7.22.15",
+    "@babel/parser": "^7.22.16",
+    "@babel/traverse": "^7.22.17",
+    "@babel/types": "^7.22.17",
     "@braintree/sanitize-url": "^6.0.2",
     "@keypom/core": "^1.0.2",
     "@monaco-editor/react": "^4.5.1",
@@ -15,7 +19,11 @@
     "@near-wallet-selector/near-wallet": "^8.1.0",
     "@near-wallet-selector/neth": "^8.1.0",
     "@near-wallet-selector/sender": "^8.1.0",
-    "@teleporthq/teleport-component-generator-react": "^0.40.0-alpha.0",
+    "@teleporthq/teleport-component-generator-react": "^0.30.0",
+    "@teleporthq/teleport-plugin-react-styled-components": "^0.16.0",
+    "@teleporthq/teleport-project-generator":"^0.30.0",
+    "@teleporthq/teleport-types":"^0.30.0",
+    "@teleporthq/teleport-shared":"^0.30.0",
     "@web3-onboard/core": "^2.16.2",
     "@web3-onboard/injected-wallets": "^2.8.4",
     "@web3-onboard/ledger": "^2.4.4",
@@ -25,11 +33,12 @@
     "bn.js": "^5.1.1",
     "bootstrap": "^5.2.1",
     "bootstrap-icons": "^1.9.0",
+    "browserify": "^17.0.0",
     "collections": "^5.1.12",
     "error-polyfill": "^0.1.2",
     "local-storage": "^2.0.0",
     "near-api-js": "^2.1.3",
-    "near-social-vm": "./near-social-vm-v2.2.4.tgz",
+    "near-social-vm": "./VM-2.4.0.tar.gz",
     "normalize.css": "^8.0.1",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
@@ -50,7 +59,8 @@
     "prod:analyze": "npm run prod -- --env presets=analyze",
     "build": "npm run prod",
     "start": "npm run dev",
-    "dev-widgets": "~/.cargo/bin/bos-loader every.near --path widgets"
+    "dev-widgets": "~/.cargo/bin/bos-loader every.near --path widgets",
+    "postinstall": "patch-package"
   },
   "eslintConfig": {
     "extends": [
@@ -75,7 +85,7 @@
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.4",
     "@babel/preset-react": "^7.14.5",
-    "assert": "^2.0.0",
+    "assert": "^2.1.0",
     "babel-loader": "^8.2.2",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
@@ -90,6 +100,7 @@
     "mini-css-extract-plugin": "^2.2.2",
     "node-sass": "^7.0.3",
     "os-browserify": "^0.3.0",
+    "patch-package": "^8.0.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^7.0.1",
     "process": "^0.11.10",

src/App.js

@@ -31,7 +31,7 @@ import { KeypomScanner } from "./components/custom/KeypomScanner";
 import { MonacoEditor } from "./components/custom/MonacoEditor";
 import { TeleportGenerator } from "./components/custom/TeleportGenerator";
 import { NavigationWrapper } from "./components/navigation/NavigationWrapper";
-import { useEthersProviderContext } from "./data/web3";
+// import { useEthersProviderContext } from "./data/web3";
 import { NetworkId, Widgets } from "./data/widgets";
 import { useBosLoaderInitializer } from "./hooks/useBosLoaderInitializer";
 import Flags from "./pages/Flags";
@@ -49,7 +49,7 @@ function App(props) {
   const [walletModal, setWalletModal] = useState(null);
   const [widgetSrc, setWidgetSrc] = useState(null);
 
-  const ethersProviderContext = useEthersProviderContext();
+  // const ethersProviderContext = useEthersProviderContext();
   useBosLoaderInitializer();
 
   const { initNear } = useInitNear();
@@ -187,30 +187,30 @@ function App(props) {
 
   return (
     <div className="App">
-      <EthersProviderContext.Provider value={ethersProviderContext}>
-        <Router basename={process.env.PUBLIC_URL}>
-          <Switch>
-            <Route path={"/flags"}>
-              <Flags {...passProps} />
-            </Route>
-            <Route path={"/scanner"}>
-              <NavigationWrapper {...passProps} />
-              <KeypomScanner />
-            </Route>
-            <Route path={"/create"}>
-              <ViewPage overrideSrc={passProps.widgets.create} {...passProps} />
-              <Footer {...passProps} />
-            </Route>
-            <Route path={"/:widgetSrc*"}>
-              <BosLoaderBanner />
-              {/* <NavigationWrapper {...passProps} /> */}
-              <ViewPage {...passProps} />
-              <Footer {...passProps} />
-              <ActionButton {...passProps} />
-            </Route>
-          </Switch>
-        </Router>
-      </EthersProviderContext.Provider>
+      {/* <EthersProviderContext.Provider value={ethersProviderContext}> */}
+      <Router basename={process.env.PUBLIC_URL}>
+        <Switch>
+          <Route path={"/flags"}>
+            <Flags {...passProps} />
+          </Route>
+          <Route path={"/scanner"}>
+            <NavigationWrapper {...passProps} />
+            <KeypomScanner />
+          </Route>
+          <Route path={"/create"}>
+            <ViewPage overrideSrc={passProps.widgets.create} {...passProps} />
+            <Footer {...passProps} />
+          </Route>
+          <Route path={"/:widgetSrc*"}>
+            <BosLoaderBanner />
+            {/* <NavigationWrapper {...passProps} /> */}
+            <ViewPage {...passProps} />
+            <Footer {...passProps} />
+            <ActionButton {...passProps} />
+          </Route>
+        </Switch>
+      </Router>
+      {/* </EthersProviderContext.Provider> */}
     </div>
   );
 }

src/components/custom/BOS-mapping.json

@@ -0,0 +1,90 @@
+{
+  "elements": {
+    "container": {
+      "elementType": "div"
+    },
+    "group": {
+      "elementType": "div"
+    },
+    "text": {
+      "elementType": "span"
+    },
+    "linebreak": {
+      "elementType": "br",
+      "selfClosing": true
+    },
+
+    "nav": {
+      "elementType": "div",
+      "dependency": {
+        "type": "package",
+        "path": "dangerous-html",
+        "version": "0.1.13",
+        "meta": {
+          "importJustPath": true
+        }
+      }
+    },
+
+    "video": {
+      "elementType": "div",
+      "dependency": {
+        "type": "package",
+        "path": "dangerous-html",
+        "version": "0.1.13",
+        "meta": {
+          "importJustPath": true
+        }
+      }
+    },
+    "source": {
+      "elementType": "div",
+      "dependency": {
+        "type": "package",
+        "path": "dangerous-html",
+        "version": "0.1.13",
+        "meta": {
+          "importJustPath": true
+        }
+      }
+    },
+    "form": {
+      "elementType": "div",
+      "dependency": {
+        "type": "package",
+        "path": "dangerous-html",
+        "version": "0.1.13",
+        "meta": {
+          "importJustPath": true
+        }
+      }
+    },
+    "html-node": {
+      "elementType": "dangerous-html",
+      "dependency": {
+        "type": "package",
+        "path": "dangerous-html",
+        "version": "0.1.13",
+        "meta": {
+          "importJustPath": true
+        }
+      }
+    },
+    "lottie-node": {
+      "elementType": "lottie-player",
+      "dependency": {
+        "type": "package",
+        "path": "@lottiefiles/lottie-player",
+        "version": "1.6.0",
+        "meta": {
+          "importJustPath": true
+        }
+      }
+    }
+
+  },
+  "events": {},
+  "attributes": {},
+  "illegalClassNames": ["", "Component"],
+  "illegalPropNames": ["", "this","prop", "props", "state", "window", "document"]
+}

src/components/custom/TeleportGenerator.js

@@ -1,10 +1,28 @@
-import { createReactComponentGenerator } from "@teleporthq/teleport-component-generator-react";
 import React from "react";
+import { createReactComponentGenerator } from "@teleporthq/teleport-component-generator-react";
+import styledComponents from "@teleporthq/teleport-plugin-react-styled-components";
+import Mapping from "./BOS-mapping.json";
+import astModifierPlugin from "./astModifierPlugin";
 
 export const TeleportGenerator = (props) => {
-  async function generate() {
+  async function generateReact() {
+    try {
+      const generator = createReactComponentGenerator();
+      const uidl = props.getUIDL();
+      const { files } = await generator.generateComponent(JSON.parse(uidl));
+      props.onGenerate({ code: files[0].content });
+    } catch (e) {
+      props.onGenerate({ error: e.message });
+      console.error("error while generating component from uidl: " + e);
+    }
+  }
+
+  async function generateBOS() {
     try {
       const generator = createReactComponentGenerator();
+      generator.addPlugin(styledComponents);
+      generator.addMapping(Mapping);
+      generator.addPlugin(astModifierPlugin);
       const uidl = props.getUIDL();
       const { files } = await generator.generateComponent(JSON.parse(uidl));
       props.onGenerate({ code: files[0].content });
@@ -14,5 +32,7 @@ export const TeleportGenerator = (props) => {
     }
   }
 
-  return <button onClick={generate}>Generate</button>;
+  // async function generateBOSproject() {}
+
+  return <button onClick={generateBOS}>Generate</button>;
 };

src/components/custom/astModifierPlugin.js

@@ -0,0 +1,52 @@
+import React from "react";
+import * as types from "@babel/types";
+import { UIDLUtils } from "@teleporthq/teleport-shared";
+
+const IGNORE_CHUNKS = [
+  "component-types-of-props",
+  "import-lib",
+  "import-pack",
+  "import-local",
+  "export",
+];
+
+const astModifierPlugin = async (structure) => {
+  const { chunks, uidl, options } = structure;
+  const componentChunk = chunks.find((chunk) => chunk.name === "jsx-component");
+
+  UIDLUtils.traverseElements(uidl.node, (element) => {
+    if (element.elementType === "img" && element.key === "image") {
+      const imageJSXNode = componentChunk.meta.nodesLookup[element.key];
+      imageJSXNode.openingElement.name.name = "ImageWrapper";
+      imageJSXNode.closingElement.name.name = "ImageWrapper";
+    }
+  });
+
+  const newChunks = chunks.filter((chunk) => {
+    if (IGNORE_CHUNKS.includes(chunk.name)) {
+      return;
+    }
+
+    if (chunk.name === "component-default-props") {
+      chunk.content.expression.left = types.identifier("props");
+      chunk.linkAfter = [];
+    }
+
+    if (chunk.name === "jsx-component") {
+      chunk.content = chunk.content.declarations[0].init.body.body;
+      chunk.linkAfter = ["component-default-props"];
+    }
+
+    if (chunk.name === "Image") {
+      chunk.name = "ImageWrapper";
+      chunk.content.declarations[0].id.name = "ImageWrapper";
+    }
+
+    return chunk;
+  });
+
+  structure.chunks = newChunks.reverse();
+  return structure;
+};
+
+export default astModifierPlugin;