A toolkit which makes it trivial to support any wallet or identity provider, and make authenticated calls to canisters.
There 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()
.
Visit https://connect2ic.github.io/docs/
You can ask us questions directly :) https://discord.com/invite/4kqMVknpgZ
package | description |
---|---|
@connect2ic/core | Core logic, connectors, assets and utilities |
@connect2ic/react | React components & hooks |
@connect2ic/vue | Vue components & composables |
@connect2ic/svelte | Svelte components & stores |
Following these steps will give you fully working auth with a <ConnectButton />
and <ConnectDialog />
as shown in the top image.
1. Install the necessary packages
npm i -S @connect2ic/core @connect2ic/react
2. Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)
import { defaultProviders } from "@connect2ic/core/providers"
import { Connect2ICProvider } from "@connect2ic/react"
import "@connect2ic/core/style.css"
import * as counter from "canisters/counter"
const AppRoot = () => (
<Connect2ICProvider
canisters={{
counter,
}}
providers={defaultProviders}
>
<App />
</Connect2ICProvider>
)
3. Place the components
import { ConnectButton, ConnectDialog, Connect2ICProvider, useConnect } from "@connect2ic/react"
function App() {
const { isConnected, principal, activeProvider } = useConnect({
onConnect: () => {
// Signed in
},
onDisconnect: () => {
// Signed out
}
})
return (
<>
<ConnectButton />
<ConnectDialog dark={false} />
</>
)
}
4. Done. Now customize it
Explore the remaining sections for further customization. Most likely you will need the
useConnect()
hook next.
https://connect2ic.github.io/docs/docs/React/hooks
1. Install the necessary packages
npm i -S @connect2ic/core @connect2ic/vue
2. Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)
Optionally pass in canister definitions as well (as generated by dfx)
<script setup>
import * as counter from "canisters/counter"
import { defaultProviders } from "@connect2ic/core/providers"
import { Connect2ICProvider } from "@connect2ic/vue"
import "@connect2ic/core/style.css"
</script>
<template>
<Connect2ICProvider
:canisters="{counter}"
:providers="defaultProviders"
>
<App />
</Connect2ICProvider>
</template>
3. Place the components
<script setup>
import { ConnectButton, ConnectDialog } from "@connect2ic/vue"
</script>
<template>
<div class="my-app">
<ConnectButton />
<ConnectDialog />
</div>
</template>
4. Done. Now customize it
Explore the remaining sections for further customization. Most likely you will need the
useConnect()
composable next.
https://connect2ic.github.io/docs/docs/Vue/composables
1. Install the necessary packages
npm i -S @connect2ic/core @connect2ic/svelte
2. Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)
Optionally pass in canister definitions as well (as generated by dfx)
<script>
import * as counter from "canisters/counter"
import { defaultProviders } from "@connect2ic/core/providers"
import { Connect2ICProvider } from "@connect2ic/svelte"
import "@connect2ic/core/style.css"
</script>
<Connect2ICProvider
canisters={{ counter }}
providers={defaultProviders}
>
<App />
</Connect2ICProvider>
3. Place the components
<script>
import { ConnectButton, ConnectDialog } from "@connect2ic/svelte"
</script>
<div class="my-app">
<ConnectButton />
<ConnectDialog />
</div>
4. Done. Now customize it
Explore the remaining sections for further customization. Most likely you will need the
useConnect()
store next.