Metamask Snap for XRPL

Connect more people to XRPL by adding native support in Metamask, the world's most popular crypto wallet.

Comment

Inspiration

Many wallets were released with support for just one token. As the number of wallets proliferated with the number of tokens, it became inconvenient to manage. Metamask, the most popular crypto wallet, is solving this problem by natively supporting other EVM chains and releasing an extension mechanism, called Snaps, that can be used to support non-EVM chains. Users can use a single wallet to access all their tokens.

Naturally, we believe there should be a Snap developed to add XRP support to Metamask. When we couldn't find one, we decided to build one ourselves.

What it does

It extends Metamask, the world's most popular crypto wallet, to also support XRP.

How we built it

We used the official Metamask Snap template as our starting point. We had to build two packages, one for the Snap code itself and one for the dApp to communicate with the Snap (through Metamask) to demonstrate functionalities such as get user's XRP address and XRP balance. The xrpl.js library was used in both packages to handle XRP processing.

We restrict the Snap code to perform only security-related functions, such as deriving the XRP account address from user's private key and signing transactions (also requiring user's private key). This ensures no secured information is needed in the dApp, which has a much larger attack surface for data to be stolen.

On the other hand, we coded the dApp to perform non-private functions such as retrieving an account's balance. The dApp is based on the Gatsby / React framework.

Challenges we ran into

Using the xrpl.js library was the most difficult challenge we faced. The library is fairly old and there are code in there that are incompatible with newer frameworks. The biggest issue being the assumption of various global variables / packages (e.g., buffer, https, crypto) within xrpl.js. Those globals are no longer available by default after webpack v5. The clean solution would be to update those dependencies to include those packages rather than assume their existence in the environment. For this hackathon we found a hack to inject those packages into the build so the legacy code won't break.

Another problem is xrpl.js's dependency on lodash. lodash is a javascript utility library that was once popular but is no longer recommended. The Snap runtime environment prohibits many javascript features that may be insecure. (Again, because a Snap has access to user's private key, extra caution was taken to prevent data leakage.) Unfortunately lodash uses many older javascript features that are now known to be insecure. To make xrpl.js work within a Snap, we had to use yarn's patching feature to inject our own code to replace xrpl.js's usage of lodash. This is obviously a hack, and the clean solution would be to update xrpl.js to use alternatives to lodash. An issue about this was filed 5 months ago in xrpl.js's github repo but remains open. We hope to close this issue if we continue to work on this after this hackathon.

Accomplishments that we're proud of

See the two hacks above to make xrpl.js work.

What we learned

We learned that the XRP Ledger has many sophisticated functionalities, but that there are also many gaps in making them accessible to the average user (or even the average developer). We hope to continue to fill those gaps after this hackathon.

What's next for Metamask Snap for XRPL

We're applying for a XRPL grant to fully build out the Snap and the demo dApp using it. Beyond getting the account balance, we also want the Snap to be able to send XRP and show one's transaction history. Sending and receiving XRP can also be made easier with QR code.

Built With

Share this project:

Updates