feat(app): add initial nearblocks gateway

apps/app/.dockerignore

@@ -0,0 +1,18 @@
+Dockerfile
+.dockerignore
+docker-compose.yml
+
+.git
+.gitignore
+
+.env
+.next
+build
+node_modules
+
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+README.md

apps/app/.env.example

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_NETWORK_ID=testnet
+NEXT_PUBLIC_BOS_NETWORK=testnet
+NEXT_PUBLIC_ACCOUNT_ID=nearblocks.testnet
+NEXT_PUBLIC_LOADER_URL=http://127.0.0.1:3030

apps/app/.eslintignore

@@ -0,0 +1,3 @@
+.next
+.turbo
+dist

apps/app/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: ['custom-nextjs'],
+  root: true,
+};

apps/app/.gitignore

@@ -0,0 +1,46 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+.next
+tsconfig.tsbuildinfo
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

apps/app/Dockerfile

@@ -0,0 +1,42 @@
+# https://turbo.build/repo/docs/handbook/deploying-with-docker#the-solution
+FROM node:20-bookworm-slim as base
+
+FROM base AS builder
+RUN apt update && apt install -y dumb-init
+WORKDIR /app
+RUN yarn global add turbo
+COPY . .
+RUN turbo prune app --docker
+
+FROM base AS installer
+WORKDIR /app
+ARG NEXT_PUBLIC_NETWORK_ID
+ARG NEXT_PUBLIC_BOS_NETWORK
+ARG NEXT_PUBLIC_ACCOUNT_ID
+ENV NEXT_TELEMETRY_DISABLED 1
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+RUN yarn turbo run build --filter=app...
+
+FROM base AS runner
+WORKDIR /app
+ARG NEXT_PUBLIC_NETWORK_ID
+ARG NEXT_PUBLIC_BOS_NETWORK
+ARG NEXT_PUBLIC_ACCOUNT_ID
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+COPY --from=builder /usr/bin/dumb-init /usr/bin/dumb-init
+COPY --from=installer /app/apps/web/next.config.js .
+COPY --from=installer /app/apps/web/package.json .
+COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
+COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
+COPY --from=installer --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
+
+CMD ["dumb-init", "node", "apps/indexer-balance/dist/index.js"]

apps/app/README.md

