{"id":15007970,"url":"https://github.com/veeso/react-ic-wallet","last_synced_at":"2026-04-06T03:03:28.217Z","repository":{"id":223285481,"uuid":"714089056","full_name":"veeso/react-ic-wallet","owner":"veeso","description":"A simple Context provider and component in order to manage different IC wallets in the browser.","archived":false,"fork":false,"pushed_at":"2024-03-04T16:45:27.000Z","size":320,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-19T18:41:26.576Z","etag":null,"topics":["dfinity","internet-computer","npm-package","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-ic-wallet","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/veeso.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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},"funding":{"ko_fi":"veeso"}},"created_at":"2023-11-03T22:22:56.000Z","updated_at":"2024-07-01T17:15:15.000Z","dependencies_parsed_at":"2024-10-12T08:20:36.927Z","dependency_job_id":"a8e13e6f-4a9a-49c1-9d39-f482b80e1d22","html_url":"https://github.com/veeso/react-ic-wallet","commit_stats":null,"previous_names":["veeso/react-ic-wallet"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veeso%2Freact-ic-wallet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veeso%2Freact-ic-wallet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veeso%2Freact-ic-wallet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veeso%2Freact-ic-wallet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/veeso","download_url":"https://codeload.github.com/veeso/react-ic-wallet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243180632,"owners_count":20249322,"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":["dfinity","internet-computer","npm-package","typescript"],"created_at":"2024-09-24T19:14:40.938Z","updated_at":"2025-12-28T06:27:35.613Z","avatar_url":"https://github.com/veeso.png","language":"TypeScript","funding_links":["https://ko-fi.com/veeso"],"categories":[],"sub_categories":[],"readme":"# React IC Wallet\n\n[![NPM](https://img.shields.io/npm/v/react-ic-wallet.svg)](https://www.npmjs.com/package/react-ic-wallet)\n[![CI](https://github.com/veeso/react-ic-wallet/actions/workflows/build_test.yml/badge.svg)](https://github.com/veeso/react-ic-wallet/actions/workflows/build_test.yml)\n\nReact IC Wallet is a Simplistic Context provider in order to manage Internet Computer wallets in the browser.\nIt is heavily inspired by [Metamask react](https://www.npmjs.com/package/metamask-react).\n\n## Supported wallets\n\nCurrently, **React-ic-wallet** supports the following browser wallets:\n\n- [Bitfinity Wallet](https://wallet.bitfinity.network/)\n- [Plug](https://plugwallet.ooo/)\n\n## Usage\n\n### Wrap your application\n\nWrap your application around the **IcWalletProvider**\n\n```tsx\nimport { IcWalletProvider } from 'react-ic-wallet';\n\n\u003cIcWalletProvider\u003e\n  \u003cApp /\u003e\n\u003c/IcWalletProvider\u003e\n```\n\n### Use a specific wallet\n\n```tsx\nimport { IcWalletProvider, WalletProvider } from 'react-ic-wallet';\n\n\u003cIcWalletProvider provider={WalletProvider.Bitfinity}\u003e\n  \u003cApp /\u003e\n\u003c/IcWalletProvider\u003e\n```\n\n### Create a component to handle the connection\n\n```tsx\nimport * as React from 'react';\nimport { useIcWallet } from 'react-ic-wallet';\n\nimport Logo from './ConnectButton/Logo';\nimport Button from './reusable/Button';\nimport Container from './reusable/Container';\n\nconst ConnectButton = () =\u003e {\n  const { status, connect, disconnect, account, principal } = useIcWallet();\n\n  const disabled = ['initializing', 'unavailable', 'connecting'].includes(\n    status,\n  );\n\n  React.useEffect(() =\u003e {\n    console.log('status from ctx', status);\n  }, [status]);\n\n  const onClick = () =\u003e {\n    if (status === 'notConnected') {\n      return connect();\n    } else if (status === 'connected') {\n      return disconnect();\n    }\n    return undefined;\n  };\n\n  const text = () =\u003e {\n    if (status === 'initializing') return 'Initializing...';\n    if (status === 'unavailable') return 'IC Wallet not available';\n    if (status === 'notConnected') return 'Connect to IC';\n    if (status === 'connecting') return 'Connecting...';\n    if (status === 'connected') return principal;\n    return undefined;\n  };\n\n  return (\n    \u003cContainer.FlexRow className=\"items-center gap-8\"\u003e\n      \u003cButton.Alternative\n        className=\"my-0 !mb-0\"\n        onClick={onClick}\n        disabled={disabled}\n      \u003e\n        \u003cLogo className=\"inline w-[32px] mr-2\" /\u003e\n        {text()}\n      \u003c/Button.Alternative\u003e\n    \u003c/Container.FlexRow\u003e\n  );\n};\n\nexport default ConnectButton;\n```\n\n### Create actor to interact with canisters\n\n```tsx\nimport * as React from 'react';\nimport { ActorMethod, ActorSubclass } from '@dfinity/agent';\nimport { useIcWallet } from 'react-ic-wallet';\n\nimport { icpLedgerIdlFactory } from './IcpLedger';\n\ninterface Context {\n  icpLedger?: ActorSubclass\u003cRecord\u003cstring, ActorMethod\u003e\u003e;\n}\n\nexport const AgentContext = React.createContext\u003cContext\u003e({\n  icpLedger: undefined,\n});\n\nexport const icpLedgerIdlFactory = ({ IDL: IDL }) =\u003e {\n  ...\n  return IDL.Service({\n    icrc1_balance_of: IDL.Func([Account], [IDL.Nat], ['query']),\n    icrc1_decimals: IDL.Func([], [IDL.Nat8], ['query']),\n    icrc1_fee: IDL.Func([], [IDL.Nat], ['query']),\n    icrc1_metadata: IDL.Func(\n      [],\n      [IDL.Vec(IDL.Tuple(IDL.Text, MetadataValue))],\n      ['query'],\n    ),\n    icrc1_name: IDL.Func([], [IDL.Text], ['query']),\n    icrc1_supported_standards: IDL.Func(\n      [],\n      [IDL.Vec(TokenExtension)],\n      ['query'],\n    ),\n    icrc1_symbol: IDL.Func([], [IDL.Text], ['query']),\n    icrc1_total_supply: IDL.Func([], [IDL.Nat], ['query']),\n    icrc1_transfer: IDL.Func([TransferArg], [Result_5], []),\n    icrc2_allowance: IDL.Func([AllowanceArgs], [Allowance], ['query']),\n    icrc2_approve: IDL.Func([ApproveArgs], [Result_6], []),\n    icrc2_transfer_from: IDL.Func([TransferFromArgs], [Result_7], []),\n  });\n}\n\nconst AgentContextProvider = ({ children }: { children: React.ReactNode }) =\u003e {\n  const [icpLedger, setIcpLedger] =\n    React.useState\u003cActorSubclass\u003cRecord\u003cstring, ActorMethod\u003e\u003e\u003e();\n  const { createActor, status } = useIcWallet();\n\n  React.useEffect(() =\u003e {\n    if (status === 'connected') {\n      createActor('ryjl3-tyaaa-aaaaa-aaaba-cai', icpLedgerIdlFactory)\n        .then((actor) =\u003e {\n          if (actor) {\n            setIcpLedger(actor);\n          }\n        })\n        .catch((err) =\u003e {\n          console.error(err);\n        });\n    }\n  }, [status]);\n\n  return (\n    \u003cAgentContext.Provider\n      value={{\n        icpLedger,\n      }}\n    \u003e\n      {children}\n    \u003c/AgentContext.Provider\u003e\n  );\n};\n\nexport default AgentContextProvider;\n```\n\n### Access methods once connected\n\n```tsx\nimport * as React from 'react';\nimport { useIcWallet } from 'react-ic-wallet';\n\nconst Header = () =\u003e {\n  const { icpLedger } = React.useContext(AgentContext);\n  const { principal } = useConnectedIcWallet();\n  const [balance, setBalance] = React.useState\u003cstring\u003e('0');\n\n  React.useEffect(() =\u003e {\n    if (icpLedger) {\n      icpLedger\n        .icrc1_balance_of({\n          owner: Principal.fromText(principal),\n          subaccount: [],\n        })\n        .then((balance) =\u003e {\n          setBalance((balance as bigint).toString());\n        })\n        .catch((e) =\u003e {\n          console.error(e);\n        });\n    }\n  }, [icpLedger]);\n\n  return (\n    \u003cContainer.FlexCols\u003e\n      \u003cspan\u003eUser balance (ICP): {balance}\u003c/span\u003e\n    \u003c/Container.FlexCols\u003e\n  );\n};\n\nexport default Header;\n\n```\n\n### Example\n\nFind more in the example in the `examples/` directory, where we use the ic wallet context provider to query the ICP ledger canister.\n\n## License\n\nreact-ic-wallet is licensed under MIT.\n\nSee full license [HERE](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveeso%2Freact-ic-wallet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fveeso%2Freact-ic-wallet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveeso%2Freact-ic-wallet/lists"}