tek-wallet 0.0.807 → 0.0.809

package/README.md

@@ -19,7 +19,7 @@
 
 ```jsx
 import "swiper/css";
-import { TekWalletProvider } from "tek-wallet";
+import { TekWalletProvider, ThemeModes } from "tek-wallet";
 
 // Cấu hình cơ bản
 <TekWalletProvider
@@ -30,14 +30,74 @@ import { TekWalletProvider } from "tek-wallet";
 </TekWalletProvider>;
 ```
 
-### 2. Environment Variables
+**Cấu hình nâng cao:**
+
+```jsx
+import { TekWalletProvider, ThemeModes } from "tek-wallet";
+
+<TekWalletProvider
+  theme={theme} // Custom theme object
+  themeMode={ThemeModes.DARK} // Chế độ theme: DARK hoặc LIGHT
+  isSSO
+  accessToken={accessToken}
+  options={{
+    useDefaultToastMessage: true, // Sử dụng toast message mặc định
+    hideDefaultActivities: true, // Ẩn activities mặc định
+    hideActivitySectionInAssetView: true, // Ẩn section activities trong AssetView
+    useBasicAmountGroupInAssetView: true, // Sử dụng basic amount group trong AssetView
+    hideBackButtons: {
+      // Ẩn nút back trong các view cụ thể
+      activity: true,
+    },
+  }}
+  topOffset={viewportStatusBarHeight || 0} // Offset từ top (thường dùng cho mobile)
+  onLogout={handleLogout} // Callback khi logout
+  overrideQRScanMethod={isMobileApp ? scanQRCode : undefined} // Override QR scan method
+>
+  {children}
+</TekWalletProvider>;
+```
+
+### 2. TekWalletProvider Props
+
+**Props cơ bản:**
+
+| Prop          | Type      | Required | Mô tả                         |
+| ------------- | --------- | -------- | ----------------------------- |
+| `isSSO`       | `boolean` | ✅       | Bật chế độ SSO authentication |
+| `accessToken` | `string`  | ✅       | Token xác thực từ SSO         |
+
+**Props nâng cao:**
+
+| Prop                   | Type         | Required | Mô tả                                                |
+| ---------------------- | ------------ | -------- | ---------------------------------------------------- |
+| `theme`                | `object`     | ❌       | Custom theme object                                  |
+| `themeMode`            | `ThemeModes` | ❌       | Chế độ theme: `DARK` hoặc `LIGHT`                    |
+| `topOffset`            | `number`     | ❌       | Offset từ top (thường dùng cho mobile status bar)    |
+| `onLogout`             | `function`   | ❌       | Callback function khi user logout                    |
+| `overrideQRScanMethod` | `function`   | ❌       | Override QR scan method (thường dùng cho mobile app) |
+
+**Options object:**
+
+| Option                           | Type      | Default | Mô tả                                       |
+| -------------------------------- | --------- | ------- | ------------------------------------------- |
+| `useDefaultToastMessage`         | `boolean` | `false` | Sử dụng toast message mặc định của hệ thống |
+| `hideDefaultActivities`          | `boolean` | `false` | Ẩn activities mặc định                      |
+| `hideActivitySectionInAssetView` | `boolean` | `false` | Ẩn section activities trong AssetView       |
+| `useBasicAmountGroupInAssetView` | `boolean` | `false` | Sử dụng basic amount group trong AssetView  |
+| `hideBackButtons`                | `object`  | `{}`    | Ẩn nút back trong các view cụ thể           |
+
+**hideBackButtons object:**
+
+| Property   | Type      | Mô tả                           |
+| ---------- | --------- | ------------------------------- |
+| `activity` | `boolean` | Ẩn nút back trong activity view |
+
+### 3. Environment Variables
 
 Các biến môi trường cần thiết:
 
 ```env
-TEK_WALLET_API_KEY=your_api_key
-TEK_WALLET_AUTH_SECRET=your_auth_secret
-TEK_WALLET_REFRESH_TOKEN_URL=your_refresh_token_url
 NEXT_PUBLIC_TEK_WALLET_APP_SLUG=your_app_slug
 NEXT_PUBLIC_TEK_WALLET_SERVER_URL=your_server_url
 NEXT_PUBLIC_TEK_WALLET_ABLY_API_KEY=your_ably_api_key
@@ -63,14 +123,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 +186,157 @@ Nếu phía trước có path: `<path>/tek-wallet/[[...pathname]]/page.tsx` thì
 </TekWalletProvider>
 ```
 
+**Ví dụ cấu hình đầy đủ cho mobile app:**
+
+```jsx
+import { TekWalletProvider, ThemeModes } from "tek-wallet";
+
+function App() {
+  const handleLogout = () => {
+    // Xử lý logout logic
+    console.log("User logged out");
+  };
+
+  const scanQRCode = (callback) => {
+    // Custom QR scan implementation cho mobile
+    // Gọi native QR scanner
+    window.nativeQRScanner?.scan(callback);
+  };
+
+  return (
+    <TekWalletProvider
+      theme={customTheme}
+      themeMode={ThemeModes.DARK}
+      isSSO
+      accessToken={accessToken}
+      options={{
+        useDefaultToastMessage: true,
+        hideDefaultActivities: true,
+        hideActivitySectionInAssetView: true,
+        useBasicAmountGroupInAssetView: true,
+        hideBackButtons: {
+          activity: true,
+        },
+      }}
+      topOffset={viewportStatusBarHeight || 0}
+      onLogout={handleLogout}
+      overrideQRScanMethod={isMobileApp ? scanQRCode : undefined}
+    >
+      <YourApp />
+    </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.809",
   "description": "A custom React provider with TypeScript support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",