{"id":24510703,"url":"https://github.com/rhdeck/useplug","last_synced_at":"2025-10-12T00:32:35.811Z","repository":{"id":37028489,"uuid":"502913481","full_name":"rhdeck/useplug","owner":"rhdeck","description":"React Provider for the Plug Wallet - In Typescript","archived":false,"fork":false,"pushed_at":"2022-06-18T19:14:52.000Z","size":57,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-02T08:52:48.320Z","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/rhdeck.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}},"created_at":"2022-06-13T10:44:19.000Z","updated_at":"2022-07-19T10:17:56.000Z","dependencies_parsed_at":"2022-06-29T08:04:40.015Z","dependency_job_id":null,"html_url":"https://github.com/rhdeck/useplug","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"rhdeck/ts-template","purl":"pkg:github/rhdeck/useplug","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Fuseplug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Fuseplug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Fuseplug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Fuseplug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rhdeck","download_url":"https://codeload.github.com/rhdeck/useplug/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Fuseplug/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279009509,"owners_count":26084609,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-01-22T00:30:30.286Z","updated_at":"2025-10-12T00:32:35.792Z","avatar_url":"https://github.com/rhdeck.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003ca name=\"readmemd\"\u003e\u003c/a\u003e\n\n# usePlug - React Wrapper for Plug Wallet\n\n[Plug Wallet](https://plugwallet.ooo) makes it easy for browser users to interact with ICP on an economic basis. usePlug makes it easy for React app developers to integrate usePlug for authentication and working with actors. \n\n**Typescript Native** Implementation - get all your sweet autocomplete. \n\nWe are very grateful for the folks at the [DFINITY foundation](https://dfinity.org) for putting on the Supernova Hackathon when we created this tool. And our thanks to [Psychedelic](https://psychedelic.ooo) for making Plug Wallet and open-sourcing their work so we could make it easy for others. \n\n## License\n[MIT License - use, share and enjoy!](./LICENSE.md)\n\n## Installation\n**Prequisite: A React app (often built with `npx create-react-app`);\n```bash\nyarn add @dfinity/agent @dfinity/candid @dfinity/principal # Dependencies\nyarn add @raydeck/useplug # This package\n```\n\n## Usage\n### App.tsx\nAdd The plug provider to the top level of your application that you want authenticated. \n\n**Remember to set the whitelist** Plug will only let you interact with canisters on the whitelist you provided to the plugprovider\n\n## PlugProvider \nPlugProvider wraps your app to manage communication with the plug wallet. To instantiate, provide props with the canisters and network with which you want to communicate\n\n### Props\n  * **whitelist?: string[];** Which canisterids - if any - are allowed to interact using the plug wallet ID\n  * **host?: string;** Which server to use for authentication. By default uses mainnet. (setting explicitly doesn't seem to work as it should for local replicas)\n  * **timeout?: number;** How long (in ms) to wait for communications from the IC network\n \n  *Note:* While whitelist is optional because of use cases where you are just trading ICP using plug, it's a code smell to leave it undefined in most cases. The others are fine to leave alone.\n### Example\n```tsx\nimport {PlugProvider, Authenticated, Unauthenticated, LoggedOut } from '@raydeck/useplug'\nexport const App = ()=\u003e{\n    return (\n        \u003cPlugProvider whitelist={whitelist}\u003e\n            {/* Providers want a single node underneath, which we wrangle with a fragment */}\n            \u003cFragment\u003e \n                {/* Wrapper  for tree in authenticated state */}\n                \u003cAuthenticated\u003e \n                    {/* Your app, which can use usePlug */}\n                    \u003cMain /\u003e\n                \u003c/Authenticated\u003e\n                {/* Wrapper for for unauthenticated state */}\n                \u003cUnauthenticated\u003e \n                    {/* App in logged out state - we have a pre-built login screen for you */}\n                    \u003cLoggedOut /\u003e \n                \u003c/Unauthenticated\u003e\n            \u003c/Fragment\u003e\n        \u003c/PlugProvider\u003e\n    );\n}\n```\n## usePlug() =\u003e PlugContext\nAccess the context of your instantiated Plug connection from any component beneath your PlugProvider. \n\nThe shape of the plug Provider context is:\n  * `authenticated`: Whether the plug wallet is in an authenticated state (boolean)\n  * `principal`: Principal authenticated with the plug wallet (Principal or undefined)\n  * `agent`: Plug-mediated agent for talking with IC canisters (HttpAgent)\n  * `login`: Trigger plug wallet interactive authentication (()=\u003evoid)\n  * `logout` Unauthenticate from plug wallet (presently just reloads the window, since plug doesn't maintain auth across reloads) (()=\u003evoid)\n  * `createActor`: Pass-through to the plug wallet createActor function\n  * `requestBalance`:Pass-through to the plug wallet requestBalance function\n  * `requestTransfer`:Pass-through to the plug wallet requestTransfer function\n  * `batchTransactions`:Pass-through to the plug wallet batchTransactions function\n\n### Example - Authenticated Path\n```ts\nimport { usePlug, useActor } from '@raydeck/useplug'\nimport { _SERVICE} from '../../src/declarations/mycanister/mycanister.did';\nimport {idlFactory} from '../../src/declarations/mycanister'\n\nconst canisterid = process.env.MYCANISTER_CANISTER_ID;\nexport const Main = ()=\u003e{\n    const {\n        principal, \n        logout, /* attach to a logout button*/\n        createActor, /* could use, but useActor is easier (below) */\n        requestBalance,\n        requestTransfer,\n        batchTransactions,\n    } = usePlug();\n}\n```\n## useActor\u003cServiceType\u003e(id: String, factory: InterfaceFactory) =\u003e ActorSubclass\u003cServiceType\u003e | undefined\nThis one is cool. useActor wraps the concerns of instantiating an actor to communicate with your canister mediated by Plug. Plus, it keeps your Typescript types auto-generated by `dfx generate` so all the auto-complete stays with you. \n\n### Example\n```tsx\nimport { useActor } from \"@raydeck/useplug\"\nimport { _SERVICE} from '../../src/declarations/mycanister/mycanister.did';\nimport {idlFactory} from '../../src/declarations/mycanister'\n\nconst useMyCanister = ()=\u003e{\n    return useActor\u003c_SERVICE\u003e(canisterId, idlFactory);\n}\n\nconst MyComponent = ()=\u003e{\n    const myCanister = useMyCanister()\n}\n```\n\n\u003ca name=\"_librarymd\"\u003e\u003c/a\u003e\n\n@raydeck/useplug - v1.0.2\n\n# @raydeck/useplug - v1.0.2\n\n## Table of contents\n\n### Type aliases\n\n- [Balance](#balance)\n- [BatchTransactionResponse](#batchtransactionresponse)\n- [CanisterId](#canisterid)\n- [CreateActorParams](#createactorparams)\n- [Cycles](#cycles)\n- [Plug](#plug)\n- [PublicKey](#publickey)\n- [RequestBurnXTCParams](#requestburnxtcparams)\n- [RequestConnectParams](#requestconnectparams)\n- [RequestTransferParams](#requesttransferparams)\n- [RequestTransferResponse](#requesttransferresponse)\n\n### Variables\n\n- [Authenticated](#authenticated)\n- [PlugProvider](#plugprovider)\n- [Unauthenticated](#unauthenticated)\n- [plug](#plug)\n\n### Functions\n\n- [PlugButton](#plugbutton)\n- [useActor](#useactor)\n- [usePlug](#useplug)\n\n## Type aliases\n\n### Balance\n\nƬ **Balance**: `Object`\n\n#### Type declaration\n\n| Name | Type |\n| :------ | :------ |\n| `amount` | `number` |\n| `currency` | `string` |\n| `image` | `string` |\n| `name` | `string` |\n| `value` | `number` |\n\n#### Defined in\n\n[PlugProvider.tsx:26](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L26)\n\n___\n\n### BatchTransactionResponse\n\nƬ **BatchTransactionResponse**: `Object`\n\n#### Defined in\n\n[PlugProvider.tsx:58](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L58)\n\n___\n\n### CanisterId\n\nƬ **CanisterId**: `string`\n\n#### Defined in\n\n[PlugProvider.tsx:47](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L47)\n\n___\n\n### CreateActorParams\n\nƬ **CreateActorParams**: `Object`\n\n#### Type declaration\n\n| Name | Type |\n| :------ | :------ |\n| `canisterId` | `string` |\n| `interfaceFactory` | `InterfaceFactory` |\n\n#### Defined in\n\n[PlugProvider.tsx:22](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L22)\n\n___\n\n### Cycles\n\nƬ **Cycles**: `number`\n\n#### Defined in\n\n[PlugProvider.tsx:46](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L46)\n\n___\n\n### Plug\n\nƬ **Plug**: `Object`\n\n#### Type declaration\n\n| Name | Type |\n| :------ | :------ |\n| `agent` | `HttpAgent` |\n| `batchTransactions` | (`transactions`: `Transaction`[]) =\u003e `Promise`\u003c[`BatchTransactionResponse`](#batchtransactionresponse)\\\u003e |\n| `createActor` | \u003cT\\\u003e(`params`: [`CreateActorParams`](#createactorparams)) =\u003e `Promise`\u003c`ActorSubclass`\u003c`T`\\\u003e\\\u003e |\n| `isConnected` | () =\u003e `boolean` |\n| `requestBalance` | () =\u003e `Promise`\u003c[`Balance`](#balance)[]\\\u003e |\n| `requestBurnXTC` | (`params`: [`RequestBurnXTCParams`](#requestburnxtcparams)) =\u003e `Promise`\u003c[`RequestTransferResponse`](#requesttransferresponse)\\\u003e |\n| `requestConnect` | (`o?`: [`RequestConnectParams`](#requestconnectparams)) =\u003e `Promise`\u003c`any`\\\u003e |\n| `requestTransfer` | (`params`: [`RequestTransferParams`](#requesttransferparams)) =\u003e `Promise`\u003c[`RequestTransferResponse`](#requesttransferresponse)\\\u003e |\n\n#### Defined in\n\n[PlugProvider.tsx:59](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L59)\n\n___\n\n### PublicKey\n\nƬ **PublicKey**: `any`\n\n#### Defined in\n\n[PlugProvider.tsx:21](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L21)\n\n___\n\n### RequestBurnXTCParams\n\nƬ **RequestBurnXTCParams**: `Object`\n\n#### Type declaration\n\n| Name | Type |\n| :------ | :------ |\n| `amount` | [`Cycles`](#cycles) |\n| `to` | [`CanisterId`](#canisterid) |\n\n#### Defined in\n\n[PlugProvider.tsx:48](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L48)\n\n___\n\n### RequestConnectParams\n\nƬ **RequestConnectParams**: `Object`\n\n#### Type declaration\n\n| Name | Type |\n| :------ | :------ |\n| `host?` | `string` |\n| `timeout?` | `number` |\n| `whitelist?` | `string`[] |\n\n#### Defined in\n\n[PlugProvider.tsx:16](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L16)\n\n___\n\n### RequestTransferParams\n\nƬ **RequestTransferParams**: `Object`\n\n#### Type declaration\n\n| Name | Type |\n| :------ | :------ |\n| `amount` | `number` |\n| `opts?` | `Object` |\n| `opts.created_at_time?` | `Object` |\n| `opts.created_at_time.timestamp_nanos` | `number` |\n| `opts.fee?` | `number` |\n| `opts.from_subaccount?` | `Number` |\n| `opts.memo?` | `string` |\n| `to` | `String` |\n\n#### Defined in\n\n[PlugProvider.tsx:33](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L33)\n\n___\n\n### RequestTransferResponse\n\nƬ **RequestTransferResponse**: `Object`\n\n#### Type declaration\n\n| Name | Type |\n| :------ | :------ |\n| `height` | `number` |\n\n#### Defined in\n\n[PlugProvider.tsx:45](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L45)\n\n## Variables\n\n### Authenticated\n\n• **Authenticated**: `FC`\u003c`Object`\\\u003e\n\n#### Defined in\n\n[PlugProvider.tsx:175](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L175)\n\n___\n\n### PlugProvider\n\n• **PlugProvider**: `FC`\u003c`Object`\\\u003e\n\n#### Defined in\n\n[PlugProvider.tsx:106](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L106)\n\n___\n\n### Unauthenticated\n\n• **Unauthenticated**: `FC`\u003c`Object`\\\u003e\n\n#### Defined in\n\n[PlugProvider.tsx:181](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L181)\n\n___\n\n### plug\n\n• **plug**: `undefined` \\| [`Plug`](#plug)\n\n#### Defined in\n\n[PlugProvider.tsx:87](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L87)\n\n## Functions\n\n### PlugButton\n\n▸ `Const` **PlugButton**(`__namedParameters`): `Element`\n\n#### Parameters\n\n| Name | Type |\n| :------ | :------ |\n| `__namedParameters` | `Object` |\n| `__namedParameters.dark?` | `boolean` |\n| `__namedParameters.title?` | `string` |\n\n#### Returns\n\n`Element`\n\n#### Defined in\n\n[PlugButton.tsx:53](https://github.com/rhdeck/useplug/blob/000f118/src/PlugButton.tsx#L53)\n\n___\n\n### useActor\n\n▸ **useActor**\u003c`T`\\\u003e(`canisterId`, `interfaceFactory`): `undefined` \\| `ActorSubclass`\u003c`T`\\\u003e\n\n#### Type parameters\n\n| Name |\n| :------ |\n| `T` |\n\n#### Parameters\n\n| Name | Type |\n| :------ | :------ |\n| `canisterId` | `string` |\n| `interfaceFactory` | `InterfaceFactory` |\n\n#### Returns\n\n`undefined` \\| `ActorSubclass`\u003c`T`\\\u003e\n\n#### Defined in\n\n[useActor.ts:6](https://github.com/rhdeck/useplug/blob/000f118/src/useActor.ts#L6)\n\n___\n\n### usePlug\n\n▸ `Const` **usePlug**(): `Object`\n\n#### Returns\n\n`Object`\n\n| Name | Type |\n| :------ | :------ |\n| `agent` | `undefined` \\| `HttpAgent` |\n| `authenticated` | `boolean` |\n| `batchTransactions` | `undefined` \\| (`transactions`: `Transaction`[]) =\u003e `Promise`\u003c[`BatchTransactionResponse`](#batchtransactionresponse)\\\u003e |\n| `createActor` | `undefined` \\| \u003cT\\\u003e(`params`: [`CreateActorParams`](#createactorparams)) =\u003e `Promise`\u003c`ActorSubclass`\u003c`T`\\\u003e\\\u003e |\n| `login` | () =\u003e `void` |\n| `logout` | () =\u003e `void` |\n| `plug` | `undefined` \\| [`Plug`](#plug) |\n| `principal` | ``null`` \\| `Principal` |\n| `requestBalance` | `undefined` \\| () =\u003e `Promise`\u003c[`Balance`](#balance)[]\\\u003e |\n| `requestTransfer` | `undefined` \\| (`params`: [`RequestTransferParams`](#requesttransferparams)) =\u003e `Promise`\u003c[`RequestTransferResponse`](#requesttransferresponse)\\\u003e |\n\n#### Defined in\n\n[PlugProvider.tsx:169](https://github.com/rhdeck/useplug/blob/000f118/src/PlugProvider.tsx#L169)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhdeck%2Fuseplug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frhdeck%2Fuseplug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhdeck%2Fuseplug/lists"}