@0xsequence/connect 0.0.0-20250314205219

package/src/types/provider.d.ts

@@ -0,0 +1,9 @@
+import '@0xsequence/provider'
+
+declare module '@0xsequence/provider' {
+  export enum AnalyticsEventType {
+    // Kit specific events
+    LINK_WALLET = 'LINK_WALLET',
+    UNLINK_WALLET = 'UNLINK_WALLET'
+  }
+}

package/src/types.ts

@@ -0,0 +1,92 @@
+import { ETHAuthProof } from '@0xsequence/auth'
+import { Theme } from '@0xsequence/design-system'
+import { FunctionComponent } from 'react'
+import { Connector, CreateConnectorFn } from 'wagmi'
+
+import { LocalStorageKey } from './constants'
+
+export interface LogoProps {
+  className?: string
+  style?: React.CSSProperties
+}
+
+export type WalletType = 'waas' | 'universal'
+
+export interface WalletProperties {
+  id: string
+  logoDark: FunctionComponent<LogoProps>
+  logoLight: FunctionComponent<LogoProps>
+  monochromeLogoDark?: FunctionComponent<LogoProps>
+  monochromeLogoLight?: FunctionComponent<LogoProps>
+  name: string
+  iconBackground?: string
+  hideConnectorId?: string | null
+  isSequenceBased?: boolean
+  type?: 'social' | 'wallet'
+}
+
+export type Wallet = WalletProperties & {
+  createConnector: (projectAccessKey: string) => CreateConnectorFn
+}
+
+export interface WalletField {
+  _wallet: WalletProperties
+}
+
+export type ExtendedConnector = Connector & WalletField
+
+export interface DisplayedAsset {
+  contractAddress: string
+  chainId: number
+}
+
+export interface EthAuthSettings {
+  app?: string
+  /** expiry number (in seconds) that is used for ETHAuth proof. Default is 1 week in seconds. */
+  expiry?: number
+  /** origin hint of the dapp's host opening the wallet. This value will automatically
+   * be determined and verified for integrity, and can be omitted. */
+  origin?: string
+  /** authorizeNonce is an optional number to be passed as ETHAuth's nonce claim for replay protection. **/
+  nonce?: number
+}
+
+export type ModalPosition =
+  | 'center'
+  | 'middle-right'
+  | 'middle-left'
+  | 'top-center'
+  | 'top-right'
+  | 'top-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'bottom-left'
+
+export interface ConnectConfig {
+  projectAccessKey: string
+  disableAnalytics?: boolean
+  defaultTheme?: Theme
+  position?: ModalPosition
+  signIn?: {
+    logoUrl?: string
+    descriptiveSocials?: boolean
+    projectName?: string
+    useMock?: boolean
+  }
+  displayedAssets?: DisplayedAsset[]
+  readOnlyNetworks?: number[]
+  ethAuth?: EthAuthSettings
+}
+
+export type StorageItem = {
+  [LocalStorageKey.EthAuthProof]: ETHAuthProof
+  [LocalStorageKey.EthAuthSettings]: EthAuthSettings
+  [LocalStorageKey.WaasEmailIdToken]: string
+  [LocalStorageKey.WaasGoogleClientID]: string
+  [LocalStorageKey.WaasGoogleIdToken]: string
+  [LocalStorageKey.WaasAppleClientID]: string
+  [LocalStorageKey.WaasAppleIdToken]: string
+  [LocalStorageKey.WaasAppleRedirectURI]: string
+  [LocalStorageKey.WaasActiveLoginType]: string
+  [LocalStorageKey.WaasSignInEmail]: string
+}

package/src/utils/adapters.ts

@@ -0,0 +1,29 @@
+import { ethers } from 'ethers'
+import { type HttpTransport, Account, Chain, Client, Transport } from 'viem'
+
+export const walletClientToSigner = async (walletClient: Client<Transport, Chain, Account>) => {
+  const { account, chain, transport } = walletClient
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address
+  }
+  const provider = new ethers.BrowserProvider(transport, network)
+  const signer = await provider.getSigner(account.address)
+  return signer
+}
+
+export const publicClientToProvider = (publicClient: Client<Transport, Chain>) => {
+  const { chain, transport } = publicClient
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address
+  }
+  if (transport.type === 'fallback') {
+    return new ethers.FallbackProvider(
+      (transport.transports as ReturnType<HttpTransport>[]).map(({ value }) => new ethers.JsonRpcProvider(value?.url, network))
+    )
+  }
+  return new ethers.JsonRpcProvider(transport.url, network)
+}

