@3swallet.js/web3-react-connector v1.0.2

@3swallet.js/web3-react-connector

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

• web3-react

For more details, read the documentation

Installation

• yarn:

yarn add @3swallet.js/web3-react-connector

• npm:

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

Quick start

import Web3ReactConnector from '@3swallet.js/web3-react-connector';
import { useWeb3React } from '@web3-react/core';
import { useEffect } from 'react';

const wallet3s = new Web3ReactConnector({
  rpc: { [1]: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}` },
  chainId: 1,
});

const connectors = {
  wallet3s,
};

export function Index() {
  const { chainId, account, activate, deactivate, active } = useWeb3React();

  const setProvider = (type) => {
    window.localStorage.setItem('provider', type);
  };

  const connect = () => {
    activate(connectors.wallet3s);
    setProvider('wallet3s');
  };

  const disconnect = () => {
    deactivate();
  };

  useEffect(() => {
    const provider = window.localStorage.getItem('provider');
    if (provider) activate(connectors[provider]);
  }, []);

  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">
            {!active ? (
              <button onClick={connect}>Connect</button>
            ) : (
              <button className="disconnect" onClick={disconnect}>
                Disconnect
              </button>
            )}
          </div>
          <div className="status">
            Connection Status:
            {!active ? (
              <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;