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

package/README.md

@@ -190,7 +190,11 @@ interface TaskOnProviderConfig {
     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;
 
@@ -667,14 +671,17 @@ When tasks require wallet binding (e.g., on-chain verification), TaskOn shows a
 - 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
@@ -1068,6 +1075,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
@@ -1089,7 +1097,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

@@ -1027,6 +1027,8 @@
   margin-top: 10px;
   font-size: var(--taskon-font-size);
   color: var(--taskon-color-error);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 /* ============================================
@@ -1373,6 +1375,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 +2209,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 +2243,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 +2351,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 +2375,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 +2388,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 +2444,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 +2510,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 +2532,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;
   }
     }
   }

package/dist/LeaderboardWidget.css

@@ -10,7 +10,7 @@
    ============================================================================ */
 
 .taskon-leaderboard {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   line-height: 1.5;
   color: var(--taskon-color-text);
   background-color: var(--taskon-color-bg-canvas);
@@ -31,13 +31,15 @@
 
 .taskon-leaderboard__error-text {
   color: var(--taskon-color-error);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .taskon-leaderboard__retry-btn {
   padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   color: var(--taskon-color-primary);
   background-color: transparent;
@@ -71,9 +73,9 @@
 
 .taskon-leaderboard-tabs__tab {
   padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text);
   background-color: var(--taskon-color-bg-surface-subtle);
   border: 1px solid transparent;
@@ -129,9 +131,9 @@
   justify-content: center;
   height: 20px;
   padding: 0 var(--taskon-spacing-sm);
-  font-size: 11px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 600;
-  line-height: 12px;
+  line-height: 1;
   border-radius: var(--taskon-border-radius-sm);
   background-color: var(--taskon-color-border);
 }
@@ -151,9 +153,9 @@
 /* 时间范围 - 16px Regular，80% 白色 */
 
 .taskon-leaderboard-header__time {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text-secondary);
 }
 
@@ -171,9 +173,9 @@
   display: flex;
   align-items: center;
   gap: var(--taskon-spacing-sm);
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
-  line-height: 24px;
+  line-height: 1.5;
 }
 
 /* 参与人数标签 - 60% 白色 */
@@ -201,7 +203,7 @@
 
 .taskon-leaderboard-header__title {
   margin: 0;
-  font-size: 18px;
+  font-size: var(--taskon-font-size-xl);
   font-weight: 600;
   color: var(--taskon-color-text);
 }
@@ -220,8 +222,8 @@
   display: flex;
   align-items: center;
   gap: var(--taskon-spacing-sm);
-  font-size: 16px;
-  line-height: 24px;
+  font-size: var(--taskon-font-size-lg);
+  line-height: 1.5;
   white-space: nowrap;
 }
 
@@ -250,7 +252,7 @@
 .taskon-leaderboard-header__reward-rules-btn {
   margin-left: auto;
   padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
-  font-size: 13px;
+  font-size: var(--taskon-font-size-sm);
   font-weight: 500;
   color: var(--taskon-color-primary);
   background-color: transparent;
@@ -326,9 +328,9 @@
   display: inline-flex;
   align-items: center;
   gap: var(--taskon-spacing-sm);
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text);
   white-space: nowrap;
   flex-wrap: nowrap;
@@ -363,7 +365,7 @@
 /* 链信息 */
 
 .taskon-leaderboard-table__reward-chain {
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
   color: var(--taskon-color-text-disabled);
 }
@@ -371,9 +373,9 @@
 /* 未达标状态 - Not Qualified: rgba(255,255,255,0.6) */
 
 .taskon-leaderboard-table__reward--not-qualified {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -382,9 +384,9 @@
 .taskon-leaderboard-table__disabled-tip {
   width: 100%;
   padding-top: var(--taskon-spacing-sm);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text);
 }
 
@@ -402,9 +404,9 @@
   justify-content: center;
   height: 34px;
   padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text);
   background-color: transparent;
   border: 1px solid var(--taskon-color-border);
@@ -434,7 +436,7 @@
   justify-content: center;
   min-width: 27px;
   height: 27px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
   line-height: normal;
   color: var(--taskon-color-text);
@@ -487,7 +489,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 600;
   color: var(--taskon-color-text);
   text-align: center;
@@ -503,7 +505,7 @@
 /* 普通数字排名 */
 
 .taskon-leaderboard-rank--number {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 500;
 }
 
@@ -529,9 +531,9 @@
 /* 用户名 - 16px SemiBold 白色 */
 
 .taskon-leaderboard-user__name {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text);
   white-space: nowrap;
   overflow: hidden;
@@ -542,7 +544,7 @@
 /* YOU 标签 - 16px SemiBold 绿色 (#1affab) */
 
 .taskon-leaderboard-user__you-badge {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
   line-height: normal;
   color: var(--taskon-color-secondary);
@@ -601,7 +603,7 @@
 .taskon-leaderboard-pagination .taskon-pagination-info {
   display: flex;
   align-items: center;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
 }
 
@@ -663,9 +665,9 @@
 
 .taskon-leaderboard-modal__title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--taskon-font-size-xxxl);
   font-weight: 600;
