amaryfilo / connect-wallet

Connect Crypto Wallet by using CoinbaseWallet (WalletLink), KardiaChain, MetaMask browser extentions or mobile application and WalletConnect service by scanning Wallet Qr-code.

AMFI Connect Wallet

This package provides the ability to connect wallets to website or application via MetaMask extension (through a browser or the mobile application), WalletConnect service using QR code scanner, CoinbaseWallet extension and KardiaChain.

Features

• Connect to any blockchains.
• Add Contracts by providing Contract address and ABI code.
• Work with Contracts methods.
• Check transactions in blockchain.
• Add custom blockhain.

Usage

1. Install package.

Via NPM

npm install @amfi/connect-wallet

Via Yarn

yarn add @amfi/connect-wallet

2. Import and initialize ConnectWallet in project.

import { ConnectWallet } from '@amfi/connect-wallet';
const connectWallet = new ConnectWallet();

3. Add custom blockchain.

If you need to add custom blockhain use addChains(...chain) method before you create connect.

Usage example:

/**
 * Description:
 *
 * name - blockchain name.
 * chainID - blockchain id.
 * hex - blockchain id in hex format.
*/

const chains: IChain[] = [
	...
    {
      name: 'binance',
      chainID: 56,
      hex: '0x38',
    },
    {
      name: 'binance-test',
      chainID: 97,
      hex: '0x61',
    },
	...
  ];

connectWallet.addChains(this.chains);

4. Create configuration for Connect Wallet

Method connect(provider, network, settings).

Example configuration:

Want use Ethereum mainnet?
Set useProvider: infura and provide mainnet Infura.
Remove rpc if it needed.

/**
 * Description:
 *
 * name - blockchain name.
 * chainID - blockchain id.
 * hex - blockchain id in hex format.
 */

const config = {
  wallets: ['MetaMask', 'WalletConnect', 'CoinbaseWallet', 'KardiaChain'],
  network: {
    name: 'Ropsten',
    chainID: 3,
  },
  provider: {
    MetaMask: {
      name: 'MetaMask',
    },
    CoinbaseWallet: {
      name: 'CoinbaseWallet',
    },
    KardiaChain: {
      name: 'KardiaChain',
    },
    WalletConnect: {
      name: 'WalletConnect',
      useProvider: 'rpc', // Used to select the type of provider below
      provider: {
        infura: {
          infuraID: 'PASS_HERE_INFURA_ID', // Your id from Infura
        },
        rpc: {
          rpc: {
            // If you use Ethereum rpc, pass full Infura URL
            3: 'https://ropsten.infura.io/v3/PASS_HERE_BLOCKCHAIN_RPC',
            // For use this rpc change chainId below to 56
            56: 'https://bsc-dataseed.binance.org/',
          },
          chainId: 3, // Used to select a rpc above
        },
      },
    },
  },
  settings: {
    // Add provider type from wallets in this config
    providerType: true,
  },
};

connectWallet.connect(config);

RPC configuration:

/**
 * Description
 *
 * BLOCKCHAIN_NUMBER - used to identify what kind of blockhain need to use, ex.: ropsten: 3, rinkeby: 4
 * BLOCKCHAIN_RPC - blockhain rpc url
 * chainId - used to select rpc (equal to rpc.BLOCKCHAIN_NUMBER)
*/

rpc: {
	rpc: {
		// if use Ethereum rpc, pass full Infura URL with Infura Id
		[BLOCKCHAIN_NUMBER]: "BLOCKCHAIN_RPC",
		[BLOCKCHAIN_NUMBER]: "BLOCKCHAIN_RPC",
		...
		[BLOCKCHAIN_NUMBER]: "BLOCKCHAIN_RPC"
	},
	// What Blockchain need to use
	chainId: BLOCKCHAIN_NUMBER
},

5. Pass configuration to ConnectWallet.

You need to pass 3 configuration options: provider, network, settings in connect() method.

Provider

For MetaMask:

{
  name: string;
}

For Wallet Connect:

