Amplitude tracking

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "rules": {
+    // @TODO: ideally, these should be removed
+    "@typescript-eslint/no-explicit-any": "off",
+    "import/named": "off"
+  },
+  "ignorePatterns": ["./src/temp/stellar-xdr-web/*"]
+}

.github/workflows/build.yml

@@ -0,0 +1,19 @@
+name: Build the app and run Playwright Tests
+on: [push, pull_request]
+jobs:
+  build:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Build app
+        run: yarn build
+      - name: Run Playwright tests
+        run: yarn test

.gitignore

@@ -4,23 +4,40 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
+package-lock.json
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
-/dist
 
 # misc
 .DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.eslintcache
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# test files
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.husky/post-merge

@@ -0,0 +1 @@
+yarn install-if-package-changed

.husky/pre-commit

@@ -0,0 +1 @@
+yarn pre-commit

.husky/pre-push

@@ -0,0 +1 @@
+yarn pre-push

.lintstagedrc.js

@@ -0,0 +1,14 @@
+const path = require("path");
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(" --file ")}`;
+
+const ignoredFiles = ["./src/temp/stellar-xdr-web/**/*"];
+
+const eslintPattern = `!(${ignoredFiles.join(",")})*.{js,ts,jsx,tsx}`;
+
+module.exports = {
+  "*.{js,jsx,ts,tsx}": [buildEslintCommand],
+};

.nvmrc

@@ -1 +1 @@
-v18
+v20

.prettierignore

@@ -0,0 +1,5 @@
+.prettierignore
+public/
+.gitignore
+.husky/
+src/temp/stellar-xdr-web/

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "arrowParens:": "always",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "printWidth": 80,
+  "proseWrap": "always",
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

Dockerfile

@@ -1,29 +1,19 @@
-FROM ubuntu:22.04 as build
+FROM node:20
 
-MAINTAINER SDF Ops Team <[email protected]>
-
-RUN mkdir -p /app
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV PORT 80
 WORKDIR /app
+COPY . .
 
-ENV DEBIAN_FRONTEND=noninteractive
-# https://create-react-app.dev/docs/advanced-configuration/
-ENV INLINE_RUNTIME_CHUNK=false
-RUN apt-get update && apt-get install --no-install-recommends -y gpg curl git make ca-certificates apt-transport-https && \
-    curl -sSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key|gpg --dearmor >/etc/apt/trusted.gpg.d/nodesource-key.gpg && \
-    echo "deb https://deb.nodesource.com/node_18.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && \
-    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg |gpg --dearmor >/etc/apt/trusted.gpg.d/yarnpkg.gpg && \
-    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
-    apt-get update && apt-get install -y nodejs yarn && apt-get clean
+# Passing env var to be used on client side
+ARG NEXT_PUBLIC_COMMIT_HASH
 
-COPY . /app/
-RUN yarn install
+ENV NEXT_PUBLIC_AMPLITUDE_API_KEY $NEXT_PUBLIC_AMPLITUDE_API_KEY
+ENV NEXT_PUBLIC_AMPLITUDE_API_KEY_TEST_ENV dockerfile123ENV
 
+RUN yarn install
 RUN yarn build
 
-FROM nginx:1.17
-
-COPY --from=build /app/build/ /usr/share/nginx/html/
-
-# We're removing /laboratory/ prefix. To allow for transition
-# period we'll support /laboratory/ links using rewrites
-COPY nginx_default.conf /etc/nginx/conf.d/default.conf
+# Run on port 80 for compatibility with laboratory v1
+EXPOSE 80
+CMD ["npm", "start"]

Makefile

@@ -1,13 +1,15 @@
 # Check if we need to prepend docker commands with sudo
 SUDO := $(shell docker version >/dev/null 2>&1 || echo "sudo")
 
+# If LABEL is not provided set default value
+LABEL ?= $(shell git rev-parse --short HEAD)$(and $(shell git status -s),-dirty-$(shell id -u -n))
 # If TAG is not provided set default value
-TAG ?= stellar/laboratory:$(shell git rev-parse --short HEAD)$(and $(shell git status -s),-dirty-$(shell id -u -n))
+TAG ?= stellar/laboratory:$(LABEL)
 # https://github.com/opencontainers/image-spec/blob/master/annotations.md
 BUILD_DATE := $(shell date -u +%FT%TZ)
 
 docker-build:
-	$(SUDO) docker build --pull --label org.opencontainers.image.created="$(BUILD_DATE)" -t $(TAG) .
+	$(SUDO) docker build --pull --label org.opencontainers.image.created="$(BUILD_DATE)" -t $(TAG) --build-arg=NEXT_PUBLIC_COMMIT_HASH="$(shell git rev-parse --short HEAD)" .
 
 docker-push:
 	$(SUDO) docker push $(TAG)

README.md

@@ -1,53 +1,36 @@
-# laboratory
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-The Stellar Laboratory is a suite of tools to help one learn about exploring the
-Stellar network. See it in action:
-[https://laboratory.stellar.org/](https://laboratory.stellar.org/).
+## Getting Started
 
-## Developing
-
-```sh
-yarn start
-```
-
-Testing hardware wallets requires an HTTPS connection to enable U2F. The
-recommended way to do this is with [`ngrok`](https://ngrok.com/). Once
-downloaded and authenticated, start ngrok, and tell the laboratory to start with
-a public URL.
+First, run the development server:
 
 ```bash
-./ngrok http 3000
-# in a separate terminal
-# the subdomain will appear in ngrok's output
-yarn start --public randomsubdomain.ngrok.io
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
-## Building for production
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-```sh
-yarn build
-```
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-To build a production docker image using a clean docker build environment:
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-```sh
-make docker-build
-# or directly with docker
-docker build -t lab:localbuild .
-```
+## Learn More
 
-To build and run production build locally:
+To learn more about Next.js, take a look at the following resources:
 
-```sh
-yarn production
-# or
-yarn prod:build
-yarn prod:serve
-```
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-Production uses Amplitude to emit metrics, so to fully emulate a production build, you'll need to set an `AMPLITUDE_API_KEY` variable in `/public/settings/env-config.js` file.
+## Deploy on Vercel
 
-## Internal documentation
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-The [docs.md](./docs.md) file contains code documentation on the laboratory. The
-docs.md is only relevant for developing the laboratory.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.