@qomet/skeptic-connect NPM

Skeptic Connect

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

Network Support

The following networks are supported:

Goerli (Ethereum)
Sepolia (Ethereum)
Mainnet (Etheruem)
Mumbai (Polygon)
Mainnet (Polygon)

Quick Guide

Use SkepticProvider as one of the top parent providers, as shown below:

...
import { SkepticProvider } from "@qomet/skeptic-connect";
...

function App() {
  return (
    <SkepticProvider
      infuraId='4784dc24...a4bf480922a'
      servicesBaseURL='https://skeptic-dev.arteq.io/skeptic/v1'
      startingNetwork='ethereum'
      startingNetwork='goerli'
      allowNetworkChange={false}
      signMessage='Enter your sign message here!'
    >
      ...
    </SkepticProvider>
  );
}

export default App;

NOTE: Usage of the window.SKEPITC_CONNET_* variables are deprecated and they won't be picked up by the SDK. You can still keep them in the project but you have to use SkepticProvider's props to pass them on.

NOTE: If you want to disable reCAPTCHA (mainly for local testing), use the following window variable:

window.DISABLE_RECAPTCHA

NOTE: In order to use reCAPTCHA, add recaptcha lib to your index.html and set the sitekey like below:

window.rcSiteKey = "6LfJSDceAAAAAPLNlczwZMQbOXbATkOZiW0u0GA3";

Use useSkeptic hook to access the Skeptic context.

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

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>
  );
}

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