@huma-finance/widgets 0.0.43-beta.114 → 0.0.43-beta.125

package/dist/cjs/index.cjs

@@ -19,8 +19,8 @@ var constants = require('@ethersproject/constants');
 var ethers = require('ethers');
 var ArrowDropDownIcon = require('@mui/icons-material/ArrowDropDown');
 var ArrowDropUpIcon = require('@mui/icons-material/ArrowDropUp');
-var notifiFrontendClient = require('@notifi-network/notifi-frontend-client');
 var Email = require('@mui/icons-material/Email');
+var notifiFrontendClient = require('@notifi-network/notifi-frontend-client');
 var ArrowForwardIosIcon = require('@mui/icons-material/ArrowForwardIos');
 var client = require('@apollo/client');
 var Table = require('@mui/material/Table');
@@ -652,42 +652,42 @@ var selectWidgetState = function selectWidgetState(state) {
   return state.widget;
 };
 
-var _path$6;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+var _path$7;
+function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 var SvgReceipt = function SvgReceipt(props) {
-  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$6({
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$7({
     width: 24,
     height: 24,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__default["default"].createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M18 17H6v-2h12v2Zm0-4H6v-2h12v2Zm0-4H6V7h12v2ZM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20Z",
     fill: "#76707E"
   })));
 };
 
-var _path$5;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+var _path$6;
+function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 var SvgSeparator = function SvgSeparator(props) {
-  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$5({
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$6({
     width: 2,
     height: 14,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__default["default"].createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__default["default"].createElement("path", {
     fill: "#E0E0E0",
     d: "M0 0h2v14H0z"
   })));
 };
 
-var _path$4, _path2$1, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _path25, _path26, _path27, _path28, _path29, _path30, _path31, _path32, _path33, _path34, _path35, _path36, _path37, _path38, _path39, _path40, _path41, _path42, _path43, _path44, _path45, _defs$1;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var _path$5, _path2$1, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _path25, _path26, _path27, _path28, _path29, _path30, _path31, _path32, _path33, _path34, _path35, _path36, _path37, _path38, _path39, _path40, _path41, _path42, _path43, _path44, _path45, _defs$1;
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 var SvgLoader = function SvgLoader(props) {
-  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$4({
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 81 80"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__default["default"].createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__default["default"].createElement("path", {
     stroke: "url(#loader_svg__a)",
     strokeMiterlimit: 10,
     strokeWidth: 0.5,
@@ -1455,10 +1455,10 @@ var SvgLoader = function SvgLoader(props) {
   })))));
 };
 
-var _circle, _path$3, _defs;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+var _circle, _path$4, _defs;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgCheck = function SvgCheck(props) {
-  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$3({
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$4({
     width: 120,
     height: 120,
     fill: "none",
@@ -1468,7 +1468,7 @@ var SvgCheck = function SvgCheck(props) {
     cy: 60,
     r: 60,
     fill: "#F7F1FF"
-  })), _path$3 || (_path$3 = /*#__PURE__*/React__default["default"].createElement("path", {
+  })), _path$4 || (_path$4 = /*#__PURE__*/React__default["default"].createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M83.701 47.556 69.216 62.053 54.73 76.55c-.234.164-.445.281-.726.281-.28 0-.491-.117-.726-.28l-16.98-17.004a1.004 1.004 0 0 1 0-1.428l3.64-3.775c.374-.375 1.053-.375 1.428 0l12.638 12.5L78.446 42.28c.375-.375 1.054-.375 1.429 0l3.826 3.846a1.004 1.004 0 0 1 0 1.429Z",
@@ -1488,15 +1488,15 @@ var SvgCheck = function SvgCheck(props) {
   })))));
 };
 
-var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var _path$3;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgCheckGreen = function SvgCheckGreen(props) {
-  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$2({
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__default["default"].createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__default["default"].createElement("path", {
     fill: "#45CB71",
     fillRule: "evenodd",
     d: "m20.888 7.333-5.432 5.437-5.432 5.436a.458.458 0 0 1-.272.106.458.458 0 0 1-.273-.106L3.112 11.83a.376.376 0 0 1 0-.536L4.477 9.88c.14-.14.395-.14.535 0l4.74 4.687 9.165-9.21a.392.392 0 0 1 .536 0l1.435 1.442c.15.14.15.395 0 .535Z",
@@ -1504,28 +1504,28 @@ var SvgCheckGreen = function SvgCheckGreen(props) {
   })));
 };
 
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgCheckCircle = function SvgCheckCircle(props) {
-  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 22,
     height: 22,
     fill: "none"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__default["default"].createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__default["default"].createElement("path", {
     fill: "#2E7D32",
     d: "m15.207 6.948-6.04 6.041-3.291-3.282L4.583 11l4.583 4.583L16.5 8.25l-1.293-1.302ZM11 1.833C5.94 1.833 1.833 5.94 1.833 11S5.94 20.167 11 20.167 20.166 16.06 20.166 11 16.06 1.833 11 1.833Zm0 16.5A7.331 7.331 0 0 1 3.666 11 7.331 7.331 0 0 1 11 3.667 7.331 7.331 0 0 1 18.333 11 7.331 7.331 0 0 1 11 18.333Z"
   })));
 };
 
