Prophet Swap

Quick Start



1. Add required script to your HTML:
<script src="https://krc20.safunet.com/bundle.js"></script>

2. Add html tag
<token-swap-chat
    theme="dark"
    default-tokens="KAS,KRTO,PINTL,NACHO"
    default-buy-token="PINTL">
</token-swap-chat>


Example:
<!DOCTYPE html>
<html>
<head>
    <title>Prophet Swap Integration</title>
    <script src="https://krc20.safunet.com/bundle.js"></script>
</head>
<body>
    <token-swap-chat
        theme="dark"
        default-tokens="KAS,KRTO,PINTL,NACHO"
        default-buy-token="PINTL">
    </token-swap-chat>

    <script>
        const chat = document.querySelector('token-swap-chat');
        
        // Optional: Customize theme
        chat.updateTheme({
            dimensions: {
                height: '600px',
                width: '440px'
            }
        });

        // Optional: Handle events
        chat.addEventListener('message', (e) => {
            console.log('Transaction status:', e.detail);
        });
    </script>
</body>
</html>

Available Settings

HTML Attributes

<token-swap-chat
    theme="dark|light"
    default-tokens="KAS,KRTO,PINTL"
    default-buy-token="PINTL"
    title="Prophet Swap"
    subtitle="Available commands: /swap, /buy"
    connect-message="Please connect your wallet"
    disconnect-message="Wallet disconnected"
    input-placeholder="Type a command or message..."
    connect-button-text="Connect Wallet"
    confirm-button-text="Confirm"
    cancel-button-text="Cancel"
>
</token-swap-chat>

Theme Configuration

chat.updateTheme({
    fontFamily: 'Inter, sans-serif',
    fontSize: {
        base: '0.9375rem',
        small: '0.875rem',
        title: '1.125rem'
    },
    colors: {
        primary: '#2563eb',
        primaryHover: '#1d4ed8',
        background: '#ffffff',
        text: '#1a1a1a',
        border: '#e5e7eb',
        messageUser: {
            background: '#2563eb',
            text: '#ffffff'
        },
        messageBot: {
            background: '#f3f4f6',
            text: '#1a1a1a'
        }
    },
    dark: {
        background: '#111827',
        text: '#f9fafb',
        border: '#374151',
        messageBot: {
            background: '#1f2937',
            text: '#f9fafb'
        }
    },
    borderRadius: {
        container: '16px',
        button: '12px',
        input: '12px'
    },
    dimensions: {
        height: '600px',
        width: '440px',
        padding: '16px'
    }
});

Text Configuration

chat.updateText({
    title: "Prophet Swap",
    subtitle: "Available commands: /swap, /buy",
    connectMessage: "Please connect your KASWARE wallet to start trading",
    disconnectMessage: "Wallet disconnected. Please connect your wallet to continue.",
    inputPlaceholder: "Type a command or message...",
    connectButtonText: "Connect KASWARE Wallet",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel"
});

Available Methods

// Wallet connection
await chat.connect();
await chat.disconnect();

// Interface management
await chat.reset();
const history = chat.getHistory();

// Configuration
chat.updateTheme(themeConfig);
chat.updateText(textConfig);
chat.configure({
    defaultTokens: ['KAS', 'KRTO', 'PINTL'],
    defaultBuyToken: 'PINTL'
});

Events

chat.addEventListener('stateChanged', (e) => {
    // Wallet state changed
    console.log('Wallet state:', e.detail);
});

chat.addEventListener('message', (e) => {
    // New message received
    console.log('Message:', e.detail);
});

chat.addEventListener('error', (e) => {
    // Error occurred
    console.log('Error:', e.detail);
});

Message Types

interface MessageData {
    id: number;
    type: MessageType.USER | MessageType.BOT;
    text: string;
    buttons?: MessageButtons;
}

interface MessageButtons {
    type: 'token_select' | 'quick_buy' | 'confirm' | 'connect_wallet';
    tokens?: Token[];
    symbol?: string;
    data?: { action: string };
}

Last updated 1 year ago