diff --git a/packages/commonwealth/client/scripts/views/pages/GovernancePage/GovernanceCards/GovernanceUserProfile/GovernanceUserProfile.scss b/packages/commonwealth/client/scripts/views/pages/GovernancePage/GovernanceCards/GovernanceUserProfile/GovernanceUserProfile.scss index c8c24d3279a..7e8d2aa2732 100644 --- a/packages/commonwealth/client/scripts/views/pages/GovernancePage/GovernanceCards/GovernanceUserProfile/GovernanceUserProfile.scss +++ b/packages/commonwealth/client/scripts/views/pages/GovernancePage/GovernanceCards/GovernanceUserProfile/GovernanceUserProfile.scss @@ -37,5 +37,35 @@ .profile-body { margin-bottom: 16px; font-size: 14px; + + .stats { + display: grid; + grid-template-columns: 1fr; + grid-row-gap: 10px; + margin-bottom: 12px; + + .stat { + display: flex; + flex-direction: column; + + .stat-label { + color: colors.$neutral-500; + } + + .stat-value { + color: colors.$neutral-900; + } + } + } + + .lock-cta { + display: flex; + flex-direction: column; + gap: 8px; + + .lock-explainer { + color: colors.$neutral-600; + } + } } } diff --git a/packages/commonwealth/client/scripts/views/pages/GovernancePage/GovernanceCards/GovernanceUserProfile/GovernanceUserProfile.tsx b/packages/commonwealth/client/scripts/views/pages/GovernancePage/GovernanceCards/GovernanceUserProfile/GovernanceUserProfile.tsx index 262d1fa00db..db4f67aa12f 100644 --- a/packages/commonwealth/client/scripts/views/pages/GovernancePage/GovernanceCards/GovernanceUserProfile/GovernanceUserProfile.tsx +++ b/packages/commonwealth/client/scripts/views/pages/GovernancePage/GovernanceCards/GovernanceUserProfile/GovernanceUserProfile.tsx @@ -1,4 +1,6 @@ +import { useGetCommunityByIdQuery } from 'client/scripts/state/api/communities'; import { useFetchProfileByIdQuery } from 'client/scripts/state/api/profiles'; +import useGetERC20BalanceQuery from 'client/scripts/state/api/tokens/getERC20Balance'; import useUserStore from 'client/scripts/state/ui/user'; import { saveToClipboard } from 'client/scripts/utils/clipboard'; import { CWIconButton } from 'client/scripts/views/components/component_kit/cw_icon_button'; @@ -9,10 +11,12 @@ import { handleMouseEnter, handleMouseLeave, } from 'client/scripts/views/menus/utils'; -import React from 'react'; +import React, { useMemo } from 'react'; import { Link } from 'react-router-dom'; import { formatAddressShort } from 'shared/utils'; +import { useManageCommunityStakeModalStore } from 'state/ui/modals'; import { useCommunityStake } from 'views/components/CommunityStake'; +import { useTokenTradeWidget } from 'views/components/sidebar/CommunitySection/TokenTradeWidget/useTokenTradeWidget'; import './GovernanceUserProfile.scss'; const GovernanceUserProfile = () => { @@ -21,11 +25,57 @@ const GovernanceUserProfile = () => { const { data } = useFetchProfileByIdQuery({ apiCallEnabled: userData.isLoggedIn, }); + console.log('data => ', data); const { currentVoteWeight, stakeValue } = useCommunityStake({ walletAddress: userData.activeAccount?.address || '', }); + // Community/node and token info to derive token address and RPC + const { communityToken } = useTokenTradeWidget(); + const { data: community } = useGetCommunityByIdQuery({ + id: communityToken?.community_id || '', + enabled: !!communityToken?.community_id, + includeNodeInfo: true, + }); + + const tokenInfo = useMemo(() => { + if (!communityToken) return { address: '', symbol: '' }; + // External pinned tokens use contract_address, launchpad tokens use token_address + const address = + ( + communityToken as unknown as { + contract_address?: string; + token_address?: string; + } + ).contract_address || + (communityToken as unknown as { token_address?: string }).token_address || + ''; + const symbol = + (communityToken as unknown as { symbol?: string }).symbol || 'TOKEN'; + return { address, symbol }; + }, [communityToken]); + + const nodeRpc = community?.ChainNode?.url || ''; + + const { data: tokenBalance = '0' } = useGetERC20BalanceQuery({ + userAddress: userData.activeAccount?.address || '', + tokenAddress: tokenInfo.address, + nodeRpc, + enabled: Boolean( + userData.activeAccount?.address && tokenInfo.address && nodeRpc, + ), + } as unknown as { + userAddress: string; + tokenAddress: string; + nodeRpc: string; + enabled?: boolean; + }); + + // CTA modal store for staking/locking + const { setModeOfManageCommunityStakeModal } = + useManageCommunityStakeModalStore(); + if (!data) return null; const avatar = data?.profile?.avatar_url ?? ''; @@ -92,10 +142,43 @@ const GovernanceUserProfile = () => {