rLogin: The New Authentication Libraries for Blockchain Based Apps

npx create-react-app rlogin-sample
cd rlogin-sample

yarn add @rsksmart/rlogin @walletconnect/web3-provider

import RLogin, { RLoginButton } from '@rsksmart/rlogin'
import WalletConnectProvider from '@walletconnect/web3-provider'
import { useState } from 'react';
import './App.css';

// construct rLogin pop-up in DOM
const rLogin = new RLogin({
  cachedProvider: false, // change to true to cache user's wallet choice
  providerOptions: { // read more about providers setup in https://github.com/web3Modal/web3modal/
    walletconnect: {
      package: WalletConnectProvider, // setup wallet connect for mobile wallet support
      options: {
        rpc: {
          31: 'https://public-node.testnet.rsk.co' // use RSK public nodes to connect to the testnet
        }
      }
    }
  },
  supportedChains: [31] // enable rsk testnet network
})

function App() {
  const [provider, setProvider] = useState(null)
  const [account, setAccount] = useState(null)

    // display pop up
  const connect = () => rLogin.connect()
    .then(({ provider }) => { // the provider is used to operate with user's wallet
      setProvider(provider)
      // request user's account
      provider.request({ method: 'eth_accounts' }).then(([account]) => setAccount(account))
    })

  return (
    <div className="App">
      <RLoginButton onClick={connect}>Connect wallet</RLoginButton>
      <p>wallet address: {account}</p>
    </div>
  );
}

export default App;

const [balance, setBalance] = useState('')

const getBalance = () => provider.request({
    method: 'eth_getBalance',
    params: [account]
}).then(setBalance)

<button onClick={getBalance} disabled={!account}>get balance</button>
<p>balance: {balance}</p>

const [txHash, setTxHash] = useState('')

const faucetAddress = '0x88250f772101179a4ecfaa4b92a983676a3ce445' // giving back some funds
const sendTransaction = () => provider.request({
    method: 'eth_sendTransaction',
    params: [{ from: account, to: faucetAddress, value: '100000' }]
}).then(setTxHash)

<button onClick={sendTransaction} disabled={!account}>send transaction</button>
<p>txHash: {txHash}</p>

const [signature, setSignature] = useState('')

const message = 'Welcome to RIF Identity suite!!!'
const personalSign = () => provider.request({
    method: 'personal_sign',
    params: [message, account]
}).then(setSignature)

<button onClick={personalSign} disabled={!account}>sign message</button>
<p>signature: {signature}</p>

import Web3 from 'web3'
const web3 = new Web3(provider)