From dedc862da7ed882a829b3528a9b1318772283dba Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Thu, 29 Sep 2022 23:25:05 -0700
Subject: [PATCH] added removal of event listener

---
 web/components/bet-button.tsx            | 12 ++++++++++--
 web/components/play-money-disclaimer.tsx |  2 +-
 web/components/scroll-to-top-button.tsx  | 20 +++++++++++++-------
 web/pages/[username]/[contractSlug].tsx  |  3 ++-
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx
index 808b450f..038691be 100644
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@@ -17,6 +17,7 @@ import { BetSignUpPrompt } from './sign-up-prompt'
 import { User } from 'web/lib/firebase/users'
 import { SellRow } from './sell-row'
 import { useUnfilledBets } from 'web/hooks/use-bets'
+import { PlayMoneyDisclaimer } from './play-money-disclaimer'
 
 /** Button that opens BetPanel in a new modal */
 export default function BetButton(props: {
@@ -51,7 +52,9 @@ export default function BetButton(props: {
             Predict
           </Button>
         ) : (
-          <BetSignUpPrompt />
+          <>
+            <BetSignUpPrompt />
+          </>
         )}
 
         {user && (
@@ -85,7 +88,12 @@ export function BinaryMobileBetting(props: { contract: BinaryContract }) {
   if (user) {
     return <SignedInBinaryMobileBetting contract={contract} user={user} />
   } else {
-    return <BetSignUpPrompt className="w-full" />
+    return (
+      <Col className="w-full">
+        <BetSignUpPrompt className="w-full" />
+        <PlayMoneyDisclaimer />
+      </Col>
+    )
   }
 }
 
diff --git a/web/components/play-money-disclaimer.tsx b/web/components/play-money-disclaimer.tsx
index 860075d0..190d03db 100644
--- a/web/components/play-money-disclaimer.tsx
+++ b/web/components/play-money-disclaimer.tsx
@@ -3,7 +3,7 @@ import { InfoBox } from './info-box'
 export const PlayMoneyDisclaimer = () => (
   <InfoBox
     title="Play-money trading"
-    className="mt-4 max-w-md"
+    className="mt-4"
     text="Mana (M$) is the play-money used by our platform to keep track of your trades. It's completely free for you and your friends to get started!"
   />
 )
diff --git a/web/components/scroll-to-top-button.tsx b/web/components/scroll-to-top-button.tsx
index 07299feb..1e233f35 100644
--- a/web/components/scroll-to-top-button.tsx
+++ b/web/components/scroll-to-top-button.tsx
@@ -7,14 +7,20 @@ export function ScrollToTopButton(props: { className?: string }) {
   const { className } = props
   const [visible, setVisible] = useState(false)
 
+  const onScroll = () => {
+    if (window.scrollY > 500) {
+      setVisible(true)
+    } else {
+      setVisible(false)
+    }
+  }
+
   useEffect(() => {
-    window.addEventListener('scroll', () => {
-      if (window.scrollY > 500) {
-        setVisible(true)
-      } else {
-        setVisible(false)
-      }
-    })
+    window.addEventListener('scroll', onScroll)
+
+    return () => {
+      window.removeEventListener('scroll', onScroll)
+    }
   }, [])
 
   const scrollToTop = () => {
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 9b8b21cb..09d93564 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useState } from 'react'
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { ArrowLeftIcon } from '@heroicons/react/outline'
 import dayjs from 'dayjs'
 
@@ -46,6 +46,7 @@ import { BetsSummary } from 'web/components/bet-summary'
 import { listAllComments } from 'web/lib/firebase/comments'
 import { ContractComment } from 'common/comment'
 import { ScrollToTopButton } from 'web/components/scroll-to-top-button'
+import { VisibilityObserver } from 'web/components/visibility-observer'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {