{"_id":"@amerej/connect2ic","_rev":"1-c2e07c04424420d45d6128327a97adf7","name":"@amerej/connect2ic","description":"<img height=\"100\" src=\"https://connect2ic.github.io/docs/img/connect2ic_logo_light.png\" />","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.3":{"name":"@amerej/connect2ic","version":"0.0.3","author":{"name":"Mio Quispe"},"license":"ISC","_id":"@amerej/connect2ic@0.0.3","maintainers":[{"name":"amerej","email":"audran.ditsch@outlook.fr"}],"homepage":"https://github.com/amerej/connect2ic#readme","bugs":{"url":"https://github.com/amerej/connect2ic/issues"},"dist":{"shasum":"c7b4728f93db7d3229a9066150d1ff8a01a95533","tarball":"https://registry.npmjs.org/@amerej/connect2ic/-/connect2ic-0.0.3.tgz","fileCount":101,"integrity":"sha512-+6WA5b8TSzjp0NGcVY+C267xdqRjq0Ihckr4cpXpzv2mln2LoUQbcuAma1uys0VO7WCx9/Tkuc0jcI1JjYJf9A==","signatures":[{"sig":"MEUCIFErpH7qD9DwfPsP+7yvca2ZarWts6d+WYUClITeP9pBAiEA5lyT3E2sUQ34LS7+BoIi/jvPBw65vhdVCwOuh8Q9FZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16001051},"main":"babel.config.js","engines":{"npm":">=7.0.0","node":">=14.0.0"},"gitHead":"2c5ed23b1e15ca8ddb338206821ce5df22339442","private":false,"scripts":{"dev":"preconstruct watch","build":"preconstruct build","postinstall":"preconstruct dev"},"_npmUser":{"name":"amerej","email":"audran.ditsch@outlook.fr"},"repository":{"url":"git+https://github.com/amerej/connect2ic.git","type":"git"},"workspaces":["packages/*"],"_npmVersion":"10.8.1","description":"<img height=\"100\" src=\"https://connect2ic.github.io/docs/img/connect2ic_logo_light.png\" />","directories":{},"_nodeVersion":"20.11.1","dependencies":{"fp-ts":"^2.12.1","babel-plugin-file-loader":"^2.0.0"},"preconstruct":{"packages":["packages/core","packages/react"]},"_hasShrinkwrap":false,"packageManager":"npm@8.1.0","devDependencies":{"turbo":"^1.1.9","prettier":"^2.5.1","typescript":"^4.4.3","@babel/core":"^7.17.10","@babel/preset-env":"^7.17.10","@preconstruct/cli":"^2.1.5","@babel/preset-react":"^7.16.7","@babel/preset-typescript":"^7.16.7","babel-plugin-inline-import":"^3.0.0","babel-plugin-inline-import-data-uri":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/connect2ic_0.0.3_1717409788198_0.3992640857244336","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@amerej/connect2ic","author":{"name":"Mio Quispe"},"version":"1.0.0","private":false,"workspaces":["packages/*"],"scripts":{"build":"preconstruct build","dev":"preconstruct watch","postinstall":"preconstruct dev"},"devDependencies":{"@babel/core":"^7.17.10","@babel/preset-env":"^7.17.10","@babel/preset-react":"^7.16.7","@babel/preset-typescript":"^7.16.7","@preconstruct/cli":"^2.1.5","babel-plugin-inline-import":"^3.0.0","babel-plugin-inline-import-data-uri":"^1.0.1","prettier":"^2.5.1","turbo":"^1.1.9","typescript":"^4.4.3"},"engines":{"npm":">=7.0.0","node":">=14.0.0"},"packageManager":"npm@8.1.0","preconstruct":{"packages":["packages/core","packages/react"]},"dependencies":{"babel-plugin-file-loader":"^2.0.0","fp-ts":"^2.12.1"},"description":"<img height=\"100\" src=\"https://connect2ic.github.io/docs/img/connect2ic_logo_light.png\" />","main":"babel.config.js","repository":{"type":"git","url":"git+https://github.com/amerej/connect2ic.git"},"license":"ISC","bugs":{"url":"https://github.com/amerej/connect2ic/issues"},"homepage":"https://github.com/amerej/connect2ic#readme","_id":"@amerej/connect2ic@1.0.0","gitHead":"fdaf958a014fb90a5e1643c74a3932dfcac609aa","_nodeVersion":"20.11.1","_npmVersion":"10.8.1","dist":{"integrity":"sha512-/2Qvf92u23LOnp/6HeNaPURDd7O4PbkECu76M0KwAEmhShEXnajWjUj//lXxwOItSytMhiP+bHOYI3SymAV4TA==","shasum":"5a07e21d02935fd1a2c718ce816db696847bdf15","tarball":"https://registry.npmjs.org/@amerej/connect2ic/-/connect2ic-1.0.0.tgz","fileCount":101,"unpackedSize":16001051,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOIDbbVDVK1jKgSSEL/oF8zctSPfP9pn27/v4D7Ne9BgIgYIpYUO/ClrTwxqw79o5NkqwZHGX99bYFq0TT4L0UvYM="}]},"_npmUser":{"name":"amerej","email":"audran.ditsch@outlook.fr"},"directories":{},"maintainers":[{"name":"amerej","email":"audran.ditsch@outlook.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/connect2ic_1.0.0_1717410251108_0.17818710511683622"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-03T10:16:28.047Z","modified":"2024-06-03T10:24:13.440Z","0.0.3":"2024-06-03T10:16:28.476Z","1.0.0":"2024-06-03T10:24:13.271Z"},"maintainers":[{"name":"amerej","email":"audran.ditsch@outlook.fr"}],"author":{"name":"Mio Quispe"},"repository":{"type":"git","url":"git+https://github.com/amerej/connect2ic.git"},"license":"ISC","homepage":"https://github.com/amerej/connect2ic#readme","bugs":{"url":"https://github.com/amerej/connect2ic/issues"},"readme":"\n<img height=\"100\" src=\"https://connect2ic.github.io/docs/img/connect2ic_logo_light.png\" />\n\n# Connect2IC\nA toolkit which makes it trivial to support any wallet or identity provider, and make authenticated calls to canisters.\n\n## Introduction\nThere are many new wallets coming out and adding support for these isn't always easy. Connect2ic allows you to get fully working auth for the most popular providers with only a few lines of code. Use the already styled `<ConnectDialog />` component or feel free to create your own. Connect2ic gives you full control and additionally provides you with convenient helper utilities such as `useCanister()` and `useTransfer()`.\n\n## Full documentation\nVisit https://connect2ic.github.io/docs/\n\nSee https://github.com/MioQuispe/create-ic-app/ for examples\n\n## Community\nYou can ask us questions directly :)\nhttps://discord.com/invite/4kqMVknpgZ\n\n## Supported providers\n- [Internet Identity](https://identity.ic0.app/)\n- [Stoic Wallet](https://plugwallet.ooo/)\n- [Plug](https://plugwallet.ooo/)\n- [AstroX ME](https://astrox.me)\n- [Infinity Wallet](https://chrome.google.com/webstore/detail/infinity-wallet/jnldfbidonfeldmalbflbmlebbipcnle)\n- [NFID](https://nfid.one)\n\n\n\n## Packages\n| package | description |\n| ----------- | ----------- |\n| [@connect2ic/core]() | Client, connectors, assets and utilities |\n| [@connect2ic/react]() | React components & hooks |\n| [@connect2ic/vue]() | Vue components & composables |\n| [@connect2ic/svelte]() | Svelte components & stores |\n\n# React\n\nFollowing these steps will give you fully working auth with a `<ConnectButton />` and `<ConnectDialog />` as shown in the top image.\n\n**1.** Install the necessary packages\n\n```\nnpm i -S @connect2ic/core @connect2ic/react\n```\n\n\n**2.** Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)\n\n```jsx\nimport { defaultProviders } from \"@connect2ic/core/providers\"\nimport { createClient } from \"@connect2ic/core\"\nimport { Connect2ICProvider } from \"@connect2ic/react\"\nimport \"@connect2ic/core/style.css\"\nimport * as counter from \"canisters/counter\"\n\nconst client = createClient({\n  canisters: {\n    counter,\n  },\n  providers: defaultProviders,\n})\n\nconst AppRoot = () => (\n  <Connect2ICProvider client={client}>\n    <App />\n  </Connect2ICProvider>\n)\n\n```\n\n**3.** Place the components\n\n```jsx\nimport { ConnectButton, ConnectDialog, Connect2ICProvider, useConnect } from \"@connect2ic/react\"\n\nfunction App() {\n  \n  const { isConnected, principal, activeProvider } = useConnect({\n    onConnect: () => {\n      // Signed in\n    },\n    onDisconnect: () => {\n      // Signed out\n    }\n  })\n\n  return (\n    <>\n      <ConnectButton />\n      <ConnectDialog dark={false} />\n    </>\n  )\n}\n\n```\n\n**4.** Done\n\n<img height=340 src=\"https://i.imgur.com/aGREctC.png\" />\n\n\n# Vue\n\nFollowing these steps will give you fully working auth with a `<ConnectButton />` and `<ConnectDialog />` as shown in the top image.\n\n**1.** Install the necessary packages\n```\nnpm i -S @connect2ic/core @connect2ic/vue\n```\n\n**2.** Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)\n\n```html\n\n<script setup>\n  import { createClient } from \"@connect2ic/core\"\n  import { defaultProviders } from \"@connect2ic/core/providers\"\n  import { Connect2ICProvider } from \"@connect2ic/vue\"\n  import \"@connect2ic/core/style.css\"\n  import * as counter from \"canisters/counter\"\n  \n  const client = createClient({\n    canisters: {\n      counter,\n    },\n    providers: defaultProviders,\n  })\n</script>\n\n<template>\n  <Connect2ICProvider :client=\"client\">\n    <App />\n  </Connect2ICProvider>\n</template>\n\n```\n\n**3.** Place the components\n\n```html\n\n<script setup>\n  import { ConnectButton, ConnectDialog, useConnect } from \"@connect2ic/vue\"\n\n  const { isConnected, principal, activeProvider } = useConnect({\n    onConnect: () => {\n      // Signed in\n    },\n    onDisconnect: () => {\n      // Signed out\n    }\n  })\n</script>\n\n<template>\n  <div class=\"my-app\">\n    <ConnectButton />\n    <ConnectDialog />\n  </div>\n</template>\n\n```\n\n**4.** Done\n\n<img height=340 src=\"https://i.imgur.com/aGREctC.png\" />\n\n## Svelte\n\nFollowing these steps will give you fully working auth with a `<ConnectButton />` and `<ConnectDialog />` as shown in the top image.\n\n**1.** Install the necessary packages\n```\nnpm i -S @connect2ic/core @connect2ic/svelte\n```\n\n**2.** Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)\n\n```html\n<script>\n  import { createClient } from \"@connect2ic/core\"\n  import { defaultProviders } from \"@connect2ic/core/providers\"\n  import { Connect2ICProvider } from \"@connect2ic/svelte\"\n  import \"@connect2ic/core/style.css\"\n  import * as counter from \"canisters/counter\"\n\n  const client = createClient({\n    canisters: {\n      counter,\n    },\n    providers: defaultProviders,\n  })\n</script>\n\n<Connect2ICProvider client={client}>\n  <App />\n</Connect2ICProvider>\n```\n\n**3.** Place the components\n\n```html\n<script>\n  import { ConnectButton, ConnectDialog, useConnect } from \"@connect2ic/svelte\"\n  \n  const { isConnected, principal, activeProvider } = useConnect({\n    onConnect: () => {\n      // Signed in\n    },\n    onDisconnect: () => {\n      // Signed out\n    }\n  })\n</script>\n\n<div class=\"my-app\">\n  <ConnectButton />\n  <ConnectDialog />\n</div>\n```\n\n**4.** Done\n\n<img height=340 src=\"https://i.imgur.com/aGREctC.png\" />\n\n","readmeFilename":"README.md"}