@okto_web3/wagmi-adapter
v1.0.0
Published
Wagmi Adapter for Okto SDK
Downloads
39
Readme
Okto Wagmi Adapter
This package provides an adapter for the Okto SDK to be used with the Wagmi library. It allows you to easily integrate Okto's authentication and wallet management features into your web3 applications. The connector is designed to work seamlessly with the Wagmi library, providing a simple and efficient way to manage user authentication and wallet connections.
Refer to the Okto SDK documentation for more information on how to use the Okto SDK.
Installation
npm i @okto_web3/wagmi-adapter@latest @okto_web3/react-sdk@latestSetup
Configuration
Add okto connector to wagmi configuration.
Example
import { okto } from '@okto_web3/wagmi-adapter';
import { cookieStorage, createConfig, createStorage, http } from 'wagmi';
import { mainnet, optimism, polygon } from 'wagmi/chains';
export function getConfig() {
return createConfig({
chains: [polygon],
connectors: [
okto({
environment: 'sandbox',
clientPrivateKey: '0xprivatekey',
clientSWA: '0xswa',
}),
],
storage: createStorage({
storage: cookieStorage,
}),
ssr: true,
transports: {
[polygon.id]: http(),
},
});
}
declare module 'wagmi' {
interface Register {
config: ReturnType<typeof getConfig>;
}
}import { headers } from 'next/headers';
import type { ReactNode } from 'react';
import { cookieToInitialState } from 'wagmi';
import { getConfig } from '../wagmi';
export default async function RootLayout(props: { children: ReactNode }) {
const initialState = cookieToInitialState(
getConfig(),
(await headers()).get('cookie'),
);
const [config] = useState(() => getConfig());
const [queryClient] = useState(() => new QueryClient());
return (
<html lang="en">
<body>
<WagmiProvider config={config} initialState={initialState}>
<QueryClientProvider client={queryClient}>
{props.children}
</QueryClientProvider>
</WagmiProvider>
</body>
</html>
);
}Usage
Use wagmi as you normally would! Refer to the wagmi documentation for more information on how to use wagmi.
Schema
| Param | Description | Type |
| ------------------ | ------------------------------- | --------- |
| environment | Environement to use for the SDK | sandbox |
| clientPrivateKey | Client private key | string |
| clientSWA | Client SWA | string |
RainbowKit Integration
To use the Okto connector with RainbowKit, you can use the getOktoSdkConnector function to create a connector for the Okto SDK. This function takes an object with the following properties:
type: The type of Okto connector you want to create. This can be either'google'or'generic'. (More will be added in the future)params: An object containing the Okto SDK parameters. This should include theenvironment,clientPrivateKey, andclientSWAproperties.
Use the getOktoSdkConnector function to create a connectors object for RainbowKit. You can then pass this object to the connectors property of the RainbowKit configuration.
Refer to the RainbowKit documentation for more information on how to set up connectors.
Example
import { getOktoSdkConnector, OktoParameters } from '@okto_web3/wagmi-adapter';
import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { createConfig, http } from 'wagmi';
import { mainnet, optimism, polygon } from 'wagmi/chains';
const oktoParams: OktoParameters = {
environment: 'sandbox',
clientPrivateKey: '0xprivatekey',
clientSWA: '0xswa',
};
// create a 'Social Login' group in rainbowkit config connectors list
const connectors = connectorsForWallets(
[
{
groupName: 'Social Login',
wallets: [
getOktoSdkConnector({
type: 'google',
params: oktoParams,
}),
getOktoSdkConnector({
type: 'generic',
params: oktoParams,
}),
],
},
],
{
appName: 'My Okto Rainbowkit App',
projectId: 'xxx',
},
);
export const config = createConfig({
chains: [mainnet, optimism, polygon],
connectors: connectors,
transports: {
[mainnet.id]: http(),
[optimism.id]: http(),
[polygon.id]: http(),
},
});