Update NavigationWrapper to use RaysCountSmall component + other fixes

apps/earn-protocol/components/layout/MasterPage/MasterPage.tsx

@@ -8,7 +8,7 @@ import { AccountChangeHandler } from '@/components/organisms/AccountChangeHandle
 import { parseServerResponse } from '@/helpers/parse-server-response'
 import systemConfigHandler from '@/server-handlers/system-config'
 
-import classNames from './MasterPage.module.scss'
+import masterPageStyles from './MasterPage.module.scss'
 
 interface MasterPageProps {}
 
@@ -20,17 +20,17 @@ export const MasterPage: FC<PropsWithChildren<MasterPageProps>> = async ({ child
   return (
     <>
       <WalletInit />
-      <div className={classNames.mainContainer}>
+      <div className={masterPageStyles.mainContainer}>
         <Image
           src="/img/backgrounds/bg-simple.svg"
-          className={classNames.backgroundSimple}
+          className={masterPageStyles.backgroundSimple}
           width={0}
           height={0}
           style={{ height: 'auto', width: '100%' }}
           alt=""
         />
         <NavigationWrapper panels={systemConfig.navigation} />
-        <div className={classNames.appContainer}>
+        <div className={masterPageStyles.appContainer}>
           {children}
           <Footer
             logo="img/branding/logo-dark.svg"

apps/earn-protocol/package.json

@@ -34,17 +34,19 @@
     "@web3-onboard/wagmi": "^2.0.1",
     "@web3-onboard/walletconnect": "2.4.6",
     "@web3-onboard/web3auth": "^2.3.1",
+    "boring-avatars": "^1.10.2",
     "browser-detect": "^0.2.28",
+    "clsx": "^2.1.1",
     "include-media": "2.0.0",
     "lodash": "^4.17.21",
-    "mixpanel-browser": "^2.53.0",
     "mixpanel": "^0.18.0",
-    "next-intl": "^3.15.2",
+    "mixpanel-browser": "^2.53.0",
     "next": "^14.2.4",
+    "next-intl": "^3.15.2",
     "pino-pretty": "^11.2.1",
+    "react": "^18.3.1",
     "react-awesome-animated-number": "^1.0.13",
     "react-dom": "^18.3.1",
-    "react": "^18.3.1",
     "usehooks-ts": "^3.1.0",
     "viem": "^2.17.0",
     "wagmi": "^2.10.9"

apps/rays-dashboard/components/layout/MasterPage/MasterPage.tsx

@@ -9,7 +9,7 @@ import { basePath } from '@/helpers/base-path'
 import { parseServerResponse } from '@/helpers/parse-server-response'
 import systemConfigHandler from '@/server-handlers/system-config'
 
-import classNames from './MasterPage.module.scss'
+import masterPageStyles from './MasterPage.module.scss'
 
 interface MasterPageProps {
   // more to be implemented in the future
@@ -28,13 +28,13 @@ export const MasterPage: FC<PropsWithChildren<MasterPageProps>> = async ({
     <>
       <LaunchBanner />
       <WalletInit />
-      <div className={classNames.mainContainer}>
+      <div className={masterPageStyles.mainContainer}>
         {
           {
             simple: (
               <Image
                 src={`${basePath}/img/backgrounds/bg-simple.svg`}
-                className={classNames.backgroundSimple}
+                className={masterPageStyles.backgroundSimple}
                 width={0}
                 height={0}
                 style={{ height: 'auto', width: '100%' }}
@@ -44,7 +44,7 @@ export const MasterPage: FC<PropsWithChildren<MasterPageProps>> = async ({
           }[background]
         }
         <NavigationWrapper panels={systemConfig.navigation} />
-        <div className={classNames.appContainer}>
+        <div className={masterPageStyles.appContainer}>
           {children}
           <Footer
             logo={`${basePath}/img/branding/logo-dark.svg`}

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...

apps/rays-dashboard/components/molecules/CriteriaList/CriteriaList.tsx

@@ -2,7 +2,7 @@ import { type RaysApiResponse } from '@summerfi/app-types'
 import { Card, EXTERNAL_LINKS, Icon, Text, Tooltip } from '@summerfi/app-ui'
 import Link from 'next/link'
 
-import classNames from '@/components/molecules/CriteriaList/CriteriaList.module.scss'
+import criteriaListStyles from '@/components/molecules/CriteriaList/CriteriaList.module.scss'
 
 interface CriteriaListProps {
   userRays:
@@ -60,15 +60,15 @@ const getCriteriaItems = ({ userTypes }: { userTypes?: RaysApiResponse['userType
 
 export const CriteriaList = ({ userRays }: CriteriaListProps) => {
   return (
-    <div className={classNames.wrapper}>
+    <div className={criteriaListStyles.wrapper}>
       <Card variant="cardDark">
-        <div className={classNames.cardContent}>
+        <div className={criteriaListStyles.cardContent}>
           <Text as="h5" variant="h5">
             Criteria
           </Text>
           <ul>
             {getCriteriaItems({ userTypes: userRays?.rays?.userTypes }).map((item) => (
-              <li key={item.title} className={classNames.listItem}>
+              <li key={item.title} className={criteriaListStyles.listItem}>
                 <div style={{ display: 'flex', alignItems: 'center' }}>
                   <div
                     style={{
@@ -88,7 +88,7 @@ export const CriteriaList = ({ userRays }: CriteriaListProps) => {
                   </Text>
                   <Tooltip
                     tooltip={
-                      <div className={classNames.tooltipWrapper}>
+                      <div className={criteriaListStyles.tooltipWrapper}>
                         <Text as="p" variant="p2semi" style={{ color: 'var(--color-primary-100' }}>
                           {item.tooltip.title}
                         </Text>

apps/rays-dashboard/components/molecules/ProductCard/ProductCard.tsx

@@ -16,7 +16,7 @@ import { type NetworkNames, networksByName } from '@/constants/networks-list'
 import { type LendingProtocolConfig } from '@/helpers/lending-protocols-configs'
 import { trackButtonClick } from '@/helpers/mixpanel'
 
-import classNames from '@/components/molecules/ProductCard/ProductCard.module.scss'
+import productCardStyles from '@/components/molecules/ProductCard/ProductCard.module.scss'
 
 interface AutomationItem {
   tooltip: string
@@ -79,12 +79,12 @@ export const ProductCard: FC<ProductCardProps> = ({
   btn,
 }) => {
   return (
-    <Card className={classNames.cardWrapper}>
-      <div className={classNames.content}>
-        <div className={classNames.headingWrapper}>
-          <div className={classNames.generalInfoWrapper}>
+    <Card className={productCardStyles.cardWrapper}>
+      <div className={productCardStyles.content}>
+        <div className={productCardStyles.headingWrapper}>
+          <div className={productCardStyles.generalInfoWrapper}>
             <TokensGroup tokens={tokens} />
-            <div className={classNames.groupWrapper}>
+            <div className={productCardStyles.groupWrapper}>
               <Text as="h5" variant="h5">
                 {title ?? tokens.join('/')}
               </Text>
@@ -100,9 +100,12 @@ export const ProductCard: FC<ProductCardProps> = ({
               />
             </div>
           </div>
-          <div className={classNames.automationWrapper}>
+          <div className={productCardStyles.automationWrapper}>
             {automation.map((item) => (
-              <div className={classNames.automationItem} key={automationItemsMapper[item].label}>
+              <div
+                className={productCardStyles.automationItem}
+                key={automationItemsMapper[item].label}
+              >
                 <AutomationIcon
                   type={item}
                   tooltip={automationItemsMapper[item].tooltip}
@@ -115,7 +118,13 @@ export const ProductCard: FC<ProductCardProps> = ({
             ))}
           </div>
         </div>
-        <Link passHref legacyBehavior prefetch={false} href={btn.link} className={classNames.link}>
+        <Link
+          passHref
+          legacyBehavior
+          prefetch={false}
+          href={btn.link}
+          className={productCardStyles.link}
+        >
           <ProxyLinkComponent target="_blank">
             <Button
               variant="colorful"

apps/rays-dashboard/components/organisms/CalculatorModal/CalculatorModal.tsx

@@ -15,7 +15,7 @@ const cleanInputValue = (value: string) => `${value}`.replace('$', '').trim()
 
 const CalculatorModalRaysValue = ({ value, label }: { value: number; label: string }) => {
   return (
-    <div className={calculatorModalStyles.valueBox}>
+    <div className={calculatorModalStyles.valueBox} title={`${label}: ${value.toPrecision(2)}`}>
       <Text
         as="h4"
         variant="h4"

apps/rays-dashboard/components/organisms/Leaderboard/Leaderboard.tsx

@@ -8,7 +8,7 @@ import {
   type mapLeaderboardColumns,
 } from '@/components/organisms/Leaderboard/columns'
 
-import classNames from '@/components/organisms/Leaderboard/Leaderboard.module.scss'
+import leaderboardStyles from '@/components/organisms/Leaderboard/Leaderboard.module.scss'
 
 interface LeaderboardProps {
   leaderboardData?: ReturnType<typeof mapLeaderboardColumns>
@@ -26,14 +26,14 @@ export const Leaderboard: FC<LeaderboardProps> = ({
   const isZeroResults = leaderboardData?.length === 0
 
   return (
-    <div className={classNames.leaderboardWrapper}>
-      <div className={classNames.headingWrapper}>
+    <div className={leaderboardStyles.leaderboardWrapper}>
+      <div className={leaderboardStyles.headingWrapper}>
         <Text as="h2" variant="h2">
           {title ? title : 'Leaderboard'}
         </Text>
       </div>
       {isError && (
-        <div className={classNames.errorWrapper}>
+        <div className={leaderboardStyles.errorWrapper}>
           <Text as="h5" variant="h5">
             There was a problem loading the leaderboard. Please try again.
           </Text>
@@ -70,7 +70,7 @@ export const Leaderboard: FC<LeaderboardProps> = ({
         />
       )}
       {isZeroResults && !isLoading && (
-        <div className={classNames.errorWrapper}>
+        <div className={leaderboardStyles.errorWrapper}>
           <Text as="h5" variant="h5">
             No results found
           </Text>