From 20182b4957f8ef999824a9d77f9abd9670e8fde7 Mon Sep 17 00:00:00 2001
From: robhyrk <rob.hyrkiel@gmail.com>
Date: Mon, 17 Nov 2025 14:56:03 -0500
Subject: [PATCH] fix: text colors, nova wallet view on mobile, market header
 stats for combo, and api support for mainnet on referenda items

---
 components/account/NotificationsPanel.tsx     |  8 +--
 components/account/WalletSelect.tsx           |  4 +-
 components/create/editor/ComboEditor.tsx      | 10 +--
 components/create/editor/CostCalculator.tsx   |  2 +-
 components/create/editor/EditorCompact.tsx    | 12 ++--
 .../create/editor/inputs/BlockPeriod.tsx      |  2 +-
 .../editor/inputs/LiquidityModeToggle.tsx     |  8 +--
 .../create/editor/inputs/LiquiditySimple.tsx  |  6 +-
 .../create/editor/inputs/LiquidityUnified.tsx |  8 +--
 .../editor/inputs/answers/Categorical.tsx     |  2 +-
 components/liquidity/PoolFeesSelect.tsx       |  2 +-
 components/liquidity/PoolSettingsAMM2.tsx     |  2 +-
 .../markets/ComboMarketHeaderUnified.tsx      |  8 +--
 .../MarketContextActionOutcomeSelector.tsx    |  4 +-
 components/markets/MarketHistoryModal.tsx     | 10 +--
 components/markets/MarketSearch.tsx           |  2 +-
 .../markets/market-card/MarketOrComboCard.tsx |  5 +-
 components/portfolio/EmptyPortfolio.tsx       |  2 +-
 components/settings/AccountSettingsForm.tsx   |  6 +-
 components/top-bar/index.tsx                  | 72 +++++++++++++++++++
 components/ui/Footer.tsx                      |  2 +-
 components/ui/Input.tsx                       |  2 +-
 components/ui/Table.tsx                       |  2 +-
 components/ui/inputs.tsx                      |  2 +-
 components/web3wallet/index.tsx               |  2 +-
 lib/hooks/queries/usePoolStats.ts             | 14 ++--
 pages/404.tsx                                 |  2 +-
 pages/api/referendum/[refId]/signal.ts        |  6 +-
 pages/markets/[marketid].tsx                  |  2 +-
 pages/referendum-signal/widget/[refId].tsx    |  2 +-
 30 files changed, 143 insertions(+), 68 deletions(-)

