NEARBuilders · petersalomonsen · Jan 12, 2024 · Nov 21, 2023 · Nov 25, 2023 · Nov 25, 2023
@@ -1,5 +1,6 @@
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 const path = require("path");
 
 module.exports = () => {
@@ -67,7 +68,12 @@ module.exports = () => {
  ],
  optimization: {
  minimize: true,
- minimizer: [new CssMinimizerPlugin(), "..."],
+ minimizer: [
+ new CssMinimizerPlugin(),
+ new TerserPlugin({
+ exclude: /webcomponentapp.js/
+ })
+ ],
  runtimeChunk: {
  name: "runtime",
  },

@@ -21,7 +21,7 @@
  "error-polyfill": "^0.1.2",
  "local-storage": "^2.0.0",
  "near-api-js": "^2.1.3",
- "near-social-vm": "git+https://github.com/NearSocial/VM.git#2.5.2",
+ "near-social-vm": "git+https://github.com/NearSocial/VM.git",
  "near-social-vm-types": "^1.0.0",
  "prettier": "^2.7.1",
  "qrcode.react": "^3.1.0",
@@ -40,7 +40,9 @@
  "prod:analyze": "yarn run prod -- --env presets=analyze",
  "build": "yarn run prod",
  "start": "yarn run dev --allowed-hosts=all",
- "serve:prod": "http-server dist"
+ "serve:prod": "http-server -p 3000 dist",
+ "generateimportmap": "(cd public && jspm link index.html -o index.html)",
+ "web4:deploy": "NEAR_ENV=mainnet npx web4-deploy dist psalomobos.near --nearfs"
  },
  "eslintConfig": {
  "extends": [
@@ -78,6 +80,7 @@
  "html-webpack-plugin": "^5.3.2",
  "http-server": "^14.1.1",
  "https-browserify": "^1.0.0",
+ "jspm": "^3.1.0",
  "mini-css-extract-plugin": "^2.2.2",
  "os-browserify": "^0.3.0",
  "path-browserify": "^1.0.1",

@@ -1,12 +1,108 @@
 <!DOCTYPE html>
 <html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>Near social</title>
- </head>
- <body>
- <h1>NEAR BOS embeddable custom element</h1>
- <near-social-viewer></near-social-viewer>
- </body>
-</html>
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <base href="/" />
+ <title>Near social</title>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@near-wallet-selector/[email protected]/styles.css">
+</head>
+<body>
+ <div><button id="open-walletselector-button">Open wallet selector</button></div>
+
+ <near-social-viewer></near-social-viewer>
+</body>
+
+<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
+<script type="importmap">
+{
+ "imports": {
+ "@near-wallet-selector/core": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
+ "@near-wallet-selector/here-wallet": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
+ "@near-wallet-selector/meteor-wallet": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
+ "@near-wallet-selector/modal-ui-js": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
+ "@near-wallet-selector/my-near-wallet": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
+ "@near-wallet-selector/sender": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js"
+ },
+ "scopes": {
+ "https://ga.jspm.io/": {
+ "@here-wallet/core": "https://ga.jspm.io/npm:@here-wallet/[email protected]/build/index.js",
+ "@meteorwallet/sdk": "https://ga.jspm.io/npm:@meteorwallet/[email protected]/dist/meteor-sdk/src/index.js",
+ "@near-js/accounts": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-js/crypto": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-js/keystores": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-js/keystores-browser": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-js/providers": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-js/signers": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-js/transactions": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-js/types": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-js/utils": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-js/wallet-account": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
+ "@near-wallet-selector/wallet-utils": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
+ "ajv": "https://ga.jspm.io/npm:[email protected]/dist/dev.ajv.js",
+ "ajv-formats": "https://ga.jspm.io/npm:[email protected]/dist/index.js",
+ "ajv/dist/compile/codegen": "https://ga.jspm.io/npm:[email protected]/dist/compile/codegen/index.js",
+ "base-x": "https://ga.jspm.io/npm:[email protected]/src/index.js",
+ "bn.js": "https://ga.jspm.io/npm:[email protected]/lib/bn.js",
+ "borsh": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
+ "bs58": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "buffer": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/buffer.js",
+ "capability": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "capability/es5": "https://ga.jspm.io/npm:[email protected]/es5.js",
+ "charenc": "https://ga.jspm.io/npm:[email protected]/charenc.js",
+ "copy-to-clipboard": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "crypt": "https://ga.jspm.io/npm:[email protected]/crypt.js",
+ "crypto": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/crypto.js",
+ "decode-uri-component": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "depd": "https://ga.jspm.io/npm:[email protected]/lib/browser/index.js",
+ "dijkstrajs": "https://ga.jspm.io/npm:[email protected]/dijkstra.js",
+ "encode-utf8": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "error-polyfill": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "events": "https://ga.jspm.io/npm:[email protected]/events.js",
+ "fast-deep-equal": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "filter-obj": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "http": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/http.js",
+ "http-errors": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "https": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/https.js",
+ "inherits": "https://ga.jspm.io/npm:[email protected]/inherits_browser.js",
+ "is-mobile": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "js-sha256": "https://ga.jspm.io/npm:[email protected]/src/sha256.js",
+ "json-schema-traverse": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "mustache": "https://ga.jspm.io/npm:[email protected]/mustache.js",
+ "nanoid": "https://ga.jspm.io/npm:[email protected]/index.browser.js",
+ "near-abi": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
+ "near-api-js": "https://ga.jspm.io/npm:[email protected]/lib/browser-index.js",
+ "near-api-js/lib/providers": "https://ga.jspm.io/npm:[email protected]/lib/providers/index.js",
+ "near-api-js/lib/utils": "https://ga.jspm.io/npm:[email protected]/lib/utils/index.js",
+ "near-api-js/lib/utils/key_pair": "https://ga.jspm.io/npm:[email protected]/lib/utils/key_pair.js",
+ "near-api-js/lib/utils/serialize": "https://ga.jspm.io/npm:[email protected]/lib/utils/serialize.js",
+ "node-fetch": "https://ga.jspm.io/npm:[email protected]/browser.js",
+ "o3": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "process": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process.js",
+ "qrcode": "https://ga.jspm.io/npm:[email protected]/lib/browser.js",
+ "query-string": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "rxjs": "https://ga.jspm.io/npm:[email protected]/dist/esm5/index.js",
+ "safe-buffer": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "setprototypeof": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "sha1": "https://ga.jspm.io/npm:[email protected]/sha1.js",
+ "split-on-first": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "statuses": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
+ "strict-uri-encode": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "text-encoding-utf-8": "https://ga.jspm.io/npm:[email protected]/lib/encoding.lib.js",
+ "toggle-selection": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "toidentifier": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "tslib": "https://ga.jspm.io/npm:[email protected]/tslib.es6.mjs",
+ "tweetnacl": "https://ga.jspm.io/npm:[email protected]/nacl-fast.js",
+ "u3": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "uri-js": "https://ga.jspm.io/npm:[email protected]/dist/es5/uri.all.js",
+ "uuid4": "https://ga.jspm.io/npm:[email protected]/browser.mjs"
+ },
+ "https://ga.jspm.io/npm:[email protected]/": {
+ "depd": "https://ga.jspm.io/npm:[email protected]/lib/browser/index.js"
+ }
+ }
+}
+</script>
+ <script src="webcomponentapp.js" type="module"></script>
+</html>
@@ -0,0 +1,19 @@
+import { setupWalletSelector } from "@near-wallet-selector/core";
+import { setupModal } from "@near-wallet-selector/modal-ui-js";
+import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet";
+import { setupHereWallet } from "@near-wallet-selector/here-wallet";
+import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet";
+import { setupSender } from "@near-wallet-selector/sender";
+
+const selector = await setupWalletSelector({
+ network: "mainnet",
+ modules: [setupMyNearWallet(), setupHereWallet(), setupMeteorWallet(), setupSender()],
+});
+
+const modal = setupModal(selector, {
+ contractId: "social.near",
+});
+
+document.getElementById('open-walletselector-button').addEventListener('click', () => modal.show());
+const viewer = document.querySelector('near-social-viewer');
+viewer.selector = selector;
@@ -13,7 +13,7 @@ import {
  useLocation,
 } from "react-router-dom";
 import { sanitizeUrl } from "@braintree/sanitize-url";
-import { useInitNear } from "near-social-vm";
+import { useInitNear, useAccount } from "near-social-vm";
 
 const SESSION_STORAGE_REDIRECT_MAP_KEY = 'nearSocialVMredirectMap';
 
@@ -73,10 +73,12 @@ function Viewer({ widgetSrc, code }) {
 function App(props) {
  const { initNear } = useInitNear();
 
+ useAccount();
  useEffect(() => {
  initNear &&
  initNear({
  networkId: 'mainnet',
+ selector: props.selectorPromise,
  customElements: {
  Link: (props) => {
  if (!props.to && props.href) {

@@ -8,7 +8,13 @@ class NearSocialViewerElement extends HTMLElement {
  super();
  this.attachShadow({ mode: "open" });
  this.shadowRoot.innerHTML = `<slot></slot>`;
+ this.selectorPromise = new Promise(resolve => this.selectorPromiseResolve = resolve);
  }
+
+ set selector(selector) {
+ this.selectorPromiseResolve(selector);
+ }
+
  connectedCallback() {
  const container = document.createElement('div');
  this.appendChild(container);
@@ -17,7 +23,7 @@ class NearSocialViewerElement extends HTMLElement {
  const code = this.getAttribute('code');
 
  const root = createRoot(container);
- root.render(<App widgetSrc={src} code={code} />);
+ root.render(<App widgetSrc={src} code={code} selectorPromise={this.selectorPromise}/>);
  }
 
  static get observedAttributes() {

@@ -0,0 +1,27 @@
+export function web4_get() {
+ const request = JSON.parse(env.input()).request;
+
+ let response;
+ const pathParts = request.path.split('/');
+ let path = pathParts[pathParts.length - 1];
+ let dotparts = path.split('.');
+ const extension = dotparts[dotparts.length - 1];
+
+ let contentType;
+ switch (extension) {
+ case 'js':
+ contentType = "application/javascript; charset=UTF-8";
+ break;
+ case 'html':
+ contentType = "text/html; charset=UTF-8";
+ break;
+ default:
+ contentType = "text/html; charset=UTF-8";
+ path = 'index.html';
+ }
+ response = {
+ contentType,
+ bodyUrl: 'https://ipfs.web4.near.page/ipfs/bafybeiezhg3kks52g44en4gkd435wxsce2zvmnwvsmzv775edv32d2wl4a/' + path
+ };
+ env.value_return(JSON.stringify(response));
+}