Custom App Info

Customizing your app’s info

You can pass your app’s info in the appInfo prop for RainbowKitProvider. Properties you can modify are your app's name (appName) and the link where the “Learn More” button in the connection modal redirects to (learnMoreUrl):

import { RainbowKitProvider } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      appInfo={{
        appName: 'Rainbowkit Demo',
        learnMoreUrl: 'https://learnaboutcryptowallets.example',
      }}
      {...etc}
    >
      {/* ... */}
    </RainbowKitProvider>
  );
};

Add a Disclaimer

You can provide your own disclaimer to be displayed at the bottom of the connection modal. The disclaimer property in appInfo takes a DisclaimerComponent with arguments Text and Link. You can use it to build your own disclaimer that inherits the theming system. We export the DisclaimerComponent type for TypeScript users:

import {
  RainbowKitProvider,
  DisclaimerComponent,
} from '@rainbow-me/rainbowkit';

const Disclaimer: DisclaimerComponent = ({ Text, Link }) => (
  <Text>
    By connecting your wallet, you agree to the{' '}
    <Link href="https://termsofservice.xyz">Terms of Service</Link> and
    acknowledge you have read and understand the protocol{' '}
    <Link href="https://disclaimer.xyz">Disclaimer</Link>
  </Text>
);

const App = () => {
  return (
    <RainbowKitProvider
      appInfo={{
        appName: 'RainbowKit Demo',
        disclaimer: Disclaimer,
      }}
      {...etc}
    >
      {/* ... */}
    </RainbowKitProvider>
  );
};

Overview

Getting Started

Advanced

Custom App Info

Customizing your app’s info

Add a Disclaimer