Los desarrolladores pueden personalizar la experiencia del Web SDK pasando opciones de configuración al wrapper SequenceConnect.

Así es como puede configurar el kit usando estas opciones:

  const connectConfig =  {

		defaultTheme: 'light',

		position: 'top-left',

		...

	}



  <SequenceConnect config={connectConfig}>

    <App />

  </SequenceConnect>


Resumen de Configuración

A continuación se muestran las opciones disponibles para personalizar la configuración, o, vea abajo todas las opciones en detalle:

interface CreateConfigOptions {

  appName: string

  projectAccessKey: string

  chainIds?: number[]

  defaultChainId?: number

  disableAnalytics?: boolean

  defaultTheme?: Theme

  position?: ModalPosition

  signIn?: {

    logoUrl?: string

    projectName?: string

    useMock?: boolean

  }

  displayedAssets?: Array<{

    contractAddress: string

    chainId: number

  }>

  ethAuth?: EthAuthSettings

  wagmiConfig?: WagmiConfig // optional wagmiConfig overrides

  waasConfigKey: string

  enableConfirmationModal?: boolean

  walletConnect?:

    | boolean

    | {

        projectId: string

      }

  google?:

    | boolean

    | {

        clientId: string

      }

  apple?:

    | boolean

    | {

        clientId: string

        rediretURI: string

      }

  email?:

    | boolean

    | {

        legacyEmailAuth?: boolean

      }

}

Estilo y Diseño Personalizados

Puede personalizar la apariencia visual del modal de conexión del Web SDK proporcionando un objeto de tema personalizado a la opción de configuración defaultTheme. Aquí tiene un ejemplo de cómo implementar un estilo personalizado:

import { createConfig } from "@0xsequence/connect";



const CUSTOM_THEME = {

  backgroundPrimary: "rgba(35, 100, 32, 1)",

  backgroundSecondary: "navy",

};



export const config = createConfig("waas", {

  projectAccessKey: projectAccessKey,

  defaultTheme: CUSTOM_THEME,

  // ... other config options

});

Variables de Tema Disponibles

Las siguientes variables de tema pueden ser personalizadas:

// Text Colors

text100: string; // 'rgba(255, 255, 255, 1)'

text80: string; // 'rgba(255, 255, 255, 0.8)'

text50: string; // 'rgba(255, 255, 255, 0.5)'

textInverse100: string; // 'rgba(0, 0, 0, 1)'



// Background Colors

backgroundPrimary: string; // 'rgba(0, 0, 0, 1)'

backgroundSecondary: string; // 'rgba(255, 255, 255, 0.1)'

backgroundContrast: string; // 'rgba(0, 0, 0, 0.5)'

backgroundMuted: string; // 'rgba(255, 255, 255, 0.05)'

backgroundControl: string; // 'rgba(255, 255, 255, 0.25)'

backgroundInverse: string; // 'rgba(255, 255, 255, 1)'

backgroundBackdrop: string; // 'rgba(34, 34, 34, 0.9)'

backgroundOverlay: string; // 'rgba(0, 0, 0, 0.7)'

backgroundRaised: string; // 'rgba(54, 54, 54, 0.7)'



// Button Colors

buttonGlass: string; // 'rgba(255, 255, 255, 0.15)'

buttonEmphasis: string; // 'rgba(0, 0, 0, 0.5)'

buttonInverse: string; // 'rgba(255, 255, 255, 0.8)'



// Border Colors

borderNormal: string; // 'rgba(255, 255, 255, 0.25)'

borderFocus: string; // 'rgba(255, 255, 255, 0.5)'

Puede sobrescribir cualquier combinación de estas variables para crear su propio tema. Los valores pueden proporcionarse en cualquier formato de color CSS válido (rgba, hex, nombres de colores, etc.).

Opciones Disponibles

Desarrollo de Apps con Sequence

appName

TypePredeterminado
stringindefinido

Un valor interno de nombre de software que no se muestra al usuario.

projectAccessKey

TypePredeterminado
stringindefinido

