https://github.com/zeroxbrock/protect-button
React button that connects Metamask to Flashbots Protect when clicked
https://github.com/zeroxbrock/protect-button
Last synced: 11 months ago
JSON representation
React button that connects Metamask to Flashbots Protect when clicked
- Host: GitHub
- URL: https://github.com/zeroxbrock/protect-button
- Owner: zeroXbrock
- Created: 2023-03-10T01:49:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-17T22:30:11.000Z (over 2 years ago)
- Last Synced: 2025-08-09T13:39:45.886Z (11 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/protect-button
- Size: 1.75 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Connect to Protect
React component: a button that connects Metamask to Flashbots Protect when clicked.
## Dependencies
* [react ^18](https://reactjs.org/)
### OPTIONAL
* [metamask-react](https://www.npmjs.com/package/metamask-react) - The component accepts a callback `addChain` given by `useMetaMask` from metamask-react to handle the low-level connection to Metamask.
## Run demo
Build from source:
```sh
cd protect
yarn install && yarn build
cd ..
```
Run demo:
```sh
cd web-demo
npm install && npm start
cd ..
```
## Using in your library
Install from npm:
```sh
yarn add protect-button
# or
npm i protect-button
```
Alternatively, if you built from source:
```sh
yarn add ../protect-button
# or
npm i ../protect-button
```
```tsx
Connect to Protect (Mainnet)
```
`addChain` is optional; if omitted, component will use `window.ethereum`
```tsx
Connect to Protect (Goerli)
```
### Full example
In a React file (tsx or jsx):
```tsx
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 (
{status === 'notConnected' && (
Connect to MetaMask
)}
{status !== 'connected' && status !== "notConnected" && (
Connecting to MetaMask...
)}
{status === 'connected' && (<>
Connect to Protect (Mainnet)
{/* addChain is optional; if ommited, will use `window.ethereum` */}
Connect to Protect (Goerli)
>)}
);
}
export default App
```