Skip to main content

Advanced Usage

Async Operations with Error Handling

class TradingAppManager {
  private iframe: HTMLIFrameElement;
  private isReady: boolean = false;
  private timeout: number = 10000; // 10 seconds

  constructor(iframeId: string) {
    this.iframe = document.getElementById(iframeId) as HTMLIFrameElement;
    this.setupMessageListener();
  }

  async addWallets(wallets: (string | Wallet)[]): Promise<boolean> {
    return new Promise((resolve, reject) => {
      if (!this.isReady) {
        reject(new Error('Iframe not ready'));
        return;
      }

      const timeout = setTimeout(() => {
        reject(new Error('Timeout waiting for response'));
      }, this.timeout);

      const handleResponse = (event: MessageEvent<IframeResponse>) => {
        if (event.source !== this.iframe.contentWindow) return;
        
        if (event.data.type === 'WALLETS_ADDED') {
          clearTimeout(timeout);
          window.removeEventListener('message', handleResponse);
          resolve(event.data.success);
        }
      };

      window.addEventListener('message', handleResponse);
      
      this.iframe.contentWindow?.postMessage({
        type: 'ADD_WALLETS',
        wallets
      }, '*');
    });
  }

  async getCurrentWallets(): Promise<WhitelistItem[]> {
    return new Promise((resolve, reject) => {
      if (!this.isReady) {
        reject(new Error('Iframe not ready'));
        return;
      }

      const timeout = setTimeout(() => {
        reject(new Error('Timeout waiting for response'));
      }, this.timeout);

      const handleResponse = (event: MessageEvent<IframeResponse>) => {
        if (event.source !== this.iframe.contentWindow) return;
        
        if (event.data.type === 'CURRENT_WALLETS') {
          clearTimeout(timeout);
          window.removeEventListener('message', handleResponse);
          resolve(event.data.wallets);
        }
      };

      window.addEventListener('message', handleResponse);
      
      this.iframe.contentWindow?.postMessage({
        type: 'GET_WALLETS'
      }, '*');
    });
  }
}

Error Handling

interface ErrorResponse {
  type: 'ERROR';
  message: string;
  code?: string;
}

function handleMessage(data: IframeResponse | ErrorResponse): void {
  if (data.type === 'ERROR') {
    console.error('Iframe error:', data.message);
    return;
  }
  
  switch (data.type) {
    case 'IFRAME_READY':
      console.log('Iframe ready for communication');
      break;
    // ... other cases
  }
}

Debug Mode

const DEBUG = true;

function debugLog(message: string, data?: any): void {
  if (DEBUG) {
    console.log(`[TradingIframe] ${message}`, data);
  }
}