v2.10.1 (#109)

* Adding getSequenceWaas function

* Fix email auth

* v2.10.1

examples/next/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @0xsequence/kit-example-next
 
+## 0.6.14
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @0xsequence/kit@2.10.1
+  - @0xsequence/kit-checkout@2.10.1
+  - @0xsequence/kit-wallet@2.10.1
+
 ## 0.6.13
 
 ### Patch Changes

examples/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/kit-example-next",
-  "version": "0.6.13",
+  "version": "0.6.14",
   "private": true,
   "scripts": {
     "dev": "next dev -p 4444",

examples/react/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @0xsequence/kit-example-react
 
+## 0.7.14
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @0xsequence/kit@2.10.1
+  - @0xsequence/kit-checkout@2.10.1
+  - @0xsequence/kit-wallet@2.10.1
+
 ## 0.7.13
 
 ### Patch Changes

examples/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/kit-example-react",
-  "version": "0.7.13",
+  "version": "0.7.14",
   "private": true,
   "homepage": "kit",
   "type": "module",

packages/checkout/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @0xsequence/kit-connectors
 
+## 2.10.1
+
+### Patch Changes
+
+- Fixing email auth
+
+- Updated dependencies []:
+  - @0xsequence/kit@2.10.1
+
 ## 2.10.0
 
 ### Minor Changes

packages/checkout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/kit-checkout",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "Checkout UI for Sequence Kit",
   "repository": "https://github.com/0xsequence/kit/tree/master/packages/checkout",
   "author": "Horizon Blockchain Games",

packages/kit/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @0xsequence/kit
 
+## 2.10.1
+
+### Patch Changes
+
+- Fixing email auth
+
 ## 2.10.0
 
 ### Minor Changes

packages/kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/kit",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "Core package for Sequence Kit",
   "keywords": [
     "sequence",

packages/kit/src/components/ConnectButton/ConnectButton.tsx

@@ -0,0 +1,178 @@
+import { Box, Card, EmailIcon, Tooltip, useTheme } from '@0xsequence/design-system'
+import { GoogleLogin } from '@react-oauth/google'
+import { useEffect, useState } from 'react'
+import { appleAuthHelpers } from 'react-apple-signin-auth'
+
+import { LocalStorageKey } from '../../constants'
+import { useStorage, useStorageItem } from '../../hooks/useStorage'
+import { ExtendedConnector, WalletProperties } from '../../types'
+
+const BUTTON_SIZE = '14'
+const ICON_SIZE = '10'
+
+const getLogo = (theme: any, walletProps: WalletProperties) =>
+  theme === 'dark'
+    ? walletProps.logoDark || walletProps.monochromeLogoDark
+    : walletProps.logoLight || walletProps.monochromeLogoLight
+
+interface ConnectButtonProps {
+  connector: ExtendedConnector
+  label?: string
+  onConnect: (connector: ExtendedConnector) => void
+}
+
+export const ConnectButton = (props: ConnectButtonProps) => {
+  const { connector, label, onConnect } = props
+  const { theme } = useTheme()
+  const walletProps = connector._wallet
+
+  const Logo = getLogo(theme, walletProps)
+
+  return (
+    <Tooltip message={label || walletProps.name}>
+      <Card
+        clickable
+        width={BUTTON_SIZE}
+        height={BUTTON_SIZE}
+        padding="2"
+        borderRadius="xs"
+        justifyContent="center"
+        alignItems="center"
+        onClick={() => onConnect(connector)}
+      >
+        <Box as={Logo} width={ICON_SIZE} height={ICON_SIZE} />
+      </Card>
+    </Tooltip>
+  )
+}
+
+export const GoogleWaasConnectButton = (props: ConnectButtonProps) => {
+  const { connector, onConnect } = props
+  const storage = useStorage()
+  const { data: sessionHash, isPending: isPendingNonce } = useStorageItem(LocalStorageKey.WaasSessionHash)
+  const [enableGoogleTooltip, setEnableGoogleTooltip] = useState(false)
+  const { theme } = useTheme()
+  const walletProps = connector._wallet
+
+  const Logo = getLogo(theme, walletProps)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setEnableGoogleTooltip(true)
+    }, 300)
+  })
+
+  return !isPendingNonce ? (
+    <Tooltip message="Google" disabled={!enableGoogleTooltip}>
+      <Card
+        clickable
+        background="transparent"
+        borderRadius="xs"
+        padding="0"
+        width={BUTTON_SIZE}
+        height={BUTTON_SIZE}
+        position="relative"
+      >
+        <Box
+          width="full"
+          height="full"
+          overflow="hidden"
+          borderRadius="sm"
+          alignItems="center"
+          justifyContent="center"
+          style={{ opacity: 0.0000001, transform: 'scale(1.4)' }}
+        >
+          <GoogleLogin
+            type="icon"
+            size="large"
+            width="56"
+            nonce={sessionHash}
+            onSuccess={credentialResponse => {
+              if (credentialResponse.credential) {
+                storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential)
+                onConnect(connector)
+              }
+            }}
+            onError={() => {
+              console.log('Login Failed')
+            }}
+          />
+        </Box>
+        <Box
+          background="backgroundSecondary"
+          borderRadius="xs"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          position="absolute"
+          pointerEvents="none"
+          width="full"
+          height="full"
+          top="0"
+          right="0"
+        >
+          <Box as={Logo} width={ICON_SIZE} height={ICON_SIZE} />
+        </Box>
+      </Card>
+    </Tooltip>
+  ) : null
+}
+
+export const AppleWaasConnectButton = (props: ConnectButtonProps) => {
+  const { connector, onConnect } = props
+  const storage = useStorage()
+  const { data: sessionHash, isPending: isPendingNonce } = useStorageItem(LocalStorageKey.WaasSessionHash)
+  const { data: appleClientId } = useStorageItem(LocalStorageKey.WaasAppleClientID)
+  const { data: appleRedirectUri } = useStorageItem(LocalStorageKey.WaasAppleRedirectURI)
+
+  return !isPendingNonce && appleClientId && appleRedirectUri ? (
+    <ConnectButton
+      connector={connector}
+      onConnect={() => {
+        appleAuthHelpers.signIn({
+          authOptions: {
+            clientId: appleClientId,
+            redirectURI: appleRedirectUri,
+            nonce: sessionHash,
+            scope: 'openid email',
+            usePopup: true
+          },
+          onSuccess: (response: any) => {
+            if (response.authorization?.id_token) {
+              storage?.setItem(LocalStorageKey.WaasAppleIdToken, response.authorization.id_token)
+              onConnect(connector)
+            } else {
+              console.log('Apple login error: No id_token found')
+            }
+          },
+          onError: (error: any) => console.error(error)
+        })
+      }}
+    />
+  ) : null
+}
+
+interface EmailConnectButtonProps {
+  onClick: () => void
+}
+
+export const EmailConnectButton = (props: EmailConnectButtonProps) => {
+  const { onClick } = props
+
+  return (
+    <Tooltip message={'Email'}>
+      <Card
+        clickable
+        width={BUTTON_SIZE}
+        height={BUTTON_SIZE}
+        padding="2"
+        borderRadius="xs"
+        justifyContent="center"
+        alignItems="center"
+        onClick={onClick}
+      >
+        <EmailIcon size="xl" color="text100" />
+      </Card>
+    </Tooltip>
+  )
+}

packages/kit/src/components/ConnectButton/index.ts

@@ -0,0 +1 @@
+export { ConnectButton, GoogleWaasConnectButton, AppleWaasConnectButton, EmailConnectButton } from './ConnectButton'