Home

SubWallet-Connect

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.

Features

Minimal Dependencies: All wallet dependencies are included in separate packages, so you only include the ones you want to use in your app.
Multiple Wallets and Accounts Connection: Allow your users to connect multiple wallets and multiple accounts within each wallet at the same time to your app.
Multiple Chain Support: Allow users to switch between chains/networks with ease.
Account Center: A persistent interface to manage wallet connections and networks, with a minimal version for mobile
Notify: Real-time transaction notifications for the connected wallet addresses for all transaction states
Wallet Provider Ethereum Standardization: All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085 and EIP-3326 specifications.
Wallet Provider Substrate: For Substrate wallets, we provide 2 connection solutions. This includes injected wallets with available signers, and other connections like hardware wallets, WalletConnect, and Polkadot Vault. Additionally, we offer a provider similar to Ethereum wallets, supporting various methods such as polkadot_signTransaction, polkadot_signMessage, polkadot_sendTransaction, polkadot_getBalance, and polkadot_requestAccounts
Dynamic Imports: Supporting multiple wallets in your app requires a lot of dependencies. Onboard dynamically imports a wallet and its dependencies only when the user selects it, so that minimal bandwidth is used.

Quickstart

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
    },
    {
      id: 42161,
      token: 'ARB-ETH',
      label: 'Arbitrum One',
      rpcUrl: 'https://rpc.ankr.com/arbitrum'
    },
    {
      id: '0xa4ba',
      token: 'ARB',
      label: 'Arbitrum Nova',
      rpcUrl: 'https://nova.arbitrum.io/rpc'
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ],
 chainsPolkadot:[ 
   {
      id: '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
      namespace: 'substrate',
      token: 'DOT',
      label: 'Polkadot',
      rpcUrl: `polkadot.api.subscan.io`,
      decimal: 10
   },
   {
      id: '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe',
      label: 'Kusama',
      decimal: 12,
      namespace: 'substrate',
      token: 'KSM',
      rpcUrl: 'kusama.api.subscan.io'
   },
})

const wallets = await onboard.connectWallet()

console.log(wallets)

if (wallets[0]?.type === 'evm') {
  // create an ethers provider with the last connected wallet provider
  const ethersProvider = new ethers.providers.Web3Provider(
    wallets[0].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()
  console.log(receipt)
}else if(wallets[0]?.type === 'substrate') {

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

     transferExtrinsic.signAndSend(senderAddress, { 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}`);
          }
     })
 })
}

SubWallet Connect migration guide

If you're coming from v1, we've created a migration guide for you.

Documentation

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

Core Repo

Core

Injected Wallets

Injected

SDK Wallets

Hardware Wallets

Frameworks

React

Test out the demo app

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

Clone the repo: git clone [email protected]:Koniverse/Subwallet-Connect.git
Change in to the sw-test directory: cd sw-test
Checkout the SubWallet Connect feature branch: git checkout sw-dev
Install the dependencies: yarn (if running a M1 mac - yarn install-m1-mac)
Run all packages in dev mode: yarn dev
Direct to demo/packages : cd .\packages\demo\
Running start to view demo : yarn start
To view the demo app in the browser after running the above steps navigate to http://localhost:8080

Provide feedback

Saved searches

Use saved searches to filter your results more quickly