@cod3x/rainbowkit
v1.0.21
Published
## @cod3x/rainbowkit Package Documentation**:**
Downloads
7
Readme
@cod3x/rainbowkit
@cod3x/rainbowkit Package Documentation**:**
The @cod3x/rainbowkit
package is a React component that provides authentication functionality using the Cod3x SDK and RainbowKit. This package allows users to sign in with Ethereum to the app using SIWE (Sign-In with Ethereum) and manages the authentication state.
\
Installing Cod3x Rainbowkit:
To utilize the Cod3x rainbowkit package, first install it to the desired directory of the project:
To install Cod3x rainbowkit
{% tabs %} {% tab title="npm" %}
npm install @cod3x/rainbowkit
{% endtab %}
{% tab title="yarn" %}
yarn add @cod3x/rainbowkit
{% endtab %}
{% tab title="pnpm" %}
pnpm add @cod3x/rainbowkit
{% endtab %} {% endtabs %}
Usage
Import the RainbowCod3xProvider
component from the package and wrap your application with it.
import {RainbowKitUseCod3xProvider} from '@cod3x/rainbowkit';
import {
RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { AppProps } from 'next/app';
import { WagmiConfig } from 'wagmi';
export default function App({ Component, pageProps }: AppProps) {
// You'll need to resolve AUTHENTICATION_STATUS here
// using your application's authentication system.
// It needs to be either 'loading' (during initial load),
// 'unauthenticated' or 'authenticated'.
return (
<WagmiConfig {...etc}>
<RainbowKitUseCodexProvider
onSignIn={onSignIn} onSignOut={onSignOut}
>
<RainbowKitProvider {...etc}>
<Component {...pageProps} />
</RainbowKitProvider>
</RainbowKitAuthenticationProvider>
</WagmiConfig>
);
}
Contributing
We welcome contributions to the @cod3x/openapi package! Here's how you can help:
Reporting Issues
If you find a bug or have a suggestion for improving the package:
- Check if the issue already exists in the GitHub Issues.
- If not, open a new issue, providing as much detail as possible about the problem or suggestion.
Submitting Pull Requests
- Fork the repository and create your branch from
main
. - Install dependencies:
npm install
- Make your changes, adding tests if applicable.
- Ensure the test suite passes:
npm test
- Run the linter and fix any issues:
npm run lint:fix
- Format your code:
npm run prettier:fix
- Commit your changes using a descriptive commit message.
- Push to your fork and submit a pull request to the
main
branch.
Development Scripts
npm run build
: Build the packagenpm run dev
: Build and watch for changesnpm test
: Run testsnpm run coverage
: Run tests with coverage reportnpm run lint
: Check for linting errorsnpm run lint:fix
: Fix linting errorsnpm run prettier
: Check code formattingnpm run prettier:fix
: Fix code formattingnpm run verify
: Run linter and prettier checksnpm run verify:fix
: Fix linter and prettier issues
Coding Style
Please follow the existing coding style. We use ESLint and Prettier to maintain code quality and consistency.
License
By contributing to @cod3x/rainbowkit, you agree that your contributions will be licensed under its MIT License.
Thank you for your interest in improving @cod3x/rainbowkit!