Home

Awesome

SubConnect

Providing an efficient and easy solution for connecting Polkadot, Substrate, & Ethereum wallets. Drawing insights from Blocknative's web3-onboard, we've enhanced our capabilities for seamless integration with Substrate wallets.

New Update

We have developed the ability to further extend the connection of substrate wallets. SDK Substrate Wallets

Features

Quickstart

Note: If you're still unsure about following our instructions below, you can run the demo that we have prepared. The result is our SubWallet-Connect. Install the core Onboard library, the injected wallets module and optionally ethers js and polkadot js to support browser extension and mobile wallets:

NPM npm i @subwallet-connect/core @subwallet-connect/injected-wallets ethers

Yarn yarn add @subwallet-connect/core @subwallet-connect/injected-wallets ethers @polkadot/extension-inject

Then initialize in your app:

import Onboard from '@subwallet-connect/core';
import injectedModule from '@subwallet-connect/injected-wallets';
import subwalletModule from '@subwallet-connect/subwallet';
import subwalletPolkadotModule from '@subwallet-connect/subwallet-polkadot';
import type {EIP1193Provider, SubstrateProvider} from "@subwallet-connect/common";
import {ethers} from 'ethers';
import {ApiPromise, WsProvider} from '@polkadot/api';

const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
const ws = 'wss://rpc.polkadot.io'

const injected = injectedModule()
const subwalletWallet = subwalletModule()
const subwalletPolkadotWalet = subwalletPolkadotModule()

const onboard = Onboard({
  wallets: [injected, subwalletWallet, subwalletPolkadotWalet],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: MAINNET_RPC_URL
    }
  ],
  chainsPolkadot: [
    {
      id: '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
      namespace: 'substrate',
      token: 'DOT',
      label: 'Polkadot',
      rpcUrl: `polkadot.api.subscan.io`,
      decimal: 10
    }
  ]
})

const wallets = await onboard.connectWallet()
const wallet = wallets[0]

if (wallet?.type === 'evm') {
  // create an ethers provider with the last connected wallet provider
  const ethersProvider = new ethers.providers.Web3Provider(
    wallet.provider as EIP1193Provider,
    'any'
  )

  const signer = ethersProvider.getSigner()

  // send a transaction with the ethers provider
  const txn = await signer.sendTransaction({
    to: '0x',
    value: 100000000000000
  })

  const receipt = await txn.wait()
} else if (wallet?.type === 'substrate') {

  const api = new ApiPromise({
    provider: new WsProvider(ws)
  });
  api.isReady().then(() => {
    const transferExtrinsic = api.tx.balances.transferKeepAlive(recipientAddress, amount);

    transferExtrinsic.signAndSend(senderAddress, {signer: wallet.signer}, ({status, txHash}) => {
      if (status.isInBlock) {
        console.log(txHash.toString());
        console.log(`Completed at block hash #${status.asInBlock.toString()}`);
      } else {
        console.log(`Current status: ${status.type}`);
      }
    })
  })
}

Documentation

For full documentation, check out the README.md for each package or the docs page here from ethereum wallet:

Core Repo

Injected Wallets

SDK Wallets

Hardware Wallets

Frameworks

Test out the demo app

If you would like to test out the current functionality of SubWallet Connect in a small browser demo, then: