@taskon/widget-react 0.0.1-beta.5 → 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,10 +187,13 @@ interface TaskOnProviderConfig {
   walletConfig?: {
     evmAdapter?: WalletAdapter; // Custom EVM wallet adapter
     solanaAdapter?: WalletAdapter; // Custom Solana wallet adapter
-    disableAutoDetect?: boolean; // Disable auto-detection
   };
 
-  // WalletConnect Project ID (required for WalletConnect support)
+  // WalletConnect Project ID
+  // Only needed when you design Web3 wallet login or wallet-based rewards
+  // (wallet binding, on-chain verification, NFT/token claiming, etc.)
+  // Optional; SDK has a built-in default project ID
+  // For production, strongly recommended to use your own project ID
   // Get your project ID at https://cloud.walletconnect.com
   walletConnectProjectId?: string;
 
@@ -216,7 +219,7 @@ interface TaskOnProviderConfig {
 ```tsx
 <TaskOnProvider
   config={{
-    apiKey: "your-api-key",
+    clientId: "your-client-id",
     locale: "ko",
   }}
 >
@@ -233,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>
@@ -379,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" }}>
@@ -521,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 />
@@ -535,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>
@@ -546,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} />
 
@@ -626,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>
 ```
@@ -664,23 +677,25 @@ When tasks require wallet binding (e.g., on-chain verification), TaskOn shows a
 
 **Desktop (without adapter):**
 - MetaMask
-- ONTO Wallet
 - Bitget Wallet
 - OKX Wallet
-- WalletConnect (requires `walletConnectProjectId`)
+- WalletConnect (uses SDK default project ID if not configured; not recommended for production)
 
 **Mobile (non-Dapp browser):**
-- WalletConnect only (requires `walletConnectProjectId`)
+- WalletConnect only (uses SDK default project ID if not configured; not recommended for production)
 
 **Mobile (Dapp browser / wallet app):**
 - Uses injected provider directly
 
+Only configure `walletConnectProjectId` when your product needs Web3 wallet login
+or wallet-based rewards (wallet binding, on-chain verification, NFT/token claiming).
+
 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
   }}
 >
@@ -690,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>
 ```
@@ -707,9 +722,6 @@ interface WalletConfig {
 
   // Solana wallet adapter (highest priority)
   solanaAdapter?: WalletAdapter;
-
-  // Disable auto-detection of external providers
-  disableAutoDetect?: boolean;
 }
 ```
 
