@taskon/widget-react 0.0.1-beta.6 → 0.0.1-beta.7

package/README.md

@@ -23,7 +23,7 @@ import { QuestWidget } from "@taskon/widget-react/quest";
 const App = () => (
   <TaskOnProvider
     config={{
-      apiKey: "your-api-key",
+      clientId: "your-client-id",
     }}
   >
     <YourApp />
@@ -62,7 +62,7 @@ import { QuestWidget } from "@taskon/widget-react/quest";
 const App = () => (
   <TaskOnProvider
     config={{
-      apiKey: "your-api-key",
+      clientId: "your-client-id",
     }}
   >
     <YourApp />
@@ -103,7 +103,7 @@ const YourApp = () => {
 
 ```
 ┌─ TaskOnProvider ─────────────────────────────────────────┐
-│  config: { apiKey }                                      │
+│  config: { clientId }                                      │
 │  Purpose: Authentication only                            │
 │                                                          │
 │  ┌─ Mode A: Cloud Config ──────────────────────────────┐ │
@@ -128,12 +128,12 @@ const YourApp = () => {
 
 ## Security
 
-TaskOn uses **API Key** authentication to verify that widget requests come from authorized projects.
+TaskOn uses **Client ID** authentication to verify that widget requests come from authorized projects.
 
-### Step 1: Get API Key from TaskOn Dashboard
+### Step 1: Get Client ID from TaskOn Dashboard
 
 ```
-API Key:  /KDiqEFNCaGTVTdTpCFrZOsUj5vDi5uGLSFmwyHeboE=  (for X-API-Key header)
+Client ID:  /KDiqEFNCaGTVTdTpCFrZOsUj5vDi5uGLSFmwyHeboE=  (for X-API-Key header)
 ```
 
 ### Step 2: Configure TaskOnProvider
@@ -141,7 +141,7 @@ API Key:  /KDiqEFNCaGTVTdTpCFrZOsUj5vDi5uGLSFmwyHeboE=  (for X-API-Key header)
 ```tsx
 <TaskOnProvider
   config={{
-    apiKey: "your-api-key",
+    clientId: "your-client-id",
   }}
 >
   <YourApp />
@@ -153,13 +153,13 @@ API Key:  /KDiqEFNCaGTVTdTpCFrZOsUj5vDi5uGLSFmwyHeboE=  (for X-API-Key header)
 All API requests include:
 
 ```
-X-API-Key: your-api-key        # Project authorization
+X-API-Key: your-client-id        # Project authorization
 Authorization: Bearer xxx       # User authorization (after login)
 ```
 
 ### Security Best Practices
 
-1. **Keep API Key secure** - Don't expose in public repositories
+1. **Keep Client ID secure** - Don't expose in public repositories
 2. **Use HTTPS** - All communication must be encrypted
 
 ## TaskOnProvider
@@ -177,8 +177,8 @@ The root provider component for authentication. Must wrap your application.
 
 ```typescript
 interface TaskOnProviderConfig {
-  // Required: API Key for authentication (X-API-Key header)
-  apiKey: string;
+  // Required: Client ID for authentication (X-API-Key header)
+  clientId: string;
 
   // Locale setting
   locale?: "en" | "ko" | "ja" | "ru" | "es"; // default: auto-detect
@@ -187,7 +187,6 @@ interface TaskOnProviderConfig {
   walletConfig?: {
     evmAdapter?: WalletAdapter; // Custom EVM wallet adapter
     solanaAdapter?: WalletAdapter; // Custom Solana wallet adapter
-    disableAutoDetect?: boolean; // Disable auto-detection
   };
 
   // WalletConnect Project ID
@@ -220,7 +219,7 @@ interface TaskOnProviderConfig {
 ```tsx
 <TaskOnProvider
   config={{
-    apiKey: "your-api-key",
+    clientId: "your-client-id",
     locale: "ko",
   }}
 >
@@ -237,7 +236,7 @@ const App = () => {
   const [locale, setLocale] = useState("en");
 
   return (
-    <TaskOnProvider config={{ apiKey: "your-api-key", locale }}>
+    <TaskOnProvider config={{ clientId: "your-client-id", locale }}>
       <select value={locale} onChange={(e) => setLocale(e.target.value)}>
         <option value="en">English</option>
         <option value="ko">한국어</option>
@@ -383,7 +382,7 @@ light/dark.map > light/dark.seed (derived) > map > seed (derived) > default
 Nested ThemeProviders inherit from parent and can override specific values:
 
 ```tsx
-<TaskOnProvider config={{ apiKey: "your-api-key" }}>
+<TaskOnProvider config={{ clientId: "your-client-id" }}>
   <ThemeProvider theme={{ mode: "light", seed: { colorPrimary: "#6366f1" } }}>
     <Header /> {/* light + primary #6366f1 */}
     <ThemeProvider theme={{ mode: "dark" }}>
@@ -525,13 +524,13 @@ Each widget documents its available parts in its own API reference.
 
 ```tsx
 // Example 1: Using cloud config (theme from Dashboard)
-<TaskOnProvider config={{ apiKey: 'your-api-key' }}>
+<TaskOnProvider config={{ clientId: 'your-client-id' }}>
   <QuestWidget widgetId={123} />
   <TaskWidget widgetId={456} />
 </TaskOnProvider>
 
 // Example 2: Using local theme (no cloud config)
-<TaskOnProvider config={{ apiKey: 'your-api-key' }}>
+<TaskOnProvider config={{ clientId: 'your-client-id' }}>
   <ThemeProvider theme={{ mode: 'dark', seed: { colorPrimary: '#6366f1' } }}>
     <QuestWidget />
     <TaskWidget />
@@ -539,7 +538,7 @@ Each widget documents its available parts in its own API reference.
 </TaskOnProvider>
 
 // Example 3: Different local themes for different areas
-<TaskOnProvider config={{ apiKey: 'your-api-key' }}>
+<TaskOnProvider config={{ clientId: 'your-client-id' }}>
   <ThemeProvider theme={{ mode: 'light' }}>
     <TaskWidget />
   </ThemeProvider>
@@ -550,7 +549,7 @@ Each widget documents its available parts in its own API reference.
 </TaskOnProvider>
 
 // Example 4: Mixed - some with cloud config, some with local theme
-<TaskOnProvider config={{ apiKey: 'your-api-key' }}>
+<TaskOnProvider config={{ clientId: 'your-client-id' }}>
   {/* Cloud config */}
   <QuestWidget widgetId={123} />
 
@@ -630,34 +629,44 @@ TaskOn provides flexible wallet integration options:
 | Setup          | Behavior                              |
 | -------------- | ------------------------------------- |
 | Custom adapter | Uses your provided `WalletAdapter`  |
-| Default        | Uses built-in window.ethereum adapter |
+| Default        | Uses built-in wallet picker adapter |
 
 ### Custom Wallet Adapter (Recommended)
 
 If you want full control over wallet connection (e.g., using RainbowKit, Web3Modal), provide a custom adapter:
 
 ```tsx
+import { useMemo } from "react";
 import { createWalletAdapter } from "./my-wallet-adapter";
 
-<TaskOnProvider
-  config={{
-    apiKey: "your-api-key",
-    walletConfig: {
-      evmAdapter: createWalletAdapter(),
-    },
-  }}
->
-  <App />
-</TaskOnProvider>;
+const App = () => {
+  const evmAdapter = useMemo(() => createWalletAdapter(), []);
+
+  return (
+    <TaskOnProvider
+      config={{
+        clientId: "your-client-id",
+        walletConfig: {
+          evmAdapter,
+        },
+      }}
+    >
+      <MainContent />
+    </TaskOnProvider>
+  );
+};
 ```
 
+Note: keep `evmAdapter` reference stable (for example via `useMemo`) to avoid
+re-creating adapters and resetting wallet state on every render.
+
 ### Built-in Wallet Support
 
-If no custom adapter is provided, TaskOn automatically uses `window.ethereum` to connect to browser wallets like MetaMask:
+If no custom adapter is provided, TaskOn automatically uses built-in wallet picker flow:
 
 ```tsx
-// No wallet config needed - uses window.ethereum by default
-<TaskOnProvider config={{ apiKey: "your-api-key" }}>
+// No wallet config needed
+<TaskOnProvider config={{ clientId: "your-client-id" }}>
   <App />
 </TaskOnProvider>
 ```
@@ -668,7 +677,6 @@ When tasks require wallet binding (e.g., on-chain verification), TaskOn shows a
 
 **Desktop (without adapter):**
 - MetaMask
-- ONTO Wallet
 - Bitget Wallet
 - OKX Wallet
 - WalletConnect (uses SDK default project ID if not configured; not recommended for production)
@@ -687,7 +695,7 @@ To enable WalletConnect in the dialog:
 ```tsx
 <TaskOnProvider
   config={{
-    apiKey: "your-api-key",
+    clientId: "your-client-id",
     walletConnectProjectId: "your-project-id", // Get from cloud.walletconnect.com
   }}
 >
@@ -697,10 +705,10 @@ To enable WalletConnect in the dialog:
 
 ### Built-in Wallet Management
 
-If no external provider is detected, the widget uses its built-in wallet management. No configuration needed:
+If no external adapter is provided, the widget uses built-in wallet management. No configuration needed:
 
 ```tsx
-<TaskOnProvider config={{ apiKey: "your-api-key" }}>
+<TaskOnProvider config={{ clientId: "your-client-id" }}>
   <App /> {/* Widget handles wallet connection internally */}
 </TaskOnProvider>
 ```
@@ -714,9 +722,6 @@ interface WalletConfig {
 
   // Solana wallet adapter (highest priority)
   solanaAdapter?: WalletAdapter;
-
-  // Disable auto-detection of external providers
-  disableAutoDetect?: boolean;
 }
 ```
 
@@ -755,7 +760,7 @@ const App = () => {
   return (
     <TaskOnProvider
       config={{
-        apiKey: "your-api-key",
+        clientId: "your-client-id",
         walletConfig: { evmAdapter },
       }}
     >
@@ -770,7 +775,7 @@ const App = () => {
 When multiple options are available:
 
 1. **Custom Adapter** - `walletConfig.evmAdapter` / `solanaAdapter` (highest)
-2. **Built-in Adapter** - window.ethereum adapter for EVM wallets (lowest)
+2. **Built-in Adapter** - SDK wallet picker adapter for EVM wallets (fallback)
 
 ## Hooks
 
@@ -1087,7 +1092,7 @@ Then configure your project ID:
 ```tsx
 <TaskOnProvider
   config={{
-    apiKey: "your-api-key",
+    clientId: "your-client-id",
     walletConnectProjectId: "your-walletconnect-project-id",
   }}
 >

package/dist/EligibilityInfo.css

@@ -2,9 +2,8 @@
  * ConfirmNoticeDialog styles
  *
  * @description
- * Reproduces the visual rhythm of taskon-website ConfirmNotice:
- * icon -> title -> description -> actions,
- * while intentionally removing the glow background layer.
+ * Keep only content-specific layout/typography and rely on Dialog
+ * for container surface, radius and body spacing.
  */
 
 /*
@@ -20,24 +19,10 @@
  * 2) Keep viewport media query as fallback
  */
 
-/* Narrow the default dialog body padding for this notice layout */
-
-.taskon-confirm-notice-dialog .taskon-dialog-body {
-  padding: 0;
-}
-
 /* ConfirmNotice content root */
 
 .taskon-confirm-notice {
-  position: relative;
-  width: auto;
-  max-width: none;
-  padding: var(--taskon-spacing-xl) var(--taskon-spacing-lg) var(--taskon-spacing-lg);
-  background: var(--taskon-color-bg-floating);
-  color: var(--taskon-color-text);
-  border-radius: var(--taskon-border-radius-lg);
   text-align: center;
-  box-sizing: border-box;
 }
 
 /* Status icon */
@@ -136,12 +121,6 @@
 
 @supports (container-type: inline-size) {
     @container (min-width: 751px) {
-  .taskon-confirm-notice {
-    width: 100%;
-    max-width: 470px;
-    padding: 40px 55px;
-  }
-
   .taskon-confirm-notice-buttons {
     flex-direction: row;
     align-items: center;
@@ -156,12 +135,6 @@
 
 @supports not (container-type: inline-size) {
     @media (min-width: 751px) {
-  .taskon-confirm-notice {
-    width: 100%;
-    max-width: 470px;
-    padding: 40px 55px;
-  }
-
   .taskon-confirm-notice-buttons {
     flex-direction: row;
     align-items: center;
@@ -804,10 +777,6 @@
  * 2) Keep viewport media query as fallback
  */
 
-.taskon-task-verify-failed-dialog .taskon-dialog-body {
-  padding: 0;
-}
-
 .taskon-task-verify-failed-dialog-message {
   margin-top: var(--taskon-spacing-sm);
   font-size: var(--taskon-font-size-lg);

package/dist/TaskOnProvider.css

@@ -182,3 +182,290 @@
     max-width: calc(100vw - 40px);
   }
 }
+/**
+ * WalletPickerDialog 组件样式
+ * 使用 taskon-bind-wallet-* 命名空间
+ * 与 taskon-website 保持一致
+ */
+
+/*
+ * Responsive base styles
+ *
+ * Keep mobile breakpoints and fallback patterns centralized here.
+ * Components should reuse these mixins instead of duplicating query logic.
+ */
+
+/*
+ * Desktop-up mixin:
+ * 1) Enable desktop enhancement in wider containers
+ * 2) Keep viewport media query as fallback
+ */
+
+/* Ensure wallet picker always appears above other SDK dialogs */
+
+.taskon-wallet-picker-overlay {
+  z-index: 10008;
+}
+
+.taskon-wallet-picker-content {
+  z-index: 10009;
+}
+
+/* ==================== 容器 ==================== */
+
+.taskon-bind-wallet-dialog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ==================== 标题 ==================== */
+
+.taskon-bind-wallet-dialog-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 28px;
+  color: var(--taskon-color-text);
+}
+
+/* ==================== 链类型标签 ==================== */
+
+.taskon-bind-wallet-dialog-chain-label {
+  margin-top: var(--taskon-spacing-md);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--taskon-color-text);
+}
+
+/* ==================== 钱包网格 ==================== */
+
+.taskon-bind-wallet-dialog-grid {
+  margin-top: var(--taskon-spacing-sm);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--taskon-spacing-md);
+}
+
+/* ==================== 钱包项 ==================== */
+
+.taskon-bind-wallet-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  padding: 0 12px;
+
+  background: transparent;
+  border: 1px solid var(--taskon-color-border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taskon-bind-wallet-item:hover,
+.taskon-bind-wallet-item:focus {
+  background: var(--taskon-color-bg-surface-strong);
+}
+
+.taskon-bind-wallet-item:active {
+  transform: scale(0.98);
+}
+
+/* 钱包图标 */
+
+.taskon-bind-wallet-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.taskon-bind-wallet-item-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* 钱包名称 */
+
+.taskon-bind-wallet-item-name {
+  margin-left: 10px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--taskon-color-text);
+}
+
+/* 已安装标签 */
+
+.taskon-bind-wallet-item-installed {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 4px 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--taskon-color-secondary);
+  background: var(--taskon-color-secondary-bg);
+  border-radius: 8px 0;
+  transform-origin: bottom right;
+}
+
+/* ==================== 连接中状态 ==================== */
+
+.taskon-bind-wallet-item--connecting {
+  opacity: 0.7;
+  cursor: wait;
+}
+
+.taskon-bind-wallet-item--connecting:hover,
+.taskon-bind-wallet-item--connecting:focus {
+  background: transparent;
+}
+
+/* ==================== 禁用状态 ==================== */
+
+.taskon-bind-wallet-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.taskon-bind-wallet-item--disabled:hover,
+.taskon-bind-wallet-item--disabled:focus {
+  background: transparent;
+}
+
+.taskon-bind-wallet-item--disabled:active {
+  transform: none;
+}
+
+/* 不可用标签 */
+
+.taskon-bind-wallet-item-unavailable {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 4px 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--taskon-color-text-tertiary);
+  background: var(--taskon-color-bg-surface-subtle);
+  border-radius: 8px 0;
+}
+
+/* 连接中 spinner */
+
+.taskon-bind-wallet-item-connecting {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.taskon-bind-wallet-spinner {
+  width: 16px;
+  height: 16px;
+  color: var(--taskon-color-primary);
+  animation: taskon-bind-wallet-spin 1s linear infinite;
+}
+
+@keyframes taskon-bind-wallet-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==================== 提示文字 ==================== */
+
+.taskon-bind-wallet-dialog-tip {
+  margin: var(--taskon-spacing-md) 0 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--taskon-color-text-tertiary);
+  text-align: center;
+}
+
+/* ==================== 连接中遮层 ==================== */
+
+.taskon-bind-wallet-loading-overlay {
+  position: absolute;
+  /* 使用负值覆盖 Dialog body 的 padding */
+  inset: -20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--taskon-color-bg-mask);
+  backdrop-filter: blur(4px);
+  border-radius: 12px;
+}
+
+.taskon-bind-wallet-loading-spinner {
+  width: 40px;
+  height: 40px;
+  color: var(--taskon-color-text-secondary);
+  animation: taskon-bind-wallet-spin 1s linear infinite;
+}
+
+.taskon-bind-wallet-loading-text {
+  margin: 20px 0 0;
+  max-width: 60%;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--taskon-color-text-secondary);
+  text-align: center;
+}
+
+@supports (container-type: inline-size) {
+    @container (min-width: 751px) {
+  .taskon-bind-wallet-dialog-chain-label {
+    margin-top: 20px;
+  }
+
+  .taskon-bind-wallet-dialog-grid {
+    margin-top: 10px;
+    grid-template-columns: 1fr 1fr;
+    gap: 18px;
+  }
+
+  .taskon-bind-wallet-dialog-tip {
+    margin-top: 20px;
+  }
+
+  .taskon-bind-wallet-loading-overlay {
+    inset: -24px;
+    border-radius: 16px;
+  }
+    }
+  }
+
+@supports not (container-type: inline-size) {
+    @media (min-width: 751px) {
+  .taskon-bind-wallet-dialog-chain-label {
+    margin-top: 20px;
+  }
+
+  .taskon-bind-wallet-dialog-grid {
+    margin-top: 10px;
+    grid-template-columns: 1fr 1fr;
+    gap: 18px;
+  }
+
+  .taskon-bind-wallet-dialog-tip {
+    margin-top: 20px;
+  }
+
+  .taskon-bind-wallet-loading-overlay {
+    inset: -24px;
+    border-radius: 16px;
+  }
+    }
+  }