Widget Omniston

Integra una función de intercambio y gana comisiones, en minutos

Omniston Widget es una interfaz de intercambio lista para usar para tu app o sitio web. Solo integra nuestro script ligero, y tus usuarios obtienen al instante toda la funcionalidad de intercambio, mientras tú ganas comisiones de cada swap.

Configuración rápida, sin sobrecarga. Empieza con la configuración predeterminada o personalízala para que coincida con tu marca. Entregado mediante un paquete alojado en CDN para un rendimiento máximo. Se ve y funciona como una parte nativa de tu interfaz de usuario.

Pruébalo con Lovable

¿Quieres ver el widget en acción rápidamente? Usa Lovable para generar un ejemplo funcional:

🚀 Crear con Lovable

Haz clic en el botón de arriba para generar automáticamente una página web funcional con el widget de intercambio de STON.fi integrado.

⚠️ Nota: Si ves 'Failed to load Manifest: 404', es porque estás en el sitio web de Lovable y lo pruebas en modo de vista previa. Publica la app, reemplaza la URL dentro de manifest.json por la URL publicada y luego vuelve a publicar la app después de los cambios. Si estás en modo de crédito gratuito y no puedes cambiar el manifest manualmente, escribe el prompt y pega la URL para que el agente la reemplace. Luego ve a la URL publicada para probar la conexión.

También puedes seguir una demostración grabada:

Intégralo tú mismo

Si quieres integrar el widget tú mismo, sigue leyendo abajo.

Dos formas de integrarlo:

Mediante cargador NPM (para compilaciones modernas): Deja que el cargador obtenga el paquete optimizado en tiempo de ejecución.
Script directo de CDN (por simplicidad): Añade una línea de código a tu proyecto.

Ambos métodos exponen el mismo OmnistonWidget constructor, dándote control total.

@ston-fi/omniston-widget-loader (npm) – paquete npm que descarga el paquete de la CDN cuando llamas a load().
Script de CDN – opción sin compilación que expone window.OmnistonWidget en navegadores modernos:

  <script src="https://widget.ston.fi/v0/index.js"></script>

Las URL de la CDN tienen versionado por versión principal (/v0/, /v1/, ...). Recibes todas las actualizaciones no disruptivas dentro de una versión mayor; aumenta la ruta de la versión mayor para adoptar cambios disruptivos.

Inicio rápido en 30 segundos

Aloja tu archivo de manifiesto de TON Connect en tu dominio.
Elige CDN (sin compilación) o npm (frameworks).
Pega un único fragmento para montar el widget; consulta Guía completa para ver ejemplos completos.

Opción A — CDN (sin compilación)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Omniston Widget vía CDN</title>
  </head>
  <body>
    <div id="omniston-widget-container" style="max-width: 420px; margin: 0 auto;"></div>

    <script src="https://widget.ston.fi/v0/index.js"></script>
    <script>
      const widget = new window.OmnistonWidget({
        tonconnect: {
          type: 'standalone',
          options: {
            // ver https://docs.ton.org/ecosystem/ton-connect/manifest
            manifestUrl: 'https://[myapp.com]/tonconnect-manifest.json',
          },
        },
        widget: {
          // Opcional: defaultBidAsset: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c', // TON
          // Opcional: defaultAskAsset: 'EQA2kCVNwVsil2EM2mB0SkXytxCqQjS4mttjDpnXmwG9T6bO', // STON
        },
      });

      widget.mount(document.querySelector("#omniston-widget-container"));
    </script>
  </body>
</html>

Opción B — npm (React, UI de TON Connect integrada)

import { useEffect, useRef } from 'react';
import { TonConnectUIProvider, TonConnectButton, useTonConnectUI } from '@tonconnect/ui-react';
import omnistonWidgetLoader, { type OmnistonWidget } from '@ston-fi/omniston-widget-loader';