@@ -0,0 +1,58 @@
+# NearBlocks - BOS Gateway for NearBlocks Component
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Local Environment Setup](#local-environment-setup)
+- [Usage](#usage)
+- [Configuration](#configuration)
+- [Deployment](#deployment)
+
+## Introduction
+
+The nearblocks is a Next.js app that serves as a NEAR BOS gateway for the NearBlocks component built on BOS.
+
+## Local Environment Setup
+
+If modifying the BOS component in local environment, please add this environment variable `.env` file:
+
+`NEXT_PUBLIC_LOADER_URL=http://127.0.0.1:3030` (BOS Loader Url default is http://127.0.0.1:3030)
+
+## Usage
+
+To set up and start the nearblocks Gateway, follow these steps:
+
+Install dependencies using yarn:
+
+`yarn`
+
+Start the gateway:
+
+`yarn dev`
+
+The gateway will be accessible at http://localhost:3000. Users can access the BOS Component NearBlocks.
+
+## Configuration
+
+Configure the nearblocks Gateway by modifying the .env file. Customize settings such as ;
+
+`NEXT_PUBLIC_NETWORK_ID=mainnet`
+`NEXT_PUBLIC_ACCOUNT_ID=nearblocks.near`
+`NEXT_PUBLIC_BOS_NETWORK=mainnet`
+
+## Deployment
+
+For deployment we use network (testnet, mainnet) by env variable ;
+
+`NEXT_PUBLIC_NETWORK_ID`: Set the variable to the desired network for nearblocks gateway. This defines whether to redirect to mainnet or testnet URLs
+
+`NEXT_PUBLIC_BOS_NETWORK`: Set this variable to the network the BOS component is hosted on
+
+`NEXT_PUBLIC_ACCOUNT_ID`: Set this variable as account id the BOS component is created by
+
+There are two included docker-compose files which can be started with:
+
+```
+docker compose -f docker-compose.mainnet.yml up -d --build
+docker compose -f docker-compose.testnet.yml up -d --build
+```

apps/app/docker-compose.mainnet.yml

@@ -0,0 +1,17 @@
+name: nearblocks
+services:
+  mainnet:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_NETWORK_ID: mainnet
+        NEXT_PUBLIC_BOS_NETWORK: mainnet
+        NEXT_PUBLIC_ACCOUNT_ID: nearblocks.near
+    restart: always
+    ports:
+      - "127.0.0.1:3005:3000"
+    environment:
+      NEXT_PUBLIC_NETWORK_ID: mainnet
+      NEXT_PUBLIC_BOS_NETWORK: mainnet
+      NEXT_PUBLIC_ACCOUNT_ID: nearblocks.near

apps/app/docker-compose.yml

@@ -0,0 +1,17 @@
+name: nearblocks
+services:
+  testnet:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_NETWORK_ID: testnet
+        NEXT_PUBLIC_BOS_NETWORK: mainnet
+        NEXT_PUBLIC_ACCOUNT_ID: nearblocks.testnet
+    restart: always
+    ports:
+      - "127.0.0.1:3006:3000"
+    environment:
+      NEXT_PUBLIC_NETWORK_ID: testnet
+      NEXT_PUBLIC_BOS_NETWORK: mainnet
+      NEXT_PUBLIC_ACCOUNT_ID: nearblocks.testnet

apps/app/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/app/next.config.js

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  poweredByHeader: false,
+  optimizeFonts: false,
+  output: 'standalone',
+  webpack: (config, options) => {
+    config.experiments.asyncWebAssembly = true;
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;

apps/app/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "nearblocks",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "tsc --noEmit && eslint ./ --fix",
+    "lint:check": "tsc --noEmit && eslint ./"
+  },
+  "dependencies": {
+    "@near-wallet-selector/core": "8.1.1",
+    "@web3-onboard/walletconnect": "2.3.9",
+    "near-api-js": "2.1.3",
+    "near-social-vm": "github:NearSocial/VM#2.5.1",
+    "next": "13.3.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "7.46.1",
+    "zustand": "4.3.7"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2",
+    "@types/react-dom": "~18.2",
+    "@types/node": "~20.8",
+    "autoprefixer": "~10.4",
+    "eslint-config-custom-nextjs": "*",
+    "nb-tsconfig": "*",
+    "postcss": "~8.4",
+    "tailwindcss": "~3.3",
+    "typescript": "~5.2"
+  }
+}

apps/app/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/app/src/components/MetaTags.tsx

@@ -0,0 +1,17 @@
+import Head from 'next/head';
+
+type Props = {
+  title: string;
+  description: string;
+  image?: string | null;
+};
+
+export function MetaTags(props: Props) {
+  return (
+    <Head>
+      <title>{props.title}</title>
+      <meta name="description" content={props.description} />
+      <meta property="og:title" content={props.title} />
+    </Head>
+  );
+}

apps/app/src/components/lib/Spinner/Spinner.tsx

@@ -0,0 +1,13 @@
+export function Spinner() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="loading-spinner-pulse-container">
+        <div className="loading-pulse">
+          <div />
+          <div />
+          <div />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/app/src/components/lib/Spinner/index.ts

@@ -0,0 +1 @@
+export * from './Spinner';

apps/app/src/components/vm/VmCommitButton.tsx

@@ -0,0 +1,20 @@
+import { useVmStore } from '@/stores/vm';
+
+import { Spinner } from '../lib/Spinner';
+
+type Props = {
+  className?: string;
+  data: Record<string, unknown>;
+  handleCommit?: () => void;
+  onCommit?: () => void;
+};
+
+export function VmCommitButton(props: Props) {
+  const { near, CommitButton } = useVmStore();
+
+  if (!near || !CommitButton) {
+    return <Spinner />;
+  }
+
+  return <CommitButton near={near} {...props} />;
+}

apps/app/src/components/vm/VmComponent.tsx

@@ -0,0 +1,27 @@
+import { useBosLoaderStore } from '@/stores/bos-loader';
+import { useVmStore } from '@/stores/vm';
+
+import { Spinner } from '../lib/Spinner';
+
+type Props = {
+  src: string;
+  props?: Record<string, unknown>;
+};
+
+export function VmComponent(props: Props) {
+  const { EthersProvider, Widget } = useVmStore();
+  const redirectMapStore = useBosLoaderStore();
+
+  if (!EthersProvider || !redirectMapStore.hasResolved) {
+    return <Spinner />;
+  }
+
+  return (
+    <Widget
+      config={{
+        redirectMap: redirectMapStore.redirectMap,
+      }}
+      {...props}
+    />
+  );
+}