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

package/dist/index.js

@@ -1,4 +1,4 @@
-import { txAtom, useMQ, supportedChainId, sendTxAtom, isTxFailed, getExplorerUrl, openInNewTab, usePoolUnderlyingTokenContract, TxStateType, useMount, decodeLogs, ERC20_ABI, downScale, formatMoney, POOL_NAME, POOL_TYPE, usePoolInfo, useAccountStats, useAuthErrorHandling, checkIsDev, EARejectionError, EARejectMessage, EARejectReason, EAService, useCLFeeManager, useCLPoolAllowance, upScale, usePoolContract, timeUtil, getNotifiDappId, getBlockchainConfigFromChain, doesChainSupportNotifi, CreditState, toBigNumber, TRANSFER_ABI, useFeeManager, combineStyles, isEmpty, useInvoiceNFTContract, useRFPoolAllowance, useParamsSearch, IdentityService, CHAINS, configUtil, usePoolAllowance, useLenderApproved, useLenderPosition, useWithdrawlLockoutInSeconds, usePoolUnderlyingTokenBalance, useLastDepositTime, CreditEventText, useERC2612Permit, ERC2612_ABI, SuperfluidPoolProcessor_ABI, useMultiSendContract, usePoolUnderlyingToken, hasRFActiveLoan, timestampToLL, getWalletAddressAbbr, useFactoring, PoolMap, PoolSubgraphMap, CreditEvent, Provider as Provider$1 } from '@huma-finance/shared';
+import { txAtom, useMQ, supportedChainId, sendTxAtom, isTxFailed, getExplorerUrl, openInNewTab, usePoolUnderlyingTokenContract, TxStateType, useMount, decodeLogs, ERC20_ABI, downScale, formatMoney, POOL_NAME, POOL_TYPE, usePoolInfo, useAccountStats, useAuthErrorHandling, checkIsDev, EARejectionError, EARejectMessage, EARejectReason, EAService, useCLFeeManager, useCLPoolAllowance, upScale, usePoolContract, timeUtil, doesChainSupportNotifi, getNotifiDappId, getBlockchainConfigFromChain, CreditState, toBigNumber, TRANSFER_ABI, useFeeManager, combineStyles, isEmpty, useInvoiceNFTContract, useRFPoolAllowance, useParamsSearch, IdentityService, CHAINS, configUtil, usePoolAllowance, useLenderApproved, useLenderPosition, useWithdrawlLockoutInSeconds, usePoolUnderlyingTokenBalance, useLastDepositTime, CreditEventText, useERC2612Permit, ERC2612_ABI, SuperfluidPoolProcessor_ABI, useMultiSendContract, usePoolUnderlyingToken, hasRFActiveLoan, timestampToLL, getWalletAddressAbbr, useFactoring, PoolMap, PoolSubgraphMap, CreditEvent, Provider as Provider$1 } from '@huma-finance/shared';
 import { useTheme, css, Box, Typography, Tooltip, Button, Dialog, Slider, Input, Divider, InputAdornment, Snackbar, Alert, Skeleton, TablePagination, LinearProgress, createTheme, ThemeProvider } from '@mui/material';
 import { useAtom, Provider as Provider$2 } from 'jotai';
 import { useSelector, useDispatch, Provider } from 'react-redux';
@@ -16,8 +16,8 @@ import { MaxUint256 } from '@ethersproject/constants';
 import { BigNumber, ethers, Contract } from 'ethers';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
-import { newFrontendClient } from '@notifi-network/notifi-frontend-client';
 import Email from '@mui/icons-material/Email';
