Getting Started

Install

You can install polkadot-sufficient-assets via different package manager.

Create Config

Create and export a new library config using createConfig.

import {
  chains,
  createConfig,
  createTheme,
  tokens,
} from "polkadot-sufficient-assets";
 
export const config = createConfig({
  sourceChains: [chains.polkadotAssetHubChain], // Specify the chain
  tokens: {
    pah: {
      token: tokens.USDT, // Token you want to transfer
      feeTokens: [tokens.DOT, tokens.USDT], // Tokens used to pay transaction fees
    },
  },
  useXcmTransfer: false,
  destinationChains: [chains.hydration],
});

In this example, PSA is configured to use the Polkadot AssetHub chain as source chain. USDT is token to transfer and we DOT or USDT as fee token.

Here’s a breakdown of the configuration options:

sourceChains: The blockchain networks your application will use. In this case, polkadotAssetHubChain.

tokens: The tokens your application will interact with, such as USDT for transferring, and DOT and USDT for paying fees.

useXcmTransfer: A boolean to enable or disable cross-chain message (XCM) transfer.

destinationChains: If cross-chain transfers are enabled, specify the chains involved, such as hydration.

Start using PSA in your application

Our library using Material UI (opens in a new tab) as core ui component so you can easy to customize the theme and color of our componennt.

We do have expose 2 components: PSADialog and PSAForm.

You need to Wrap the Dialog and Form with ConfigProvider and provide the config you have created at Step 2.

For React:

import {
  ConfigProvider,
  createTheme,
  PSADialog,
} from "polkadot-sufficient-assets";
 
import { config } from "./config";
 
function App() {
  const theme = createTheme({
    palette: {
      mode: "light",
    },
  });
 
  return (
    <ConfigProvider config={config}>
      <PSADialog theme={theme}>
        <button
          style={{
            outline: "none",
            color: "#fff",
          }}
        >
          Open Dialog
        </button>
      </PSADialog>
    </ConfigProvider>
  );
}
 
export default App;

For other UI frameworks:

We do expose 2 method to load web component so you can check out our example folder (opens in a new tab).

import { loadDialogWidget, loadFormWidget } from "polkadot-sufficient-assets";