diditprovidertest
v0.0.33
Published
Gamium authentication adapter for Sign-In
Downloads
76
Readme
Didit-SDK
The best way to connect a wallet
Didit-SDK is a React library that makes it easy to add wallet connection to your dapp.
- ✅ Didit User Authentication flow
- 🔥 Out-of-the-box wallet management
- ✅ Easily customizable
- 🦄 Built on top of rainbowkit, wagmi and viem
Try it out
You can use the CodeSandbox links below try out Didit Sdk:
- with Vite-React // TODO: setup example on codesandbox
Examples
The following examples are provided in the examples folder of this repo.
with-vite-react
The example contains a first view 'localhost:3030' where you can test the ConnetButton and a second view 'localhost:3030/status' where you can login, logout and check the auth status from with you own buttons and hooks!
Running examples
To run an example locally, install dependencies.
pnpm install
Then go into an example directory, eg: with-vite-react
.
cd examples/with-vite-react
Then run the dev script.
pnpm run dev
Installation
integrate didit-sdk into your project.
install didit-sdk and its peer dependencies, wagmi and viem.
npm install didit-sdk didit-provider wagmi viem
Note: RainbowKit is a React library.
Import
Import didit-sdk and wagmi.
import 'didit-sdk/styles.css';
import { getDefaultWallets, DiditAuthProvider, darkTheme } from 'didit-sdk';
import { DiditProvider } from 'didit-provider';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum, base, zora } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
Configure
Configure your desired chains and generate the required connectors. You will also need to setup a wagmi
config.
Note: Every dApp that relies on WalletConnect now needs to obtain a
projectId
from WalletConnect Cloud. This is absolutely free and only takes a few minutes.
...
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
const { chains, publicClient } = configureChains(
[mainnet, polygon, optimism, arbitrum, base, zora],
[
alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
publicProvider()
]
);
const { connectors } = getDefaultWallets({
appName: 'App with Didit',
projectId: 'YOUR_PROJECT_ID',
chains
});
const wagmiConfig = createConfig({
autoConnect: true,
connectors,
publicClient
})
Read more about configuring chains & providers with wagmi
.
Setup providers
- Set up the DiditProvider pass clientUrl (str) URL to your backend server [i.e: 'http://127.0.0.1:8000/avatar/integrations']
<DiditProvider clientUrl="https://apx.dev.didit.me/profile/authorizations/v1">
- Set up DiditAuthProvider
Pass the next parameters to the provider:
- chains (str): Wagmi config of the requested chain [i.e: wagmiConfig.chains]
- theme (str): theme function to customize RainbowKit UI to match your branding.
there are 3 built-in theme functions:
lightTheme
(default)darkTheme
midnightTheme
refer to RainbowKit Theming for more.
<DiditAuthProvider chains={chains} theme={darkTheme()}>
Wrap providers
Wrap your application with DiditProvider
, DiditAuthProvider
and WagmiConfig
.
const App = () => {
return (
<WagmiConfig config={wagmiConfig}>
<DiditProvider clientUrl="https://apx.dev.didit.me/profile/authorizations/v1">
<DiditAuthProvider chains={chains} theme={darkTheme()}>
{children}
</DiditAuthProvider>
</DiditProvider>
</WagmiConfig>
);
};
Add the connect button
Then, in your app, import and render the ConnectButton
component.
import { ConnectButton } from 'didit-sdk';
export const YourApp = () => {
return <ConnectButton />;
};
Retrieve the accessToken & walletAddress
import { useDiditStatus } from 'didit-sdk';
// 'loading' | 'authenticated' | 'unauthenticated'
const Component = () => {
const { address, token, status, error } = useDiditStatus();
return (
<div>
{status === 'authenticated' && <span>token: {token}</span>}
<span>address: {address}</span>
</div>
);
};
- address: connected address
- token: provided accessToken
- status:
"loading" | "authenticated" | "unauthenticated"
- error: any error from within the SDK
Login & Logout functions
import { useAuthenticationAdapter, useConnectModal } from 'didit-sdk';
const Component = () => {
const adapter = useAuthenticationAdapter();
const { openConnectModal } = useConnectModal();
return (
<>
<button onClick={() => adapter.signOut()}>LOGOUT</button>
{openConnectModal && (
<button onClick={() => openConnectModal()}>LOGIN</button>
)}
</>
);
};