カスタムアプリ情報

アプリの情報をカスタマイズする

RainbowKitProvider の appInfo プロップでアプリの情報を渡すことができます。 RainbowKitProvider の appInfo プロップでアプリの情報を渡すことができます。変更できるプロパティは、アプリの名前（appName）と、「詳細を見る」ボタンがリダイレクトするリンク（learnMoreUrl）です。 RainbowKitProvider の appInfo プロップでアプリの情報を渡すことができます。変更できるプロパティは、アプリの名前（appName）と、「詳細を見る」ボタンがリダイレクトするリンク（learnMoreUrl）です。

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

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

免責事項を追加

接続モーダルの一番下に表示される独自の免責事項を提供できます。 appInfo の disclaimer プロパティは、Text と Link を引数にとる DisclaimerComponent を受け入れます。テーマシステムを継承する独自の免責事項を作成するために使用できます。 TypeScript ユーザー向けに DisclaimerComponent タイプをエクスポートします：

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>
  );
};

概要

入門

高度な設定

カスタムアプリ情報

アプリの情報をカスタマイズする

免責事項を追加