@buildship/web3-login v0.3.2-beta4
@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>
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.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago