ตัวเชื่อมต่อ Modal

ตัวเชื่อมต่อ Modal

เปิด modal ผ่าน Hooks แบบโปรแกรม

Hooks ต่อไปนี้ถูกจัดเตรียมเพื่อให้สามารถเปิด modals แบบโปรแกรมได้ทุกที่ในแอปพลิเคชันของคุณ

• useConnectModal
• useAccountModal
• useChainModal

แต่ละ Hook เหล่านี้จะส่งคืนวัตถุที่มีฟังก์ชันสำหรับการเปิด modal ที่เกี่ยวข้อง แต่ละ Hook เหล่านี้จะส่งคืนวัตถุที่มีฟังก์ชันสำหรับการเปิด modal ที่เกี่ยวข้อง โปรดทราบว่าฟังก์ชันที่ส่งคืนจะเป็น undefined หากแอปพลิเคชันของคุณไม่ได้อยู่ในสถานะที่ต้องการสำหรับการเปิด modal

import {
  useConnectModal,
  useAccountModal,
  useChainModal,
} from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  const { openConnectModal } = useConnectModal();
  const { openAccountModal } = useAccountModal();
  const { openChainModal } = useChainModal();

  return (
    <>
      {openConnectModal && (
        <button onClick={openConnectModal} type="button">
          Open Connect Modal
        </button>
      )}

      {openAccountModal && (
        <button onClick={openAccountModal} type="button">
          Open Account Modal
        </button>
      )}

      {openChainModal && (
        <button onClick={openChainModal} type="button">
          Open Chain Modal
        </button>
      )}
    </>
  );
};

แต่ละ hook ยังส่งคืนค่า boolean สำหรับสถานะของ modal แต่ละ hook ยังส่งคืนค่า boolean สำหรับสถานะของ modal โดยปกติขอแนะนำให้คุณพึ่งพาเฉพาะ Wagmi hooks (ได้แก่ useAccount) เพื่อโต้ตอบกับสถานะการเชื่อมต่อกระเป๋าเงินของผู้ใช้โดยตรง แทนที่จะพึ่งพาสถานะของ Connect Modal

const { connectModalOpen } = useConnectModal();
const { accountModalOpen } = useAccountModal();
const { chainModalOpen } = useChainModal();

RainbowKit ถูกออกแบบมาเพื่อไม่สร้างการขัดขวางและสามารถตอบสนองได้ดี ดังนั้น dApps ควรแสดงอินเทอร์เฟซสำหรับผู้ใช้ไม่ว่าพวกเขาจะเชื่อมต่อกระเป๋าเงินของตัวเองหรือไม่ RainbowKit ถูกออกแบบมาเพื่อไม่สร้างการขัดขวางและสามารถตอบสนองได้ดี ดังนั้น dApps ควรแสดงอินเทอร์เฟซสำหรับผู้ใช้ไม่ว่าพวกเขาจะเชื่อมต่อกระเป๋าเงินของตัวเองหรือไม่ ผู้ใช้สามารถเชื่อมต่อหรือยกเลิกการเชื่อมต่อกระเป๋าเงินของตนโดยตรงจาก MetaMask ดังนั้น dApp ต้องสามารถตอบสนองกับสถานะการเชื่อมต่อที่ขั้นพื้นฐานโดยตรง

dApps ที่พึ่งพากลไกเช่นการลงชื่อตาม Ethereum สำหรับการยืนยันผู้ใช้ ควรอิงตามฟีเจอร์ Authentication แทน