Browser apps

​

Two ways to reach the hub

​

Through your backend: proxyTransport

import { createInteropClient, proxyTransport } from "@c8ntinuum/infinity-interop-sdk";

const client = createInteropClient({
  transport: proxyTransport({
    url: "/api/interop", // where your backend mounts createInteropProxy
    headers: () => ({ authorization: `Bearer ${yourSessionToken()}` }), // YOUR auth, not the hub's
  }),
});

​

With a project id: projectTransport

import { createInteropClient, projectTransport } from "@c8ntinuum/infinity-interop-sdk";

const client = createInteropClient({
  transport: projectTransport({
    baseUrl: "https://proxy-api.infinimesh.net", // the gateway's origin: the SDK adds /v1
    projectId: "c8n_pk_…", // your project id, from its page in the hub dashboard
  }),
});

• List your pages’ origins on the project in the hub dashboard: the exact scheme, host and port of each page, and for development, for example, http://localhost:3000. While the list is empty, any origin is accepted; once it is set, a page on an unlisted origin gets EPX0010 (403).
• Every route but the order history is open (PROJECT_ROUTES): the catalog, the quotes, order submission, both status views, the chain facts and the refund routes. GET /orders would show every visitor all of your orders: a call to it throws an InteropError (invalid-input) before any request.
• Keep the ids of the orders the page submits (the submitted event). The order history is not open to a project id, so list those ids yourself.
• Tracking and refunds work as on a server. The chain facts, the open flow’s lifecycle view and the refund routes are open to a project id, so executeQuote follows an order to its end, the filled event included, and the page can refund an order itself (History and refunds).
• It names the visitor. The hub requires X-Infinity-Subject on the quotes, order submission and GET /order/{orderId}/status, so the transport sends one random id per browser and project there: visitor- and a UUID, kept in localStorage (for the life of the transport when storage is unavailable). Each visitor’s quotes and statuses stay apart, and a reload keeps the same id. A subject on the transport, the client or a call sends yours instead. The project id is public, so anyone can send any subject: it labels a visitor and proves nothing. Scope your signed-in users from your server (Authentication — your users).
• The transport sends x-project-id, Content-Type on a POST, the subject where the hub requires it and the standard Accept, nothing more: the gateway sets the rest. It refuses a secret key in projectId, with a message that says so.
• The gateway limits each visitor IP, plus a pool shared by every visitor of your project; a 429 is a HubError whose retryAfterMs says how long to wait. Its timeouts are 25 s on quotes, 12 s on reads and 15 s on submissions, a little longer than the gateway’s own.

​

The user’s wallets

import { evmWalletFromEip1193, jsonRpcProvider } from "@c8ntinuum/infinity-interop-sdk";

const evm = evmWalletFromEip1193(window.ethereum, {
  // Reads (allowances, receipts, block time) through YOUR RPC, for any chain, not only the wallet's current one.
  readProvider: (chainId) => jsonRpcProvider(`/api/rpc/eip155-${chainId}`),
  // Refuse to send unless the wallet's chain contains this block: a test fork answers chain id 1 too.
  chainInstances: { 1: { blockNumber: 26_090_310n, blockHash: "0x1345…6864" } },
});

import type { Eip1193Provider } from "@c8ntinuum/infinity-interop-sdk";

type Announced = { info: { uuid: string; name: string; icon: string; rdns: string }; provider: Eip1193Provider };
const installed = new Map<string, Announced>(); // by rdns: MetaMask is "io.metamask"

window.addEventListener("eip6963:announceProvider", (event) => {
  const detail = (event as CustomEvent<Announced>).detail;
  installed.set(detail.info.rdns, detail); // show detail.info.name, and detail.info.icon in an <img>
});
window.dispatchEvent(new Event("eip6963:requestProvider"));

// Once the user picks one:
const evm = evmWalletFromEip1193(picked.provider, { readProvider, chainInstances });

import { getWallets } from "@wallet-standard/app";
import { solanaRpc, solanaWalletFromStandard } from "@c8ntinuum/infinity-interop-sdk/solana";

const wallet = getWallets().get().find((w) => "solana:signTransaction" in w.features)!;
const account = wallet.accounts[0]!; // after the wallet's standard:connect
const solana = solanaWalletFromStandard(wallet, account, {
  chain: "solana:mainnet", // the Wallet Standard chain id of the cluster you use
  rpc: solanaRpc("/api/rpc/solana-mainnet"),
});

​

A bridge screen, step by step

const result = await client.executeQuote({
  quote,
  wallets: { evm, solana },
  onEvent: (event) => timeline.push(event), // steps, checks, re-quotes, submission, status, fill
});

​

History and refunds

​

A complete example

• Simple, a swap page with the essentials in the c8ntinuum look: the two tokens and the amount, a quote that refreshes on its own, one button that says what to do next, the route as the order moves (signed, submitted, filled), and your orders with their state and a refund button. It connects with your project id.
• Dev, the walk-through: a Connection card for your project id (App ID, straight to the gateway) or your proxy server (examples/proxy-server), the step-by-step timeline, the check table and the raw wire calls.