diff --git a/components/ResearchCoin/UserBalanceSection.tsx b/components/ResearchCoin/UserBalanceSection.tsx index 06e46e60d..bd2000ded 100644 --- a/components/ResearchCoin/UserBalanceSection.tsx +++ b/components/ResearchCoin/UserBalanceSection.tsx @@ -5,11 +5,14 @@ import { useState } from 'react'; import { DepositModal } from '../modals/ResearchCoin/DepositModal'; import { WithdrawModal } from '../modals/ResearchCoin/WithdrawModal'; import { useCurrencyPreference } from '@/contexts/CurrencyPreferenceContext'; +import { useUser } from '@/contexts/UserContext'; import { Tooltip } from '@/components/ui/Tooltip'; import { FundingCreditsTooltip } from '@/components/ui/FundingCreditsTooltip'; +import { Switch } from '@/components/ui/Switch'; import { formatCombinedBalance, formatCombinedBalanceSecondary } from '@/utils/number'; import { Button } from '@/components/ui/Button'; import { ResearchCoinIcon } from '@/components/ui/icons/ResearchCoinIcon'; +import { UserService } from '@/services/user.service'; interface UserBalanceSectionProps { balance: { @@ -52,9 +55,24 @@ export function UserBalanceSection({ }: UserBalanceSectionProps) { const [isDepositModalOpen, setIsDepositModalOpen] = useState(false); const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false); + const [isUpdatingStaking, setIsUpdatingStaking] = useState(false); + const { user, refreshUser } = useUser(); const { showUSD } = useCurrencyPreference(); + const handleStakingToggle = async (checked: boolean) => { + if (!user || isUpdatingStaking) return; + setIsUpdatingStaking(true); + try { + await UserService.updateStakingOptIn(checked); + await refreshUser({ silent: true }); + } catch (error) { + console.error('Failed to update staking preference:', error); + } finally { + setIsUpdatingStaking(false); + } + }; + const isBalanceReady = !isFetchingExchangeRate; return ( @@ -100,12 +118,27 @@ export function UserBalanceSection({