From 74d4db19cf6c3adc5137fc9891f217739eb5b28f Mon Sep 17 00:00:00 2001
From: David Chee <d4vidchee@gmail.com>
Date: Wed, 25 Sep 2024 15:33:39 -0700
Subject: [PATCH] Revert "Show twomba tooltip on all markets"

This reverts commit e48568fdcbc36340d11cb93fc7efde2381542f70.
---
 .../contract/twomba-header-actions.tsx        |  19 +--
 web/components/twomba/twomba-toggle.tsx       |  74 ++++-----
 web/public/SweepiesFlatX.svg                  | 141 ------------------
 .../custom-components/sweepiesFlatCoin.tsx    |   1 +
 .../custom-components/sweepiesFlatCoinX.tsx   |  17 ---
 5 files changed, 34 insertions(+), 218 deletions(-)
 delete mode 100644 web/public/SweepiesFlatX.svg
 delete mode 100644 web/public/custom-components/sweepiesFlatCoinX.tsx

diff --git a/web/components/contract/twomba-header-actions.tsx b/web/components/contract/twomba-header-actions.tsx
index 2e73f0cc63..9c517a05f6 100644
--- a/web/components/contract/twomba-header-actions.tsx
+++ b/web/components/contract/twomba-header-actions.tsx
@@ -249,21 +249,14 @@ export function TwombaHeaderActions(props: {
       : []),
   ]
 
-  const sweepsEnabled = !!playContract.siblingContractId
-
-  const isNonBetPollOrBountiedQuestion =
-    playContract.mechanism === 'none' &&
-    (playContract.outcomeType === 'POLL' ||
-      playContract.outcomeType === 'BOUNTIED_QUESTION')
-
   return (
+    // make tooltip children stretch
     <Row className="mr-4 shrink-0 items-center [&>*]:flex">
-      <div className="relative z-50">
-        {!isNonBetPollOrBountiedQuestion && (
-          <TwombaToggle sweepsEnabled={sweepsEnabled} />
-        )}
-      </div>
-
+      {!!currentContract.siblingContractId && (
+        <div className="relative">
+          <TwombaToggle />
+        </div>
+      )}
       {!playContract.coverImageUrl && isCreator && (
         <ChangeBannerButton
           contract={playContract}
diff --git a/web/components/twomba/twomba-toggle.tsx b/web/components/twomba/twomba-toggle.tsx
index 3955ace837..09375342f4 100644
--- a/web/components/twomba/twomba-toggle.tsx
+++ b/web/components/twomba/twomba-toggle.tsx
@@ -2,59 +2,39 @@ import clsx from 'clsx'
 import { ManaFlatCoin } from 'web/public/custom-components/manaFlatCoin'
 import { SweepiesFlatCoin } from 'web/public/custom-components/sweepiesFlatCoin'
 import { useSweepstakes } from 'web/components/sweestakes-context'
-import { SweepiesFlatCoinX } from 'web/public/custom-components/sweepiesFlatCoinX'
-import { Tooltip } from 'web/components/widgets/tooltip'
 
-export function TwombaToggle({
-  sweepsEnabled = false,
-}: {
-  sweepsEnabled?: boolean
-}) {
+export function TwombaToggle() {
   const { isPlay, setIsPlay } = useSweepstakes()
-  const SweepiesCoin = sweepsEnabled ? SweepiesFlatCoin : SweepiesFlatCoinX
-
-  const handleClick = () => {
-    if (sweepsEnabled) {
-      setIsPlay(!isPlay)
-    }
-  }
 
   return (
-    <Tooltip
-      text={
-        sweepsEnabled
-          ? null
-          : 'This question does not have sweepstakes enabled.'
-      }
+    <button
+      className={clsx(
+        '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'
+      )}
+      onClick={() => setIsPlay(!isPlay)}
     >
-      <button
+      {/* Add a moving circle behind the active coin */}
+      <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'
+        )}
+      />
+      <SweepiesFlatCoin
         className={clsx(
-          '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'
+          'z-10 h-8 transition-opacity',
+          !isPlay ? 'opacity-100' : 'opacity-20'
         )}
-        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'
-          )}
-        />
-        <SweepiesCoin
-          className={clsx(
-            'z-10 h-8 transition-opacity',
-            !isPlay ? 'opacity-100' : 'opacity-20'
-          )}
-        />
-      </button>
-    </Tooltip>
+      />
+    </button>
   )
 }
