Connect2IC

A toolkit which makes it trivial to support any wallet or identity provider, and make authenticated calls to canisters.

Introduction

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().

Full documentation

Visit https://connect2ic.github.io/docs/

See https://github.com/MioQuispe/create-ic-app/ for examples

Community

You can ask us questions directly :) https://discord.com/invite/4kqMVknpgZ

Supported providers

• Internet Identity
• Stoic Wallet
• Plug
• AstroX ME
• Infinity Wallet
• NFID

Packages

package	description
@connect2ic/core	Client, connectors, assets and utilities
@connect2ic/react	React components & hooks
@connect2ic/vue	Vue components & composables
@connect2ic/svelte	Svelte components & stores

React

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 { createClient } from "@connect2ic/core"
import { Connect2ICProvider } from "@connect2ic/react"
import "@connect2ic/core/style.css"
import * as counter from "canisters/counter"

const client = createClient({
  canisters: {
    counter,
  },
  providers: defaultProviders,
})

const AppRoot = () => (
  <Connect2ICProvider client={client}>
    <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

Vue

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/vue

2. Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)

<script setup>
  import { createClient } from "@connect2ic/core"
  import { defaultProviders } from "@connect2ic/core/providers"
  import { Connect2ICProvider } from "@connect2ic/vue"
  import "@connect2ic/core/style.css"
  import * as counter from "canisters/counter"
  
  const client = createClient({
    canisters: {
      counter,
    },
    providers: defaultProviders,
  })
</script>

<template>
  <Connect2ICProvider :client="client">
    <App />
  </Connect2ICProvider>
</template>

3. Place the components

<script setup>
  import { ConnectButton, ConnectDialog, useConnect } from "@connect2ic/vue"

  const { isConnected, principal, activeProvider } = useConnect({
    onConnect: () => {
      // Signed in
    },
    onDisconnect: () => {
      // Signed out
    }
  })
</script>

<template>
  <div class="my-app">
    <ConnectButton />
    <ConnectDialog />
  </div>
</template>

4. Done

Svelte

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/svelte

2. Wrap your app with the Provider and optionally pass in canister definitions (as generated by dfx)

<script>
  import { createClient } from "@connect2ic/core"
  import { defaultProviders } from "@connect2ic/core/providers"
  import { Connect2ICProvider } from "@connect2ic/svelte"
  import "@connect2ic/core/style.css"
  import * as counter from "canisters/counter"

  const client = createClient({
    canisters: {
      counter,
    },
    providers: defaultProviders,
  })
</script>

<Connect2ICProvider client={client}>
  <App />
</Connect2ICProvider>

3. Place the components

<script>
  import { ConnectButton, ConnectDialog, useConnect } from "@connect2ic/svelte"
  
  const { isConnected, principal, activeProvider } = useConnect({
    onConnect: () => {
      // Signed in
    },
    onDisconnect: () => {
      // Signed out
    }
  })
</script>

<div class="my-app">
  <ConnectButton />
  <ConnectDialog />
</div>

4. Done