¡React 19 es compatible con Web SDK!

Instalando nuevas dependencias

Todas nuestras librerías de hooks han sido renombradas, estas son las nuevas dependencias que debe instalar para comenzar con Web SDK:

npm install @0xsequence/connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query
# or
pnpm install @0xsequence/connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query
# or
yarn add @0xsequence/connect wagmi ethers@6.13.0 viem 0xsequence @tanstack/react-query

Configurando su aplicación

Principales diferencias en cuanto a configuración:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css"; 

import App from "./App";
import { SequenceConnect } from "@0xsequence/connect";
import { SequenceCheckoutProvider } from "@0xsequence/checkout"
import { config } from "./config";

function Dapp() {
  return (
    <SequenceConnect config={config}>
      <SequenceCheckoutProvider>
          <App />
      </SequenceCheckoutProvider>
    </SequenceConnect>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Dapp />
  </React.StrictMode>
);
  • @0xsequence/kit -> @0xsequence/connect para autenticación
  • @0xsequence/kit -> @0xsequence/wallet-widget para la interfaz de wallet
  • @0xsequence/kit-checkout -> @0xsequence/checkout
  • no es necesario importar manualmente @0xsequence/design-system/styles.css al usar @0xsequence/connect
  • @0xsequence/connect es compatible con @0xsequence/design-system v2
  • KitProvider ahora es SequenceConnectProvider
  • KitCheckoutProvider ahora es SequenceCheckoutProvider
  • KitWalletProvider ahora es SequenceWalletProvider

Conectando su aplicación

import './App.css'
import { useOpenConnectModal } from '@0xsequence/connect'

function App() {
  const {setOpenConnectModal} = useOpenConnectModal()
  
  return (
    <>
      <button onClick={() => setOpenConnectModal(true)}>Connect</button>
    </>
  )
}

export default App