tek-wallet 0.0.807 → 0.0.808

package/README.md

@@ -63,14 +63,15 @@ const { tokens } = useWallet();
 
 ### Các Components Chính
 
-| Component             | Mô tả                                     |
-| --------------------- | ----------------------------------------- |
-| **LockToken**         | Cho phép người dùng khóa token trong ví   |
-| **SwapToken**         | Hỗ trợ chức năng hoán đổi token           |
-| **UpdateLockedToken** | Cho phép cập nhật thông tin token đã khóa |
-| **ReceiveFunction**   | Xử lý chức năng nhận token                |
-| **AssetView**         | Hiển thị tài sản trong ví                 |
-| **WithdrawFunction**  | Xử lý chức năng rút token                 |
+| Component             | Mô tả                                      |
+| --------------------- | ------------------------------------------ |
+| **LockToken**         | Cho phép người dùng khóa token trong ví    |
+| **SwapToken**         | Hỗ trợ chức năng hoán đổi token            |
+| **UpdateLockedToken** | Cho phép cập nhật thông tin token đã khóa  |
+| **ReceiveFunction**   | Xử lý chức năng nhận token                 |
+| **ReceiveDirectly**   | Component nhận token trực tiếp qua QR code |
+| **AssetView**         | Hiển thị tài sản trong ví                  |
+| **WithdrawFunction**  | Xử lý chức năng rút token                  |
 
 ### Components Xác nhận (Confirm)
 
@@ -125,6 +126,115 @@ Nếu phía trước có path: `<path>/tek-wallet/[[...pathname]]/page.tsx` thì
 </TekWalletProvider>
 ```
 
+### ReceiveDirectly
+
+Component cho phép hiển thị QR code và địa chỉ nhận token trực tiếp, hỗ trợ cả nhận nội bộ và nhận từ blockchain.
+
+**Props:**
+
+| Prop          | Type                    | Required | Mô tả                                                        |
+| ------------- | ----------------------- | -------- | ------------------------------------------------------------ |
+| `tokenSlug`   | `string`                | ✅       | Slug của token muốn nhận                                     |
+| `method`      | `ReceiveDirectlyMethod` | ✅       | Phương thức nhận: `RECEIVE_INTERNAL` hoặc `RECEIVE_EXTERNAL` |
+| `networkSlug` | `string`                | ❌       | Slug của network (bỏ qua nếu muốn cho user chọn network)     |
+| `amount`      | `string \| number`      | ❌       | Số lượng token muốn nhận (hiển thị trong QR code)            |
+| `userInfo`    | `object`                | ❌       | Thông tin người nhận để hiển thị                             |
+
+**Ref Methods:**
+
+| Method  | Mô tả      |
+| ------- | ---------- |
+| `open`  | Mở modal   |
+| `close` | Đóng modal |
+
+**Enum ReceiveDirectlyMethod:**
+
+```typescript
+enum ReceiveDirectlyMethod {
+  RECEIVE_INTERNAL = "Internal Transfer", // Nhận token nội bộ
+  RECEIVE_EXTERNAL = "Blockchain Deposit", // Nhận token từ blockchain
+}
+```
+
+**Ví dụ 1: Nhận token nội bộ (Internal Transfer)**
+
+```jsx
+import { ReceiveDirectly, ReceiveDirectlyMethod } from "tek-wallet";
+import { useRef } from "react";
+
+function MyComponent() {
+  const receiveRef = useRef(null);
+
+  return (
+    <>
+      <Button onClick={() => receiveRef.current?.open()}>Nhận USDT nội bộ</Button>
+
+      <ReceiveDirectly
+        ref={receiveRef}
+        tokenSlug="usdt"
+        method={ReceiveDirectlyMethod.RECEIVE_INTERNAL}
+        amount={100}
+        userInfo={{
+          nickname: "John Doe",
+          username: "@johndoe",
+          avatar: "https://example.com/avatar.jpg",
+        }}
+      />
+    </>
+  );
+}
+```
+
+**Ví dụ 2: Nhận token từ blockchain (Blockchain Deposit)**
+
+```jsx
+import { ReceiveDirectly, ReceiveDirectlyMethod } from "tek-wallet";
+import { useRef } from "react";
+
+function MyComponent() {
+  const receiveRef = useRef(null);
+
+  return (
+    <>
+      <Button onClick={() => receiveRef.current?.open()}>Nhận USDT từ blockchain</Button>
+
+      {/* Cách 1: Chỉ định network cụ thể */}
+      <ReceiveDirectly
+        ref={receiveRef}
+        tokenSlug="usdt"
+        method={ReceiveDirectlyMethod.RECEIVE_EXTERNAL}
+        networkSlug="trc20"
+      />
+
+      {/* Cách 2: Cho phép user chọn network */}
+      <ReceiveDirectly
+        ref={receiveRef}
+        tokenSlug="usdt"
+        method={ReceiveDirectlyMethod.RECEIVE_EXTERNAL}
+        // Không truyền networkSlug - user sẽ chọn network
+      />
+    </>
+  );
+}
+```
+
+**Ví dụ 3: Sử dụng với trigger children**
+
+```jsx
+<ReceiveDirectly tokenSlug="usdt" method={ReceiveDirectlyMethod.RECEIVE_INTERNAL}>
+  <Button>Click để nhận USDT</Button>
+</ReceiveDirectly>
+```
+
+**Lưu ý:**
+
+- 🔸 Khi sử dụng `RECEIVE_INTERNAL`, không cần truyền `networkSlug`
+- 🔸 Khi sử dụng `RECEIVE_EXTERNAL` mà không truyền `networkSlug`, user sẽ được yêu cầu chọn network
+- 🔸 Component tự động validate token và network, hiển thị lỗi nếu không hợp lệ
+- 🔸 QR code được tạo tự động dựa trên method và các thông tin được truyền vào
+- 🔸 Với Internal Transfer, QR code chứa thông tin JSON để xử lý chuyển khoản nội bộ
+- 🔸 Với Blockchain Deposit, QR code chứa địa chỉ blockchain wallet
+
 ---
 
 ## 📊 States

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tek-wallet",
-  "version": "0.0.807",
+  "version": "0.0.808",
   "description": "A custom React provider with TypeScript support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",