Pulling refs/heads/staging into test-staging

components/account/WalletSelect.tsx

@@ -88,25 +88,25 @@ const WalletSelect = () => {
       <h3 className="mb-5 text-lg font-bold text-white">Connect Wallet</h3>
 
       {/* Social Login Section */}
-      <div className="mb-6">
+      {/* <div className="mb-6">
         <h4 className="mb-3 text-sm font-semibold text-white/90">
           Quick Connect
         </h4>
         <Web3wallet />
-      </div>
+      </div> */}
 
       {/* Divider */}
-      <div className="relative mb-6 flex items-center">
+      {/* <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/60">or</span>
         <div className="h-px flex-1 bg-white/10"></div>
-      </div>
+      </div> */}
 
       {/* Crypto Wallets Section */}
       <div>
-        <h4 className="mb-4 text-sm font-semibold text-white/90">
+        {/* <h4 className="mb-4 text-sm font-semibold text-white/90">
           {hasInstalledWallets ? "Browser Extension" : "Install Extension"}
-        </h4>
+        </h4> */}
         {isMobileDevice ? (
           <div className="w-full space-y-3">
             <Link
@@ -165,7 +165,8 @@ const WalletSelect = () => {
             </div>
           </div>
         ) : (
-          <div className="grid grid-cols-3 gap-3">
+          // <div className="grid grid-cols-3 gap-3">
+          <div className="flex flex-col gap-3">
             {supportedWallets
               .filter((w) => w.extensionName !== "web3auth")
               .map((wallet) => {

components/create/editor/inputs/answers/Categorical.tsx

@@ -97,10 +97,18 @@ export const CategoricalAnswersInput = ({
     const { active, over } = event;
 
     if (over && active.id !== over.id) {
-      const oldIndex = value?.answers.findIndex((v) => v === active.id);
-      const newIndex = value?.answers.findIndex((v) => v === over.id);
+      // Extract index from id (format: "answer-0", "answer-1", etc.)
+      const getIndexFromId = (id: string | number) => {
+        if (typeof id === "string" && id.startsWith("answer-")) {
+          return parseInt(id.replace("answer-", ""), 10);
+        }
+        return -1;
+      };
 
-      if (!oldIndex || !newIndex || !value?.answers) return;
+      const oldIndex = getIndexFromId(active.id);
+      const newIndex = getIndexFromId(over.id);
+
+      if (oldIndex === -1 || newIndex === -1 || !value?.answers) return;
 
       onChange?.({
         type: "change",
@@ -133,15 +141,15 @@ export const CategoricalAnswersInput = ({
       >
         <div className="flex flex-wrap items-center gap-2">
           <SortableContext
-            items={value?.answers as string[]}
+            items={value?.answers.map((_, index) => `answer-${index}`) ?? []}
             strategy={verticalListSortingStrategy}
             disabled={draggingDisabled}
           >
             {value?.answers.map((answer: string, index: number) => {
               return (
                 <AnswerInput
-                  key={answer}
-                  id={answer}
+                  key={`answer-${index}`}
+                  id={`answer-${index}`}
                   disabled={disabled ?? false}
                   value={answer}
                   onChange={handleChange(index, onChange)}

components/markets/MarketContextActionOutcomeSelector.tsx

@@ -69,7 +69,12 @@ const MarketContextActionOutcomeSelector = ({
             color = combination.color || colors[index];
             assetIndex = index; // Use current position for combinatorial with outcomeCombinations
           } else {
+            // Combination not found - fall back to market.categories
             assetIndex = index;
+            const marketCategory = market?.categories?.[assetIndex];
+            category = marketCategory
+              ? { name: marketCategory.name || "" }
+              : null;
           }
         } else {
           // For combinatorial tokens without outcomeCombinations, use the index directly
@@ -289,7 +294,7 @@ const MarketContextActionOutcomeSelector = ({
                 static
                 className="no-scroll-bar flex-1 overflow-y-scroll px-3 py-3 md:max-h-[300px]"
               >
-                {(searchResults ?? assetOptions)?.map((option, index) => {
+                {(searchResults ?? assetOptions)?.map((option) => {
                   return (
                     <Listbox.Option
                       key={option.assetIndex}

components/markets/MarketFavoriteToggle.tsx

@@ -9,21 +9,33 @@ export const MarketFavoriteToggle = ({
   size?: number;
 }) => {
   const { add, remove, isFavorite } = useFavoriteMarketsStorage();
+  const favorited = isFavorite(marketId);
 
   return (
-    <div
-      className="ztg-transition relative inline-block transition-transform duration-200 active:scale-150"
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        isFavorite(marketId) ? remove(marketId) : add(marketId);
-      }}
-    >
-      {isFavorite(marketId) ? (
-        <MdFavorite className="text-red-600" size={size ?? 16} />
-      ) : (
-        <MdFavoriteBorder className="text-gray-400" size={size ?? 16} />
-      )}
+    <div className="group relative">
+      <div
+        className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded-lg backdrop-blur-sm transition-all hover:scale-110 hover:opacity-95 hover:shadow-md ${
+          favorited
+            ? "bg-red-100/80 hover:bg-red-200/80"
+            : "bg-gray-100/60 hover:bg-gray-200/60"
+        }`}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          favorited ? remove(marketId) : add(marketId);
+        }}
+      >
+        {favorited ? (
+          <MdFavorite className="text-red-600" size={size ?? 14} />
+        ) : (
+          <MdFavoriteBorder className="text-gray-500" size={size ?? 14} />
+        )}
+      </div>
+      <div className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 -translate-x-1/2 whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100">
+        <div className="rounded-md bg-gray-900 px-2 py-1 text-xs text-white shadow-lg">
+          {favorited ? "Remove from favorites" : "Add to favorites"}
+        </div>
+      </div>
     </div>
   );
 };

components/markets/MarketHeaderUtils.tsx

@@ -55,7 +55,7 @@ export const CompactCreatorBadge: FC<{ address: string }> = ({ address }) => {
         </div>
       </Link>
       <div className="pointer-events-none absolute bottom-full left-0 z-10 mb-1 whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100">
-        <div className="rounded-md bg-gray-900 px-2 py-1 text-xs text-white shadow-lg">
+        <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-2 py-1 text-xs text-white shadow-lg backdrop-blur-md">
           <div className="mb-0.5 font-medium">Creator</div>
           <div className="font-mono text-xxs">{address}</div>
         </div>
@@ -77,7 +77,7 @@ export const CompactAddress: FC<{ address: string }> = ({ address }) => {
         <Avatar address={address} copy={false} size={18} />
         <span className="text-xs font-medium text-gray-800">{displayName}</span>
         <div className="absolute bottom-full left-1/2 z-10 mb-1 -translate-x-1/2 whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100">
-          <div className="rounded-md bg-gray-900 px-2 py-1 font-mono text-xs text-white shadow-lg">
+          <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-2 py-1 font-mono text-xs text-white shadow-lg backdrop-blur-md">
             {address}
           </div>
         </div>

components/markets/MarketMetadataBadges.tsx

@@ -13,13 +13,6 @@ const QuillViewer = dynamic(() => import("../../components/ui/QuillViewer"), {
   ssr: false,
 });
 
-const MarketFavoriteToggle = dynamic(
-  () => import("./MarketFavoriteToggle").then((m) => m.MarketFavoriteToggle),
-  {
-    ssr: false,
-  },
-);
-
 // Reusable icon badge with tooltip
 const IconBadge: FC<{
   icon: ReactNode;
@@ -44,7 +37,7 @@ const IconBadge: FC<{
       <div
         className={`pointer-events-none absolute bottom-full z-10 mb-1 whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100 ${tooltipPositionClasses[tooltipAlign]}`}
       >
-        <div className="rounded-md bg-gray-900 px-2 py-1 text-xs text-white shadow-lg">
+        <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-2 py-1 text-xs text-white shadow-lg backdrop-blur-md">
           {label ? (
             <>
               <div className="mb-0.5 font-medium">{label}</div>
@@ -158,18 +151,22 @@ export const MarketMetadataBadges: FC<MarketMetadataBadgesProps> = ({
             }
           >
             <div className="text-left">
-              <h4 className="mb-2 text-sm font-bold">Trusted Market</h4>
-              <div className="mb-3 text-xs text-gray-500">
+              <h4 className="mb-2 text-sm font-bold text-white">Trusted Market</h4>
+              <div className="mb-3 text-xs text-white/80">
                 {getDisputeMechanismDescription(market.disputeMechanism)}
               </div>
               <div className="flex flex-col gap-2">
                 <div>
-                  <span className="text-xs text-gray-500">Creator:</span>
-                  <CompactAddress address={market.creator} />
+                  <span className="text-xs text-white/70">Creator:</span>
+                  <div className="[&_span]:!text-white/90">
+                    <CompactAddress address={market.creator} />
+                  </div>
                 </div>
                 <div>
-                  <span className="text-xs text-gray-500">Oracle:</span>
-                  <CompactAddress address={market.oracle} />
+                  <span className="text-xs text-white/70">Oracle:</span>
+                  <div className="[&_span]:!text-white/90">
+                    <CompactAddress address={market.oracle} />
+                  </div>
                 </div>
               </div>
             </div>
@@ -189,28 +186,28 @@ export const MarketMetadataBadges: FC<MarketMetadataBadgesProps> = ({
             }
           >
             <div className="text-left">
-              <h4 className="mb-1 text-sm font-bold">Market Edited</h4>
-              <p className="mb-3 text-xs text-gray-500">
+              <h4 className="mb-1 text-sm font-bold text-white">Market Edited</h4>
+              <p className="mb-3 text-xs text-white/80">
                 Edited in CMS. Original immutable metadata shown below.
               </p>
 
               {market.originalMetadata?.question && (
                 <div className="mb-2">
-                  <label className="mb-1 text-xs font-semibold text-gray-700">
+                  <label className="mb-1 text-xs font-semibold text-white/90">
                     Original Question:
                   </label>
-                  <div className="text-xs text-gray-600">
+                  <div className="text-xs text-white/80">
                     {market.originalMetadata.question}
                   </div>
                 </div>
               )}
 
               {market.originalMetadata?.description && (
                 <div className="mb-2">
-                  <label className="mb-1 text-xs font-semibold text-gray-700">
+                  <label className="mb-1 text-xs font-semibold text-white/90">
                     Original Description:
                   </label>
-                  <div className="text-xs">
+                  <div className="text-xs text-white/80">
                     <QuillViewer value={market.originalMetadata.description} />
                   </div>
                 </div>
@@ -220,9 +217,6 @@ export const MarketMetadataBadges: FC<MarketMetadataBadgesProps> = ({
         </div>
       )}
 
-      {/* Favorite Toggle */}
-      <MarketFavoriteToggle size={14} marketId={market.marketId} />
-
       {promotionData && (
         <MarketPromotionCallout market={market} promotion={promotionData} />
       )}

components/markets/TradeResult.tsx

@@ -1,4 +1,5 @@
 import Decimal from "decimal.js";
+import { BsTwitterX } from "react-icons/bs";
 
 export const TwitterBird = () => {
   return (
@@ -62,37 +63,38 @@ const TradeResult = ({
       : `${twitterBaseUrl}I'm using %40ZeitgeistPM to bet on "${marketQuestion}" %0A%0ACheck out the market here%3A%0A&url=${marketUrl}`;
 
   return (
-    <div className="flex flex-col items-center gap-y-[10px] rounded-lg border border-ztg-green-500/40 bg-ztg-primary-900/60 p-[30px] shadow-lg shadow-ztg-green-500/10 backdrop-blur-md text-ztg-18-150">
-      <div className="text-ztg-primary-100">
+    <div className="flex flex-col items-center gap-y-4 rounded-lg border border-ztg-primary-200/30 p-5">
+      <div className="text-ztg-primary-100 text-sm">
         You've just {type === "buy" ? "bought" : "sold"}
       </div>
-      <div className="text-[58px] text-white font-bold">
+      <div className="text-5xl text-white font-bold">
         {amount?.toFixed(2)}
       </div>
       <div className="text-center text-ztg-primary-200">
         <span className="font-bold capitalize text-ztg-primary-100">
           {tokenName}
         </span>{" "}
-        Predictions for
-        <div className="font-bold text-ztg-primary-100">
+        for{" "} 
+        <span className="font-bold text-ztg-primary-100 mb-2">
           {baseTokenAmount?.toFixed(2)} {baseToken}
-        </div>
+        </span>
       </div>
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href={tweetUrl}
-        className="mb-4 transition-all hover:opacity-80"
-      >
-        <TwitterBird />
-      </a>
 
       <button
         onClick={onContinueClick}
-        className="rounded-md px-4 py-2 font-bold text-ztg-green-400 transition-all hover:bg-ztg-primary-700/30 active:scale-95"
+        className="rounded-md px-4 font-bold text-ztg-green-400 transition-all hover:bg-ztg-primary-700/30 active:scale-95"
       >
         Continue Trading
       </button>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={tweetUrl}
+        className="mb-2 text-sm transition-all hover:opacity-80 text-white flex items-center gap-2"
+      >
+        Share on
+        <BsTwitterX color="white" size={18}/>
+      </a>
     </div>
   );
 };

components/markets/market-card/MarketOrComboCard.tsx

@@ -14,17 +14,12 @@ import { ArrowDown, BarChart2, Droplet, Users } from "react-feather";
 import { parseAssetId } from "@zeitgeistpm/sdk";
 import { lookupAssetImagePath } from "lib/constants/foreign-asset";
 import SimpleImage from "components/ui/SimpleImage";
-import dynamic from "next/dynamic";
 import { useMarketSpotPrices } from "lib/hooks/queries/useMarketSpotPrices";
 import { useAmm2Pool } from "lib/hooks/queries/amm2/useAmm2Pool";
 import { createVirtualComboMarket } from "lib/utils/createVirtualComboMarket";
 import { useMarketImage } from "lib/hooks/useMarketImage";
 import { MarketBasicData } from "lib/gql/combo-pools";
 
-const MarketFavoriteToggle = dynamic(() => import("../MarketFavoriteToggle"), {
-  ssr: false,
-});
-
 // Component for individual market row in combo card (allows proper hook usage)
 const ComboMarketRow = ({
   market,
@@ -215,10 +210,6 @@ const ComboPoolCard = ({
           disableLink && "cursor-default"
         }`}
       >
-        <div className="absolute right-4 top-4">
-          {/* Note: Favorite toggle not implemented for combo pools yet */}
-        </div>
-
         {/* Header section with assume/then markets, unified in a single container */}
         <div className="flex min-w-0 flex-1 flex-col rounded-lg bg-white/5 p-2.5 backdrop-blur-sm">
           {sortedMarkets.map((market, index) => {

components/markets/market-card/index.tsx

@@ -19,14 +19,9 @@ import { useMarketCmsMetadata } from "lib/hooks/queries/cms/useMarketCmsMetadata
 import { useMarketImage } from "lib/hooks/useMarketImage";
 import { isMarketImageBase64Encoded } from "lib/types/create-market";
 import { isAbsoluteUrl } from "next/dist/shared/lib/utils";
-import dynamic from "next/dynamic";
 import SimpleImage from "components/ui/SimpleImage";
 import { getCurrentPrediction } from "lib/util/assets";
 
-const MarketFavoriteToggle = dynamic(() => import("../MarketFavoriteToggle"), {
-  ssr: false,
-});
-
 export interface MarketType {
   categorical?: string;
   scalar?: string[];
@@ -124,9 +119,6 @@ export const MarketCard = ({
           }`}
         >
           <div className="flex h-12 w-full gap-4 whitespace-normal">
-            <div className="absolute right-4 top-4">
-              <MarketFavoriteToggle marketId={marketId} />
-            </div>
             <div className="relative min-h-12 min-w-12 rounded-lg bg-white/5 backdrop-blur-sm">
               <SimpleImage
                 alt={"Market image"}