-var _path, _path2, _path3;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path$1, _path2, _path3;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgUsdc = function SvgUsdc(props) {
-  return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$1({
     "data-name": "86977684-12db-4850-8f30-233a7c267d11",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 2000 2000"
-  }, props), _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z",
     fill: "#2775ca"
   })), _path2 || (_path2 = /*#__PURE__*/React__default["default"].createElement("path", {
@@ -1537,6 +1537,28 @@ var SvgUsdc = function SvgUsdc(props) {
   })));
 };
 
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgCelo = function SvgCelo(props) {
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 250 250",
+    style: {
+      enableBackground: "new 0 0 250 250"
+    },
+    xmlSpace: "preserve"
+  }, props), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: 125,
+    cy: 125,
+    r: 125,
+    style: {
+      fill: "#fcff52"
+    }
+  }), _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M188.9 60.7H60.7v128.2h128.2v-44.8h-21.3c-7.3 16.3-23.8 27.7-42.7 27.7-26 0-47.1-21.3-47.1-47.1 0-25.9 21.1-47 47.1-47 19.3 0 35.8 11.7 43.1 28.4h20.9V60.7z"
+  })));
+};
+
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function ReceiptIcon(props) {
@@ -1560,11 +1582,15 @@ function CheckCircleIcon(props) {
 function UsdcIcon(props) {
   return jsxRuntime.jsx(SvgUsdc, _objectSpread$4({}, props));
 }
+function CeloIcon(props) {
+  return jsxRuntime.jsx(SvgCelo, _objectSpread$4({}, props));
+}
 function getIcon(icon) {
-  if (icon === 'USDC') {
-    return UsdcIcon;
-  }
-  return null;
+  if (!icon) return null;
+  return {
+    USDC: UsdcIcon,
+    Celo: CeloIcon
+  }[icon] || null;
 }
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -2929,6 +2955,140 @@ function Success$6(_ref) {
   });
 }
 
