{"id":21663046,"url":"https://github.com/fsobh/web3-wallets","last_synced_at":"2026-02-08T13:05:14.234Z","repository":{"id":57698029,"uuid":"467733087","full_name":"fsobh/web3-wallets","owner":"fsobh","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-17T22:43:57.000Z","size":4556,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"Dev","last_synced_at":"2025-02-25T20:39:52.244Z","etag":null,"topics":["crypto","react","wallets","web3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fsobh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-09T01:18:37.000Z","updated_at":"2022-06-03T12:41:51.000Z","dependencies_parsed_at":"2022-09-26T21:02:02.087Z","dependency_job_id":null,"html_url":"https://github.com/fsobh/web3-wallets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fsobh%2Fweb3-wallets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fsobh%2Fweb3-wallets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fsobh%2Fweb3-wallets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fsobh%2Fweb3-wallets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fsobh","download_url":"https://codeload.github.com/fsobh/web3-wallets/tar.gz/refs/heads/Dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244560390,"owners_count":20472220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crypto","react","wallets","web3"],"created_at":"2024-11-25T10:19:17.166Z","updated_at":"2026-02-08T13:05:14.114Z","avatar_url":"https://github.com/fsobh.png","language":"JavaScript","readme":"\u003cp align=\"center\" style=\"border-radius:50%\"\u003e\n    \u003ca href=\"https://aws.amazon.com\" title=\"W3 Wallets\" style=\"border-radius:50%\"\u003e\n        \u003cimg  height=230px src=\"https://open-rpg-images.s3.us-east-2.amazonaws.com/web3blue.jpg\" alt=\"W3 Wallets\" style=\"border-radius:50%\" \u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n# Web3 wallets (React.js)\n### Integrate Web3 Wallets into your Dapp with just a few lines of code\n#### Wallet state remains consistant throughout Dapp navigation\n\n   [![JavaScript](https://img.shields.io/badge/JavaScript-%23FFFF00)](https://img.shields.io/badge/JavaScript-%23FFFF00)    [![ReactJS](https://img.shields.io/badge/-ReactJS-cyan)](https://img.shields.io/badge/-ReactJS-cyan) \n   [![MetaMask](https://img.shields.io/badge/Meta%20Mask-wallet-orange)](https://img.shields.io/badge/Meta%20Mask-wallet-orange) \n   [![Formatic](https://img.shields.io/badge/Formatic-wallet-%236851FF)](https://img.shields.io/badge/Formatic-wallet-%236851FF) \n   [![Coinbase](https://img.shields.io/badge/Coinbase-wallet-blue)](https://img.shields.io/badge/Coinbase-wallet-blue)\n   [![Walletconnect](https://img.shields.io/badge/Wallet%20connect-wallet-red)](https://img.shields.io/badge/Wallet%20connect-wallet-red)\n   [![Portis](https://img.shields.io/badge/Portis-wallet-%237e33ee)](https://img.shields.io/badge/Portis-wallet-%237e33ee)\n   \n\n\u003c/div\u003e\n\n\n## Installation\n####  Install the Package\n\n```bash\n  npm install web3-wallets-react\n```\n\n\n\u003e **Warning**\n\u003e Incase you encounter an issue with webpack : \n\u003e\u003e 1. Change the version of react-scripts in package.json to ```\"react-scripts\": \"4.0.3\"```\n\u003e\u003e 2. Run ```rm -rf node_modules```\n\u003e\u003e 3. Run ```rm -f package-lock.json```\n\u003e\u003e 4. Run ```npm install```\n\n\n## Import the module Provider in Index.js\n\n```javascript\n import { WalletProvider } from 'web3-wallets-react'\n```\n\n## Wallet Provider props\n| Parameter | Type                | Description                       |\n| :------- | :------------------- | :--------------------------------  |\n| `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` \u0026 `portisOptions` ) |\n| `allowedNetworks`  |  `Array`   | **Optional**. List of networks your Dapp should support (chain ID's). Defaults to `[1,4]` (mainnet \u0026 rinkeby) |\n| `formaticOptions`  |  `Object`  | **Required if**.  you want formatic as an option for wallet use. ex : `{key : \"\u003cyou-api-key\u003e\", network : \"mainnet\"}`  |\n| `portisOptions`    |  `Object`  | **Required if**.  you want portis as an option for wallet use. ex : `{key : \"\u003cyou-api-key\u003e\", network : \"mainnet\"}`  |\n| `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 : \"\u003c-rpc-url-\u003e\", defaultChain : 1}`  |\n\n## Example\n\n```javascript\n//index.js\nimport {WalletProvider} from 'web3-wallets-react'\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\n\nReactDOM.render(\n\u003cWalletProvider  \n    allowedWallets={[\n        \"metamask\",\n        \"walletconnect\",\n        \"coinbase\",  \n        \"formatic\", \n        \"portis\"   \n    ]} \n\n    allowedNetworks={[\n        1,/**mainnet */\n        4 /**Rinkeby */ ,\n        1030 /**ConFlux espace chain */,\n        1666600000 /**Harmony mainnet (shard 0) */\n        /** +150 chains registered */]}\n    portisOptions = {{\n\n        key: \"portis-api-key\",\n        network : \"\u003cnetwork NAME \u003e\" /** 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 */\n\n    }}\n    formaticOptions = {{\n\n        key: \"formatic-api-key\",\n        network : \"\u003cnetwork NAME \u003e\" /** 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 */\n\n    }}\n\n    coinbaseOptions = {{\n\n        appName: \"name of your Dapp\",\n        logo : \"url to your apps logo\", /**Optional */\n        jsonrpc : \"\u003c-rpc-url-\u003e\",\n        defaultChain : 1\n    \n    }}\n\u003e\n    \u003cApp /\u003e\n\u003c/WalletProvider\u003e, document.getElementById('root'))\n\n```\n## App.js\n\n```javascript\n//App.js\nimport React from 'react'\nimport { BrowserRouter,Route, Routes } from \"react-router-dom\";\nimport Home from './Pages/Home';\nimport Account from './Pages/Account';\nimport Network from './Pages/Network';\n\nconst App = () =\u003e {\n\n  return ( \n  \u003cBrowserRouter\u003e \n    \u003cRoutes\u003e\n      \u003cRoute path=\"/\" element={\u003cHome/\u003e} /\u003e\n      \u003cRoute path=\"net\" element={\u003cNetwork/\u003e} /\u003e\n      \u003cRoute path=\"acc\" element={\u003cAccount/\u003e} /\u003e\n    \u003c/Routes\u003e\n  \u003c/BrowserRouter\u003e);\n}\n\nexport default App;\n\n```\n## Wallet Button usage \u0026 creating a transaction\n\n### ```commitTransaction(to, amount, functionABI=false, functionParameters = [])``` \n| Parameter | Type                | Description                       |\n| :------- | :------------------- | :--------------------------------  |\n| `to`  |  `String`   | **Required**. The address of the wallet / contract you want to interact with |\n| `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 |\n| `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) |\n| `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 |\n\n```javascript\n//Home.js \nimport React from 'react'\nimport  {WalletButton,WalletContext}  from 'web3-wallets-react'\nimport 'web3-wallets-react/dist/index.css'\nimport Nav from '../Components/Nav'\nconst Home = () =\u003e {\n  const { commitTransaction} = React.useContext(WalletContext)\n\n  return( \n  \u003cdiv\u003e\n    \u003cNav/\u003e\n      \u003cbr/\u003e\n      \u003cWalletButton/\u003e\n      \u003cbr/\u003e\n      \u003cbutton onClick={async ()=\u003e {\n      \n          //Sending eth to a wallet\n          await commitTransaction(\"0x642dC956a520BbF8A76fc1ec70B2515a8f0A4f89\",\"0.05\")\n      \n      }}\u003e \n        transact \n      \u003c/button\u003e\n      \n            \u003cbutton onClick={async ()=\u003e {\n      \n          //calling a contracts mint function\n          \n          let contractAddress = \"0xA72Df45fD3B3B0E6D47DB7Ed5a579c8B4de527C1\";\n          let mintFunctionArguments = [\"0x9269d990B8a6EF01e1b6D554cb1A05dE4cBf2D2c\", \"https://example.com/meta-data-url\"];\n          let mintFunctionAbi = {\n                \"inputs\": [\n                  {\n                    \"internalType\": \"address\",\n                    \"name\": \"to\",\n                    \"type\": \"address\"\n                  },\n                  {\n                    \"internalType\": \"string\",\n                    \"name\": \"uri\",\n                    \"type\": \"string\"\n                  }\n                ],\n                \"name\": \"mint\",\n                \"outputs\": [\n                  {\n                    \"internalType\": \"uint256\",\n                    \"name\": \"newTokenID\",\n                    \"type\": \"uint256\"\n                  }\n                ],\n                \"stateMutability\": \"nonpayable\",\n                \"type\": \"function\"\n                };\n            \n            \n          \n          await commitTransaction(contractAddress, \"0.05\", mintFunctionAbi, mintFunctionArguments);\n      \n      }}\u003e \n        call mint function\n      \u003c/button\u003e\n  \u003c/div\u003e\n   );\n}\nexport default Home;\n```\n#### Rendering connected wallet info : \n\n```javascript\n\nimport React from 'react'\nimport  {WalletContext}  from 'web3-wallets-react'\nimport 'web3-wallets-react/dist/index.css'\nconst Account = () =\u003e {\n  const {connectedWallet} = React.useContext(WalletContext)\n\n  return \u003cdiv\u003e\n          \n            \u003ch1\u003e{connectedWallet.account  || 'not connected'}\u003c/h1\u003e\n            \u003ch1\u003e{connectedWallet.selectedNetwork || 'not connected'}\u003c/h1\u003e\n            \u003ch1\u003e{connectedWallet.allowedNetworks || 'not connected'}\u003c/h1\u003e\n            \u003ch1\u003e{connectedWallet.isAuthenticated || 'not connected'}\u003c/h1\u003e\n            \u003ch1\u003e{connectedWallet.protocal || 'not connected'}\u003c/h1\u003e\n            \n        \u003c/div\u003e\n}\nexport default Account;\n\n```\n\n## Future plans\n\n- Re-write this package using TypeScript\n- Build a better interface for creating transactions, calling smart contracts, and requesting signatures\n- Add support for more wallets\n- Add the ability to customize the wallet button and Modal styles\n- Add error modal popups for failed transactions\n- Add the ability to alternate between accounts in app\n- Add option to display a QR code modal when prompting to send eth to a certain address\n\n\n## Authors\n\n- [@fsobh](https://github.com/fsobh)\n- Donation address : `0x28DcF6c93C63B76aad9510234E1415Fc31468753`\n- ENS domain : `oblock.eth`  \n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffsobh%2Fweb3-wallets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffsobh%2Fweb3-wallets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffsobh%2Fweb3-wallets/lists"}