import { LinkIcon } from '@heroicons/react/solid'
import clsx from 'clsx'
import { PrivateUser, User } from 'common/user'
import { MouseEventHandler, ReactNode, useEffect, useState } from 'react'
import toast from 'react-hot-toast'
import { Button } from 'web/components/button'
import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row'
import { Spacer } from 'web/components/layout/spacer'
import { LoadingIndicator } from 'web/components/loading-indicator'
import { ManifoldLogo } from 'web/components/nav/manifold-logo'
import { Page } from 'web/components/page'
import { SEO } from 'web/components/SEO'
import { Title } from 'web/components/title'
import { useSaveReferral } from 'web/hooks/use-save-referral'
import { useTracking } from 'web/hooks/use-tracking'
import { usePrivateUser, useUser } from 'web/hooks/use-user'
import { firebaseLogin, updatePrivateUser } from 'web/lib/firebase/users'
import { track } from 'web/lib/service/analytics'
import {
getDockURLForUser,
getOverlayURLForUser,
linkTwitchAccountRedirect,
updateBotEnabledForUser,
} from 'web/lib/twitch/link-twitch-account'
import { copyToClipboard } from 'web/lib/util/copy'
function ButtonGetStarted(props: {
user?: User | null
privateUser?: PrivateUser | null
buttonClass?: string
spinnerClass?: string
}) {
const { user, privateUser, buttonClass, spinnerClass } = props
const [isLoading, setLoading] = useState(false)
const needsRelink =
privateUser?.twitchInfo?.twitchName &&
privateUser?.twitchInfo?.needsRelinking
const [waitingForUser, setWaitingForUser] = useState(false)
useEffect(() => {
if (waitingForUser && user && privateUser) {
setWaitingForUser(false)
if (privateUser.twitchInfo?.twitchName) return // If we've already linked Twitch, no need to do so again
setLoading(true)
linkTwitchAccountRedirect(user, privateUser).then(() => {
setLoading(false)
})
}
}, [user, privateUser, waitingForUser])
const callback =
user && privateUser
? () => linkTwitchAccountRedirect(user, privateUser)
: async () => {
await firebaseLogin()
setWaitingForUser(true)
}
const getStarted = async () => {
try {
setLoading(true)
const promise = callback()
track('twitch page button click')
await promise
} catch (e) {
console.error(e)
toast.error('Failed to sign up. Please try again later.')
} finally {
setLoading(false)
}
}
return isLoading ? (
) : (
)
}
function TwitchPlaysManifoldMarkets(props: {
user?: User | null
privateUser?: PrivateUser | null
}) {
const { user, privateUser } = props
const twitchInfo = privateUser?.twitchInfo
const twitchUser = twitchInfo?.twitchName
return (
Start betting on Twitch now by linking your account and typing commands
in chat!
{twitchUser && !twitchInfo.needsRelinking ? (
) : (
)}
Similar to Twitch channel point predictions, Manifold Markets allows
you to create a play-money betting market on any question you like and
feature it in your stream.
The key difference is that Manifold's questions function more like a
stock market and viewers can buy and sell shares over the course of
the event and not just at the start. The market will eventually
resolve to yes or no at which point the winning shareholders will
receive their profit.
Instead of Twitch channel points we use our own play money, mana (M$).
All viewers start with M$1,000 and can earn more for free by betting
well.
)
}
function Subtitle(props: { text: string }) {
const { text } = props
return
To add the bot to your stream make sure you have logged in then follow
the steps below.
{!twitchLinked && (
)}
}
>
Use the button above to add the bot to your channel. Then mod it by
typing in your Twitch chat: /mod ManifoldBot
If the bot is not modded it will not be able to respond to commands
properly.
Create a new browser source in your streaming software such as OBS.
Paste in the above link and resize it to your liking. We recommend
setting the size to 400x400.
The bot can be controlled entirely through chat. But we made an easy
to use control panel. Share the link with your mods or embed it into
your OBS as a custom dock.