Update NavigationWrapper to use RaysCountSmall component + other fixes

apps/rays-dashboard/components/layout/Navigation/NavigationWrapper.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { type FC, useEffect, useState } from 'react'
+import { type FC, useCallback, useEffect, useState } from 'react'
 import { type NavigationMenuPanelType } from '@summerfi/app-types'
-import { Navigation } from '@summerfi/app-ui'
+import { Navigation, RaysCountSmall } from '@summerfi/app-ui'
 import { useConnectWallet } from '@web3-onboard/react'
 import dynamic from 'next/dynamic'
 import { usePathname } from 'next/navigation'
@@ -13,9 +13,9 @@ import {
 } from '@/components/layout/Navigation/NavigationModules'
 import { BridgeSwapHandlerLoader } from '@/components/molecules/BridgeSwap/BridgeSwapLoader'
 import { BridgeSwapWrapper } from '@/components/molecules/BridgeSwap/BridgeSwapWrapper'
-import { RaysCountComponent } from '@/components/molecules/RaysCountComponent/RaysCountComponent'
 import { WalletButtonFallback } from '@/components/molecules/WalletButton/WalletButtonFallback'
 import { basePath } from '@/helpers/base-path'
+import { formatCryptoBalance } from '@/helpers/formatters'
 
 const WalletButton = dynamic(() => import('@/components/molecules/WalletButton/WalletButton'), {
   ssr: false,
@@ -47,6 +47,16 @@ export const NavigationWrapper: FC<NavigationWrapperProps> = ({ panels }) => {
     }
   }, [showNavigationModule, onceLoaded])
 
+  const raysFetchFunction = useCallback(async () => {
+    if (wallet?.accounts[0].address) {
+      return await fetch(`${basePath}/api/rays?address=${wallet.accounts[0].address}`).then(
+        (resp) => resp.json(),
+      )
+    }
+
+    return {}
+  }, [wallet])
+
   return (
     <Navigation
       currentPath={currentPath}
@@ -84,7 +94,13 @@ export const NavigationWrapper: FC<NavigationWrapperProps> = ({ panels }) => {
           )}
         </BridgeSwapWrapper>
       }
-      raysCountComponent={<RaysCountComponent />}
+      raysCountComponent={
+        <RaysCountSmall
+          userAddress={wallet?.accounts[0].address}
+          formatter={formatCryptoBalance}
+          raysFetchFunction={raysFetchFunction}
+        />
+      }
       walletConnectionComponent={<WalletButton />}
       onLogoClick={() => {
         // because router will use base path...

packages/app-ui/src/components/molecules/RaysCountSmall/RaysCountSmall.tsx

@@ -32,13 +32,15 @@ export const RaysCountSmall = ({
 }: RaysCountSmallProps) => {
   const [loadingRaysCount, setLoadingRaysCount] = useState<boolean>(false)
   const [raysCount, setRaysCount] = useState<number | null>(null)
+  const [raysAddresses, setRaysAddresses] = useState<string[]>([])
 
   useEffect(() => {
-    if (userAddress) {
+    if (userAddress && !raysAddresses.includes(userAddress)) {
       setLoadingRaysCount(true)
       raysFetchFunction().then((response) => {
         if (response.rays?.allPossiblePoints !== undefined) {
           setLoadingRaysCount(false)
+          setRaysAddresses([...raysAddresses, userAddress])
           setRaysCount(response.rays.allPossiblePoints)
         }
       })