From cb3662de90569dda6e9d27c0daf36ab3de2af5e8 Mon Sep 17 00:00:00 2001 From: Phil Date: Thu, 15 Sep 2022 16:58:12 +0100 Subject: [PATCH] Twitch account linking functional. --- web/pages/twitch.tsx | 135 ++++++++++++++++++++++++++----------------- 1 file changed, 82 insertions(+), 53 deletions(-) diff --git a/web/pages/twitch.tsx b/web/pages/twitch.tsx index e71d49db..10364f52 100644 --- a/web/pages/twitch.tsx +++ b/web/pages/twitch.tsx @@ -1,10 +1,12 @@ -import { MouseEventHandler, useState } from 'react' +import { PrivateUser, User } from 'common/user' +import { 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' @@ -17,9 +19,42 @@ import { track } from 'web/lib/service/analytics' import { linkTwitchAccountRedirect } from 'web/lib/twitch/link-twitch-account' function TwitchPlaysManifoldMarkets(props: { - onStartedClick?: MouseEventHandler + user?: User | null + privateUser?: PrivateUser | null }) { - const { onStartedClick } = props + const { user, privateUser } = props + + const twitchUser = privateUser?.twitchInfo?.twitchName + + const [isLoading, setLoading] = useState(false) + + 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 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 ( <> @@ -46,20 +81,28 @@ function TwitchPlaysManifoldMarkets(props: { receive their profit. Start playing now by logging in with Google and typing commands in chat! - + {twitchUser ? ( + + ) : isLoading ? ( + + ) : ( + + )}
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{' '} -

+ donated to a charity -

{' '} + {' '} of their choice at no cost!
@@ -122,14 +165,18 @@ function TwitchChatCommands() { function BotSetupStep(props: { stepNum: number - buttonName: string + buttonName?: string text: string }) { const { stepNum, buttonName, text } = props return ( - - + {buttonName && ( + <> + + + + )}

Step {stepNum}.

{text} @@ -138,7 +185,9 @@ function BotSetupStep(props: { ) } -function SetUpBot() { +function SetUpBot(props: { privateUser?: PrivateUser | null }) { + const { privateUser } = props + const twitchLinked = privateUser?.twitchInfo?.twitchName return ( <> </img> To add the bot to your stream make sure you have logged in then follow the steps below. + {!twitchLinked && ( + <Button + size="xl" + color="gradient" + className="self-center !px-16" + // onClick={getStarted} + > + Start playing + </Button> + )} <div className="flex flex-col gap-6 sm:flex-row"> <BotSetupStep stepNum={1} - buttonName="Add bot to channel" + buttonName={twitchLinked && '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" + buttonName={twitchLinked && '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" + buttonName={twitchLinked && '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> @@ -180,36 +239,6 @@ export default function TwitchLandingPage() { 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> @@ -274,10 +303,10 @@ export default function TwitchLandingPage() { </Col> </Col> */} - <Col className="max-w-3xl rounded bg-white p-10 shadow-md sm:mx-auto"> - <TwitchPlaysManifoldMarkets onStartedClick={getStarted} /> + <Col className="max-w-3xl rounded bg-white p-10 text-gray-600 shadow-md sm:mx-auto"> + <TwitchPlaysManifoldMarkets user={user} privateUser={privateUser} /> <TwitchChatCommands /> - <SetUpBot /> + <SetUpBot privateUser={privateUser} /> </Col> </Page> )