​
概述

Skip Explorer v2 提供了一个易于使用的界面，用于可视化跨链交易并跟踪其进度。本指南介绍 Explorer 的基础用法，以及集成方如何利用它提升用户体验。

​
Explorer 基础用法

用户可以访问 explorer.skip.build 并输入以下信息来查看交易详情：
  • 交易哈希：任意受支持链上的交易哈希
  • 链 ID：该交易发生所在的链
Explorer 会自动识别并展示：
  • 交易状态与进度
  • 跨链跳转路径以及所使用的桥
  • 资产转移与兑换
  • 交易推进过程中的实时更新

​
自定义前端集成

如果你正在构建自定义前端，并希望为用户提供丰富的交易可视化能力，可以生成包含完整路由数据的 Explorer 链接。

​
基础 Explorer 链接

对于简单的交易跟踪，你可以通过 URL 参数将用户重定向到 Explorer：
  • tx_hash：用逗号分隔的交易哈希列表
  • chain_id：初始源链 ID
  • is_testnet：用于测试网交易的可选布尔参数
示例： 
https://explorer.skip.build/?tx_hash=ABC123,DEF456&chain_id=osmosis-1&is_testnet=true
当你拥有交易哈希但路由上下文有限时，这种方式非常适合。

​
高级富数据集成

如果你希望提供更完整的交易上下文和更好的用户体验，可以将路由数据编码为 base64，并通过 data 参数传递。这样 Explorer 就能够展示详细的多跳交易流程、用户地址以及完整的路由信息。 示例： 
https://explorer.skip.build/?data=eyJyb3V0ZSI6ey4uLn0sInVzZXJBZGRyZXNzZXMiOnsuLi59fQ==

​
所需数据结构

base64 编码后的数据必须包含一个符合以下结构的 JSON 对象： 
{
  route: SimpleRoute,                    // 来自 /v2/fungible/route API 响应的 Route
  userAddresses: UserAddress[],          // 每条链对应的用户钱包地址
  transactionDetails: TransactionDetails[] // 来自 /v2/tx/status 的交易详情
}

​
实现方式

import { SimpleRoute, UserAddress, TransactionDetails } from '@skip-go/client';

// 从 Skip Go API 收集数据
const routeData = {
  route: simpleRoute,              // 来自你的 /v2/fungible/route 调用
  userAddresses: userAddresses,    // 用户在各条链上的地址
  transactionDetails: txDetails    // 来自你的 /v2/tx/status 轮询
};

// 为 Explorer 编码
const jsonString = JSON.stringify(routeData);
const base64Encoded = btoa(jsonString); // 兼容浏览器的 base64 编码

// 生成富数据 Explorer URL  
const explorerUrl = `https://explorer.skip.build/?data=${base64Encoded}`;

// 重定向用户或在新标签页中打开
window.open(explorerUrl, '_blank');

​
为用户带来的收益

​
基础集成收益

  • 快速访问：用户无需离开你的应用即可轻松查看交易详情
  • 多链支持：适用于所有受支持的链和桥
  • 实时更新：提供实时交易状态与进度跟踪

​
高级集成收益

  • 完整交易上下文：用户看到的是完整路由，而不只是单笔交易
  • 多跳可视化：清晰展示跨链与跨桥的复杂转移流程
  • 地址映射：Explorer 能识别哪些地址属于该用户
  • 实时状态：当前交易状态与可视化进度无缝结合
  • 可分享链接：用户可以收藏或分享包含完整交易上下文的链接

​
最佳实践

​
何时使用基础集成或高级集成

在以下情况下使用基础集成：
  • 你只有交易哈希可用
  • 用户是在你的应用之外发起交易
  • 你希望以最小集成成本完成接入
在以下情况下使用高级集成：
  • 你拥有来自 Skip Go API 的完整路由信息
  • 用户是通过你的应用发起交易
  • 你希望提供最丰富的用户体验

​
常见使用场景

​
交易确认页面

用户提交交易后，将其重定向到带完整上下文的 Explorer： 
// 提交交易后
const explorerUrl = generateExplorerLink(routeData);
window.location.href = explorerUrl;

​
交易历史

为每一笔历史交易提供 Explorer 链接： 
// 在交易历史组件中
{transactions.map(tx => (
  <div key={tx.id}>
    <span>{tx.amount} {tx.asset}</span>
    <a href={generateExplorerLink(tx)} target="_blank">
      查看详情
    </a>
  </div>
))}

​
支持与调试

