@aurora-is-near/intents-swap-widget (英语)

反应 跨链互换部件 由 近亲意向并让用户将任何支持的资产互换到您的应用程序中 35个以上连锁店 从一个UI,而你每次交换都收费.

[TIP] 只需要一个有钱包连接的工作部件? 使用 @aurora-is-near/intents-swap-widget-standalone。这个软件包(核心)用于应用 已连接钱包 并想要完全控制.

目录

• 看着
• 部件工作室
• 选择您的整合
• 快开始
• 如何运作
• 钱包和链式适配器
• 配置
• 部件和活动
• 主题和本地化
• 子路径导出( 建立您的用户界面)
• 解决问题
• 文件地图

看着

部件工作室

部件工作室 用于部件的无码仪表板。 用来:

• 🔑 拿你的API钥匙. 需要这种服务,费用也是在其中配置的.
• 🌐 选择网络和符号,设置默认销售/购买令牌,并选择保密模式.
• 🎨 设计它:干净或粗体风格,口音和背景颜色,角半径,容器.
• 👀 预览现场 在运输之前.
• 📦 装入里面数字 : 嵌入您的应用程序 给你一个 iframe 链接 或现成的 反应片段。 。 。 .
• 📊 下载报表 使用您的 API 密钥( CSV) 进行互换.

[注] API 密钥是 不是秘密的,我告诉你. 以前端代码运输是安全的.

选择您的整合

flowchart TD
    A[I want a swap widget in my app] --> B{Need code-level control?}
    B -- No --> IF["<b>iframe</b><br/>Copy the link from Widget Studio"]
    B -- Yes --> C{Does your app already<br/>connect wallets?}
    C -- No --> SA["<b>@aurora-is-near/intents-swap-widget-standalone</b><br/>Wallet modal built in"]
    C -- Yes --> CORE["<b>@aurora-is-near/intents-swap-widget</b><br/>+ chain adapters you need"]

快开始

1. 安装 核心软件包和 适配器 对于每个链条家族,您的钱包支持:

npm install @aurora-is-near/intents-swap-widget
# Add only what you need:
npm install @aurora-is-near/intents-swap-widget-evm      # Ethereum, Base, Arbitrum, …
npm install @aurora-is-near/intents-swap-widget-solana   # Solana
npm install @aurora-is-near/intents-swap-widget-stellar  # Stellar

2. 招标 内部部件 WidgetConfigProvider数字 :

import '@aurora-is-near/intents-swap-widget/styles.css';

import {
  Widget,
  WidgetConfigProvider,
} from '@aurora-is-near/intents-swap-widget';
import { evm } from '@aurora-is-near/intents-swap-widget-evm';

export function Swap() {
  const { address, connect, disconnect } = useYourEvmWallet(); // your wallet lib

  return (
    <WidgetConfigProvider
      config={{
        apiKey: 'YOUR_STUDIO_API_KEY',
        connectedWallets: { default: address },
        providers: { evm: window.ethereum }, // any EIP-1193 provider
        plugins: { evm },
        onWalletSignin: connect,
        onWalletSignout: disconnect,
      }}
      theme={{ colorScheme: 'dark', accentColor: '#bc9cf8' }}>
      <Widget />
    </WidgetConfigProvider>
  );
}

这是一个工作交换部件。 下一个 : 添加更多链条, (中文(简体) ), 限制符号,或 和牌子对齐。 。 。 .

如何运作

部件从未持有用户资金 。 每次交换都是 引文 存款 结算 流程 :

sequenceDiagram
    autonumber
    actor U as User
    participant W as Swap Widget
    participant API as Aurora Intents API
    participant P as Chain adapter + wallet
    participant NI as NEAR Intents

    U->>W: Pick tokens and amount
    W->>API: Request quote (apiKey, fees, slippage)
    API-->>W: Quote + one-time deposit address
    U->>W: Click "Swap"
    W->>P: makeTransfer(amount → deposit address)
    P-->>W: Transaction hash (user signs in wallet)
    NI->>NI: Solvers fill the intent
    W->>API: Poll swap status
    API-->>W: Success, funds sent to recipient

链式适配器plugins.evm, (中文(简体) ), plugins.sol,.)只有手柄 步骤 5:从用户钱包中将资金送到源链上的存款地址. 其余由一切连锁所分.

钱包和链式适配器

核心包不捆绑链式SDK. 每个连锁店都传三道:

任何支持的链条可以是 目标,无论用户是否有钱包。 与 allowSwapWithExternalWallet,用户也可以通过发送到QR-代码地址从任何链中存入.

import { evm } from '@aurora-is-near/intents-swap-widget-evm';
import { sol } from '@aurora-is-near/intents-swap-widget-solana';
import { stellar } from '@aurora-is-near/intents-swap-widget-stellar';

const config = {
  apiKey: 'YOUR_STUDIO_API_KEY',
  connectedWallets: {
    default: evmAddress,
    sol: solanaAddress,
    stellar: stellarAddress,
    near: nearAccountId,
    ton: tonAddress,
  },
  providers: {
    evm: window.ethereum,
    sol: { publicKey, signMessage, signTransaction },
    stellar: { publicKey: stellarAddress, signMessage, signTransaction },
    near: () => nearWallet,
  },
  plugins: { evm, sol, stellar },
  onWalletSignin: openWalletModal,
  onWalletSignout: disconnect,
};

Privy、NEAR和TON的适应指南: 钱包连接文件。 。 。 .

配置

一切经过 config 参考文献 WidgetConfigProvider其他道具: theme, (中文(简体) ), localisation, (中文(简体) ), rpcs, (中文(简体) ), balanceViaRpc。这些是大多数集成方法:

<WidgetConfigProvider
  config={{
    apiKey: 'YOUR_STUDIO_API_KEY',
    allowedChainsList: ['eth', 'base', 'arb', 'sol', 'near'],
    allowedTokensList: ['USDC', 'USDT', 'ETH', 'SOL'],
    appFees: [{ recipient: 'your-app.near', fee: 20 }], // 0.2%
    slippageTolerance: 50, // 0.5%
  }}>
  <Widget />
</WidgetConfigProvider>

📖 充分参考(40+选项): 部件配置文件。一个内存副本住在 docs/configuration.md,则 WidgetConfig 类型在 src/types/config.ts。 。 。 . yarn check-docs 保持医生和类型同步.

部件和活动

活动: 聆听传输管道 onMsg数字 :

<Widget
  onMsg={(msg) => {
    if (msg.type === 'on_transfer_success') {
      analytics.track('swap', { hash: msg.hash });
    }
  }}
/>

自定义转让:自己寄出押金(如为TON)并返还散列:

<Widget
  makeTransfer={async (args) => {
    const hash = await sendTon(args.address, args.amount);
    return { hash, transactionLink: `https://tonviewer.com/transaction/${hash}` };
  }}
/>

📖 部件文件

主题和本地化

[大 总是导入 @aurora-is-near/intents-swap-widget/styles.css如果您的应用程序有全局 CSS 重置,请将其包入 @layer base { … },否则 Tailwind 分层会删除部件的间隔.

子路径导出( 建立您的用户界面)

如果预建部件不符合您的使用大小写, 直接使用这些部件 :

解决问题

📖 解决问题文件 • 妇女 打开一个问题

文件地图

许可证

麻省理工学院