Rainbow logo
RainbowKit
2.2.4

自定義錢包

自定義錢包

創建一個自定義錢包

注意:此 API 不穩定,可能在不久的將來會發生變化。 我們會隨著時間的推移加入更多內建錢包。 如果您對任何特定的錢包有興趣,請告訴我們

Wallet 函數類型提供了幫助您定義自訂錢包的功能。 可以在您的 Wallet 函數的返回值中配置以下屬性:

PropTypeDefault
id*string
name*string
rdnsstring
shortNamestring | undefined
iconUrl*string | (() => Promise<string>)
iconAccentstring
iconBackground*string
installedboolean | undefined
downloadUrlsDownloadUrls | undefined
hidden(args) => boolean | undefined
createConnector*RainbowKitConnector
mobileobject
desktopobject
qrCodeobject
extensionobject
createConnector*(details: WalletDetailsParams) => CreateConnectorFn
PropTypeDefault
androidstring
iosstring
mobilestring
qrCodestring
chromestring
edgestring
firefoxstring
operastring
safaristring
browserExtensionstring

例如,要使用 WalletConnect 創建一個自定義錢包:

import { Wallet, getWalletConnectConnector } from '@rainbow-me/rainbowkit';
export interface MyWalletOptions {
projectId: string;
}
export const rainbow = ({ projectId }: MyWalletOptions): Wallet => ({
id: 'my-wallet',
name: 'My Wallet',
iconUrl: 'https://my-image.xyz',
iconBackground: '#0c2f78',
downloadUrls: {
android: 'https://play.google.com/store/apps/details?id=my.wallet',
ios: 'https://apps.apple.com/us/app/my-wallet',
chrome: 'https://chrome.google.com/webstore/detail/my-wallet',
qrCode: 'https://my-wallet/qr',
},
mobile: {
getUri: (uri: string) => uri,
},
qrCode: {
getUri: (uri: string) => uri,
instructions: {
learnMoreUrl: 'https://my-wallet/learn-more',
steps: [
{
description:
'We recommend putting My Wallet on your home screen for faster access to your wallet.',
step: 'install',
title: 'Open the My Wallet app',
},
{
description:
'After you scan, a connection prompt will appear for you to connect your wallet.',
step: 'scan',
title: 'Tap the scan button',
},
],
},
},
extension: {
instructions: {
learnMoreUrl: 'https://my-wallet/learn-more',
steps: [
{
description:
'We recommend pinning My Wallet to your taskbar for quicker access to your wallet.',
step: 'install',
title: 'Install the My Wallet extension',
},
{
description:
'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.',
step: 'create',
title: 'Create or Import a Wallet',
},
{
description:
'Once you set up your wallet, click below to refresh the browser and load up the extension.',
step: 'refresh',
title: 'Refresh your browser',
},
],
},
},
createConnector: getWalletConnectConnector({ projectId }),
});

然後您可以將您的自定義錢包添加到錢包列表中。