package/src/utils/deferred.ts

@@ -0,0 +1,21 @@
+export class Deferred<T> {
+  private _resolve: (value: T) => void = () => {}
+  private _reject: (value: T) => void = () => {}
+
+  private _promise: Promise<T> = new Promise<T>((resolve, reject) => {
+    this._reject = reject
+    this._resolve = resolve
+  })
+
+  get promise(): Promise<T> {
+    return this._promise
+  }
+
+  resolve(value: T) {
+    this._resolve(value)
+  }
+
+  reject(value: T) {
+    this._reject(value)
+  }
+}

package/src/utils/ethAuth.ts

@@ -0,0 +1,70 @@
+import { ETHAuthProof } from '@0xsequence/auth'
+import { ETHAuth, Proof } from '@0xsequence/ethauth'
+import { isValidTypedDataSignature } from '@0xsequence/provider'
+import { UsePublicClientReturnType, Storage } from 'wagmi'
+import { GetWalletClientData } from 'wagmi/query'
+
+import { LocalStorageKey, DEFAULT_SESSION_EXPIRATION } from '../constants'
+import { StorageItem } from '../types'
+
+import { publicClientToProvider, walletClientToSigner } from './adapters'
+
+export const signEthAuthProof = async (
+  walletClient: GetWalletClientData<any, any>,
+  storage: Storage<StorageItem>
+): Promise<ETHAuthProof> => {
+  const proofInformation = await storage.getItem(LocalStorageKey.EthAuthProof)
+
+  // if proof information was generated and saved upon wallet connection, use that
+  if (proofInformation) {
+    return proofInformation
+  }
+
+  // generate a new proof
+  const proofSettings = await storage.getItem(LocalStorageKey.EthAuthSettings)
+
+  if (!proofSettings) {
+    throw new Error('No ETHAuth settings found')
+  }
+
+  const walletAddress = walletClient.account.address
+
+  const proof = new Proof()
+  proof.address = walletAddress
+
+  proof.claims.app = proofSettings.app || 'app'
+  proof.claims.ogn = proofSettings.origin
+  proof.claims.n = proofSettings.nonce
+
+  proof.setExpiryIn(proofSettings.expiry ? Math.max(proofSettings.expiry, 200) : DEFAULT_SESSION_EXPIRATION)
+
+  const typedData = proof.messageTypedData()
+  const signer = await walletClientToSigner(walletClient)
+  const signature = await signer.signTypedData(typedData.domain, typedData.types, typedData.message)
+
+  proof.signature = signature
+
+  const ethAuth = new ETHAuth()
+  const proofString = await ethAuth.encodeProof(proof, true)
+
+  return {
+    typedData,
+    proofString
+  }
+}
+
+export const validateEthProof = async (
+  walletClient: GetWalletClientData<any, any>,
+  publicClient: UsePublicClientReturnType<any, any>,
+  proof: ETHAuthProof
+): Promise<boolean> => {
+  const walletAddress = walletClient.account.address
+  const ethAuth = new ETHAuth()
+
+  const decodedProof = await ethAuth.decodeProof(proof.proofString, true)
+  const provider = publicClientToProvider(publicClient)
+
+  const isValid = await isValidTypedDataSignature(walletAddress, proof.typedData, decodedProof.signature, provider)
+
+  return isValid
+}

package/src/utils/getConnectWallets.ts

@@ -0,0 +1,25 @@
+import { CreateConnectorFn } from 'wagmi'
+
+import { ExtendedConnector, Wallet } from '../types'
+
+export const getConnectWallets = (projectAccessKey: string, wallets: Wallet[]): CreateConnectorFn[] => {
+  const connectors: CreateConnectorFn[] = []
+
+  wallets.forEach(wallet => {
+    const { createConnector, ...metaProperties } = wallet
+    const walletProperties = { ...metaProperties }
+
+    const createConnectorOverride = (config: any) => {
+      const connector = createConnector(projectAccessKey)
+
+      const res = connector(config) as ExtendedConnector
+      res._wallet = { ...walletProperties }
+
+      return res
+    }
+
+    connectors.push(createConnectorOverride)
+  })
+
+  return connectors
+}

package/src/utils/helpers.ts

