Wallet Connections

Native support for users with and without wallets


Overview

0xPass provides native authentication support for users with wallets and spins up embedded wallets using Web3Auth for users without wallets. Even better, all of this requires minimal dev effort!

This way, you can open your dapp up to both users with and without wallets.

Moreover, since 0xPass is built on top of RainbowKit, you can always make use of the customization options that it provides you.

Integration Guide

a) Import all the blockchains, providers and wallets you want to enable.

import { arbitrum, mainnet, optimism, polygon, goerli } from "wagmi/chains"
import { alchemyProvider } from "wagmi/providers/alchemy"
import { publicProvider } from "wagmi/providers/public"
import { discordMagicWallet,  googleMagicWallet,  ledgerWallet,  metaMaskWallet } from "0xpass/wallets"

b) Import wagmi and 0xPass configs

import { WagmiConfig, configureChains, createConfig } from "wagmi"
import { PassProvider, connectorsForWallets, createClient } from "0xpass"

c) Configure chains and client for your root component

const { chains, publicClient,webSocketPublicClient } = configureChains(
  [goerli, mainnet, optimism],
  [
    alchemyProvider({
      apiKey: "{{ALCHEMY_KEY_HERE}}",
    }),
    publicProvider(),
  ]
);

d) Configure list of wallets you want to enable for your app.

const connectors = connectorsForWallets([
  {
    groupName: "Social",
    wallets: [
      discordMagicWallet({ apiKey, chains }),
      googleMagicWallet({ apiKey, chains }),
    ],
  },
  {
    groupName: "Others",
    wallets: [
      metaMaskWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
])
 
const passClient=createClient({
    apiKey: apiKey,
    chains,
});
 

If you are unsure about apiKey and projectId, check first step of quickstart guide

e) Initialize WAGMI config

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient,
  webSocketPublicClient
})

Supported Wallets

Social Wallets (Web 2.0)
Web 3.0 Wallets

Working Code Example

0xPass React Basic Demo