@0xsequence/connect 0.0.0-20250314205219

package/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx

@@ -0,0 +1,333 @@
+'use client'
+
+import { sequence } from '0xsequence'
+import { Button, Card, Collapsible, Modal, ModalPrimitive, Text, Theme } from '@0xsequence/design-system'
+import { ChainId } from '@0xsequence/network'
+import { SequenceClient } from '@0xsequence/provider'
+import { GoogleOAuthProvider } from '@react-oauth/google'
+import { AnimatePresence } from 'motion/react'
+import React, { useState, useEffect } from 'react'
+import { Hex, hexToString } from 'viem'
+import { Connector, useAccount, useConfig, useConnections } from 'wagmi'
+
+import { DEFAULT_SESSION_EXPIRATION, WEB_SDK_VERSION, LocalStorageKey } from '../../constants'
+import { AnalyticsContextProvider } from '../../contexts/Analytics'
+import { ConnectConfigContextProvider } from '../../contexts/ConnectConfig'
+import { ConnectModalContextProvider } from '../../contexts/ConnectModal'
+import { ThemeContextProvider } from '../../contexts/Theme'
+import { WalletConfigContextProvider } from '../../contexts/WalletConfig'
+import { useStorage } from '../../hooks/useStorage'
+import { useWaasConfirmationHandler } from '../../hooks/useWaasConfirmationHandler'
+import { useEmailConflict } from '../../hooks/useWaasEmailConflict'
+import { ExtendedConnector, DisplayedAsset, EthAuthSettings, ConnectConfig, ModalPosition } from '../../types'
+import { isJSON } from '../../utils/helpers'
+import { getModalPositionCss } from '../../utils/styling'
+import { Connect } from '../Connect/Connect'
+import { JsonTreeViewer } from '../JsonTreeViewer'
+import { NetworkBadge } from '../NetworkBadge'
+import { PageHeading } from '../PageHeading'
+import { PoweredBySequence } from '../SequenceLogo'
+import { ShadowRoot } from '../ShadowRoot'
+import { TxnDetails } from '../TxnDetails'
+
+export type SequenceConnectProviderProps = {
+  children: React.ReactNode
+  config: ConnectConfig
+}
+
+export const SequenceConnectProvider = (props: SequenceConnectProviderProps) => {
+  const { config, children } = props
+  const {
+    defaultTheme = 'dark',
+    signIn = {},
+    position = 'center',
+    displayedAssets: displayedAssetsSetting = [],
+    readOnlyNetworks,
+    ethAuth = {} as EthAuthSettings,
+    disableAnalytics = false
+  } = config
+
+  const defaultAppName = signIn.projectName || 'app'
+
+  const { expiry = DEFAULT_SESSION_EXPIRATION, app = defaultAppName, origin, nonce } = ethAuth
+
+  const [openConnectModal, setOpenConnectModal] = useState<boolean>(false)
+  const [theme, setTheme] = useState<Exclude<Theme, undefined>>(defaultTheme || 'dark')
+  const [modalPosition, setModalPosition] = useState<ModalPosition>(position)
+  const [displayedAssets, setDisplayedAssets] = useState<DisplayedAsset[]>(displayedAssetsSetting)
+  const [analytics, setAnalytics] = useState<SequenceClient['analytics']>()
+  const { address, isConnected } = useAccount()
+  const wagmiConfig = useConfig()
+  const storage = useStorage()
+  const connections = useConnections()
+  const waasConnector: Connector | undefined = connections.find(c => c.connector.id.includes('waas'))?.connector
+
+  const [pendingRequestConfirmation, confirmPendingRequest, rejectPendingRequest] = useWaasConfirmationHandler(waasConnector)
+
+  const googleWaasConnector = wagmiConfig.connectors.find(
+    c => c.id === 'sequence-waas' && (c as ExtendedConnector)._wallet.id === 'google-waas'
+  ) as ExtendedConnector | undefined
+  const googleClientId: string = (googleWaasConnector as any)?.params?.googleClientId || ''
+
+  const setupAnalytics = (projectAccessKey: string) => {
+    const s = sequence.initWallet(projectAccessKey)
+    const sequenceAnalytics = s.client.analytics
+
+    if (sequenceAnalytics) {
+      type TrackArgs = Parameters<typeof sequenceAnalytics.track>
+      const originalTrack = sequenceAnalytics.track.bind(sequenceAnalytics)
+
+      sequenceAnalytics.track = (...args: TrackArgs) => {
+        const [event] = args
+        if (event && typeof event === 'object' && 'props' in event) {
+          event.props = {
+            ...event.props,
+            sdkType: 'sequence kit',
+            version: WEB_SDK_VERSION
+          }
+        }
+        return originalTrack?.(...args)
+      }
+    }
+    setAnalytics(sequenceAnalytics)
+  }
+
+  useEffect(() => {
+    if (!isConnected) {
+      analytics?.reset()
+
+      return
+    }
+    if (address) {
+      analytics?.identify(address.toLowerCase())
+    }
+  }, [analytics, address, isConnected])
+
+  useEffect(() => {
+    if (!disableAnalytics) {
+      setupAnalytics(config.projectAccessKey)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (theme !== defaultTheme) {
+      setTheme(defaultTheme)
+    }
+  }, [defaultTheme])
+
+  useEffect(() => {
+    if (modalPosition !== position) {
+      setModalPosition(position)
+    }
+  }, [position])
+
+  // Write data in local storage for retrieval in connectors
+  useEffect(() => {
+    // Theme
+    // TODO: set the sequence theme once it is added to connect options
+    if (typeof theme === 'object') {
+      // localStorage.setItem(LocalStorageKey.Theme, JSON.stringify(theme))
+    } else {
+      localStorage.setItem(LocalStorageKey.Theme, theme)
+    }
+    // EthAuth
+    // note: keep an eye out for potential race-conditions, though they shouldn't occur.
+    // If there are race conditions, the settings could be a function executed prior to being passed to wagmi
+    storage?.setItem(LocalStorageKey.EthAuthSettings, {
+      expiry,
+      app,
+      origin: origin || location.origin,
+      nonce
+    })
+  }, [theme, ethAuth])
+
+  useEffect(() => {
+    setDisplayedAssets(displayedAssets)
+  }, [displayedAssetsSetting])
+
+  const { isEmailConflictOpen, emailConflictInfo, toggleEmailConflictModal } = useEmailConflict()
+
+  return (
+    <ConnectConfigContextProvider value={config}>
+      <ThemeContextProvider
+        value={{
+          theme,
+          setTheme,
+          position: modalPosition,
+          setPosition: setModalPosition
+        }}
+      >
+        <GoogleOAuthProvider clientId={googleClientId}>
+          <ConnectModalContextProvider value={{ setOpenConnectModal, openConnectModalState: openConnectModal }}>
+            <WalletConfigContextProvider value={{ setDisplayedAssets, displayedAssets, readOnlyNetworks }}>
+              <AnalyticsContextProvider value={{ setAnalytics, analytics }}>
+                <ShadowRoot theme={theme}>
+                  <AnimatePresence>
+                    {openConnectModal && (
+                      <Modal
+                        scroll={false}
+                        size="sm"
+                        contentProps={{
+                          style: {
+                            maxWidth: '390px',
+                            overflow: 'visible',
+                            ...getModalPositionCss(position)
+                          }
+                        }}
+                        onClose={() => setOpenConnectModal(false)}
+                      >
+                        <Connect onClose={() => setOpenConnectModal(false)} emailConflictInfo={emailConflictInfo} {...props} />
+                      </Modal>
+                    )}
+
+                    {pendingRequestConfirmation && (
+                      <Modal
+                        scroll={false}
+                        size="sm"
+                        contentProps={{
+                          style: {
+                            maxWidth: '390px',
+                            ...getModalPositionCss(position)
+                          }
+                        }}
+                        isDismissible={false}
+                        onClose={() => {
+                          rejectPendingRequest('')
+                        }}
+                      >
+                        <div className="px-4 pt-4 pb-2">
+                          <div
+                            className="flex flex-col justify-center text-primary items-center font-medium"
+                            style={{
+                              marginTop: '4px'
+                            }}
+                          >
+                            <ModalPrimitive.Title asChild>
+                              <Text className="mb-5" variant="large" asChild>
+                                <h1>
+                                  Confirm {pendingRequestConfirmation.type === 'signMessage' ? 'signing message' : 'transaction'}
+                                </h1>
+                              </Text>
+                            </ModalPrimitive.Title>
+
+                            {pendingRequestConfirmation.type === 'signMessage' && pendingRequestConfirmation.message && (
+                              <div className="flex flex-col w-full">
+                                <Text variant="normal" color="muted" fontWeight="medium">
+                                  Message
+                                </Text>
+                                <Card className="mt-2 py-2 overflow-scroll max-h-[200px]">
+                                  <Text className="mb-4" variant="normal">
+                                    {isJSON(pendingRequestConfirmation.message) ? (
+                                      <JsonTreeViewer data={JSON.parse(pendingRequestConfirmation.message)} />
+                                    ) : (
+                                      hexToString(pendingRequestConfirmation.message as unknown as Hex)
+                                    )}
+                                  </Text>
+                                </Card>
+                              </div>
+                            )}
+
+                            {pendingRequestConfirmation.type === 'signTransaction' && (
+                              <div className="flex flex-col w-full">
+                                <TxnDetails
+                                  address={address ?? ''}
+                                  txs={pendingRequestConfirmation.txs ?? []}
+                                  chainId={pendingRequestConfirmation.chainId ?? ChainId.POLYGON}
+                                />
+
+                                <Collapsible className="mt-4" label="Transaction data">
+                                  <Card className="overflow-x-scroll my-3">
+                                    <Text className="mb-4" variant="code">
+                                      {JSON.stringify(pendingRequestConfirmation.txs, null, 2)}
+                                    </Text>
+                                  </Card>
+                                </Collapsible>
+                              </div>
+                            )}
+
+                            {pendingRequestConfirmation.chainId && (
+                              <div className="flex w-full mt-3 justify-end items-center">
+                                <div className="flex w-1/2 justify-start">
+                                  <Text variant="small" color="muted">
+                                    Network
+                                  </Text>
+                                </div>
+                                <div className="flex w-1/2 justify-end">
+                                  <NetworkBadge chainId={pendingRequestConfirmation.chainId} />
+                                </div>
+                              </div>
+                            )}
+
+                            <div className="flex flex-row gap-2 w-full mt-5">
+                              <Button
+                                className="w-full"
+                                shape="square"
+                                size="lg"
+                                label="Reject"
+                                onClick={() => {
+                                  rejectPendingRequest(pendingRequestConfirmation?.id)
+                                }}
+                              />
+                              <Button
+                                className="flex items-center text-center w-full"
+                                shape="square"
+                                size="lg"
+                                label="Confirm"
+                                variant="primary"
+                                onClick={() => {
+                                  confirmPendingRequest(pendingRequestConfirmation?.id)
+                                }}
+                              />
+                            </div>
+                          </div>
+
+                          <div className="mt-4">
+                            <PoweredBySequence />
+                          </div>
+                        </div>
+                      </Modal>
+                    )}
+
+                    {isEmailConflictOpen && emailConflictInfo && (
+                      <Modal
+                        size="sm"
+                        scroll={false}
+                        onClose={() => {
+                          setOpenConnectModal(false)
+                          toggleEmailConflictModal(false)
+                        }}
+                      >
+                        <div className="p-4">
+                          <ModalPrimitive.Title asChild>
+                            <PageHeading>Email already in use</PageHeading>
+                          </ModalPrimitive.Title>
+                          <div>
+                            <Text className="text-center" variant="normal" color="secondary">
+                              Another account with this email address <Text color="primary">({emailConflictInfo.email})</Text>{' '}
+                              already exists with account type <Text color="primary">({emailConflictInfo.type})</Text>. Please
+                              sign in again with the correct account.
+                            </Text>
+                            <div className="flex mt-4 gap-2 items-center justify-center">
+                              <Button
+                                label="OK"
+                                onClick={() => {
+                                  setOpenConnectModal(false)
+                                  toggleEmailConflictModal(false)
+                                }}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </Modal>
+                    )}
+                  </AnimatePresence>
+                </ShadowRoot>
+                {children}
+              </AnalyticsContextProvider>
+            </WalletConfigContextProvider>
+          </ConnectModalContextProvider>
+        </GoogleOAuthProvider>
+      </ThemeContextProvider>
+    </ConnectConfigContextProvider>
+  )
+}

package/src/components/SequenceConnectProvider/index.ts

@@ -0,0 +1 @@
+export { SequenceConnectProvider, type SequenceConnectProviderProps } from './SequenceConnectProvider'

package/src/components/SequenceLogo/PoweredBySequence.tsx

@@ -0,0 +1,21 @@
+import { Text } from '@0xsequence/design-system'
+
+import { SequenceLogo } from './SequenceLogo'
+
+export const PoweredBySequence = () => {
+  return (
+    <div
+      className="powered-by-sequence-footer flex relative gap-1 flex-row items-center justify-center select-none cursor-pointer"
+      onClick={() => {
+        if (typeof window !== 'undefined') {
+          window.open('https://sequence.xyz')
+        }
+      }}
+    >
+      <Text variant="xsmall" color="muted" fontWeight="bold">
+        Powered by
+      </Text>
+      <SequenceLogo />
+    </div>
+  )
+}

package/src/components/SequenceLogo/SequenceLogo.tsx

@@ -0,0 +1,23 @@
+export const SequenceLogo = () => {
+  return (
+    <svg width="80" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 14" fill="none">
+      <g clipPath="url(#clip0_11299_570)">
+        <path
+          d="M25.7553 11.4231C27.5444 11.4231 28.8054 10.454 28.8054 8.97036C28.818 7.69041 28.0077 6.94833 26.6562 6.48188L25.7295 6.15882C24.7902 5.83581 24.3396 5.5607 24.3396 4.93862C24.3396 4.31649 25.0087 3.95772 25.7811 3.95772C26.5019 3.95772 27.0552 4.23279 27.5186 4.74724L28.561 3.80206C27.8919 3.04827 26.9268 2.64152 25.7943 2.64152C24.0952 2.64152 22.8217 3.55097 22.8217 5.03455C22.8217 6.1951 23.5293 6.93662 24.9835 7.42758L25.9876 7.7624C26.8626 8.06146 27.2875 8.44421 27.2875 9.05458C27.2875 9.68841 26.6699 10.1074 25.8075 10.1074C24.9193 10.1074 24.1601 9.70069 23.6841 9.01887L22.5 9.89207C23.0396 10.8127 24.2879 11.4231 25.7553 11.4231ZM32.9036 11.3991C34.2551 11.3991 35.2586 10.8724 35.8378 10.0115L34.7569 9.29341C34.4094 9.82009 33.8302 10.2028 32.9168 10.2028C31.8359 10.2028 30.9992 9.56901 30.935 8.57585H35.9926C36.0052 8.38447 36.0052 8.27678 36.0052 8.14515C36.0052 6.21909 34.6026 5.17794 32.9036 5.17794C30.9476 5.17794 29.5445 6.52987 29.5445 8.28854C29.5445 10.1186 30.9471 11.3991 32.9036 11.3991ZM30.9987 7.61843C31.2046 6.733 32.0154 6.2905 32.852 6.2905C33.6754 6.2905 34.422 6.75695 34.5762 7.61843H30.9987ZM43.3593 13.7799V5.29738H41.9436V6.09912C41.5834 5.62044 40.8111 5.17794 39.8844 5.17794C38.1211 5.17794 36.7828 6.57785 36.7828 8.28854C36.7828 9.99923 38.1211 11.3991 39.8844 11.3991C40.8111 11.3991 41.5834 10.9566 41.9436 10.4779V13.7799H43.3593ZM40.1419 10.2023C39.0094 10.2023 38.2244 9.36482 38.2244 8.28801C38.2244 7.21116 39.0094 6.37367 40.1419 6.37367C41.2744 6.37367 42.0594 7.21116 42.0594 8.28801C42.0594 9.36482 41.2744 10.2023 40.1419 10.2023ZM47.0224 11.3991C47.8459 11.3991 48.5279 11.076 48.9016 10.4657V11.2792H50.3172V5.29738H48.9016V8.24055C48.9016 9.53278 48.2581 10.2028 47.3312 10.2028C46.5082 10.2028 46.0447 9.61647 46.0447 8.65958V5.29738H44.6289V8.87491C44.6289 10.406 45.5423 11.3991 47.0224 11.3991ZM54.7448 11.3991C56.0963 11.3991 57.0997 10.8724 57.6788 10.0115L56.598 9.29341C56.2503 9.82009 55.6712 10.2028 54.7577 10.2028C53.6769 10.2028 52.8405 9.56901 52.776 8.57585H57.8337C57.8462 8.38447 57.8462 8.27678 57.8462 8.14515C57.8462 6.21909 56.4436 5.17794 54.7448 5.17794C52.7886 5.17794 51.3855 6.52987 51.3855 8.28854C51.3855 10.1186 52.7881 11.3991 54.7448 11.3991ZM52.8396 7.61843C53.0454 6.733 53.8564 6.2905 54.6928 6.2905C55.5163 6.2905 56.2628 6.75695 56.4172 7.61843H52.8396ZM58.915 11.2792H60.331V8.336C60.331 7.04377 61.0515 6.37367 61.9909 6.37367C62.8144 6.37367 63.3291 6.93609 63.3291 7.89297V11.2786H64.7451V7.6776C64.7451 6.1583 63.7798 5.17689 62.2868 5.17689C61.4503 5.17689 60.7293 5.49994 60.331 6.11035V5.29738H58.915V11.2792ZM69.104 11.3991C70.4426 11.3991 71.5494 10.753 72.1026 9.74815L70.8669 9.12603C70.5576 9.73639 69.9275 10.1788 69.1036 10.1788C67.9583 10.1788 67.1478 9.35311 67.1478 8.28854C67.1478 7.22397 67.9583 6.39819 69.1036 6.39819C69.9271 6.39819 70.5576 6.84068 70.8669 7.45105L72.1026 6.82893C71.5494 5.82406 70.4426 5.17794 69.104 5.17794C67.1743 5.17794 65.7068 6.51816 65.7068 8.28854C65.7068 10.0589 67.1743 11.3991 69.104 11.3991ZM75.9195 11.3991C77.2711 11.3991 78.2744 10.8724 78.8536 10.0115L77.7728 9.29341C77.425 9.82009 76.8459 10.2028 75.9325 10.2028C74.8512 10.2028 74.0152 9.56901 73.9503 8.57585H79.0084C79.0209 8.38447 79.0209 8.27678 79.0209 8.14515C79.0209 6.21909 77.6184 5.17794 75.9195 5.17794C73.9628 5.17794 72.5602 6.52987 72.5602 8.28854C72.5602 10.1186 73.9628 11.3991 75.9195 11.3991ZM74.0143 7.61843C74.2201 6.733 75.0311 6.2905 75.8675 6.2905C76.691 6.2905 77.4375 6.75695 77.5919 7.61843H74.0143Z"
+          fill="var(--seq-color-muted)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.333252 2.975V11.025C0.333252 12.668 1.754 14 3.50659 14H15.8266C17.5792 14 18.9999 12.668 18.9999 11.025V2.975C18.9999 1.33195 17.5792 0 15.8266 0H3.50659C1.754 0 0.333252 1.33195 0.333252 2.975ZM4.99991 3.5C4.99991 3.01675 4.58205 2.625 4.06658 2.625C3.55112 2.625 3.13325 3.01675 3.13325 3.5C3.13325 3.98325 3.55112 4.375 4.06658 4.375C4.58205 4.375 4.99991 3.98325 4.99991 3.5ZM4.06658 9.61943C4.58205 9.61943 4.99991 10.0112 4.99991 10.4944C4.99991 10.9777 4.58205 11.3694 4.06658 11.3694C3.55112 11.3694 3.13325 10.9777 3.13325 10.4944C3.13325 10.0112 3.55112 9.61943 4.06658 9.61943ZM16.1999 7C16.1999 6.51675 15.7821 6.125 15.2666 6.125C14.7511 6.125 14.3333 6.51675 14.3333 7C14.3333 7.48325 14.7511 7.875 15.2666 7.875C15.7821 7.875 16.1999 7.48325 16.1999 7ZM7.79992 2.625H15.2666C15.7821 2.625 16.1999 3.01675 16.1999 3.5C16.1999 3.98325 15.7821 4.375 15.2666 4.375H7.79992C7.28446 4.375 6.86659 3.98325 6.86659 3.5C6.86659 3.01675 7.28446 2.625 7.79992 2.625ZM15.2666 9.61943H7.79992C7.28446 9.61943 6.86659 10.0112 6.86659 10.4944C6.86659 10.9777 7.28446 11.3694 7.79992 11.3694H15.2666C15.7821 11.3694 16.1999 10.9777 16.1999 10.4944C16.1999 10.0112 15.7821 9.61943 15.2666 9.61943ZM4.06659 6.125H11.5333C12.0487 6.125 12.4666 6.51675 12.4666 7C12.4666 7.48325 12.0487 7.875 11.5333 7.875H4.06659C3.55112 7.875 3.13325 7.48325 3.13325 7C3.13325 6.51675 3.55112 6.125 4.06659 6.125Z"
+          fill="var(--seq-color-muted)"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_11299_570">
+          <rect width="79.3333" height="14" fill="white" transform="translate(0.333252)" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/SequenceLogo/index.ts

@@ -0,0 +1,2 @@
+export { SequenceLogo } from './SequenceLogo'
+export { PoweredBySequence } from './PoweredBySequence'

package/src/components/ShadowRoot/ShadowRoot.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { ThemeProvider, Theme } from '@0xsequence/design-system'
+import { ReactNode, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { styles } from '../../styles'
+
+// Create a stylesheet which is shared by all ShadowRoot components
+let sheet: CSSStyleSheet
+const getCSSStyleSheet = () => {
+  if (!sheet) {
+    sheet = new CSSStyleSheet()
+    sheet.replaceSync(styles)
+  }
+
+  return sheet
+}
+
+interface ShadowRootProps {
+  theme?: Theme
+  children: ReactNode
+}
+
+export const ShadowRoot = (props: ShadowRootProps) => {
+  const { theme, children } = props
+  const hostRef = useRef<HTMLDivElement>(null)
+  const [container, setContainer] = useState<HTMLDivElement | null>(null)
+  const [windowDocument, setWindowDocument] = useState<Document | null>(null)
+
+  useEffect(() => {
+    setWindowDocument(document)
+  }, [])
+
+  useEffect(() => {
+    if (hostRef.current && !hostRef.current.shadowRoot) {
+      // Create a shadow root
+      const shadowRoot = hostRef.current.attachShadow({ mode: 'open' })
+
+      // Attach the stylesheet
+      shadowRoot.adoptedStyleSheets = [getCSSStyleSheet()]
+
+      // Create a container
+      const container = document.createElement('div')
+      container.id = 'shadow-root-container'
+      shadowRoot.appendChild(container)
+
+      setContainer(container)
+    }
+  }, [windowDocument])
+
+  return windowDocument
+    ? createPortal(
+        <div data-shadow-host ref={hostRef}>
+          {container && (
+            <ThemeProvider theme={theme} root={container}>
+              {children}
+            </ThemeProvider>
+          )}
+        </div>,
+        document.body
+      )
+    : null
+}

package/src/components/ShadowRoot/index.ts

@@ -0,0 +1 @@
+export { ShadowRoot } from './ShadowRoot'