diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..3d20c357 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,6 @@ +babel.config.js +webpack.common.js +webpack.dev.js +webpack.prod.js +.eslintrc.js +prettier.config.js diff --git a/.github/workflows/test-build.yml b/.github/workflows/test-build.yml index 87110cda..4298b0bf 100644 --- a/.github/workflows/test-build.yml +++ b/.github/workflows/test-build.yml @@ -12,6 +12,6 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 14 + node-version: 18 - run: yarn install - run: yarn build diff --git a/.github/workflows/update-deps.yml b/.github/workflows/update-deps.yml index b50cd1d8..9c025dc1 100644 --- a/.github/workflows/update-deps.yml +++ b/.github/workflows/update-deps.yml @@ -22,6 +22,6 @@ jobs: ``` Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser. pinned: false - close-previous: false + close-previous: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/Dockerfile-client b/Dockerfile-client index 021b1ac9..b0f35773 100644 --- a/Dockerfile-client +++ b/Dockerfile-client @@ -1,21 +1,9 @@ -FROM node:16 as build +FROM node:18 as build MAINTAINER SDF Ops Team WORKDIR /app -ARG REACT_APP_CLIENT_DOMAIN -ENV REACT_APP_CLIENT_DOMAIN $REACT_APP_CLIENT_DOMAIN - -ARG REACT_APP_WALLET_BACKEND_ENDPOINT -ENV REACT_APP_WALLET_BACKEND_ENDPOINT $REACT_APP_WALLET_BACKEND_ENDPOINT - -ARG REACT_APP_HORIZON_PASSPHRASE -ENV REACT_APP_HORIZON_PASSPHRASE $REACT_APP_HORIZON_PASSPHRASE - -ARG REACT_APP_HORIZON_URL -ENV REACT_APP_HORIZON_URL $REACT_APP_HORIZON_URL - COPY . /app/ RUN yarn workspace demo-wallet-client install RUN yarn build:shared diff --git a/Dockerfile-server b/Dockerfile-server index 6ba79b2c..482dac8b 100644 --- a/Dockerfile-server +++ b/Dockerfile-server @@ -1,16 +1,18 @@ -FROM node:16 as build +FROM node:18 as build MAINTAINER SDF Ops Team WORKDIR /app COPY . /app/ + RUN yarn workspace demo-wallet-server install RUN yarn build:shared RUN yarn build:server # Copy it all to a clean image to avoid cache artifacts elsewhere in the image -FROM node:16 + +FROM node:18 COPY --from=build /app /app WORKDIR /app diff --git a/Makefile b/Makefile index f28ab5ac..f144f232 100644 --- a/Makefile +++ b/Makefile @@ -18,7 +18,6 @@ docker-push-server: docker-build-client: $(SUDO) docker build -f Dockerfile-client --pull --label org.opencontainers.image.created="$(BUILD_DATE)" \ - --build-arg REACT_APP_CLIENT_DOMAIN=$(REACT_APP_CLIENT_DOMAIN) --build-arg REACT_APP_WALLET_BACKEND_ENDPOINT=$(REACT_APP_WALLET_BACKEND_ENDPOINT) --build-arg REACT_APP_HORIZON_PASSPHRASE=$(REACT_APP_HORIZON_PASSPHRASE) --build-arg REACT_APP_HORIZON_URL=$(REACT_APP_HORIZON_URL) \ -t $(CLIENT_TAG) . docker-push-client: diff --git a/README.md b/README.md index dfc4d813..50a1f1b3 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,17 @@ # Stellar Demo Wallet The Stellar Demo Wallet is our newly rebuilt application for interactively -testing anchor services. +testing anchor services. -If you would like to automate testing of your anchor service, check out the SDF's -[anchor tests suite](https://github.com/stellar/stellar-anchor-tests) viewable -at [https://anchor-tests.stellar.org/](https://anchor-tests.stellar.org/). +If you would like to automate testing of your anchor service, check out the +SDF's [anchor tests suite](https://github.com/stellar/stellar-anchor-tests) +viewable at +[https://anchor-tests.stellar.org/](https://anchor-tests.stellar.org/). -This repository was originally created for the [Build a Stellar Wallet](https://developers.stellar.org/docs/building-apps/) tutorial series. -(That project has since moved over [here](https://github.com/stellar/docs-wallet)). +This repository was originally created for the +[Build a Stellar Wallet](https://developers.stellar.org/docs/building-apps/) +tutorial series. (That project has since moved over +[here](https://github.com/stellar/docs-wallet)). If you want to use parts or all of the project to kickstart your own wallet, feel free to clone or copy any pieces that may be helpful. @@ -17,25 +20,38 @@ feel free to clone or copy any pieces that may be helpful. This application defaults to using Stellar's testnet. -This application can be used on Stellar's mainnet by specifying the `REACT_APP_HORIZON_PASSPHRASE` & `REACT_APP_HORIZON_URL` environment variables when building the project. +This application can be used on Stellar's mainnet by setting +**HORIZON_PASSPHRASE** & **HORIZON_URL** on `window._env_` object (this project +uses _packages/demo-wallet-client/public/settings/env-config.js_ file). -**All accounts on mainnet that are used with this application should be considered compromised.** If you want to test services on mainnet with this tool, make sure to create a new account and fund it with the minimum assets required. +```typescript +window._env_ = { + HORIZON_PASSPHRASE: "Public Global Stellar Network ; September 2015", + HORIZON_URL: "https://horizon.stellar.org", +}; +``` + +**All accounts on mainnet that are used with this application should be +considered compromised.** If you want to test services on mainnet with this +tool, make sure to create a new account and fund it with the minimum assets +required. ## Getting A Test Account Up and Running You can use the demo wallet to interact with the following anchor services: -* Regulated Assets API ([SEP-8]) -* Hosted Deposit and Withdrawals ([SEP-24]) -* Deposit & Withdrawal API ([SEP-6]) -* Cross-Border Payments API ([SEP-31]) +- Regulated Assets API ([SEP-8]) +- Hosted Deposit and Withdrawals ([SEP-24]) +- Deposit & Withdrawal API ([SEP-6]) +- Cross-Border Payments API ([SEP-31]) -You can connect to any domain that has a Stellar Info File (also known as [SEP-1], or a stellar.toml file). +You can connect to any domain that has a Stellar Info File (also known as +[SEP-1], or a stellar.toml file). -The instructions below are for demo-ing standard integrations supported -by Stellar test server, testanchor.stellar.org, or by the [SEP-8] reference -server, sep8-server.dev.stellar.org. For these integrations, the logs to the -right of the screen will show every network call. +The instructions below are for demo-ing standard integrations supported by +Stellar test server, testanchor.stellar.org, or by the [SEP-8] reference server, +sep8-server.dev.stellar.org. For these integrations, the logs to the right of +the screen will show every network call. ### Demo-ing a Regulated Asset Payment ([SEP-8]) @@ -110,12 +126,13 @@ between the Sending and the Receiving anchors._ You can serve `stellar.toml` files from `localhost`. When using locally hosted stellar.toml files on demo-wallet.stellar.org, some browsers might block them -for security reasons if you’re not using `https`. If you’re running the demo wallet -locally, this is not a problem. +for security reasons if you’re not using `https`. If you’re running the demo +wallet locally, this is not a problem. ## Running the Demo Wallet Locally -You can run the demo wallet locally, either by installing the application on your machine or by using Docker. +You can run the demo wallet locally, either by installing the application on +your machine or by using Docker. ### Local Installation @@ -123,18 +140,20 @@ You can run the demo wallet locally, either by installing the application on you yarn install ``` -create a **.env** file in _packages/demo-wallet-client_ with the -**REACT_APP_CLIENT_DOMAIN** (where stellar.toml is hosted) and the wallet -backend **REACT_APP_WALLET_BACKEND_ENDPOINT** +Add **CLIENT_DOMAIN** (where `stellar.toml` is hosted) and the wallet backend +**WALLET_BACKEND_ENDPOINT** to the `window._env_` object in +_packages/demo-wallet-client/public/settings/env-config.js_. NOTE: if using a locally running test anchor (in docker) use _docker.for.mac.host.internal_, this will allow the anchor that's running in a docker container to access the host network where the client domain (server -hosting the stellar.toml) is running. ex: +hosting the `stellar.toml`) is running. ex: -```bash -REACT_APP_CLIENT_DOMAIN=docker.for.mac.host.internal:7000 -REACT_APP_WALLET_BACKEND_ENDPOINT=http://demo-wallet-server.stellar.org +```typescript +window._env_ = { + CLIENT_DOMAIN: "docker.for.mac.host.internal:7000", + WALLET_BACKEND_ENDPOINT: "http://demo-wallet-server.stellar.org", +}; ``` and run: @@ -157,21 +176,14 @@ If you want to run the demo wallet on testnet, building the project is easy. docker compose build ``` -If you're looking to use the demo wallet to interact with mainnet services, specify the following build args. - -```bash -docker compose build \ - --build-arg REACT_APP_HORIZON_PASSPHRASE="Public Global Stellar Network ; September 2015" \ - --build-arg REACT_APP_HORIZON_URL="https://horizon.stellar.org" -``` - Then, launch the containers. ```bash docker compose up ``` -Note that the docker compose file defaults to using SDF's demo wallet server, but you are free to edit the compose file to use a local instance of the server. +Note that the docker compose file defaults to using SDF's demo wallet server, +but you are free to edit the compose file to use a local instance of the server. --- diff --git a/docker-compose.yml b/docker-compose.yml index 25ed4fd5..28702109 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,13 +1,8 @@ -version: '3.8' +version: "3.8" services: wallet-client: build: context: . dockerfile: Dockerfile-client - args: - REACT_APP_CLIENT_DOMAIN: demo-wallet-server.stellar.org - REACT_APP_WALLET_BACKEND_ENDPOINT: https://demo-wallet-server.stellar.org - env_file: - - .env ports: - "8000:80" diff --git a/package.json b/package.json index f9ca1c4d..f7ac1c87 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,6 @@ "dependencies": { "demo-wallet-shared": "^1.0.0", "npm-run-all": "^4.1.5", - "stellar-sdk": "^10.1.1" + "stellar-sdk": "^10.4.1" } } diff --git a/packages/demo-wallet-client/babel.config.js b/packages/demo-wallet-client/babel.config.js new file mode 100644 index 00000000..c742e964 --- /dev/null +++ b/packages/demo-wallet-client/babel.config.js @@ -0,0 +1,22 @@ +module.exports = { + presets: [ + "@babel/preset-react", + "@babel/preset-typescript", + [ + "@babel/preset-env", + { + targets: { + browsers: "last 2 versions", + }, + modules: false, + loose: false, + }, + ], + ], + plugins: ["transform-class-properties", "react-hot-loader/babel"], + env: { + test: { + plugins: ["transform-es2015-modules-commonjs"], + }, + }, +}; diff --git a/packages/demo-wallet-client/package.json b/packages/demo-wallet-client/package.json index a68a7810..ca0e211a 100644 --- a/packages/demo-wallet-client/package.json +++ b/packages/demo-wallet-client/package.json @@ -9,7 +9,7 @@ }, "license": "Apache-2.0", "engines": { - "node": ">=14.x" + "node": ">=18" }, "lint-staged": { "src/**/*.ts?(x)": [ @@ -17,43 +17,49 @@ ] }, "dependencies": { - "@reduxjs/toolkit": "^1.7.2", - "@stellar/design-system": "^0.8.0", + "@microlink/react-json-view": "^1.22.2", + "@reduxjs/toolkit": "^1.9.5", + "@stellar/design-system": "^0.8.1", "@stellar/frontend-helpers": "^2.1.4", "@stellar/prettier-config": "^1.0.1", - "@stellar/wallet-sdk": "^0.7.0-rc.0", - "@testing-library/jest-dom": "^5.16.2", - "@testing-library/react": "^12.1.2", - "@testing-library/user-event": "^13.5.0", - "bignumber.js": "^9.0.2", + "@stellar/wallet-sdk": "^0.9.1", + "@svgr/webpack": "^8.1.0", + "@testing-library/jest-dom": "^6.0.0", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.4.3", + "assert": "^2.0.0", + "bignumber.js": "^9.1.1", + "buffer": "^6.0.3", "crypto": "^1.0.1", - "dompurify": "^2.3.5", + "crypto-browserify": "^3.12.0", + "dompurify": "^3.0.5", "env-cmd": "^10.1.0", "find-config": "^1.0.0", - "html-react-parser": "^1.4.8", + "html-react-parser": "^4.2.1", + "https-browserify": "^1.0.0", "lodash": "^4.17.21", - "marked": "^4.0.12", - "node-sass": "^6.0.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-json-view": "^1.21.3", - "react-redux": "^7.2.6", - "react-router-dom": "^6.2.1", - "react-scripts": "4.0.3", - "redux": "^4.1.2", - "stellar-sdk": "^10.1.1", - "styled-components": "^5.3.3", + "marked": "^7.0.3", + "node-sass": "^9.0.0", + "os-browserify": "^0.3.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-redux": "^8.1.2", + "react-router-dom": "^6.15.0", + "redux": "^4.2.1", + "stellar-sdk": "^10.4.1", + "stream-browserify": "^3.0.0", + "stream-http": "^3.2.0", + "styled-components": "^6.0.7", "toml": "^3.0.0", - "tslib": "^2.3.1", - "typescript": "~4.5.5", - "web-vitals": "^2.1.4" + "tslib": "^2.6.1", + "typescript": "~5.1.6", + "url": "^0.11.1", + "web-vitals": "^3.4.0" }, "scripts": { "install-if-package-changed": "git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD | grep --quiet yarn.lock && yarn install || exit 0", - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject", + "start": "webpack serve --open --config webpack.dev.js", + "build": "NODE_ENV=production webpack --config webpack.prod.js", "prepare": "cd ../../ && husky install packages/demo-wallet-client/.husky", "pre-commit": "concurrently 'pretty-quick --staged' 'lint-staged' 'tsc --noEmit'" }, @@ -76,36 +82,58 @@ ] }, "devDependencies": { + "@babel/core": "^7.22.10", + "@babel/preset-env": "^7.22.10", + "@babel/preset-react": "^7.22.5", + "@babel/preset-typescript": "^7.22.5", "@stellar/eslint-config": "^2.1.2", "@stellar/tsconfig": "^1.0.2", - "@types/jest": "^27.4.0", - "@types/lodash": "^4.14.178", - "@types/marked": "^4.0.2", - "@types/node": "^16.10.3", - "@types/react": "^17.0.39", - "@types/react-copy-to-clipboard": "^5.0.2", - "@types/react-dom": "^17.0.11", - "@types/react-redux": "^7.1.22", + "@types/jest": "^29.5.3", + "@types/lodash": "^4.14.197", + "@types/marked": "^5.0.1", + "@types/node": "^20.5.0", + "@types/react": "^18.2.20", + "@types/react-copy-to-clipboard": "^5.0.4", + "@types/react-dom": "^18.2.7", + "@types/react-redux": "^7.1.25", "@types/react-router-dom": "^5.3.3", "@types/redux": "^3.6.0", - "@types/styled-components": "^5.1.22", - "@typescript-eslint/eslint-plugin": "^4.33.0", - "@typescript-eslint/parser": "^4.33.0", - "concurrently": "^7.0.0", - "eslint": "^7.32.0", - "eslint-config-prettier": "^8.3.0", + "@types/styled-components": "^5.1.26", + "@typescript-eslint/eslint-plugin": "^6.4.0", + "@typescript-eslint/parser": "^6.4.0", + "babel-loader": "^9.1.3", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", + "clean-webpack-plugin": "^4.0.0", + "concurrently": "^8.2.0", + "copy-webpack-plugin": "^11.0.0", + "css-loader": "^6.8.1", + "eslint": "^8.47.0", + "eslint-config-prettier": "^9.0.0", "eslint-config-react": "^1.1.7", - "eslint-config-react-app": "^6.0.0", - "eslint-plugin-flowtype": "^6.1.0", - "eslint-plugin-import": "^2.25.4", - "eslint-plugin-jsdoc": "^36.1.0", - "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-config-react-app": "^7.0.1", + "eslint-plugin-flowtype": "^8.0.3", + "eslint-plugin-import": "^2.28.0", + "eslint-plugin-jsdoc": "^46.4.6", + "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-prefer-arrow": "^1.2.3", - "eslint-plugin-react": "^7.28.0", - "eslint-plugin-react-hooks": "^4.3.0", - "husky": "^7.0.4", - "lint-staged": "^12.3.3", - "prettier": "^2.5.1", - "pretty-quick": "^3.1.3" + "eslint-plugin-react": "^7.33.1", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-webpack-plugin": "^4.0.1", + "fork-ts-checker-webpack-plugin": "^8.0.0", + "html-webpack-plugin": "^5.5.3", + "husky": "^8.0.3", + "lint-staged": "^14.0.0", + "mini-css-extract-plugin": "^2.7.6", + "prettier": "^3.0.2", + "pretty-quick": "^3.1.3", + "react-hot-loader": "^4.13.1", + "sass-loader": "^13.3.2", + "style-loader": "^3.3.3", + "ts-loader": "^9.4.4", + "tsconfig-paths-webpack-plugin": "^4.1.0", + "webpack": "^5.88.2", + "webpack-cli": "^5.1.4", + "webpack-dev-server": "^4.15.1" } } diff --git a/packages/demo-wallet-client/public/settings/env-config.js b/packages/demo-wallet-client/public/settings/env-config.js index db354c0a..ea1d011b 100644 --- a/packages/demo-wallet-client/public/settings/env-config.js +++ b/packages/demo-wallet-client/public/settings/env-config.js @@ -1,4 +1,8 @@ window._env_ = { AMPLITUDE_API_KEY: "", SENTRY_API_KEY: "", + HORIZON_PASSPHRASE: "", + HORIZON_URL: "", + CLIENT_DOMAIN: "", + WALLET_BACKEND_ENDPOINT: "", }; diff --git a/packages/demo-wallet-client/src/App.scss b/packages/demo-wallet-client/src/App.scss index decb6a0f..3d865deb 100644 --- a/packages/demo-wallet-client/src/App.scss +++ b/packages/demo-wallet-client/src/App.scss @@ -1,3 +1,6 @@ +// Import global CSS from Stellar Design System +@import "@stellar/design-system/build/styles.min.css"; + #root { --layout-window-width-min: 800px; --layout-window-width-max: 1296px; diff --git a/packages/demo-wallet-client/src/App.tsx b/packages/demo-wallet-client/src/App.tsx index f466757b..9cc7aa3e 100644 --- a/packages/demo-wallet-client/src/App.tsx +++ b/packages/demo-wallet-client/src/App.tsx @@ -1,4 +1,4 @@ -import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import { BrowserRouter, Routes as RouterRoutes, Route } from "react-router-dom"; import { Provider } from "react-redux"; import { Layout, TextLink } from "@stellar/design-system"; import { errorReporting } from "@stellar/frontend-helpers"; @@ -43,7 +43,7 @@ errorReporting.reportErrors({ export const App = () => ( - + @@ -80,7 +80,7 @@ export const App = () => (

- + } /> ( } /> - - + } /> +