{"id":21410536,"url":"https://github.com/bitriel/wallet-sdk-react","last_synced_at":"2025-10-16T15:28:27.578Z","repository":{"id":246307046,"uuid":"820694491","full_name":"bitriel/wallet-sdk-react","owner":"bitriel","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-27T03:00:11.000Z","size":887,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-06-28T04:59:48.413Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bitriel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-27T02:03:27.000Z","updated_at":"2024-06-27T03:00:14.000Z","dependencies_parsed_at":"2024-06-27T04:59:47.961Z","dependency_job_id":"d3b4631f-3be2-4689-a28f-5550b21cd99e","html_url":"https://github.com/bitriel/wallet-sdk-react","commit_stats":null,"previous_names":["bitriel/wallet-sdk-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bitriel/wallet-sdk-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitriel%2Fwallet-sdk-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitriel%2Fwallet-sdk-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitriel%2Fwallet-sdk-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitriel%2Fwallet-sdk-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitriel","download_url":"https://codeload.github.com/bitriel/wallet-sdk-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitriel%2Fwallet-sdk-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260251641,"owners_count":22981090,"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":[],"created_at":"2024-11-22T17:40:31.420Z","updated_at":"2025-10-16T15:28:22.541Z","avatar_url":"https://github.com/bitriel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WalletSDK for React\n\n## Overview\n\nThis library provides a React context and provider to easily manage blockchain wallets, contracts, and chain information using the WalletSDK core library. It simplifies the integration of blockchain functionality into React applications.\n\n## Features\n\n- Wallet Management: Manage wallet state and mnemonic phrases.\n- Chain Management: Easily switch between different blockchain networks.\n- Contract Management: Load, add, remove, and edit contracts.\n- Context Integration: Utilize React context for state management and easy access across components.\n\n## Installation\n\nTo use the WalletSDK for React, install the necessary dependencies:\n\n```bash\nnpm install bitriel/wallet-sdk-react\n```\n\n## Usage\n\nHere's an example of how to use the AccountProvider and useAccount hook in your React application:\n\n```javascript\nimport React from \"react\";\nimport { AccountProvider, useAccount } from \"wallet-sdk-react\";\n\nconst App = () =\u003e {\n\treturn (\n\t\t\u003cAccountProvider\u003e\n\t\t\t\u003cMyComponent /\u003e\n\t\t\u003c/AccountProvider\u003e\n\t);\n};\n\nconst MyComponent = () =\u003e {\n\tconst { account, switchChain, switchWallet, addContract } = useAccount();\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton onClick={() =\u003e switchChain(\"https://another.chain.rpc\")}\u003e\n\t\t\t\tSwitch Chain\n\t\t\t\u003c/button\u003e\n\t\t\t\u003cbutton onClick={() =\u003e switchWallet(\"new mnemonic phrase\")}\u003e\n\t\t\t\tSwitch Wallet\n\t\t\t\u003c/button\u003e\n\t\t\t\u003cbutton\n\t\t\t\tonClick={() =\u003e\n\t\t\t\t\taddContract({\n\t\t\t\t\t\tabi: yourContractAbi,\n\t\t\t\t\t\taddress: \"0xYourContractAddress\",\n\t\t\t\t\t\tname: \"YourContractName\",\n\t\t\t\t\t\tsymbol: \"YCN\",\n\t\t\t\t\t\ttype: \"ERC20\",\n\t\t\t\t\t\tchain: \"mainnet\",\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\u003e\n\t\t\t\tAdd Contract\n\t\t\t\u003c/button\u003e\n\t\t\t\u003cdiv\u003eAccount Address: {account?.wallet?.address}\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t);\n};\n```\n\n## AccountContext Interfaces\n\nThe AccountContext and AccountProvider are used to manage and provide wallet-related state and functions throughout your React application.\nThis context expose the following features and interfaces:\n\n```typescript\ntype ContractInfo = {\n\tabi: ethers$1.Interface | ethers$1.InterfaceAbi;\n\taddress: string;\n\tdecimal?: number;\n\tname: string;\n\tsymbol: string;\n\ttype: string;\n\tchain: string;\n};\n\ninterface Chain {\n\tname: string;\n\turl: string;\n\tsymbol: string;\n\tlogo: string;\n}\n\ndeclare const WalletSDK: (\n\tmnemonic: string,\n\tchain: string,\n\tcontracts?: ContractInfo[]\n) =\u003e {\n\tbalance: () =\u003e Promise\u003cbigint\u003e;\n\tbalanceOf: (address: AddressLike) =\u003e Promise\u003cbigint\u003e;\n\ttransfer: (\n\t\tto: AddressLike,\n\t\tamount: ethers$1.BigNumberish\n\t) =\u003e Promise\u003cethers$1.TransactionReceipt | null\u003e;\n\tprovider: ethers$1.JsonRpcProvider;\n\twallet: ethers$1.HDNodeWallet;\n\tcontracts: Map\u003cstring, Contract\u003e;\n};\n\ninterface iAccountContext {\n\taccount: ReturnType\u003ctypeof WalletSDK\u003e | null;\n\tswitchChain?: Function;\n\tswitchWallet?: Function;\n\tloadContract?: Function;\n\taddContract?: Function;\n\tremoveContract: (address: string) =\u003e void;\n\teditContract: (address: string, update: ContractInfo) =\u003e void;\n\tchains?: Chain[];\n\tchain: string | null;\n\tchainInfo?: Chain;\n\tcontractsByChain: ContractInfo[];\n}\n```\n\n## DevTools\n\nTo ease up development, we also provide a development widget which can serve as\n\n- Wallet\n- Contract Management and interaction similar to Remix\n- Code generation\n- Resizable, collapsable, dark and light mode\n\n```javascript\nimport React from \"react\";\nimport { AccountProvider, WalletDevTool } from \"wallet-sdk-react\";\n\nconst App = () =\u003e {\n\treturn (\n\t\t\u003cAccountProvider\u003e\n\t\t\t\u003cMyComponent /\u003e\n\t\t\t{/* Just insert  WalletDevTool anywhere inside AccountProvider */}\n\t\t\t\u003cWalletDevTool /\u003e\n\t\t\u003c/AccountProvider\u003e\n\t);\n};\n```\n\n![screenshot1!](assets/devtool1.png)\n![screenshot2!](assets/devtool2.png)\n![screenshot3!](assets/devtool3.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitriel%2Fwallet-sdk-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitriel%2Fwallet-sdk-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitriel%2Fwallet-sdk-react/lists"}