@paraport/sdk

UI layer for seamless integration of ParaPort cross-chain teleportation functionality.

Installation

pnpm add @paraport/sdk polkadot-api

Install Peer Dependencies

ParaPort SDK requires polkadot-api in your application. Install it as a peer dependency:

# Required peer dependency
pnpm add polkadot-api

Build

• Prerequisites: build @paraport/static, @paraport/core, and @paraport/vue first
• From repo root:
  • pnpm --filter @paraport/static build
  • pnpm --filter @paraport/core build
  • pnpm --filter @paraport/vue build
  • pnpm --filter @paraport/sdk build

Topological order across packages:

• @paraport/static → @paraport/core → @paraport/vue → @paraport/sdk → @paraport/react

See TESTING.md for end-to-end build and test flow.

Component Usage

Basic Integration

import '@paraport/sdk/style'
import * as paraport from '@paraport/sdk'
import { connectInjectedExtension } from 'polkadot-api/pjs-signer'

const main = async () => {
  // Required signer (polkadot-api compatible)
  const getSigner = async () => {
    const ext = await connectInjectedExtension('talisman', 'Your App')
    const account = ext.getAccounts()[0]
    return account.polkadotSigner
  }

  paraport.init({
    integratedTargetId: 'root',
    address: USER_ADDRESS,
    amount: '10000000000', // 1 DOT
    chain: 'AssetHubPolkadot',
    asset: 'DOT',
    getSigner,
    label: 'Mint',
    logLevel: 'DEBUG',
    onReady: (session) => {
      console.log('🚀 ParaPort ready!', session)
    },
    onSubmit: ({ autoteleport, completed }) => {
      console.log('📦 Submit button pressed')
      console.log('💥 Autoteleport: ', autoteleport)
      console.log('✅ Completed: ', completed)
    },
    onCompleted: () => {
      console.log('✅ Auto-teleport successfully completed!')
    },
    onAddFunds: () => {
      console.log('💰 Add funds button pressed')
    },
  })
}

main()

With custom endpoints (optional)

import '@paraport/sdk/style'
import * as paraport from '@paraport/sdk'
paraport.init({
  integratedTargetId: 'root',
  address: USER_ADDRESS,
  amount: '10000000000',
  chain: 'AssetHubPolkadot',
  asset: 'DOT',
  endpoints: {
    AssetHubPolkadot: ['wss://statemint.api.onfinality.io/public-ws'],
    Polkadot: ['wss://polkadot-rpc.publicnode.com']
  },
})

Theming

You can customize the UI via CSS variables or per instance:

• Global: override tokens under .paraport in your app stylesheet using cascade layers.
• Per instance: pass appearance (map of CSS variables) and themeMode to init.

paraport.init({
  integratedTargetId: 'root',
  // ...required params
  appearance: { '--radius': '12px', '--accent-blue': '#4f46e5' },
  themeMode: 'auto', // 'light' | 'dark' | 'auto'
})

Props Documentation

MountOptions

| Property | Type | Description | |----------|------|-------------| | integratedTargetId | string | DOM element ID for component mounting | | address | string | User's address | | amount | string | Amount to be teleported | | chain | string | Chain to be teleported to | | chains | string[] | Optional list of allowed chains to scope routing/UX | | asset | string | Asset to be teleported | | endpoints | Record<string, string[]> | Optional RPC endpoints per chain to override defaults | | getSigner | () => Promise | Required function returning a polkadot-api signer | | label | string | Button display text | | logLevel | string | Log level for debugging (e.g., 'DEBUG') | | onSubmit | Function | Callback on form submission with { autoteleport, completed } parameters | | onCompleted | Function | Callback on successful teleport | | onReady | Function | Callback when UI is ready for interaction | | onAddFunds | Function | Callback when user clicks to add funds |

License

MIT