droplinked-web3-ui 0.0.13 → 0.0.16

package/README.md

@@ -53,7 +53,7 @@ enum Actions {
 
 ### 1️⃣ Payment Action 💰
 
-Process cryptocurrency payments:
+Process cryptocurrency payments. The component automatically fetches cart and shop data from the API:
 
 ```tsx
 import { DroplinkedWeb3Ui, Actions } from 'droplinked-web3-ui';
@@ -65,10 +65,6 @@ function PaymentPage() {
       inputs={{
         cartId: "cart-id-here",
         shopId: "shop-id-here",
-        price: 100,
-        priceInShopCurrency: 100,
-        abbreviation: "USD",
-        symbol: "$",
         onError: (error) => console.error(error),
         onSuccess: (orderId) => console.log('Success:', orderId),
       }}
@@ -83,13 +79,11 @@ function PaymentPage() {
 |------|------|-------------|
 | 🛒 `cartId` | `string` | Shopping cart ID |
 | 🏪 `shopId` | `string` | Shop ID |
-| 💵 `price` | `number` | Payment amount |
-| 💱 `priceInShopCurrency` | `number` | Amount in shop currency |
-| 🏷️ `abbreviation` | `string` | Currency symbol (e.g., USD) |
-| 💲 `symbol` | `string` | Display symbol (e.g., $) |
 | ❌ `onError` | `(error: string) => void` | Error callback |
 | ✅ `onSuccess` | `(orderId?: string) => void` | Success callback |
 
+> 💡 **Note:** The component automatically fetches cart data (price, items) and shop data (currency, symbol) from the API using the provided `cartId` and `shopId`.
+
 ---
 
 ### 2️⃣ ClaimNFT Action 🎨
@@ -171,6 +165,14 @@ The component uses TypeScript generics to provide type-safe inputs based on the
 │   └── 📂 dropWeb3Context/           # 🌐 Web3 context
 ├── 📂 hooks/                         # ⚓ Custom hooks
 ├── 📂 stores/                        # 🏪 Zustand stores
+│   ├── paymentUiStore.ts             # 💳 Payment UI state
+│   ├── cartStore/                    # 🛒 Cart data
+│   ├── shopStore/                    # 🏪 Shop data
+│   ├── claimNftStore.ts              # 🎨 NFT claim state
+│   ├── modalStore.ts                 # 🪟 Modal state
+│   ├── walletStore.ts                # 👛 Wallet state
+│   ├── tokenStore.ts                 # 🪙 Token state
+│   └── orderStore.ts                 # 📋 Order state
 ├── 📂 apis/                          # 🔌 API services
 └── 📂 utils/                         # 🛠️ Utilities
 ```
@@ -274,16 +276,14 @@ Hook for formatting financial amounts.
 
 ### 💳 paymentUiStore
 
-Manages payment state:
+Manages payment UI state:
 
 ```tsx
 import { usePaymentUiStore } from '@/stores/paymentUiStore';
 
 const {
   cartId,                     # 🛒
-  price,                      # 💵
-  abbreviation,               # 🏷️
-  symbol,                     # 💲
+  shopId,                     # 🏪
   onError,                    # ❌
   onMainProcessSuccess,       # ✅
   setPaymentUiData,           # 📝 (props) => set state
@@ -293,6 +293,8 @@ const {
 } = usePaymentUiStore();
 ```
 
+> 💡 Cart price and shop currency are stored in `cartStore` and `shopStore` respectively.
+
 ---
 
 ### 🎨 claimNftStore
@@ -389,6 +391,37 @@ Manages order state.
 
 ---
 
+### 🛒 cartStore
+
+Manages cart data fetched from API:
+
+```tsx
+import { useCartStore } from '@/stores/cartStore';
+
+const {
+  cart,           # 🛒 ICart - Cart data
+  updateCart,     # 📝 (cart) => Update cart
+  resetCart,      # 🔄 () => Reset cart
+} = useCartStore();
+```
+
+---
+
+### 🏪 shopStore
+
+Manages shop data fetched from API:
+
+```tsx
+import { useShopStore } from '@/stores/shopStore';
+
+const {
+  shop,           # 🏪 IShop - Shop data
+  updateShop,     # 📝 (shop) => Update shop
+} = useShopStore();
+```
+
+---
+
 ## 🧩 Main Components
 
 ### 🌐 DropWeb3Provider
@@ -431,6 +464,8 @@ Services are located in `src/apis/`:
 | 💳 Payment | `payment/services.ts` | Payment services |
 | 📋 Orders | `orders/services.ts` | Order services |
 | 🌐 Web3 | `web3/services.ts` | Web3 services |
+| 🛒 Cart | `cart/services.ts` | Cart data fetching |
+| 🏪 Shop | `shop/services.ts` | Shop data fetching |
 
 ---