Action Chaining
Last updated
Last updated
In this section we cover how to use Action Chaining to create multi-step experiences with blinks. Our github has multiple action chaining examples, including
In this section we walk through the first example, swapping back and forth between tokens. For the remainder, visit the github links above to read the source.
In this example we create a blink that swaps from $SOL to $BONK in the first step, and then from $BONK back to $SOL in the second.
The first action, app.get('SOL-BONK', async (c) => { ... }
(link) returns an an input field (a linked parameterized action) for the user to specify the amount to swap. This is no different than a non-chained actions response.
On submit, a POST call is made to app.post('SOL-BONK/:amount', async (c) => { ... }
(link). This response includes both the transaction data as expected, but now also the links
attribute with a next
attribute in it. This next
attribute powers action chaining.
The response.links.next.href
URL is the relative path to the next action, and type: 'post'
indicating that chaining is done through a POST request to the specified href. The alternative chaining method, type: 'inline'
, will be explained in the next section.
✋ Subsequent actions are served via POST, not GET ✋ With chained actions, all actions after the first action are retrieved via POST calls rather than GET calls. This is because many subsequent actions may pass the results of the first action, such as the transaction signature or other personalized data, to the server to inform the conditions for the next action. This will help with ensuring no personal data is sent insecurely, and help prevent caching that would return incorrect effects. As a result, if you are designing a set of chained actions whose order may be flexible, you will need to write a GET method for the action when it is used at the beginning of the chain, and a POST for all subsequent use.
Once the user signs and the transaction succeeds, the client directs the blink to the next action in the chain, in this case app.post(/BONK-SOL', async (c) => { ... }
(link), which returns metadata to render the second action in the chain.
The remainder of the user journey here has no chaining-specific logic. The user may set the amount they wish to swap and submit, which makes a call to app.post('/BONK-SOL/:amount', async (c) => { ... }
(link) which then returns the transaction to sign and submit to the blockchain.
See the full code here, or browse other action chaining examples here.
When using inline chaining, instead of returning a links.next.href
string for the URL to call in the next step that would return an Action object, that Action object is returned directly in links.next.action
.
This saves a network call and can help transition the client to then next step in the chain optimistically.
See the full inline chaining example here, or read about it in the spec here.