one-ewallet-otc-ui 0.0.1

package/README.md

@@ -0,0 +1,253 @@
+# One E-Wallet OTC UI Component Library
+
+A React + TypeScript + Vite component library for OTC (Over-The-Counter) trading, providing OTC trading and withdrawal functionality components.
+
+## 📦 Installation
+
+```bash
+npm install one-ewallet-otc-ui
+# or
+yarn add one-ewallet-otc-ui
+# or
+pnpm add one-ewallet-otc-ui
+```
+
+## 🔧 Dependencies
+
+This component library requires the following peer dependencies. Please ensure they are installed in your project:
+
+- `react` >= 18.2.0
+- `react-dom` >= 18.2.0
+
+Additionally, the component library uses the following dependencies internally. If your project also uses these libraries, it's recommended to use the same versions to avoid conflicts:
+
+- `@onelabs/dapp-kit` ^0.15.5
+- `@tanstack/react-query` ^5.83.0
+- `antd` ^5.12.5
+- `axios` ^1.13.2
+
+## 🚀 Quick Start
+
+### 1. Setup SuiClientProvider (Required)
+
+Since the components use `@onelabs/dapp-kit`, you need to set up `SuiClientProvider` and `QueryClientProvider` at the top level of your application:
+
+```tsx
+import { SuiClientProvider, createNetworkConfig } from '@onelabs/dapp-kit'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { OtcModal, Withdraw } from 'one-ewallet-otc-ui'
+
+// Create Sui network configuration
+const { networkConfig } = createNetworkConfig({
+  mainnet: { url: 'https://fullnode.mainnet.sui.io:443' },
+  testnet: { url: 'https://fullnode.testnet.sui.io:443' },
+  devnet: { url: 'https://fullnode.devnet.sui.io:443' },
+})
+
+// Create React Query client
+const queryClient = new QueryClient()
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SuiClientProvider networks={networkConfig} defaultNetwork="mainnet">
+        {/* Your app content */}
+      </SuiClientProvider>
+    </QueryClientProvider>
+  )
+}
+```
+
+### 2. Using OtcModal Component
+
+`OtcModal` is an OTC trading modal component:
+
+```tsx
+import { OtcModal } from 'one-ewallet-otc-ui'
+
+function MyComponent() {
+  return (
+    <OtcModal
+      baseUrl="/api"                    // API base URL
+      authToken="your-auth-token"       // User authentication token
+      userAddress="user-sui-address"    // User Sui address
+      lang="EN"                         // Language: 'ZH' | 'EN', default is 'EN'
+    >
+      <button>Open OTC Trading</button>
+    </OtcModal>
+  )
+}
+```
+
+#### OtcModal Props
+
+| Property | Type | Required | Default | Description |
+|----------|------|----------|----------|-------------|
+| `children` | `React.ReactNode` | ✅ | - | Element that triggers the modal to open |
+| `baseUrl` | `string` | ✅ | - | API base URL |
+| `authToken` | `string` | ✅ | - | User authentication token |
+| `userAddress` | `string` | ✅ | - | User Sui wallet address |
+| `lang` | `'ZH' \| 'EN'` | ❌ | `'EN'` | Interface language |
+
+### 3. Using Withdraw Component
+
+`Withdraw` is a withdrawal component that requires SuiClient support:
+
+```tsx
+import { Withdraw } from 'one-ewallet-otc-ui'
+import { useSuiClient } from '@onelabs/dapp-kit'
+
+function MyComponent() {
+  const suiClient = useSuiClient()
+  
+  const handleWithdraw = (withdrawData: any, callback: () => void) => {
+    // Handle withdrawal logic
+    console.log('Withdrawal data:', withdrawData)
+    // Execute withdrawal operation...
+    // Call callback when done
+    callback()
+  }
+
+  return (
+    <Withdraw
+      baseUrl="/api"
+      authToken="your-auth-token"
+      userAddress="user-sui-address"
+      suiClient={suiClient}
+      USDH_COIN_TYPE="0x72eba41c73c4c2ce2bcfc6ec1dc0896ba1b5c17bfe7ae7c6c779943f84912b41::usdh::USDH"
+      USDH_DECIMALS={9}
+      onSubmit={handleWithdraw}
+      lang="EN"
+    >
+      <button>Open Withdrawal</button>
+    </Withdraw>
+  )
+}
+```
+
+#### Withdraw Props
+
+| Property | Type | Required | Default | Description |
+|----------|------|----------|----------|-------------|
+| `children` | `React.ReactNode` | ✅ | - | Element that triggers the withdrawal modal to open |
+| `baseUrl` | `string` | ✅ | - | API base URL |
+| `authToken` | `string` | ✅ | - | User authentication token |
+| `userAddress` | `string` | ✅ | - | User Sui wallet address |
+| `suiClient` | `ReturnType<typeof useSuiClient>` | ✅ | - | SuiClient instance (obtained via `useSuiClient()` hook) |
+| `USDH_COIN_TYPE` | `string` | ✅ | - | USDH token Coin Type |
+| `USDH_DECIMALS` | `number` | ✅ | - | USDH token decimal places |
+| `onSubmit` | `(withdrawData: any, callback: () => void) => void` | ✅ | - | Withdrawal submit callback function |
+| `lang` | `'ZH' \| 'EN'` | ❌ | `'EN'` | Interface language |
+
+## 📝 Complete Example
+
+```tsx
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { SuiClientProvider, createNetworkConfig, useSuiClient } from '@onelabs/dapp-kit'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { OtcModal, Withdraw } from 'one-ewallet-otc-ui'
+
+// Create Sui network configuration
+const { networkConfig } = createNetworkConfig({
+  mainnet: { url: 'https://fullnode.mainnet.sui.io:443' },
+  testnet: { url: 'https://fullnode.testnet.sui.io:443' },
+  devnet: { url: 'https://fullnode.devnet.sui.io:443' },
+})
+
+const queryClient = new QueryClient()
+
+// Inner component: use hook inside Provider
+const AppContent = () => {
+  const suiClient = useSuiClient()
+  
+  const handleWithdraw = (withdrawData: any, callback: () => void) => {
+    console.log('Withdrawal data:', withdrawData)
+    // Execute withdrawal logic...
+    callback()
+  }
+
+  return (
+    <div>
+      <h1>My Application</h1>
+      
+      <OtcModal
+        baseUrl="/api"
+        authToken="your-auth-token"
+        userAddress="0x..."
+        lang="EN"
+      >
+        <button>OTC Trading</button>
+      </OtcModal>
+      
+      <Withdraw
+        baseUrl="/api"
+        authToken="your-auth-token"
+        userAddress="0x..."
+        suiClient={suiClient}
+        USDH_COIN_TYPE="0x72eba41c73c4c2ce2bcfc6ec1dc0896ba1b5c17bfe7ae7c6c779943f84912b41::usdh::USDH"
+        USDH_DECIMALS={9}
+        onSubmit={handleWithdraw}
+        lang="EN"
+      >
+        <button>Withdraw</button>
+      </Withdraw>
+    </div>
+  )
+}
+
+// Root component
+const App = () => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SuiClientProvider networks={networkConfig} defaultNetwork="mainnet">
+        <AppContent />
+      </SuiClientProvider>
+    </QueryClientProvider>
+  )
+}
+
+createRoot(document.getElementById('root')!).render(<App />)
+```
+
+## 🎨 Styling
+
+The component library includes built-in styles, so no additional CSS imports are needed. Styles are written in SCSS and are automatically bundled.
+
+## 🔌 API Endpoints
+
+The components require the following API endpoints:
+
+### OtcModal Required Endpoints
+
+- `POST {baseUrl}/ext/ewallet/getOtcAddress` - Get OTC address
+- Other OTC related endpoints...
+
+### Withdraw Required Endpoints
+
+- `POST {baseUrl}/ext/ewallet/getWithdrawAddress` - Get withdrawal address
+- Other withdrawal related endpoints...
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build
+npm run build
+
+# Preview build
+npm run preview
+```
+
+## 📄 License
+
+MIT
+
+## 🤝 Contributing
+
+Issues and Pull Requests are welcome!