Implemented initial prototype of new Twitch signup page.
This commit is contained in:
parent
95182957f5
commit
62c502c429
284
web/pages/twitch2.tsx
Normal file
284
web/pages/twitch2.tsx
Normal file
|
@ -0,0 +1,284 @@
|
||||||
|
import { MouseEventHandler, 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 { 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, getUserAndPrivateUser } from 'web/lib/firebase/users'
|
||||||
|
import { track } from 'web/lib/service/analytics'
|
||||||
|
import { linkTwitchAccountRedirect } from 'web/lib/twitch/link-twitch-account'
|
||||||
|
|
||||||
|
function TwitchPlaysManifoldMarkets(props: {
|
||||||
|
onStartedClick?: MouseEventHandler<any>
|
||||||
|
}) {
|
||||||
|
const { onStartedClick } = props
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row className="mb-4 items-end">
|
||||||
|
<img
|
||||||
|
src="/twitch-glitch.svg"
|
||||||
|
className="mb-[0.4rem] mr-2 inline h-10 w-10"
|
||||||
|
></img>
|
||||||
|
<Title
|
||||||
|
text={'Twitch plays Manifold Markets'}
|
||||||
|
className={'!-my-0 md:block'}
|
||||||
|
/>
|
||||||
|
</Row>
|
||||||
|
<Col className="gap-4">
|
||||||
|
<div>
|
||||||
|
Similar to Twitch channel point predictions, Manifold Markets allows
|
||||||
|
you to create and feature on stream any question you like with users
|
||||||
|
predicting to earn play money.
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
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.
|
||||||
|
</div>
|
||||||
|
Start playing now by logging in with Google and typing commands in chat!
|
||||||
|
<Button
|
||||||
|
size="xl"
|
||||||
|
color="gradient"
|
||||||
|
className="self-center !px-16"
|
||||||
|
onClick={onStartedClick}
|
||||||
|
>
|
||||||
|
Start playing
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
Instead of Twitch channel points we use our play money, mana (m$). All
|
||||||
|
viewers start with M$1000 and more can be earned for free and then{' '}
|
||||||
|
<p className="inline text-indigo-700 underline">
|
||||||
|
donated to a charity
|
||||||
|
</p>{' '}
|
||||||
|
of their choice at no cost!
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Subtitle(props: { text: string }) {
|
||||||
|
const { text } = props
|
||||||
|
return <div className="text-2xl">{text}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
function Command(props: { command: string; desc: string }) {
|
||||||
|
const { command, desc } = props
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p className="inline font-bold">{'!' + command}</p>
|
||||||
|
{' - '}
|
||||||
|
<p className="inline">{desc}</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TwitchChatCommands() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Title text={'Twitch Chat Commands'} className={'md:block'} />
|
||||||
|
<Col className="gap-4">
|
||||||
|
<Subtitle text="For Chat" />
|
||||||
|
<Command command="bet yes#" desc="Bets a # of Mana on yes." />
|
||||||
|
<Command command="bet no#" desc="Bets a # of Mana on no." />
|
||||||
|
<Command
|
||||||
|
command="sell"
|
||||||
|
desc="Sells all shares you own. Using this command causes you to
|
||||||
|
cash out early before the market resolves. This could be profitable
|
||||||
|
(if the probability has moved towards the direction you bet) or cause
|
||||||
|
a loss, although at least you keep some Mana. For maximum profit (but
|
||||||
|
also risk) it is better to not sell and wait for a favourable
|
||||||
|
resolution."
|
||||||
|
/>
|
||||||
|
<Command command="balance" desc="Shows how much Mana you own." />
|
||||||
|
<Command command="allin yes" desc="Bets your entire balance on yes." />
|
||||||
|
<Command command="allin no" desc="Bets your entire balance on no." />
|
||||||
|
|
||||||
|
<Subtitle text="For Mods/Streamer" />
|
||||||
|
<Command
|
||||||
|
command="create <question>"
|
||||||
|
desc="Creates and features the question. Be careful... this will override any question that is currently featured."
|
||||||
|
/>
|
||||||
|
<Command command="resolve yes" desc="Resolves the market as 'Yes'." />
|
||||||
|
<Command command="resolve no" desc="Resolves the market as 'No'." />
|
||||||
|
<Command
|
||||||
|
command="resolve n/a"
|
||||||
|
desc="Resolves the market as 'N/A' and refunds everyone their Mana."
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function BotSetupStep(props: {
|
||||||
|
stepNum: number
|
||||||
|
buttonName: string
|
||||||
|
text: string
|
||||||
|
}) {
|
||||||
|
const { stepNum, buttonName, text } = props
|
||||||
|
return (
|
||||||
|
<Col className="flex-1">
|
||||||
|
<Button color="green">{buttonName}</Button>
|
||||||
|
<Spacer h={4} />
|
||||||
|
<div>
|
||||||
|
<p className="inline font-bold">Step {stepNum}. </p>
|
||||||
|
{text}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SetUpBot() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Title
|
||||||
|
text={'Set up the bot for your own stream'}
|
||||||
|
className={'!mb-4 md:block'}
|
||||||
|
/>
|
||||||
|
<Col className="gap-4">
|
||||||
|
<img
|
||||||
|
src="https://raw.githubusercontent.com/PhilBladen/ManifoldTwitchIntegration/master/docs/OBS.png"
|
||||||
|
className="!-my-2"
|
||||||
|
></img>
|
||||||
|
To add the bot to your stream make sure you have logged in then follow
|
||||||
|
the steps below.
|
||||||
|
<div className="flex flex-col gap-6 sm:flex-row">
|
||||||
|
<BotSetupStep
|
||||||
|
stepNum={1}
|
||||||
|
buttonName="Add bot to channel"
|
||||||
|
text="Use the button above to add the bot to your channel. Then mod it by typing in your Twitch chat: /mod ManifoldBot (or whatever you named the bot) If the bot is modded it will not work properly on the backend."
|
||||||
|
/>
|
||||||
|
<BotSetupStep
|
||||||
|
stepNum={2}
|
||||||
|
buttonName="Overlay link"
|
||||||
|
text="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."
|
||||||
|
/>
|
||||||
|
<BotSetupStep
|
||||||
|
stepNum={3}
|
||||||
|
buttonName="Control dock link"
|
||||||
|
text="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."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TwitchLandingPage() {
|
||||||
|
useSaveReferral()
|
||||||
|
useTracking('view twitch landing page')
|
||||||
|
|
||||||
|
const user = useUser()
|
||||||
|
const privateUser = usePrivateUser()
|
||||||
|
const twitchUser = privateUser?.twitchInfo?.twitchName
|
||||||
|
|
||||||
|
const callback =
|
||||||
|
user && privateUser
|
||||||
|
? () => linkTwitchAccountRedirect(user, privateUser)
|
||||||
|
: async () => {
|
||||||
|
const result = await firebaseLogin()
|
||||||
|
|
||||||
|
const userId = result.user.uid
|
||||||
|
const { user, privateUser } = await getUserAndPrivateUser(userId)
|
||||||
|
if (!user || !privateUser) return
|
||||||
|
|
||||||
|
await linkTwitchAccountRedirect(user, privateUser)
|
||||||
|
}
|
||||||
|
|
||||||
|
const [isLoading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
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.')
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page>
|
||||||
|
<SEO
|
||||||
|
title="Manifold Markets on Twitch"
|
||||||
|
description="Get more out of Twitch with play-money betting markets."
|
||||||
|
/>
|
||||||
|
<div className="px-4 pt-2 md:mt-0 lg:hidden">
|
||||||
|
<ManifoldLogo />
|
||||||
|
</div>
|
||||||
|
{/* <Col className="items-center">
|
||||||
|
<Col className="max-w-3xl">
|
||||||
|
<Col className="mb-6 rounded-xl sm:m-12 sm:mt-0">
|
||||||
|
<Row className="self-center">
|
||||||
|
<img height={200} width={200} src="/twitch-logo.png" />
|
||||||
|
<img height={200} width={200} src="/flappy-logo.gif" />
|
||||||
|
</Row>
|
||||||
|
<div className="m-4 max-w-[550px] self-center">
|
||||||
|
<h1 className="text-3xl sm:text-6xl xl:text-6xl">
|
||||||
|
<div className="font-semibold sm:mb-2">
|
||||||
|
<span className="bg-gradient-to-r from-indigo-500 to-blue-500 bg-clip-text font-bold text-transparent">
|
||||||
|
Bet
|
||||||
|
</span>{' '}
|
||||||
|
on your favorite streams
|
||||||
|
</div>
|
||||||
|
</h1>
|
||||||
|
<Spacer h={6} />
|
||||||
|
<div className="mb-4 px-2 ">
|
||||||
|
Get more out of Twitch with play-money betting markets.{' '}
|
||||||
|
{!twitchUser &&
|
||||||
|
'Click the button below to link your Twitch account.'}
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Spacer h={6} />
|
||||||
|
|
||||||
|
{twitchUser ? (
|
||||||
|
<div className="mt-3 self-center rounded-lg bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 p-4 ">
|
||||||
|
<div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
|
||||||
|
<div className="truncate text-sm font-medium text-gray-500">
|
||||||
|
Twitch account linked
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 text-2xl font-semibold text-gray-900">
|
||||||
|
{twitchUser}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : isLoading ? (
|
||||||
|
<LoadingIndicator spinnerClassName="!w-16 !h-16" />
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
size="2xl"
|
||||||
|
color="gradient"
|
||||||
|
className="self-center"
|
||||||
|
onClick={getStarted}
|
||||||
|
>
|
||||||
|
Get started
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Col>
|
||||||
|
</Col>
|
||||||
|
</Col> */}
|
||||||
|
|
||||||
|
<Col className="max-w-3xl rounded bg-white p-10 shadow-md sm:mx-auto">
|
||||||
|
<TwitchPlaysManifoldMarkets onStartedClick={getStarted} />
|
||||||
|
<TwitchChatCommands />
|
||||||
|
<SetUpBot />
|
||||||
|
</Col>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
}
|
21
web/public/twitch-glitch.svg
Normal file
21
web/public/twitch-glitch.svg
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#FFFFFF;}
|
||||||
|
.st1{fill:#9146FF;}
|
||||||
|
</style>
|
||||||
|
<title>Asset 2</title>
|
||||||
|
<g>
|
||||||
|
<polygon class="st0" points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200 "/>
|
||||||
|
<g>
|
||||||
|
<g id="Layer_1-2">
|
||||||
|
<path class="st1" d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600
|
||||||
|
V1300z"/>
|
||||||
|
<rect x="1700" y="550" class="st1" width="200" height="600"/>
|
||||||
|
<rect x="1150" y="550" class="st1" width="200" height="600"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 890 B |
Loading…
Reference in New Issue
Block a user