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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.43-beta.114+436d9a7",
+  "version": "0.0.43-beta.125+a289bbf",
   "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.114+436d9a7",
-    "@huma-finance/shared": "^0.0.42",
+    "@huma-finance/sdk": "^0.0.43-beta.125+a289bbf",
+    "@huma-finance/shared": "^0.0.43-beta.125+a289bbf",
     "@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": "436d9a7f96793c58b55bb1653c654a19c69f229d"
+  "gitHead": "a289bbfb4c4be42aa42fc0d23f88fada1a064844"
 }

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/components/icons/celo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
+<style type="text/css">
+	.stcelo{fill:#FCFF52;}
+</style>
+<circle class="stcelo" cx="125" cy="125" r="125"/>
+<path d="M188.9,60.7H60.7v128.2h128.2v-44.8h-21.3c-7.3,16.3-23.8,27.7-42.7,27.7c-26,0-47.1-21.3-47.1-47.1c0-25.9,21.1-47,47.1-47
+	c19.3,0,35.8,11.7,43.1,28.4h20.9V60.7z"/>
+</svg>

package/src/components/icons/index.tsx

@@ -16,6 +16,7 @@ import { ReactComponent as AutoPaybackSvg } from './auto-payback.svg'
 import { ReactComponent as ApproveLenderSvg } from './approve-lender.svg'
 import { ReactComponent as DonutSvg } from './donut.svg'
 import { ReactComponent as UsdcSvg } from './usdc.svg'
+import { ReactComponent as CeloSvg } from './celo.svg'
 
 export function HumaIcon(props: SvgIconProps): React.ReactElement {
   return <HumaLogoSvg {...props} />
@@ -85,9 +86,17 @@ export function UsdcIcon(props: SvgIconProps): React.ReactElement {
   return <UsdcSvg {...props} />
 }
 
+export function CeloIcon(props: SvgIconProps): React.ReactElement {
+  return <CeloSvg {...props} />
+}
+
 export function getIcon(icon: string) {
-  if (icon === 'USDC') {
-    return UsdcIcon
-  }
-  return null
+  if (!icon) return null
+
+  return (
+    {
+      USDC: UsdcIcon,
+      Celo: CeloIcon,
+    }[icon] || null
+  )
 }

package/src/hooks/useNotifi.ts

@@ -3,37 +3,87 @@ 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 useDoesChainSupportNotifi = (
   account: string | undefined,
   chainId: number | undefined,
 ) => {
-  const [isFirstTimeNotifiUser, setIsFirstTimeNotifiUser] = useState(false)
+  const [notifiChainSupported, setNotifiChainSupported] = useState(false)
 
   useEffect(() => {
-    const checkIsFirstTimeNotifiUser = async () => {
+    const checkNotifiChainSupported = async () => {
       if (account != null && chainId != null) {
+        setNotifiChainSupported(
+          doesChainSupportNotifi(chainId, checkIsDev(), account),
+        )
+      }
+    }
+
+    checkNotifiChainSupported()
+  }, [account, chainId])
+
+  return { notifiChainSupported }
+}
+
+export const useNotifiClient = (
+  account: string | undefined,
+  chainId: number | undefined,
+  isDev: boolean,
+) => {
+  const [notifiClient, setNotifiClient] = useState<NotifiFrontendClient | null>(
+    null,
+  )
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
+
+  useEffect(() => {
+    const createNotifiClient = async () => {
+      if (account != null && chainId != null && notifiChainSupported) {
         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, notifiChainSupported])
+
+  return { notifiClient }
+}
 
-        const userState = await client.initialize()
+export const useIsFirstTimeNotifiUser = (
+  account: string | undefined,
+  chainId: number | undefined,
+) => {
+  const [isFirstTimeNotifiUser, setIsFirstTimeNotifiUser] = useState(false)
+  const { notifiClient } = useNotifiClient(account, chainId, checkIsDev())
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
 
+  useEffect(() => {
+    const checkIsFirstTimeNotifiUser = async () => {
+      if (notifiClient != null && notifiChainSupported) {
+        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,28 +94,7 @@ export const useIsFirstTimeNotifiUser = (
     }
 
     checkIsFirstTimeNotifiUser()
-  }, [account, chainId])
+  }, [notifiChainSupported, notifiClient])
 
   return { isFirstTimeNotifiUser }
 }
-
-export const useDoesChainSupportNotifi = (
-  account: string | undefined,
-  chainId: number | undefined,
-) => {
-  const [notifiChainSupported, setNotifiChainSupported] = useState(false)
-
-  useEffect(() => {
-    const checkNotifiChainSupported = async () => {
-      if (account != null && chainId != null) {
-        setNotifiChainSupported(
-          doesChainSupportNotifi(chainId, checkIsDev(), account),
-        )
-      }
-    }
-
-    checkNotifiChainSupported()
-  }, [account, chainId])
-
-  return { notifiChainSupported }
-}