Nền tảng

1. Khởi tạo dự án giao diện người dùng Next.js

NextJS App Router (Typescript) + TailwindCSS + Shadcn UI

Next.js Pages/App Router là một framework React full-stack. Framework này linh hoạt và giúp bạn xây dựng các ứng dụng React lớn hoặc nhỏ. Để bắt đầu tạo một dự án Next.js mới, hãy chạy lệnh sau trong terminal:

npx create-next-app@latest my-app --typescript --tailwind --eslint

Bạn sẽ thấy các thông báo sau trong cửa sổ terminal:

Tên dự án của bạn là gì? my-app Bạn có muốn sử dụng TypeScript không? Không / Có Bạn có muốn sử dụng ESLint không? Không / Có Bạn có muốn sử dụng Tailwind CSS không? Không / Có Bạn có muốn sử dụng thư mục `src/` không? Không / Có Bạn có muốn sử dụng App Router không? (khuyến nghị) Không / Có Bạn có muốn tùy chỉnh mặc định không? Bí danh nhập khẩu (@ /*)? Không / Có Bạn muốn cấu hình bí danh nhập khẩu nào? @/*

Với mỗi câu hỏi gợi ý, bạn sẽ chọn các tùy chọn sau:

Tên dự án của bạn là gì? my-app Bạn có muốn sử dụng TypeScript không? Có # TypeScript hiện là lựa chọn hàng đầu Bạn có muốn sử dụng ESLint không? Có # ESLint để kiểm tra mã của bạn Bạn có muốn sử dụng Tailwind CSS không? Có # Tailwind CSS để viết giao diện nhanh chóng Bạn có muốn sử dụng thư mục `src/` không? Không # Không sử dụng thư mục src vì nó không cần thiết Bạn có muốn sử dụng App Router không? (khuyến nghị) Có # Sử dụng App Router để tận dụng các tính năng mới nhất của Nextjs Bạn có muốn tùy chỉnh mặc định không? import alias (@ /*)? No # Không, sử dụng mặc định

Nếu gặp sự cố, hãy truy cập tài liệu Next.JS tại đây: https://nextjs.org/docs

đĩa CD vào thư mục của bạn (ứng dụng của tôi (hoặc bất kỳ tên nào bạn đã chọn) và chạy lệnh sau để cài đặt Shadcn UI

npx shadcn-ui@latest init

Bạn sẽ thấy các lời nhắc sau để thiết lập. components.json:

Bạn muốn sử dụng kiểu nào? › Mặc định Bạn muốn sử dụng màu nào làm màu nền? › Xám đá Bạn có muốn sử dụng biến CSS cho màu sắc không? › Không / Có

Bạn có thể lựa chọn theo sở thích của mình, nhưng đối với khóa học này, bạn sẽ chọn:

Bạn muốn sử dụng kiểu nào? › Mặc định Bạn muốn sử dụng màu nào làm màu nền? › Xám đá Bạn có muốn sử dụng biến CSS cho màu sắc không? › Có

Tìm hiểu thêm với hướng dẫn của ShadcnUI: https://ui.shadcn.com/docs/installation/next

Một tính năng đặc biệt của giao diện người dùng Shadcn là thư viện này sẽ tạo ra một các thành phần sao chép trực tiếp vào thư mục dự án như sau:

. └── các thành phần ├── giao diện người dùng │ ├── button.tsx │ ├── input.tsx │ ├── card.tsx │ └── form.tsx └── authentication-menu.tsx

Bạn sẽ sử dụng các thành phần trong giao diện người dùng thư mục để xây dựng của riêng bạn các thành phần tùy chỉnhVí dụ trên, bạn sử dụng 4 thành phần. button.tsx, input.tsx, card.tsx Và form.tsx để tạo một thành phần tùy chỉnh authentication-menu.tsx.

2. Tạo dự án trên WalletConnect

Hãy truy cập https://cloud.walletconnect.com/sign-in .

Hãy tạo tài khoản và làm theo hướng dẫn trên Bảng điều khiển để thiết lập Mã dự án.

WalletConnect sẽ sử dụng ID dự án của bạn để theo dõi các yêu cầu kết nối.

Truy vấn React Wagmi + Rainbowkit + Tanstack

Wagmi là một thư viện React Hook giúp xây dựng giao diện nhanh hơn. Đặc biệt, Wagmi cung cấp các React Hook tiện lợi để quản lý toàn bộ vòng đời của một giao dịch, từ việc kết nối ví, khởi tạo giao dịch, chờ kết quả trả về từ node và xử lý lỗi hoặc trạng thái giao dịch thành công. Quản lý tốt toàn bộ vòng đời của một giao dịch sẽ giúp nâng cao trải nghiệm người dùng, giúp họ hiểu rõ hơn về các hoạt động của mình.

Bạn sẽ cài đặt thư viện wagmi tương tự như Rainbowkit.

npm install @rainbow-me/rainbowkit wagmi viem@ 2. x @tanstack/react-query

Tiếp theo, bạn tạo providers.tsx tập tin trong ứng dụng thư mục

'use client';

import * as React from 'react';
import {
  RainbowKitProvider,
  getDefaultWallets,
  getDefaultConfig,
} from '@rainbow-me/rainbowkit';
import {
  trustWallet,
  ledgerWallet,
} from '@rainbow-me/rainbowkit/wallets';
import {
  klaytn, // import klaytn mainnet
  klaytnBaobab, // import klaytn testnet
} from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider, http } from 'wagmi';
// import according to docs

const { wallets } = getDefaultWallets();
// initialize and destructure wallets object

const config = getDefaultConfig({
  appName: 'MY_APP', // Name your app
  projectId: "WALLETCONNECT_PROJECT_ID", // Enter your WalletConnect Project ID here
  wallets: [
    ...wallets,
    {
      groupName: 'Other',
      wallets: [trustWallet, ledgerWallet],
    },
  ],
  chains: [
    klaytn,
    klaytnBaobab
  ],
  transports: {
    [klaytn.id]: http('https://rpc.ankr.com/klaytn'), // Select RPC provider Ankr instead of the default
    [klaytnBaobab.id]: http('https://rpc.ankr.com/klaytn_testnet'), // Select RPC provider Ankr instead of the default
  },
  ssr: true, // Because it is Nextjs's App router, you need to declare ssr as true
});

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Tiếp theo, hãy thêm đoạn mã này vào... next.config.mjs tài liệu:

/** @type {import('next').NextConfig} */
const nextConfig = {
  ...
  reactStrictMode: true,
  webpack: config => {
    config.externals.push('pino-pretty', 'lokijs', 'encoding');
    return config;
  },
};

export default nextConfig;

Tiếp theo, gói <Providers> xung quanh những đứa trẻ trong bạn layout.tsx tệp này:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import '@rainbow-me/rainbowkit/styles.css';
import { Providers } from './providers';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Klaytn DApp Bootcamp Frontends",
  description: "Interactive frontend for Klaytn DApp bootcamp contracts",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

3. Nút Kết nối Ví

Sau đó bạn có thể nhập khẩu. <ConnectButton /> vào ứng dụng của bạn

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

export default function Home() {

  return (
    <div className="flex flex-col gap-8 items-center justify-center py-12 px-4 p-48:lg">
      <ConnectButton />
    </div>
  );
}