@huma-finance/widgets 0.0.43-beta.112 → 0.0.43-beta.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.43-beta.112+6bf486b",
+  "version": "0.0.43-beta.122+c9ac2ce",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.43-beta.112+6bf486b",
-    "@huma-finance/shared": "^0.0.43-beta.112+6bf486b",
+    "@huma-finance/sdk": "^0.0.42",
+    "@huma-finance/shared": "^0.0.42",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -192,5 +192,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "6bf486be701344cfbb3a6c8aa6b662d64c3ba096"
+  "gitHead": "c9ac2ce4c0d689146c54d3db561fb30ffd62eec3"
 }

package/src/components/Notifi/NotifiSubscriptionModal.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useWeb3React } from '@web3-react/core'
 import {
   NotifiFrontendClient,
-  newFrontendClient,
   Uint8SignMessageFunction,
   SignMessageParams,
   CardConfigItemV1,
@@ -14,7 +13,6 @@ import {
   checkIsDev,
   getBlockchainConfigFromChain,
   txAtom,
-  getNotifiDappId,
 } from '@huma-finance/shared'
 import { ethers } from 'ethers'
 import {
@@ -34,6 +32,7 @@ import { LoadingModal } from '../LoadingModal'
 import { CheckIcon } from '../icons'
 import { resetState } from '../../store/widgets.reducers'
 import { useAppDispatch } from '../../hooks/useRedux'
+import { useNotifiClient } from '../../hooks/useNotifi'
 
 type Props = {
   handleSuccess: () => void
@@ -100,30 +99,11 @@ export function NotifiSubscriptionModal({
   const reset = useResetAtom(txAtom)
   const dispatch = useAppDispatch()
   const { account, chainId, provider } = useWeb3React()
-  const [notifiClient, setNotifiClient] = useState<NotifiFrontendClient>()
   const [showSuccessScreen, setShowSuccessScreen] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [emailAddress, setEmailAddress] = useState<string>('')
   const [emailValid, setEmailValid] = useState<boolean>()
-
-  useEffect(() => {
-    const initializeClient = async () => {
-      if (account != null && chainId != null) {
-        const client = newFrontendClient({
-          account: { publicKey: account },
-          tenantId: getNotifiDappId(checkIsDev()),
-          env: checkIsDev() ? 'Development' : 'Production',
-          walletBlockchain: getBlockchainConfigFromChain(chainId),
-        })
-
-        await client.initialize()
-
-        setNotifiClient(client)
-      }
-    }
-
-    initializeClient()
-  }, [account, chainId])
+  const { notifiClient } = useNotifiClient(account, chainId, checkIsDev())
 
   const signMessage: Uint8SignMessageFunction = async (
     message: Uint8Array,

package/src/hooks/useNotifi.ts

@@ -3,37 +3,64 @@ import {
   checkIsDev,
   doesChainSupportNotifi,
   getBlockchainConfigFromChain,
+  getNotifiDappId,
 } from '@huma-finance/shared'
-import { newFrontendClient } from '@notifi-network/notifi-frontend-client'
+import {
+  NotifiFrontendClient,
+  newFrontendClient,
+} from '@notifi-network/notifi-frontend-client'
 
-export const useIsFirstTimeNotifiUser = (
+export const useNotifiClient = (
   account: string | undefined,
   chainId: number | undefined,
+  isDev: boolean,
 ) => {
-  const [isFirstTimeNotifiUser, setIsFirstTimeNotifiUser] = useState(false)
+  const [notifiClient, setNotifiClient] = useState<NotifiFrontendClient | null>(
+    null,
+  )
 
   useEffect(() => {
-    const checkIsFirstTimeNotifiUser = async () => {
+    const createNotifiClient = async () => {
       if (account != null && chainId != null) {
         const client = newFrontendClient({
           account: { publicKey: account },
-          tenantId: 'humadapp',
-          env: checkIsDev() ? 'Development' : 'Production',
+          tenantId: getNotifiDappId(isDev),
+          env: isDev ? 'Development' : 'Production',
           walletBlockchain: getBlockchainConfigFromChain(chainId),
         })
+        await client.initialize()
+        setNotifiClient(client)
+      }
+    }
+
+    createNotifiClient()
+  }, [account, chainId, isDev])
 
-        const userState = await client.initialize()
+  return { notifiClient }
+}
 
+export const useIsFirstTimeNotifiUser = (
+  account: string | undefined,
+  chainId: number | undefined,
+) => {
+  const [isFirstTimeNotifiUser, setIsFirstTimeNotifiUser] = useState(false)
+  const { notifiClient } = useNotifiClient(account, chainId, checkIsDev())
+
+  useEffect(() => {
+    const checkIsFirstTimeNotifiUser = async () => {
+      if (notifiClient != null) {
+        const { userState } = notifiClient
         // If the user is not authenticated or expired, they are a first time user
         if (
-          userState.status !== 'authenticated' &&
-          userState.status !== 'expired'
+          userState == null ||
+          (userState.status !== 'authenticated' &&
+            userState.status !== 'expired')
         ) {
           setIsFirstTimeNotifiUser(true)
         } else if (userState.status === 'authenticated') {
           // If a user is authenticated, check if they have a target group (AKA email)
           // associated with their wallet. If they do not, show them the notifi onboarding flow.
-          const targetGroups = await client.getTargetGroups()
+          const targetGroups = await notifiClient.getTargetGroups()
           const emailTargets = targetGroups[0]?.emailTargets?.[0]
 
           if (emailTargets == null || emailTargets.emailAddress == null) {
@@ -44,7 +71,7 @@ export const useIsFirstTimeNotifiUser = (
     }
 
     checkIsFirstTimeNotifiUser()
-  }, [account, chainId])
+  }, [notifiClient])
 
   return { isFirstTimeNotifiUser }
 }