@fewcha/web3-react/lib/index.js

Check the documentation at https://docs.fewcha.app/

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

exports.__esModule = true;
exports.useWeb3 = exports.default = exports.Web3Context = exports.ConnectWallet = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _uuid = require("uuid");

var _wallet = require("./config/wallet");

var _main = require("./style/main");

var _web = _interopRequireDefault(require("@fewcha/web3"));

// Copyright 2022 Fewcha. All rights reserved.
const Web3Context = (0, _react.createContext)(null);
exports.Web3Context = Web3Context;

const useWeb3 = () => {
  const {
    account,
    balance,
    disconnect,
    currentWallet,
    isConnected,
    network,
    fewcha,
    martian
  } = (0, _react.useContext)(Web3Context);
  return {
    account,
    balance,
    disconnect,
    currentWallet,
    isConnected,
    network,
    fewcha,
    martian
  };
};

exports.useWeb3 = useWeb3;
const emptyAccount = {
  address: "",
  publicKey: ""
};

const Web3ReactProvider = ({
  children
}) => {
  const [account, setAccount] = (0, _react.useState)(emptyAccount);
  const [balance, setBalance] = (0, _react.useState)("");
  const [isConnected, setIsConnected] = (0, _react.useState)(false);
  const [network, setNetwork] = (0, _react.useState)("");
  const [popups, changePopups] = (0, _react.useState)([]);
  const [currentWallet, setCurrentWallet] = (0, _react.useState)("fewcha");
  const fewcha = new _web.default();
  const martian = new _web.default(window.martian);
  const popupBackgroundService = (0, _react.useRef)(null);

  const addPopup = ({
    Component,
    callback
  }) => {
    const key = (0, _uuid.v4)();
    changePopups([...popups, {
      key,
      Component
    }]);
    if (callback) callback(key);
    return key;
  };

  const removePopup = key => {
    changePopups(popups.filter(popup => popup.key !== key));
  };

  const removeAll = () => {
    changePopups([]);
  };

  const chooseWeb3 = async (walletCodename, callback) => {
    callback && callback();
    setCurrentWallet(walletCodename);
    const account = await window[walletCodename].connect();

    if (account.status === 200) {
      setIsConnected(true);

      switch (walletCodename) {
        case "fewcha":
          setAccount((0, _extends2.default)({}, emptyAccount, account.data));
          break;

        case "martian":
          setAccount((0, _extends2.default)({}, emptyAccount, {
            address: account.address,
            publicKey: account.publicKey
          }));
          break;
      }
    }
  };

  const clear = () => {
    setAccount(emptyAccount);
    setNetwork("");
    setBalance("0");
    setIsConnected(false);
  };

  const connectedEvent = () => {
    setIsConnected(true);
  };

  const disconnectedEvent = () => {
    clear();
  };

  const changeAccount = event => {
    const e = event;

    if (e.detail) {
      setAccount(e.detail);
    }
  };

  const changeBalance = event => {
    const e = event;

    if (e.detail) {
      setBalance(e.detail);
    }
  };

  const changeNetwork = event => {
    const e = event;

    if (e.detail) {
      setNetwork(e.detail);
    }
  };

  const disconnect = () => {
    fewcha && fewcha.action.disconnect();
    martian && martian.action.disconnect();
  };

  (0, _react.useEffect)(() => {
    window.addEventListener("aptos#connected", connectedEvent);
    window.addEventListener("aptos#disconnected", disconnectedEvent);
    window.addEventListener("aptos#changeAccount", changeAccount);
    window.addEventListener("aptos#changeBalance", changeBalance);
    window.addEventListener("aptos#changeNetwork", changeNetwork);
    return () => {
      window.removeEventListener("aptos#connected", connectedEvent);
      window.removeEventListener("aptos#disconnected", disconnectedEvent);
      window.removeEventListener("aptos#changeAccount", changeAccount);
      window.removeEventListener("aptos#changeBalance", changeBalance);
      window.removeEventListener("aptos#changeNetwork", changeNetwork);
    }; // eslint-disable-next-line
  }, []);
  const Component = popups.length > 0 ? popups[popups.length - 1].Component : () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
  return /*#__PURE__*/_react.default.createElement(Web3Context.Provider, {
    value: {
      currentWallet,
      setCurrentWallet,
      chooseWeb3,
      disconnect,
      account,
      balance,
      isConnected,
      addPopup,
      removePopup,
      removeAll,
      network,
      fewcha,
      martian
    }
  }, children, popups.length > 0 && /*#__PURE__*/_react.default.createElement(_main.PopupBackground, {
    onClick: e => {
      if (e.target !== popupBackgroundService.current) return;
      removePopup(popups[popups.length - 1].key);
    }
  }, /*#__PURE__*/_react.default.createElement(_main.PopupBackgroundScreen, null, /*#__PURE__*/_react.default.createElement(_main.PopupBackgroundWrapper, {
    "aria-hidden": "true"
  }, /*#__PURE__*/_react.default.createElement(_main.PopupBackgroundBackground, {
    ref: popupBackgroundService
  })), /*#__PURE__*/_react.default.createElement("span", {
    className: "sm:inline-block sm:align-middle sm:h-screen",
    "aria-hidden": "true"
  }, "\u200B"), /*#__PURE__*/_react.default.createElement(Component, null))));
};

