@taskon/widget-react 0.0.1-beta.3 → 0.0.1-beta.4

package/dist/chunks/{CommunityTaskList-C9mPl_31.js → CommunityTaskList-C9Gv8KOF.js}

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { useState, useRef, useCallback, useEffect, useContext, useMemo } from "react";
 import { isUnauthorizedError, TaskReviewResult, formatLongNumber, EligibilityType, Operator, MeetConditionStatus, RewardType, formatUtcTime, ErrorCode, SnsType, createCommunityTaskApi, ApiError, TaskCardType, ChainType, getSwapDexTitleExpress, UserEligibleStatus, CampaignStatus, MediaType, createQuestApi, CampaignType, formatTokenAmount, TaskTemplateId, EligibilityTemplateId, RecurrenceType, createCommonApi, normalizeTask, formatSwapTokensForDisplay, formatAddress } from "@taskon/core";
-import { p as TaskOnContext, d as useTaskOnContext, s as useTaskOnPortalContainer } from "./ThemeProvider-DNJqI2lD.js";
-import { D as Dialog, a as useResolvedWidgetConfig, W as WidgetShell } from "./dynamic-import-helper-B2j_dZ4V.js";
+import { p as TaskOnContext, d as useTaskOnContext, s as useTaskOnPortalContainer } from "./ThemeProvider-CPI_roeh.js";
+import { D as Dialog, a as useResolvedWidgetConfig, W as WidgetShell } from "./dynamic-import-helper-DwXlQC0S.js";
 import { d as useToast } from "./useToast-CaRkylKe.js";
