Webpack + Node 18 + update env variables (#323)

* Replace CRA with Webpack + Node 18

* Update Node version

* Update GH action

* Update docker file

* Fix Docker file formatting

* Use global env

* Update readme

* Add dotenv to server

* Cleanup

.eslintignore

@@ -0,0 +1,6 @@
+babel.config.js
+webpack.common.js
+webpack.dev.js
+webpack.prod.js
+.eslintrc.js
+prettier.config.js

.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

.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 }}

Dockerfile-client

@@ -1,21 +1,9 @@
-FROM node:16 as build
+FROM node:18 as build
 
 MAINTAINER SDF Ops Team <[email protected]>
 
 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

Dockerfile-server

@@ -1,16 +1,18 @@
-FROM node:16 as build
+FROM node:18 as build
 
 MAINTAINER SDF Ops Team <[email protected]>
 
 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
 

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:

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,31 +126,34 @@ 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
 
 ```bash
 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.
 
 ---
 

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"

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"
   }
 }

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"],
+    },
+  },
+};