uploadkit-with-nextjs-rainbowkit

Greenfield UploadKit

Greenfield UploadKit is a React component library for easily uploading objects to BNB Greenfield.

Features

• 💡 Typescript — Get types straight out of the box.
• 🌱 Ecosystem Standards — Built on top of @bnb-chain/greenfield-js-sdk, wagmi and viem.
• 🎨 Customization — Easily customizing themes.

Documentation

For full documentation, visit here.

Examples

The following examples are provided in the examples folder of this repo.

• with-nextjs-wallkit
• with-nextjs-rainbowkit
• with-nextjs-walletkit

Installation

npm i wagmi viem @bnb-chain/greenfield-js-sdk @bnb-chain/greenfield-cosmos-types @bnb-chain/reed-solomon

Usage

Before using Greenfield UploadKit, you need to switch your network to the BNB Greenfield Chain. We recommend using @totejs/walletkit to connect your wallet and manage the network. This integration will ensure a seamless experience when working with Greenfield UploadKit.

import { WagmiConfig, createConfig } from 'wagmi';
import {
  SwitchNetworkModal,
  WalletKitButton,
  WalletKitOptions,
  WalletKitProvider,
  getDefaultConfig,
} from '@totejs/walletkit';
import { trustWallet, metaMask, walletConnect } from '@totejs/walletkit/wallets';
import { UploadKitButton, UploadKitOptions, UploadKitProvider } from '@node-real/greenfield-uploadkit';
import { chains } from './chains';
import { client } from './client';

import '@node-real/greenfield-uploadkit/styles.css';
import '@totejs/walletkit/styles.css';

const config = createConfig(
  getDefaultConfig({
    autoConnect: true,
    appName: 'WalletKit',

    /* WC 2.0 requires a project ID (get one here: https://cloud.walletconnect.com/sign-in) */
    walletConnectProjectId: '22d482af814af0b8d5ba3d394a28c5fc',

    chains,
    connectors: [trustWallet(), metaMask(), walletConnect()],
  }),
);

const options: WalletKitOptions = {
  initialChainId: 5600,
};

const uploadKitOptions: UploadKitOptions = {
  client: client,
};

export default function App({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig config={config}>
      <WalletKitProvider options={options} mode="light">
        <UploadKitProvider options={uploadKitOptions} mode="light">
          <WalletKitButton />
          <UploadKitButton />
          <Component {...pageProps} />
          <SwitchNetworkModal />
        </UploadKitProvider>
      </WalletKitProvider>
    </WagmiConfig>
  );
}

Contributing

Please follow our Greenfield UploadKit Contribution Guide.

License

See LICENSE for more information.