Rainbow logo
RainbowKit
2.2.4

รายการกระเป๋าเงินที่กำหนดเอง

รายการกระเป๋าเงินที่กำหนดเอง

การปรับแต่งรายการ wallet

คุณสามารถนำเข้า wallet แต่ละตัวจาก '@rainbow-me/rainbowkit/wallets' พร้อมกับฟังก์ชัน connectorsForWallets เพื่อสร้างรายการ wallet ของคุณเองพร้อมตัวเชื่อมต่อที่จำเป็น ด้วยวิธีนี้คุณมีสิทธิ์ควบคุมเต็มรูปแบบในการแสดง wallet ที่จะแสดงและในลำดับที่คุณต้องการ ด้วยวิธีนี้คุณมีสิทธิ์ควบคุมเต็มรูปแบบในการแสดง wallet ที่จะแสดงและในลำดับที่คุณต้องการ

ตัวอย่างเช่น คุณสามารถเลือกแสดงเฉพาะ Rainbow พร้อมกับ wallet ที่เป็นทั่วไป

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { rainbowWallet, walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets';
const connectors = connectorsForWallets(
[
{
groupName: 'Recommended',
wallets: [rainbowWallet, walletConnectWallet],
},
],
{
appName: 'My RainbowKit App',
projectId: 'YOUR_PROJECT_ID',
}
);

คุณสามารถส่งตัวเชื่อมต่อของคุณไปยัง createConfig ของ Wagmi

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { createConfig } from 'wagmi';
const connectors = connectorsForWallets(/* ... */);
const config = createConfig({
connectors,
{/* Wagmi config */}
});
const queryClient = new QueryClient();
const App = () => (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider {...etc}>
{/* Your App */}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);

Wallet ต่อไปนี้มีผ่านข้อมูล wallet object.

Wallet ต่อไปนี้จัดลำดับตามเมธอดการเชื่อมต่อทั่วไปเป็นหลักไม่เฉพาะแอป ดังนั้นแนะนำให้กระเป๋าเหล่านี้มีอยู่เสมอ ดังนั้นแนะนำให้กระเป๋าเหล่านี้มีอยู่เสมอ

นี่เป็นตัวเลือกกระเป๋าเงินสำรองที่ออกแบบมาสำหรับกระเป๋าเงินที่ใช้ WalletConnect ที่ยังไม่ได้รับจากกระเป๋าเงินอื่น ๆ ในรายการ

แนะนำให้คุณเสมอรวมกระเป๋าเงินนี้ไว้ในรายการเพื่อให้แน่ใจว่ารองรับกระเป๋าเงินที่ใช้ WalletConnect ทั้งหมด.

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

นี่คือตัวเลือกกระเป๋าเงินสำรองที่ออกแบบมาสำหรับสถานการณ์ที่ window.ethereum มีอยู่แต่ยังไม่ได้ถูกให้มาจากกระเป๋าเงินอื่นในรายการ กระเป๋าเงินนี้จะซ่อนตัวเองอัตโนมัติจากรายการเมื่อไม่จำเป็นต้องใช้สำรองหรือถ้าไม่มีกระเป๋าเงินที่ถูก Inject ให้ใช้งานได้ กระเป๋าเงินนี้จะซ่อนตัวเองอัตโนมัติจากรายการเมื่อไม่จำเป็นต้องใช้สำรองหรือถ้าไม่มีกระเป๋าเงินที่ถูก Inject ให้ใช้งานได้

แนะนำให้คุณเสมอรวมกระเป๋าเงินนี้ไว้ในรายการเพื่อให้แน่ใจว่ารองรับกระเป๋าเงินที่ถูก Inject ทั้งหมด.

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

สำหรับ dApps ที่รองรับ Safe Apps เพื่อให้ผู้ใช้สามารถเชื่อมต่อกับตู้นิรภัยของพวกเขาหรือ multi-sig ได้อย่างง่ายดาย ให้รวมตัวเลือก safeWallet สำหรับการเชื่อมต่ออัตโนมัติ ตัวเลือก Safe จะปรากฏขึ้นเฉพาะในสภาพแวดล้อมของเบราว์เซอร์กระเป๋าเงินที่ปลอดภัยเท่านั้น ตัวเลือก Safe จะปรากฏขึ้นเฉพาะในสภาพแวดล้อมของเบราว์เซอร์กระเป๋าเงินที่ปลอดภัยเท่านั้น

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

กระเป๋าตังค์ต่อไปนี้นำเสนอผ่านทางวัตถุ wallet (เรียงตามลำดับตัวอักษร)

import { oneInchWallet } from '@rainbow-me/rainbowkit/wallets';
import { argentWallet } from '@rainbow-me/rainbowkit/wallets';
import { berasigWallet } from '@rainbow-me/rainbowkit/wallets';
import { bestWallet } from '@rainbow-me/rainbowkit/wallets';
import { binanceWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitgetWallet } from '@rainbow-me/rainbowkit/wallets';
import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitskiWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitverseWallet } from '@rainbow-me/rainbowkit/wallets';
import { bloomWallet } from '@rainbow-me/rainbowkit/wallets';
import { braveWallet } from '@rainbow-me/rainbowkit/wallets';
import { bybitWallet } from '@rainbow-me/rainbowkit/wallets';

ตัวเชื่อมต่อกระเป๋าเงินนี้รองรับทั้งแอพและส่วนขยายของ Coinbase Wallet รวมถึง Coinbase Smart Wallet บนเว็บ

