0.4.6 • Published 7 months ago
protect-button v0.4.6
Connect to Protect
React component: a button that connects Metamask to Flashbots Protect when clicked.
Dependencies
OPTIONAL
- metamask-react - The component accepts a callback
addChain
given byuseMetaMask
from metamask-react to handle the low-level connection to Metamask.
Usage
<ProtectButton addChain={addChain} chainId={1}>Connect to Protect (Mainnet)</ProtectButton>
addChain
is optional; if omitted, component will use window.ethereum
<ProtectButton chainId={5}>Connect to Protect (Goerli)</ProtectButton>
Full example
import React from 'react'
import './App.css'
// using metamask-react is optional but recommended
import { useMetaMask } from 'metamask-react'
import ProtectButton from "protect-button"
function App() {
const { status, connect, addChain } = useMetaMask()
return (
<div className="App">
<header className="App-header">
{status === 'notConnected' && (
<button onClick={connect}>Connect to MetaMask</button>
)}
{status !== 'connected' && status !== "notConnected" && (
<span>Connecting to MetaMask...</span>
)}
{status === 'connected' && (<>
<ProtectButton addChain={addChain} chainId={1}>Connect to Protect (Mainnet)</ProtectButton>
{/* addChain is optional; if ommited, will use `window.ethereum` */}
<ProtectButton chainId={5}>Connect to Protect (Goerli)</ProtectButton>
</>)}
</header>
</div>
);
}
export default App