Go Back

News & Updates

Reading progress

Wallet01: Huddle01’s all-new open-source, multi-chain wallet package 📦

Building a chain-agnostic application is a monolithic task. Wallet01 enables chain-agnostic interaction in your dApp with just a single plug in.

Huddle01

Dec 27, 2022

Share on

The future of web3 is multi-chain.

Users from numerous blockchain ecosystems are looking to engage with multiple dApps seamlessly. Hence, building a chain-agnostic application will not only get you more users but also enhance their experience. However, chain-agnostic dApps are a headache to build right now, with developers having to write custom code to incorporate multiple blockchains and their pre-existing packages.

Wallet01 is an open-source, multi-chain wallet package built to enable chain-agnostic interaction in your application with just a single plug in. Once added, it facilitates a smooth and reliable onboarding experience for your users from various chain ecosystems.

Building a chain-agnostic application is a monolithic task

It needs stacks of code and hours of research on the internet:

1. Differing chain standards

Mismatched standards between blockchains are the biggest barrier for chain-agnostic applications:

Different APIs
Different environment
Different standards for addresses and key management

2. Lack of proper documentation

Blockchain standards are often poorly defined and are only understood after spending countless hours digging through multiple codebases.

3. UX at the cost of DX

Programmers go to great lengths to provide a better User Experience. However, building a good chain-agnostic application looks like a trade-off for a better Developer Experience.

Wallet01 enables a fast & reliable DX

It saves you a significant amount of time researching and writing code so that you can spend that time adding more cool features to your application.

Here’s how you can incorporate Wallet01 into your application:

Wallet01 is an ecosystem of packages

This ecosystem makes your application light and modular, with space for more features.

Wallet01 Ecosystem consists of 3 packages:

Core Package: @wallet01/core serves as the brain of the ecosystem, setting up the standards and procedures for all the other ecosystem packages.
Ecosystem Package: @wallet01/evm, @wallet01/solana, and @wallet01/cosmos serve as the mediator between Wallet01 standards and the chain standards.
Framework Package: @wallet01/react serves as the developer front, helping you scaffold a chain-agnostic application with React.

How does Wallet01 work?

Let’s get into the good part: making a chain-agnostic application with Wallet01 on NextJS 🧑🏻‍💻

1️⃣ Installation npm i @wallet01/react @wallet01/evm @wallet01/solana @wallet01/cosmos

2️⃣ Initiation

import { Wallet01 } from '@wallet01/react';

import { InjectedConnector } from '@wallet01/evm';
import { KeplrConnector } from '@wallet01/cosmos';
import { PhantomConnector } from '@wallet01/solana';

function MyApp({ Component, pageProps }) {

    const desiredConnectors = [
        new InjectedConnector(),
        new KeplrConnector(),
        new PhantomConnector(),
    ]

    return (
        <Wallet01 autConnect={true} connectors=(() => desiredConnectors)>
            <Component {...pageProps} />
        </Wallet01>
    )
}

export default MyApp;

3️⃣ Connect Buttons

import React from 'react'
import { useClient, useConnect, useWallet } from '@wallet01/react'

const ConnectButtons = () => {
    const { connectors } = useClient()
    const { connect } = useConnect()

    return (
        <div>
            {
                connectors.map((connector) => (
                    <button
                        key={connector.name}
                        onCLick={() => {
                            connect({connector})
                        }
                    >
                        {connector.name}
                    </button>
                ))
            }
        <div>

4️⃣ Setting up the Home Page

import React from 'react';
import { useWallet } from '@wallet01/react'

import { ConnectButtons } from 'components/ConnectButtons';

const Home = () => {
    const { isConnected, address, name } = useWallet()

    return (
        <div>
            {
                !isConnected ? <ConnectButtons /> : (
                    <div>
                        <span>{address}</span>
                        <span>{name}</span>
                    </div>
                )
            }
        </div>
    )
}

5️⃣ Final Application: (With a dash of CSS 😉)

Krupali Trivedi

Wallet01: Huddle01’s all-new open-source, multi-chain wallet package 📦

Huddle01

Building a chain-agnostic application is a monolithic task

1. Differing chain standards

2. Lack of proper documentation

3. UX at the cost of DX

Wallet01 enables a fast & reliable DX

Wallet01 is an ecosystem of packages

How does Wallet01 work?

Want to start right away?

other Posts you may like

other Posts you may like

Create a Personalized Hub and Hangout with your Community on Huddle01 Meet

Create a Personalized Hub and Hangout with your Community on Huddle01 Meet

Huddle01 and Xai: Unleashing Unparalleled Gaming Experience

Huddle01 and Xai: Unleashing Unparalleled Gaming Experience

Immersive Next-gen Gaming with Huddle01 dRTC

Immersive Next-gen Gaming with Huddle01 dRTC

Media Nodes: The Atomic Unit of Huddle01's dRTC Network

Media Nodes: The Atomic Unit of Huddle01's dRTC Network

Huddle01 and Aethir: Revolutionizing Cloud Gaming with Decentralized Real-Time Communication

Huddle01 and Aethir: Revolutionizing Cloud Gaming with Decentralized Real-Time Communication

Arbitrum x Huddle01 x Caldera AMA Round Up 🎙️

Arbitrum x Huddle01 x Caldera AMA Round Up 🎙️