function SwapWidget() {
  const [tonconnect] = useTonConnectUI();
  const containerRef = useRef<HTMLDivElement | null>(null);
  const widgetRef = useRef<OmnistonWidget | null>(null);

  useEffect(() => {
    let isMounted = true;

    omnistonWidgetLoader.load().then((OmnistonWidgetConstructor) => {
      if (!isMounted || !containerRef.current || !tonconnect) return;

      widgetRef.current = new OmnistonWidgetConstructor({
        tonconnect: {
          type: 'integrated',
          instance: tonconnect,
        },
        widget: {
          defaultBidAsset: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c', // TON
          defaultAskAsset: 'EQA2kCVNwVsil2EM2mB0SkXytxCqQjS4mttjDpnXmwG9T6bO', // STON
        },
      });

      widgetRef.current.mount(containerRef.current);
    });

    return () => {
      isMounted = false;
      widgetRef.current?.unmount();
      widgetRef.current = null;
    };
  }, [tonconnect]);

  return (
    <div
      style={{
        minHeight: '100vh',
        padding: '2rem',
        display: 'flex',
        flexDirection: 'column',
        gap: 16,
        alignItems: 'center',
        width: '100%',
      }}
    >
      <h1 style={{ textAlign: 'center', marginBottom: '1rem' }}>STON.fi Omniston Widget</h1>
      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
        <TonConnectButton />
      </div>
      <div
        ref={containerRef}
        style={{ width: '100%', maxWidth: 500, margin: '0 auto' }}
      />
    </div>
  );
}

export default function App() {
  return (
    <TonConnectUIProvider
      // ver https://docs.ton.org/ecosystem/ton-connect/manifest
      manifestUrl="https://[myapp.com]/tonconnect-manifest.json"
    >
      <SwapWidget />
    </TonConnectUIProvider>
  );
}

Consulta Guía completa para ver ejemplos completos de CDN, React y vanilla.

Personalización rápida sin código: Usa nuestro constructor visual de widgets en widget.ston.fi/constructor para configurar tu widget de forma interactiva.

El constructor proporciona:

Personalización del tema — Empieza con claro u oscuro y adáptalo a tu marca
Control de la lista de activos — Usa los activos predeterminados, añade los tuyos o reemplaza la lista por completo
Comisiones por referidos — Configura tu dirección de referidor y la comisión
Exportación de código — Copia fragmentos de CSS y JS listos para usar

¿Prefieres hacerlo en código? Consulta Configurar en código más abajo.

Configurar en código

Todas las opciones del constructor visual se asignan directamente al OmnistonWidget objeto de configuración. Tienes control sobre cuatro áreas principales:

1. Comisiones de referidos

Configura ambos referrerAddress y referrerFeeBps para ganar entre 0.01% y 1% (1–100 bps) en cada swap. Consulta la guía de comisiones por referidos para obtener detalles sobre los pagos y las mejores prácticas.

2. Lista de activos

El widget incluye valores predeterminados razonables y solo requiere la URL de tu manifest de TON Connect. Para sustituciones opcionales de activos y la tabla completa de configuración, consulta Opciones de configuración.

3. Tema (variables CSS)

Sobrescribe las propiedades CSS personalizadas en el contenedor que pasas a widget.mount(...) para alinear el widget con tu marca. Consulta Personaliza los estilos del widget para ver la lista completa de variables y ejemplos de estilo.

4. Modos de TON Connect

independiente – El widget gestiona TON Connect usando solo la URL de tu manifest.
integrado – Reutiliza una instancia existente de TON Connect desde tu app.

Para ver ejemplos de integración, advertencias sobre múltiples instancias y la configuración completa, consulta la sección de TON Connect en Guía completa.

Capacidades avanzadas

La distribución por CDN también está disponible como una opción sin compilación; consulta la sección de distribución por CDN en Avanzado: eventos del ciclo de vida y montaje/desmontaje manual para ver los detalles de implementación.

Próximos pasos

Guía completa – Instalación completa, configuración, uso de CDN, integración de TON Connect, comisiones de referidos, tematización y eventos del ciclo de vida.

AnteriorComisiones por referidos SiguienteGuía y referencia completa

Última actualización hace 1 mes

hashtagPruébalo con Lovable

hashtagIntégralo tú mismo

hashtagInicio rápido en 30 segundos

hashtagConstructor visual del widget

hashtagConfigurar en código

hashtag1. Comisiones de referidos

hashtag2. Lista de activos

hashtag3. Tema (variables CSS)

hashtag4. Modos de TON Connect

hashtagCapacidades avanzadas

hashtagPróximos pasos