@argent/login-react v0.1.0-beta.4

@argent/login-react

Official React package for @argent/login

Setup

yarn add @argent/login-react

Basic usage

import React, { FC, useState } from "react";
import { ethers } from "ethers";
import { ArgentLoginButton, IEthereumProvider } from "@argent/login-react";

export const App: FC = () => {
  const [provider, setProvider] = useState<ethers.providers.Web3Provider>();

  const handleConnect = async (ethereumProvider: IEthereumProvider) => {
    const provider = new ethers.providers.Web3Provider(ethereumProvider);
    setProvider(provider);
  };

  const handleDisconnect = async () => {
    localStorage.removeItem("walletconnect"); // to make sure WC is disconnected
    setProvider(undefined);
  };

  return (
    <div>
      {!provider ? (
        <ArgentLoginButton
          options={{
            chainId: 280,
            rpcUrl: "https://zksync2-testnet.zksync.dev",
          }}
          onConnect={handleConnect}
          onError={console.error}
        />
      ) : (
        <>
          <h2>Connected as {provider.getSigner()._address}</h2>
          <p>
            <button onClick={handleDisconnect}>Disconnect</button>
          </p>
        </>
      )}
    </div>
  );
};

Full example here