Removed legacy non-redirect Twitch auth code. Added "add bot to channel" button in user profile and relevant data to user type.

common/user.ts

@@ -67,6 +67,7 @@ export type PrivateUser = {
   twitchInfo?: {
     twitchName: string
     controlToken: string
+    botEnabled?: boolean
   }
 }
 

web/components/profile/twitch-panel.tsx

@@ -1,22 +1,44 @@
 import clsx from 'clsx'
-import React, { useState } from 'react'
+import React, { MouseEventHandler, ReactNode, useState } from 'react'
 import toast from 'react-hot-toast'
 
 import { copyToClipboard } from 'web/lib/util/copy'
-import { linkTwitchAccount } from 'web/lib/twitch/link-twitch-account'
+import { linkTwitchAccountRedirect } from 'web/lib/twitch/link-twitch-account'
 import { LinkIcon } from '@heroicons/react/solid'
 import { track } from 'web/lib/service/analytics'
-import { Button } from './../button'
+import { Button, ColorType } from './../button'
 import { LoadingIndicator } from './../loading-indicator'
 import { Row } from './../layout/row'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
+import { updatePrivateUser } from 'web/lib/firebase/users'
+import { deleteField } from 'firebase/firestore'
+
+function BouncyButton(props: {
+  children: ReactNode
+  onClick?: MouseEventHandler<any>
+  color?: ColorType
+}) {
+  const { children, onClick, color } = props
+  return (
+    <Button
+      color={color}
+      size="lg"
+      onClick={onClick}
+      className="btn h-[inherit] flex-shrink-[inherit] border-none font-normal normal-case"
+    >
+      {children}
+    </Button>
+  )
+}
 
 export function TwitchPanel() {
   const user = useUser()
   const privateUser = usePrivateUser()
 
+  const twitchInfo = privateUser?.twitchInfo
   const twitchName = privateUser?.twitchInfo?.twitchName
   const twitchToken = privateUser?.twitchInfo?.controlToken
+  const twitchBotConnected = privateUser?.twitchInfo?.botEnabled
 
   const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
 
@@ -34,13 +56,20 @@ export function TwitchPanel() {
     })
   }
 
+  const updateBotConnected = (connected: boolean) => async () => {
+    if (user && twitchInfo) {
+      twitchInfo.botEnabled = connected
+      await updatePrivateUser(user.id, { twitchInfo })
+    }
+  }
+
   const [twitchLoading, setTwitchLoading] = useState(false)
 
   const createLink = async () => {
     if (!user || !privateUser) return
     setTwitchLoading(true)
 
-    const promise = linkTwitchAccount(user, privateUser)
+    const promise = linkTwitchAccountRedirect(user, privateUser)
     track('link twitch from profile')
     await promise
 
@@ -81,12 +110,21 @@ export function TwitchPanel() {
               )}
               data-tip="You must link your Twitch account first"
             >
-              <Button color="blue" size="lg" onClick={copyOverlayLink}>
+              <BouncyButton color="blue" onClick={copyOverlayLink}>
                 Copy overlay link
-              </Button>
-              <Button color="indigo" size="lg" onClick={copyDockLink}>
+              </BouncyButton>
+              <BouncyButton color="indigo" onClick={copyDockLink}>
                 Copy dock link
-              </Button>
+              </BouncyButton>
+              {twitchBotConnected ? (
+                <BouncyButton color="red" onClick={updateBotConnected(false)}>
+                  Remove bot from your channel
+                </BouncyButton>
+              ) : (
+                <BouncyButton color="green" onClick={updateBotConnected(true)}>
+                  Add bot to your channel
+                </BouncyButton>
+              )}
             </div>
           </div>
         </div>

web/lib/twitch/link-twitch-account.ts

@@ -29,20 +29,14 @@ export async function initLinkTwitchAccount(
   return [responseData.twitchAuthURL, responseFetch.then((r) => r.json())]
 }
 
-export async function linkTwitchAccount(user: User, privateUser: PrivateUser) {
+export async function linkTwitchAccountRedirect(
+  user: User,
+  privateUser: PrivateUser
+) {
   const apiKey = privateUser.apiKey ?? (await generateNewApiKey(user.id))
   if (!apiKey) throw new Error("Couldn't retrieve or create Manifold api key")
 
-  const [twitchAuthURL, linkSuccessPromise] = await initLinkTwitchAccount(
-    user.id,
-    apiKey
-  )
+  const [twitchAuthURL] = await initLinkTwitchAccount(user.id, apiKey)
 
-  console.log('opening twitch link', twitchAuthURL)
   window.location.href = twitchAuthURL
-
-  const twitchInfo = await linkSuccessPromise
-  await updatePrivateUser(user.id, { twitchInfo })
-
-  console.log(`Successfully linked Twitch account '${twitchInfo.twitchName}'`)
 }

web/pages/twitch.tsx

@@ -11,7 +11,7 @@ import { track } from 'web/lib/service/analytics'
 import { Row } from 'web/components/layout/row'
 import { Button } from 'web/components/button'
 import { useTracking } from 'web/hooks/use-tracking'
-import { linkTwitchAccount } from 'web/lib/twitch/link-twitch-account'
+import { linkTwitchAccountRedirect } from 'web/lib/twitch/link-twitch-account'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 import toast from 'react-hot-toast'
@@ -26,7 +26,7 @@ export default function TwitchLandingPage() {
 
   const callback =
     user && privateUser
-      ? () => linkTwitchAccount(user, privateUser)
+      ? () => linkTwitchAccountRedirect(user, privateUser)
       : async () => {
           const result = await firebaseLogin()
 
@@ -34,7 +34,7 @@ export default function TwitchLandingPage() {
           const { user, privateUser } = await getUserAndPrivateUser(userId)
           if (!user || !privateUser) return
 
-          await linkTwitchAccount(user, privateUser)
+          await linkTwitchAccountRedirect(user, privateUser)
         }
 
   const [isLoading, setLoading] = useState(false)
@@ -49,7 +49,6 @@ export default function TwitchLandingPage() {
     } catch (e) {
       console.error(e)
       toast.error('Failed to sign up. Please try again later.')
-    } finally {
       setLoading(false)
     }
   }