Integrate Wagmi App
Estimated time to read: 4 minutes
Web3 apps using Wagmi can allow user onboarding via social login and gasless transactions via the Arcana wallet by integrating with the Arcana Auth Wagmi SDK and using he custom Wagmi connector.
In this guide, you will learn how Web3 apps using Wagmi wallet connectors can integrate with the Arcana Auth Wagmi SDK.
WalletConnect
Apps using WalletConnect can access Arcana Web3 Provider AuthProvider
by integrating with the Arcana Auth Wagmi SDK and using the ArcanaConnector
.
Prerequisites
-
Register Web3 Application: Log into the Arcana Developer Dashboard https://dashboard.arcana.network to register and configure the app before they can use the Arcana Auth SDK and enable the Arcana wallet for authenticated app users.
-
Set up Authentication Providers: Click on the Social Auth tab in the Arcana Developer Dashboard. Configure and select one or more supported authentication providers for onboarding the app users.
Configure Authentication Providers
You may be required to configure additional provider details for different authentication providers. In the case of Google, the developer must use Google Developer Console to set up the app and generate a Google assigned client ID for Google OAuth. This Google ClientID will be configured in the Arcana Developer Dashboard Social Auth settings before integrating the app.
For details, see how to configure authentication providers.
-
Save the Client ID assigned to the app and displayed in the Arcana Developer Dashboard. It is required later during integrating with the Arcana Auth SDK.
Steps
Integrating Web3 Wagmi apps with the Arcana Auth SDK is simple!
Follow these three steps:
Step 1: Install Arcana Auth SDK packages
npm install --save @arcana/auth-wagmi @arcana/auth
yarn add @arcana/auth-wagmi @arcana/auth
Step 2: Create AuthProvider
and ArcanaConnector
Import auth
package and create AuthProvider
. Then import auth-wagmi
package and create an ArcanaConnector
.
To instantiate the AuthProvider
, specify the unique Client ID value assigned to the app after registering the app through the Arcana Developer Dashboard earlier. Create the ArcanaConnector
and specify the AuthProvider
as shown in the sample code below.
import { AuthProvider } from "@arcana/auth";
let auth: AuthProvider | null;
const newAuthProvider = () => {
if (!auth) {
auth = new AuthProvider(
"xar_test_b2ddxxxxxxxxxxxxxxxxxxxxxxxx78b1fa3f"
);
}
return auth;
};
export { newAuthProvider };
...
Step 3: Set up WagmiConfig
Next, provide the newly instantiated and configured ArcanaConnector
to set up WagmiConfig.
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { AuthProvider } from '@arcana/auth';
import { ArcanaConnector } from "@arcana/auth-wagmi"
let auth: AuthProvider | null;
if (!auth) {
auth = new AuthProvider(
"xar_dev_c2fb7be163754e57d384e24257ea2c8d2a5dd31a"
);
}
export const connector = () => {
return new ArcanaConnector({auth,})
};
export const config = createConfig({
chains: [mainnet, sepolia],
connectors: [
injected(),
coinbaseWallet({ appName: 'Create Wagmi' }),
walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
connector(),
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
declare module 'wagmi' {
interface Register {
config: typeof config
}
}
// Note:
// This sample code is for
// wagmi versions 1.x.y and auth-wagmi 2.a.b
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { newAuthProvider } from "./utils/newArcanaAuth";
import { useAccount, useConnect, useDisconnect, useBalance } from 'wagmi'
import "../styles/globals.css";
const { chains, provider, webSocketProvider } = configureChains(
[mainnet, polygon, polygonAmoy],
[publicProvider()],
{ targetQuorum: 1 }
);
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: newAuthProvider(),
login: {
provider: "google",
},
},
});
};
const { chains, publicClient } = configureChains(
[polygon, polygonAmoy],
[publicProvider()]
);
export const wagmiEntity = createConfig({
autoConnect: true,
connectors: [connector(chains)],
publicClient,
});
...
// Note:
// This sample code is for
// wagmi versions 0.x.y and auth-wagmi 1.a.b
import { WagmiConfig, configureChains, createClient, Chain } from "wagmi";
import { goerli, mainnet, polygon, polygonAmoy } from "wagmi/chains";
import { InjectedConnector } from "wagmi/connectors/injected";
import { publicProvider } from "wagmi/providers/public";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { newAuthProvider } from "../utils/newArcanaAuth";
import "../styles/globals.css";
import type { AppProps } from "next/app";
const { chains, provider, webSocketProvider } = configureChains(
[mainnet, goerli, polygon, polygonAmoy],
[publicProvider()],
{ targetQuorum: 1 }
);
const connectors = [
new ArcanaConnector({
chains,
options: {
auth: newAuthProvider(),
login: {
provider: "google",
},
},
}),
new InjectedConnector({
chains,
options: {
name: "Browser Wallet",
shimDisconnect: true,
},
}),
];
const wagmiEntity = createClient({
autoConnect: true,
connectors,
provider,
webSocketProvider,
});
...
WagmiProvider
/WagmiConfig
, createClient
/configClient
createClient
, configClient
, WagmiConfig
were part of older Wagmi libraries.
For details, see Wagmi Getting Started Guide and Wagmi 1.x.y Migration Guide.
Now specify the requisite Wagmi constituents to WagmiProvider
/WagmiConfig
component as per the Wagmi library version used:
//
// For apps using Wagmi versions v2.a.b and auth-wagmi v3.x.y
//
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Buffer } from 'buffer'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import App from './App.tsx'
import { config } from './wagmi.ts'
import './index.css'
globalThis.Buffer = Buffer
const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</WagmiProvider>
</React.StrictMode>,
)
//
// For apps using Wagmi versions v1.a.b and auth-wagmi v2.x.y
//
function App({ Component, pageProps }: AppProps) {
return (
<WagmiConfig config={wagmiEntity}>
<Component {...pageProps} />
</WagmiConfig>
);
}
//
// For apps using Wagmi versions v0.a.b and auth-wagmi v1.x.y
//
function App({ Component, pageProps }: AppProps) {
return (
<WagmiConfig client={wagmiEntity}>
<Component {...pageProps} />
</WagmiConfig>
);
}
That is all!
The Web3 app is successfully integrated with the Arcana Auth SDK.
Example: Sample Wagmi App
See latest auth example code: sample-auth-wagmi-2
for details.
What's Next?
After integrating with a Web3 Wagmi app with the Arcana Auth SDK, the developers can add code to onboard users. There are two ways to onboard users:
- Use built-in plug-and-play login UI with a single function call that displays all the configured authentication providers
- Use custom login UI to onboard users and wire it to the Arcana Auth SDK functions for calling the configured authentication providers.
See for details.
Arcana wallet can also be used in applications that integrate with Rainbow Kit. See how to enable Arcana wallet using Rainbow Kit.
See also
- Sample Wagmi app integration
- Arcana Auth Wagmi SDK Reference Guide
sample-auth-wagmi
exampleauth-wagmi
README- Arcana Auth SDK Errors
- Arcana Auth SDK Usage Guide
- Arcana Auth SDK Reference Guide