@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, ConnectWeb3Modal, useWeb3 } 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()
    const [isOpen, setIsOpen] = useState(false)
    
    return <Web3Provider
        supportedChainIds={[1, 4]}
        connectors={connectors}>
            Connected address: {address}    
            <button onClick={() => setIsOpen(true)}>
              Connect wallet
            </button>
            <ConnectWeb3Modal 
              open={isOpen} 
              setOpen={setIsOpen}
            /> 
    </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.