Cơ Bản

1. Căn bản về Frontend

NextJS App Router (Typescript) + TailwindCSS + Shadcn UI

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

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

Bạn sẽ thấy prompts sau trong terminal:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

Cho từng prompt, bạn sẽ chọn những lựa chọn sau:

What is your project named? my-app
Would you like to use TypeScript? Yes # Typescript is currently the top choice
Would you like to use ESLint? Yes # ESLint to lint your code
Would you like to use Tailwind CSS? Yes # Tailwind CSS for writing interfaces quickly
Would you like to use `src/` directory? No # Do not use src directory because it is not necessary
Would you like to use App Router? (recommended) Yes # Use App router to take advantage of the latest nextjs features
Would you like to customize the default import alias (@/*)? No # No, use default

Truy cập Next.JS Docs ở đây nếu bạn gặp vấn đề: https://nextjs.org/docs

cd vào directory của bạn và chạy command sau để cài đặt Shadcn UI

npx shadcn-ui@latest init

Bạn sẽ thấy nhưng prompt sau đây để set up components.json:

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › no / yes

Bạn có thể lựa chọn theo sở thích nhưng cho bootcamp này thì bạn sẽ lựa chọn:

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › yes

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

Điểm đặc biệt của Shadcn UI là thư viện sẽ tạo folder components trực tiếp trong project như bên dưới:

.
└── components
    ├── ui
    │   ├── button.tsx
    │   ├── input.tsx
    │   ├── card.tsx
    │   └── form.tsx  
    └── authentication-menu.tsx

Bạn sẽ sử dụng những component trong folder ui để xây dựng lên những custom component riêng. Ví dụ như trên là bạn dùng 4 component button.tsx, input.tsx, card.tsx và form.tsx để tạo custom component authentication-menu.tsx.

2. Khởi tạo project trên WalletConnect

Truy cập https://cloud.walletconnect.com/sign-in.

Tạo account và theo hướng dẫn trên Dashboard để set up Project ID.

WalletConnect sẽ dùng Project ID của bạn để track các request kết nối.

Wagmi + Rainbowkit + Tanstack React Query

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

Bạn sẽ cài đặt thư viện wagmi chung với Rainbowkit

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

Tiếp theo, bạn tạo file providers.tsx trong thư mục app

'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, bạn thêm đoạn code này vào file next.config.mjs:

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

export default nextConfig;

‍

3. Connect Wallet Button

Sau đó bạn có thể import <ConnectButton /> vào app 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>
  );
}