From a219680701c6d8121f5df2cff4ce6caa8a2fb29b Mon Sep 17 00:00:00 2001
From: ingawei <46611122+ingawei@users.noreply.github.com>
Date: Fri, 30 Sep 2022 15:16:27 -0500
Subject: [PATCH] Inga/scroll to top (#965)
- adding scroll to top button for markets, removing predict button at the bottom of comments
---
web/components/bet-button.tsx | 8 +++-
web/components/play-money-disclaimer.tsx | 2 +-
web/components/scroll-to-top-button.tsx | 47 ++++++++++++++++++++++++
web/pages/[username]/[contractSlug].tsx | 22 +----------
4 files changed, 57 insertions(+), 22 deletions(-)
create mode 100644 web/components/scroll-to-top-button.tsx
diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx
index 808b450f..3c401767 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: {
@@ -85,7 +86,12 @@ export function BinaryMobileBetting(props: { contract: BinaryContract }) {
if (user) {
return
} else {
- return
+ return (
+
+
+
+
+ )
}
}
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 = () => (
)
diff --git a/web/components/scroll-to-top-button.tsx b/web/components/scroll-to-top-button.tsx
new file mode 100644
index 00000000..18eb525c
--- /dev/null
+++ b/web/components/scroll-to-top-button.tsx
@@ -0,0 +1,47 @@
+import { ArrowUpIcon } from '@heroicons/react/solid'
+import clsx from 'clsx'
+import { useEffect, useState } from 'react'
+import { Row } from './layout/row'
+
+export function ScrollToTopButton(props: { className?: string }) {
+ const { className } = props
+ const [visible, setVisible] = useState(false)
+
+ useEffect(() => {
+ const onScroll = () => {
+ if (window.scrollY > 500) {
+ setVisible(true)
+ } else {
+ setVisible(false)
+ }
+ }
+ window.addEventListener('scroll', onScroll, { passive: true })
+
+ return () => {
+ window.removeEventListener('scroll', onScroll)
+ }
+ }, [])
+
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ })
+ }
+
+ return (
+
+ )
+}
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 93b53447..9b8b21cb 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -42,12 +42,10 @@ import { ContractsGrid } from 'web/components/contract/contracts-grid'
import { Title } from 'web/components/title'
import { usePrefetch } from 'web/hooks/use-prefetch'
import { useAdmin } from 'web/hooks/use-admin'
-import { BetSignUpPrompt } from 'web/components/sign-up-prompt'
-import { PlayMoneyDisclaimer } from 'web/components/play-money-disclaimer'
-import BetButton from 'web/components/bet-button'
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'
export const getStaticProps = fromPropz(getStaticPropz)
export async function getStaticPropz(props: {
@@ -210,7 +208,6 @@ export function ContractPageContent(
{showConfetti && (
)}
-
{ogCardProps && (
)}
-
{backToHome && (
-
- {!user ? (
-
-
-
-
- ) : (
- outcomeType === 'BINARY' &&
- allowTrade && (
-
- )
- )}
+
)
}