Manual Installation

Step by Step installtion guide for 0xpass library

Setting up 0xPass is extremely easy - signup, create project and install in your code. That's it!

Steps

1. Signup at 0xpass Dashboard

Sign up at the 0xPass dashboard

2. Create a new project

a) Create a new project as show below:

Create Project

b) Click on the project that you have just created and retrieve the project API key from below:

Project API Key

3. Install SDK in your project

Install with npm:

npm install 0xpass wagmi

If you are facing conflicts while installing, use npm install 0xpass wagmi --legacy-peer-deps instead

OR

Install with yarn:

yarn add 0xpass wagmi

4. Import 0xPass Keys

a) Copy API Key from 0xpass dashboard


Project API Key

b) Import API Key to your project's root component

const apiKey = "my-api-key"

c) Sign up for WalletConnect and create a new project to obtain a project ID

Project API Key

d) Import project ID to your project

const projectId = "dummy-project-id"

5. Configure your root component

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 { ledgerWallet, metaMaskWallet} from "0xpass/wallets"

b) Import wagmi and 0xPass configs

import { WagmiConfig, configureChains, createConfig } from "wagmi"
import { PassProvider, createClient, connectorsForWallets } 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: [
    ],
  },
  {
    groupName: "Others",
    wallets: [
      metaMaskWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
])
 
const passClient=createClient({
    apiKey: apiKey,
    chains,
});

Supported Wallets

  1. MPC / Social Wallets (Web 2)
  2. Traditional EOA (Web 3)

e) Initialize WAGMI config

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

6. Enable 0xPass Provider

In order to be able to use 0xpass provider, wrap your root component as shown below:

<WagmiConfig config={wagmiConfig}>
    <PassProvider client={passClient}>
        <Component {...pageProps} /> //your root component
    </PassProvider>
</WagmiConfig>

7. Add Connect Button

You can also use <ConnectButton> wherever you want to implement login functionality

a) Import the Connect Button into your component

import { ConnectButton } from "0xpass"

b) Place the component where it fits best

export const Component = () => {
  return <ConnectButton />
}

c) Let's add a bit of styling to the button

import "0xpass/style.css"

Working Code Example

0xPass React Basic Demo

OverviewQuickstart