Merge pull request #1 from NEARBuilders/fix/setup

Fixes setup and initialize marketplace app

.github/workflows/test.yml

@@ -25,7 +25,7 @@ jobs:
  run: if [ -d "node_modules" ]; then echo "node_modules cache hit"; else echo "node_modules cache miss"; fi
 
  - name: Install dependencies
- run: yarn install
+ run: yarn install --frozen-lockfile
 
  - name: Format code
  run: yarn fmt

aliases.mainnet.json

@@ -1,5 +1,5 @@
 {
-  "MOB": "mob.near",
-  "NEAR": "near",
-  "DEVS": "devs.near"
-}
+ "MOB": "mob.near",
+ "NEAR": "near",
+ "DEVS": "devs.near"
+}

bos.config.json

@@ -1,5 +1,5 @@
 {
  "account": "blackdrogon.near",
  "aliases": ["./aliases.mainnet.json"],
- "index":"blackdrogon.near/widget/app"
+ "index":"blackdrogon.near/widget/Index"
 }

config/rspack.production.js

@@ -60,7 +60,7 @@ module.exports = () => {
  optimization: {
  minimize: true,
  minimizer: [
- new rspack.SwcCssMinimizerRspackPlugin(),
+ new rspack.LightningCssMinimizerRspackPlugin(),
  new rspack.SwcJsMinimizerRspackPlugin({
  exclude: /webcomponentapp.js/,
  minimizerOptions: {

package.json

@@ -1,6 +1,6 @@
 {
  "name": "near-bos-webcomponent",
- "version": "0.1.1",
+ "version": "0.1.2",
  "homepage": "https://github.com/NEARBuilders/near-bos-webcomponent",
  "repository": {
  "type": "git",
@@ -33,8 +33,9 @@
  "scripts": {
  "rspack": "rspack build",
  "bw": "bos-workspace",
- "dev:bos": "yarn run bw dev",
- "dev": "yarn run rspack --env mode=development",
+ "dev": "yarn run clean && concurrently \"yarn run dev:gateway\" \"wait-on dist/index.html && yarn run dev:apps\"",
+ "dev:apps": "yarn run bw dev",
+ "dev:gateway": "yarn run rspack --env mode=development --watch",
  "prod": "yarn run rspack --env mode=production",
  "prod:analyze": "yarn run prod --analyze",
  "build": "yarn run prod",
@@ -72,13 +73,14 @@
  },
  "devDependencies": {
  "@playwright/test": "^1.38.1",
- "@rspack/cli": "^0.7.5",
- "@rspack/core": "^0.7.5",
+ "@rspack/cli": "^1.0.0",
+ "@rspack/core": "^1.0.0",
  "assert": "^2.0.0",
  "bos-workspace": "^1.0.0-alpha.37",
  "browserify-zlib": "^0.2.0",
  "buffer": "^6.0.3",
  "clean-webpack-plugin": "^4.0.0",
+ "concurrently": "^8.2.2",
  "cross-env": "^7.0.3",
  "crypto-browserify": "^3.12.0",
  "css-loader": "^6.2.0",
@@ -102,6 +104,7 @@
  "stream-http": "^3.2.0",
  "style-loader": "^3.2.1",
  "url": "^0.11.0",
+ "wait-on": "^8.0.0",
  "webpack-merge": "^5.8.0"
  },
  "nearfs": {

playwright-tests/storage-states/bos-loader-url.json

@@ -2,7 +2,7 @@
  "cookies": [],
  "origins": [
  {
- "origin": "http://localhost:3000",
+ "origin": "http://localhost:8080",
  "localStorage": [
  {
  "name": "flags",

playwright-tests/storage-states/wallet-connected.json

@@ -2,7 +2,7 @@
  "cookies": [],
  "origins": [
  {
- "origin": "http://localhost:3000",
+ "origin": "http://localhost:8080",
  "localStorage": [
  {
  "name": "near-wallet-selector:recentlySignedInWallets",

playwright-tests/storage-states/wallet-not-connected.json

@@ -2,7 +2,7 @@
  "cookies": [],
  "origins": [
  {
- "origin": "http://localhost:3000",
+ "origin": "http://localhost:8080",
  "localStorage": []
  }
  ],

playwright-tests/tests/redirectmap.spec.js

@@ -101,7 +101,7 @@ describe("hot-reload", () => {
 
  io = new Server(httpServer, {
  cors: {
- origin: `http://${HOST}:3000`,
+ origin: `http://${HOST}:8080`,
  methods: ["GET", "POST"],
  },
  });

playwright.config.js

@@ -37,15 +37,15 @@ export default defineConfig({
  /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
  actionTimeout: 0,
  /* Base URL to use in actions like `await page.goto('/')`. */
- baseURL: "http://localhost:3000",
+ baseURL: "http://localhost:8080",
 
  /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
  trace: "on-first-retry",
  storageState: {
  cookies: [],
  origins: [
  {
- origin: "http://localhost:3000",
+ origin: "http://localhost:8080",
  localStorage: [],
  },
  ],
@@ -95,8 +95,8 @@ export default defineConfig({
 
  /* Run your local dev server before starting the tests */
  webServer: {
- command: "yarn start",
- port: 3000,
+ command: "yarn dev",
+ port: 8080,
  reuseExistingServer: !process.env.CI,
  },
 });

widget/Index.jsx

@@ -0,0 +1,202 @@
+const { page } = props;
+
+page = page || "home";
+
+const { Layout } = VM.require("${alias_DEVS}/widget/Layout") || {
+ Layout: () => <>layout not found</>,
+};
+
+const { Router } = VM.require("${alias_DEVS}/widget/Router") || {
+ Router: () => <>router not found</>,
+};
+
+const { href } = VM.require("${alias_DEVS}/widget/lib.url") || {
+ href: () => "/",
+};
+
+const routerConfig = {
+ param: "page",
+ routes: {
+ home: {
+ path: "${config_account}/widget/page.home",
+ init: {},
+ },
+ product: {
+ path: "${config_account}/widget/page.product",
+ init: {},
+ },
+ cart: {
+ path: "${config_account}/widget/page.cart",
+ init: {},
+ },
+ inspect: {
+ path: "buildhub.near/widget/page.inspect",
+ init: {
+ widgetPath: props.widgetPath,
+ },
+ },
+ },
+};
+
+const CSS = styled.div`
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ justify-content: space-between;
+
+ a {
+ text-decoration: none;
+ }
+
+ .header {
+ border: "solid";
+ padding: 20px;
+
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .sidebar {
+ display: flex;
+ flex-direction: column;
+ width: 250px;
+ padding: 20px;
+ gap: 10px;
+ }
+
+ .button {
+ width: 100%;
+ }
+
+ .footer {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ width: 100%;
+ padding: 10px;
+
+ img {
+ height: 30px;
+ }
+
+ .content {
+ display: flex;
+ align-items: center;
+ }
+
+ .link-container {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-right: 20px;
+
+ a {
+ font-size: 24px;
+ color: inherit;
+ text-decoration: none;
+ transition: all 300ms;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+ }
+ }
+`;
+
+const NavLink = ({ to, children, passProps }) => (
+ <Link
+ to={href({
+ widgetSrc: "${config_index}",
+ params: {
+ page: to,
+ ...passProps,
+ },
+ })}
+ >
+ <button className="button">{children}</button>
+ </Link>
+);
+
+const Header = () => (
+ <div className="header">
+ <h1>Black Dragon Marketplace</h1>
+ <>
+ <NavLink
+ to="inspect"
+ passProps={{
+ widgetPath: routerConfig.routes[props.page].path ?? "${config_index}",
+ }}
+ >
+ <i className="bi bi-code"></i>
+ <span>View source</span>
+ </NavLink>
+ </>
+ </div>
+);
+
+const Footer = () => (
+ <div className="footer">
+ <div className="content">
+ <div className="link-container">
+ <a
+ href="https://twitter.com/nearbuilders"
+ className="d-flex align-items-center"
+ target="_blank"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ >
+ <path
+ d="M8 2.75H1L9.26086 13.7645L1.44995 22.7499H4.09998L10.4883 15.401L16 22.75H23L14.3917 11.2723L21.8001 2.75H19.1501L13.1643 9.63578L8 2.75ZM17 20.75L5 4.75H7L19 20.75H17Z"
+ fill="#030F1C"
+ />
+ </svg>
+ </a>
+ <a href="https://nearbuilders.com/tg-builders" target="_blank">
+ <i className="bi bi-telegram"></i>
+ </a>
+ <a href="https://github.com/NEARBuilders/blackdragon-marketplace-bos" target="_blank">
+ <i className="bi bi-github"></i>
+ </a>
+ <a href="https://${config_account}.social/" target="_blank">
+ <i className="bi bi-code-slash"></i>
+ </a>
+ </div>
+ <Link href="https://nearbuilders.org">
+ <img
+ src="https://ipfs.near.social/ipfs/bafkreiavh7rnvf4zzb5rjohul7xwrlgz4y6ysdtmdsvpjeqpjtmuvgal7a"
+ alt="Near Builders"
+ />
+ </Link>
+ </div>
+ </div>
+);
+
+const Sidebar = () => (
+ <div className="sidebar">
+ <NavLink to={"home"}>home</NavLink>
+ <NavLink to={"product"}>product</NavLink>
+ <NavLink to={"cart"}>cart</NavLink>
+ </div>
+);
+
+const Content = () => (
+ <Layout>
+ <div style={{ minHeight: "80vh" }}>
+ <Router config={routerConfig} page={page} />
+ </div>
+ </Layout>
+);
+
+return (
+ <CSS>
+ <Layout variant="sidebar" blocks={{ Sidebar, Header, Footer }}>
+ <Content />
+ </Layout>
+ </CSS>
+);

widget/page/cart.jsx

@@ -0,0 +1 @@
+return <h1>Cart</h1>

widget/page/home.jsx

@@ -0,0 +1 @@
+return <h1>Home</h1>

widget/page/product.jsx

@@ -0,0 +1 @@
+return <h1>Product</h1>