chore: Refactor RaysCountSmall component to handle userAddress condit…

…ionally and display if user isnt connected
OasisDEX · Jul 16, 2024 · 1a497e6 · 1a497e6
1 parent f63ebd0
commit 1a497e6
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/packages/app-ui/src/components/molecules/RaysCountSmall/RaysCountSmall.tsx b/packages/app-ui/src/components/molecules/RaysCountSmall/RaysCountSmall.tsx
@@ -48,26 +48,30 @@ export const RaysCountSmall = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userAddress])
 
-  if (!userAddress) {
-    return null
-  }
-
   return (
     <Link
-      href={{
-        pathname: '/',
-        query: { userAddress },
-      }}
+      href={
+        userAddress
+          ? {
+              pathname: '/',
+              query: { userAddress },
+            }
+          : '/'
+      }
       style={{ textDecoration: 'none' }}
       suppressHydrationWarning
     >
       <div className={raysCountSmallStyles.raysCountWrapper}>
         <Icon iconName="rays" size={24} />
         <Text variant="p4semi" suppressHydrationWarning>
-          {loadingRaysCount || raysCount === null ? (
+          {loadingRaysCount ? (
             <SkeletonLine height={15} width={60} />
           ) : (
-            <>{formatter(new BigNumber(raysCount)).split('.')[0]} Rays</>
+            <>
+              {raysCount
+                ? `${formatter(new BigNumber(raysCount)).split('.')[0]} Rays`
+                : 'Get $RAYS'}
+            </>
           )}
         </Text>
       </div>