One-click actions on Substrate based chains

[Karim]

Hi everyone! Today I’d like to share a very small proof of concept I’ve built over the past weekend. It was an excuse for me to learn a bit more about Rust, Axum and Polkadot.JS API on a concrete goal, doing projects like these is essentially how I learn. After chatting with Santiago & Birdo about it they motivated me to share it here as well.

This project is not directly related to the work we’re doing at the Parity Data team.

---

Assume you are in a situation where you want someone to send you 10 DOT. Dealing with this should be relatively straightforward given the wallets that are available today.

Now imagine you’re in a situation where you want 100 people to send you 10 DOT each. How do you do that or coordinate that avoiding any copy/paste errors or any friction?

I’ve built this small thing called tapDOT.xyz, which I like to think of as the “Stripe Checkout” for the Polkadot ecosystem.

It works like this:

• As a developer, you configure the parameters for an extrinsic you’d like someone to sign (ie: a transfer to 10 DOT to a specific address)
• tapDOT.xyz generates a unique URL that identifies this operation
• By sending this unique URL to someone, they can sign the transaction
• The developer can opt-in to get notified of this event, make it unique (only once etc)

A very short video of how this works:

The unique tapDOT.xyz link shown in that video:

• https://tapdot.xyz/uKdPjPs1fS (signing this will send me some ROC)
• The resulting on-chain Extrinsic once signed

This requires no sign-up, all you do is configure a transaction, get a link and share it. Kinda like how URL shorteners work, but for any extrinsic you can configure on any Substrate based chain. Most of the work is done by the sender, instead of the user. The signing is done client-side.

Sending a transfer is in fact here an edge case I used to illustrate my point, this can be used for any type of on-chain action that you would like to scaffold for an “end-user” to just sign, instead of having to figure out the details & parameters on their own. Another possible use case would be to generate a unique link to vote AYE/NAY on a referendum and reduce friction to participating to on-chain activities.

The gist of it is really to have something where anyone is just one link away from executing specific actions on the Polkadot ecosystem, like: Pay fees with USDC (thanks Santiago for this idea), exchange DOT for another token, interacting with a contract, etc.

I don’t have big plans for this as I’m really not sure if there’s any interest, but here it is, I’m happy I went through and shipped it. I recommend only using it from a browser with a throwaway Rococo account for now. In fact, I’ve only enabled it for Rococo at the moment and it’s a complete alpha. It “should” work with any Wallet but I only tried it with Birdo’s all time favorite wallet. Any feedback would be welcome (except about my frontend skills which are not the yellow of the egg but that has never been a secret )

Down the line if there’s interest, I’ll add DOT.

[swenthebuilder]

Thanks for sharing , I can see this being very useful

[xlc]

Great. How about integrate this with Chopsticks to allow signer to dry run the transaction and preview the outcome?

From a security point of view, this could be a huge phasing vector. I could send you a link to sign this complicated batch tx to mint some NFT over XCM. But that also happens to setup a proxy to allow me to take control of all your assets.

[Karim]

Thank you for the feedback, that’s a great idea!

I totally agree that for some cases like the one you mentioned, it is very dangerous to obfuscate too much of that complexity. This is mainly why I decided to whitelist the “operations” that can be configured. I defaulted to transfers for now, since the parameters for that call are quite straightforward and easily verifiable.

I’ll give it a try and test how complicated it would be for me to get that to work. If I encounter any issues I’ll make a PR/open an issue. This will definitely be necessary for the more interesting use cases.

[xlc]

Cool. Here are some pointers to help get you started:

You can use ChopsticksProvider to setup a local fork. Integrate chopsticks by qiweiii · Pull Request #9965 · polkadot-js/apps · GitHub

Use dev_dryRun to dry run transaction.

There are likely some improvements could be done on the output format but suggestions will be great.

[Thebicsam]

Hey interesting idea, will we have a website UI where SME or normal end-users could easy to make an “online Substrate invoice” for their audiences? thx

[Karim]

I had a bit of time this weekend so I revisited this project. Thanks @xlc The chopsticks integration was trivial and worked surprisingly well

I’ve updated the tool to now use Westend instead of Rococo and added a test using Chopstick in the browser to verify that the transaction is actually going to be fine: https://tapdot.xyz/ngLMcUhI0s

---

Here’s what it looks like:

Testing a transaction:

Verifying everything works well:

And signing once everything checks out:

I’ve also went ahead and added a way to easily create these “recipes”. I’m going to add a few more interesting transactions like teleports, votes, XCM, operations around coretime, asset transfers etc. That way, power users can configure and prepare transactions for others to sign, without figuring out underlying api’s or copy pasting and sending extrinsic hashes.

If you think of something complicated or with more value add, to be abstracted away with this “one click” method, let me know and I’ll add that. I also want to make this work with Telenova, just a few Telegram quirks to iron out… Similarly if someone has a good tutorial or experience using WalletConnect & Polkadot wallets, please let me know I could use some help here to make the signing work on mobile phones.

@Thebicsam sure, that is already possible: If you configure a transfer here, you can add the amount you want to receive to which address, and send the link to be signed. Of course this is now just on Westend, but it’ll be 1:1 the same on Polkadot once I think it’s good enough to launch.

So, if you feel generous and want to send me some WND, use this link: https://tapdot.xyz/ngLMcUhI0s you can now verify that the transaction is legit