Swaptacular "Currency Holder UI" reference implementation

This project implements a Payments Web API client for Swaptacular. The main deliverable is a docker image, generated from the project's Dockerfile. The generated image is a simple static web server, running on port 80, which serves a Progressive Web App at its root path ("/").

To obtain permissions to act on behalf of the user, the Web App performs the OAuth 2.0 Authorization Code Flow with Proof Key for Code Exchange (PKCE), which is specifically designed for clients that cannot securely store a client secret, because their entire source is available to the browser.

Configuration

The behavior of the running container can be tuned with environment variables. Here are the most important settings with some random example values:

# An URL pointing to the "Redirect to the creditor's wallet"
# entrypoint on the server. (See the "Payments Web API"
# specification.)
SERVER_API_ENTRYPOINT=https://demo.swaptacular.org/creditors/.wallet

# OAuth 2.0 Authorization Code Flow parameters.
AUTHORIZATION_URL=https://demo.swaptacular.org/oauth2/auth
TOKEN_URL=https://demo.swaptacular.org/oauth2/token
CLIENT_ID=creditors-webapp

# This must be the starting URL for the Web App, and it must exactly
# match the "redirect URL" that has been configured for the client
# with the given CLIENT_ID.
REDIRECT_URL=https://demo.swaptacular.org/creditors-webapp/

For more configuration options, check the app-config.env file.

How to setup a development environment

Note that you will need to have Node.js installed.

Install the dependencies...

cd swpt_creditors_ui
npm install

...then start Vite:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes. You can edit the config.js file if you want to change the active configuration options during development.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the dev command in package.json to include the option --host 0.0.0.0.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.

Building and running in production mode

To create an optimised version of the app:

npm run build

You can run the newly built app with npm run serve.

IMPORTANT NOTE: Each new version released in production, must have a new value of the cacheName constant in the sw.js file. This is necessary in order to ensure that clients' service workers will be updated.