@arteq-tech/skeptic-connect

Skeptic Connect

A repo to hold all reusable common react components related to Skeptic project.

Connecting wallet and authenticating

Important

Always set these:

window.SKEPTIC_CONNECT_CHAIN = "ethereum";
window.SKEPTIC_CONNECT_NETWORK = "goerli";
window.SKEPTIC_CONNECT_SERVICES_BASE_URL="https://skeptic-dev.arteq.tech/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 SKEPTIC_CONNECT_SIGN_MESSAGE environment variable before building your repo

** To set the sign message, set this global variable: **

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

import { useSkeptic } from "@arteq-tech/skeptic-connect";

window.SKEPTIC_CONNECT_CHAIN = "ethereum";
window.SKEPTIC_CONNECT_NETWORK = "goerli";
window.SKEPTIC_CONNECT_SERVICES_BASE_URL="https://skeptic-dev.arteq.tech/skeptic/v1";

const WalletConnect = () => {

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

  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:

The following functionalities must be covered:

• login [DONE]
• logout [DONE]
• profile [DONE]
• updateProfile [DONE]
• sendEmailOTP [DONE]
• verifyEmailOTP [DONE]
• balance of contracts (nft, ethereum, erc20 token, polygon, etc)