@arteq-tech/skeptic-connect NPM

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