-import { u as useBindWallet, T as TitleExpress, a as CardDescExpress, b as useNftClaimFlow, R as RewardModuleDialog, B as BlindBoxDialog, c as TaskItem, E as EligibilityInfo, d as Textarea } from "./EligibilityInfo-DGBffKN8.js";
-import { g as useBindSocialAccount, B as BindWalletDialog, l as useChainMap, s as TipPopover, I as Input } from "./UserCenterWidget-B0O-f_xl.js";
+import { u as useBindWallet, T as TitleExpress, a as CardDescExpress, b as useNftClaimFlow, R as RewardModuleDialog, B as BlindBoxDialog, c as TaskItem, E as EligibilityInfo, d as Textarea } from "./EligibilityInfo-D-Fuy9GE.js";
+import { g as useBindSocialAccount, B as BindWalletDialog, l as useChainMap, s as TipPopover, k as useIsMobile, I as Input } from "./UserCenterWidget-cADBSVg7.js";
 import { createPortal } from "react-dom";
 import '../CommunityTaskList.css';function CardSelector({
   options,
@@ -3510,17 +3510,6 @@ function getExpectedRewardDisplay(reward) {
   }
   return { icon: "", text: "", colorClass: "" };
 }
-function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    const mql = window.matchMedia("(max-width: 750px)");
-    setIsMobile(mql.matches);
-    const handler = (e) => setIsMobile(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
-}
 function TaskChainRewardStep({
   campaignId,
   campaign,
@@ -4683,6 +4672,57 @@ function SectorItemComponent({
   ] });
 }
 const SectorItem = React__default.memo(SectorItemComponent);
+function renderTaskCards(count) {
+  return Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "taskon-community-list-skeleton-block taskon-community-list-skeleton-task"
+    },
+    `task-${index}`
+  ));
+}
+function CommunityTaskListSkeleton({
+  showSectorTab = true,
+  showSectorName = true,
+  showSectorDescription = true,
+  showSectorReward = true
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "taskon-community-list-skeleton",
+      "aria-busy": "true",
+      "aria-label": "Loading tasks",
+      children: [
+        showSectorTab && /* @__PURE__ */ jsxs("div", { className: "taskon-community-list-skeleton-selector", children: [
+          /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-chip taskon-community-list-skeleton-chip--wide" }),
+          /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-chip" }),
+          /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-chip" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "taskon-community-list-skeleton-content", children: [
+          /* @__PURE__ */ jsxs("div", { className: "taskon-community-list-skeleton-sector", children: [
+            showSectorName && /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-block taskon-community-list-skeleton-title" }),
+            showSectorDescription && /* @__PURE__ */ jsxs("div", { className: "taskon-community-list-skeleton-lines", children: [
+              /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-block taskon-community-list-skeleton-line" }),
+              /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-block taskon-community-list-skeleton-line taskon-community-list-skeleton-line--short" })
+            ] }),
+            showSectorReward && /* @__PURE__ */ jsxs("div", { className: "taskon-community-list-skeleton-points", children: [
+              /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-block taskon-community-list-skeleton-pill" }),
+              /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-block taskon-community-list-skeleton-pill taskon-community-list-skeleton-pill--short" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-tasks", children: renderTaskCards(4) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "taskon-community-list-skeleton-sector", children: [
+            showSectorName && /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-block taskon-community-list-skeleton-title taskon-community-list-skeleton-title--second" }),
+            showSectorDescription && /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-lines", children: /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-block taskon-community-list-skeleton-line" }) }),
+            showSectorReward && /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-points", children: /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-block taskon-community-list-skeleton-pill taskon-community-list-skeleton-pill--short" }) }),
+            /* @__PURE__ */ jsx("div", { className: "taskon-community-list-skeleton-tasks", children: renderTaskCards(3) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 const RECURRENCE_LABEL_MAP = {
   Once: "Once",
   Daily: "Daily",
@@ -6840,7 +6880,7 @@ function CommunityTaskListInner(props) {
     ] }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "taskon-community-list", children: [
-    showSectorTab && /* @__PURE__ */ jsx(
+    showSectorTab && !isLoading && /* @__PURE__ */ jsx(
       CardSelector,
       {
         options: selectorOptions,
@@ -6850,7 +6890,15 @@ function CommunityTaskListInner(props) {
         className: "taskon-community-list-selector"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "taskon-community-list-content", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "taskon-community-list-loading", children: "Loading tasks..." }) : filteredTaskCards.length === 0 ? /* @__PURE__ */ jsx("div", { className: "taskon-community-list-empty", children: "No tasks available" }) : filteredTaskCards.map((sectorItem) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "taskon-community-list-content", children: isLoading ? /* @__PURE__ */ jsx(
+      CommunityTaskListSkeleton,
+      {
+        showSectorTab,
+        showSectorName,
+        showSectorDescription,
+        showSectorReward
+      }
+    ) : filteredTaskCards.length === 0 ? /* @__PURE__ */ jsx("div", { className: "taskon-community-list-empty", children: "No tasks available" }) : filteredTaskCards.map((sectorItem) => /* @__PURE__ */ jsx(
       SectorItem,
       {
         sector: sectorItem,

package/dist/chunks/{EligibilityInfo-DGBffKN8.js → EligibilityInfo-D-Fuy9GE.js}

@@ -2,9 +2,9 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { forwardRef, useRef, useEffect, useCallback, useImperativeHandle, useMemo, useContext, useState } from "react";
 import { createUserApi, ChainType, getTxExplorerUrl, RewardType, parseTitleExpress, UserIdentityType, SnsType, createQuestApi, isUnauthorizedError, ErrorCode, ApiError, createCommonApi, powIcon, contractInteractiveIcon, getSwapDexTitleExpress, EligibilityTemplateId, UserEligibleStatus } from "@taskon/core";
 import { u as useWallet, d as useToast, e as createEthereumAdapterFromProvider } from "./useToast-CaRkylKe.js";
-import { k as useIsMobile, l as useChainMap, m as useNftClaim, C as ClaimNftDialog, n as PendingTxDialog, B as BindWalletDialog, R as Root2, o as Trigger, p as Portal, q as Content2, r as Arrow2, s as TipPopover, g as useBindSocialAccount, j as enMessages, a as useTokenAssets, u as useRewardDetails, c as usePointsHistory, L as LoadingState, i as TokenRewardContent, h as PointsList, E as EmptyState, N as NftRewardContent, W as WithdrawForm } from "./UserCenterWidget-B0O-f_xl.js";
-import { p as TaskOnContext, s as useTaskOnPortalContainer, u as useTaskOnAuth, b as useWidgetLocale } from "./ThemeProvider-DNJqI2lD.js";
-import { D as Dialog, _ as __variableDynamicImportRuntimeHelper } from "./dynamic-import-helper-B2j_dZ4V.js";
+import { k as useIsMobile, l as useChainMap, m as useNftClaim, C as ClaimNftDialog, n as PendingTxDialog, B as BindWalletDialog, R as Root2, o as Trigger, p as Portal, q as Content2, r as Arrow2, s as TipPopover, g as useBindSocialAccount, j as enMessages, a as useTokenAssets, u as useRewardDetails, c as usePointsHistory, L as LoadingState, i as TokenRewardContent, h as PointsList, E as EmptyState, N as NftRewardContent, W as WithdrawForm } from "./UserCenterWidget-cADBSVg7.js";
+import { p as TaskOnContext, s as useTaskOnPortalContainer, u as useTaskOnAuth, b as useWidgetLocale } from "./ThemeProvider-CPI_roeh.js";
+import { D as Dialog, _ as __variableDynamicImportRuntimeHelper } from "./dynamic-import-helper-DwXlQC0S.js";
 import '../EligibilityInfo.css';const successIconUrl = new URL("data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%200%2046%2046'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='23'%20cy='23'%20r='23'%20fill='%2331FF90'/%3e%3cpath%20d='M16.4281%2022.8899L20.6446%2027.1063L29.6798%2018.0711'%20stroke='black'%20stroke-width='5'%20stroke-linecap='square'%20stroke-linejoin='round'/%3e%3c/svg%3e", import.meta.url).href;
 const warnIconUrl = new URL("data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%200%2046%2046'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M22.9783%200.0225143C10.2876%200.0225143%200%2010.3101%200%2023.0006C0%2035.6903%2010.2876%2045.9776%2022.9783%2045.9776C35.6682%2045.9776%2045.9556%2035.6903%2045.9556%2023.0006C45.9558%2010.3101%2035.6682%200.0225143%2022.9783%200.0225143ZM21.797%209.85031C21.797%209.01328%2022.4783%208.33197%2023.3154%208.33197C24.1524%208.33197%2024.8337%209.01328%2024.8337%209.85031V11.729C24.8337%2012.5662%2024.1524%2013.2475%2023.3154%2013.2475C22.4783%2013.2475%2021.797%2012.5662%2021.797%2011.7292V9.85031ZM12.0443%2023.1095H10.1657C9.32842%2023.1095%208.64717%2022.4282%208.64717%2021.5912C8.64717%2020.7541%209.32842%2020.0729%2010.1657%2020.0729H12.0443C12.8814%2020.0729%2013.5627%2020.7541%2013.5627%2021.5912C13.5627%2022.4282%2012.8819%2023.1095%2012.0443%2023.1095ZM12.6546%2014.9563C12.368%2014.6697%2012.2098%2014.2882%2012.2098%2013.8823C12.2098%2013.477%2012.3678%2013.0957%2012.6546%2012.8086C12.9411%2012.522%2013.3223%2012.3638%2013.7282%2012.3638C14.134%2012.3638%2014.515%2012.5216%2014.8021%2012.8086L16.1305%2014.137C16.4173%2014.4241%2016.5753%2014.8054%2016.5753%2015.2107C16.5753%2015.6165%2016.4171%2015.9976%2016.1305%2016.2847C15.843%2016.5715%2015.4617%2016.7295%2015.0565%2016.7295C14.6511%2016.7295%2014.2698%2016.5715%2013.9828%2016.2847L12.6546%2014.9563ZM24.2545%2039.3233H22.3764C21.5389%2039.3233%2020.8574%2038.642%2020.8574%2037.8045C20.8574%2036.9674%2021.5389%2036.2861%2022.3764%2036.2861H24.2545C25.0916%2036.2861%2025.7731%2036.9674%2025.7731%2037.8045C25.7732%2038.6421%2025.0916%2039.3233%2024.2545%2039.3233ZM26.1334%2035.8432H20.4976C19.6603%2035.8432%2018.9792%2035.1622%2018.9792%2034.3253C18.9792%2033.4875%2019.6603%2032.8063%2020.4976%2032.8063H26.133C26.9701%2032.8063%2027.6513%2033.4878%2027.6513%2034.3253C27.6518%2035.1624%2026.9705%2035.8432%2026.1334%2035.8432ZM23.3154%2032.033C18.335%2032.033%2014.2826%2027.9809%2014.2826%2023C14.2826%2018.0196%2018.3345%2013.9671%2023.3154%2013.9671C28.2958%2013.9671%2032.3478%2018.0191%2032.3478%2023C32.3478%2027.9809%2028.2958%2032.033%2023.3154%2032.033ZM31.574%2016.7295C31.1682%2016.7295%2030.7867%2016.5713%2030.5%2016.2843C29.9086%2015.6924%2029.9086%2014.7293%2030.5%2014.1374L31.8288%2012.8086C32.1155%2012.522%2032.4972%2012.364%2032.9026%2012.364C33.3082%2012.364%2033.6895%2012.522%2033.9762%2012.8084C34.568%2013.4009%2034.5676%2014.364%2033.9762%2014.9559L32.6478%2016.2843C32.3613%2016.5715%2031.98%2016.7295%2031.574%2016.7295ZM36.4652%2023.1095H34.5862C33.7491%2023.1095%2033.0678%2022.4282%2033.0678%2021.5912C33.0678%2020.7541%2033.7491%2020.0729%2034.5862%2020.0729H36.4652C37.3025%2020.0729%2037.9835%2020.7541%2037.9835%2021.5912C37.9836%2022.4282%2037.3025%2023.1095%2036.4652%2023.1095Z'%20fill='%23F89D35'/%3e%3c/svg%3e", import.meta.url).href;
 function getNoticeIcon(type) {
@@ -4841,7 +4841,7 @@ function RewardModuleDialog({
   const { messages, isLoading } = useWidgetLocale({
     widgetId: "UserCenterWidget",
     defaultMessages: enMessages,
-    loadMessages: (locale) => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../../../UserCenter/locales/en.json": () => import("./UserCenterWidget-B0O-f_xl.js").then((n) => n.w), "../../../../UserCenter/locales/ja.json": () => import("./usercenter-ja-B2465c1O.js"), "../../../../UserCenter/locales/ko.json": () => import("./usercenter-ko-xAEYxqLg.js") }), `../../../../UserCenter/locales/${locale}.json`, 7)
+    loadMessages: (locale) => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../../../UserCenter/locales/en.json": () => import("./UserCenterWidget-cADBSVg7.js").then((n) => n.w), "../../../../UserCenter/locales/ja.json": () => import("./usercenter-ja-B2465c1O.js"), "../../../../UserCenter/locales/ko.json": () => import("./usercenter-ko-xAEYxqLg.js") }), `../../../../UserCenter/locales/${locale}.json`, 7)
   });
   const tokenAssets = useTokenAssets({
     autoLoad: open && isToken

package/dist/chunks/{LeaderboardWidget-DPOQVXkT.js → LeaderboardWidget-BV2D2q1N.js}

@@ -1,8 +1,8 @@
-import { B as Button, T as Table, P as Pagination, D as Dialog, a as useResolvedWidgetConfig, W as WidgetShell, _ as __variableDynamicImportRuntimeHelper, u as usePagination } from "./dynamic-import-helper-B2j_dZ4V.js";
+import { B as Button, T as Table, P as Pagination, D as Dialog, a as useResolvedWidgetConfig, W as WidgetShell, _ as __variableDynamicImportRuntimeHelper, u as usePagination } from "./dynamic-import-helper-DwXlQC0S.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useMemo } from "react";
 import { createLeaderboardApi, LeaderboardContentType, formatRankRange, RewardsDistributeType, formatRewardText, calculatePrizePool, RewardType, LeaderboardTableColumn, truncateAddress, isAllTimeResponse, isCampaignResponse } from "@taskon/core";
-import { d as useTaskOnContext, b as useWidgetLocale } from "./ThemeProvider-DNJqI2lD.js";
+import { d as useTaskOnContext, b as useWidgetLocale } from "./ThemeProvider-CPI_roeh.js";
 import '../LeaderboardWidget.css';function useLeaderboard(options) {
   const { client } = useTaskOnContext();
   const [data, setData] = useState(null);

package/dist/chunks/{PageBuilder-WCZvxL2j.js → PageBuilder-DQoU4Mwf.js}

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef } from "react";
 import { DEFAULT_PAGE_BUILDER_CONFIG, createPageBuilderApi, parsePageBuilderConfig, SectionLayoutType, WidgetTypeEnum, SECTION_LAYOUT_RATIOS } from "@taskon/core";
-import { Q as QuestWidget } from "./Quest-DjGH_8bx.js";
-import { a as CommunityTaskList } from "./CommunityTaskList-C9mPl_31.js";
-import { L as LeaderboardWidget } from "./LeaderboardWidget-DPOQVXkT.js";
-import { U as UserCenterWidget } from "./UserCenterWidget-CAhgp46j.js";
-import { d as useTaskOnContext } from "./ThemeProvider-DNJqI2lD.js";
+import { Q as QuestWidget } from "./Quest-B5NyVr3o.js";
+import { a as CommunityTaskList } from "./CommunityTaskList-C9Gv8KOF.js";
+import { L as LeaderboardWidget } from "./LeaderboardWidget-BV2D2q1N.js";
+import { U as UserCenterWidget } from "./UserCenterWidget-BRtigY_S.js";
+import { d as useTaskOnContext } from "./ThemeProvider-CPI_roeh.js";
 import '../PageBuilder.css';function usePageBuilderConfig(pageId, localConfig) {
   const { client } = useTaskOnContext();
   const [config, setConfig] = useState(

package/dist/chunks/{Quest-DjGH_8bx.js → Quest-B5NyVr3o.js}

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import { RewardType, UserEligibleStatus, EligibilityTemplateId, SnsType, ChainType, QuestAutomaticallyWinnerDrawType, QuestWinnerDrawType, QuestWinnerRangeType, createQuestApi, QuestRewardsDistributeType, QuestRewardType, createLeaderboardApi, MediaType, RewardDistributedByType, ApiError, ErrorCode, CampaignType } from "@taskon/core";
-import { s as useTaskOnPortalContainer, d as useTaskOnContext } from "./ThemeProvider-DNJqI2lD.js";
-import { D as Dialog, B as Button, T as Table, P as Pagination, a as useResolvedWidgetConfig, W as WidgetShell } from "./dynamic-import-helper-B2j_dZ4V.js";
+import { s as useTaskOnPortalContainer, d as useTaskOnContext } from "./ThemeProvider-CPI_roeh.js";
+import { D as Dialog, B as Button, T as Table, P as Pagination, a as useResolvedWidgetConfig, W as WidgetShell } from "./dynamic-import-helper-DwXlQC0S.js";
 import { d as useToast } from "./useToast-CaRkylKe.js";
-import { R as Root2, o as Trigger, p as Portal, q as Content2, v as InfoIcon, r as Arrow2, s as TipPopover, g as useBindSocialAccount } from "./UserCenterWidget-B0O-f_xl.js";
-import { c as TaskItem, e as EligibilityList, g as getDefaultExportFromCjs, s as sanitizeHtml, R as RewardModuleDialog, C as ConfirmNoticeDialog, u as useBindWallet, b as useNftClaimFlow, E as EligibilityInfo, B as BlindBoxDialog } from "./EligibilityInfo-DGBffKN8.js";
+import { R as Root2, o as Trigger, p as Portal, q as Content2, v as InfoIcon, r as Arrow2, s as TipPopover, g as useBindSocialAccount } from "./UserCenterWidget-cADBSVg7.js";
+import { c as TaskItem, e as EligibilityList, g as getDefaultExportFromCjs, s as sanitizeHtml, R as RewardModuleDialog, C as ConfirmNoticeDialog, u as useBindWallet, b as useNftClaimFlow, E as EligibilityInfo, B as BlindBoxDialog } from "./EligibilityInfo-D-Fuy9GE.js";
 import '../Quest.css';function ButtonTabs({
   items,
   activeKey,
@@ -131,7 +131,7 @@ function GreenCheckIcon() {
         "path",
         {
           d: "M1 4L4.5 7.5L11 1",
-          stroke: "#22c55e",
+          stroke: "currentColor",
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -4220,12 +4220,16 @@ function QuestTitle({
       ] }),
       /* @__PURE__ */ jsx("div", { className: "taskon-quest-countdown-divider" }),
       /* @__PURE__ */ jsxs("div", { className: "taskon-quest-time-range", children: [
-        "(UTC",
-        offsetString,
-        ") ",
-        formatDateTime(startDate),
-        " ～ ",
-        formatDateTime(endDate)
+        /* @__PURE__ */ jsxs("span", { className: "taskon-quest-time-range-timezone", children: [
+          "(UTC",
+          offsetString,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "taskon-quest-time-range-values", children: [
+          /* @__PURE__ */ jsx("span", { children: formatDateTime(startDate) }),
+          /* @__PURE__ */ jsx("span", { className: "taskon-quest-time-range-separator", "aria-hidden": "true", children: "～" }),
+          /* @__PURE__ */ jsx("span", { children: formatDateTime(endDate) })
+        ] })
       ] }),
       showShare && /* @__PURE__ */ jsx(
         ShareDropdown,
@@ -7845,6 +7849,46 @@ function DiscordBindDialog({
     }
   );
 }
+function QuestLoadingSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "taskon-quest-loading", "aria-busy": "true", "aria-label": "Loading quest", children: /* @__PURE__ */ jsxs("div", { className: "taskon-quest-layout taskon-quest-skeleton-layout", children: [
+    /* @__PURE__ */ jsxs("div", { className: "taskon-quest-content taskon-quest-skeleton-content", children: [
+      /* @__PURE__ */ jsxs("div", { className: "taskon-quest-skeleton-group", children: [
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-title" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-meta" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-banner" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-description" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-description taskon-quest-skeleton-description--short" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "taskon-quest-content-divider taskon-quest-skeleton-content-divider" }),
+      /* @__PURE__ */ jsxs("div", { className: "taskon-quest-skeleton-group taskon-quest-skeleton-group--tasks", children: [
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-section-title" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-progress" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-task" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-task" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-task" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-complete-button" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "taskon-quest-divider taskon-quest-skeleton-divider" }),
+    /* @__PURE__ */ jsxs("div", { className: "taskon-quest-sidebar taskon-quest-skeleton-sidebar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "taskon-quest-skeleton-panel", children: [
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-panel-title" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-panel-line" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-panel-line taskon-quest-skeleton-panel-line--short" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "taskon-quest-skeleton-panel", children: [
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-panel-title" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-panel-line" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-panel-line" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-panel-line taskon-quest-skeleton-panel-line--short" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "taskon-quest-skeleton-panel", children: [
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-panel-title" }),
+        /* @__PURE__ */ jsx("div", { className: "taskon-quest-skeleton-block taskon-quest-skeleton-panel-line" })
+      ] })
+    ] })
+  ] }) });
+}
 function ChevronRightIcon() {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -8678,10 +8722,7 @@ function QuestWidgetInner(props) {
     return userStatus.campaign_eligible !== UserEligibleStatus.Eligible;
   }, [statusDisplay == null ? void 0 : statusDisplay.isActive, userStatus]);
   if (isLoading && !campaign) {
-    return /* @__PURE__ */ jsx("div", { className: "taskon-quest", children: /* @__PURE__ */ jsxs("div", { className: "taskon-quest-loading", children: [
-      /* @__PURE__ */ jsx("div", { className: "taskon-quest-loading-spinner" }),
-      /* @__PURE__ */ jsx("span", { children: "Loading quest..." })
-    ] }) });
+    return /* @__PURE__ */ jsx("div", { className: "taskon-quest", children: /* @__PURE__ */ jsx(QuestLoadingSkeleton, {}) });
   }
   if (error && !campaign) {
     return /* @__PURE__ */ jsx("div", { className: "taskon-quest", children: /* @__PURE__ */ jsxs("div", { className: "taskon-quest-error", children: [

package/dist/chunks/{TaskOnProvider-iannERG1.js → TaskOnProvider-93UxARFo.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { b as useWidgetLocale, e as createContextScope, f as useComposedRefs, g as createSlot, P as Primitive, B as Branch, h as useControllableState, j as Presence, k as composeEventHandlers, l as useCallbackRef, R as Root, m as Portal, n as dispatchDiscreteCustomEvent, o as useLayoutEffect2, p as TaskOnContext } from "./ThemeProvider-DNJqI2lD.js";
+import { b as useWidgetLocale, e as createContextScope, f as useComposedRefs, g as createSlot, P as Primitive, B as Branch, h as useControllableState, j as Presence, k as composeEventHandlers, l as useCallbackRef, R as Root, m as Portal, n as dispatchDiscreteCustomEvent, o as useLayoutEffect2, p as TaskOnContext } from "./ThemeProvider-CPI_roeh.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createTaskOnClient, createUserApi, createChainApi, createCommunityTaskApi } from "@taskon/core";
 import { c as createEthereumAdapter, W as WalletContext, b as useToastState, T as ToastContext } from "./useToast-CaRkylKe.js";

package/dist/chunks/{ThemeProvider-DNJqI2lD.js → ThemeProvider-CPI_roeh.js}

@@ -1177,9 +1177,9 @@ function getSystemThemeMode() {
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 const defaultTheme = {
-  mode: "light",
+  mode: "dark",
   compact: false,
-  tokens: lightDefaultTokens
+  tokens: darkDefaultTokens
 };
 function toKebabCase(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1206,7 +1206,7 @@ function resolveTheme(config, systemMode) {
   } else if (config.mode) {
     resolvedMode = config.mode;
   } else {
-    resolvedMode = "light";
+    resolvedMode = "dark";
   }
   const defaultTokens = resolvedMode === "light" ? lightDefaultTokens : darkDefaultTokens;
   const modeConfig = resolvedMode === "light" ? config.light : config.dark;

package/dist/chunks/{UserCenterWidget-CAhgp46j.js → UserCenterWidget-BRtigY_S.js}

@@ -1,9 +1,9 @@
-import { T as Table, u as usePagination, D as Dialog, B as Button, a as useResolvedWidgetConfig, W as WidgetShell, _ as __variableDynamicImportRuntimeHelper } from "./dynamic-import-helper-B2j_dZ4V.js";
+import { T as Table, u as usePagination, D as Dialog, B as Button, a as useResolvedWidgetConfig, W as WidgetShell, _ as __variableDynamicImportRuntimeHelper } from "./dynamic-import-helper-DwXlQC0S.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useLayoutEffect, useMemo, useEffect } from "react";
 import { UserCenterRewardCardType, USER_CENTER_PAGE_SIZE, createUserCenterApi, SnsType, createUserApi, VerifyCodeType, getChainName, truncateAddress, filterEnabledAccounts, filterEnabledWallets, USER_CENTER_REWARD_CARD_TYPES, RewardType, toWei, LockedType, filterEnabledTabs, UserCenterTabType } from "@taskon/core";
-import { d as useTaskOnContext, b as useWidgetLocale } from "./ThemeProvider-DNJqI2lD.js";
-import { L as LoadingState, E as EmptyState, P as Pagination, e as formatDateTime, A as AssetImage, d as buildRewardCards, g as useBindSocialAccount, I as Input, a as useTokenAssets, u as useRewardDetails, c as usePointsHistory, W as WithdrawForm, h as PointsList, N as NftRewardContent, i as TokenRewardContent, j as enMessages } from "./UserCenterWidget-B0O-f_xl.js";
+import { d as useTaskOnContext, b as useWidgetLocale } from "./ThemeProvider-CPI_roeh.js";
+import { L as LoadingState, E as EmptyState, P as Pagination, e as formatDateTime, A as AssetImage, d as buildRewardCards, g as useBindSocialAccount, I as Input, a as useTokenAssets, u as useRewardDetails, c as usePointsHistory, W as WithdrawForm, h as PointsList, N as NftRewardContent, i as TokenRewardContent, j as enMessages } from "./UserCenterWidget-cADBSVg7.js";
 import { u as useWallet, d as useToast } from "./useToast-CaRkylKe.js";
 import '../UserCenterWidget.css';function Tabs({
   items,
@@ -1724,11 +1724,12 @@ function SocialIcon({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       className,
+      style: { color: "var(--taskon-color-text-secondary)" },
       children: /* @__PURE__ */ jsx(
         "path",
         {
           d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1ZM8 13h8v-2H8v2Zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5Z",
-          fill: "#9CA3AF"
+          fill: "currentColor"
         }
       )
     }
@@ -3134,7 +3135,7 @@ function UserCenterWidgetInner({
   const { messages, isLoading: isLocaleLoading } = useWidgetLocale({
     widgetId: "UserCenterWidget",
     defaultMessages: enMessages,
-    loadMessages: (locale) => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./locales/en.json": () => import("./UserCenterWidget-B0O-f_xl.js").then((n) => n.w), "./locales/ja.json": () => import("./usercenter-ja-B2465c1O.js"), "./locales/ko.json": () => import("./usercenter-ko-xAEYxqLg.js") }), `./locales/${locale}.json`, 3)
+    loadMessages: (locale) => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./locales/en.json": () => import("./UserCenterWidget-cADBSVg7.js").then((n) => n.w), "./locales/ja.json": () => import("./usercenter-ja-B2465c1O.js"), "./locales/ko.json": () => import("./usercenter-ko-xAEYxqLg.js") }), `./locales/${locale}.json`, 3)
   });
   const enabledTabs = useMemo(() => filterEnabledTabs(config), [config]);
   const tabItems = useMemo(() => {

package/dist/chunks/{UserCenterWidget-B0O-f_xl.js → UserCenterWidget-cADBSVg7.js}

@@ -4,10 +4,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import * as React from "react";
 import React__default, { forwardRef, useRef, useCallback, useImperativeHandle, useEffect, useContext, useState, useMemo, useLayoutEffect, createContext } from "react";
 import { createUserApi, createNftClaimApi, NftClaimError, NftClaimErrorType, getNftChainName, generatePendingKey, getPendingHash, NftClaimType, WithdrawNft, ClaimMintedNft, ClaimCapNft, setPendingHash, clearPendingHash, RewardType, isNftClaimed, isNftClaimable, getNftClaimType, ChainType, DEFAULT_ERROR_MESSAGES, openInNewTab, toWei, formatTokenAmount as formatTokenAmount$1, USER_CENTER_REWARD_CARD_TYPES, RouletteRewardType, USER_CENTER_PAGE_SIZE, createUserCenterApi, getTxExplorerUrl } from "@taskon/core";
-import { p as TaskOnContext, d as useTaskOnContext, P as Primitive, o as useLayoutEffect2, e as createContextScope, f as useComposedRefs, l as useCallbackRef, h as useControllableState, k as composeEventHandlers, j as Presence, m as Portal$1, g as createSlot, D as DismissableLayer, s as useTaskOnPortalContainer } from "./ThemeProvider-DNJqI2lD.js";
+import { p as TaskOnContext, d as useTaskOnContext, P as Primitive, o as useLayoutEffect2, e as createContextScope, f as useComposedRefs, l as useCallbackRef, h as useControllableState, k as composeEventHandlers, j as Presence, m as Portal$1, g as createSlot, D as DismissableLayer, s as useTaskOnPortalContainer } from "./ThemeProvider-CPI_roeh.js";
 import { d as useToast, u as useWallet, e as createEthereumAdapterFromProvider } from "./useToast-CaRkylKe.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { D as Dialog, b as useId, h as hideOthers, R as ReactRemoveScroll, d as useFocusGuards, F as FocusScope, P as Pagination$1, B as Button, T as Table, u as usePagination } from "./dynamic-import-helper-B2j_dZ4V.js";
+import { D as Dialog, b as useId, h as hideOthers, R as ReactRemoveScroll, d as useFocusGuards, F as FocusScope, P as Pagination$1, B as Button, T as Table, u as usePagination } from "./dynamic-import-helper-DwXlQC0S.js";
 import * as ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
 const Input = forwardRef(
@@ -360,14 +360,20 @@ function useBindSocialAccount({
     isBound
   };
 }
-const MOBILE_BREAKPOINT = 750;
+const VIEWPORT_BREAKPOINTS = {
+  mobileMax: 750
+};
+const MOBILE_MAX_WIDTH = VIEWPORT_BREAKPOINTS.mobileMax;
+function isMobileViewport(width) {
+  return width <= MOBILE_MAX_WIDTH;
+}
 function useIsMobile() {
   const [isMobile, setIsMobile] = useState(() => {
     if (typeof window === "undefined") return false;
-    return window.innerWidth <= MOBILE_BREAKPOINT;
+    return isMobileViewport(window.innerWidth);
   });
   const handleResize = useCallback(() => {
-    setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
+    setIsMobile(isMobileViewport(window.innerWidth));
   }, []);
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -4067,7 +4073,15 @@ function TipPopover({
     className || ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(Root2, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Trigger, { asChild: true, children: children ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: triggerClassName,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children
+      }
+    ) : /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -4075,7 +4089,7 @@ function TipPopover({
         "aria-label": "More information",
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        children: children || /* @__PURE__ */ jsx(InfoIcon, { size: iconSize })
+        children: /* @__PURE__ */ jsx(InfoIcon, { size: iconSize })
       }
     ) }),
     /* @__PURE__ */ jsx(Portal, { container: portalContainer ?? void 0, children: /* @__PURE__ */ jsxs(

package/dist/chunks/{dynamic-import-helper-B2j_dZ4V.js → dynamic-import-helper-DwXlQC0S.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { forwardRef, useState, useMemo, useCallback, useEffect } from "react";
-import { q as composeRefs, o as useLayoutEffect2, l as useCallbackRef$1, f as useComposedRefs, P as Primitive, h as useControllableState, e as createContextScope, j as Presence, m as Portal$1, k as composeEventHandlers, g as createSlot$1, D as DismissableLayer, r as createContext2, s as useTaskOnPortalContainer, d as useTaskOnContext, T as ThemeProvider } from "./ThemeProvider-DNJqI2lD.js";
+import { q as composeRefs, o as useLayoutEffect2, l as useCallbackRef$1, f as useComposedRefs, P as Primitive, h as useControllableState, e as createContextScope, j as Presence, m as Portal$1, k as composeEventHandlers, g as createSlot$1, D as DismissableLayer, r as createContext2, s as useTaskOnPortalContainer, d as useTaskOnContext, T as ThemeProvider } from "./ThemeProvider-CPI_roeh.js";
 import { createWidgetApi, parseWidgetConfig } from "@taskon/core";
 import '../dynamic-import-helper.css';function cloudThemeToReactTheme(cloud) {
   const isDual = cloud.colorMode.type === "dual";

package/dist/community-task.js

@@ -1,4 +1,4 @@
-import { B, B as B2, a, c, u, b } from "./chunks/CommunityTaskList-C9mPl_31.js";
+import { B, B as B2, a, c, u, b } from "./chunks/CommunityTaskList-C9Gv8KOF.js";
 export {
   B as BaseTask,
   B2 as CommunityTask,

package/dist/core.js

@@ -1,6 +1,6 @@
-import { T, c, i, u, a, b } from "./chunks/ThemeProvider-DNJqI2lD.js";
+import { T, c, i, u, a, b } from "./chunks/ThemeProvider-CPI_roeh.js";
 import { RewardType } from "@taskon/core";
-import { T as T2, c as c2, b as b2, i as i2, a as a2, u as u2 } from "./chunks/TaskOnProvider-iannERG1.js";
+import { T as T2, c as c2, b as b2, i as i2, a as a2, u as u2 } from "./chunks/TaskOnProvider-93UxARFo.js";
 import { a as a3, u as u3 } from "./chunks/useToast-CaRkylKe.js";
 export {
   RewardType,