Quickstart

De cero a wallet Stellar funcionando en tu app React. 5 minutos si tenés Node 20 y pnpm instalados.

1. Instalá el SDK

Dentro de tu proyecto React (Vite, Next.js, Astro con React island), agregá los paquetes:

# pnpm
pnpm add @accesly/react @accesly/core react-router-dom

# npm
npm install @accesly/react @accesly/core react-router-dom

# yarn
yarn add @accesly/react @accesly/core react-router-dom

Si usás @stellar/stellar-sdk del lado del cliente (para tx building custom), agregalo también. Requiere polyfills de Node en el bundle client. Ver la sección Polyfills más abajo.

2. Configurá variables de entorno

Agregá el appId de tu dashboard al .env:

# Vite
VITE_ACCESLY_APP_ID=app_d_tu_app_id_real

# Next.js
NEXT_PUBLIC_ACCESLY_APP_ID=app_d_tu_app_id_real

# Astro
PUBLIC_ACCESLY_APP_ID=app_d_tu_app_id_real

3. Montá el Provider en la raíz

Envolvé tu app con AcceslyProvider. El SDK se encarga de auth, sesión y estado de la wallet.

import { StrictMode, useMemo } from 'react';
import { BrowserRouter } from 'react-router-dom';
import { AcceslyProvider } from '@accesly/react';
import { IndexedDbDeviceStore } from '@accesly/core';
import { App } from './App';

const appId = import.meta.env.VITE_ACCESLY_APP_ID;

export function Root() {
  const deviceStore = useMemo(() => new IndexedDbDeviceStore(), []);
  return (
    <StrictMode>
      <AcceslyProvider
        appId={appId}
        env="dev"
        overrides={{ deviceStore }}
      >
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </AcceslyProvider>
    </StrictMode>
  );
}

4. Renderizá un flow del kit

El SDK trae componentes prearmados en @accesly/react/kit. Ejemplo mínimo con signup y wallet home:

import { useAccesly } from '@accesly/react';
import { AuthForm, CreateWalletFlow, WalletHome } from '@accesly/react/kit';

export function App() {
  const { auth, wallet } = useAccesly();

  if (auth.status !== 'authenticated') {
    return <AuthForm mode="sign-up" />;
  }

  const [hasWallet, setHasWallet] = useState(null);
  useEffect(() => {
    wallet.fetchRemote().then(r => setHasWallet(Boolean(r)));
  }, [wallet]);

  if (hasWallet === null) return <div>Cargando...</div>;
  if (!hasWallet) return <CreateWalletFlow />;

  return <WalletHome />;
}

Con eso ya tenés: signup con email o Google, creación de wallet on chain, y home con balance y actividad. Todos los componentes leen tu branding del dashboard automáticamente.

5. Callback URL de OAuth

Si vas a usar login con Google, tenés que registrar la URL de callback en el dashboard. Anda a Settings del app, sección Redirect URIs, y agregá la URL exacta donde monta tu app.

• Desarrollo local: http://localhost:5173/auth/callback
• Producción: https://tu-app.com/auth/callback

Si tu app vive bajo un sub path (por ejemplo /wallet o /demo), configurá authCallbackPath en el provider:

<AcceslyProvider
  appId={appId}
  env="dev"
  authCallbackPath="/demo/auth/callback"
  overrides={{ deviceStore }}
>

6. Renderizá el callback handler

Creá una ruta que reciba el code de OAuth. El kit tiene un componente listo:

import { AuthCallback } from '@accesly/react/kit';
import { useNavigate } from 'react-router-dom';

export function AuthCallbackPage() {
  const navigate = useNavigate();
  return (
    <AuthCallback
      onSuccess={() => navigate('/wallet')}
      onError={() => navigate('/')}
    />
  );
}

Polyfills para el cliente

@stellar/stellar-sdk importa Buffer y crypto de Node. En el bundle del cliente esos builtins no existen. Si tu bundler es Vite o Astro, agregá vite-plugin-node-polyfills:

// vite.config.ts o astro.config.mjs
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default {
  plugins: [
    nodePolyfills({
      include: ['buffer', 'crypto', 'stream', 'util', 'process'],
      globals: { Buffer: true, global: true, process: true },
    }),
  ],
};

Siguientes pasos

• Aprendé cómo funciona la wallet por dentro en Arquitectura.
• Configurá branding, providers y colores en el dashboard.
• Habilitá on ramp con MXN via KYC y fiat.
• Revisá el catálogo de errores para tu error boundary.