Implement Wallet Protection for Critical Blockchain Actions

[0xdevcollins]

Overview

Currently, critical blockchain actions in the Boundless platform can be performed without requiring users to connect their wallets. This creates a poor user experience and potential security issues. We need to implement a wallet protection system that shows a modal when wallet connection is required.

ETA: 48hrs

Ensure the ui aligns with our current design

Problem Statement

The following actions currently lack proper wallet connection validation:

1. Launching Campaigns - Users can click "Launch Campaign" without wallet connection
2. Backing Projects - Users can submit backing forms without wallet validation
3. Project Initialization - Project creation lacks wallet authentication
4. Milestone Management - Milestone operations don't verify wallet connection

Proposed Solution

Implement a custom hook (useWalletProtection) that:

• Shows a modal when wallet connection is required
• Provides a seamless wallet connection flow
• Validates wallet connection before allowing actions
• Integrates with existing wallet infrastructure

Technical Implementation

1. Custom Hook: hooks/use-wallet-protection.ts

export function useWalletProtection(options: UseWalletProtectionOptions = {}) {
  const { actionName = 'perform this action', showModal = true } = options;
  const { isConnected, publicKey } = useWalletStore();
  const [showWalletModal, setShowWalletModal] = useState(false);

  const requireWallet = (callback?: () => void) => {
    if (!isConnected) {
      if (showModal) {
        setShowWalletModal(true);
      } else {
        toast.error(`Wallet connection required to ${actionName}`);
      }
      return false;
    }
    
    if (callback) {
      callback();
    }
    
    return true;
  };

  return {
    requireWallet,
    isConnected,
    publicKey,
    showWalletModal,
    handleWalletConnected,
    closeWalletModal,
  };
}

2. Modal Component: components/wallet/WalletRequiredModal.tsx

• Shows when wallet connection is required
• Explains why wallet connection is needed
• Provides wallet connection button
• Handles connection success callback

3. Enhanced WalletConnectButton

• Added onConnect callback prop
• Integrates with ConnectWallet modal
• Triggers callback on successful connection

User Flow

1. User clicks action button (e.g., "Launch Campaign")
2. If wallet not connected → Modal appears with explanation
3. User clicks "Connect Wallet" → Wallet connection modal opens
4. User connects wallet → Modal closes, action proceeds
5. If wallet already connected → Action proceeds immediately

Example Usage

Launch Campaign Flow:

const LaunchCampaignFlow = () => {
  const { requireWallet, showWalletModal, handleWalletConnected } = useWalletProtection({
    actionName: 'launch campaign'
  });

  const handleLaunch = () => {
    requireWallet(() => {
      // Proceed with campaign launch
      launchCampaign(projectId);
    });
  };

  return (
    <>
      <Button onClick={handleLaunch}>Launch Campaign</Button>
      
      <WalletRequiredModal
        open={showWalletModal}
        onOpenChange={setShowWalletModal}
        actionName="launch campaign"
        onWalletConnected={handleWalletConnected}
      />
    </>
  );
};

Required Changes

1. Create new files:

   • hooks/use-wallet-protection.ts
   • components/wallet/WalletRequiredModal.tsx

2. Update existing files:

   • components/wallet/WalletConnectButton.tsx - Add onConnect prop
   • components/connect-wallet/index.tsx - Add onConnect callback
   • components/project/LaunchCampaignFlow.tsx - Implement wallet protection
   • components/flows/back-project/back-project-form.tsx - Add wallet validation

3. Integration points:

   • All blockchain action buttons
   • Form submission handlers
   • API call wrappers

Acceptance Criteria

• useWalletProtection hook created and tested
• WalletRequiredModal component implemented
• WalletConnectButton supports onConnect callback
• Launch Campaign flow requires wallet connection
• Back Project flow requires wallet connection
• Project initialization requires wallet connection
• Modal shows clear explanation of why wallet is needed
• Seamless wallet connection flow
• Proper error handling for wallet failures
• No breaking changes to existing functionality

User Experience Requirements

1. Clear Messaging:

   • Explain why wallet connection is required
   • List benefits of wallet connection
   • Provide clear next steps

2. Smooth Flow:

   • Modal appears immediately when needed
   • Wallet connection is straightforward
   • Action proceeds automatically after connection

3. Error Handling:

   • Graceful handling of connection failures
   • Clear error messages
   • Retry options available

Priority

High - This affects core platform security and user experience

Dependencies

• Existing wallet connection infrastructure
• Stellar SDK integration
• Current wallet store implementation