+var useDoesChainSupportNotifi = function useDoesChainSupportNotifi(account, chainId) {
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    notifiChainSupported = _useState2[0],
+    setNotifiChainSupported = _useState2[1];
+  React.useEffect(function () {
+    var checkNotifiChainSupported = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+        return regenerator.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (account != null && chainId != null) {
+                setNotifiChainSupported(shared.doesChainSupportNotifi(chainId, shared.checkIsDev(), account));
+              }
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function checkNotifiChainSupported() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    checkNotifiChainSupported();
+  }, [account, chainId]);
+  return {
+    notifiChainSupported: notifiChainSupported
+  };
+};
+var useNotifiClient = function useNotifiClient(account, chainId, isDev) {
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    notifiClient = _useState4[0],
+    setNotifiClient = _useState4[1];
+  var _useDoesChainSupportN = useDoesChainSupportNotifi(account, chainId),
+    notifiChainSupported = _useDoesChainSupportN.notifiChainSupported;
+  React.useEffect(function () {
+    var createNotifiClient = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
+        var client;
+        return regenerator.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(account != null && chainId != null && notifiChainSupported)) {
+                _context2.next = 5;
+                break;
+              }
+              client = notifiFrontendClient.newFrontendClient({
+                account: {
+                  publicKey: account
+                },
+                tenantId: shared.getNotifiDappId(isDev),
+                env: isDev ? 'Development' : 'Production',
+                walletBlockchain: shared.getBlockchainConfigFromChain(chainId)
+              });
+              _context2.next = 4;
+              return client.initialize();
+            case 4:
+              setNotifiClient(client);
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function createNotifiClient() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    createNotifiClient();
+  }, [account, chainId, isDev, notifiChainSupported]);
+  return {
+    notifiClient: notifiClient
+  };
+};
+var useIsFirstTimeNotifiUser = function useIsFirstTimeNotifiUser(account, chainId) {
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFirstTimeNotifiUser = _useState6[0],
+    setIsFirstTimeNotifiUser = _useState6[1];
+  var _useNotifiClient = useNotifiClient(account, chainId, shared.checkIsDev()),
+    notifiClient = _useNotifiClient.notifiClient;
+  var _useDoesChainSupportN2 = useDoesChainSupportNotifi(account, chainId),
+    notifiChainSupported = _useDoesChainSupportN2.notifiChainSupported;
+  React.useEffect(function () {
+    var checkIsFirstTimeNotifiUser = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3() {
+        var userState, _targetGroups$, _targetGroups$$emailT, targetGroups, emailTargets;
+        return regenerator.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(notifiClient != null && notifiChainSupported)) {
+                _context3.next = 12;
+                break;
+              }
+              userState = notifiClient.userState; // If the user is not authenticated or expired, they are a first time user
+              if (!(userState == null || userState.status !== 'authenticated' && userState.status !== 'expired')) {
+                _context3.next = 6;
+                break;
+              }
+              setIsFirstTimeNotifiUser(true);
+              _context3.next = 12;
+              break;
+            case 6:
+              if (!(userState.status === 'authenticated')) {
+                _context3.next = 12;
+                break;
+              }
+              _context3.next = 9;
+              return notifiClient.getTargetGroups();
+            case 9:
+              targetGroups = _context3.sent;
+              emailTargets = (_targetGroups$ = targetGroups[0]) === null || _targetGroups$ === void 0 ? void 0 : (_targetGroups$$emailT = _targetGroups$.emailTargets) === null || _targetGroups$$emailT === void 0 ? void 0 : _targetGroups$$emailT[0];
+              if (emailTargets == null || emailTargets.emailAddress == null) {
+                setIsFirstTimeNotifiUser(true);
+              }
+            case 12:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      return function checkIsFirstTimeNotifiUser() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    checkIsFirstTimeNotifiUser();
+  }, [notifiChainSupported, notifiClient]);
+  return {
+    isFirstTimeNotifiUser: isFirstTimeNotifiUser
+  };
+};
+
 var _templateObject$9, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$1;
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -2950,23 +3110,23 @@ function fetchEventTypes(_x) {
   return _fetchEventTypes.apply(this, arguments);
 }
 function _fetchEventTypes() {
-  _fetchEventTypes = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee4(notifiClient) {
+  _fetchEventTypes = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3(notifiClient) {
     var _process$env$REACT_AP, _subscriptionConfig$e;
     var subscribedAlerts, subscriptionConfig, eventTypes;
-    return regenerator.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return regenerator.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _context4.next = 2;
+          _context3.next = 2;
           return notifiClient.getAlerts();
         case 2:
-          subscribedAlerts = _context4.sent;
-          _context4.next = 5;
+          subscribedAlerts = _context3.sent;
+          _context3.next = 5;
           return notifiClient.fetchSubscriptionCard({
             id: (_process$env$REACT_AP = process.env.REACT_APP_NOTIFI_CONFIG_ID) !== null && _process$env$REACT_AP !== void 0 ? _process$env$REACT_AP : '',
             type: 'SUBSCRIPTION_CARD'
           });
         case 5:
-          subscriptionConfig = _context4.sent;
+          subscriptionConfig = _context3.sent;
           eventTypes = subscriptionConfig === null || subscriptionConfig === void 0 ? void 0 : (_subscriptionConfig$e = subscriptionConfig.eventTypes) === null || _subscriptionConfig$e === void 0 ? void 0 : _subscriptionConfig$e.map(function (eventType) {
             var eventTypeId = getIdFromEventType(eventType);
             var enabled = false;
@@ -2981,12 +3141,12 @@ function _fetchEventTypes() {
               enabled: enabled
             });
           });
-          return _context4.abrupt("return", eventTypes);
+          return _context3.abrupt("return", eventTypes);
         case 8:
         case "end":
-          return _context4.stop();
+          return _context3.stop();
       }
-    }, _callee4);
+    }, _callee3);
   }));
   return _fetchEventTypes.apply(this, arguments);
 }
