Add staking opt in

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({
                     <div className="text-sm font-semibold text-gray-900">ResearchCoin</div>
                   </div>
                 </div>
-                <div className="text-right">
-                  <div className="text-sm font-semibold text-gray-900 font-mono">
-                    {showUSD ? balance?.formattedUsd || '$0.00' : balance?.formatted || '0 RSC'}
-                  </div>
-                  <div className="text-xs text-gray-500 font-mono mt-0.5">
-                    {showUSD ? balance?.formatted || '0 RSC' : balance?.formattedUsd || '$0.00'}
+                <div className="flex items-center gap-4">
+                  <Tooltip
+                    content={user?.isStakingOptedIn ? 'Staking enabled' : 'Enable staking'}
+                    position="top"
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-gray-500">Stake</span>
+                      <Switch
+                        checked={user?.isStakingOptedIn ?? false}
+                        onCheckedChange={handleStakingToggle}
+                        disabled={isUpdatingStaking}
+                      />
+                    </div>
+                  </Tooltip>
+                  <div className="text-right">
+                    <div className="text-sm font-semibold text-gray-900 font-mono">
+                      {showUSD ? balance?.formattedUsd || '$0.00' : balance?.formatted || '0 RSC'}
+                    </div>
+                    <div className="text-xs text-gray-500 font-mono mt-0.5">
+                      {showUSD ? balance?.formatted || '0 RSC' : balance?.formattedUsd || '$0.00'}
+                    </div>
                   </div>
                 </div>
               </div>

services/user.service.ts

@@ -75,6 +75,16 @@ export class UserService {
     }
   }
 
+  /**
+   * Update the user's RSC staking opt-in preference
+   */
+  static async updateStakingOptIn(isOptedIn: boolean): Promise<User> {
+    const response = await ApiClient.patch<any>(`/api/user/set_staking_opted_in/`, {
+      is_staking_opted_in: isOptedIn,
+    });
+    return transformUser(response);
+  }
+
   /**
    * Check user permissions using the gatekeeper system
    * @param application The application name to check permissions for

types/user.ts

@@ -23,6 +23,7 @@ export interface User {
   isModerator?: boolean;
   referralCode?: string;
   authProvider?: 'google' | 'credentials';
+  isStakingOptedIn?: boolean;
 }
 
 export type TransformedUser = User & BaseTransformed;
@@ -47,6 +48,7 @@ const baseTransformUser = (raw: any): User => {
       moderator: false,
       isModerator: false,
       authProvider: undefined,
+      isStakingOptedIn: false,
     };
   }
 
@@ -84,6 +86,7 @@ const baseTransformUser = (raw: any): User => {
         ? 'google'
         : 'credentials'
       : undefined,
+    isStakingOptedIn: raw.is_staking_opted_in ?? false,
   };
 };
 
@@ -107,6 +110,7 @@ export const transformUser = (raw: any): TransformedUser => {
       raw: null,
       isModerator: false,
       authProvider: undefined,
+      isStakingOptedIn: false,
     };
   }