{
	name: string;
	useProvider?: string;
	provider?: {
		infura?: {
			infuraID?: string;
		}
		rpc?: {
			rpc: {
				[index: number]: string;
			};
			chainId?: number;
		};
	};
}

Network

/**
 * Description
 *
 * name - blockchain name
 * chainID - blockchain id
 *
 * All parameters required
 */

{
  name: string;
  chainID: number;
}

Settings

{
	// show in response your provider type: MetaMask/WalletConnect/etc.
	providerType?: boolean;
}

Pass configuration

connectWallet.connect(provider, network, settings).then(
  (connected: boolean) => console.log('connect wallet: ', connected),
  (err: any) => console.log('connect wallet error: ', err)
);

6. If connect established add contracts in Connect Wallet.

Need to use 3 parameters in the addContract: ContractName, address, abi.

interface:

/**
 * Description
 *
 * name - used to identify your contract in Connect Wallet ex.: Staking/Token
 * address - provide address ex.: 0x00000000000000000
 * abi - ABI from contract ex.: [{method...},{method...},{method...}]
*/

{
	name: string;
	address: string;
	abi: Array<any>;
}

connectWallet.addContract({'Staking1', '0x000...', ABI[]}).then((i) => {},(err) => {});
connectWallet.addContract({'Staking2', '0x000...', ABI[]}).then((i) => {},(err) => {});
connectWallet.addContract({'Token', '0x000...', ABI[]}).then((i) => {},(err) => {});

7. Use Contracts.

To use contracr methods use method contract(CONTRACT_NAME).

CONTRACT_NAME - pass your contact name that was added in step 5.

const start = connectWallet
  .contract('Staking1')
  .stakeStart('123')
  .send({ from: '0x000...' })
  .then((tx: any) => console.log(tx));

const end = connectWallet
  .contract('Staking2')
  .stakeEnd('123')
  .send({ from: '0x000...' })
  .then((tx: any) => console.log(tx));

const balance = connectWallet
  .contract('Token')
  .methods.balanceOf('0x000...')
  .call()
  .then(
    (balance: string) => console.log(balance),
    (err: any) => console.log(err)
  );

8. Get account and provider.

When the Connect established, you can get information about the account of the user wallet using the getaccounts () method.

connectWallet.getAccounts().then(
  (user: any) => console.log('account: ', user),
  (err: any) => console.log('error: ', err)
);

9. Check transaction.

Provide transaction Hash to txCheck() method for check if transaction are in blockchain or not.

connectWallet.txCheck('TX_HASH').then(
  (info: any) => console.log('info: ', info),
  (err: any) => console.log('tx error:', err)
);

10. Get current Web3.

Get current Web3 and access to all Web3 functions via currentWeb3() method.

const currentWeb3 = connectWallet.currentWeb3();

11. Subscribe on events.

Subscribe to events from current connection: connect, disconnect, chain change, account change and etc.

connectWallet.eventSubscriber().subscribe(
  (event: IEvent) => console.log('event from subscribe', event),
  (err: IEventError) => console.log('event error', err)
);

connect-wallet's Issues

Issues with webpack >= 5

Hello,

There are issues at install for using polyfill in the browser with webpack > 5

Also installing @coinbase/wallet-sdk which had to be done manually.

Thanks for the work.

Take care,

How to find chain information for a custom network?

Hello:
I see the repo, I want to know how to find network information for a custom network.
I need ChainID for token BTCBAM, it has a BEP20 contract address at: 0x79abC799ae4B749C01e07a60c8687A49D128eA1C
But this contract address seems not the native network, the native network is: BTCBAM, it has a blockchain explorer at: https://explorer.btcbam.com/
I have a wallet for this native token (not the BEP20 token), but I want to add this token to other wallet like: MetaMask.
But how do I know the ChainID to add this custom network and token?
Please advise,
Thanks,

Outdated WalletLink Code --> Needs to be updated to Coinbase Wallet SDK

Hi,

I work on the DevRel team at Coinbase and am submitting this issue to inform you that the WalletLink SDK has been deprecated in favor of our new Coinbase Wallet SDK. You can find more on that and how to upgrade to the latest version here.

Please let me know if you have any questions!

Thanks,
Trevor