var _default = Web3ReactProvider;
exports.default = _default;

const ConnectWallet = ({
  theme: _theme = "dark",
  type: _type = "grid",
  label: _label = "Connect Wallet"
}) => {
  const {
    addPopup,
    isConnected
  } = (0, _react.useContext)(Web3Context);
  if (isConnected) return null;
  return /*#__PURE__*/_react.default.createElement(_main.ConnectWalletButton, {
    onClick: () => {
      const key = addPopup({
        Component: () => /*#__PURE__*/_react.default.createElement(SelectWalletPopup, {
          popupKey: key,
          type: _type
        })
      });
    }
  }, _label);
};

exports.ConnectWallet = ConnectWallet;

const SelectWalletPopup = ({
  type,
  popupKey
}) => {
  const grid = type === "grid";
  const {
    removePopup,
    chooseWeb3
  } = (0, _react.useContext)(Web3Context);
  const [loading, setLoading] = (0, _react.useState)(false);

  const close = () => {
    removePopup(popupKey);
  };

  return /*#__PURE__*/_react.default.createElement(_main.Popup, null, /*#__PURE__*/_react.default.createElement(_main.PopupClose, {
    onClick: () => {
      close();
    }
  }, /*#__PURE__*/_react.default.createElement("svg", {
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/_react.default.createElement("path", {
    d: "M4 4L9 9",
    stroke: "#BEC4CE",
    strokeWidth: "2",
    strokeMiterlimit: "10",
    strokeLinecap: "round"
  }), /*#__PURE__*/_react.default.createElement("path", {
    d: "M12 12L20 20",
    stroke: "#BEC4CE",
    strokeWidth: "2",
    strokeMiterlimit: "10",
    strokeLinecap: "round"
  }), /*#__PURE__*/_react.default.createElement("path", {
    d: "M20 4L4 20",
    stroke: "#BEC4CE",
    strokeWidth: "2",
    strokeMiterlimit: "10",
    strokeLinecap: "round"
  }))), /*#__PURE__*/_react.default.createElement(_main.PopupTitle, null, "Connect a wallet on Aptos to continue"), /*#__PURE__*/_react.default.createElement(_main.WalletList, {
    grid: grid
  }, _wallet.wallets.map((item, index) => /*#__PURE__*/_react.default.createElement(_main.WalletItem, {
    grid: grid,
    key: index,
    onClick: () => {
      chooseWeb3(item.code, () => {
        close();
      });
    }
  }, /*#__PURE__*/_react.default.createElement(_main.WalletTitleWrapper, {
    grid: grid
  }, /*#__PURE__*/_react.default.createElement(_main.WalletIcon, {
    grid: grid
  }, " ", grid ? item.icon60 : item.icon36), /*#__PURE__*/_react.default.createElement(_main.WalletTitle, null, item.title)), window[item.code] && /*#__PURE__*/_react.default.createElement(_main.WalletDetected, {
    grid: grid
  }, "Detected")))));
};