@0xsequence/connect 5.0.0-ecosystem-beta → 5.0.0

package/src/components/ShadowRoot/ShadowRoot.tsx

@@ -1,64 +0,0 @@
-'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

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

package/src/components/TxnDetails/TxnDetails.tsx

@@ -1,225 +0,0 @@
-import { commons } from '@0xsequence/core'
-import { Card, GradientAvatar, Skeleton, Text, TokenImage } from '@0xsequence/design-system'
-import { ContractType, ContractVerificationStatus } from '@0xsequence/indexer'
-import { useAPIClient, useGetTokenBalancesSummary, useGetTokenMetadata } from '@0xsequence/react-hooks'
-import { useEffect, useState } from 'react'
-import { formatUnits, zeroAddress } from 'viem'
-import { useConfig } from 'wagmi'
-
-import { compareAddress, capitalize, truncateAtMiddle } from '../../utils/helpers'
-import { getNativeTokenInfoByChainId } from '../../utils/tokens'
-import { DecodingType, TransferProps, AwardItemProps, decodeTransactions } from '../../utils/txnDecoding'
-import { CollectibleTileImage } from '../CollectibleTileImage'
-
-interface TxnDetailsProps {
-  address: string
-  txs: commons.transaction.Transaction[]
-  chainId: number
-}
-
-export const TxnDetailsSkeleton = () => {
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex justify-center items-center gap-2">
-        <Skeleton className="rounded-full" style={{ width: 30, height: 30 }} />
-        <div className="flex flex-col gap-2 items-start">
-          <Skeleton style={{ width: 100, height: 14 }} />
-          <Skeleton style={{ width: 75, height: 14 }} />
-        </div>
-      </div>
-      <div className="flex flex-col gap-2 items-end">
-        <Skeleton style={{ width: 100, height: 14 }} />
-        <Skeleton style={{ width: 50, height: 12 }} />
-      </div>
-    </div>
-  )
-}
-
-export const TxnDetails = ({ address, txs, chainId }: TxnDetailsProps) => {
-  const apiClient = useAPIClient()
-  // const { fiatCurrency } = useSettings()
-
-  const [decodingType, setDecodingType] = useState<DecodingType | undefined>(undefined)
-  const [transferProps, setTransferProps] = useState<TransferProps[]>([])
-  const [awardItemProps, setAwardItemProps] = useState<AwardItemProps[]>([])
-
-  const getTxnProps = async () => {
-    const decodedTxnDatas = await decodeTransactions(apiClient, address, txs)
-    const type = decodedTxnDatas[0]?.type
-
-    setDecodingType(type)
-
-    if (type === DecodingType.TRANSFER) {
-      setTransferProps(decodedTxnDatas as TransferProps[])
-    }
-
-    if (type === DecodingType.AWARD_ITEM) {
-      setAwardItemProps(decodedTxnDatas as AwardItemProps[])
-    }
-  }
-
-  useEffect(() => {
-    getTxnProps()
-  }, [])
-
-  if (!decodingType) {
-    return <TxnDetailsSkeleton />
-  }
-
-  if (decodingType === DecodingType.UNKNOWN) {
-    return <></>
-  }
-
-  if (transferProps[0]) {
-    return <TransferItemInfo address={address} transferProps={transferProps[0]} chainId={chainId} />
-  }
-  if (awardItemProps[0]) {
-    return <AwardItemInfo awardItemProps={awardItemProps[0]} />
-  }
-}
-
-interface TransferItemInfoProps {
-  address: string
-  transferProps: TransferProps
-  chainId: number
-}
-
-const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoProps) => {
-  const { chains } = useConfig()
-  const contractAddress = transferProps.contractAddress
-  const toAddress: string | undefined = transferProps.to
-  const isNativeCoin = contractAddress ? compareAddress(contractAddress, zeroAddress) : true
-  const is1155 = transferProps.contractType === ContractType.ERC1155
-  const isNFT = transferProps.contractType === ContractType.ERC1155 || transferProps.contractType === ContractType.ERC721
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
-
-  const { data: balances = [] } = useGetTokenBalancesSummary({
-    chainIds: [chainId],
-    filter: {
-      accountAddresses: [address],
-      contractStatus: ContractVerificationStatus.ALL,
-      contractWhitelist: [contractAddress],
-      omitNativeBalances: false
-    }
-  })
-
-  const { data: tokenMetadata } = useGetTokenMetadata({
-    chainID: String(chainId),
-    contractAddress,
-    tokenIDs: transferProps.tokenIds ?? []
-  })
-
-  const tokenBalance = contractAddress ? balances.find(b => compareAddress(b.contractAddress, contractAddress)) : undefined
-  const decimals = isNativeCoin ? nativeTokenInfo.decimals : tokenBalance?.contractInfo?.decimals || 18
-
-  const imageUrl = isNativeCoin
-    ? nativeTokenInfo.logoURI
-    : isNFT
-      ? tokenMetadata?.[0]?.image
-      : tokenBalance?.contractInfo?.logoURI
-  const name = isNativeCoin ? nativeTokenInfo.name : isNFT ? tokenMetadata?.[0]?.name : tokenBalance?.contractInfo?.name || ''
-  const symbol = isNativeCoin ? nativeTokenInfo.symbol : isNFT ? '' : tokenBalance?.contractInfo?.symbol || ''
-
-  const amountSending = transferProps.amounts[0] ?? transferProps.value
-
-  const showSquareImage = isNFT
-  return (
-    <Card>
-      <div className="mb-2">
-        <Text variant="medium" color="primary">
-          {capitalize(transferProps.type ?? '')}
-        </Text>
-      </div>
-      <div className="flex items-end justify-between mb-2">
-        <div className="flex justify-between items-center gap-2">
-          {showSquareImage ? (
-            <div style={{ width: '40px' }}>
-              <CollectibleTileImage imageUrl={imageUrl} />
-            </div>
-          ) : (
-            <TokenImage src={imageUrl} symbol={symbol} size="md" />
-          )}
-          <div className="flex flex-col items-start">
-            <div className="flex flex-row items-center gap-1">
-              <Text variant="medium" color="primary">
-                {name}
-              </Text>
-            </div>
-
-            <Text color="muted" variant="normal">
-              {`${formatUnits(BigInt(amountSending), is1155 ? tokenMetadata?.[0]?.decimals || 0 : isNFT ? 0 : decimals)} ${symbol} `}
-            </Text>
-          </div>
-        </div>
-      </div>
-      {toAddress !== undefined && (
-        <div>
-          <Text variant="normal" color="muted">
-            To
-          </Text>
-          <div
-            className="flex mt-2 rounded-xl bg-background-secondary w-full flex-row justify-between items-center p-4"
-            style={{ height: '52px' }}
-          >
-            <div className="flex flex-row justify-center items-center gap-2">
-              <GradientAvatar size="sm" address={toAddress} />
-              <Text color="primary">{`0x${truncateAtMiddle(toAddress.substring(2), 12)}`}</Text>
-            </div>
-          </div>
-        </div>
-      )}
-    </Card>
-  )
-}
-
-interface AwardItemInfoProps {
-  awardItemProps: AwardItemProps
-}
-
-// This is used only for demo purposes
-const AwardItemInfo = ({ awardItemProps }: AwardItemInfoProps) => {
-  return (
-    <Card>
-      <div className="mb-2">
-        <Text variant="medium" color="primary">
-          Mint
-        </Text>
-      </div>
-      <div className="flex items-end justify-between mb-2">
-        <div className="flex justify-between items-center gap-2">
-          <div style={{ width: '40px' }}>
-            <CollectibleTileImage imageUrl="https://dev-metadata.sequence.app/projects/277/collections/62/tokens/0/image.jpeg" />
-          </div>
-
-          <div className="flex flex-col items-start">
-            <div className="flex flex-row items-center gap-1">
-              <Text variant="medium" color="primary">
-                Waas Demo NFT
-              </Text>
-            </div>
-
-            <Text color="muted" variant="normal">
-              {awardItemProps.amount}
-            </Text>
-          </div>
-        </div>
-      </div>
-      {awardItemProps.to !== undefined && (
-        <div>
-          <Text variant="normal" color="muted">
-            To
-          </Text>
-          <div
-            className="flex mt-2 rounded-xl bg-background-secondary w-full flex-row justify-between items-center p-4"
-            style={{ height: '52px' }}
-          >
-            <div className="flex flex-row justify-center items-center gap-2">
-              <GradientAvatar size="sm" address={awardItemProps.to} />
-              <Text color="primary">{`0x${truncateAtMiddle(awardItemProps.to.substring(2), 12)}`}</Text>
-            </div>
-          </div>
-        </div>
-      )}
-    </Card>
-  )
-}

