chore: misc. ui updates

atoms/epochs.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const epochsAtom = atom<any | null>(null)

src/components/Dashboard/OperatorGrid/OperatorCard.tsx

@@ -8,6 +8,7 @@ import { usePinOperator } from '../../../../apis/operators/usePinOperator'
 import { useStakeOperator } from '../../../../apis/operators/useStakeOperator'
 import { useUnstakeOperator } from '../../../../apis/operators/useUnstakeOperator'
 import { degenModeAtom } from '../../../../atoms/degenMode'
+import { epochsAtom } from '../../../../atoms/epochs'
 import { userInfoAtom } from '../../../../atoms/userInfo'
 import { walletAddressAtom } from '../../../../atoms/wallet'
 import { ProcessedOperator } from '../../../../types/operators'
@@ -23,6 +24,9 @@ const OperatorCard: React.FC<OperatorCardProps> = ({
   const isDegenMode = useAtomValue(degenModeAtom)
 
   const [isStaked, setIsStaked] = useState(operator.isStaked)
+  const epochs = useAtomValue(epochsAtom)
+
+  const xpPerBlock = epochs?.[0]?.xp_per_block
 
   const queryClient = useQueryClient()
 
@@ -95,7 +99,7 @@ const OperatorCard: React.FC<OperatorCardProps> = ({
         <OperatorName>{operator.name}</OperatorName>
         <PointsPerHour>
           <Label>XP/Block</Label>
-          <Value>{operator.pointsPerHour} XP</Value>
+          <Value>{xpPerBlock} XP</Value>
         </PointsPerHour>
       </OperatorInfo>
       <Actions>

src/components/Dashboard/OperatorPanel/OperatorPanel.tsx

@@ -61,6 +61,8 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
     })
   }
 
+  console.log('user', user)
+
   return (
     <StyledPanel>
       {user?.pinned_operator && (
@@ -110,7 +112,7 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
         </InfoRow>
         <InfoRow>
           <Label>Role</Label>
-          <Value>{user?.id && 'Operator'}</Value>
+          <Value>{user?.role && 'Operator'}</Value>
         </InfoRow>
         <InfoRow>
           <Label>OP Number</Label>

src/components/Dashboard/ProgressBar/ProgressBar.tsx

@@ -3,7 +3,7 @@ import { numberWithCommas } from '@/utils/general.utils'
 import styled from '@emotion/styled'
 import { useAtomValue } from 'jotai'
 import React from 'react'
-import useGetEpochs from '../../../../apis/general/useGetEpochs'
+import { epochsAtom } from '../../../../atoms/epochs'
 import { userInfoAtom } from '../../../../atoms/userInfo'
 
 interface ProgressBarProps {
@@ -16,16 +16,19 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
   claimPosition = 76,
 }) => {
   const user = useAtomValue(userInfoAtom)
-
-  const { data: epochs } = useGetEpochs({
-    enabled: user?.address?.length > 0,
-  })
+  const epochs = useAtomValue(epochsAtom)
 
   // const { data: currentBlock } = useGetCurrentBTCBlock()
   // const { data: pillars } = useGetPillars()
 
   // console.log('currentBlock', currentBlock)
-  // console.log('epochs', epochs)
+
+  // sum up user => operators => staking_xp_per_block
+  const epochXP =
+    user?.operators.reduce(
+      (acc: any, operator: any) => acc + operator.staking_xp_per_block,
+      0,
+    ) || 0
 
   return (
     <Container>
@@ -71,7 +74,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
           <EarnedReward>
             <Label>Epoch 1 XP</Label>
             <Value color="#F29AE9" backgroundColor="#320430">
-              {`${numberWithCommas(0)}`}
+              {`${numberWithCommas(epochXP)}`}
             </Value>
           </EarnedReward>
         </PointsRow>

src/components/Toast/Toast.tsx

@@ -47,8 +47,8 @@ const Toast: React.FC = () => {
 
   return (
     <ToastContainer showTopToast={showTopToast}>
-      {userInfo?.message?.length > 0 ? (
-        userInfo.message
+      {userInfo?.alert_message?.length > 0 ? (
+        userInfo.alert_message
       ) : (
         <>
           Logos Ordinals Mint Begins November 4, 2024 at 1PM UTC

src/components/WalletConnect/WalletConnect.tsx

@@ -26,8 +26,6 @@ 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
@@ -77,10 +75,10 @@ const Dropdown: React.FC = () => {
         sessionStorage.setItem('refreshToken', refresh)
         sessionStorage.setItem('walletAddress', address)
 
-        if (referral_code?.length && referral_address?.length) {
+        if (referral_code?.length) {
           await api.post('/user/referral', {
             referral_code: referral_code,
-            referral_address: referral_address,
+            referral_address: walletAddress,
             referral_source: referral_source || '',
           })
         }

src/components/common/Collapse/CopyCode.tsx

@@ -1,6 +1,4 @@
 import styled from '@emotion/styled'
-import { useAtomValue } from 'jotai'
-import { userInfoAtom } from '../../../../atoms/userInfo'
 import Collapse from './Collapse'
 
 interface Props {
@@ -8,13 +6,13 @@ interface Props {
 }
 
 const CopyCode = ({ referralCode }: Props) => {
-  const walletAddress = useAtomValue(userInfoAtom)?.address
+  // const walletAddress = useAtomValue(userInfoAtom)?.address
 
   // attach : ?referral_code=${referralCode}&referral_address=${walletAddress}
 
   const copyToClipboard = () => {
     const currentUrl = window.location.href
-    const referral = `${currentUrl}?referral_code=${referralCode}&referral_address=${walletAddress}`
+    const referral = `${currentUrl}?referral_code=${referralCode}`
 
     navigator.clipboard.writeText(referral || '')
 

src/containers/Dashboard/DashboardContainer.tsx

@@ -3,10 +3,12 @@ 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 } from 'jotai'
+import { useAtom, useSetAtom } from 'jotai'
 import React, { useEffect } from 'react'
 // import useGetUserXP from '../../../apis/general/useGetUserXP'
+import useGetEpochs from '../../../apis/general/useGetEpochs'
 import useGetUserInfo from '../../../apis/operators/useGetUserInfo'
+import { epochsAtom } from '../../../atoms/epochs'
 import { userInfoAtom } from '../../../atoms/userInfo'
 import { walletAddressAtom } from '../../../atoms/wallet'
 import { processMyOperators } from '../../../utils/operators'
@@ -29,6 +31,18 @@ const DashboardContainer: React.FC<DashboardPageProps> = ({
     setUserInfo,
   })
 
+  const { data: epochsData } = useGetEpochs({
+    enabled: true,
+  })
+
+  const setEpochs = useSetAtom(epochsAtom)
+
+  useEffect(() => {
+    if (epochsData) {
+      setEpochs(epochsData)
+    }
+  }, [epochsData, setEpochs])
+
   useEffect(() => {
     const walletAddress = sessionStorage.getItem('walletAddress')