-  line-height: 32px;
+  line-height: 1.33;
   color: var(--taskon-color-text);
 }
 
@@ -708,9 +710,9 @@
 
 .taskon-leaderboard-modal__desc {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text-disabled);
 }
 
@@ -726,9 +728,9 @@
 
 .taskon-leaderboard-modal__section-title {
   margin: 0;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 400;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text-tertiary);
 }
 
@@ -736,7 +738,7 @@
 
 .taskon-leaderboard-modal__period {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 500;
   line-height: normal;
   color: var(--taskon-color-text);
@@ -768,9 +770,9 @@
 .taskon-leaderboard-modal__tier-rank {
   flex-shrink: 0;
   min-width: 70px;
-  font-size: 14px;
+  font-size: var(--taskon-font-size);
   font-weight: 400;
-  line-height: 20px;
+  line-height: 1.43;
   color: var(--taskon-color-text);
   text-overflow: ellipsis;
   overflow: hidden;
@@ -783,18 +785,18 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text);
 }
 
 /* 分配方式文本 - 16px SemiBold 白色 */
 
 .taskon-leaderboard-modal__tier-distribute {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
   color: var(--taskon-color-text);
 }
 
@@ -817,9 +819,9 @@
 /* 奖励金额 - 数字绿色，单位白色 */
 
 .taskon-leaderboard-modal__tier-amount {
-  font-size: 16px;
+  font-size: var(--taskon-font-size-lg);
   font-weight: 600;
-  line-height: 24px;
+  line-height: 1.5;
 }
 
 .taskon-leaderboard-modal__tier-amount-value {
@@ -846,7 +848,7 @@
 
 @media (max-width: 640px) {
   .taskon-leaderboard {
-    font-size: 14px;
+    font-size: var(--taskon-font-size);
   }
 
   .taskon-leaderboard-tabs {
@@ -860,8 +862,8 @@
   .taskon-leaderboard-tabs__tab {
     flex-shrink: 0;
     padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
-    font-size: 12px;
-    line-height: 18px;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
     white-space: nowrap;
   }
 
@@ -877,8 +879,8 @@
 
   .taskon-leaderboard-header__time {
     width: 100%;
-    font-size: 12px;
-    line-height: 18px;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
   }
 
   .taskon-leaderboard-header__separator,
@@ -887,8 +889,8 @@
   }
 
   .taskon-leaderboard-header__participants {
-    font-size: 13px;
-    line-height: 18px;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
   }
 
   .taskon-leaderboard-header__reward-info {
@@ -898,8 +900,8 @@
   }
 
   .taskon-leaderboard-header__reward-item {
-    font-size: 13px;
-    line-height: 18px;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
   }
 
   .taskon-leaderboard-header__reward-rules-btn {
@@ -915,8 +917,8 @@
   .taskon-leaderboard .taskon-table__header,
   .taskon-leaderboard .taskon-table__cell {
     padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
-    font-size: 13px;
-    line-height: 18px;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
   }
 
   .taskon-leaderboard .taskon-table__row {
@@ -927,8 +929,8 @@
   .taskon-leaderboard-user__you-badge,
   .taskon-leaderboard-table__reward,
   .taskon-leaderboard-table__reward--not-qualified {
-    font-size: 13px;
-    line-height: 18px;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
   }
 
   .taskon-leaderboard-table__reward {
@@ -936,8 +938,8 @@
   }
 
   .taskon-leaderboard-table__reward-chain {
-    font-size: 12px;
-    line-height: 16px;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.33;
   }
 
   .taskon-leaderboard-pagination {
@@ -952,7 +954,7 @@
   }
 
   .taskon-leaderboard-pagination .taskon-pagination-info {
-    font-size: 14px;
+    font-size: var(--taskon-font-size);
   }
 
   .taskon-leaderboard-modal {
@@ -966,20 +968,20 @@
 
   .taskon-leaderboard-modal__title {
     font-size: 20px;
-    line-height: 28px;
+    line-height: 1.4;
   }
 
   .taskon-leaderboard-modal__desc,
   .taskon-leaderboard-modal__section-title,
   .taskon-leaderboard-modal__tier-distribute,
   .taskon-leaderboard-modal__tier-amount {
-    font-size: 14px;
-    line-height: 20px;
+    font-size: var(--taskon-font-size);
+    line-height: 1.43;
   }
 
   .taskon-leaderboard-modal__period {
-    font-size: 12px;
-    line-height: 18px;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
   }
 
   .taskon-leaderboard-modal__tier {
@@ -991,16 +993,16 @@
   .taskon-leaderboard-modal__tier-rank {
     min-width: 0;
     width: 100%;
-    font-size: 12px;
-    line-height: 18px;
+    font-size: var(--taskon-font-size-sm);
+    line-height: 1.5;
   }
 
   .taskon-leaderboard-modal__tier-reward {
     width: 100%;
     flex-wrap: wrap;
     gap: var(--taskon-spacing-xs);
-    font-size: 14px;
-    line-height: 20px;
+    font-size: var(--taskon-font-size);
+    line-height: 1.43;
   }
 
   .taskon-leaderboard-modal__tier-token-icon {