@tineon/t9n 0.2.1 → 0.2.2

package/dist/index.js

@@ -1,5 +1,26 @@
 import { checkoutConfigSchema, T9N_DEFAULT_API_BASE_URL, } from "./types.js";
 import { CheckoutModal } from "./ui/modal.js";
+const T9N_NETWORK_LABELS = {
+    bitcoin: "Bitcoin",
+    ethereum: "Ethereum",
+    tron: "Tron",
+    bsc: "BSC",
+    polygon: "Polygon",
+    arbitrum: "Arbitrum",
+    avax: "Avalanche",
+    solana: "Solana",
+    lisk: "Lisk",
+    flow: "Flow",
+    ronin: "Ronin",
+    sei: "Sei",
+    fantom: "Fantom",
+    hedera: "Hedera",
+};
+// Networks on which each stablecoin is supported — determines per-chain chip expansion
+const T9N_STABLECOIN_NETWORKS = {
+    USDT: ["tron", "ethereum", "bsc", "polygon", "solana", "arbitrum", "avax"],
+    USDC: ["ethereum", "polygon", "bsc", "arbitrum", "avax", "solana"],
+};
 const DEFAULT_BUTTON_TEXT = "Pay with T9N";
 const DEFAULT_THEME = "solid";
 export class T9nCheckout {
@@ -59,8 +80,22 @@ export class T9nCheckout {
             this.expiresAt = new Date(session.expiresAt);
             this.cfg.hooks?.onSessionCreated?.(session);
             this.emitStatus("created");
-            this.modal = new CheckoutModal(this.currencies, {
-                onSelectCurrency: async (currency) => this.selectCurrency(currency),
+            // Build per-chain options — stablecoins expand into one row per supported network
+            const modalOptions = [];
+            for (const sym of this.currencies) {
+                const stablecoinNets = T9N_STABLECOIN_NETWORKS[sym];
+                if (stablecoinNets) {
+                    for (const net of stablecoinNets) {
+                        modalOptions.push({ symbol: sym, network: net, networkLabel: T9N_NETWORK_LABELS[net] ?? net });
+                    }
+                }
+                else {
+                    const net = this.defaultNetworkFor(sym);
+                    modalOptions.push({ symbol: sym, network: net, networkLabel: "" });
+                }
+            }
+            this.modal = new CheckoutModal(modalOptions, {
+                onSelectCurrency: async (symbol, network) => this.selectCurrency(symbol, network),
                 onConfirmPayment: async () => this.confirmPayment(),
                 onClose: () => this.close(),
             });
@@ -142,8 +177,7 @@ export class T9nCheckout {
         }
         return (await res.json());
     }
-    async selectCurrency(currency) {
-        const network = this.defaultNetworkFor(currency);
+    async selectCurrency(currency, network) {
         const res = await this.fetchWithTimeout(`${this.getApiBaseUrl()}/api/merchant/checkout/sessions/${this.sessionId}/select-currency`, {
             method: "POST",
             headers: {
@@ -172,12 +206,14 @@ export class T9nCheckout {
             throw new Error(`T9N_SELECT_ERROR_${res.status}: ${message}`);
         }
         const payload = (await res.json());
+        const resolvedNetwork = payload.network || network;
+        const networkLabel = T9N_NETWORK_LABELS[resolvedNetwork] ?? resolvedNetwork;
         this.modal?.setAddress(payload.depositAddress);
         this.modal?.setQrPayload(payload.depositAddress);
-        this.modal?.setDisclaimer(`Send exactly ${payload.expectedAmountCrypto} ${payload.currency} to the address below. Sending the wrong amount or asset can result in loss of funds.`);
+        this.modal?.setDisclaimer(`Send exactly ${payload.expectedAmountCrypto} ${payload.currency} on the ${networkLabel} network to the address below. Sending the wrong amount, asset, or network can result in permanent loss of funds.`);
         this.cfg.hooks?.onCurrencySelected?.({
             currency: payload.currency,
-            network,
+            network: resolvedNetwork,
             depositAddress: payload.depositAddress,
             expectedAmountCrypto: payload.expectedAmountCrypto,
         });
@@ -322,7 +358,9 @@ export class T9nCheckout {
                             this.emitFailOnce({ sessionId: this.sessionId, error: "checkout failed" });
                         }
                     }
-                    if (normalized === "pending_confirmation" || normalized === "awaiting_payment") {
+                    // pending_confirmation means the deposit was detected and is processing —
+                    // do NOT fire onFail; just let the timer and next poll resolve it.
+                    if (normalized === "awaiting_payment") {
                         if (this.hasAttemptedConfirm) {
                             this.modal?.showResult("failed", "No payment detected yet. Please try again.");
                             this.lastResultFailed = true;
@@ -393,6 +431,9 @@ export class T9nCheckout {
             AVAX: "avax",
             SOL: "solana",
             TRX: "tron",
+            ARB: "arbitrum",
+            USDT: "tron", // TRC-20 default (lowest fees, widest adoption)
+            USDC: "ethereum", // ERC-20 default
             LSK: "lisk",
             FLOW: "flow",
             RON: "ronin",
@@ -450,7 +491,7 @@ export class T9nCheckout {
                 break;
         }
     }
-    scheduleAutoClose(delayMs = 1200) {
+    scheduleAutoClose(delayMs = 3500) {
         this.skipCloseMark = true;
         if (this.closeTimeoutId) {
             window.clearTimeout(this.closeTimeoutId);

package/dist/types.d.ts

@@ -1,6 +1,8 @@
 import { z } from "zod";
-export declare const NATIVE_CURRENCIES: readonly ["BTC", "ETH", "BNB", "MATIC", "AVAX", "SOL", "TRX", "LSK", "FLOW", "RON", "SEI", "FTM", "HBAR"];
-export type NativeCurrency = (typeof NATIVE_CURRENCIES)[number];
+export declare const SUPPORTED_CURRENCIES: readonly ["BTC", "ETH", "BNB", "MATIC", "AVAX", "SOL", "TRX", "ARB", "USDT", "USDC", "LSK", "FLOW", "RON", "SEI", "FTM", "HBAR"];
+/** @deprecated Use SUPPORTED_CURRENCIES */
+export declare const NATIVE_CURRENCIES: readonly ["BTC", "ETH", "BNB", "MATIC", "AVAX", "SOL", "TRX", "ARB", "USDT", "USDC", "LSK", "FLOW", "RON", "SEI", "FTM", "HBAR"];
+export type NativeCurrency = (typeof SUPPORTED_CURRENCIES)[number];
 export type SupportedCurrency = NativeCurrency;
 export type T9nButtonTheme = "solid" | "light" | "outline";
 export type T9nButtonOptions = {

package/dist/types.js

@@ -1,5 +1,5 @@
 import { z } from "zod";
-export const NATIVE_CURRENCIES = [
+export const SUPPORTED_CURRENCIES = [
     "BTC",
     "ETH",
     "BNB",
@@ -7,6 +7,9 @@ export const NATIVE_CURRENCIES = [
     "AVAX",
     "SOL",
     "TRX",
+    "ARB",
+    "USDT",
+    "USDC",
     "LSK",
     "FLOW",
     "RON",
@@ -14,6 +17,8 @@ export const NATIVE_CURRENCIES = [
     "FTM",
     "HBAR",
 ];
+/** @deprecated Use SUPPORTED_CURRENCIES */
+export const NATIVE_CURRENCIES = SUPPORTED_CURRENCIES;
 export const T9N_DEFAULT_API_BASE_URL = "https://slimepay-server.up.railway.app";
 const trimmedString = () => z
     .string()
@@ -26,10 +31,10 @@ export const checkoutConfigSchema = z.object({
     amountNgn: z.number().finite().positive(),
     currencies: z
         .array(z.string().transform((v) => v.trim().toUpperCase()))
-        .min(1, { message: "At least one supported native currency is required" })
-        .max(13, { message: "Too many currencies provided" })
+        .min(1, { message: "At least one supported currency is required" })
+        .max(16, { message: "Too many currencies provided" })
         .superRefine((list, ctx) => {
-        const supported = new Set(NATIVE_CURRENCIES);
+        const supported = new Set(SUPPORTED_CURRENCIES);
         const seen = new Set();
         for (const [index, currency] of list.entries()) {
             if (!supported.has(currency)) {

package/dist/ui/modal.d.ts

@@ -1,10 +1,15 @@
+export type CurrencyOption = {
+    symbol: string;
+    network: string;
+    networkLabel: string;
+};
 export type ModalHandlers = {
-    onSelectCurrency: (currency: string) => Promise<void>;
+    onSelectCurrency: (symbol: string, network: string) => Promise<void>;
     onConfirmPayment: () => Promise<void>;
     onClose: () => void;
 };
 export declare class CheckoutModal {
-    private currencies;
+    private options;
     private handlers;
     private host;
     private root;
@@ -28,7 +33,7 @@ export declare class CheckoutModal {
     private chips;
     private confirmLabel;
     private selectedCurrency;
-    constructor(currencies: string[], handlers: ModalHandlers);
+    constructor(options: CurrencyOption[], handlers: ModalHandlers);
     private mount;
     private handleCurrencySelect;
     setConfirmLabel(label: string): void;

package/dist/ui/modal.js

@@ -1,6 +1,6 @@
 export class CheckoutModal {
-    constructor(currencies, handlers) {
-        this.currencies = currencies;
+    constructor(options, handlers) {
+        this.options = options;
         this.handlers = handlers;
         this.chips = [];
         this.confirmLabel = "I have made the payment";
@@ -94,19 +94,24 @@ export class CheckoutModal {
       .subtitle { font-size: 14px; color: var(--sp-text-muted); margin: 4px 0 0; }
 
       .grid-chips {
-        display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
+        display: flex; flex-direction: column; gap: 8px;
       }
 
       .chip {
         background: #fff; border: 1px solid var(--sp-border);
-        padding: 12px; border-radius: 16px;
-        display: flex; align-items: center; gap: 10px;
+        padding: 12px 14px; border-radius: 16px;
+        display: flex; align-items: center; gap: 12px;
         cursor: pointer; transition: all 0.2s;
-        font-weight: 600; font-size: 14px;
+        text-align: left; width: 100%;
       }
 
       .chip:hover { border-color: var(--sp-primary); background: #f8faff; }
-      .chip img { width: 24px; height: 24px; border-radius: 6px; }
+      .chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
+      .chip-img-placeholder { width: 32px; height: 32px; border-radius: 50%; background: #e2e8f0; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
+      .chip-text { flex: 1; min-width: 0; }
+      .chip-symbol { font-weight: 700; font-size: 14px; color: var(--sp-text); }
+      .chip-chain { font-size: 11px; color: var(--sp-text-muted); margin-top: 1px; }
+      .chip-arrow { color: #cbd5e1; flex-shrink: 0; }
 
       .payment-area { display: none; flex-direction: column; align-items: center; text-align: center; }
       .payment-area.active { display: flex; }
@@ -181,7 +186,6 @@ export class CheckoutModal {
 
       @media (max-width: 480px) {
         .modal { max-width: 100%; border-radius: 24px 24px 0 0; position: absolute; bottom: 0; max-height: 92vh; }
-        .grid-chips { grid-template-columns: 1fr; }
         .content { max-height: calc(92vh - 90px); overflow-y: auto; }
       }
     `;
@@ -227,15 +231,22 @@ export class CheckoutModal {
     `;
         const chipsContainer = document.createElement("div");
         chipsContainer.className = "grid-chips";
-        this.currencies.forEach((currency) => {
+        this.options.forEach((opt) => {
             const chip = document.createElement("button");
             chip.className = "chip";
-            const iconUrl = COIN_IMAGES[currency] || "";
+            const iconUrl = COIN_IMAGES[opt.symbol] || "";
+            const imgHtml = iconUrl
+                ? `<img src="${iconUrl}" alt="${opt.symbol}" />`
+                : `<div class="chip-img-placeholder">${opt.symbol[0]}</div>`;
             chip.innerHTML = `
-        ${iconUrl ? `<img src="${iconUrl}" />` : `<div style="width:24px;height:24px;background:#eee;border-radius:4px"></div>`}
-        <span>${currency}</span>
+        ${imgHtml}
+        <div class="chip-text">
+          <div class="chip-symbol">${opt.symbol}</div>
+          ${opt.networkLabel ? `<div class="chip-chain">${opt.networkLabel}</div>` : ""}
+        </div>
+        <svg class="chip-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 18 6-6-6-6"/></svg>
       `;
-            chip.onclick = () => this.handleCurrencySelect(currency);
+            chip.onclick = () => this.handleCurrencySelect(opt.symbol, opt.network);
             this.chips.push(chip);
             chipsContainer.appendChild(chip);
         });
@@ -302,14 +313,14 @@ export class CheckoutModal {
         this.root.append(style, overlay);
         document.body.appendChild(this.host);
     }
-    async handleCurrencySelect(currency) {
-        this.selectedCurrency = currency;
+    async handleCurrencySelect(symbol, network) {
+        this.selectedCurrency = symbol;
         this.selectionSection.style.display = "none";
         this.paymentSection.classList.add("active");
         this.resultSection.classList.remove("visible");
         this.qrEl.innerHTML = `<div class="spin" style="margin: 60px 0;">${loaderIconSvg()}</div><p style="font-size:12px;color:#64748b">Generating Address...</p>`;
         try {
-            await this.handlers.onSelectCurrency(currency);
+            await this.handlers.onSelectCurrency(symbol, network);
         }
         catch (e) {
             this.resetSelection();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tineon/t9n",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",