twitch default connector

README.md

@@ -136,7 +136,7 @@ The settings are described in more detailed in the Sequence Kit documentation.
       logoUrlLightMode: 'https://logo-light-mode.svg',
       projectName: 'my app',
       showEmailInput: true,
-      miniAuthOptions: ['google', 'discord', 'facebook', 'apple'],
+      miniAuthOptions: ['google', 'facebook', 'twitch', 'apple'],
       authOptions: ['metamask', 'wallet-connect'],
     };
     // limits the digital assets displayed on the assets summary screen

packages/connectors/src/connectors/index.ts

@@ -7,3 +7,4 @@ export * from './facebook'
 export * from './apple'
 export * from './email'
 export * from './discord'
+export * from './twitch'

packages/connectors/src/connectors/twitch/TwitchLogo.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Box } from '@0xsequence/design-system'
+
+interface GetTwitchLogo {
+  isDarkMode: boolean
+}
+
+export const getTwitchLogo = ({ isDarkMode }: GetTwitchLogo) => {
+  const fillColor = isDarkMode ? 'white' : 'black'
+
+  const TwitchLogo: React.FunctionComponent = ({...props}) => {
+    return (
+        <React.Fragment>
+          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+              viewBox="0 0 2400 2800" transform="scale(0.80)">
+            <g>
+              <g id="Layer_1-2">
+                <path fill={fillColor} d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600
+                  V1300z"/>
+                <rect x="1700" y="550" fill={fillColor} width="200" height="600"/>
+                <rect x="1150" y="550" fill={fillColor} width="200" height="600"/>
+              </g>
+            </g>
+          </svg>
+        </React.Fragment>
+    )
+  }
+  return TwitchLogo
+}

packages/connectors/src/connectors/twitch/index.ts

@@ -0,0 +1 @@
+export * from './twitch'

packages/connectors/src/connectors/twitch/twitch.ts

@@ -0,0 +1,37 @@
+import { Chain } from 'wagmi'
+import {  SocialConnector, SocialConnectorOptions } from '../wagmiConnectors';
+
+import { getTwitchLogo } from './TwitchLogo'
+
+export interface TwitchOptions {
+  chains: Chain[];
+  options?: SocialConnectorOptions;
+}
+
+export const twitch = ({ chains, options = {} }: TwitchOptions) => ({
+  id: 'twitch',
+  isSequenceBased: true,
+  logoDark: getTwitchLogo({ isDarkMode: true }),
+  logoLight: getTwitchLogo({ isDarkMode: false }),
+  miniLogoDark: getTwitchLogo({ isDarkMode: true }),
+  miniLogoLight: getTwitchLogo({ isDarkMode: false }),
+  // iconBackground: '#fff',
+  name: 'Twitch',
+  createConnector: () => {
+    const connector = new SocialConnector({
+      chains,
+      options: {
+        ...options,
+        // @ts-ignore
+        connect: {
+          ...options?.connect,
+          settings: {
+            ...options?.connect?.settings,
+            signInWith: 'twitch'
+          }
+        }
+      }
+    });
+    return connector
+  }
+})

packages/connectors/src/defaultConnectors.tsx

@@ -8,8 +8,8 @@ import {
   google,
   metamask,
   walletConnect,
-  discord,
-  apple
+  apple,
+  twitch
 } from './connectors'
 
 interface GetDefaultConnectors {
@@ -51,7 +51,7 @@ export const getDefaultConnectors = ({
         defaultNetwork: defaultChain
       }
     }),
-    discord({
+    twitch({
       chains,
       options: {
         defaultNetwork: defaultChain

packages/kit/README.md

@@ -137,7 +137,7 @@ The settings are described in more detailed in the Sequence Kit documentation.
       logoUrlLightMode: 'https://logo-light-mode.svg',
       projectName: 'my app',
       showEmailInput: true,
-      miniAuthOptions: ['google', 'discord', 'facebook', 'apple'],
+      miniAuthOptions: ['google', 'facebook', 'twitch', 'apple'],
       authOptions: ['metamask', 'wallet-connect'],
     },
     // limits the digital assets displayed on the assets summary screen

packages/kit/src/constants/defaultSignInOptions.ts

@@ -1,5 +1,5 @@
 export const defaultSignInOptions = {
   showEmailInput: true,
-  miniAuthOptions: ['google', 'discord', 'facebook', 'apple'],
+  miniAuthOptions: ['google', 'facebook', 'twitch','apple'],
   authOptions: ['metamask', 'wallet-connect']
 }