diff --git a/components/account/NotificationsPanel.tsx b/components/account/NotificationsPanel.tsx
index 84e2359e1..efb9a85ab 100644
--- a/components/account/NotificationsPanel.tsx
+++ b/components/account/NotificationsPanel.tsx
@@ -216,7 +216,7 @@ const CourtCaseReadyToSettleItem = ({
         <h3 className="mb-1 text-sm font-semibold text-white/90">
           {market?.question}
         </h3>
-        <p className="text-xs text-white/90/75">
+        <p className="text-xs text-white/90">
           This court case can now be settled.
         </p>
       </div>
@@ -253,7 +253,7 @@ const CourtCaseReadyForVoteAlertItem = ({
         <h3 className="mb-1 text-sm font-semibold text-white/90">
           {market?.question}
         </h3>
-        <p className="text-xs text-white/90/75">
+        <p className="text-xs text-white/90">
           You have been drawn as juror for this market and can now vote.
         </p>
       </div>
@@ -290,7 +290,7 @@ const CourtCaseReadyForRevealAlertItem = ({
         <h3 className="mb-1 text-sm font-semibold text-white/90">
           {market?.question}
         </h3>
-        <p className="text-xs text-white/90/75">
+        <p className="text-xs text-white/90">
           You are required to reveal your vote for this court case.
         </p>
       </div>
@@ -389,7 +389,7 @@ const RelevantMarketDisputeItem = ({
         <h3 className="mb-1 text-sm font-semibold text-white/90">
           {alert.market.question}
         </h3>
-        <p className="text-xs text-white/90/75">
+        <p className="text-xs text-white/90">
           A market you're involved in is disputed
         </p>
       </div>
diff --git a/components/account/WalletSelect.tsx b/components/account/WalletSelect.tsx
index 0f1848712..0f73bfff2 100644
--- a/components/account/WalletSelect.tsx
+++ b/components/account/WalletSelect.tsx
@@ -98,7 +98,7 @@ const WalletSelect = () => {
       {/* Divider */}
       {/* <div className="relative mb-6 flex items-center">
         <div className="h-px flex-1 bg-white/10"></div>
-        <span className="px-3 text-xs font-medium text-white/90/60">or</span>
+        <span className="px-3 text-xs font-medium text-white/90">or</span>
         <div className="h-px flex-1 bg-white/10"></div>
       </div> */}
 
@@ -125,7 +125,7 @@ const WalletSelect = () => {
                 <div className="text-sm font-semibold text-white/90">
                   Nova Wallet
                 </div>
-                <div className="text-xs text-white/90/60">Mobile wallet</div>
+                <div className="text-xs text-white/90">Mobile wallet</div>
               </div>
             </Link>
             <div className="rounded-lg border-2 border-white/10 bg-white/10 p-4 backdrop-blur-sm">
diff --git a/components/create/editor/ComboEditor.tsx b/components/create/editor/ComboEditor.tsx
index 755d58188..a7eae6641 100644
--- a/components/create/editor/ComboEditor.tsx
+++ b/components/create/editor/ComboEditor.tsx
@@ -589,7 +589,7 @@ const ComboMarketEditor: React.FC = () => {
                       <div className="mb-1 text-xs font-semibold text-white/90">
                         Example 1:
                       </div>
-                      <p className="text-xs leading-relaxed text-white/90/75">
+                      <p className="text-xs leading-relaxed text-white/90">
                         <strong className="text-blue-300">Assume:</strong>{" "}
                         "Referendum #1764 passes",{" "}
                         <strong className="text-blue-300">No</strong> <br />
@@ -602,7 +602,7 @@ const ComboMarketEditor: React.FC = () => {
                       <div className="mb-1 text-xs font-semibold text-white/90">
                         Example 2:
                       </div>
-                      <p className="text-xs leading-relaxed text-white/90/75">
+                      <p className="text-xs leading-relaxed text-white/90">
                         <strong className="text-blue-300">Assume:</strong>{" "}
                         "Lakers win championship",{" "}
                         <strong className="text-blue-300">Yes</strong> <br />
@@ -670,7 +670,7 @@ const ComboMarketEditor: React.FC = () => {
                     </div>
                     <button
                       onClick={() => removeMarket(market.marketId)}
-                      className="flex-shrink-0 rounded p-1 text-white/90/60 transition-all hover:bg-white/10 hover:text-white/90 active:scale-95"
+                      className="flex-shrink-0 rounded p-1 text-white/90 transition-all hover:bg-white/10 hover:text-white/90 active:scale-95"
                       title="Remove market"
                     >
                       <AiOutlineClose size={16} />
@@ -825,7 +825,7 @@ const ComboMarketEditor: React.FC = () => {
                       <div className="text-sm font-semibold text-white/90">
                         ${spotPrice}
                       </div>
-                      <div className="text-xxs text-white/90/60">price</div>
+                      <div className="text-xxs text-white/90">price</div>
                     </div>
                     <div className="flex items-center gap-1">
                       <Input
@@ -882,7 +882,7 @@ const ComboMarketEditor: React.FC = () => {
                 {form.selectedMarkets[0]?.baseAsset.toLocaleUpperCase() ||
                   "ZTG"}
               </span>
-              <span className="text-xs text-white/90/60">(min: 200)</span>
+              <span className="text-xs text-white/90">(min: 200)</span>
             </div>
           </div>
           {errors.liquidityAmount && (
diff --git a/components/create/editor/CostCalculator.tsx b/components/create/editor/CostCalculator.tsx
index e85e032f8..29b7fff67 100644
--- a/components/create/editor/CostCalculator.tsx
+++ b/components/create/editor/CostCalculator.tsx
@@ -449,7 +449,7 @@ const CostDetailsModal = ({
                       `border-b-2 px-3 pb-2 text-sm font-semibold transition-colors ${
                         selected
                           ? "border-ztg-green-500 text-white/90"
-                          : "border-transparent text-white/90/60 hover:text-white/90"
+                          : "border-transparent text-white/90 hover:text-white/90"
                       }`
                     }
                   >
diff --git a/components/create/editor/EditorCompact.tsx b/components/create/editor/EditorCompact.tsx
index 7598ebc3f..ac0976b05 100644
--- a/components/create/editor/EditorCompact.tsx
+++ b/components/create/editor/EditorCompact.tsx
@@ -205,7 +205,7 @@ export const MarketEditorCompact = () => {
                             !fieldsState.moderation.isValid ||
                             !fieldsState.liquidity.isValid ||
                             !fieldsState.answers.isValid))
-                          ? "cursor-not-allowed border-white/20 bg-white/5 text-white/90/40"
+                          ? "cursor-not-allowed border-white/20 bg-white/5 text-white/90"
                           : "border-ztg-green-600/80 bg-ztg-green-600/90 text-white/90 shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
                       }`}
                       type="button"
@@ -345,7 +345,7 @@ export const MarketEditorCompact = () => {
                       <Disclosure.Button className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-white/5">
                         <span className="text-sm font-semibold text-white/90">
                           Description{" "}
-                          <span className="font-normal text-white/90/60">
+                          <span className="font-normal text-white/90">
                             (Optional)
                           </span>
                         </span>
@@ -495,7 +495,7 @@ export const MarketEditorCompact = () => {
                           )}
                         {fieldsState.endDate.isValid &&
                           !fieldsState.reportingPeriod.isTouched && (
-                            <p className="text-xs text-white/90/60">
+                            <p className="text-xs text-white/90">
                               💡 Tip: Give your oracle enough time to gather
                               data and report accurately
                             </p>
@@ -528,7 +528,7 @@ export const MarketEditorCompact = () => {
                           )}
                         {fieldsState.endDate.isValid &&
                           !fieldsState.disputePeriod.isTouched && (
-                            <p className="text-xs text-white/90/60">
+                            <p className="text-xs text-white/90">
                               💡 Tip: A dispute period protects against
                               incorrect outcomes
                             </p>
@@ -564,7 +564,7 @@ export const MarketEditorCompact = () => {
                       </div>
                     )}
                   {wallet.realAddress && !form.oracle && (
-                    <p className="text-xs text-white/90/60">
+                    <p className="text-xs text-white/90">
                       💡 Tip: Click "Use connected" to quickly set your account
                       as the oracle
                     </p>
@@ -1048,7 +1048,7 @@ export const MarketEditorCompact = () => {
                           <Disclosure.Button className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-white/5">
                             <span className="text-sm font-semibold text-white/90">
                               Description{" "}
-                              <span className="font-normal text-white/90/60">
+                              <span className="font-normal text-white/90">
                                 (Click to view)
                               </span>
                             </span>
diff --git a/components/create/editor/inputs/BlockPeriod.tsx b/components/create/editor/inputs/BlockPeriod.tsx
index 7c2196ccf..53cc7303b 100644
--- a/components/create/editor/inputs/BlockPeriod.tsx
+++ b/components/create/editor/inputs/BlockPeriod.tsx
@@ -242,7 +242,7 @@ const DurationInput = ({
           type="number"
           className={`w-full border-0 bg-transparent px-4 py-3 text-left text-sm text-white/90 outline-none placeholder:text-white/50 ${
             isSelected
-              ? "text-white/90 placeholder:text-white/90/60"
+              ? "text-white/90 placeholder:text-white/90"
               : "text-white/90 placeholder:text-white/50"
           }`}
           value={value?.value}
diff --git a/components/create/editor/inputs/LiquidityModeToggle.tsx b/components/create/editor/inputs/LiquidityModeToggle.tsx
index e83c797b1..65a367d6c 100644
--- a/components/create/editor/inputs/LiquidityModeToggle.tsx
+++ b/components/create/editor/inputs/LiquidityModeToggle.tsx
@@ -61,7 +61,7 @@ export const LiquidityModeToggle = ({
           <div className="flex items-center gap-2 rounded-lg bg-white/10 px-2 py-1">
             <span
               className={`text-xs font-medium transition-colors ${
-                isSimple ? "text-white/90" : "text-white/90/60"
+                isSimple ? "text-white/90" : "text-white/90"
               }`}
             >
               Simple
@@ -73,7 +73,7 @@ export const LiquidityModeToggle = ({
             />
             <span
               className={`text-xs font-medium transition-colors ${
-                !isSimple ? "text-white/90" : "text-white/90/60"
+                !isSimple ? "text-white/90" : "text-white/90"
               }`}
             >
               Advanced
@@ -81,7 +81,7 @@ export const LiquidityModeToggle = ({
           </div>
         </div>
         {isSimple && (
-          <p className="text-xs text-white/90/60">
+          <p className="text-xs text-white/90">
             💡 Simple mode automatically distributes liquidity evenly
           </p>
         )}
@@ -105,7 +105,7 @@ export const LiquidityModeToggle = ({
             currency={currency}
             fieldState={fieldsState}
           />
-          <p className="mt-2 text-xs text-white/90/60">
+          <p className="mt-2 text-xs text-white/90">
             💡 Advanced mode lets you set custom prices and amounts for each
             outcome
           </p>
diff --git a/components/create/editor/inputs/LiquiditySimple.tsx b/components/create/editor/inputs/LiquiditySimple.tsx
index 1c6396f9a..f9f7b498f 100644
--- a/components/create/editor/inputs/LiquiditySimple.tsx
+++ b/components/create/editor/inputs/LiquiditySimple.tsx
@@ -116,11 +116,11 @@ export const LiquiditySimple = ({
             placeholder={`e.g., ${defaultAmount}`}
           />
           {totalValue && totalValue.gt(0) && (
-            <p className="text-xs text-white/90/60">
+            <p className="text-xs text-white/90">
               ≈ ${totalValue.toFixed(2)} USD
             </p>
           )}
-          <p className="text-xs text-white/90/60">
+          <p className="text-xs text-white/90">
             💡 This amount will be evenly distributed across all {numOutcomes}{" "}
             outcomes
           </p>
@@ -138,7 +138,7 @@ export const LiquiditySimple = ({
             isValid={true}
             label="% Swap Fee"
           />
-          <p className="text-xs text-white/90/60">
+          <p className="text-xs text-white/90">
             💡 Fee earned on each trade. 1% is a common default.
           </p>
         </div>
diff --git a/components/create/editor/inputs/LiquidityUnified.tsx b/components/create/editor/inputs/LiquidityUnified.tsx
index 63fea3c9d..179311555 100644
--- a/components/create/editor/inputs/LiquidityUnified.tsx
+++ b/components/create/editor/inputs/LiquidityUnified.tsx
@@ -181,11 +181,11 @@ export const LiquidityUnified = ({
             placeholder="e.g., 1000"
           />
           {totalValue && totalValue.gt(0) && (
-            <p className="text-xs text-white/90/60">
+            <p className="text-xs text-white/90">
               ≈ ${totalValue.toFixed(2)} USD
             </p>
           )}
-          <p className="text-xs text-white/90/60">
+          <p className="text-xs text-white/90">
             💡 This amount will be evenly distributed across all {numOutcomes}{" "}
             outcomes
           </p>
@@ -204,7 +204,7 @@ export const LiquidityUnified = ({
             isValid={fieldsState.isValid}
             label="% Swap Fee"
           />
-          <p className="text-xs text-white/90/60">
+          <p className="text-xs text-white/90">
             💡 Fee earned on each trade. 1% is a common default.
           </p>
         </div>
@@ -220,7 +220,7 @@ export const LiquidityUnified = ({
                 <span className="text-sm font-semibold text-white/90">
                   Fine-tune Distribution
                   {isCustomized && (
-                    <span className="ml-2 text-xs font-normal text-white/90/60">
+                    <span className="ml-2 text-xs font-normal text-white/90">
                       (Customized)
                     </span>
                   )}
diff --git a/components/create/editor/inputs/answers/Categorical.tsx b/components/create/editor/inputs/answers/Categorical.tsx
index cb117bb43..982774d1d 100644
--- a/components/create/editor/inputs/answers/Categorical.tsx
+++ b/components/create/editor/inputs/answers/Categorical.tsx
@@ -253,7 +253,7 @@ const AnswerInput = ({
         </div>
       )}
       <div
-        className={`absolute right-2 top-[50%] z-10 flex translate-y-[-50%] gap-2 text-white/90/60 transition-opacity duration-300 ${
+        className={`absolute right-2 top-[50%] z-10 flex translate-y-[-50%] gap-2 text-white/90 transition-opacity duration-300 ${
           draggingDisabled && "cursor-not-allowed opacity-25"
         }`}
         ref={setNodeRef}
diff --git a/components/liquidity/PoolFeesSelect.tsx b/components/liquidity/PoolFeesSelect.tsx
index 9fa6ea3b6..4432a648c 100644
--- a/components/liquidity/PoolFeesSelect.tsx
+++ b/components/liquidity/PoolFeesSelect.tsx
@@ -117,7 +117,7 @@ const PoolFeesSelect = ({
           step={0.1}
           className={`text-center text-sm font-semibold outline-none ${
             inputSelected
-              ? "bg-transparent text-white/90 placeholder:text-white/90/60"
+              ? "bg-transparent text-white/90 placeholder:text-white/90"
               : "bg-transparent text-ztg-primary-700 placeholder:text-ztg-primary-400"
           }`}
           onChange={(e) => handleInputFeeChange(e.target.value)}
diff --git a/components/liquidity/PoolSettingsAMM2.tsx b/components/liquidity/PoolSettingsAMM2.tsx
index 608b7944d..8c421e4e6 100644
--- a/components/liquidity/PoolSettingsAMM2.tsx
+++ b/components/liquidity/PoolSettingsAMM2.tsx
@@ -88,7 +88,7 @@ const PoolSettingsAmm2: FC<{
           <div className="relative inline-block">
             <Input
               type="number"
-              className="font-base w-64 rounded-md bg-white/10 py-4 pl-5 pr-28 text-right text-base text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15"
+              className="font-base w-64 rounded-md bg-white/10 py-4 pl-5 pr-28 text-right text-base text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90 focus:bg-white/15"
               value={`${parseFloat(baseAssetAmount ?? "0")}`}
               onChange={(event) => {
                 const value = parseFloat(event.target.value);
diff --git a/components/markets/ComboMarketHeaderUnified.tsx b/components/markets/ComboMarketHeaderUnified.tsx
index f5ef53cc4..6b54b3fb5 100644
--- a/components/markets/ComboMarketHeaderUnified.tsx
+++ b/components/markets/ComboMarketHeaderUnified.tsx
@@ -103,13 +103,13 @@ const SourceMarketCard = ({
 
               <ChevronDown
                 size={16}
-                className={`flex-shrink-0 text-white/90/60 transition-transform duration-200 sm:hidden ${
+                className={`flex-shrink-0 text-white/90 transition-transform duration-200 sm:hidden ${
                   open ? "rotate-180" : ""
                 }`}
               />
               <ChevronDown
                 size={18}
-                className={`hidden flex-shrink-0 text-white/90/60 transition-transform duration-200 sm:block ${
+                className={`hidden flex-shrink-0 text-white/90 transition-transform duration-200 sm:block ${
                   open ? "rotate-180" : ""
                 }`}
               />
@@ -224,7 +224,7 @@ const ComboMarketHeaderUnified: FC<ComboMarketHeaderUnifiedProps> = ({
 
   const liquidity = poolStats?.[0]?.liquidity;
   const volume = poolStats?.[0]?.volume
-    ? new Decimal(poolStats[0].volume).div(ZTG).toNumber()
+    ? new Decimal(poolStats[0].volume).div(ZTG).toNumber() * 100
     : 0;
 
   const participants = (poolStats?.[0] as any)?.traders;
@@ -315,7 +315,7 @@ const ComboMarketHeaderUnified: FC<ComboMarketHeaderUnifiedProps> = ({
 
         {/* Arrow indicator */}
         <div className="flex h-5 w-5 items-center justify-center self-center rounded-full bg-white/10 shadow-md backdrop-blur-sm">
-          <span className="text-xs font-medium leading-none text-white/90/60">
+          <span className="text-xs font-medium leading-none text-white/90">
             →
           </span>
         </div>
diff --git a/components/markets/MarketContextActionOutcomeSelector.tsx b/components/markets/MarketContextActionOutcomeSelector.tsx
index 9006e963f..ae0510a69 100644
--- a/components/markets/MarketContextActionOutcomeSelector.tsx
+++ b/components/markets/MarketContextActionOutcomeSelector.tsx
@@ -266,7 +266,7 @@ const MarketContextActionOutcomeSelector = ({
                       type="text"
                       ref={inputRef}
                       placeholder="Search Assets"
-                      className="h-[44px] w-full rounded-lg bg-white/10 px-4 text-sm text-white/90 shadow-md backdrop-blur-sm placeholder:text-white/90/60 focus:bg-white/15 focus:shadow-lg"
+                      className="h-[44px] w-full rounded-lg bg-white/10 px-4 text-sm text-white/90 shadow-md backdrop-blur-sm placeholder:text-white/90 focus:bg-white/15 focus:shadow-lg"
                       value={search ?? ""}
                       onChange={(event) => {
                         setSearch(event.target.value);
@@ -282,7 +282,7 @@ const MarketContextActionOutcomeSelector = ({
                     type="text"
                     ref={inputRef}
                     placeholder="Search outcomes..."
-                    className="h-[40px] w-full rounded-lg bg-white/10 px-3 text-sm text-white/90 backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 focus:shadow-md focus:ring-2 focus:ring-ztg-green-500/30"
+                    className="h-[40px] w-full rounded-lg bg-white/10 px-3 text-sm text-white/90 backdrop-blur-sm transition-all placeholder:text-white/90 focus:bg-white/15 focus:shadow-md focus:ring-2 focus:ring-ztg-green-500/30"
                     value={search ?? ""}
                     onChange={(event) => {
                       setSearch(event.target.value);
diff --git a/components/markets/MarketHistoryModal.tsx b/components/markets/MarketHistoryModal.tsx
index 09b522912..ef663319c 100644
--- a/components/markets/MarketHistoryModal.tsx
+++ b/components/markets/MarketHistoryModal.tsx
@@ -103,7 +103,7 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
                 <div className="text-sm text-white/90">
                   {marketStart}
                   {marketHistory?.start?.blockNumber > 0 && (
-                    <span className="ml-2 text-xs text-white/90/60">
+                    <span className="ml-2 text-xs text-white/90">
                       Block #{marketHistory.start.blockNumber}
                     </span>
                   )}
@@ -123,7 +123,7 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
                 <div className="text-sm text-white/90">
                   {marketClosed}
                   {marketHistory?.end?.blockNumber > 0 && (
-                    <span className="ml-2 text-xs text-white/90/60">
+                    <span className="ml-2 text-xs text-white/90">
                       Block #{marketHistory.end.blockNumber}
                     </span>
                   )}
@@ -164,7 +164,7 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
                       </span>
                     </div>
                   </div>
-                  <div className="text-xs text-white/90/60">
+                  <div className="text-xs text-white/90">
                     {marketHistory.reported.timestamp &&
                       new Intl.DateTimeFormat("default", {
                         dateStyle: "medium",
@@ -209,7 +209,7 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
                         disputed the reported outcome
                       </div>
                     </div>
-                    <div className="text-xs text-white/90/60">
+                    <div className="text-xs text-white/90">
                       {dispute.timestamp &&
                         new Intl.DateTimeFormat("default", {
                           dateStyle: "medium",
@@ -246,7 +246,7 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
                       </span>
                     </div>
                   </div>
-                  <div className="text-xs text-white/90/60">
+                  <div className="text-xs text-white/90">
                     {marketHistory.resolved.timestamp &&
                       new Intl.DateTimeFormat("default", {
                         dateStyle: "medium",
diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index c30445a08..2da8ee91f 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -84,7 +84,7 @@ const MarketSearch = () => {
 
           <input
             ref={inputRef}
-            className={`h-11 w-full touch-manipulation overflow-hidden text-ellipsis rounded-lg bg-white/10 pl-4 pr-4 text-base text-white/90 outline-none ring-2 ring-transparent backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 focus:shadow-lg focus:ring-2 focus:ring-ztg-green-500/30 md:text-base`}
+            className={`h-11 w-full touch-manipulation overflow-hidden text-ellipsis rounded-lg bg-white/10 pl-4 pr-4 text-base text-white/90 outline-none ring-2 ring-transparent backdrop-blur-sm transition-all placeholder:text-white/90 focus:bg-white/15 focus:shadow-lg focus:ring-2 focus:ring-ztg-green-500/30 md:text-base`}
             value={searchTerm}
             placeholder="Search markets..."
             onChange={(event) => {
diff --git a/components/markets/market-card/MarketOrComboCard.tsx b/components/markets/market-card/MarketOrComboCard.tsx
index ab180b730..059fca214 100644
--- a/components/markets/market-card/MarketOrComboCard.tsx
+++ b/components/markets/market-card/MarketOrComboCard.tsx
@@ -239,7 +239,7 @@ const ComboPoolCard = ({
                   <div className="relative my-1.5 flex items-center justify-center">
                     <div className="h-px w-full bg-white/10" />
                     <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 p-0.5 backdrop-blur-sm">
-                      <ArrowDown size={10} className="text-white/90/60" />
+                      <ArrowDown size={10} className="text-white/90" />
                     </div>
                   </div>
                 )}
@@ -288,8 +288,7 @@ const ComboPoolCard = ({
               <BarChart2 size={12} className="text-white/90" />
               <span>
                 {formatNumberCompact(
-                  new Decimal(stats.volume).div(ZTG).toNumber(),
-                  2,
+                  new Decimal(stats.volume).div(ZTG).toNumber() * 100,
                 )}
               </span>
             </div>
diff --git a/components/portfolio/EmptyPortfolio.tsx b/components/portfolio/EmptyPortfolio.tsx
index 024fbe5aa..ea6cf5631 100644
--- a/components/portfolio/EmptyPortfolio.tsx
+++ b/components/portfolio/EmptyPortfolio.tsx
@@ -15,7 +15,7 @@ const EmptyPortfolio = ({
   return (
     <div className="my-16 flex flex-col items-center justify-center gap-6 rounded-lg border border-ztg-primary-200/30 bg-white/10 p-12 shadow-lg backdrop-blur-md">
       <div className="flex h-20 w-20 items-center justify-center rounded-full border border-ztg-primary-200/20 bg-ztg-primary-900/30 backdrop-blur-sm">
-        <Inbox className="text-white/90/60" size={40} strokeWidth={1.5} />
+        <Inbox className="text-white/90" size={40} strokeWidth={1.5} />
       </div>
       <div className="text-center">
         <h3 className="mb-2 text-xl font-semibold text-white/90">{headerText}</h3>
diff --git a/components/settings/AccountSettingsForm.tsx b/components/settings/AccountSettingsForm.tsx
index f58e42c5b..d8e6266e5 100644
--- a/components/settings/AccountSettingsForm.tsx
+++ b/components/settings/AccountSettingsForm.tsx
@@ -119,7 +119,7 @@ const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
           id="displayName"
           {...register("displayName", { required: true })}
           className={
-            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 " +
+            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90 focus:bg-white/15 " +
             (errors?.displayName
               ? "bg-red-500/20"
               : "bg-white/10 hover:bg-white/15")
@@ -139,7 +139,7 @@ const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
           id="discord"
           {...register("discord")}
           className={
-            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 " +
+            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90 focus:bg-white/15 " +
             (errors?.discord ? "bg-red-500/20" : "bg-white/10 hover:bg-white/15")
           }
         />
@@ -157,7 +157,7 @@ const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
           id="twitter"
           {...register("twitter")}
           className={
-            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 " +
+            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90 focus:bg-white/15 " +
             (errors?.twitter ? "bg-red-500/20" : "bg-white/10 hover:bg-white/15")
           }
         />
diff --git a/components/top-bar/index.tsx b/components/top-bar/index.tsx
index 27fa1569c..3fc0b9971 100644
--- a/components/top-bar/index.tsx
+++ b/components/top-bar/index.tsx
@@ -150,7 +150,79 @@ const MobileAccountView = ({
 
   const fullAddress = activeAccount?.address || "";
 
+  // Check if we're on a mobile device
+  const isMobileDevice =
+    typeof window !== "undefined" &&
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    );
+
   if (!connected || !activeAccount) {
+    // On mobile, show Nova Wallet connection option
+    if (isMobileDevice) {
+      return (
+        <div className="flex flex-col gap-4">
+          <h3 className="text-lg font-bold text-white/90">Connect Wallet</h3>
+          <div className="w-full space-y-3">
+            <Link
+              href="https://novawallet.io/"
+              className="flex h-12 w-full items-center justify-center gap-3 rounded-lg border-2 border-white/10 bg-white/10 px-4 py-3 shadow-sm backdrop-blur-sm transition-all hover:border-white/20 hover:bg-white/20 hover:shadow-md"
+              target="_blank"
+            >
+              <Image
+                src="/icons/nova.png"
+                alt={"Nova Wallet"}
+                width={32}
+                height={32}
+                quality={100}
+              />
+              <div className="flex flex-col items-start">
+                <div className="text-sm font-semibold text-white/90">
+                  Nova Wallet
+                </div>
+                <div className="text-xs text-white/90">Mobile wallet</div>
+              </div>
+            </Link>
+            <div className="rounded-lg border-2 border-white/10 bg-white/10 p-4 backdrop-blur-sm">
+              <div className="mb-3">
+                <span className="text-xs font-semibold text-white/90">
+                  Quick Start
+                </span>
+              </div>
+              <ol className="space-y-2 text-xs leading-relaxed text-white/90">
+                <li className="flex items-start gap-2">
+                  <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white/10 text-[10px] font-bold text-white/70">
+                    1
+                  </span>
+                  <span>Open Nova Wallet app on your mobile device</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white/10 text-[10px] font-bold text-white/70">
+                    2
+                  </span>
+                  <span>Navigate to "Browser" on the bottom menu</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white/10 text-[10px] font-bold text-white/70">
+                    3
+                  </span>
+                  <span>Search for and select "Zeitgeist"</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white/10 text-[10px] font-bold text-white/70">
+                    4
+                  </span>
+                  <span>
+                    Press "Connect Wallet" and allow access when prompted
+                  </span>
+                </li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      );
+    }
+    // On desktop, show simple "Not connected" message
     return (
       <div className="flex flex-col items-center justify-center py-8">
         <p className="text-base text-white/70">Not connected</p>
diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx
index 4525b9599..99404c582 100644
--- a/components/ui/Footer.tsx
+++ b/components/ui/Footer.tsx
@@ -40,7 +40,7 @@ const FooterNewsletterSub: FC<{ title: string }> = ({ title }) => {
       <div className="mb-auto flex h-10 w-full items-center gap-3">
         <Input
           {...register("email", { required: true, pattern: /^\S+@\S+$/i })}
-          className={`h-full grow rounded-md bg-white/10 p-2 text-ztg-12-120 text-white/90 backdrop-blur-sm placeholder:text-white/90/60 focus:bg-white/15 focus:outline-none ${
+          className={`h-full grow rounded-md bg-white/10 p-2 text-ztg-12-120 text-white/90 backdrop-blur-sm placeholder:text-white/90 focus:bg-white/15 focus:outline-none ${
             invalid ? "border-r-2ed-500/60" : ""
           }`}
           type="email"
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index 6ef302174..c5c40bc14 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 type InputProps = {} & React.InputHTMLAttributes<HTMLInputElement>;
 
 const defaultClassName =
-  "rounded-lg outline-none items-center text-white/90 placeholder:text-white/90/60 backdrop-blur-sm transition-all";
+  "rounded-lg outline-none items-center text-white/90 placeholder:text-white/90 backdrop-blur-sm transition-all";
 
 const Input = React.forwardRef<HTMLInputElement | null, InputProps>(
   (props, ref) => {
diff --git a/components/ui/Table.tsx b/components/ui/Table.tsx
index 8aaf14b66..a91df814d 100644
--- a/components/ui/Table.tsx
+++ b/components/ui/Table.tsx
@@ -532,7 +532,7 @@ const Table = ({
           {!loadingMore && rows.length === 0 ? (
             <div className="flex w-full flex-col items-center justify-center py-12">
               <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full border border-ztg-primary-200/20 bg-ztg-primary-900/30 backdrop-blur-sm">
-                <Inbox className="text-white/90/60" size={24} strokeWidth={1.5} />
+                <Inbox className="text-white/90" size={24} strokeWidth={1.5} />
               </div>
               <div className="text-sm font-medium text-white/90">
                 {noDataMessage}
diff --git a/components/ui/inputs.tsx b/components/ui/inputs.tsx
index f7e8cb461..c7dab7bd0 100644
--- a/components/ui/inputs.tsx
+++ b/components/ui/inputs.tsx
@@ -21,7 +21,7 @@ interface InputProps {
 }
 
 const inputClasses =
-  "bg-white/10 text-ztg-14-150 w-full rounded-lg h-ztg-40 p-ztg-8 focus:outline-none text-white/90 placeholder:text-white/90/60 backdrop-blur-sm transition-all focus:bg-white/15";
+  "bg-white/10 text-ztg-14-150 w-full rounded-lg h-ztg-40 p-ztg-8 focus:outline-none text-white/90 placeholder:text-white/90 backdrop-blur-sm transition-all focus:bg-white/15";
 const invalidClasses = "!border-ztg-red-500 !text-ztg-red-400";
 
 const Input: any = React.forwardRef<
diff --git a/components/web3wallet/index.tsx b/components/web3wallet/index.tsx
index eb117bd35..33b00e010 100644
--- a/components/web3wallet/index.tsx
+++ b/components/web3wallet/index.tsx
@@ -37,7 +37,7 @@ const Web3wallet = () => {
           <input
             type="text"
             placeholder="Enter email"
-            className="col-span-3 h-11 rounded-lg border-2 border-white/10 bg-white/10 px-3 py-2 text-sm text-white/90 shadow-sm backdrop-blur-sm transition-all placeholder:text-sm placeholder:text-white/90/60 focus:border-white/20 focus:bg-white/15 focus:outline-none sm:col-span-2"
+            className="col-span-3 h-11 rounded-lg border-2 border-white/10 bg-white/10 px-3 py-2 text-sm text-white/90 shadow-sm backdrop-blur-sm transition-all placeholder:text-sm placeholder:text-white/90 focus:border-white/20 focus:bg-white/15 focus:outline-none sm:col-span-2"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
diff --git a/lib/hooks/queries/usePoolStats.ts b/lib/hooks/queries/usePoolStats.ts
index 06f36835a..b53c7349d 100644
--- a/lib/hooks/queries/usePoolStats.ts
+++ b/lib/hooks/queries/usePoolStats.ts
@@ -12,18 +12,22 @@ export const usePoolStats = (
 ): UseQueryResult<PoolStats[]> => {
   const [sdk] = useSdkv2();
 
+  const isEnabled = Boolean(sdk && isIndexedSdk(sdk) && poolIds.length > 0);
+
   return useQuery(
-    [poolStatsRootQuery, id, poolIds],
+    [poolStatsRootQuery, id, ...poolIds],
     async () => {
       if (!isIndexedSdk(sdk)) return [];
       const poolStats = await getPoolStats(sdk.indexer.client as unknown as GraphQLClient, poolIds);
       return poolStats;
     },
     {
-      initialData: [],
-      refetchInterval: 5 * 60 * 1000,
-      refetchOnMount: false,
-      enabled: Boolean(sdk && poolIds.length > 0),
+      enabled: isEnabled,
+      refetchInterval: isEnabled ? 5 * 60 * 1000 : false,
+      refetchOnMount: "always", // Always refetch on mount, even if data exists
+      refetchOnWindowFocus: true,
+      staleTime: 10_000, // Consider data fresh for 10 seconds
+      cacheTime: 5 * 60 * 1000, // Keep in cache for 5 minutes
     },
   );
 };
\ No newline at end of file
diff --git a/pages/404.tsx b/pages/404.tsx
index 8182c5c21..05a323ffd 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -23,7 +23,7 @@ const NotFoundPage = ({
     <div className="flex min-h-[60vh] items-center justify-center py-16">
       <div className="flex w-full max-w-2xl flex-col items-center justify-center gap-6 rounded-lg border border-ztg-primary-200/30 bg-white/10 p-12 shadow-lg backdrop-blur-md">
         <div className="flex h-24 w-24 items-center justify-center rounded-full border border-ztg-primary-200/20 bg-ztg-primary-900/30 backdrop-blur-sm">
-          <AlertCircle className="text-white/90/60" size={48} strokeWidth={1.5} />
+          <AlertCircle className="text-white/90" size={48} strokeWidth={1.5} />
         </div>
         <div className="text-center">
           <h1 className="mb-3 text-4xl font-bold text-white/90">404</h1>
diff --git a/pages/api/referendum/[refId]/signal.ts b/pages/api/referendum/[refId]/signal.ts
index d25e973c7..17dcf0da0 100644
--- a/pages/api/referendum/[refId]/signal.ts
+++ b/pages/api/referendum/[refId]/signal.ts
@@ -6,6 +6,7 @@ import { sanity } from "lib/cms/sanity/index";
 import groq from "groq";
 import https from "https";
 import { ZTG } from "@zeitgeistpm/sdk";
+import { graphQlEndpoint } from "lib/constants";
 
 // GraphQL query to find markets and combinatorial pools tagged with OpenGov/referendum
 const referendumMarketsQuery = gql`
@@ -166,9 +167,8 @@ export default async function handler(
 
   try {
     // Initialize GraphQL client for Subsquid
-    // Use BSR endpoint for better SSL compatibility
-    const subsquidUrl = process.env.NEXT_PUBLIC_SUBSQUID_URL ||
-      "https://processor.bsr.zeitgeist.pm/graphql";
+    // Uses environment-based endpoint: mainnet for production, BSR for staging
+    const subsquidUrl = process.env.NEXT_PUBLIC_SUBSQUID_URL || graphQlEndpoint;
 
     // Create HTTPS agent for SSL handling
     // Development: disables SSL verification (allows self-signed certs)
diff --git a/pages/markets/[marketid].tsx b/pages/markets/[marketid].tsx
index 3674aa540..7bed95edd 100644
--- a/pages/markets/[marketid].tsx
+++ b/pages/markets/[marketid].tsx
@@ -1042,7 +1042,7 @@ const MobileContextButtons = ({
                   </div>
                 </>
               ) : (
-                <div className="center h-full w-full bg-white/10 text-white/90/60 shadow-md backdrop-blur-md">
+                <div className="center h-full w-full bg-white/10 text-white/90 shadow-md backdrop-blur-md">
                   Trading unavailable - No liquidity pool
                 </div>
               )
diff --git a/pages/referendum-signal/widget/[refId].tsx b/pages/referendum-signal/widget/[refId].tsx
index 4d876fa02..a9ae70455 100644
--- a/pages/referendum-signal/widget/[refId].tsx
+++ b/pages/referendum-signal/widget/[refId].tsx
@@ -261,7 +261,7 @@ const ReferendumSignalWidget = () => {
                 </div>
                 <ExternalLink
                   size={12}
-                  className="flex-shrink-0 text-white/90/60 transition-colors hover:text-white/90"
+                  className="flex-shrink-0 text-white/90 transition-colors hover:text-white/90"
                 />
               </div>
             </a>