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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.43-beta.122+c9ac2ce",
+  "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.42",
-    "@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": "c9ac2ce4c0d689146c54d3db561fb30ffd62eec3"
+  "gitHead": "a289bbfb4c4be42aa42fc0d23f88fada1a064844"
 }

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

@@ -10,6 +10,27 @@ import {
   newFrontendClient,
 } from '@notifi-network/notifi-frontend-client'
 
+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 }
+}
+
 export const useNotifiClient = (
   account: string | undefined,
   chainId: number | undefined,
@@ -18,10 +39,11 @@ export const useNotifiClient = (
   const [notifiClient, setNotifiClient] = useState<NotifiFrontendClient | null>(
     null,
   )
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
 
   useEffect(() => {
     const createNotifiClient = async () => {
-      if (account != null && chainId != null) {
+      if (account != null && chainId != null && notifiChainSupported) {
         const client = newFrontendClient({
           account: { publicKey: account },
           tenantId: getNotifiDappId(isDev),
@@ -34,7 +56,7 @@ export const useNotifiClient = (
     }
 
     createNotifiClient()
-  }, [account, chainId, isDev])
+  }, [account, chainId, isDev, notifiChainSupported])
 
   return { notifiClient }
 }
@@ -45,10 +67,11 @@ export const useIsFirstTimeNotifiUser = (
 ) => {
   const [isFirstTimeNotifiUser, setIsFirstTimeNotifiUser] = useState(false)
   const { notifiClient } = useNotifiClient(account, chainId, checkIsDev())
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
 
   useEffect(() => {
     const checkIsFirstTimeNotifiUser = async () => {
-      if (notifiClient != null) {
+      if (notifiClient != null && notifiChainSupported) {
         const { userState } = notifiClient
         // If the user is not authenticated or expired, they are a first time user
         if (
@@ -71,28 +94,7 @@ export const useIsFirstTimeNotifiUser = (
     }
 
     checkIsFirstTimeNotifiUser()
-  }, [notifiClient])
+  }, [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 }
-}