@@ -748,7 +760,7 @@ const App = () => {
   return (
     <TaskOnProvider
       config={{
-        apiKey: "your-api-key",
+        clientId: "your-client-id",
         walletConfig: { evmAdapter },
       }}
     >
@@ -763,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
 
@@ -1068,6 +1080,7 @@ Works with:
 
 ### Optional Peer Dependencies
 
+Install these only when you need Web3 wallet login or wallet-based reward flows.
 For WalletConnect support in the built-in wallet binding dialog:
 
 ```bash
@@ -1079,7 +1092,7 @@ Then configure your project ID:
 ```tsx
 <TaskOnProvider
   config={{
-    apiKey: "your-api-key",
+    clientId: "your-client-id",
     walletConnectProjectId: "your-walletconnect-project-id",
   }}
 >
@@ -1089,7 +1102,8 @@ Then configure your project ID:
 
 Get your WalletConnect Project ID at https://cloud.walletconnect.com
 
-If not configured, the WalletConnect option will be disabled in the wallet binding dialog.
+If not configured, the SDK will use a built-in default WalletConnect project ID.  
+For production use, strongly recommend configuring your own `walletConnectProjectId`.
 
 ## Limitations
 

package/dist/CommunityTaskList.css

@@ -3330,6 +3330,8 @@
   margin-top: 8px;
   font-size: 14px;
   color: var(--taskon-color-text-secondary);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 /**
  * SectorItem 组件样式
@@ -4183,7 +4185,9 @@
   line-height: 1.43;
   letter-spacing: 0.04em;
   text-align: left;
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* ==================== 提交按钮 ==================== */
@@ -4392,6 +4396,8 @@
   font-size: var(--taskon-font-size);
   line-height: 1.5;
   max-width: 300px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .taskon-dialog-error-retry {
@@ -4733,6 +4739,8 @@
   text-align: center;
   color: var(--taskon-color-error);
   font-size: var(--taskon-font-size-lg);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* 空状态 */

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);
@@ -1027,6 +996,8 @@
   margin-top: 10px;
   font-size: var(--taskon-font-size);
   color: var(--taskon-color-error);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* ============================================
@@ -1373,6 +1344,8 @@
 .taskon-outer-point-api-dialog-error {
   font-size: var(--taskon-font-size-sm);
   color: var(--taskon-color-error);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* Action buttons */
@@ -2205,17 +2178,29 @@
   container-type: inline-size;
   position: relative;
   width: min(520px, 92vw);
+  min-height: 500px;
+  padding: 24px var(--taskon-spacing-lg) 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   overflow: hidden;
-  padding-top: var(--taskon-spacing-lg);
 }
 
 .taskon-quest-blindbox-dialog-title {
-  margin: 0 0 var(--taskon-spacing-md);
-  padding: 0 var(--taskon-spacing-lg);
-  font-size: var(--taskon-font-size-xxl);
+  margin: 0;
+  font-size: 32px;
   font-weight: 600;
-  line-height: 1.4;
+  line-height: 1.25;
   color: #fff;
+  text-align: center;
+}
+
+.taskon-quest-blindbox-dialog-subtitle {
+  margin: 12px 0 20px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
 }
 
 /* Stage container - centered square area for animation */
@@ -2227,7 +2212,7 @@
   justify-content: center;
   width: 100%;
   max-width: 420px;
-  margin: 0 auto;
+  margin: 0 auto auto;
   aspect-ratio: 1;
   overflow: visible;
   border-radius: 32px;
@@ -2335,35 +2320,17 @@
 .taskon-quest-blindbox-reward {
   container-type: inline-size;
   position: relative;
-  width: 510px;
-  max-width: 92vw;
-  padding: 48px var(--taskon-spacing-lg);
+  width: min(520px, 92vw);
+  min-height: 500px;
+  padding: 24px var(--taskon-spacing-lg) 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
   color: #fff;
   overflow: hidden;
 }
 
-/* Light background effect */
-
-.taskon-quest-blindbox-reward-light {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: 120%;
-  max-width: none;
-  transform: translateX(-50%);
-  object-fit: contain;
-  pointer-events: none;
-  opacity: 0;
-  animation: taskon-blindbox-light-appear 2s ease-out forwards;
-}
-
-@keyframes taskon-blindbox-light-appear {
-  to {
-    opacity: 1;
-  }
-}
-
 /* Title */
 
 .taskon-quest-blindbox-reward-title {
@@ -2377,6 +2344,7 @@
 
 .taskon-quest-blindbox-reward-subtitle {
   margin-top: 12px;
+  margin-bottom: 0;
   font-size: var(--taskon-font-size-lg);
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.7);
@@ -2389,7 +2357,7 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  margin-top: var(--taskon-spacing-lg);
+  margin-top: 20px;
   gap: var(--taskon-spacing-sm);
   padding: 12px var(--taskon-spacing-md);
   border-radius: var(--taskon-border-radius);
@@ -2445,7 +2413,8 @@
 .taskon-quest-blindbox-reward-btn-wrap {
   display: flex;
   justify-content: center;
-  margin-top: 40px;
+  margin-top: auto;
+  padding-top: 40px;
 }
 
 /* Back button - matches Vue g-button--light-border */
@@ -2510,19 +2479,21 @@
 @supports (container-type: inline-size) {
     @container (min-width: 751px) {
   .taskon-quest-blindbox-dialog {
-    padding-top: 40px;
+    min-height: 540px;
+    padding: 32px 40px 48px;
   }
 
-  .taskon-quest-blindbox-dialog-title {
-    padding: 0 40px;
+  .taskon-quest-blindbox-dialog-subtitle {
+    margin-bottom: 28px;
   }
 
   .taskon-quest-blindbox-reward {
-    padding: 64px 40px;
+    min-height: 540px;
+    padding: 32px 40px 48px;
   }
 
   .taskon-quest-blindbox-reward-btn-wrap {
-    margin-top: 60px;
+    padding-top: 56px;
   }
     }
   }
@@ -2530,19 +2501,21 @@
 @supports not (container-type: inline-size) {
     @media (min-width: 751px) {
   .taskon-quest-blindbox-dialog {
-    padding-top: 40px;
+    min-height: 540px;
+    padding: 32px 40px 48px;
   }
 
-  .taskon-quest-blindbox-dialog-title {
-    padding: 0 40px;
+  .taskon-quest-blindbox-dialog-subtitle {
+    margin-bottom: 28px;
   }
 
   .taskon-quest-blindbox-reward {
-    padding: 64px 40px;
+    min-height: 540px;
+    padding: 32px 40px 48px;
   }
 
   .taskon-quest-blindbox-reward-btn-wrap {
-    margin-top: 60px;
+    padding-top: 56px;
   }
     }
   }