+import { newFrontendClient } from '@notifi-network/notifi-frontend-client';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import { gql, useQuery, ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import Table from '@mui/material/Table';
@@ -613,42 +613,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.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__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.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__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.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__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.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__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.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__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.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__default.createElement("path", {
     stroke: "url(#loader_svg__a)",
     strokeMiterlimit: 10,
     strokeWidth: 0.5,
@@ -1416,10 +1416,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.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__default.createElement("svg", _extends$4({
     width: 120,
     height: 120,
     fill: "none",
@@ -1429,7 +1429,7 @@ var SvgCheck = function SvgCheck(props) {
     cy: 60,
     r: 60,
     fill: "#F7F1FF"
-  })), _path$3 || (_path$3 = /*#__PURE__*/React__default.createElement("path", {
+  })), _path$4 || (_path$4 = /*#__PURE__*/React__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",
@@ -1449,15 +1449,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.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__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.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__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",
@@ -1465,28 +1465,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.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__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.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__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.createElement("svg", _extends({
+  return /*#__PURE__*/React__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.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__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.createElement("path", {
@@ -1498,6 +1498,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.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.createElement("circle", {
+    cx: 125,
+    cy: 125,
+    r: 125,
+    style: {
+      fill: "#fcff52"
+    }
+  }), _path || (_path = /*#__PURE__*/React__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) {
@@ -1521,11 +1543,15 @@ function CheckCircleIcon(props) {
 function UsdcIcon(props) {
   return jsx(SvgUsdc, _objectSpread$4({}, props));
 }
+function CeloIcon(props) {
+  return 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)."; }
@@ -2890,6 +2916,140 @@ function Success$6(_ref) {
   });
 }
 
+var useDoesChainSupportNotifi = function useDoesChainSupportNotifi(account, chainId) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    notifiChainSupported = _useState2[0],
+    setNotifiChainSupported = _useState2[1];
+  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(doesChainSupportNotifi(chainId, 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 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    notifiClient = _useState4[0],
+    setNotifiClient = _useState4[1];
+  var _useDoesChainSupportN = useDoesChainSupportNotifi(account, chainId),
+    notifiChainSupported = _useDoesChainSupportN.notifiChainSupported;
+  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 = newFrontendClient({
+                account: {
+                  publicKey: account
+                },
+                tenantId: getNotifiDappId(isDev),
+                env: isDev ? 'Development' : 'Production',
+                walletBlockchain: 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 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFirstTimeNotifiUser = _useState6[0],
+    setIsFirstTimeNotifiUser = _useState6[1];
+  var _useNotifiClient = useNotifiClient(account, chainId, checkIsDev()),
+    notifiClient = _useNotifiClient.notifiClient;
+  var _useDoesChainSupportN2 = useDoesChainSupportNotifi(account, chainId),
+    notifiChainSupported = _useDoesChainSupportN2.notifiChainSupported;
+  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; }
@@ -2911,23 +3071,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;
@@ -2942,12 +3102,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);
 }
@@ -2960,81 +3120,44 @@ function NotifiSubscriptionModal(_ref) {
     account = _useWeb3React.account,
     chainId = _useWeb3React.chainId,
     provider = _useWeb3React.provider;
-  var _useState = useState(),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    notifiClient = _useState2[0],
-    setNotifiClient = _useState2[1];
+    showSuccessScreen = _useState2[0],
+    setShowSuccessScreen = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    showSuccessScreen = _useState4[0],
-    setShowSuccessScreen = _useState4[1];
-  var _useState5 = useState(false),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var _useState5 = useState(''),
     _useState6 = _slicedToArray(_useState5, 2),
-    isLoading = _useState6[0],
-    setIsLoading = _useState6[1];
-  var _useState7 = useState(''),
+    emailAddress = _useState6[0],
+    setEmailAddress = _useState6[1];
+  var _useState7 = useState(),
     _useState8 = _slicedToArray(_useState7, 2),
-    emailAddress = _useState8[0],
-    setEmailAddress = _useState8[1];
-  var _useState9 = useState(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    emailValid = _useState10[0],
-    setEmailValid = _useState10[1];
-  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 = newFrontendClient({
-                account: {
-                  publicKey: account
-                },
-                tenantId: getNotifiDappId(checkIsDev()),
-                env: checkIsDev() ? 'Development' : 'Production',
-                walletBlockchain: 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, 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.utils.arrayify(signature));
+            signature = _context.sent;
+            return _context.abrupt("return", 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) {
@@ -3044,38 +3167,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: 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
@@ -3085,44 +3208,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 = useCallback(function () {
@@ -3194,101 +3317,6 @@ function Notifications$1(_ref) {
   });
 }
 
-var useIsFirstTimeNotifiUser = function useIsFirstTimeNotifiUser(account, chainId) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFirstTimeNotifiUser = _useState2[0],
-    setIsFirstTimeNotifiUser = _useState2[1];
-  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 = newFrontendClient({
-                account: {
-                  publicKey: account
-                },
-                tenantId: 'humadapp',
-                env: checkIsDev() ? 'Development' : 'Production',
-                walletBlockchain: 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 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    notifiChainSupported = _useState4[0],
-    setNotifiChainSupported = _useState4[1];
-  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(doesChainSupportNotifi(chainId, 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,