Skip to content

Version 1.2.28 - 2026-01-16 14:54:49 #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kixo merged 1 commit into from
Jan 16, 2026
Merged

Version 1.2.28 - 2026-01-16 14:54:49 #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tailwind-plus-icpay",
"version": "1.2.27",
"version": "1.2.28",
"private": true,
"packageManager": "pnpm@9.12.3",
"scripts": {
Expand Down
179 changes: 1 addition & 178 deletions src/app/ledgers/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -28,180 +28,3 @@ This list updates periodically and is grouped by chain. If you don’t see a tok
## Token list

<LedgersTable />

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']`)

<CodeGroup title="Widget examples">

```tsx {{ title: 'Next.js' }}
'use client'
import { useEffect, useRef } from 'react'
import '@ic-pay/icpay-widget'
export default function Page() {
const ref = useRef<any>(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 <icpay-tip-jar ref={ref as any} />
}
```

```vue {{ title: 'Vue.js' }}
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import '@ic-pay/icpay-widget'
const el = ref<any>(null)
onMounted(() => {
if (!el.value) return
el.value.config = {
publishableKey: import.meta.env.VITE_ICPAY_PK,
amountsUsd: [1,5,10],
// chainTypes: ['ic','sol'],
// tokenShortcodes: ['ic_icp','sol_usdc'],
}
})
</script>
<template>
<icpay-tip-jar ref="el" />
</template>
```

```ts {{ title: 'Angular' }}
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'
import '@ic-pay/icpay-widget'
@Component({ selector: 'app-root', template: `<icpay-tip-jar #el></icpay-tip-jar>` })
export class AppComponent implements AfterViewInit {
@ViewChild('el', { static: true }) el!: ElementRef<any>
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' }}
<script type="module">import '@ic-pay/icpay-widget'</script>
<icpay-tip-jar id="el"></icpay-tip-jar>
<script>
el.config = {
publishableKey: 'pk_test_xxx',
amountsUsd: [1,5,10],
// chainTypes: ['ic','sol'],
// tokenShortcodes: ['ic_icp','sol_usdc'],
}
</script>
```

</CodeGroup>

<div className="not-prose">
<Button href="/sdk" variant="text" arrow="right">
<>Use tokens in the SDK</>
</Button>
</div>