@zbyteio/zbyte-wallet-ui-sdk NPM

Zbyte Wallet SDK

Using Zbyte Wallet UI SDK, we can easily integrate wallet-ui into your DApp.

How to install

Create your react application, inside that where you want to integrate wallet sdk, please follow the steps.

1)Install zbyte wallet UI SDK.

  npm install @zbyteio/zbyte-wallet-ui-sdk

2) create a wallet object as follows (used env variables for example)

  import { WalletAdapter } from "@zbyteio/zbyte-wallet-ui-sdk";
  import { TORUS_NETWORK_TYPE } from "@zbyteio/zbyte-wallet-sdk-core";

  const wallet = new WalletAdapter({
    siteKey: process.env.REACT_APP_CAPTCHA_SITEKEY as string,
    walletUrl: process.env.REACT_APP_WALLET_URL as string,
    web3AuthConfig: {
      networkType: process.env.REACT_APP_AUTH_NETWORK_TYPE as TORUS_NETWORK_TYPE,
      web3AuthClientId: process.env.REACT_APP_AUTH_CLIENT_ID as string,
      enableLogging: (process.env.REACT_APP_ENABLE_LOGGING as string) === "true",
      verifierName: process.env.REACT_APP_VERIFIER as string,
      clientId: process.env.REACT_APP_CLIENT_ID as string,
      domain: process.env.REACT_APP_DOMAIN as string,
    }
  });

3) import into your auth file and initialize your wallet session

  console.log("initialize wallet")
  wallet.init({
    baseUrl: process.env.REACT_APP_BASE_URL as string,
    loginParams: {
      accessToken: "",
      tokenExpiry: Number(process.env.REACT_APP_TOKEN_EXPIRY || ''),
      typeOfToken: process.env.REACT_APP_TYPE_OF_TOKEN,
      verifier: process.env.REACT_APP_VERIFIER as string,
      clientId: process.env.REACT_APP_CLIENT_ID as string,
      domain: process.env.REACT_APP_DOMAIN as string,
    },
  })
  if (!wallet.isConnected()) {
    console.log(await wallet.connect()
      .then((result) => {
        console.log("initialized")
        return result;
      })
      .catch(e => console.error(e)));
  }

4) add a div with id="wallet" in your app, and wallet will be anchored to this div

  const togglePopup = () => {
    wallet.open();
  }
  <Button
    startIcon={<img alt="Logo" src={"/Logo.svg"} />}
    sx={{
      backgroundColor: "#FFFFFF",
      borderRadius: "16px",
      textTransform: "none",
      color: "#040F1D",
      fontSize: "10px",
      fontWeight: "700",
    }}
    variant="contained"
    size="small"
    onClick={togglePopup}
    id="wallet"
  >
    zbyte wallet
  </Button>

if not anchored, then wallet will be populated on the top right corner of the browser

5) Use wallet anywhere in your application

  wallet.open();

Wallet does not close on outside button click?

If wallet is closing on outside click of wallet component, but when clicking on some button, wallet remains open. Then check if you are stopping propagation of both 'click' event and 'mousedown' events. If there are, then remove either one or both stopPropagation.

In case you cannot remove and must stopPropagation on both events, you can import closeWallet from sdk and use it. calling closeWallet() exactly after stopPropagation is recommended.

For example,

  <Button
    onMouseDown={e => e.stopPropagation()}
    onClick={(e) => {
      e.stopPropagation();
      closeWallet();
    }}>
    Click Me!
  </Button>

You need not call stopPropagation in both onMouseDown and onClick. Notice in example above, it is only used in onClick();

How to Contribute

For Development
- All the development will be merged on dev branch
- For release code will be merged into the master.
  - And after tagging(follows v0.0.0 format) the master it will public the main package with tag number.
  - Please make sure the tag number and package version should be same.
    - Example if tag is v0.0.1 than package.json should contain the version as 0.0.1.

License

MIT