Lab v2 release (#963)

* Next.js and other config

* Add git-info

* Static build

* V2 Layout and basic page setup (#740)

* Layout mostly done

* Cleanup

* Updated next.config.js

* Delete extra folders

* Remove trailingSlash config

* Add console.log for testing

* V2 Basic demo setup for state management (#741)

* Layout mostly done

* Cleanup

* Updated next.config.js

* Delete extra folders

* Remove trailingSlash config

* Add console.log for testing

* Basic demo setup for state management

* V2 Network selector (#742)

* Network selector functional

* Improved network dropdown functionality

* Network selector done

* Updated network links

* Test PR to trigger PR preview for testing (#743)

### What

Test PR to trigger PR preview for testing

### Why

I need a way to test PR previews for laboratory-v2

### Issue addressed by this PR

stellar/ops#2846

* V2 Intro page + some page placeholders (#744)

* V2 Maintenance banner (#745)

* V2 Add Playwright testing framework with initial tests (#748)

* Updated dependencies

* Playwright config + initial tests

* Disable missingSuspenseWithCSRBailout

* Replace class selector with testId

* V2 Explore Endpoints: Horizon navigation and routes (#764)

* V2 Explore Endpoints: routes + side navigation

* Explore Endpoints landing page

* Privacy Policy and Terms of Service links (#770)

* Privacy Policy and Terms of Service links

* Update font size

* [wip] create account

* [Account Routes] add routes for Account

* updating styles

* rename Account 'routes'

* fix routes

* updating scss to use 'gap'

* fix

* remove unused styling

* Network switch update (#778)

* Update network order

* Fix test

* Upgrade SDS

* Add warning for futurenet

* Explore Endpoints: Basic tabs view setup (#772)

* Explore Endpoints: Params tab view

* Picker components (#777)

* RadioPicker

* OrderPicker

* IncludeFailedPicker

* AssetPicker + PubKeyPicker

* Update hover color + expand transition speed

* Cleanup

* Tweaks and cleanup

* Cleanup

* add <GenerateKeypair/> component (#779)

* Run `eslint:recommended` when committing (#787)

* Creat and Fund Account Page (#788)

* Explore Endpoints: Accounts Params view + template rendering setup (#789)

* Explore Endpoints: data flow functional

* Accounts endpoint done

* Cleanup

* Remove none option + update anim transition

* Clean up input onChange methods

* Require code and issuer for non-native assets

* Text updates

* Fix tests

* use @stellar/stellar-sdk (#795)

* Explore Endpoints submit and response (#797)

* Explore Endpoints: submit + json response

* Cleanup

* Fix reset query on change and submit + PrettyJson unique keys

* Box component + tweak ExpandBox (#800)

* Use Node v20 + updated dependencies (#803)

* Minor dep updates

* Use Node v20

* [Account] create and parse muxed account (#794)

* Explore Endpoints: pages part 1 (#805)

* All Assets

* Claimable Balances

* Effects + refactor endpoint URL template

* Fee Stats

* Ledgers

* Offers

* Operations

* Fix positiveInt validation when changing routes

* update husky's lintstagedrc and linting rule (#804)

* Explore Endpoints: pages part 2 (#807)

* All Assets

* Claimable Balances

* Effects + refactor endpoint URL template

* Fee Stats

* Ledgers

* Offers

* Operations

* Payments

* Transactions

* Update SDS

* Order book + asset object params

* Trade aggregations

* Fix PrettyJson records rendering

* Trades

* Cleanup

* Cleanup

* Fix linting

* Explore Endpoints: pages part 3 (#809)

* All Assets

* Claimable Balances

* Effects + refactor endpoint URL template

* Fee Stats

* Ledgers

* Offers

* Operations

* Payments

* Transactions

* Update SDS

* Order book + asset object params

* Trade aggregations

* Fix PrettyJson records rendering

* Trades

* Cleanup

* Paths

* Liquidity pools

* Fix URL validation

* Cleanup

* Update reserves asset type

* Cleanup

* Don't hard-code component IDs

* Endpoints tests (#811)

* All Assets

* Claimable Balances

* Effects + refactor endpoint URL template

* Fee Stats

* Ledgers

* Offers

* Operations

* Payments

* Transactions

* Update SDS

* Order book + asset object params

* Trade aggregations

* Fix PrettyJson records rendering

* Trades

* Cleanup

* Paths

* Liquidity pools

* Fix URL validation

* Cleanup

* Update reserves asset type

* Cleanup

* Endpoints tests

* Update asset validation

* openUrl helper

* Renamed Explore Endpoints to Endpoints (#813)

* Renamed Explore Endpoints to Endpoints

* Rename View XDR to XDR

* adding tests for create and fund account (#808)

* [Build Transaction] Attributes view UI only (without input values and validation) (#825)

* Build transaction: basic tabs setup

* Attributes UI done

* Update button label

* Rename Attributes to Params

* [Sign TX] Input Overview View (#826)

* PrettyJson theme + updated network accent colors (#830)

* Update network accent colors

* PrettyJson theme updated

* [Create Account] Fund account with Friend button behavior (#827)

* [Build Transaction] Params input and validation + encode JSON to XDR (#832)

* Transaction: build params validation + XDR

* Add temp Stellar XDR package locally

* Moved temp into src

* Fix build

* XDR works

* Cleanup

* Rename GH Action + remove BigNumber.js

* Rename GH action job to build

* [Build Transaction] Basic Operations layout + button actions (#836)

* Clear params btn + extended Box component

* Basic operations layout + buttons with action

* [Build Transaction] Operations setup + create account op (#840)

* [Build Transaction] Added operations  (#843)

* Operation type description + docs URL

* Payment operation

* Manage buy and sell operations

* Create Passive Sell Offer operation

* Update maintenance banner (#846)

* [Build Transaction] Add more operations (#844)

* Operation type description + docs URL

* Payment operation

* Manage buy and sell operations

* Create Passive Sell Offer operation

* Account Merge operation

* Manage Data operation

* Bump Sequence operation

* Claim Claimable Balance operation

* Begin and End Sponsoring Future Reserves operations

* [sign tx] add signing with secrets and ValidationResponseCard (#839)

* [Build Transaction] More operations pt. 4 (#847)

* Operation type description + docs URL

* Payment operation

* Manage buy and sell operations

* Create Passive Sell Offer operation

* Account Merge operation

* Manage Data operation

* Bump Sequence operation

* Claim Claimable Balance operation

* Begin and End Sponsoring Future Reserves operations

* Clawback operation

* Clawback Claimable Balance operation

* Path Payment Strict Send operation

* Path Payment Strict Receive operation

* [Sign Transaction] Enable persisting data on page refresh  (#850)

* [Build Transaction] Set Options operation (#851)

* Operation type description + docs URL

* Payment operation

* Manage buy and sell operations

* Create Passive Sell Offer operation

* Account Merge operation

* Manage Data operation

* Bump Sequence operation

* Claim Claimable Balance operation

* Begin and End Sponsoring Future Reserves operations

* Clawback operation

* Clawback Claimable Balance operation

* Path Payment Strict Send operation

* Path Payment Strict Receive operation

* Set Options operation

* Fix signer key encoding

* [Sign Tx] Integrate with 'stellar-wallets-kit' (#852)

* Update GitHub Action packages (#854)

* [Build Transaction] Change Trust operation (#853)

* Change Trust operation

* Use string value

* [Build Transaction] Allow Trust operation (#856)

* Allow Trust operation

* Cleanup

* Use @stellar/stellar-xdr-json-web package and remove temp files (#863)

* [Sign Tx] Add a sign with hardware wallets (trezor, ledger) (#859)

* [Build Transaction] Liquidity Pool Deposit and Withdraw (#857)

* Change Trust operation

* Allow Trust operation

* Cleanup

* Liquidity Pool Deposit and Withdraw

* [Build Transaction] Set Trust Line Flags + Revoke Sponsorship operations (#858)

* Set Trust Line Flags operation

* Revoke Sponsorship operation

* [Build Transaction] Create Claimable Balance operation (#861)

* Create Claimable Balance operation

* Cleanup

* Cleanup

* [UI] Display commit hash + 404 page design (#865)

* Display commit hash

* 404 page design

* Save commit hash in env var instead of file

* Use .env.local

* Update scripts

* Another test

* Another experiment

* Tweak Docker config

* Cleanup

* [View XDR] UI + decoded JSON (#876)

* Link "Sign in Transaction Signer" button to "Sign Transaction" page (#875)

* Update XDR validation + show error message on View XDR page (#877)

* Update XDR validation + show error message on View XDR page

* Update XDR validation + show error message on View XDR page

* [Submit Tx] Add a Submit Tx Page (#879)

* Updated dependencies + CSP middleware configuration (#884)

* Minor updates

* Configure CSP

* Tweaks

* [View XDR] XDR Type dropdown with search + remove custom key for zustand-querystring (#882)

* XDR type search select

* Use default key in zustand-querystring

* Update test

* Text update + copy JSON button

* Fix clawback claimable balance operation (#887)

* [XDR] JSON To XDR (#886)

* XDR type search select

* Use default key in zustand-querystring

* Update test

* Text update + copy JSON button

* To XDR

* Add Fee Bump Tx (#888)

* [Endpoints] Saved Endpoints (#892)

* Wider content + updated transaction base fee note (#896)

* Make content width wider

* Update txn base fee note text

* Fix assetMulti validation

* [Transactions] Saved Transactions (#895)

* Saved Horizon Endpoints

* XDR: prettify copy JSON

* Fix tests

* Save transactions

* Temp disable tests in pre-push

* Some cleanup

* Enable prefetch for links

* Put back pre-push test

* Update saved endpoints layout

* Update src/app/(sidebar)/transaction/saved/page.tsx

Co-authored-by: jeesun 지선 <[email protected]>

---------

Co-authored-by: jeesun 지선 <[email protected]>

* Maintenance banner: update loading state (#898)

* Maintenance banner: update loading state

* Replace loader

* Temp: test beta website (#902)

* Small tweaks (#901)

* Small tweaks

* Update button variant

* [RPC Endpoints] (#897)

* enable Rpc Url input in network selector

* Fix design issues 737 (#914)

* Update src/components/NetworkSelector/index.tsx

Co-authored-by: Nando Vieira <[email protected]>

* Rename validate methods function (#919)

* [Fund Account] switch network page on mainnet (#917)

* V2: undo beta test (#905)

* ThemeSwitch: fix state on page load (#931)

* [Navigation] Utilize vertical space and add subnavigation for endpoints (#930)

* enable switch button when rpc url is different on mainnet (#920)

* UI tweaks (#932)

* Action button tooltip

* Remove main nav link underline

* Upgrade SDS

* Use custom icon + CSS cleanup

* [Rpc endpoint] Bug fixes (#911)

* Simulate Transaction page (#934)

* Network: persist mainnet RPC URL

* XDR: fix large number parsing in JSON (#953)

* XDR: update labels (#954)

* UI tweaks (#945)

* Updated readme

* Added GitHub links

* Update main nav link order + allow Wallet Kit img source in CSP

* Don't show nothing scheduled maintenance banner

* Adjust Network selector max-width

* Rename nav items + endpoints expand by default

* MultiPicker: delete function + button variant update

* Fix test

* Update link + rename Stellar RPC

* Fix test

* Fix another test

* Submit Transaction using RPC (#941)

* Submit Transaction using RPC

* Reset response on input change

* Add diagnosticEvents output

* Remove unused file

* Submit Transaction: Simulate and Save transaction buttons (#943)

* Submit Transaction using RPC

* Reset response on input change

* Add diagnosticEvents output

* Submit Transaction: Simulate transaction button

* Update Payments for Transaction info link

* delayedAction helper + XDR type const + Sign Tx View XDR button

* Sign tx Fee Bump button

* Updated saved transaction logic + save tx on Submit Transaction page

* Resolved merge conflicts

* Update SEO + rename laboratory to lab (#955)

* Resolve conflicts with master branch (#960)

* correct a link on the endpoint explorer to Horizon API documentation

* Improve Soroban XDR rendering (#746)

* Upgrade to TypeScript v5 (#760)

* XDR: fix contract ID and type rendering (#761)

* XDR: fix scvVec rendering (#763)

* display the correct soroban network (#796)

* Add option to sign transaction hash with Ledger device (#838)

* Upgrade @stellar/stellar-sdk to v12.0.0-rc.1 (#841)

* Upgrade stellar/stellar-sdk to v12.0.0-rc.1

* Use Node v18 in GH action

* Dependency updates (#878)

* Temp: beta test v1 (#903)

* V1: undo beta test (#904)

* Remove CLA reference from contributing document (#958)

* Remove CLA reference from contributing document

* Update CONTRIBUTING.md

---------

Co-authored-by: Elliot Voris <[email protected]>
Co-authored-by: jeesun 지선 <[email protected]>
Co-authored-by: Leigh McCulloch <[email protected]>

* Endpoints: handle JSON response links (#956)

* Endpoints: JSON response account + XDR custom links

* JSON response links

* Do not reset Endpoints for XDR links

* No need to clear errors

* Use href instead onClick

* Use href instead onClick

* Trigger PR preview

* Cleanup test

* Final tweaks (#962)

* correct a link on the endpoint explorer to Horizon API documentation

* Improve Soroban XDR rendering (#746)

* Upgrade to TypeScript v5 (#760)

* XDR: fix contract ID and type rendering (#761)

* XDR: fix scvVec rendering (#763)

* display the correct soroban network (#796)

* Add option to sign transaction hash with Ledger device (#838)

* Upgrade @stellar/stellar-sdk to v12.0.0-rc.1 (#841)

* Upgrade stellar/stellar-sdk to v12.0.0-rc.1

* Use Node v18 in GH action

* Dependency updates (#878)

* Temp: beta test v1 (#903)

* V1: undo beta test (#904)

* Remove CLA reference from contributing document (#958)

* Remove CLA reference from contributing document

* Update CONTRIBUTING.md

* Final tweaks

---------

Co-authored-by: Elliot Voris <[email protected]>
Co-authored-by: jeesun 지선 <[email protected]>
Co-authored-by: Leigh McCulloch <[email protected]>

---------

Co-authored-by: jacekn <[email protected]>
Co-authored-by: Jeesun Kim <[email protected]>
Co-authored-by: Jeesun Kim <[email protected]>
Co-authored-by: jeesun 지선 <[email protected]>
Co-authored-by: Nando Vieira <[email protected]>
Co-authored-by: Jane Wang <[email protected]>
Co-authored-by: Elliot Voris <[email protected]>
Co-authored-by: Leigh McCulloch <[email protected]>

.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,14 @@
-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
-
-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
-
-COPY . /app/
+COPY . .
+# Passing env var to be used on client side
+ARG NEXT_PUBLIC_COMMIT_HASH
 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,19 +1,31 @@
-# laboratory
+# Lab
 
-The Stellar Laboratory is a suite of tools to help one learn about exploring the
+The Stellar Lab 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/).
+[https://lab.stellar.org/](https://lab.stellar.org/).
+
+## Tech stack
+
+- [Next.js](https://nextjs.org/) framework (React)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Stellar Design System](https://design-system.stellar.org/) for UI
+- [Sass](https://sass-lang.com/) for CSS styling
+- [TanStack (React) Query](https://tanstack.com/query/latest) for API queries
+- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) for state
+  management
+- [Playwright](https://playwright.dev/) for e2e tests
+- [Yarn Classic (v1)](https://classic.yarnpkg.com/lang/en/docs/install/)
 
 ## Developing
 
 ```sh
-yarn start
+yarn dev
 ```
 
 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.
+downloaded and authenticated, start ngrok, and tell the Lab to start with a
+public URL.
 
 ```bash
 ./ngrok http 3000
@@ -28,26 +40,12 @@ yarn start --public randomsubdomain.ngrok.io
 yarn build
 ```
 
-To build a production docker image using a clean docker build environment:
-
-```sh
-make docker-build
-# or directly with docker
-docker build -t lab:localbuild .
-```
-
 To build and run production build locally:
 
 ```sh
-yarn production
-# or
-yarn prod:build
-yarn prod:serve
+yarn start
 ```
 
-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.
-
-## Internal documentation
-
-The [docs.md](./docs.md) file contains code documentation on the laboratory. The
-docs.md is only relevant for developing the laboratory.
+Production uses [Amplitude](https://amplitude.com/) to emit metrics, so to fully
+emulate a production build, you’ll need to set an
+`NEXT_PUBLIC_AMPLITUDE_API_KEY` variable in `.env.local` file.