@@ -2999,81 +3159,44 @@ function NotifiSubscriptionModal(_ref) {
     account = _useWeb3React.account,
     chainId = _useWeb3React.chainId,
     provider = _useWeb3React.provider;
-  var _useState = React.useState(),
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    notifiClient = _useState2[0],
-    setNotifiClient = _useState2[1];
+    showSuccessScreen = _useState2[0],
+    setShowSuccessScreen = _useState2[1];
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    showSuccessScreen = _useState4[0],
-    setShowSuccessScreen = _useState4[1];
-  var _useState5 = React.useState(false),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var _useState5 = React.useState(''),
     _useState6 = _slicedToArray(_useState5, 2),
-    isLoading = _useState6[0],
-    setIsLoading = _useState6[1];
-  var _useState7 = React.useState(''),
+    emailAddress = _useState6[0],
+    setEmailAddress = _useState6[1];
+  var _useState7 = React.useState(),
     _useState8 = _slicedToArray(_useState7, 2),
-    emailAddress = _useState8[0],
-    setEmailAddress = _useState8[1];
-  var _useState9 = React.useState(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    emailValid = _useState10[0],
-    setEmailValid = _useState10[1];
-  React.useEffect(function () {
-    var initializeClient = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
-        var client;
-        return regenerator.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!(account != null && chainId != null)) {
-                _context.next = 5;
-                break;
-              }
-              client = notifiFrontendClient.newFrontendClient({
-                account: {
-                  publicKey: account
-                },
-                tenantId: shared.getNotifiDappId(shared.checkIsDev()),
-                env: shared.checkIsDev() ? 'Development' : 'Production',
-                walletBlockchain: shared.getBlockchainConfigFromChain(chainId)
-              });
-              _context.next = 4;
-              return client.initialize();
-            case 4:
-              setNotifiClient(client);
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function initializeClient() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    initializeClient();
-  }, [account, chainId]);
+    emailValid = _useState8[0],
+    setEmailValid = _useState8[1];
+  var _useNotifiClient = useNotifiClient(account, chainId, shared.checkIsDev()),
+    notifiClient = _useNotifiClient.notifiClient;
   var signMessage = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(message) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(message) {
       var signer, signature;
-      return regenerator.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return regenerator.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
           case 0:
             signer = provider.getSigner();
-            _context2.next = 3;
+            _context.next = 3;
             return signer.signMessage(Buffer.from(message));
           case 3:
-            signature = _context2.sent;
-            return _context2.abrupt("return", ethers.ethers.utils.arrayify(signature));
+            signature = _context.sent;
+            return _context.abrupt("return", ethers.ethers.utils.arrayify(signature));
           case 5:
           case "end":
-            return _context2.stop();
+            return _context.stop();
         }
-      }, _callee2);
+      }, _callee);
     }));
     return function signMessage(_x2) {
-      return _ref3.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   var handleEmailAddressChange = function handleEmailAddressChange(event) {
@@ -3083,38 +3206,38 @@ function NotifiSubscriptionModal(_ref) {
     setEmailAddress(event.target.value);
   };
   var logInAndSubscribe = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
       var fetchedEventTypes, _iterator, _step, eventType;
-      return regenerator.wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      return regenerator.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             if (!(notifiClient != null && chainId != null)) {
-              _context3.next = 35;
+              _context2.next = 35;
               break;
             }
             setIsLoading(true);
 
             // Ask user to sign a message to authenticate
-            _context3.prev = 2;
-            _context3.next = 5;
+            _context2.prev = 2;
+            _context2.next = 5;
             return notifiClient.logIn({
               walletBlockchain: shared.getBlockchainConfigFromChain(chainId),
               signMessage: signMessage
             });
           case 5:
-            _context3.next = 11;
+            _context2.next = 11;
             break;
           case 7:
-            _context3.prev = 7;
-            _context3.t0 = _context3["catch"](2);
+            _context2.prev = 7;
+            _context2.t0 = _context2["catch"](2);
             setIsLoading(false);
-            return _context3.abrupt("return");
+            return _context2.abrupt("return");
           case 11:
-            _context3.next = 13;
+            _context2.next = 13;
             return fetchEventTypes(notifiClient);
           case 13:
-            fetchedEventTypes = _context3.sent;
-            _context3.next = 16;
+            fetchedEventTypes = _context2.sent;
+            _context2.next = 16;
             return notifiClient.ensureTargetGroup({
               name: 'Default',
               emailAddress: emailAddress
@@ -3124,44 +3247,44 @@ function NotifiSubscriptionModal(_ref) {
             // multiple calls. Notified their team to fix this.
             // eslint-disable-next-line no-restricted-syntax
             _iterator = _createForOfIteratorHelper(fetchedEventTypes);
-            _context3.prev = 17;
+            _context2.prev = 17;
             _iterator.s();
           case 19:
             if ((_step = _iterator.n()).done) {
-              _context3.next = 25;
+              _context2.next = 25;
               break;
             }
             eventType = _step.value;
-            _context3.next = 23;
+            _context2.next = 23;
             return notifiClient.ensureAlert({
               eventType: eventType,
               inputs: {}
             });
           case 23:
-            _context3.next = 19;
+            _context2.next = 19;
             break;
           case 25:
-            _context3.next = 30;
+            _context2.next = 30;
             break;
           case 27:
-            _context3.prev = 27;
-            _context3.t1 = _context3["catch"](17);
-            _iterator.e(_context3.t1);
+            _context2.prev = 27;
+            _context2.t1 = _context2["catch"](17);
+            _iterator.e(_context2.t1);
           case 30:
-            _context3.prev = 30;
+            _context2.prev = 30;
             _iterator.f();
-            return _context3.finish(30);
+            return _context2.finish(30);
           case 33:
             setShowSuccessScreen(true);
             setIsLoading(false);
           case 35:
           case "end":
-            return _context3.stop();
+            return _context2.stop();
         }
-      }, _callee3, null, [[2, 7], [17, 27, 30, 33]]);
+      }, _callee2, null, [[2, 7], [17, 27, 30, 33]]);
     }));
     return function logInAndSubscribe() {
-      return _ref4.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var handleCloseModal = React.useCallback(function () {
@@ -3233,101 +3356,6 @@ function Notifications$1(_ref) {
   });
 }
 
-var useIsFirstTimeNotifiUser = function useIsFirstTimeNotifiUser(account, chainId) {
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFirstTimeNotifiUser = _useState2[0],
-    setIsFirstTimeNotifiUser = _useState2[1];
-  React.useEffect(function () {
-    var checkIsFirstTimeNotifiUser = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
-        var client, userState, _targetGroups$, _targetGroups$$emailT, targetGroups, emailTargets;
-        return regenerator.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!(account != null && chainId != null)) {
-                _context.next = 15;
-                break;
-              }
-              client = notifiFrontendClient.newFrontendClient({
-                account: {
-                  publicKey: account
-                },
-                tenantId: 'humadapp',
-                env: shared.checkIsDev() ? 'Development' : 'Production',
-                walletBlockchain: shared.getBlockchainConfigFromChain(chainId)
-              });
-              _context.next = 4;
-              return client.initialize();
-            case 4:
-              userState = _context.sent;
-              if (!(userState.status !== 'authenticated' && userState.status !== 'expired')) {
-                _context.next = 9;
-                break;
-              }
-              setIsFirstTimeNotifiUser(true);
-              _context.next = 15;
-              break;
-            case 9:
-              if (!(userState.status === 'authenticated')) {
-                _context.next = 15;
-                break;
-              }
-              _context.next = 12;
-              return client.getTargetGroups();
-            case 12:
-              targetGroups = _context.sent;
-              emailTargets = (_targetGroups$ = targetGroups[0]) === null || _targetGroups$ === void 0 ? void 0 : (_targetGroups$$emailT = _targetGroups$.emailTargets) === null || _targetGroups$$emailT === void 0 ? void 0 : _targetGroups$$emailT[0];
-              if (emailTargets == null || emailTargets.emailAddress == null) {
-                setIsFirstTimeNotifiUser(true);
-              }
-            case 15:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function checkIsFirstTimeNotifiUser() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    checkIsFirstTimeNotifiUser();
-  }, [account, chainId]);
-  return {
-    isFirstTimeNotifiUser: isFirstTimeNotifiUser
-  };
-};
-var useDoesChainSupportNotifi = function useDoesChainSupportNotifi(account, chainId) {
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    notifiChainSupported = _useState4[0],
-    setNotifiChainSupported = _useState4[1];
-  React.useEffect(function () {
-    var checkNotifiChainSupported = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
-        return regenerator.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              if (account != null && chainId != null) {
-                setNotifiChainSupported(shared.doesChainSupportNotifi(chainId, shared.checkIsDev(), account));
-              }
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function checkNotifiChainSupported() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    checkNotifiChainSupported();
-  }, [account, chainId]);
-  return {
-    notifiChainSupported: notifiChainSupported
-  };
-};
-
 function CreditLineBorrow(_ref) {
   var poolNameStr = _ref.poolName,
     poolTypeStr = _ref.poolType,