one-ewallet-otc-ui 0.0.2 → 0.0.4

package/README.md

@@ -58,7 +58,18 @@ function App() {
 }
 ```
 
-### 2. Using OtcModal Component
+### 2. Import Styles (Required)
+
+**Important:** You must import the component library's styles in your application entry file:
+
+```tsx
+// In your main.tsx or App.tsx
+import 'one-ewallet-otc-ui/style.css'
+// or
+import 'one-ewallet-otc-ui/dist/style.css'
+```
+
+### 3. Using OtcModal Component
 
 `OtcModal` is an OTC trading modal component:
 
@@ -89,7 +100,7 @@ function MyComponent() {
 | `userAddress` | `string` | ✅ | - | User Sui wallet address |
 | `lang` | `'ZH' \| 'EN'` | ❌ | `'EN'` | Interface language |
 
-### 3. Using Withdraw Component
+### 4. Using Withdraw Component
 
 `Withdraw` is a withdrawal component that requires SuiClient support:
 
@@ -147,6 +158,8 @@ 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'
+// Import styles
+import 'one-ewallet-otc-ui/style.css'
 
 // Create Sui network configuration
 const { networkConfig } = createNetworkConfig({
@@ -212,7 +225,16 @@ 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.
+**Important:** You must import the component library's styles in your application entry file:
+
+```tsx
+// In your main.tsx or App.tsx
+import 'one-ewallet-otc-ui/style.css'
+// or
+import 'one-ewallet-otc-ui/dist/style.css'
+```
+
+The component library includes built-in styles written in SCSS. The styles are automatically bundled into `dist/style.css` during the build process. Make sure to import this CSS file in your application for the components to display correctly.
 
 ## 🔌 API Endpoints
 

package/dist/index.es.js

@@ -25090,7 +25090,7 @@ function hw({ children: e, lang: t = "EN", authToken: n, userAddress: r, baseUrl
     }
   };
   return /* @__PURE__ */ Q.jsxs(Q.Fragment, { children: [
-    /* @__PURE__ */ Q.jsx(xt, { open: a, onCancel: L, footer: null, width: 560, centered: !0, destroyOnHidden: !0, children: /* @__PURE__ */ Q.jsxs("div", { className: "cf otc-modal", children: [
+    /* @__PURE__ */ Q.jsx(xt, { open: a, onCancel: L, footer: null, width: 560, centered: !0, destroyOnHidden: !0, children: /* @__PURE__ */ Q.jsxs("div", { className: "cf otc-modal-ui", children: [
       /* @__PURE__ */ Q.jsxs("div", { className: "m-b-16 fz-18 fwb ta", style: { position: "relative" }, children: [
         v !== "deposit" && /* @__PURE__ */ Q.jsx(
           "img",
@@ -25107,7 +25107,7 @@ function hw({ children: e, lang: t = "EN", authToken: n, userAddress: r, baseUrl
       ] }),
       v === "deposit" && /* @__PURE__ */ Q.jsxs(Q.Fragment, { children: [
         /* @__PURE__ */ Q.jsx("div", { className: "m-b-8 cf06", children: i("wallet.deposit.network") }),
-        /* @__PURE__ */ Q.jsx("div", { className: "token-select-box flex flex-center m-b-16", children: /* @__PURE__ */ Q.jsx(
+        /* @__PURE__ */ Q.jsx("div", { className: "token-select-box-ui flex flex-center m-b-16", children: /* @__PURE__ */ Q.jsx(
           nt,
           {
             value: u,
@@ -25117,7 +25117,7 @@ function hw({ children: e, lang: t = "EN", authToken: n, userAddress: r, baseUrl
               G && G.currency.length > 0 ? (z(G.currency), c(G.currency[0])) : (z([]), c(""));
             },
             disabled: j || !!g && (u == "HPAY" || u == "Huione"),
-            className: "custom-select",
+            className: "custom-select-ui",
             popupClassName: "popup-long",
             suffixIcon: /* @__PURE__ */ Q.jsx("img", { src: Jn, alt: "arrow", width: 12, height: 8 }),
             style: { border: "none", background: "transparent", width: "100%" },
@@ -25128,13 +25128,13 @@ function hw({ children: e, lang: t = "EN", authToken: n, userAddress: r, baseUrl
           }
         ) }),
         /* @__PURE__ */ Q.jsx("div", { className: "m-b-8 cf06", children: i("wallet.deposit.token") }),
-        /* @__PURE__ */ Q.jsx("div", { className: "token-select-box flex flex-center m-b-12", children: /* @__PURE__ */ Q.jsx(
+        /* @__PURE__ */ Q.jsx("div", { className: "token-select-box-ui flex flex-center m-b-12", children: /* @__PURE__ */ Q.jsx(
           nt,
           {
             value: l,
             onChange: (V) => c(V),
             disabled: j || !!g && (u == "HPAY" || u == "Huione"),
-            className: "custom-select",
+            className: "custom-select-ui",
             popupClassName: "popup-long",
             suffixIcon: /* @__PURE__ */ Q.jsx("img", { src: Jn, alt: "arrow", width: 12, height: 8 }),
             style: { border: "none", background: "transparent", width: "100%" },
@@ -25199,7 +25199,7 @@ function hw({ children: e, lang: t = "EN", authToken: n, userAddress: r, baseUrl
         ] }),
         u !== "HPAY" && u !== "Huione" && /* @__PURE__ */ Q.jsxs(Q.Fragment, { children: [
           /* @__PURE__ */ Q.jsx("div", { className: "cf06 m-b-6", children: i("wallet.deposit.address") }),
-          /* @__PURE__ */ Q.jsxs("div", { className: "token-select-box flex flex-center w100 p-12 gap-8", children: [
+          /* @__PURE__ */ Q.jsxs("div", { className: "token-select-box-ui flex flex-center w100 p-12 gap-8", children: [
             /* @__PURE__ */ Q.jsx("div", { className: "cf06 flex-1", style: { wordBreak: "break-all" }, children: g || "-" }),
             /* @__PURE__ */ Q.jsx(wo, { title: i("wallet.deposit.copy"), children: /* @__PURE__ */ Q.jsx("img", { src: Ja, alt: "copy", width: 16, height: 16, className: "pointer", onClick: () => g && Qa(g) }) })
           ] })
@@ -25426,7 +25426,7 @@ function pw({ children: e, lang: t = "EN", authToken: n, userAddress: r, baseUrl
     });
   };
   return /* @__PURE__ */ Q.jsxs(Q.Fragment, { children: [
-    /* @__PURE__ */ Q.jsx(xt, { open: c, onCancel: B, footer: null, width: 560, centered: !0, destroyOnClose: !0, children: /* @__PURE__ */ Q.jsxs("div", { className: "cf otc-modal withdraw-page", children: [
+    /* @__PURE__ */ Q.jsx(xt, { open: c, onCancel: B, footer: null, width: 560, centered: !0, destroyOnClose: !0, children: /* @__PURE__ */ Q.jsxs("div", { className: "cf otc-modal withdraw-page-ui", children: [
       /* @__PURE__ */ Q.jsxs("div", { className: "m-b-16 fz-18 fwb ta", style: { position: "relative" }, children: [
         x !== "form" && /* @__PURE__ */ Q.jsx(
           "img",
@@ -25442,20 +25442,20 @@ function pw({ children: e, lang: t = "EN", authToken: n, userAddress: r, baseUrl
       ] }),
       x === "form" && /* @__PURE__ */ Q.jsxs(Q.Fragment, { children: [
         /* @__PURE__ */ Q.jsx("div", { className: "m-b-8 cf06", children: f("wallet.withdraw.network") }),
-        /* @__PURE__ */ Q.jsx("div", { className: "flex flex-center m-b-16 token-select-box", children: /* @__PURE__ */ Q.jsx(nt, { value: h, onChange: (se) => {
+        /* @__PURE__ */ Q.jsx("div", { className: "flex flex-center m-b-16 token-select-box-ui", children: /* @__PURE__ */ Q.jsx(nt, { value: h, onChange: (se) => {
           y(se);
           const ie = W.find((ge) => ge.chain === se);
           ie && ie.currency.length > 0 ? (ae(ie.currency), b(ie.currency[0])) : (ae([]), b(""));
-        }, className: "custom-select", popupClassName: "popup-long", suffixIcon: /* @__PURE__ */ Q.jsx("img", { src: Jn, alt: "arrow", width: 12, height: 8 }), style: { border: "none", background: "transparent", width: "100%" }, children: W.map((se) => /* @__PURE__ */ Q.jsx(nt.Option, { value: se.chain, children: /* @__PURE__ */ Q.jsxs("div", { className: "flex flex-center gap-4", children: [
+        }, className: "custom-select-ui", popupClassName: "popup-long", suffixIcon: /* @__PURE__ */ Q.jsx("img", { src: Jn, alt: "arrow", width: 12, height: 8 }), style: { border: "none", background: "transparent", width: "100%" }, children: W.map((se) => /* @__PURE__ */ Q.jsx(nt.Option, { value: se.chain, children: /* @__PURE__ */ Q.jsxs("div", { className: "flex flex-center gap-4", children: [
           Pu[se.chain] && /* @__PURE__ */ Q.jsx("img", { src: Pu[se.chain], alt: se.chain, width: 20 }),
           $u[se.chain] && /* @__PURE__ */ Q.jsx("span", { children: $u[se.chain] })
         ] }) })) }) }),
         /* @__PURE__ */ Q.jsx("div", { className: "m-b-8 cf06", children: f("wallet.withdraw.token") }),
-        /* @__PURE__ */ Q.jsx("div", { className: "token-select-box flex flex-center m-b-12", children: /* @__PURE__ */ Q.jsx(
+        /* @__PURE__ */ Q.jsx("div", { className: "token-select-box-ui flex flex-center m-b-12", children: /* @__PURE__ */ Q.jsx(
           nt,
           {
             value: g,
-            className: "custom-select",
+            className: "custom-select-ui",
             onChange: (se) => b(se),
             popupClassName: "popup-long",
             suffixIcon: /* @__PURE__ */ Q.jsx("img", { src: Jn, alt: "arrow", width: 12, height: 8 }),
@@ -25469,7 +25469,7 @@ function pw({ children: e, lang: t = "EN", authToken: n, userAddress: r, baseUrl
         h === "HPAY" ? /* @__PURE__ */ Q.jsxs(Q.Fragment, { children: [
           /* @__PURE__ */ Q.jsx("div", { className: "m-b-8 cf06", children: f("wallet.withdraw.account") }),
           /* @__PURE__ */ Q.jsxs("div", { className: "m-b-16 flex gap-8", children: [
-            /* @__PURE__ */ Q.jsx("div", { className: "token-select-box w-[100px] h-[48px] flex flex-center", children: /* @__PURE__ */ Q.jsx(nt, { value: v, onChange: (se) => P(se), className: "custom-select", popupClassName: "popup-long", suffixIcon: /* @__PURE__ */ Q.jsx("img", { src: Jn, alt: "arrow", width: 12, height: 8 }), style: { border: "none", background: "transparent", width: "100%" }, children: /* @__PURE__ */ Q.jsx(nt.Option, { value: "+855", children: /* @__PURE__ */ Q.jsx("div", { className: "flex flex-center gap-4 ", children: "+855" }) }) }) }),
+            /* @__PURE__ */ Q.jsx("div", { className: "token-select-box-ui w-[100px] h-[48px] flex flex-center", children: /* @__PURE__ */ Q.jsx(nt, { value: v, onChange: (se) => P(se), className: "custom-select-ui", popupClassName: "popup-long", suffixIcon: /* @__PURE__ */ Q.jsx("img", { src: Jn, alt: "arrow", width: 12, height: 8 }), style: { border: "none", background: "transparent", width: "100%" }, children: /* @__PURE__ */ Q.jsx(nt.Option, { value: "+855", children: /* @__PURE__ */ Q.jsx("div", { className: "flex flex-center gap-4 ", children: "+855" }) }) }) }),
             /* @__PURE__ */ Q.jsx(d2, { className: "input ant-input flex-1 min-w-0", placeholder: f("wallet.withdraw.accountPh"), value: w, onChange: (se) => I(se.target.value) })
           ] })
         ] }) : /* @__PURE__ */ Q.jsxs(Q.Fragment, { children: [