From 2666983f8311e88a4a5757053f0d7d8e0b003067 Mon Sep 17 00:00:00 2001
From: David Chee <d4vidchee@gmail.com>
Date: Thu, 26 Sep 2024 12:55:19 -0700
Subject: [PATCH 1/3] fix politics and portfolio twomba toggle

---
 web/components/portfolio/twomba-portfolio-value-section.tsx | 2 +-
 web/components/us-elections/contracts/politics-card.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/portfolio/twomba-portfolio-value-section.tsx b/web/components/portfolio/twomba-portfolio-value-section.tsx
index 24b6c83fb9..c34c04c24d 100644
--- a/web/components/portfolio/twomba-portfolio-value-section.tsx
+++ b/web/components/portfolio/twomba-portfolio-value-section.tsx
@@ -328,7 +328,7 @@ function TwombaPortfolioValueSkeleton(props: {
       <Col className={clsx('gap-2')}>
         <Row className="text-ink-800 w-full items-center justify-between text-xl font-semibold">
           Portfolio
-          <TwombaToggle />
+          <TwombaToggle sweepsEnabled={true} />
         </Row>
         <Col className="bg-canvas-0 w-full rounded-lg p-4">
           <Col>
diff --git a/web/components/us-elections/contracts/politics-card.tsx b/web/components/us-elections/contracts/politics-card.tsx
index 025fa1bcc7..5f92070ae8 100644
--- a/web/components/us-elections/contracts/politics-card.tsx
+++ b/web/components/us-elections/contracts/politics-card.tsx
@@ -128,7 +128,7 @@ export function PoliticsCard(props: {
           >
             {customTitle ?? contract.question}
           </Link>
-          {TWOMBA_ENABLED && <TwombaToggle />}
+          {TWOMBA_ENABLED && <TwombaToggle sweepsEnabled={true} />}
         </Row>
 
         {children}

From e9bbbc77615dd75103f844fc3c027da90ae975a7 Mon Sep 17 00:00:00 2001
From: David Chee <d4vidchee@gmail.com>
Date: Thu, 26 Sep 2024 13:07:18 -0700
Subject: [PATCH 2/3] add twombatoggle to browse

---
 web/components/search/contract-filters.tsx | 23 +++++++---------------
 web/components/twomba/twomba-toggle.tsx    | 17 +++++++++++++---
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/web/components/search/contract-filters.tsx b/web/components/search/contract-filters.tsx
index a178a3d28f..1cba69ad23 100644
--- a/web/components/search/contract-filters.tsx
+++ b/web/components/search/contract-filters.tsx
@@ -54,6 +54,7 @@ import { LiteGroup } from 'common/group'
 import { TWOMBA_ENABLED } from 'common/envs/constants'
 import { SweepiesCoin } from 'web/public/custom-components/sweepiesCoin'
 import { useSweepstakes } from '../sweestakes-context'
+import { TwombaToggle } from '../twomba/twomba-toggle'
 
 export function ContractFilters(props: {
   className?: string
@@ -158,23 +159,13 @@ export function ContractFilters(props: {
           <FaSliders className="h-4 w-4" />
         </IconButton>
         {TWOMBA_ENABLED && (
-          <FilterPill
-            selected={isSweeps}
-            onSelect={toggleSweepies}
-            type="sweepies"
-          >
-            <Row
-              className={clsx(
-                'items-center gap-1',
-                isSweeps ? 'opacity-100' : 'opacity-50'
-              )}
-            >
-              <SweepiesCoin />
-              Sweepstakes
-            </Row>
-          </FilterPill>
+          <TwombaToggle
+            sweepsEnabled={true}
+            isPlay={!isSweeps}
+            onClick={toggleSweepies}
+          />
         )}
-        <Row className="bg-ink-200 dark:bg-ink-300 items-center rounded-full">
+        <Row className="bg-ink-200 dark:bg-ink-300 items-center rounded-full ml-1">
           <button
             key="score"
             className={clsx(
diff --git a/web/components/twomba/twomba-toggle.tsx b/web/components/twomba/twomba-toggle.tsx
index 3955ace837..f554163418 100644
--- a/web/components/twomba/twomba-toggle.tsx
+++ b/web/components/twomba/twomba-toggle.tsx
@@ -7,18 +7,29 @@ import { Tooltip } from 'web/components/widgets/tooltip'
 
 export function TwombaToggle({
   sweepsEnabled = false,
+  isPlay: isPlayProp,
+  onClick,
 }: {
   sweepsEnabled?: boolean
+  isPlay?: boolean
+  onClick?: () => void
 }) {
-  const { isPlay, setIsPlay } = useSweepstakes()
-  const SweepiesCoin = sweepsEnabled ? SweepiesFlatCoin : SweepiesFlatCoinX
+  const { isPlay: contextIsPlay, setIsPlay: contextSetIsPlay } =
+    useSweepstakes()
+  const isPlay = isPlayProp !== undefined ? isPlayProp : contextIsPlay
 
   const handleClick = () => {
     if (sweepsEnabled) {
-      setIsPlay(!isPlay)
+      if (onClick) {
+        onClick()
+      } else {
+        contextSetIsPlay(!isPlay)
+      }
     }
   }
 
+  const SweepiesCoin = sweepsEnabled ? SweepiesFlatCoin : SweepiesFlatCoinX
+
   return (
     <Tooltip
       text={

From e4288865ed4c0b78984cd9ec6e8a7c7a5d7c9c0c Mon Sep 17 00:00:00 2001
From: David Chee <d4vidchee@gmail.com>
Date: Thu, 26 Sep 2024 13:31:02 -0700
Subject: [PATCH 3/3] visual improvements

---
 web/components/search/contract-filters.tsx | 11 ++++++-----
 web/components/twomba/twomba-toggle.tsx    |  9 ++++++---
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/components/search/contract-filters.tsx b/web/components/search/contract-filters.tsx
index 1cba69ad23..fb19ff6343 100644
--- a/web/components/search/contract-filters.tsx
+++ b/web/components/search/contract-filters.tsx
@@ -154,10 +154,7 @@ export function ContractFilters(props: {
   }
   return (
     <Col className={clsx('mb-1 mt-2 items-stretch gap-1 ', className)}>
-      <Carousel labelsParentClassName="-ml-1.5 gap-1 items-center">
-        <IconButton size="2xs" onClick={() => setOpenFilterModal(true)}>
-          <FaSliders className="h-4 w-4" />
-        </IconButton>
+      <Carousel labelsParentClassName="gap-1 items-center">
         {TWOMBA_ENABLED && (
           <TwombaToggle
             sweepsEnabled={true}
@@ -165,7 +162,8 @@ export function ContractFilters(props: {
             onClick={toggleSweepies}
           />
         )}
-        <Row className="bg-ink-200 dark:bg-ink-300 items-center rounded-full ml-1">
+
+        <Row className="bg-ink-200 dark:bg-ink-300 items-center rounded-full">
           <button
             key="score"
             className={clsx(
@@ -305,6 +303,9 @@ export function ContractFilters(props: {
             {getLabelFromValue(CONTRACT_TYPES, contractValue)}
           </FilterPill>
         ))}
+        <IconButton size="2xs" onClick={() => setOpenFilterModal(true)}>
+          <FaSliders className="h-4 w-4" />
+        </IconButton>
       </Carousel>
       <FilterModal
         open={openFilterModal}
diff --git a/web/components/twomba/twomba-toggle.tsx b/web/components/twomba/twomba-toggle.tsx
index f554163418..c2398e7a04 100644
--- a/web/components/twomba/twomba-toggle.tsx
+++ b/web/components/twomba/twomba-toggle.tsx
@@ -43,7 +43,8 @@ export function TwombaToggle({
           'bg-ink-200 dark:bg-canvas-50 relative flex h-fit w-fit shrink-0 flex-row items-center gap-1 rounded-full border-[1.5px] p-0.5 text-2xl transition-colors',
           isPlay
             ? 'border-violet-600 dark:border-violet-400'
-            : 'border-amber-500 dark:border-amber-200'
+            : 'border-amber-500 dark:border-amber-200',
+          sweepsEnabled ? '' : 'cursor-not-allowed border-gray-400 dark:border-gray-400 opacity-60' // Greys out the button when disabled
         )}
         onClick={handleClick}
       >
@@ -56,13 +57,15 @@ export function TwombaToggle({
         <ManaFlatCoin
           className={clsx(
             'z-10 h-8 transition-opacity',
-            isPlay ? 'opacity-100' : 'opacity-20'
+            isPlay ? 'opacity-100' : 'opacity-20',
+            sweepsEnabled ? '' : 'filter grayscale'
           )}
         />
         <SweepiesCoin
           className={clsx(
             'z-10 h-8 transition-opacity',
-            !isPlay ? 'opacity-100' : 'opacity-20'
+            !isPlay ? 'opacity-100' : 'opacity-20',
+            sweepsEnabled ? '' : 'filter grayscale'
           )}
         />
       </button>