มีการอาร์กิวเมนต์ preference ที่สามารถควบคุมว่า Smart Wallet ถูกเปิดใช้งานและพร้อมใช้งานสำหรับผู้ใช้หรือไม่ การทำงานตามตัวเลือกที่เลือกจะถูกบันทึกไว้ ที่นี่ การทำงานตามตัวเลือกที่เลือกจะถูกบันทึกไว้ ที่นี่

Smart Wallet จะถูกเปิดใช้งานโดยค่าเริ่มต้นด้วย all ในช่วงต้นเดือนมิถุนายน โดยไม่ต้องอัปเกรดเพิ่มเติม

นักพัฒนาสามารถทดสอบ Smart Wallet กับเชน sepolia และ baseSepolia ได้ในวันนี้โดยตั้งค่า smartWalletOnly และรวม coinbaseWallet ในรายการกระเป๋าเงินของพวกเขา เช่น:

import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
// Enable Coinbase Smart Wallet for testing
coinbaseWallet.preference = 'smartWalletOnly';
import { coin98Wallet } from '@rainbow-me/rainbowkit/wallets';
import { compassWallet } from '@rainbow-me/rainbowkit/compassWallet';
import { coreWallet } from '@rainbow-me/rainbowkit/wallets';
import { dawnWallet } from '@rainbow-me/rainbowkit/wallets';
import { enkryptWallet } from '@rainbow-me/rainbowkit/wallets';
import { foxWallet } from '@rainbow-me/rainbowkit/wallets';
import { frameWallet } from '@rainbow-me/rainbowkit/wallets';
import { frontierWallet } from '@rainbow-me/rainbowkit/wallets';
import { gateWallet } from '@rainbow-me/rainbowkit/wallets';
import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets';
import { iopayWallet } from '@rainbow-me/rainbowkit/wallets';
import { kaiaWallet } from '@rainbow-me/rainbowkit/wallets';
import { kaikasWallet } from '@rainbow-me/rainbowkit/wallets';
import { krakenWallet } from '@rainbow-me/rainbowkit/wallets';
import { kresusWallet } from '@rainbow-me/rainbowkit/wallets';
import { ledgerWallet } from '@rainbow-me/rainbowkit/wallets';
import { magicEdenWallet } from '@rainbow-me/rainbowkit/wallets';
import { mewWallet } from '@rainbow-me/rainbowkit/wallets';
import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { okxWallet } from '@rainbow-me/rainbowkit/wallets';
import { omniWallet } from '@rainbow-me/rainbowkit/wallets';
import { oneKeyWallet } from '@rainbow-me/rainbowkit/wallets';
import { paraSwapWallet } from '@rainbow-me/rainbowkit/wallets';
import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets';
import { rainbowWallet } from '@rainbow-me/rainbowkit/wallets';
import { ramperWallet } from '@rainbow-me/rainbowkit/wallets';
import { roninWallet } from '@rainbow-me/rainbowkit/wallets';
import { safeheronWallet } from '@rainbow-me/rainbowkit/wallets';
import { tahoWallet } from '@rainbow-me/rainbowkit/wallets';
import { talismanWallet } from '@rainbow-me/rainbowkit/wallets';
import { tokenaryWallet } from '@rainbow-me/rainbowkit/wallets';
import { tokenPocketWallet } from '@rainbow-me/rainbowkit/wallets';
import { trustWallet } from '@rainbow-me/rainbowkit/wallets';
import { uniswapWallet } from '@rainbow-me/rainbowkit/wallets';
import { valoraWallet } from '@rainbow-me/rainbowkit/wallets';
import { xdefiWallet } from '@rainbow-me/rainbowkit/wallets';
import { zerionWallet } from '@rainbow-me/rainbowkit/wallets';
import { wigwamWallet } from '@rainbow-me/rainbowkit/wallets';

นี่คือตัวอย่างบางส่วนของการแสดงกระเป๋าสตางค์ที่แตกต่างกัน, ในลำดับที่แตกต่างกัน.

แสดง MetaMask พร้อมกับกระเป๋าสตางค์ fallback ทั่วไป.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { metaMaskWallet, walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets';
const connectors = connectorsForWallets(
[
{
groupName: 'Recommended',
wallets: [metaMaskWallet, walletConnectWallet],
},
],
{ appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

แสดง Rainbow, MetaMask และ Coinbase พร้อมกับกระเป๋าเงิน fallback ทั่วไป

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { rainbowWallet, metaMaskWallet, coinbaseWallet, walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets';
const connectors = connectorsForWallets(
[
{
groupName: 'Suggested',
wallets: [
rainbowWallet,
metaMaskWallet,
coinbaseWallet,
walletConnectWallet,
],
},
],
{ appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

เตือนความจำ: ลำดับของอาร์เรย์ wallets กำหนดลำดับที่กระเป๋าเงินจะแสดงใน UI.

คุณสามารถใช้กุญแจ groupName ในการตั้งชื่อกลุ่มกระเป๋าเงินที่แตกต่างกัน. สิ่งนี้มีประโยชน์หากคุณต้องการแจ้งให้ผู้ใช้ของคุณทราบถึงกระเป๋าเงินที่คุณแนะนำ รวมถึงกระเป๋าเงินอื่นๆที่เป็นไปได้

แนะนำ Rainbow และ MetaMask, แต่ยังเสนอ Coinbase พร้อมกับกระเป๋าเงิน fallback ทั่วไป

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { rainbowWallet, metaMaskWallet, coinbaseWallet, walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets';
const connectors = connectorsForWallets(
[
{
groupName: 'Recommended',
wallets: [rainbowWallet, metaMaskWallet],
},
{
groupName: 'Others',
wallets: [coinbaseWallet, walletConnectWallet],
},
],
{ appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);