Twitch Ext get Twitch username and use instead of opaque id

[jonwalch]

Copy Charmin flow. Button prompts opening of extension settings and clicking the share username thing.

These users show up as ttv/{TWITCH_USER_NAME} on our site and current bets boards It's not even their username. Its a long number that is static and represents them.

[jonwalch]

https://dev.twitch.tv/docs/extensions/reference#helper-extensions twitch.ext.actions.requestIdShare: function()

[jonwalch]

Twitch.ext.viewer.id

[jonwalch]

const [twitchID, setTwitchID] = useState<string | null>(twitch.viewer.id)

                <button
                    className="button button--vote"
                    style={{minWidth: "40%", margin: "0.25em", padding: "0.25rem"}}
                    type="button"
                    key="Test"
                    // disabled={toggleValid()}
                    onClick={() => {
                        // CORSMakePropBet(false)
                        if (process.env.NODE_ENV === 'development') {
                            setTwitchID("123456789")
                            console.log("set twitch id dev")
                        } else {
                            twitch.actions.requestIdShare()
                            console.log("set twitch id prod")
                        }
                    }}>
                    Open ID Menu
                </button>

// on page load useEffect()
        twitch.onAuthorized((auth: any) => {
            setTwitchID(twitch.viewer.id)
            console.log(auth)
        })

[jonwalch]

Rolling #398 into this https://dev.twitch.tv/docs/extensions/reference#helper-extensions twitch.ext.onVisibilityChanged

[jonwalch]

EDIT: Not doing this, requires a release everytime we want to change it

Also make streamer access whitelist:

Rillo
birdfood
akoozabazooka
whiplash_gg
jawbreakerplease
teamsp00ky
thecanadieneh

[jonwalch]

Also add check marks from main site to bet buttons