Skip to main content

Add wallets into Astar Portal

Overview​

Users can connect to Astar portal using both EVM and Substrate based wallets. Here’s what you need to know about the integration of the wallets into Astar portal.

22

How to integrate​

Developers can create a PR to our portal for adding wallets to our portal. Here’s what you need to know about the integration of Substrate and Ethereum wallets into our portal.

Define the wallets variables​

The extension name enum value comes from:

const extensions = await getInjectedExtensions();
console.log('extensions', extensions); -> extensions[index] -> name
  1. Add the extension name at the SupportWallet enum.
  2. Add the SupportWallet.[new_value] to the WalletModalOption array.
  3. Add the SupportWallet.[new_value] to the SubstrateWallets array only if it is a Substrate wallet.

Add the wallets information​

Add the Substrate wallets information to the supportWalletObj object variable.

e.g.

export const supportWalletObj = {
  [SupportWallet.TalismanNative]: {
    img: require('/src/assets/img/logo-talisman.svg'),
    name: 'Talisman (Native)',
    source: SupportWallet.TalismanNative,
    walletUrl: 'https://app.talisman.xyz/',
    guideUrl: 'https://app.talisman.xyz/',
    isSupportBrowserExtension: true,
    isSupportMobileApp: false,
  },
};

Add the Ethereum wallets information to the supportEvmWalletObj object variable.

e.g.

export const supportEvmWalletObj = {
  [SupportWallet.TalismanEvm]: {
    img: require('/src/assets/img/logo-talisman.svg'),
    name: 'Talisman (EVM)',
    source: SupportWallet.TalismanEvm,
    walletUrl: 'https://app.talisman.xyz/',
    guideUrl: 'https://app.talisman.xyz/',
    isSupportBrowserExtension: true,
    isSupportMobileApp: false,
    ethExtension: 'talismanEth',
  },
};

Add a visual asset representing your wallet​

Add a small .svg or .png to the assets directory.

Requirements for creating a PR​

  1. Developers should have tested sending transactions(see below) from our portal.

    1. Substrate wallets (Such as Polkadot.js)
      1. Native token transfer
      2. XCM assets transfer
      3. XCM transfer
        1. Deposit
        2. Withdrawal
      4. dApp staking transfer
        1. Stake
        2. Withdrawal
        3. Nomination transfer
    2. EVM wallets (Such as MetaMask)
      1. Native token transfer
      2. ERC20 token transfer
      3. XC20(XCM assets) token transfer
      4. XCM transfer
        1. Withdrawal

  2. Submit the Subscan or Blockscout links (both Astar and Shiden networks) for transaction details of the items listed above.

  3. Submit screen recordings of the connect, a transaction and account switch visual interactions.

  4. Deploy the forked app and submit the staging URL(ref).