La clave de acceso del proyecto que se requiere, obtenida desde Sequence Builder

ethAuth como EthAuthSettings

{

  /*app name*/

  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

  /** nonce is an optional number to be passed as ETHAuth's nonce claim for replay protection. **/

  nonce?: number

}

waasConfigKey

TypePredeterminado
stringindefinido

La clave de configuración de Embedded Wallet requerida para wallets WaaS, configurada dentro de Sequence Builder.

Red

chainIds

TypePredeterminado
number[]indefinido

Una lista de IDs de cadena. Ejemplo: [1, 137]

defaultChainId

TypePredeterminado
numberindefinido

El ID de cadena que se usa primero para firmas y transacciones.

UI

Parámetros de la interfaz de usuario que modifican el modal.

Configuración del Modal de Inicio de Sesión (signIn)

El objeto signIn se utiliza para configurar el modal de inicio de sesión.

signIn.logoUrl

TypePredeterminado
stringindefinido

URL del logo que se mostrará en el modal de inicio de sesión.

signIn.projectName

TypePredeterminado
stringindefinido

Nombre del proyecto que se mostrará en el modal de inicio de sesión.

signIn.useMock

TypePredeterminado
booleanindefinido

Elimina la capacidad de hacer solicitudes reales a blockchain si se establece en true usando el conector mock de wagmi

position

TypePredeterminado
stringcenter

El parámetro position determina la ubicación de los diferentes modales en la pantalla. Los valores posibles incluyen:

  • center
  • middle-right
  • middle-left
  • top-center
  • top-right
  • top-left
  • bottom-center
  • bottom-right
  • bottom-left

defaultTheme

TypePredeterminado
string u objetodark

El defaultTheme determina la paleta de colores utilizada para el estilo del modal. Los valores posibles incluyen:

  • ‘light’
  • ‘dark’
  • object

Colores específicos pueden sobrescribirse pasando un objeto de tema personalizado. El Sequence Builder ofrece un playground útil para probar los colores en Web SDK.

Wallet

Parámetros que incluyen opciones de configuración de wallet

disableAnalytics

TypePredeterminado
booleanindefinido

Activa o desactiva la función de analytics conectada a tu proyecto en Sequence Builder.

displayedAssets

TypePredeterminado
[{ contractAddress: string, chainId: number }, …]indefinido

Si se proporciona, esto determinará qué activos se mostrarán en la vista principal del modal de wallet dentro del juego. Al pasar una lista de activos, solo los activos de la lista se mostrarán en la vista principal. Si no se proporcionan activos, todos los activos propios pueden mostrarse en la vista principal.

enableConfirmationModal

TypePredeterminado
booleanindefinido

Habilita confirmaciones al enviar transacciones

Proveedores de inicio de sesión

Los diferentes proveedores de inicio de sesión que crean conexiones de wallet para el usuario:

walletConnect

TypePredeterminado
false{ projectId: string }undefined

google

TypePredeterminado
false{ clientId: string }undefined

apple

TypePredeterminado
false{ clientId: string, redirectURI: string }undefined

email

TypePredeterminado
boolean{ legacyEmailAuth: boolean }undefined

Crear conectores universales predeterminados

Aunque generalmente recomendamos usar Embedded Wallets con SequenceKit, como alternativa, también puede utilizar nuestra configuración Universal Wallet. Al crear una variable connectors de wagmi, importe la función getDefaultConnectors del paquete @0xsequence/kit, e incluya un Wallet Connect ID obtenido aquí, un chain ID predeterminado, el nombre de la app y el projectAccessKey, luego continúe con la integración desde el inicio rápido.

[config.ts]
import { getDefaultConnectors } from '@0xsequence/kit'

...

export const projectAccessKey = '<access-key>'



const connectors = getDefaultConnectors( "universal", {

  walletConnectProjectId: 'wallet-connect-id',

  defaultChainId: 1,

  appName: 'demo app',

  projectAccessKey

})



export const config = createConfig({

  transports,

  connectors,

  chains

})