Migrar de Web SDK a Web SDK

Web SDK (v4) ahora es Web SDK (v5), aquí están los cambios más importantes.

¡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:

New

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:

New

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

New

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

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

export default App