# @buildship/web3-login

> UX-focused web3 auth for your React app

Latest version **0.3.2-beta4** (published 2022-06-20) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @buildship/web3-login
pnpm add @buildship/web3-login
yarn add @buildship/web3-login
bun add @buildship/web3-login
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2-beta4 |
| Published | 2022-06-20 |
| First published | 2022-02-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 189.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | Buildship |
| Maintainers | caffeinum, theshad |
| Keywords | buildship, web3, ethereum, metamask, rainbow, walletconnect, walletlink, coinbase, magic, web3modal, web3auth, web3react |

## Links

- npm: https://www.npmjs.com/package/@buildship/web3-login
- Repository: https://github.com/buildship-dev/web3-login
- Homepage: https://github.com/buildship-dev/web3-login#readme
- Issues: https://github.com/buildship-dev/web3-login/issues
- npm.io page: https://npm.io/package/@buildship/web3-login

## Dependencies (5)

- [@3rdweb/hooks](https://npm.io/package/@3rdweb/hooks.md) 1.9.0
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.8.3
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.9.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.8.1
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.8.4

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.3.2-beta4 (latest) — 2022-06-20
- 0.3.2-beta3 — 2022-06-20
- 0.3.2-beta2 — 2022-06-17
- 0.3.2-beta1 — 2022-06-17
- 0.3.2-beta — 2022-06-17
- 0.3.1 — 2022-06-13
- 0.3.0 — 2022-06-13
- 0.3.0-0 — 2022-06-13
- 0.2.16 — 2022-06-13
- 0.2.15-0 — 2022-06-13
- 0.2.14-0 — 2022-06-13
- 0.2.13-0 — 2022-06-13
- 0.2.12-0 — 2022-06-13
- 0.2.10-0 — 2022-06-12
- 0.2.7-0 — 2022-06-11
- … 13 more at https://npm.io/package/@buildship/web3-login/versions

## README

# @buildship/web3-login (beta)

<img src="public/screenshot.png" width="500" />

This is a design-focused web3 wallet connecting modal for React based on [Material UI](https://github.com/mui/material-ui). 

It supports [Metamask](https://metamask.io/), [WalletConnect](https://walletconnect.com/), [Coinbase Wallet](https://walletlink.org/) and wallet-less email auth via [Magic](https://magic.link).

## Getting started

Install with yarn:

```bash
yarn add @buildship/web3-login
```
Install with npm:

```bash
npm i @buildship/web3-login
```

Use it in your code:

```javascript
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](https://mui.com/customization/theming/), then pass your `theme` object like this:

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

[Default theme example](https://github.com/buildship-dev/web3-login/blob/main/src/styles/theme.tsx)

## 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](https://context.app) & [web3Modal](https://github.com/Web3Modal/web3modal) for inspiration, and to [web3-react](https://github.com/NoahZinsmeister/web3-react) and [Thirdweb](https://github.com/thirdweb-dev/ui) for making this easy.

---
_Source: https://npm.io/package/@buildship/web3-login · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._