W3M Custom QR

This library is a fork of @web3modal/ethers5 with additional features to control the modal window itself, such as adding new wallet connection buttons, logos of networks.

Usage

import {createWeb3Modal, defaultConfig} from "w3m-custom-qr/ethers5";
import { walletBase, desktopBase, mobileBase } from 'w3m-custom-qr';
import "w3m-custom-qr/react";

export const w3m_nets = [
  {
    chainId: 56,
    name: 'BSC mainnet',
    currency: 'BNB',
    explorerUrl: 'https://bscscan.com/',
    rpcUrl: 'https://bsc-dataseed1.binance.org/'
  },
  {
    chainId: 97,
    name: 'BSC testnet',
    currency: 'tBNB',
    explorerUrl: 'https://testnet.bscscan.com/',
    rpcUrl: 'https://data-seed-prebsc-1-s1.binance.org:8545/'
  },
];

const customWallet = {
  mobile: mobileBase({
    name: "Custom Mobile", 
    img: "",
    order: 10,
    mobile_link: "metamask://"
  }),
  desktop: desktopBase({
    img: "",
    name: "Custom  Desktop"
  })
}

walletBase([customWallet])

createWeb3Modal({
  ethersConfig: defaultConfig({metadata: {
    name: 'test',
    description: 'test',
    url: 'https://example.com/',
    icons: ['https://example.com/icons/logo.png']
  }}),
  chains: w3m_nets,
  projectId: YOUR_PROJ_ID
})

mobileBase

mobileBase({
  name, 
  img,
  order,
  mobile_link
})

Generates a wallet object for a mobile wallet.

• name - name of the wallet
• img - logo image URL
• order - display order
• mobile_link - deep link to open wallet on mobile
• Returns wallet object for use in wallet selector

desktopBase

desktopBase({
  img,
  name 
})

Generates a desktop wallet object.

• img - logo image URL
• name - wallet name
• Returns desktop wallet object

setInjected

setInjected(bool)

Set to false if you don't want to show Metamask injected connector

setWalletConnect

setWalletConnect(bool)

Set to false if you don't want to show WalletConnect button

setAllWallets

setAllWallets(bool)

Set to true if you want to show "All Wallets" button

setRecentWallets

setRecentWallets(bool)

Set to true if you want to show an additional position in the list for recently used wallets

walletBase

walletBase(bases)

Sets additional wallets to the modal window

• bases - array of wallet objects with mobileBase and/or desktopBase

setCustomImage

setCustomImage({ id: "eip155:1", imageUrl: "https://example.com/logo.png" })

Adds a logo image for the exact chain ID specified in the id key of the passed object