Cài đặt UI package (tùy chọn, nếu dùng giao diện từ Orderly)

npm install @orderly.network/ui

Trong ./layout.tsx (hoặc _app.tsx), import CSS:

import '@orderly.network/ui/dist/styles.css';

Cấu trúc bọc provider

Toàn bộ app (hoặc phần cần dùng ví) nên được bọc bởi WhatWagmiProvider và QueryClientProvider:

import {WhatWagmiProvider} from 'adapter-connect';

<QueryClientProvider client={queryClient}>
    <WhatWagmiProvider privyKey={process.env.NEXT_PUBLIC_PRIVY_KEY!}>
      {children}
    </WhatWagmiProvider>
</QueryClientProvider>

or

const WhatWagmiProvider = dynamic(
() => import('adapter-connect').then((mod) => ({ default: mod.WhatWagmiProvider })),
{ ssr: false }
);

WhatWagmiProvider hiện đang:

• Bọc app bằng PrivyProvider (auth + ví).
• Khởi tạo WagmiProvider với chain base.
• Render thêm ModalPrivyConnect để chọn ví / login.

Declare global functions

    Window {
    window.openModalPrivyConnect: () => void;
    window.openModalPrivyWallet: () => void;
}

Mở modal kết nối ví (Privy + wallet)

Ở bất kỳ nơi nào trong client code, có thể gọi:

window.openModalPrivyConnect();

Lệnh trên sẽ mở ModalPrivyConnect để:

• Đăng nhập bằng Email / Google / Twitter.
• Kết nối ví EVM (MetaMask, WalletConnect, Brave, Binance, Privy wallet, ...).

Mở modal chọn ví (wallet list riêng)

Ngoài openModalPrivyConnect, bạn có thể mở modal danh sách ví riêng (nếu được implement trong code) bằng:

window.openModalPrivyWallet();

Tuỳ vào implementation, modal này có thể hiển thị danh sách ví EVM / Solana cụ thể để chọn nhanh.