@@ -0,0 +1,124 @@
+export const isEmailValid = (email: string) => {
+  return /^\S+@\S+\.\S{2,}$/.test(email)
+}
+
+export const compareAddress = (a: string, b: string) => {
+  return a.toLowerCase() === b.toLowerCase()
+}
+
+enum ValueType {
+  VERY_LARGE,
+  FRACTION,
+  VERY_TINY,
+  MIXED
+}
+
+interface FormatDisplayOptions {
+  disableScientificNotation?: boolean
+  disableCompactNotation?: boolean
+  significantDigits?: number
+  maximumFractionDigits?: number
+}
+
+export const formatDisplay = (_val: number | string, options?: FormatDisplayOptions): string => {
+  if (isNaN(Number(_val))) {
+    console.error(`display format error ${_val} is not a number`)
+    return 'NaN'
+  }
+
+  const val = Number(_val)
+
+  if (val === 0) {
+    return '0'
+  }
+
+  let valMode: ValueType
+
+  if (val > 100000000) {
+    if (options?.disableCompactNotation) {
+      valMode = ValueType.MIXED
+    } else {
+      valMode = ValueType.VERY_LARGE
+    }
+  } else if (val < 0.0000000001) {
+    if (options?.disableScientificNotation) {
+      valMode = ValueType.FRACTION
+    } else {
+      valMode = ValueType.VERY_TINY
+    }
+  } else if (val < 1) {
+    valMode = ValueType.FRACTION
+  } else {
+    valMode = ValueType.MIXED
+  }
+
+  let notation: Intl.NumberFormatOptions['notation'] = undefined
+  let config: Pick<Intl.NumberFormatOptions, 'maximumFractionDigits' | 'maximumSignificantDigits'>
+
+  const maximumSignificantDigits = options?.significantDigits ?? 4
+
+  switch (valMode) {
+    case ValueType.VERY_LARGE:
+      notation = 'compact'
+      config = {
+        maximumSignificantDigits,
+        maximumFractionDigits: options?.maximumFractionDigits
+      }
+      break
+    case ValueType.VERY_TINY:
+      notation = 'scientific'
+      config = {
+        maximumSignificantDigits,
+        maximumFractionDigits: options?.maximumFractionDigits
+      }
+      break
+    case ValueType.FRACTION:
+      notation = 'standard'
+      config = {
+        maximumSignificantDigits,
+        maximumFractionDigits: options?.maximumFractionDigits
+      }
+      break
+    default:
+      notation = 'standard'
+      config = {
+        maximumSignificantDigits,
+        maximumFractionDigits: options?.maximumFractionDigits
+      }
+  }
+
+  return Intl.NumberFormat('en-US', {
+    notation,
+    ...config
+  }).format(val)
+}
+
+export const capitalize = (word: string) => {
+  return word.charAt(0).toUpperCase() + word.slice(1)
+}
+
+export const truncateAtMiddle = (text: string, truncateAt: number) => {
+  let finalText = text
+
+  if (text.length >= truncateAt) {
+    finalText = text.slice(0, truncateAt / 2) + '...' + text.slice(text.length - truncateAt / 2, text.length)
+  }
+
+  return finalText
+}
+
+export const formatAddress = (text: string) => {
+  return `0x${truncateAtMiddle(text?.substring(2) || '', 8)}`
+}
+
+export const isJSON = (str?: string) => {
+  if (!str) {
+    return false
+  }
+  try {
+    JSON.parse(str)
+  } catch (e) {
+    return false
+  }
+  return true
+}

package/src/utils/networks.ts

