@3swallet.js/wagmi-connector

Wagmi connectors for 3S Wallet supported third-party:

• wagmi

For more details, read the documentation

Installation

• yarn:

yarn add @3swallet.js/wagmi-connector

• npm:

npm install @3swallet.js/wagmi-connector

Quick start

• Config supported chains

Create chains.tsx file

import { Chain } from 'wagmi';
import { mainnet } from 'wagmi/chains';

const bsc: Chain = {
  id: 56,
  name: 'BNB Smart Chain',
  network: 'bsc',
  rpcUrls: {
    public: 'https://bsc-dataseed1.binance.org',
    default: 'https://bsc-dataseed1.binance.org',
  },
  blockExplorers: {
    default: { name: 'BscScan', url: 'https://bscscan.com' },
    etherscan: { name: 'BscScan', url: 'https://bscscan.com' },
  },
  nativeCurrency: {
    name: 'Binance Chain Native Token',
    symbol: 'BNB',
    decimals: 18,
  },
  multicall: {
    address: '0xcA11bde05977b3631167028862bE2a173976CA11',
    blockCreated: 15921452,
  },
};

const bscTestnet: Chain = {
  id: 97,
  name: 'BNB Smart Chain Testnet',
  network: 'bsc-testnet',
  nativeCurrency: {
    decimals: 18,
    name: 'Binance Chain Native Token',
    symbol: 'tBNB',
  },
  rpcUrls: {
    public: 'https://data-seed-prebsc-1-s2.binance.org:8545/',
    default: 'https://data-seed-prebsc-1-s2.binance.org:8545/',
  },
  blockExplorers: {
    default: { name: 'BscScan', url: 'https://testnet.bscscan.com' },
  },
  multicall: {
    address: '0xcA11bde05977b3631167028862bE2a173976CA11',
    blockCreated: 17422483,
  },
  testnet: true,
};

export const ALL_SUPPORTED_CHAINS = [mainnet, bsc, bscTestnet];

• Declare connectors & clients:

Create connectors.tsx, create a wagmin client using createClient and connectors

import { publicProvider } from 'wagmi/providers/public';
import { configureChains, createClient } from 'wagmi';
import { ALL_SUPPORTED_CHAINS } from './chains';
import WagmiConnector from '@3swallet.js/wagmi-connector';
// Configure chains for connectors to support
const { provider, chains } = configureChains(ALL_SUPPORTED_CHAINS, [
  publicProvider(),
]);


const wallet3s = new WagmiConnector({
  chains,
  options: {},
});

export const connectors = [wallet3s];

export const client = createClient({
  autoConnect: false,
  provider,
  connectors,
});

• Setup WagmiConfig

In your index.tsx file, import the WagmiConfig component from wagmi and wrap it around your app root component, passing it the client we defined above.

import { WagmiConfig } from "wagmi";

...

ReactDOM.render(
  <React.StrictMode>
    <WagmiConfig client={client}>
      <App />
    </WagmiConfig>
  </React.StrictMode>,
  document.getElementById('root')
);

• Connect and Disconnect from Wallet

import { useAccount, useConnect, useDisconnect, useNetwork } from 'wagmi';

export function Index() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();
  const { chain } = useNetwork();
  const disconnectWallet = async () => {
    disconnect();
  };
  const connectWallet = () => {
    connect({ connector: connectors[0] });
  };
  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">
            {!isConnected ? (
              <button onClick={connectWallet}>Connect</button>
            ) : (
              <button className="disconnect" onClick={disconnectWallet}>
                Disconnect
              </button>
            )}
          </div>
          <div className="status">
            Connection Status:
            {!isConnected ? (
              <strong>Disconnected</strong>
            ) : (
              <strong>Connected</strong>
            )}
          </div>
          <div className="status">
            Account:
            <strong>{address}</strong>
          </div>
          <div className="status">
            Chain ID: <strong>{`${chain ? chain.id : 'Unknow'}`}</strong>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;