@3swallet.js/web3-onboard-connector

Web3-onboard connectors for 3S Wallet supported third-party:

• web3-onboard

For more details, read the documentation

Installation

• yarn:

yarn add @3swallet.js/-connector

• npm:

npm install @3swallet.js/web3-onboard-connector

Quick start

import Web3OnBoardConnector from '@3swallet.js/web3-onboard-connector';
import { useState } from 'react';
import walletConnectModule from '@web3-onboard/walletconnect';
import injectedModule from '@web3-onboard/injected-wallets';
import Onboard from '@web3-onboard/core';

const toHex = (num: number): string => {
  const val = Number(num);
  return '0x' + val.toString(16);
};

const ETH_RPC_URL = `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`;
const BNB_RPC_URL = `https://bscrpc.com`;

const wallet3S = Web3OnBoardConnector({
  rpc: {
    1: `https://mainnet.infura.io/v3/${process.env.infuraKey}`,
    56: 'https://bscrpc.com',
  },
});
const walletConnect = walletConnectModule();
const injected = injectedModule();
const onboard = Onboard({
  wallets: [wallet3S, walletConnect, injected],
  chains: [
    {
      id: toHex(1), // chain ID must be in hexadecimel
      token: 'ETH',
      namespace: 'evm',
      label: 'Ethereum Mainnet',
      rpcUrl: ETH_RPC_URL,
    },
    {
      id: toHex(56),
      token: 'BNB',
      namespace: 'evm',
      label: 'BNB Chain',
      rpcUrl: BNB_RPC_URL,
    },
  ],
  appMetadata: {
    name: 'My App',
    icon: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg',
    logo: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg',
    description: 'My app using Onboard',
    recommendedInjectedWallets: [
      { name: 'MetaMask', url: 'https://metamask.io' },
    ],
  },
});

export function Index() {
  const [_, setProvider] = useState<any>(null);
  const [account, setAccount] = useState<string>('');
  const [chainId, setChainId] = useState<number | string>(0);
  const [isLoading, setIsLoading] = useState(false);

  const connectWallet = async () => {
    try {
      const wallets = await onboard.connectWallet();
      setIsLoading(true);
      const { accounts, chains, provider } = wallets[0];
      setAccount(accounts[0].address);
      setChainId(chains[0].id);
      setProvider(provider);
      setIsLoading(false);
    } catch (error) {
      console.error(error);
    }
  };

  const disconnect = async () => {
    const [primaryWallet] = await onboard.state.get().wallets;
    if (!primaryWallet) return;
    await onboard.disconnectWallet({ label: primaryWallet.label });
    setAccount('');
    setChainId(0);
    setProvider(null);
  };

  return (
    <div className="wrapper">
      <div className="container">
        <div id="welcome">
          <h1>{`Let's connect with 3S Wallet`}</h1>
        </div>
        <div id="content">
          <div className="connection">
            {!account ? (
              <button onClick={connectWallet}>Connect</button>
            ) : (
              <button className="disconnect" onClick={disconnect}>
                Disconnect
              </button>
            )}
          </div>
          {isLoading && <div>Loading...</div>}
          <div className="status">
            Connection Status:
            {!account ? (
              <strong>Disconnected</strong>
            ) : (
              <strong>Connected</strong>
            )}
          </div>
          <div className="status">
            Account: <strong>{account}</strong>
          </div>
          <div className="status">
            Chain ID: <strong>{chainId}</strong>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;