useClose

Programmatically close the Mini App frame

Defined in @coinbase/onchainkit

Allows Mini Apps to close themselves programmatically. Useful for completion flows, cancellation actions, or after successful operations.

Returns

close · () => void

Function that closes the Mini App frame and returns the user to the host application.

components/CloseButton.tsx

import { useClose } from '@coinbase/onchainkit/minikit';

export default function CloseButton() {
  const close = useClose();

  return (
    <button onClick={close} className="close-btn">
      ✕ Close
    </button>
  );
}

Usage Patterns

Completion Flows

Close automatically after successful operations:

components/CompletionFlow.tsx

const handleGameComplete = async () => {
  await saveScore(finalScore);
  
  // Show completion screen briefly
  setShowCompletion(true);
  
  // Auto-close after celebration
  setTimeout(close, 3000);
};

Navigation Replacement

Use close instead of navigation for simple flows:

components/NavigationReplacement.tsx

// Instead of navigating back, close the frame
const handleCancel = () => {
  if (hasUnsavedChanges) {
    confirmAndClose();
  } else {
    close();
  }
};

Error Recovery

Provide escape routes for error states:

components/ErrorScreen.tsx

if (hasUnrecoverableError) {
  return (
    <div className="error-screen">
      <h2>Something went wrong</h2>
      <p>Please try again later</p>
      <button onClick={close}>Close</button>
    </div>
  );
}

Best Practices

User Experience

• Confirm important actions: Ask before closing if user has unsaved work
• Provide feedback: Show completion states before auto-closing
• Quick escape: Always provide a way to close, especially in error states

Technical Considerations

• Save state: Persist important data before closing
• Clean up: Cancel ongoing requests or timers
• Analytics: Track close events for UX insights

components/HandleClose.tsx

const handleClose = () => {
  // Clean up
  cancelPendingRequests();
  clearIntervals();
  
  // Track analytics
  analytics.track('mini_app_closed', {
    session_duration: Date.now() - sessionStart,
    completion_state: currentState
  });
  
  // Close
  close();
};

useClose provides a clean exit for Mini Apps. Use it thoughtfully to create polished user experiences that feel native to the host application flow.