Pump Viewer Embed Documentation

This Pump Viewer component is designed to be embedded in an iframe on your website. Below are examples of how to embed it using different technologies.

HTML

<iframe
  src="https://tokken.lol?token=YOUR_TOKEN_ADDRESS"
  width="800"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>

React

import React from 'react';

function MyComponent() {
  return (
    <iframe
      src="https://tokken.lol?token=YOUR_TOKEN_ADDRESS"
      width="800"
      height="600"
      style={{ border: 'none' }}
      title="Pump Viewer"
    />
  );
}

export default MyComponent;

TypeScript

import React from 'react';

interface LiveKitViewerProps {
  token: string;
  width?: number;
  height?: number;
}

const LiveKitViewer: React.FC<LiveKitViewerProps> = ({
  token,
  width = 800,
  height = 600
}) => {
  return (
    <iframe
      src={`https://tokken.lol?token=${token}`}
      width={width}
      height={height}
      style={{ border: 'none' }}
      title="Pump Viewer"
    />
  );
};

export default LiveKitViewer;

Next.js

'use client';

import { useState } from 'react';

export default function Home() {
  const [token, setToken] = useState('');

  return (
    <div>
      <input
        type="text"
        value={token}
        onChange={(e) => setToken(e.target.value)}
        placeholder="Enter token"
      />
      {token && (
        <iframe
          src={`https://tokken.lol?token=${token}`}
          width="800"
          height="600"
          style={{ border: 'none' }}
          title="Pump Viewer"
        />
      )}
    </div>
  );
}

Vite + React

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <iframe
        src="https://tokken.lol?token=YOUR_TOKEN_ADDRESS"
        width="800"
        height="600"
        style={{ border: 'none' }}
        title="Pump Viewer"
      />
    </div>
  );
}

export default App;