npm-react-common

A repo to hold all reusable common react components

Connecting wallet and authenticating

important

always set these:

window.chain = "ETHEREUM";
window.network = "RINKEBY";
window.SKEPTICS_BASE_URL="https://skeptic-dev.arteq.auction/skeptic/v1";
ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
);

** if you want to disable reCaptcha (local testing) ** add also this global variable:

window.DISABLE_RECAPTCHA

or add recaptcha lib in your index.html and set sitekey like so:

window.rcSiteKey = "6LfJSDceAAAAAPLNlczwZMQbOXbATkOZiW0u0GA3";

• To customize sign message, please set SIGN_MESSAGE environment variable before building your repo

** to set sign message, set this global variable: **

window.MESSAGE_TO_SIGN = "Welcome to skeptics! signing this message means you agree with our terms of use (https://example.org/temrs-of-use), please sign this message in order to log in"

import { useWallet } from "@arteq-io/react-common";

window.chain = "ETHEREUM";
window.network = "RINKEBY";
window.servicesURL = "[https://skeptics-base-url]";


const WalletConnect = () => {

  const {
    logout,
    account,
    initMetamask,
    isWalletConnected,
    initWalletConnect,
  } = useWallet();

  return (
    <main>
      {isWalletConnected 
        ?  (
          <>
            <h1>Login with wallet</h1>
            <ul>
              <li onClick={initMetamask}>with Metamask</li>
              <li onClick={initWalletConnect}>with WalletConnect</li>
            </ul>
          </>
        ) : (
          <>
            <h2>Wallet Address: {account}</h2>
            <button onClick={logout}>Logout</button>
          </>
        )
      }
    </main>
  );
}

const App = () => (
  <WalletProvider>
    <WalletConnect />
  </WaletProvider>
);

possible issues:

• you're not using React@17 this package is created based on react 17 and haven't been tested on react 18 which was just released if you've installed react with create-react-app, you can downgrade react to 17 like so:

• edit package.json and change react from 18 (or any other versions) to 17 in dependecies section
• rm -rf ./node_modules
• do a yarn or npm install again
• change index.jsx to use previous react-dom import and syntax

• you're using react-scripts>4.0 this version has some issues with source map (because of webpack 5)

it should be fine as long as you disable source-map in .env file:

• add a line to .env file: GENERATE_SOURCEMAP=false

TODO:

add these functions:

• login [DONE]
• logout [DONE]
• profile
• updateProfile
• sendEmailOTP
• verifyEmailOTP
• balances (nft, ethereum, erc20 token)