feat: implement pin/unpin temporarilly

src/components/Dashboard/OperatorGrid/OperatorCard.tsx

@@ -1,9 +1,14 @@
 import styled from '@emotion/styled'
+import { useQueryClient } from '@tanstack/react-query'
+import { useAtomValue } from 'jotai'
 import Link from 'next/link'
 import React, { useState } from 'react'
+import useGetUserInfo from '../../../../apis/operators/useGetUserInfo'
 import { usePinOperator } from '../../../../apis/operators/usePinOperator'
 import { useStakeOperator } from '../../../../apis/operators/useStakeOperator'
 import { useUnstakeOperator } from '../../../../apis/operators/useUnstakeOperator'
+import { userInfoAtom } from '../../../../atoms/userInfo'
+import { walletAddressAtom } from '../../../../atoms/wallet'
 import { ProcessedOperator } from '../../../../types/operators'
 
 interface OperatorCardProps {
@@ -13,24 +18,40 @@ interface OperatorCardProps {
 const OperatorCard: React.FC<OperatorCardProps> = ({
   operator,
 }: OperatorCardProps) => {
+  const user = useAtomValue(userInfoAtom)
+
   const [isStaked, setIsStaked] = useState(operator.isStaked)
   const [isPinned, setIsPinned] = useState(operator.isPinned)
 
+  const queryClient = useQueryClient()
+
+  const walletAddress = useAtomValue(walletAddressAtom)
+
   const stake = useStakeOperator()
   const unstake = useUnstakeOperator()
   const pin = usePinOperator()
 
+  const { refetch, updateCache } = useGetUserInfo({
+    walletAddress,
+  })
+
   const handleStake = (operatorId: string) => {
     if (isStaked) {
       unstake.mutate({
         operator_id: operatorId,
         setIsStaked,
       })
+
+      queryClient.invalidateQueries('getUserInfo' as any)
+      refetch()
     } else {
       stake.mutate({
         operator_id: operatorId,
         setIsStaked,
       })
+
+      queryClient.invalidateQueries('getUserInfo' as any)
+      refetch()
     }
   }
 
@@ -38,14 +59,19 @@ const OperatorCard: React.FC<OperatorCardProps> = ({
     pin.mutate({
       operator_id: operatorId,
     })
-
-    setIsPinned(!isPinned)
+    window.location.reload()
   }
 
   return (
     <Container key={operator.id}>
       <Link href={`/operators/${operator.id}`} key={operator.id}>
-        <OperatorImage src={operator.image} alt={operator.name} />
+        <OperatorImage
+          src={operator?.gif}
+          data-src={operator?.gif}
+          alt={`Operator ${operator.name}`}
+          loading="lazy"
+          className="lazyload"
+        />
       </Link>
       <OperatorInfo>
         <OperatorName>{operator.name}</OperatorName>

src/components/Dashboard/OperatorPanel/OperatorPanel.tsx

@@ -28,7 +28,6 @@ interface OperatorPanelProps {}
 
 const OperatorPanel: React.FC<OperatorPanelProps> = () => {
   const user = useAtomValue(userInfoAtom)
-  console.log('user', user)
 
   const handleCopyAddress = () => {
     navigator.clipboard.writeText(user?.address)
@@ -45,18 +44,18 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
       {user?.pinned_operator && (
         <Profile>
           <OperatorImage
-            src="/dashboard/mock/operators/pinned.gif"
+            src={user?.pinned_operator?.image_400_url}
             alt="Operator"
           />
           <OperatorInfo>
-            <OperatorType>Quantum Recursive Memetic</OperatorType>
+            <OperatorType>{user?.pinned_operator?.name}</OperatorType>
           </OperatorInfo>
         </Profile>
       )}
 
       <InfoRow>
         <Label>Archetype</Label>
-        <Value>Memetic</Value>
+        <Value>{user?.pinned_operator?.archetype}</Value>
       </InfoRow>
 
       <CallSignContainer>

src/components/Dashboard/ProgressBar/ProgressBar.tsx

@@ -1,8 +1,10 @@
 import { breakpoints } from '@/configs/ui.configs'
 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 { userInfoAtom } from '../../../../atoms/userInfo'
 
 interface ProgressBarProps {
   progress: number // Current progress of the epoch
@@ -14,6 +16,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
   claimPosition = 76,
 }) => {
   const { data: epochs } = useGetEpochs()
+  const user = useAtomValue(userInfoAtom)
   // const { data: currentBlock } = useGetCurrentBTCBlock()
   // const { data: pillars } = useGetPillars()
 
@@ -58,7 +61,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
           <EarnedReward>
             <Label>Total Points</Label>
             <Value color="#F29AE9" backgroundColor="#320430">
-              {`${numberWithCommas(40278)}`}
+              {`${numberWithCommas(user?.total_xp)}`}
             </Value>
           </EarnedReward>
           <EarnedReward>

src/components/WalletConnect/magicEden.ts

@@ -51,8 +51,6 @@ export async function signWalletMessage(address: string) {
           message: WALLET_SIGN_MESSAGE_REQUEST,
         },
         onFinish: (response) => {
-          console.log('onFinish response, ', response)
-
           resolve(response)
         },
         onCancel: () => {

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 useGetUserInfo from '../../../apis/operators/useGetUserInfo'
 import { userInfoAtom } from '../../../atoms/userInfo'
@@ -19,7 +19,7 @@ const DashboardContainer: React.FC<DashboardPageProps> = ({
   children,
   ...props
 }) => {
-  const setUserInfo = useSetAtom(userInfoAtom)
+  const [userInfo, setUserInfo] = useAtom(userInfoAtom)
 
   const [walletAddress, setWalletAddress] = useAtom(walletAddressAtom)
 

utils/operators.ts

@@ -40,7 +40,7 @@ export function processMyOperators(operators: any[]) {
   }
 
   return operators?.map((operator) => ({
-    id: operator.id.toString(),
+    id: operator.id,
     arcgetypeId: operator.archetype_id,
     image: operator.image_400_jpeg_url,
     gif: operator.image_400_url,