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:
b) Click on the project that you have just created and retrieve the project API key from below:
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
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
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
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"