package/src/components/TxnDetails/index.ts

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

package/src/config/createConfig.ts

@@ -1,39 +0,0 @@
-import { createConfig as createWagmiConfig, type CreateConfigParameters, type Config } from 'wagmi'
-
-import { ConnectConfig, WalletType } from '../types'
-
-import { getDefaultChains } from './defaultChains'
-import { DefaultConnectorOptions, getDefaultConnectors } from './defaultConnectors'
-import { getDefaultTransports } from './defaultTransports'
-
-export type CreateConfigOptions<T extends WalletType> = ConnectConfig &
-  DefaultConnectorOptions<T> & {
-    chainIds?: number[]
-    wagmiConfig?: Partial<Omit<CreateConfigParameters, 'client'>>
-  }
-
-export interface SequenceConnectConfig {
-  wagmiConfig: Config
-  connectConfig: ConnectConfig
-}
-
-export const createConfig = <T extends WalletType>(walletType: T, options: CreateConfigOptions<T>): SequenceConnectConfig => {
-  const { projectAccessKey, chainIds, wagmiConfig, ...rest } = options
-
-  const chains = wagmiConfig?.chains || getDefaultChains(chainIds)
-  const transports = wagmiConfig?.transports || getDefaultTransports(chains)
-  const connectors = wagmiConfig?.connectors || getDefaultConnectors(walletType, options)
-
-  return {
-    connectConfig: {
-      projectAccessKey,
-      ...rest
-    },
-    wagmiConfig: createWagmiConfig({
-      ...wagmiConfig,
-      chains,
-      transports,
-      connectors
-    })
-  }
-}

