diff --git a/package.json b/package.json index e62a5a2..ca22ad6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwind-plus-icpay", - "version": "1.2.27", + "version": "1.2.28", "private": true, "packageManager": "pnpm@9.12.3", "scripts": { diff --git a/src/app/ledgers/page.mdx b/src/app/ledgers/page.mdx index be09087..2039d21 100644 --- a/src/app/ledgers/page.mdx +++ b/src/app/ledgers/page.mdx @@ -3,7 +3,7 @@ import LedgersTable from '@/components/LedgersTable' export const metadata = { title: 'Tokens (Shortcodes)', description: - 'Browse supported tokens by chain, with their shortcode and contract/canister address. Prefer token shortcodes (e.g., ic_icp, base_usdcoin) when creating payments.', + 'Browse supported tokens by chain, with their shortcode and contract/canister address. Prefer token shortcodes (e.g., ic_icp, base_usdc) when creating payments.', } export const sections = [ @@ -28,180 +28,3 @@ This list updates periodically and is grouped by chain. If you don’t see a tok ## Token list - -export const metadata = { - title: 'Tokens', - description: - 'Supported tokens, canister IDs, symbols, price data, and how to use them via SDK and Widget.', -} - -export const sections = [ - { title: 'Overview', id: 'overview' }, - { title: 'Data model', id: 'data-model' }, - { title: 'Using with SDK', id: 'using-with-sdk' }, - { title: 'Using with Widget', id: 'using-with-widget' }, -] - -# Tokens - -ICPay supports verified tokens across chains (IC ICRC, EVM, and Solana). You can fetch lists (with or without price data), resolve IDs by symbol/shortcode, and read detailed metadata. {{ className: 'lead' }} - -## Overview - -- Each token provides `id`, `name`, `symbol`, `shortcode?`, `canisterId`, `decimals`, `fee`, `verified`, and optional price data. -- Prices are available when configured; USD conversions are supported via SDK helpers. - -## Data model - -Selected fields exposed by the SDK: - -```ts -type LedgerPublic = { - id: string - name: string - symbol: string - shortcode?: string | null - canisterId: string - chainId?: string // backend chain UUID or chain id (as string) - decimals: number - logoUrl: string | null - verified: boolean - fee: string | null - currentPrice: number | null - lastPriceUpdate: string | null -} -``` - -Detailed info: - -```ts -type SdkLedger = { - id: string - name: string - symbol: string - chainId?: string // backend chain UUID or chain id (as string) - shortcode?: string | null - canisterId: string - decimals: number - logoUrl: string | null - verified: boolean - fee: string | null - network: 'mainnet' | 'testnet' - description: string | null - lastBlockIndex: string | null - coingeckoId: string | null - currentPrice: number | null - lastPriceUpdate: string | null - createdAt: string - updatedAt: string -} -``` - -Notes: -- `shortcode` is a human-friendly token identifier (e.g., `ic_icp`, `ic_ckusdc`) that can be used in UX and filtering. -- `chainId` refers to the underlying chain (ICPay backend UUID) associated to the token. -- On non‑IC chains, `canisterId` represents the on‑chain token address (e.g., ERC‑20 address on EVM, SPL mint address on Solana). For native SOL, the mint can be empty and is handled internally. - -## Using with SDK - -```ts -import { Icpay } from '@ic-pay/icpay-sdk' -const icpay = new Icpay({ publishableKey: 'pk_test_xxx' }) - -const list = await icpay.getVerifiedLedgers() -const idBySymbol = await icpay.getLedgerCanisterIdBySymbol('ICP') -const info = await icpay.getLedgerInfo(idBySymbol) -const withPrices = await icpay.getAllLedgersWithPrices() - -// Convert 10 USD to token amount for a token -const calc = await icpay.calculateTokenAmountFromUSD({ usdAmount: 10, ledgerSymbol: 'ICP' }) -``` - -## Using with Widget - -Widgets fetch verified tokens automatically. You can constrain choices via multichain filters in the widget config: -- `chainTypes?: Array<'ic' | 'evm' | 'sol'>` -- `chainShortcodes?: string[]` (e.g., `['ic','base','sol']`) -- `tokenShortcodes?: string[]` (e.g., `['ic_icp','ic_ckusdc','sol_usdc']`) - - - -```tsx {{ title: 'Next.js' }} -'use client' -import { useEffect, useRef } from 'react' -import '@ic-pay/icpay-widget' -export default function Page() { - const ref = useRef(null) - useEffect(() => { - if (!ref.current) return - ref.current.config = { - publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK, - amountsUsd: [1,5,10], - // Optional filters to limit networks/tokens: - // chainTypes: ['ic','evm','sol'], - // chainShortcodes: ['ic','base','sol'], - // tokenShortcodes: ['ic_icp','ic_ckusdc','sol_usdc'], - } - }, []) - return -} -``` - -```vue {{ title: 'Vue.js' }} - - -``` - -```ts {{ title: 'Angular' }} -import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core' -import '@ic-pay/icpay-widget' -@Component({ selector: 'app-root', template: `` }) -export class AppComponent implements AfterViewInit { - @ViewChild('el', { static: true }) el!: ElementRef - ngAfterViewInit() { - this.el.nativeElement.config = { - publishableKey: (window as any).env?.ICPAY_PK || 'pk_test_xxx', - amountsUsd: [1,5,10], - // tokenShortcodes: ['ic_icp','ic_ckusdc','sol_usdc'], - } - } -} -``` - -```html {{ title: 'No framework' }} - - - -``` - - - -
- -
- -