Design-focused web3 modal based on Material UI

Related tags

Learning resource web3-login
Overview

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

You might also like...

MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

Dec 30, 2022

Bootstrap 5 & Material Design 2.0 UI KIT

Bootstrap 5 & Material Design 2.0 UI KIT

Bootstrap 5 UI KIT - 700+ components, plain JavaScript, MIT license, simple installation. MDB is a collection of free Bootstrap templates, themes, des

Dec 30, 2022

Efeito de ripples baseado no Material Design.

Efeito de ripples baseado no Material Design feito com CSS, JavaScript e jQuery Esse efeito utiliza seletores do jQuery e manipulação do DOM para obte

Nov 24, 2022

Fully controllable vanilla-js material design ripple effect generator.

Fully controllable vanilla-js material design ripple effect generator. This can be used with any JavaScript framework and/or any CSS framework. Demo I

Dec 16, 2022

Qwerty is the first social website focused on connecting students with similar classes and gender identities

Qwerty is the first social website focused on connecting students with similar classes and gender identities

🌈 Qwerty 🌈 Qwerty is the first social website focused on connecting students with similar classes and gender identities. To get started simply input

Oct 21, 2022

Privacy-focused Google Fonts alternative

Privacy-focused Google Fonts CDN alternative I wrote it in an hour, so please report bugs here. Several improvements could be made here and there, so

Dec 27, 2022

A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

Aug 26, 2022

A focused RESTful server framework for Deno 🌰🦕

acorn Rapidly develop and iterate on RESTful APIs using a strongly typed router designed for Deno CLI and Deno Deploy. import { Router } from "https:/

Dec 10, 2022

The project focused on creating To do list structure for organising the daily completed or non-completed activities.

Project to build a simple HTML list of To Do tasks. The list will be styled according to the specifications given by Microverse This simple web page will be built using webpack and served by a webpack dev server.

May 20, 2022
Comments
  • Adding resolve.fallback to remove polyfill errors while using package

    Adding resolve.fallback to remove polyfill errors while using package

    While trying to use package web3-login in react app (created using CRA).

    We encounter polyfill errors while building user app

    https://pastebin.com/4qvwjGgX.

    This is due to the default webpack config present in users app doesn't contain fallback properties. https://webpack.js.org/configuration/resolve/#resolvefallback

    we need a way to override user app's webpack config to solve this issue.

    opened by Devender2608 5
  • use unbuild instead of rollup

    use unbuild instead of rollup

    unbuild and tsup use the same rollup under the hood, but they use optimized compiler.

    TODO

    • [ ] remove build from the repo again
    • [ ] publish to npm
    • [ ] setup autopublish via github actions?
    opened by caffeinum 1
  • components: add ConnectWalletButton, AddressView

    components: add ConnectWalletButton, AddressView

    Added connect wallet component that keeps track of the modal state open/closed. Use like this:

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

...
  
  <ProfileView {...} />

  <AddressView isShort={true} />
    opened by caffeinum 2
  • Callbacks on Auth

    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.

    opened by rosman83 1
Releases(v0.1.1-beta)
Owner
Buildship
Mint, own & customize your NFT collection
Buildship
GitHub https://npmjs.com/package/@buildship/web3-login
A complete template for 2022 focused on around React, Postgres and various web3 integrations.

A complete template for 2022 focused on around React, Postgres and various web3 integrations. You can use the template to make a website, a web application, a hybrid decentralized web application, or even a DAO.

jim 45 Dec 22, 2022
Web3-citizens-app - React application based on smart contract using web3 and MetaMask extention.

Citizens App (web3-react-redux) React application based on smart contract using web3 and MetaMask extention. Start the applicarion Recomend to install

Denys Voloshyn 3 Aug 25, 2022
A web3 starter project using Typescript, Hardhat, ethers.js and @web3-react

Starter React Typescript Ethers.js Hardhat Project This repo contains a Hardhat and React Dapp starter project. The React Dapp in the frontend dir of

ChainShot 39 Dec 31, 2022
(🔗, 🌲) Web3 Link Tree is a free & open-source alternative to Linktree built with React.js, Next.js, Tailwind and Web3-React

Getting Started Read the detailed guide here Customize Add your name, wallet address, social media links and more in config.ts Images Save images to t

Naut 35 Sep 20, 2022
🛠 Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

?? Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

Holaplex 30 May 21, 2022
Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines.

Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines. A timeline is a collection of links that share a common topic or a journey of building and learning something new. Users can create timelines, share them publicly, and explore resources.

Students' Web Committee 14 Jun 13, 2022
Promise-based utility to control modal states in React

Promise-based utility to control modal states in React Zero-dependency library that easily integrates with your existing UI components and allows you

Thiago Zanivan 8 Dec 5, 2022
Dialogs based on Bootstrap 5 modal

Simple dialogs based on Bootstrap 5 modal Lightweight pure js dialogs library, min ad gz size less 2 kB Dependencies bootstrap 5 demo Dialogs ok_cance

Alexander 7 Oct 29, 2022
Material Design implemented in Web Components (Custom Elements v1)

Material Web Components Material Design implemented in Web Components (Custom Elements v1) https://dannymoerkerke.github.io/material-webcomponents/ Ge

Danny Moerkerke 110 Nov 14, 2022
🖼️ Bringing Material Design 3 to the Astro Blog. [WIP]

??️ Gumori You [WIP] Bringing Material Design 3 to the Astro Blog. ?? Contributing If you're interested in contributing to Gumori You, pls read the fo

!mportantImport 4 Oct 16, 2022