web3-login's Introduction

@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.

web3-login's People

Contributors

Stargazers

Watchers

web3-login's Issues

No error when connecting to wrong network

If your metamask connected to BSC, but website wants Ethereum Mainnet, no error appears after clicking Metamask

Callbacks on Auth

Does this library have any callbacks for dealing with data that was authenticated with? For example, a hook to send this data to a database for a user who is authenticating for the first time etc.