@buildship/web3-login (beta)

This is a design-focused web3 wallet connecting modal for React based on Material UI.

It supports Metamask, WalletConnect, Coinbase Wallet and wallet-less email auth via Magic.

Getting started

Install with yarn:

yarn add @buildship/web3-login

Install with npm:

npm i @buildship/web3-login

Use it in your code:

import { Web3Provider, ConnectWallet, AddressView } from "@buildship/web3-login";

// Wallets that you want to support
const connectors = {
    // Metamask
    injected: {},
    magic: {
        apiKey: "pk_...", // Your Magic api key
        chainId: 1, // The chain ID you want to allow on Magic
    },
    walletconnect: {},
    // Coinbase
    walletlink: {
        appName: "Buildship Example",
        url: "https://buildship.dev", 
        darkMode: false,
    }
}

const App = () => {
    const { address } = useWeb3()

    return <Web3Provider
        supportedChainIds={[1, 4]}
        connectors={connectors}>

        {/* autoOpen will pop the modal on page load */}
        <ProfileView autoOpen={false}
            renderButton={({ children, onClick }) => (
            <button className="my-button-class" onClick={onClick}>
                {children}
            </button>
            )}
        />

    </Web3Provider>
}

Theming

Follow Material UI guide on theming, then pass your theme object like this:

<Web3Provider
    theme={theme}
    connectors={connectors}> 
    // ...
</Web3Provider>

Default theme example

Plans

• [ ] Support hooks for backend auth
• [ ] Improve experience for Metamask users on mobile
• [ ] Fix WalletConnect mobile deeplink issues
• [ ] Vanilla JS (pure JS) support for in-browser games, etc.
• [ ] Native support for Ledger
• [ ] Support hooks for ENS

Contributing & issues

Feel free to open a PR or an issue! Contact us at https://buildship.dev/ if you have additional questions

Thanks

Huge thanks to context.app & web3Modal for inspiration, and to web3-react and Thirdweb for making this easy.