通过提供详细的 Explorer 视图，帮助用户排查失败交易： 
// 针对失败的交易
const supportUrl = generateExplorerLink(failedTransaction);
// 将此 URL 分享给支持团队或用户
最佳实践：当你能够从 Skip Go 集成中获取完整路由信息时，始终优先使用高级 base64 方案。这能在 Explorer 中提供最丰富的用户体验。

​
Overview

Skip Explorer v2 provides a user-friendly interface for visualizing cross-chain transactions and tracking their progress. This guide covers basic explorer usage and how integrators can leverage it to enhance their user experience.

​
Basic Explorer Usage

Users can view transaction details by navigating to explorer.skip.build and entering:
  • Transaction Hash: Any transaction hash from a supported chain
  • Chain ID: The chain where the transaction occurred
The explorer will automatically detect and display:
  • Transaction status and progress
  • Cross-chain hops and bridges used
  • Asset transfers and swaps
  • Real-time updates as transactions progress

​
Integration for Custom Frontends

If you’re building a custom frontend and want to provide users with rich transaction visualization, you can generate explorer links that include comprehensive route data. For simple transaction tracking, redirect users to the explorer with URL parameters:
  • tx_hash: Comma-separated list of transaction hashes
  • chain_id: The initial source chain ID
  • is_testnet: Optional boolean parameter for testnet transactions
Example: 
https://explorer.skip.build/?tx_hash=ABC123,DEF456&chain_id=osmosis-1&is_testnet=true
This approach works well when you have transaction hashes but limited route context.

​
Advanced Rich Data Integration

For a superior user experience with complete transaction context, encode your route data as base64 and pass it via the data parameter. This enables the explorer to display detailed multi-hop transaction flows, user addresses, and complete route information. Example: 
https://explorer.skip.build/?data=eyJyb3V0ZSI6ey4uLn0sInVzZXJBZGRyZXNzZXMiOnsuLi59fQ==

​
Required Data Structure

The base64-encoded data must contain a JSON object with this structure: 
{
  route: SimpleRoute,                    // Route from /v2/fungible/route API response
  userAddresses: UserAddress[],          // User wallet addresses for each chain
  transactionDetails: TransactionDetails[] // Transaction details from /v2/tx/status
}

​
Implementation

import { SimpleRoute, UserAddress, TransactionDetails } from '@skip-go/client';

// Collect your data from Skip Go APIs
const routeData = {
  route: simpleRoute,              // From your /v2/fungible/route call
  userAddresses: userAddresses,    // Your user's addresses per chain  
  transactionDetails: txDetails    // From your /v2/tx/status polling
};

// Encode for the explorer
const jsonString = JSON.stringify(routeData);
const base64Encoded = btoa(jsonString); // Browser-compatible base64 encoding

// Generate the rich explorer URL  
const explorerUrl = `https://explorer.skip.build/?data=${base64Encoded}`;

// Redirect user or open in new tab
window.open(explorerUrl, '_blank');

​
Benefits for Your Users

​
Basic Integration Benefits

  • Quick Access: Users can easily view transaction details without leaving your app
  • Multi-Chain Support: Works across all supported chains and bridges
  • Real-time Updates: Live transaction status and progress tracking

​
Advanced Integration Benefits

  • Complete Transaction Context: Users see the full route, not just individual transactions
  • Multi-Hop Visualization: Clear view of complex transfers across chains and bridges
  • Address Mapping: Explorer knows which addresses belong to the user
  • Real-time Status: Current transaction state integrated with visual progress
  • Shareable Links: Users can bookmark or share complete transaction context

​
Best Practices

​
When to Use Basic vs Advanced Integration

Use Basic Integration when:
  • You only have transaction hashes available
  • Users initiated transactions outside your application
  • You want minimal integration effort
Use Advanced Integration when:
  • You have complete route information from Skip Go APIs
  • Users initiated transactions through your application
  • You want to provide the richest user experience

​
Common Use Cases

​
Transaction Confirmation Pages

After users submit a transaction, redirect them to the explorer with full context: 
// After transaction submission
const explorerUrl = generateExplorerLink(routeData);
window.location.href = explorerUrl;

​
Transaction History

Provide explorer links for each historical transaction: 
// In transaction history component
{transactions.map(tx => (
  <div key={tx.id}>
    <span>{tx.amount} {tx.asset}</span>
    <a href={generateExplorerLink(tx)} target="_blank">
      View Details
    </a>
  </div>
))}

​
Support and Debugging

Help users troubleshoot failed transactions by providing detailed explorer views: 
// For failed transactions
const supportUrl = generateExplorerLink(failedTransaction);
// Share this URL with support team or user
Best Practice: Always use the advanced base64 approach when you have access to complete route information from your Skip Go integration. This provides the richest user experience in the explorer.