package/src/config/defaultChains.ts

@@ -1,21 +0,0 @@
-import { Chain } from 'viem'
-
-import { chains } from '../chains'
-
-// Sequence supported Chain configs
-// you may filter list of chains by passing chainIdsFilter
-export const getDefaultChains = (chainIdsFilter?: number[]): [Chain, ...Chain[]] => {
-  if (chainIdsFilter) {
-    return chainIdsFilter.map(chainId => {
-      const chain = chains[chainId]
-
-      if (!chain) {
-        throw new Error(`Chain with id ${chainId} not supported by Sequence`)
-      }
-
-      return chain
-    }) as [Chain, ...Chain[]]
-  }
-
-  return Object.values(chains) as [Chain, ...Chain[]]
-}

package/src/config/defaultConnectors.ts

@@ -1,315 +0,0 @@
-import { CreateConnectorFn } from 'wagmi'
-
-import { apple } from '../connectors/apple'
-import { appleWaas } from '../connectors/apple/appleWaas'
-import { coinbaseWallet } from '../connectors/coinbaseWallet'
-import { ecosystemWallet, type EcosystemWalletOptions } from '../connectors/ecosystem'
-import { email } from '../connectors/email'
-import { emailWaas } from '../connectors/email/emailWaas'
-import { facebook } from '../connectors/facebook'
-import { google } from '../connectors/google'
-import { googleWaas } from '../connectors/google/googleWaas'
-import { metaMask } from '../connectors/metaMask'
-import { sequence } from '../connectors/sequence'
-import { twitch } from '../connectors/twitch'
-import { walletConnect } from '../connectors/walletConnect'
-import { Wallet, WalletType } from '../types'
-import { getConnectWallets } from '../utils/getConnectWallets'
-
-export interface CommonConnectorOptions {
-  appName: string
-  projectAccessKey: string
-  defaultChainId?: number
-}
-
-export interface DefaultWaasConnectorOptions extends CommonConnectorOptions {
-  waasConfigKey: string
-  enableConfirmationModal?: boolean
-
-  email?: boolean
-
-  google?:
-    | false
-    | {
-        clientId: string
-      }
-  apple?:
-    | false
-    | {
-        clientId: string
-        redirectURI: string
-      }
-  ecosystem?: false | EcosystemWalletOptions
-  coinbase?: boolean
-  metaMask?: boolean
-  walletConnect?:
-    | false
-    | {
-        projectId: string
-      }
-
-  /**
-   * @deprecated use connectors.walletConnect.projectId instead
-   */
-  walletConnectProjectId?: string
-
-  /**
-   * @deprecated, use connectors.google.clientId instead
-   */
-  googleClientId?: string
-
-  /**
-   * @deprecated, use connectors.apple.clientId instead
-   */
-  appleClientId?: string
-
-  /**
-   * @deprecated, use connectors.apple.redirectURI instead
-   */
-  appleRedirectURI?: string
-}
-
-export interface DefaultUniversalConnectorOptions extends CommonConnectorOptions {
-  sequence?: boolean
-  email?: boolean
-  google?: boolean
-  facebook?: boolean
-  twitch?: boolean
-  apple?: boolean
-  coinbase?: boolean
-  metaMask?: boolean
-  ecosystem?: false | EcosystemWalletOptions
-  walletConnect?:
-    | false
-    | {
-        projectId: string
-      }
-
-  /**
-   * @deprecated, use connectors.walletConnect.projectId instead
-   */
-  walletConnectProjectId?: string
-}
-
-export type DefaultConnectorOptions<T extends WalletType> = T extends 'waas'
-  ? DefaultWaasConnectorOptions
-  : DefaultUniversalConnectorOptions
-
-export const getDefaultConnectors = <T extends WalletType>(walletType: T, options: DefaultConnectorOptions<T>) => {
-  if (walletType === 'waas') {
-    return getDefaultWaasConnectors(options as DefaultWaasConnectorOptions)
-  } else if (walletType === 'universal') {
-    return getDefaultUniversalConnectors(options as DefaultUniversalConnectorOptions)
-  }
-}
-
-export const getDefaultWaasConnectors = (options: DefaultWaasConnectorOptions): CreateConnectorFn[] => {
-  const { projectAccessKey, waasConfigKey, appName, enableConfirmationModal, defaultChainId } = options
-
-  const wallets: Wallet[] = []
-
-  if (options.email !== false) {
-    wallets.push(
-      emailWaas({
-        projectAccessKey,
-        waasConfigKey,
-        enableConfirmationModal,
-        network: defaultChainId
-      })
-    )
-  }
-
-  if (options.google || options.googleClientId) {
-    const googleClientId = (options.google && options.google.clientId) || options.googleClientId!
-
-    wallets.push(
-      googleWaas({
-        projectAccessKey,
-        waasConfigKey,
-        googleClientId,
-        enableConfirmationModal,
-        network: defaultChainId
-      })
-    )
-  }
-
-  if (options.apple || (options.appleClientId && options.appleRedirectURI)) {
-    const appleClientId = (options.apple && options.apple.clientId) || options.appleClientId!
-    const appleRedirectURI = (options.apple && options.apple.redirectURI) || options.appleRedirectURI!
-
-    wallets.push(
-      appleWaas({
-        projectAccessKey,
-        waasConfigKey,
-        appleClientId,
-        appleRedirectURI,
-        enableConfirmationModal,
-        network: defaultChainId
-      })
-    )
-  }
-
-  if (options.ecosystem) {
-    wallets.push(
-      ecosystemWallet({
-        ...options.ecosystem,
-        projectAccessKey,
-        defaultNetwork: defaultChainId ?? 1,
-        isDev: false
-      })
-    )
-  }
-
-  if (options.metaMask !== false) {
-    if (typeof window !== 'undefined') {
-      wallets.push(
-        metaMask({
-          dappMetadata: {
-            name: appName,
-            url: window.location.origin,
-            iconUrl: `https://www.google.com/s2/favicons?domain_url=${window.location.origin}`
-          }
-        })
-      )
-    }
-  }
-
-  if (options.coinbase !== false) {
-    wallets.push(
-      coinbaseWallet({
-        appName
-      })
-    )
-  }
-
-  if (options.walletConnect || options.walletConnectProjectId) {
-    const projectId = (options.walletConnect && options.walletConnect?.projectId) || options.walletConnectProjectId!
-
-    wallets.push(
-      walletConnect({
-        projectId,
-        defaultNetwork: defaultChainId
-      })
-    )
-  }
-
-  return getConnectWallets(projectAccessKey, wallets)
-}
-
-export const getDefaultUniversalConnectors = (options: DefaultUniversalConnectorOptions): CreateConnectorFn[] => {
-  const { projectAccessKey, appName, defaultChainId } = options
-
-  const wallets: Wallet[] = []
-
-  if (options.email !== false) {
-    wallets.push(
-      email({
-        defaultNetwork: defaultChainId,
-        connect: {
-          app: appName
-        }
-      })
-    )
-  }
-
-  if (options.google !== false) {
-    wallets.push(
-      google({
-        defaultNetwork: defaultChainId,
-        connect: {
-          app: appName
-        }
-      })
-    )
-  }
-
-  if (options.facebook !== false) {
-    wallets.push(
-      facebook({
-        defaultNetwork: defaultChainId,
-        connect: {
-          app: appName
-        }
-      })
-    )
-  }
-
-  if (options.twitch !== false) {
-    wallets.push(
-      twitch({
-        defaultNetwork: defaultChainId,
-        connect: {
-          app: appName
-        }
-      })
-    )
-  }
-
-  if (options.apple !== false) {
-    wallets.push(
-      apple({
-        defaultNetwork: defaultChainId,
-        connect: {
-          app: appName
-        }
-      })
-    )
-  }
-
-  if (options.sequence !== false) {
-    wallets.push(
-      sequence({
-        defaultNetwork: defaultChainId,
-        connect: {
-          app: appName
-        }
-      })
-    )
-  }
-
-  if (options.ecosystem) {
-    wallets.push(
-      ecosystemWallet({
-        ...options.ecosystem,
-        projectAccessKey,
-        defaultNetwork: defaultChainId ?? 1,
-        isDev: false
-      })
-    )
-  }
-
-  if (options.metaMask !== false) {
-    if (typeof window !== 'undefined') {
-      wallets.push(
-        metaMask({
-          dappMetadata: {
-            name: appName,
-            url: window.location.origin,
-            iconUrl: `https://www.google.com/s2/favicons?domain_url=${window.location.origin}`
-          }
-        })
-      )
-    }
-  }
-
-  if (options.coinbase !== false) {
-    wallets.push(
-      coinbaseWallet({
-        appName
-      })
-    )
-  }
-
-  if (options.walletConnect || options.walletConnectProjectId) {
-    const projectId = (options.walletConnect && options.walletConnect?.projectId) || options.walletConnectProjectId!
-
-    wallets.push(
-      walletConnect({
-        projectId,
-        defaultNetwork: defaultChainId
-      })
-    )
-  }
-
-  return getConnectWallets(projectAccessKey, wallets)
-}

package/src/config/defaultTransports.ts

@@ -1,5 +0,0 @@
-import { Chain, http } from 'viem'
-
-export const getDefaultTransports = (chains: readonly [Chain, ...Chain[]]) => {
-  return Object.fromEntries(chains.map(chain => [chain.id, http()]))
-}