@@ -0,0 +1,63 @@
+import { networks, ChainId } from '@0xsequence/network'
+
+export const getNetworkColor = (chainId: number, mode: 'dark' | 'light' = 'light') => {
+  switch (chainId) {
+    case ChainId.MAINNET:
+      return mode === 'light' ? '#abf' : '#abf'
+    case ChainId.POLYGON:
+      return mode === 'light' ? '#c7a6ff' : '#c7a6ff'
+    case ChainId.ARBITRUM:
+      return mode === 'light' ? '#52A7E6' : '#52A7E6'
+    case ChainId.OPTIMISM:
+      return mode === 'light' ? '#DB3132' : '#DB3132'
+    case ChainId.BSC:
+      return mode === 'light' ? '#CB9C1D' : '#EEB445'
+    case ChainId.AVALANCHE:
+      return mode === 'light' ? '#E84142' : '#E84142'
+    case ChainId.GNOSIS:
+      return mode === 'light' ? '#00193C' : '#D8E8FF'
+    case ChainId.GOERLI:
+      return mode === 'light' ? '#A77A00' : '#FFA700'
+    case ChainId.POLYGON_MUMBAI:
+    case ChainId.POLYGON_AMOY:
+      return mode === 'light' ? '#D68828' : '#FFA700'
+    default:
+      return mode === 'light' ? '#abf' : '#abf'
+  }
+}
+
+export const getNetworkBackgroundColor = (chainId: number, mode: 'dark' | 'light' = 'light') => {
+  switch (chainId) {
+    case ChainId.MAINNET:
+      return mode === 'light' ? '#132362' : '#132362'
+    case ChainId.POLYGON:
+      return mode === 'light' ? '#350881' : '#350881'
+    case ChainId.ARBITRUM:
+      return mode === 'light' ? '#EDF7FF' : '#0C3754'
+    case ChainId.OPTIMISM:
+      return mode === 'light' ? '#FFEAE9' : '#390B0C'
+    case ChainId.BSC:
+      return mode === 'light' ? '#FFE8AB' : '#554018'
+    case ChainId.AVALANCHE:
+      return mode === 'light' ? '#FBDFDF' : '#390B0C'
+    case ChainId.GNOSIS:
+      return mode === 'light' ? '#D8E8FF' : '#00193C'
+    case ChainId.GOERLI:
+      return mode === 'light' ? '#FFD871' : '#554018'
+    case ChainId.POLYGON_MUMBAI:
+    case ChainId.POLYGON_AMOY:
+      return mode === 'light' ? '#FFE8CD' : '#554018'
+    default:
+      return mode === 'light' ? '#132362' : '#132362'
+  }
+}
+
+export const getNetwork = (chainId: number) => {
+  const network = networks[chainId as ChainId]
+
+  if (!network) {
+    throw new Error(`Unknown network chainId: ${chainId}`)
+  }
+
+  return network
+}

package/src/utils/styling.ts

@@ -0,0 +1,52 @@
+import { ModalPosition } from '../types'
+
+export interface modalPositionCss {
+  top?: string
+  left?: string
+  right?: string
+  bottom?: string
+}
+
+export const getModalPositionCss = (position: ModalPosition) => {
+  switch (position) {
+    case 'top-right':
+      return {
+        top: '0px',
+        right: '0px'
+      }
+    case 'top-left':
+      return {
+        top: '0px',
+        left: '0px'
+      }
+    case 'top-center':
+      return {
+        top: '0px'
+      }
+    case 'bottom-right':
+      return {
+        bottom: '0px',
+        right: '0px'
+      }
+    case 'bottom-left':
+      return {
+        bottom: '0px',
+        left: '0px'
+      }
+    case 'bottom-center':
+      return {
+        bottom: '0px'
+      }
+    case 'middle-right':
+      return {
+        right: '0px'
+      }
+    case 'middle-left':
+      return {
+        left: '0px'
+      }
+    case 'center':
+    default:
+      return {}
+  }
+}

package/src/utils/tokens.ts

@@ -0,0 +1,56 @@
+import { nativeTokenImageUrl } from '@0xsequence/design-system'
+import { ContractType, TokenBalance } from '@0xsequence/indexer'
+import { zeroAddress } from 'viem'
+import { Chain } from 'wagmi/chains'
+
+import { chains } from '../chains'
+
+export interface NativeTokenInfo {
+  chainId: number
+  name: string
+  symbol: string
+  logoURI: string
+  decimals: number
+  blockExplorerUrl?: string
+  blockExplorerName?: string
+}
+
+export const getNativeTokenInfoByChainId = (chainId: number, wagmiChains: readonly [Chain, ...Chain[]]): NativeTokenInfo => {
+  // Get chain data from wagmi
+  const chain = wagmiChains.find(chain => chain.id === chainId) || chains[chainId]
+
+  if (chain) {
+    return {
+      chainId: chain.id,
+      name: chain.nativeCurrency.name,
+      symbol: chain.nativeCurrency.symbol,
+      decimals: chain.nativeCurrency.decimals,
+      logoURI: nativeTokenImageUrl(chain.id),
+      blockExplorerName: chain.blockExplorers?.default.name,
+      blockExplorerUrl: chain.blockExplorers?.default.url
+    }
+  }
+
+  return {
+    chainId,
+    name: 'Unknown',
+    symbol: '???',
+    decimals: 18,
+    logoURI: ''
+  }
+}
+
+export const createNativeTokenBalance = (chainId: number, accountAddress: string, balance: string = '0'): TokenBalance => {
+  return {
+    chainId,
+    contractAddress: zeroAddress,
+    accountAddress,
+    contractType: ContractType.UNKNOWN,
+    balance,
+    blockHash: '',
+    blockNumber: 0,
+    tokenID: '',
+    isSummary: false,
+    uniqueCollectibles: ''
+  }
+}