Examples - Argyros

Full integration examples for each framework.

HTML / CDN

Complete standalone page with wallet connection:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Argyros Swap</title>
  <script src="https://cdn.argyros.trade/argyros-widget.umd.js"></script>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0a0a0f;
    }
    .container { width: 440px; }
  </style>
</head>
<body>
  <div class="container">
    <argyros-swap
      api-key="argy_your_api_key"
      chain="solana"
      default-input-mint="So11111111111111111111111111111111111111112"
      default-output-mint="uSd2czE61Evaf76RNbq4KPpXnkiL3irdzgLFUMe3NoG"
      theme="dark"
    ></argyros-swap>
  </div>

  <script>
    const widget = document.querySelector("argyros-swap");

    widget.addEventListener("connect-wallet", async () => {
      if (!window.solana?.isPhantom) {
        alert("Please install Phantom wallet");
        return;
      }
      const resp = await window.solana.connect();
      widget.setWallet(resp.publicKey.toString());
    });

    widget.addEventListener("quote-update", (e) => {
      console.log("Quote:", e.detail.amountOut);
    });

    widget.addEventListener("swap-complete", (e) => {
      console.log("Swap built:", e.detail.transaction);
    });

    widget.addEventListener("swap-error", (e) => {
      console.error("Swap failed:", e.detail.error);
    });
  </script>
</body>
</html>

React + Wallet Adapter

"use client";

import { useEffect, useRef, useCallback } from "react";
import { useWallet } from "@solana/wallet-adapter-react";
import { useWalletModal } from "@solana/wallet-adapter-react-ui";
import "@argyros/widget";
import type { ArgyrosSwapElement } from "@argyros/widget";

export default function SwapPage() {
  const ref = useRef<ArgyrosSwapElement>(null);
  const { publicKey, connected } = useWallet();
  const { setVisible } = useWalletModal();

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.setWallet(connected && publicKey ? publicKey.toBase58() : "");
  }, [connected, publicKey]);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const onConnect = () => setVisible(true);
    const onQuote = (e: Event) => {
      const detail = (e as CustomEvent).detail;
      console.log("Quote:", detail.amountOut, "impact:", detail.priceImpactPercent);
    };
    const onSwap = (e: Event) => {
      console.log("Swap complete:", (e as CustomEvent).detail);
    };
    const onError = (e: Event) => {
      console.error("Swap error:", (e as CustomEvent).detail.error);
    };

    el.addEventListener("connect-wallet", onConnect);
    el.addEventListener("quote-update", onQuote);
    el.addEventListener("swap-complete", onSwap);
    el.addEventListener("swap-error", onError);

    return () => {
      el.removeEventListener("connect-wallet", onConnect);
      el.removeEventListener("quote-update", onQuote);
      el.removeEventListener("swap-complete", onSwap);
      el.removeEventListener("swap-error", onError);
    };
  }, [setVisible]);

  return (
    <div style={{ maxWidth: 460, margin: "0 auto", padding: 24 }}>
      <argyros-swap
        ref={ref as any}
        api-key={process.env.NEXT_PUBLIC_ARGYROS_KEY}
        chain="solana"
        rpc-url="https://mainnet.fogo.io"
        theme="dark"
      />
    </div>
  );
}

TypeScript declaration (global.d.ts):

declare namespace JSX {
  interface IntrinsicElements {
    "argyros-swap": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement> & {
        "api-key"?: string;
        chain?: string;
        "base-url"?: string;
        "rpc-url"?: string;
        "default-input-mint"?: string;
        "default-output-mint"?: string;
        theme?: "dark" | "light";
      },
      HTMLElement
    >;
  }
}

Vue 3

<template>
  <div class="swap-wrapper">
    <argyros-swap
      ref="widgetRef"
      api-key="argy_your_api_key"
      chain="solana"
      default-input-mint="So11111111111111111111111111111111111111112"
      default-output-mint="uSd2czE61Evaf76RNbq4KPpXnkiL3irdzgLFUMe3NoG"
      theme="dark"
      @connect-wallet="onConnectWallet"
      @quote-update="onQuoteUpdate"
      @swap-complete="onSwapComplete"
      @swap-error="onSwapError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import "@argyros/widget";

const widgetRef = ref<HTMLElement | null>(null);

function onConnectWallet() {
  // Trigger your wallet adapter
  console.log("Connect wallet requested");
}

function onQuoteUpdate(e: CustomEvent) {
  console.log("Quote:", e.detail.amountOut);
}

function onSwapComplete(e: CustomEvent) {
  console.log("Swap:", e.detail);
}

function onSwapError(e: CustomEvent) {
  console.error("Error:", e.detail.error);
}

function setWallet(address: string) {
  (widgetRef.value as any)?.setWallet(address);
}
</script>

<style scoped>
.swap-wrapper {
  max-width: 460px;
  margin: 0 auto;
}
</style>

In vite.config.ts, tell Vue to treat argyros-swap as a custom element:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "argyros-swap",
        },
      },
    }),
  ],
});

Next.js (App Router)

"use client";

import { useEffect, useRef } from "react";

export default function SwapWidget() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    import("@argyros/widget");
  }, []);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const onConnect = () => {
      console.log("Connect wallet");
    };

    el.addEventListener("connect-wallet", onConnect);
    return () => el.removeEventListener("connect-wallet", onConnect);
  }, []);

  return (
    <argyros-swap
      ref={ref}
      api-key="argy_your_api_key"
      chain="solana"
      theme="dark"
      default-input-mint="So11111111111111111111111111111111111111112"
      default-output-mint="uSd2czE61Evaf76RNbq4KPpXnkiL3irdzgLFUMe3NoG"
    />
  );
}

Svelte

<script>
  import { onMount } from "svelte";

  let widgetEl;

  onMount(async () => {
    await import("@argyros/widget");

    widgetEl.addEventListener("connect-wallet", () => {
      console.log("Connect wallet");
    });

    widgetEl.addEventListener("quote-update", (e) => {
      console.log("Quote:", e.detail);
    });
  });

  export function setWallet(address) {
    widgetEl?.setWallet(address);
  }
</script>

<argyros-swap
  bind:this={widgetEl}
  api-key="argy_your_api_key"
  chain="solana"
  theme="dark"
/>

Light Theme with Custom Accent

<argyros-swap
  api-key="argy_your_api_key"
  theme="light"
></argyros-swap>

<style>
  argyros-swap {
    --argyros-accent: #6366f1;
    --argyros-accent-hover: #818cf8;
    --argyros-radius: 12px;
  }
</style>

Widget

​Widget Examples

​HTML / CDN

​React + Wallet Adapter

​Vue 3

​Next.js (App Router)

​Svelte

​Light Theme with Custom Accent

Widget Examples