Update twomba toggle

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>

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
@@ -153,27 +154,15 @@ 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 && (
-          <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">
           <button
             key="score"
@@ -314,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}

web/components/twomba/twomba-toggle.tsx

@@ -3,8 +3,30 @@ import { ManaFlatCoin } from 'web/public/custom-components/manaFlatCoin'
 import { SweepiesFlatCoin } from 'web/public/custom-components/sweepiesFlatCoin'
 import { useSweepstakes } from 'web/components/sweestakes-context'
 
-export function TwombaToggle() {
-  const { isPlay, setIsPlay } = useSweepstakes()
+export function TwombaToggle({
+  sweepsEnabled = false,
+  isPlay: isPlayProp,
+  onClick,
+}: {
+  sweepsEnabled?: boolean
+  isPlay?: boolean
+  onClick?: () => void
+}) {
+  const { isPlay: contextIsPlay, setIsPlay: contextSetIsPlay } =
+    useSweepstakes()
+  const isPlay = isPlayProp !== undefined ? isPlayProp : contextIsPlay
+
+  const handleClick = () => {
+    if (sweepsEnabled) {
+      if (onClick) {
+        onClick()
+      } else {
+        contextSetIsPlay(!isPlay)
+      }
+    }
+  }
+
+  const SweepiesCoin = sweepsEnabled ? SweepiesFlatCoin : SweepiesFlatCoinX
 
   return (
     <button
@@ -31,10 +53,35 @@ export function TwombaToggle() {
       />
       <SweepiesFlatCoin
         className={clsx(
-          'z-10 h-8 transition-opacity',
-          !isPlay ? 'opacity-100' : 'opacity-20'
+          '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',
+          sweepsEnabled ? '' : 'cursor-not-allowed border-gray-400 dark:border-gray-400 opacity-60' // Greys out the button when disabled
         )}
-      />
-    </button>
+        onClick={handleClick}
+      >
+        <div
+          className={clsx(
+            'dark:bg-ink-300 bg-canvas-0 absolute h-[28px] w-[28px] rounded-full drop-shadow transition-all',
+            isPlay ? 'left-0' : 'left-[calc(100%-28px)]'
+          )}
+        />
+        <ManaFlatCoin
+          className={clsx(
+            'z-10 h-8 transition-opacity',
+            isPlay ? 'opacity-100' : 'opacity-20',
+            sweepsEnabled ? '' : 'filter grayscale'
+          )}
+        />
+        <SweepiesCoin
+          className={clsx(
+            'z-10 h-8 transition-opacity',
+            !isPlay ? 'opacity-100' : 'opacity-20',
+            sweepsEnabled ? '' : 'filter grayscale'
+          )}
+        />
+      </button>
+    </Tooltip>
   )
 }

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}