From da3c5fc2d234248611bd50a8e2d58e46de4d927f Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Wed, 23 Oct 2024 02:56:39 +0900 Subject: [PATCH] feat: implement pin/unpin temporarilly --- .../Dashboard/OperatorGrid/OperatorCard.tsx | 32 +++++++++++++++++-- .../Dashboard/OperatorPanel/OperatorPanel.tsx | 7 ++-- .../Dashboard/ProgressBar/ProgressBar.tsx | 5 ++- src/components/WalletConnect/magicEden.ts | 2 -- .../Dashboard/DashboardContainer.tsx | 4 +-- utils/operators.ts | 2 +- 6 files changed, 39 insertions(+), 13 deletions(-) diff --git a/src/components/Dashboard/OperatorGrid/OperatorCard.tsx b/src/components/Dashboard/OperatorGrid/OperatorCard.tsx index aa19466798..1bc3ca4cf0 100644 --- a/src/components/Dashboard/OperatorGrid/OperatorCard.tsx +++ b/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 = ({ 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 = ({ pin.mutate({ operator_id: operatorId, }) - - setIsPinned(!isPinned) + window.location.reload() } return ( - + {operator.name} diff --git a/src/components/Dashboard/OperatorPanel/OperatorPanel.tsx b/src/components/Dashboard/OperatorPanel/OperatorPanel.tsx index 2ccfeaf67e..fa5c3134b8 100644 --- a/src/components/Dashboard/OperatorPanel/OperatorPanel.tsx +++ b/src/components/Dashboard/OperatorPanel/OperatorPanel.tsx @@ -28,7 +28,6 @@ interface OperatorPanelProps {} const OperatorPanel: React.FC = () => { const user = useAtomValue(userInfoAtom) - console.log('user', user) const handleCopyAddress = () => { navigator.clipboard.writeText(user?.address) @@ -45,18 +44,18 @@ const OperatorPanel: React.FC = () => { {user?.pinned_operator && ( - Quantum Recursive Memetic + {user?.pinned_operator?.name} )} - Memetic + {user?.pinned_operator?.archetype} diff --git a/src/components/Dashboard/ProgressBar/ProgressBar.tsx b/src/components/Dashboard/ProgressBar/ProgressBar.tsx index d30b6833bb..c30864f229 100644 --- a/src/components/Dashboard/ProgressBar/ProgressBar.tsx +++ b/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 = ({ 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 = ({ - {`${numberWithCommas(40278)}`} + {`${numberWithCommas(user?.total_xp)}`} diff --git a/src/components/WalletConnect/magicEden.ts b/src/components/WalletConnect/magicEden.ts index cc6becf38c..41040be0c2 100644 --- a/src/components/WalletConnect/magicEden.ts +++ b/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: () => { diff --git a/src/containers/Dashboard/DashboardContainer.tsx b/src/containers/Dashboard/DashboardContainer.tsx index c6f8f24bda..28de472d6b 100644 --- a/src/containers/Dashboard/DashboardContainer.tsx +++ b/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 = ({ children, ...props }) => { - const setUserInfo = useSetAtom(userInfoAtom) + const [userInfo, setUserInfo] = useAtom(userInfoAtom) const [walletAddress, setWalletAddress] = useAtom(walletAddressAtom) diff --git a/utils/operators.ts b/utils/operators.ts index 4ded3e197c..b926ce759c 100644 --- a/utils/operators.ts +++ b/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,