By: Brendan Wong, Lawson Graham, Megan Ho, Rohan Khandelwal, Jojo Chen, Emma Guo
Contents
-
Introduction
-
Interoperability and Current Limitations
-
Cross-Chain Wallets
-
Interstellar and Why LayerZero?
-
-
Competitive Landscape
-
Competitor Analysis
-
Benchmarking
-
Intuitive UI Design vs. Wallet Features
-
Metrics
-
-
Interview Takeaways
-
-
Industry Interviews
-
Overview
-
User Personas
-
Key Takeaways
-
-
Interstellar
-
UI Design Choices
-
Front-end design
-
Logo design
-
-
Back-end Development
-
What is LayerZero
-
Experience
-
Challenges
-
-
-
Conclusion
-
Sources
Introduction
Disclosure: This article was written in collaboration with the LayerZero team as part of a paid consulting project with LayerZero.
With the rise of decentralized finance, the need for cross-chain compatibility has become more apparent than ever. As the number of blockchain networks and protocols continues to grow, interoperability has become a major challenge for the crypto industry. To thrive in Web3’s multichain landscape and meet the needs of the next generation of Web3 users, wallet providers need to provide cross-chain products which deliver streamlined and interoperable DeFi features (such as swapping) among others and user interface designs to optimize user experience across multiple networks. Ultimately, the growth of adoption for crypto is dependent on innovative product and engineering design which abstracts away the complexities of individual blockchains and unlocks differentiated value for end users.
Interoperability and Current Limitations
To start, we must answer the question of what is blockchain interoperability and why it matters. With the emergence of so many unique blockchains within the last couple of years, one perspective of which is better is through a minimalist take - which chain is “the best” and offers the most features, protocols, and standards. However, oftentimes it is hard to deduce what “best” is. One chain may offer faster and cheaper transactions while another may offer better privacy. All of these benefits come with trade-offs. As a result, the general consensus is one of cooperation, a mixture of usage between different chains depending on the need. For example, one might be ideal for conducting DeFi actions while another chain might be more secure for storing assets long term. As a result, interoperability has become a very important step in the future. While many chains, such as Cosmos and Polkadot, have interoperability built into their design, other chains such as Ethereum and Binance Smart Chain are left isolated. This is where interoperability comes into play.
Interoperability is the ability for disparate networks to exchange and make use of information or the ability for systems to have meaning and operate with other systems. Each blockchain has its own unique features, protocols, and standards, which can make it difficult to transfer assets between different chains. Without interoperability, we run into issues such as fragmented liquidity, and segmented ecosystems, stopping networks from realizing the full potential of DeFi.
Currently, users must continuously toggle between wallets in order to finalize transactions across different chains. For instance, if a user wants to transfer token $X from one blockchain to another, the user would need to individually approve transactions on each of the chains, leading to a host of web wallet pop-ups. Not only does the lack of interoperability lead to an inefficient and insecure user experience and interface, but its complicated process also hinders widespread adoption, particularly for beginners wishing to break into the decentralized ecosystem.
Cross-Chain Wallets
Currently, the issue with wallets and interoperability stands from the overwhelming number of steps. In order for a user to utilize their assets on another chain, they must first find an appropriate bridge to use. Let’s say for example that our user wants to utilize LayerZero’s Stargate Protocol – the most popular bridge across DeFi and the only native asset bridge to guarantee instant finality – as their bridge. They must first go to the Stargate website, login with their MetaMask wallet, use the Stargate flow to bridge their asset to their desired chain, and then wait for the transaction to be finished. All these steps must be executed to even bridge the token. Once the token is bridged, users can use it as normal. However, instead of forcing the user to take several onerous steps, why not have the wallet abstract away all the bridging?
Cross-chain wallets are a critical piece of infrastructure to solve DeFi’s mainstream inaccessibility and lack of interoperability. A cross-chain wallet is a digital wallet that can store multiple types of cryptocurrencies and interact with multiple blockchain networks seamlessly. By using a cross-chain wallet, users can easily transfer assets between different chains, access a wider range of DeFi applications, minimize gas fees, diversify their holdings, and experience the inherent benefits of various different chains. These wallets will radically reduce the churn and friction users experience when interacting with multiple blockchains.
One of the biggest advantages of cross-chain wallets is their ability to reduce friction and increase efficiency. Instead of having to use multiple wallets or exchanges to manage different assets, users can consolidate everything in one place, abstracting away complex transactions that the user otherwise would have to manage. This can save time, reduce the risk of errors or mistakes, and lower the barrier to entry for new users.
Interstellar and Why LayerZero?
As Web3 continues to evolve, cross-chain wallets will become an essential tool for users. By enabling seamless interoperability between different blockchain networks, cross-chain wallets will enable a more integrated and accessible ecosystem.
As part of our research, we explored the underlying infrastructure necessary to build a world-class cross-chain wallet. To enable value transfer between chains, developers can leverage cross-chain messaging protocols which support arbitrary contract invocation on disparate chains.
When selecting cross-chain messaging infrastructure for a wallet, application developers should consider: security, ease of implementation, user experience, and supported networks. As part of our research, we looked into multiple messaging infrastructure protocols across these criteria and decided to leverage LayerZero for our wallet MVP.
LayerZero is a cross-chain interoperability protocol that enables communication between various blockchain networks via seamless, lightweight message passing. Using LayerZero in building a cross-chain wallet offers multiple core benefits:
Efficient and secure communication – LayerZero enables fast and secure communication between different blockchain networks, which significantly reduces transaction times and leads to improved overall user experience. LayerZero is the only messaging protocol at scale ($10B+ value secured) which has never lost user funds. Additionally, all transactions are protected by Pre-Crime, a proprietary security layer that tests all messages locally before running across mainnet.
Developer-friendliness – LayerZero is developer-friendly, providing an easy-to-use API for builders to integrate cross-chain messaging directly into their applications. On top of this, the LayerZero team also offers a strong support team to debug issues and review code.
Seamless integration – LayerZero seamlessly integrates with different blockchain networks enabling users to manage multiple cryptocurrencies in a single wallet without the need for multiple accounts or wallets. Additionally, LayerZero integration includes gas abstraction, a feature that allows end-users to pay for a multichain transaction with their native source gas token.
Lower transaction fees – LayerZero enables cross-chain transactions with lower fees compared to traditional cross-chain solutions, which can result in savings for users. In particular, Stargate’s unique protocol design leverages unified liquidity pools for 1:1 native asset cross-chain swaps unlocking cost efficiency without compromising on security.
Wide Range of Supported Networks - LayerZero supports a large range of networks–currently 30+ EVMs and non-EVMs– including Ethereum, Polygon, Avalanche, Aptos, BNB, Optimism Arbitrum, and more.
Overall, LayerZero's fast and secure cross-chain messaging protocol makes it an ideal solution for building a cross-chain wallet. It enables seamless integration with multiple blockchain networks, provides lower transaction fees, and provides increased security and reliability as its ultimate guarantee. Its developer-friendly nature also means that it can be easily integrated into existing applications, making it an attractive solution for building cross-chain wallets.
Competitive Landscape
The cross-chain wallet competitor landscape is largely dominated by a few top wallets which have already established a positive brand image and user sentiment.
Competitor Analysis
Benchmarking
User Sentiment/Adoption vs. Intuitive UI/UX Design
The following competitive landscape displays a cross-comparison of industry-wide cross-chain wallet providers based on the metrics of user sentiment/adoption versus an intuitive, user-supported user interface design. The metrics were determined from user and industry interviews as well as online presence and average user count.
Metrics
Throughout our market research, we identified several important features that are key to a wallet’s mainstream adoption and ease of use:
-
Simple and intuitive UI design with abstracted swapping processes for streamlined user experience to increase overall wallet adoption. Overly complex UI designs frequently confuse users during the swaps, hindering adoption.
-
An in-app portfolio tracker which enables users to monitor the performance of their digital assets and keep track of their balances across multiple blockchain networks.
-
“Discover” tabs to find other coins and dApps outside of DeFi to increase feature experience.
-
Educational videos are helpful when onboarding and retaining new users to Web3.
-
A “favorited” list of coins allows users to easily access their top coins when swapping.
-
Including coins that have been verified by the wallet provider bolsters user trust (usually by visually indicating verification next to the coin).
Industry Interviews
We conducted in-depth user interviews with 25 users with a variety of experiences with cryptocurrencies and wallets.
User Demographics New cross-chain users – 28% (7) Current cross-chain users – 32% (8) Developers – 40% (10)
We decided to interview primarily developers because they are also considered end-users for omni-chain/cross-chain wallets. We wanted to build a product with the considerations of developers in mind such that future developers can continue to build upon the product and improve it. We also chose to interview influential people in the cross-chain wallet space such as Gonzalo, LayerZero’s UX Lead. Additionally, to take into account the pain points of new cross-chain users, we decided to allocate a percentage of our interviews toward them.
We explored the problems for the following personas:
Interview Takeaways
-
Lack of user-friendliness – Some crypto wallets lack user-friendly interfaces, making it difficult for users to understand how to use them. In particular, users were most frustrated with a few key issues:
-
Unclear instructions and feedback when users make a mistake
-
Slow transactions
-
Users are not aware of the status of the transaction
-
Vague fee structure
-
Cumbersome onboarding experience
-
Difficult to identify which coin to use during swap to maximize value
-
-
Complexity – Crypto wallets can be complex to set up and use, especially for non-technical users. The process of creating a wallet, managing private keys, and executing transactions can be intimidating and confusing for many people.
- Several apps are needed for various purposes such as swapping, storing, etc.
Interstellar
UI/UX Design Choices
From our research, it is clear that there are many opportunities to improve the status quo wallet experience.
Through our designs, we focused on…
-
Abstracting away any information that is not absolutely necessary to prevent overwhelming the user.
-
Eliminating the need to rely on multiple services/DApps to accomplish one task.
-
Ensuring that users with all levels of understanding for cryptocurrencies feel supported and unrestricted in their financial decision-making process.
User Interface Design
We chose a design language that is coherent with LayerZero’s branding while incorporating our own twist that gives the wallet a distinct outer space theme. We maintained a mostly black-and-white color scheme, incorporating colors minimally only to denote statuses and particular information.
User Experience Design
1. Gas fee abstraction
Problem: The current experience for paying gas fees when the user does not own the asset needed requires the user to use multiple services in order to complete their transaction.
We wanted to reduce the headache of this process by eliminating the need for multiple services while providing the user with the necessary support to make the best decision for their goals. We came up with the following improved user flow:
2. Combining Bridging and Swapping
Problem: Most multi-chain wallets separate the concepts of bridging and swapping into two types of actions that a user can choose. However, the two services serve the same problem: the user wishes to exchange one asset for another.
Our improved designs combined the two concepts into one. The user can choose both the network and asset through dropdown menus.
3. Other experience improvements
Problem: Most wallets display current activities in a way that is either confusing or overwhelming for the user. Users are generally bombarded with a list of all past activities, which are sometimes buried behind multiple clicks.
Our design only highlights pending transactions, which are the most important to the user at first glance. If the user wishes to review all past transactions, they can do so from the profile dropdown in the top right corner.
Problem: Transaction confirmation pages include a large amount of information and new vocabulary that a new user could find extremely overwhelming. This could lead to paralysis, where the user gives up on the transaction or the user could ignore all the information.
Our improved design only displays the transaction rate and fee, while hiding all other information under “advanced info.” Though experienced users can still access this information if they wanted to, new users will not be deterred or misinformed.
Logo Design
Back-end Development
In order to better understand the current struggles, our team created our own Proof of Concept of what a cross-chain wallet could look like. For our development, we found it best to improve a current wallet rather than create our own, it was the simple question of why recreate the wheel. Because of this, we chose to work on a fork of the most popular wallet to date, MetaMask. Most of our work in development revolved around understanding the MetaMask codebase and then implementing the described bridging and accessibility features into the current architecture to create a more seamless experience for users.
LayerZero and Stargate
We’ll begin by exploring what LayerZero is. For a deeper dive, we would highly recommend reading their whitepaper.
LayerZero at its core is a messaging protocol that enables arbitrary contract invocation between chains. The protocol works through a validation system between independent relayer and oracle pairings which handle communication between endpoints. Endpoints are deployed on every network supported by LayerZero; these are smart contract libraries, the developer interface which handles validation. Within the network, relayers are any entity that can retrieve and submit a transaction proof, and oracles are any entity that can retrieve and submit a block header.
To understand the architecture, we will walk through a sample messaging flow. For example, let’s say I want to send a message from Ethereum to Polygon. I would first create and send a transaction to the LayerZero smart contract on Ethereum containing my message as well as the address of the recipient on Polygon. The message is then routed to a validator contract which sends the transaction proof to a relayer and a network contract which tells an oracle to fetch the block header. Once the block header has been confirmed, the Oracle sends it to the network contract on the Polygon chain. The information is passed to the validator contract which takes the block header and the proof from the relayer to verify the validity of the contract. Once the proof has been verified, the payload is sent to the communicator contract to be executed. The following diagram shows this interaction:
Stargate is a bridging protocol built on top of LayerZero’s messaging service. The Stargate protocol is the first protocol to solve the bridging trilemma (Instant Guaranteed Finality (source), Unified Liquidity, and Native Assets). It accomplishes this by maximizing the potential of the LayerZero protocol: Instant Guaranteed Finality is achieved without the insecure lockup and mint process used by other bridges – or “wrapped token bridge” model – and instead instantly transferring the native asset. This of course also solves the issue of native assets as well. The unified pools of liquidity balanced across the protocol with the proprietary Delta Algorithm are critical to achieving this. Finally, Unified Liquidity is achieved through a built-in, self-adjusting process that allows contracts to automatically replenish and provide other chains with more or less liquidity. This approach has been called fractured liquidity.
Experience
Overall, working through the MetaMask codebase has been quite an interesting experience. The codebase is designed in 2 sections: the backend and the frontend. Most of the backend work is contained in the app folder and contains all the scripts needed to pull and push information, keeping it independent from the front-end. The front-end is contained through a series of components in the UI folder.
For our project, we decided to build out most of our functionalities in the front-end of the program. Although severely less optimized, we felt that it would suffice for a proof of concept. If we were to restart the project from scratch and build a fully functional concept, we would have spent more time understanding the backend and building out functionality there while only making calls to the backend from the frontend - instead of handling everything in the front-end.
Adding on to our functionality experience, rather than using the natively built-in methods of signing transactions through creating a low-level contract call, we decided to use ethers.js to abstract away the complexities and allow for simpler contract calls. This worked well with our strategy of building everything in the front-end, allowing for rapid prototyping of the UX without worrying about low-level complexities.
After we architected out our wallet, the building process was relatively simple. We started by building out the bridge page to allow users to bridge native assets from one chain to another. We decided to work with Arbitrum, Optimism, and Ethereum since Arbitrum and Optimism are Ethereum Layer 2 solutions and use the same native assets. This made testing and implementation a lot easier as we were able to make more abstracted contract calls to Stargate’s EthRouter rather than their normal Router. After we completed our bridge page, we moved into our next endeavor, automatically querying balances on change and proposing bridging options when a user did not have enough assets.
We started with the first task, querying the balances on other chains. This simply involved making API calls to the equivalent Etherscan to see the user’s balance on the specific chain. From there, we simply added checks in the swap, send, and execute transaction flows that would check to see if a user didn’t have enough balance to execute the swap, check the user’s balance on other chains, and then recommend a bridge using the bridging method and strategy we defined above.
Most of this experience was accomplished through integration with LayerZero and their cross-chain bridging protocol, Stargate. Integration was a seamless experience due to the thorough and concise nature of their documentation, especially for developers. Building these protocols into our wallet was as simple as sending a transaction using ethers.js. Transaction monitoring was accomplished through queries to LayerZero’s custom bridging scanner, while gas fee estimations are built into contracts allowing for easy queries using ethers. Our team was very impressed with how easy and straightforward LayerZero was to work with.
The final step involved rebranding the UI. MetaMask utilizes a very nice branding system with text and color schemes defined in constants to allow for consistent themes throughout the wallet. The only issue is that the color schemes are defined in an npm package called MetaMask Design which is imported into the actual code. Because of our fear of modifying the imported package causing dependency failures and other issues, we decided to simply hard code the updated fonts and color scheme into the CSS of the front-end.
Challenges
In the end, our team found the greatest challenge in understanding the codebase. While the MetaMask codebase itself is relatively well documented, we struggled to find resources online or through connections to really help us understand what we needed to do and where we needed to start. A large bulk of our early progress was simply trying to understand the nature of how the frontend and backend interact as well as where to actually implement our desired functionality. In addition, we had tons of issues regarding dependencies and environments. Only half of our team was able to actually build the wallet, while the other half had issues with React and Node.js versions/dependencies. This led to a nightmare in coordinating independent tasks and work sessions and required us to make a majority of our progress during work sessions where one member would have to piggyback off of another.
Conclusion
Overall, we gathered a tremendous amount of unique insights from researching cross-chain messaging protocols, and current market trends and building out a more seamless wallet to allow for native gas abstractions between chains. It was very insightful engaging with wallet developers and end-users to identify needs and trends within the space; these interviews inform our thesis on the necessary steps to onboard the next million users in crypto. Wallets serve as the middleman between users and the space, so perfecting the wallet in essence helps create a better experience for all within the blockchain ecosystem. In addition, developing the wallet with the LayerZero team’s technical support has been a great experience. Despite the challenges we faced, their team was very supportive and eager to assist by whatever means possible.
Ultimately, from our market research, we noted that a majority of the wallet market space is controlled by two individuals: Coinbase and MetaMask. While Coinbase is more catered toward investors and those less crypto-native, MetaMask is an open-source project used by most crypto-native users in the space. Despite this, MetaMask seems to be heading in the wrong direction. From extremely harsh licensing that denies any sort of forking to very strict and slow updates, and collecting IP addressing, MetaMask seems to be slowly, but surely deviating away from the ideal wallet. While they hope to maintain control, it seems that people are beginning to understand the need for more competitors and better innovation in the wallet space.
However, throughout our experience, we learned just how hard it is for developers to build competing wallets. Because MetaMask’s licensing forbids code reuse or forking, developers who wish to build competing wallets must start from scratch. This is especially discouraging for less experienced wallet developers with new ideas. Furthermore, once a wallet is launched, it will struggle to compete with MetaMask and Coinbase, which already account for more than 90% of all wallet users. With their extensive integrations and partnerships with most dApps and products, it becomes even harder for new wallets to gain traction.
In conclusion, the dominance of a few players in the wallet market presents challenges for new entrants and innovations. Despite its popularity among crypto-native users, Metamask's strict licensing and slow updates have deviated from the ideal of an open-source wallet. The difficulties faced by new developers and competitors in this space pose a hindrance to the growth and mass adoption of cryptocurrency. The first wallet to enable truly secure and seamless cross-chain swaps – particularly from EVM to non-EVM – will experience a significant competitive moat and play a critical role in ushering in a cohort of net new users of DeFi and consumer-facing applications. LayerZero and Stargate infrastructure will play a critical role in this industry stride. It is essential that the industry continues to uphold the principles of open-source and decentralized systems, enabling new ideas and solutions to emerge and thrive across existing siloes of single chains. Only by sticking with the principles crypto was founded on can we ensure the long-term growth and sustainability of the broader ecosystem.
Sources
Proof of Concept Wallet:
https://github.com/LunrEclipse/fa22-wallet
Presentations:
Competitor Analysis:
https://medium.com/onto/a-cross-chain-wallet-designed-for-privacy-bde7b18a4bc9
https://medium.com/bifrost/cross-chain-wallets-in-the-web3-ecosystem-8b749116cff
https://blog.hubbleprotocol.io/what-are-cross-chain-wallets/
https://blog.thundercore.com/what-is-cross-chain-and-why-it-is-important-4e1abffeeff7
https://www.cryptovantage.com/best-crypto-wallets/keplr/
https://medium.com/coinmonks/how-to-use-the-frontier-wallet-34bd644f957a
https://morioh.com/p/b1597e51e9b9
Metrics:
https://earthweb.com/metamask-statistics/
Research:
https://layerzero.network/pdf/LayerZero_Whitepaper_Release.pdf