diff --git a/web/public/SweepiesFlatX.svg b/web/public/SweepiesFlatX.svg
deleted file mode 100644
index cd3490c30a..0000000000
--- a/web/public/SweepiesFlatX.svg
+++ /dev/null
@@ -1,141 +0,0 @@
-<svg
-  width="1500"
-  height="1500"
-  viewBox="0 0 1500 1500"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g clip-path="url(#clip0_2_3)">
-    <g filter="url(#filter0_d_2_3)">
-      <path
-        d="M750 1490.77C1159.12 1490.77 1490.77 1159.12 1490.77 750C1490.77 340.884 1159.12 9.22998 750 9.22998C340.884 9.22998 9.22998 340.884 9.22998 750C9.22998 1159.12 340.884 1490.77 750 1490.77Z"
-        fill="#FDD34E"
-      />
-      <path
-        d="M750 1345.86C1079.08 1345.86 1345.86 1079.08 1345.86 750C1345.86 420.916 1079.08 154.14 750 154.14C420.916 154.14 154.14 420.916 154.14 750C154.14 1079.08 420.916 1345.86 750 1345.86Z"
-        fill="#D97708"
-      />
-      <path
-        d="M757.87 1203.63C711.91 1203.63 669.92 1198.19 631.91 1187.35C593.9 1176.49 560.48 1161.45 531.66 1142.23C502.84 1123.02 479.03 1101.5 460.23 1077.7C441.43 1053.89 428.28 1029.04 420.77 1003.14L563.62 959.28C574.46 990.2 595.78 1017.35 627.52 1040.73C659.27 1064.13 698.52 1076.24 745.32 1077.08C799.61 1077.08 842.64 1065.81 874.39 1043.25C906.14 1020.69 922.01 991.03 922.01 954.27C922.01 920.85 908.63 893.5 881.9 872.19C855.17 850.9 819.25 834.39 774.14 822.69L666.37 795.12C625.42 784.28 588.46 768.4 555.47 747.52C522.48 726.64 496.58 700.31 477.78 668.57C458.98 636.82 449.59 599.23 449.59 555.78C449.59 473.92 476.31 410.21 529.77 364.67C583.24 319.14 659.68 296.37 759.1 296.37C815.06 296.37 864.14 304.94 906.33 322.06C948.51 339.2 983.38 362.58 1010.96 392.24C1038.53 421.9 1059.01 455.53 1072.38 493.12L932.02 538.22C919.48 504.82 897.76 477.24 866.85 455.52C835.94 433.8 797.51 422.94 751.57 422.94C705.63 422.94 666.56 434.23 639.42 456.77C612.26 479.33 598.69 510.67 598.69 550.76C598.69 583.34 609.33 608.61 630.64 626.57C651.93 644.53 680.96 658.11 717.73 667.3L825.5 693.62C904.03 712.85 965 745.84 1008.45 792.62C1051.89 839.4 1073.62 891.19 1073.62 947.99C1073.62 998.12 1061.49 1042.41 1037.27 1080.82C1013.05 1119.25 977.34 1149.32 930.13 1171.04C882.92 1192.76 825.5 1203.62 757.84 1203.62L757.87 1203.63Z"
-        fill="#FDD34E"
-      />
-    </g>
-    <mask
-      id="mask0_2_3"
-      style="mask-type: alpha"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="1500"
-      height="1500"
-    >
-      <path
-        d="M750 1490.77C1159.12 1490.77 1490.77 1159.12 1490.77 750C1490.77 340.884 1159.12 9.22998 750 9.22998C340.884 9.22998 9.22998 340.884 9.22998 750C9.22998 1159.12 340.884 1490.77 750 1490.77Z"
-        fill="#FDD34E"
-      />
-      <path
-        d="M750 1345.86C1079.08 1345.86 1345.86 1079.08 1345.86 750C1345.86 420.916 1079.08 154.14 750 154.14C420.916 154.14 154.14 420.916 154.14 750C154.14 1079.08 420.916 1345.86 750 1345.86Z"
-        fill="#D97708"
-      />
-      <path
-        d="M757.87 1203.63C711.91 1203.63 669.92 1198.19 631.91 1187.35C593.9 1176.49 560.48 1161.45 531.66 1142.23C502.84 1123.02 479.03 1101.5 460.23 1077.7C441.43 1053.89 428.28 1029.04 420.77 1003.14L563.62 959.28C574.46 990.2 595.78 1017.35 627.52 1040.73C659.27 1064.13 698.52 1076.24 745.32 1077.08C799.61 1077.08 842.64 1065.81 874.39 1043.25C906.14 1020.69 922.01 991.03 922.01 954.27C922.01 920.85 908.63 893.5 881.9 872.19C855.17 850.9 819.25 834.39 774.14 822.69L666.37 795.12C625.42 784.28 588.46 768.4 555.47 747.52C522.48 726.64 496.58 700.31 477.78 668.57C458.98 636.82 449.59 599.23 449.59 555.78C449.59 473.92 476.31 410.21 529.77 364.67C583.24 319.14 659.68 296.37 759.1 296.37C815.06 296.37 864.14 304.94 906.33 322.06C948.51 339.2 983.38 362.58 1010.96 392.24C1038.53 421.9 1059.01 455.53 1072.38 493.12L932.02 538.22C919.48 504.82 897.76 477.24 866.85 455.52C835.94 433.8 797.51 422.94 751.57 422.94C705.63 422.94 666.56 434.23 639.42 456.77C612.26 479.33 598.69 510.67 598.69 550.76C598.69 583.34 609.33 608.61 630.64 626.57C651.93 644.53 680.96 658.11 717.73 667.3L825.5 693.62C904.03 712.85 965 745.84 1008.45 792.62C1051.89 839.4 1073.62 891.19 1073.62 947.99C1073.62 998.12 1061.49 1042.41 1037.27 1080.82C1013.05 1119.25 977.34 1149.32 930.13 1171.04C882.92 1192.76 825.5 1203.62 757.84 1203.62L757.87 1203.63Z"
-        fill="#FDD34E"
-      />
-    </mask>
-    <g mask="url(#mask0_2_3)">
-      <g filter="url(#filter1_d_2_3)">
-        <line
-          x1="1695.5"
-          y1="-160.503"
-          x2="-266.502"
-          y2="1801.5"
-          stroke="#D10202"
-          stroke-width="140"
-        />
-        <line
-          x1="-266.503"
-          y1="-259.497"
-          x2="1695.5"
-          y2="1702.5"
-          stroke="#D10202"
-          stroke-width="140"
-        />
-      </g>
-    </g>
-  </g>
-  <defs>
-    <filter
-      id="filter0_d_2_3"
-      x="-4"
-      y="0"
-      width="1508"
-      height="1508"
-      filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB"
-    >
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix
-        in="SourceAlpha"
-        type="matrix"
-        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-        result="hardAlpha"
-      />
-      <feOffset dy="4" />
-      <feGaussianBlur stdDeviation="2" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix
-        type="matrix"
-        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-      />
-      <feBlend
-        mode="normal"
-        in2="BackgroundImageFix"
-        result="effect1_dropShadow_2_3"
-      />
-      <feBlend
-        mode="normal"
-        in="SourceGraphic"
-        in2="effect1_dropShadow_2_3"
-        result="shape"
-      />
-    </filter>
-    <filter
-      id="filter1_d_2_3"
-      x="-320"
-      y="-308.995"
-      width="2068.99"
-      height="2167.99"
-      filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB"
-    >
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix
-        in="SourceAlpha"
-        type="matrix"
-        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-        result="hardAlpha"
-      />
-      <feOffset dy="4" />
-      <feGaussianBlur stdDeviation="2" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix
-        type="matrix"
-        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-      />
-      <feBlend
-        mode="normal"
-        in2="BackgroundImageFix"
-        result="effect1_dropShadow_2_3"
-      />
-      <feBlend
-        mode="normal"
-        in="SourceGraphic"
-        in2="effect1_dropShadow_2_3"
-        result="shape"
-      />
-    </filter>
-    <clipPath id="clip0_2_3">
-      <rect width="1500" height="1500" fill="white" />
-    </clipPath>
-  </defs>
-</svg>
diff --git a/web/public/custom-components/sweepiesFlatCoin.tsx b/web/public/custom-components/sweepiesFlatCoin.tsx
index 34d23c3e56..da20764b12 100644
--- a/web/public/custom-components/sweepiesFlatCoin.tsx
+++ b/web/public/custom-components/sweepiesFlatCoin.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { ENV_CONFIG } from 'common/envs/constants'
+import Image from 'next/image'
 
 export function SweepiesFlatCoin(props: { className?: string }) {
   const { className } = props
diff --git a/web/public/custom-components/sweepiesFlatCoinX.tsx b/web/public/custom-components/sweepiesFlatCoinX.tsx
deleted file mode 100644
index 413051d266..0000000000
--- a/web/public/custom-components/sweepiesFlatCoinX.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import clsx from 'clsx'
-import { ENV_CONFIG } from 'common/envs/constants'
-
-export function SweepiesFlatCoinX(props: { className?: string }) {
-  const { className } = props
-  return (
-    <img
-      src="/SweepiesFlatX.svg"
-      alt={ENV_CONFIG.moneyMoniker}
-      className={clsx('inline-block', className)}
-      style={{
-        width: '1em',
-        height: '1em',
-      }}
-    />
-  )
-}