Skip to main content

Getting started

Installation​

npm i -S @connect2ic/core @connect2ic/react

Wrap your app with the Provider​

Optionally pass in canister definitions as well (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>
)

Place the components inside your app​

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} />
    </>
  )
}

Done​

Explore the remaining sections for further customization & features.