https://github.com/fsobh/web3-wallets
https://github.com/fsobh/web3-wallets
crypto react wallets web3
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fsobh/web3-wallets
- Owner: fsobh
- Created: 2022-03-09T01:18:37.000Z (about 4 years ago)
- Default Branch: Dev
- Last Pushed: 2022-07-17T22:43:57.000Z (almost 4 years ago)
- Last Synced: 2025-02-25T20:39:52.244Z (about 1 year ago)
- Topics: crypto, react, wallets, web3
- Language: JavaScript
- Homepage:
- Size: 4.34 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web3 wallets (React.js)
### Integrate Web3 Wallets into your Dapp with just a few lines of code
#### Wallet state remains consistant throughout Dapp navigation
[](https://img.shields.io/badge/JavaScript-%23FFFF00) [](https://img.shields.io/badge/-ReactJS-cyan)
[](https://img.shields.io/badge/Meta%20Mask-wallet-orange)
[](https://img.shields.io/badge/Formatic-wallet-%236851FF)
[](https://img.shields.io/badge/Coinbase-wallet-blue)
[](https://img.shields.io/badge/Wallet%20connect-wallet-red)
[](https://img.shields.io/badge/Portis-wallet-%237e33ee)
## Installation
#### Install the Package
```bash
npm install web3-wallets-react
```
> **Warning**
> Incase you encounter an issue with webpack :
>> 1. Change the version of react-scripts in package.json to ```"react-scripts": "4.0.3"```
>> 2. Run ```rm -rf node_modules```
>> 3. Run ```rm -f package-lock.json```
>> 4. Run ```npm install```
## Import the module Provider in Index.js
```javascript
import { WalletProvider } from 'web3-wallets-react'
```
## Wallet Provider props
| Parameter | Type | Description |
| :------- | :------------------- | :-------------------------------- |
| `allowedWallets` | `Array` | **Optional**. List of wallets you want available in your Dapp : ` metamask , walletconnect , coinbase , formatic , portis `. Defaults to all (excluding portis, formatic, and coinbase **UNLESS** you provided their configurations in `formaticOptions` & `portisOptions` ) |
| `allowedNetworks` | `Array` | **Optional**. List of networks your Dapp should support (chain ID's). Defaults to `[1,4]` (mainnet & rinkeby) |
| `formaticOptions` | `Object` | **Required if**. you want formatic as an option for wallet use. ex : `{key : "", network : "mainnet"}` |
| `portisOptions` | `Object` | **Required if**. you want portis as an option for wallet use. ex : `{key : "", network : "mainnet"}` |
| `coinbaseOptions` | `Object` | **Required if**. you want coinbase as an option for wallet use. ex : `{ appName: "name of your Dapp", logo : "url to your apps logo", jsonrpc : "<-rpc-url->", defaultChain : 1}` |
## Example
```javascript
//index.js
import {WalletProvider} from 'web3-wallets-react'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(
" /** Heres a list of networks that portis support (make sure to include the network ID in allowedNetworks prop as well) https://docs.portis.io/#/configuration */
}}
formaticOptions = {{
key: "formatic-api-key",
network : "" /** Heres examples of networks that formatic support (make sure to include the network ID in allowedNetworks prop as well) https://docs.fortmatic.com/web3-integration/network-configuration */
}}
coinbaseOptions = {{
appName: "name of your Dapp",
logo : "url to your apps logo", /**Optional */
jsonrpc : "<-rpc-url->",
defaultChain : 1
}}
>
, document.getElementById('root'))
```
## App.js
```javascript
//App.js
import React from 'react'
import { BrowserRouter,Route, Routes } from "react-router-dom";
import Home from './Pages/Home';
import Account from './Pages/Account';
import Network from './Pages/Network';
const App = () => {
return (
} />
} />
} />
);
}
export default App;
```
## Wallet Button usage & creating a transaction
### ```commitTransaction(to, amount, functionABI=false, functionParameters = [])```
| Parameter | Type | Description |
| :------- | :------------------- | :-------------------------------- |
| `to` | `String` | **Required**. The address of the wallet / contract you want to interact with |
| `amount` | `String` | **Required**. Amount of ethers you are sending to the reciever. Set to 0 if your contract function does not require eth to be sent to it |
| `functionABI` | `JSON Object` | **Required if your calling a contract function**. The JSON Object ABI of the contract function your calling (Not the entire contracts ABI ) - (this gets generated when you compile your Smart contract) |
| `functionParameters` | `Array` | **Required if your calling a contract function that takes arguments**. The arguments you want to pass into the function your calling. The length of the Input array from your ABI object must be equal to the length of this parameter |
```javascript
//Home.js
import React from 'react'
import {WalletButton,WalletContext} from 'web3-wallets-react'
import 'web3-wallets-react/dist/index.css'
import Nav from '../Components/Nav'
const Home = () => {
const { commitTransaction} = React.useContext(WalletContext)
return(
{
//Sending eth to a wallet
await commitTransaction("0x642dC956a520BbF8A76fc1ec70B2515a8f0A4f89","0.05")
}}>
transact
{
//calling a contracts mint function
let contractAddress = "0xA72Df45fD3B3B0E6D47DB7Ed5a579c8B4de527C1";
let mintFunctionArguments = ["0x9269d990B8a6EF01e1b6D554cb1A05dE4cBf2D2c", "https://example.com/meta-data-url"];
let mintFunctionAbi = {
"inputs": [
{
"internalType": "address",
"name": "to",
"type": "address"
},
{
"internalType": "string",
"name": "uri",
"type": "string"
}
],
"name": "mint",
"outputs": [
{
"internalType": "uint256",
"name": "newTokenID",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
};
await commitTransaction(contractAddress, "0.05", mintFunctionAbi, mintFunctionArguments);
}}>
call mint function
);
}
export default Home;
```
#### Rendering connected wallet info :
```javascript
import React from 'react'
import {WalletContext} from 'web3-wallets-react'
import 'web3-wallets-react/dist/index.css'
const Account = () => {
const {connectedWallet} = React.useContext(WalletContext)
return
{connectedWallet.account || 'not connected'}
{connectedWallet.selectedNetwork || 'not connected'}
{connectedWallet.allowedNetworks || 'not connected'}
{connectedWallet.isAuthenticated || 'not connected'}
{connectedWallet.protocal || 'not connected'}
}
export default Account;
```
## Future plans
- Re-write this package using TypeScript
- Build a better interface for creating transactions, calling smart contracts, and requesting signatures
- Add support for more wallets
- Add the ability to customize the wallet button and Modal styles
- Add error modal popups for failed transactions
- Add the ability to alternate between accounts in app
- Add option to display a QR code modal when prompting to send eth to a certain address
## Authors
- [@fsobh](https://github.com/fsobh)
- Donation address : `0x28DcF6c93C63B76aad9510234E1415Fc31468753`
- ENS domain : `oblock.eth`