Add wallets into Astar Portal

Overview

Users can connect to Astar portal using both EVM and Substrate based wallets. Below are the basic steps and important links needed to integrate a new wallet into the Astar portal.

How to integrate

Developers can create a PR to our portal for adding wallets to our portal. We'll walk you through the steps below.

Define the wallet 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 wallet information

For Substrate wallets, add 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,
  },
};

For Ethereum wallets, add 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 must test sending transactions from our portal. Perform basic tests using the guide below:

   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 connect, a transaction, and account switch visual interactions.

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