chore: fix misc. ui issues

src/components/Dashboard/OperatorGrid/OperatorCard.tsx

@@ -36,7 +36,7 @@ const OperatorCard: React.FC<OperatorCardProps> = ({
     walletAddress,
   })
 
-  const handleStake = (operatorId: string) => {
+  const handleStake = async (operatorId: string) => {
     setIsStaked((prev) => !prev)
 
     if (isStaked) {
@@ -46,7 +46,11 @@ const OperatorCard: React.FC<OperatorCardProps> = ({
       })
 
       queryClient.invalidateQueries('getUserInfo' as any)
-      refetch()
+      const res = await refetch()
+      const newInfo = res.data
+
+      updateCache(newInfo)
+      setUserInfo(newInfo)
     } else {
       stake.mutateAsync({
         operator_id: operatorId,
@@ -54,7 +58,11 @@ const OperatorCard: React.FC<OperatorCardProps> = ({
       })
 
       queryClient.invalidateQueries('getUserInfo' as any)
-      refetch()
+      const res = await refetch()
+      const newInfo = res.data
+
+      updateCache(newInfo)
+      setUserInfo(newInfo)
     }
   }
 

src/components/HamburgerMenu/HamburgerMenu.tsx

@@ -12,6 +12,7 @@ const Button = styled.button`
   height: 28px;
   border: 1px solid rgb(var(--lsd-border-primary));
   background: transparent;
+  flex-shrink: 0;
   cursor: pointer;
 
   @media (min-width: ${breakpoints.md}px) {

src/components/Header/Navbar/Navbar.tsx

@@ -93,10 +93,6 @@ const Navigation = styled.ul`
   }
 
   @media (max-width: ${breakpoints.md}px) {
-    display: none;
-  }
-
-  @media (max-width: 768px) {
     display: flex;
     flex-direction: column;
     align-items: flex-start;

src/components/Toast/Toast.tsx

@@ -1,6 +1,8 @@
 import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import { useAtomValue } from 'jotai'
 import { useEffect, useState } from 'react'
+import { userInfoAtom } from '../../../atoms/userInfo'
 
 const ToastContainer = styled.div`
   position: relative;
@@ -36,6 +38,7 @@ const ToastContainer = styled.div`
 
 const Toast: React.FC = () => {
   const [time, setTime] = useState('DD:HH:mm:ss')
+  const userInfo = useAtomValue(userInfoAtom)
 
   useEffect(() => {
     const targetTime = new Date('2024-11-04T13:00:00Z').getTime()
@@ -75,8 +78,14 @@ const Toast: React.FC = () => {
 
   return (
     <ToastContainer>
+      {userInfo?.message?.length > 0 ? (
+        userInfo.message
+      ) : (
+        <>
           Logos Ordinals Mint Begins November 4, 2024 at 1PM UTC
           <span>Time remaining: {time}</span>
+        </>
+      )}
     </ToastContainer>
   )
 }

src/components/WalletConnect/WalletConnect.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled'
 import { useAtom } from 'jotai'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef, useState } from 'react'
+import useGetUserInfo from '../../../apis/operators/useGetUserInfo'
 import { userInfoAtom } from '../../../atoms/userInfo'
 import { walletAddressAtom } from '../../../atoms/wallet'
 import { api } from '../../../common/api'
@@ -25,11 +26,19 @@ const Dropdown: React.FC = () => {
   const [isExpanded, setIsExpanded] = useState(false)
   const [walletAddress, setWalletAddress] = useAtom(walletAddressAtom)
 
+  console.log('walletAddress', walletAddress)
+
   const router = useRouter()
 
   const { referral_code, referral_address, referral_source } = router.query
 
   const [userInfo, setUserInfo] = useAtom(userInfoAtom)
+
+  useGetUserInfo({
+    walletAddress,
+    setUserInfo,
+  })
+
   const [showMultiPass, setShowMultiPass] = useState(false)
 
   const walletHandlers = {

src/containers/Dashboard/DashboardContainer.tsx

@@ -3,7 +3,7 @@ import { OperatorPanel } from '@/components/Dashboard/OperatorPanel'
 import { ProgressBar } from '@/components/Dashboard/ProgressBar'
 import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
-import { useAtom, useSetAtom } from 'jotai'
+import { useAtom } from 'jotai'
 import React, { useEffect } from 'react'
 // import useGetUserXP from '../../../apis/general/useGetUserXP'
 import useGetUserInfo from '../../../apis/operators/useGetUserInfo'
@@ -20,15 +20,11 @@ const DashboardContainer: React.FC<DashboardPageProps> = ({
   children,
   ...props
 }) => {
-  const setUserInfo = useSetAtom(userInfoAtom)
+  const [userInfo, setUserInfo] = useAtom(userInfoAtom)
 
   const [walletAddress, setWalletAddress] = useAtom(walletAddressAtom)
 
-  const {
-    data: userInfoData,
-    isLoading: isUserInfoLoading,
-    refetch,
-  } = useGetUserInfo({
+  const { isLoading: isUserInfoLoading, refetch } = useGetUserInfo({
     walletAddress,
     setUserInfo,
   })
@@ -36,15 +32,15 @@ const DashboardContainer: React.FC<DashboardPageProps> = ({
   useEffect(() => {
     const walletAddress = sessionStorage.getItem('walletAddress')
 
-    if (walletAddress && userInfoData == null) {
+    if (walletAddress && userInfo == null) {
       refetch()
       setWalletAddress(walletAddress)
     }
-  }, [setUserInfo, walletAddress, userInfoData, refetch, setWalletAddress])
+  }, [setUserInfo, walletAddress, userInfo, refetch, setWalletAddress])
 
-  const processedOperators = processMyOperators(userInfoData?.operators)
+  const processedOperators = processMyOperators(userInfo?.operators)
 
-  console.log('processedOperators', processedOperators)
+  // console.log('processedOperators', processedOperators)
 
   // const { data: userXP } = useGetUserXP({
   //   enabled: !!walletAddress && walletAddress.length > 0,