This demo implements the client side of a Stellar
SEP24
interactive flow.
It is automatically deploys from master to http://sep24.stellar.org/
Install Dependencies: $ yarn
Run Project: $ yarn start
In order to use the demo client, you'll need to provide some details of your implementation, most importantly the domain that hosts your TOML file, and the currency you're trying to test. You'll also need to create an account to use with the demo client which you can do at the Stellar Laboratory by generating a keypair, and funding it via friendbot.
Once your config is all set up you can start a deposit or withdraw flow by pressing the button in the device frame, and step through the flow manually with the button in the bottom left, or check the "Automatically perform background actions" box in the config popup.
Since this is a project that should work with any partners API, there's often a
set of configurations they'll need to set up, including their home domain, the
asset they're trying to test, and some other optional things. This configuration
is described in
config.js
which allows us to add text fields to the config screen, as well as storing the
values in localStorage and in the URL hash for sharing.
The actual implementation of the SEP24 protocol is done in a set of files in the
steps
directory. Each small step is described in its own file to allow the client to
manually step through the process, as opposed to just running through it all at
once. The steps to be run are specified in
index.js.
Each step has an action string, which gets displayed in the 'Next' button, as
well as an execute function, which actually executes the step. The execute
function receives the
state
object, which it can read from and write to to share data between steps, as well
as a set of UI Actions described below.
UI Actions are a set of functions allowing each step to interact with the
interface of the demo client. This includes
adding logs
of information to the log view, or
updating the page that is visible in the device frame.
A collection of UI Actions gets sent to each step to be used in their
execution.
The UI inside the device is defined by a set of pages in the
pages
directory. These are just static html files that can use functions defined in
wallet.js.
Most of the interaction here is done by annotating buttons with the
[data-send-message]
attribute, which will communicate with the overarching project via postMessage.
An example of this is at the beginning when deciding to go through the deposit
or withdraw flow, we will initially
wait for a message
from wallet.html, and when the user presses the
deposit or withdraw button
we get the message to continue with the specified flow.