Add displayName to contexts (#8814)

__mocks__/@gorhom/bottom-sheet.tsx

@@ -1,7 +1,8 @@
-import React, {ReactNode} from 'react'
-import {View, ScrollView, Modal, FlatList, TextInput} from 'react-native'
+import React, {type ReactNode} from 'react'
+import {FlatList, Modal, ScrollView, TextInput, View} from 'react-native'
 
 const BottomSheetModalContext = React.createContext(null)
+BottomSheetModalContext.displayName = 'BottomSheetModalContext'
 
 const BottomSheetModalProvider = (props: any) => {
   return <BottomSheetModalContext.Provider {...props} value={{}} />
@@ -47,13 +48,13 @@ export {useBottomSheetInternal}
 export {useBottomSheetDynamicSnapPoints}
 
 export {
-  BottomSheetModalProvider,
   BottomSheetBackdrop,
+  BottomSheetFlatList,
+  BottomSheetFooter,
   BottomSheetHandle,
   BottomSheetModal,
-  BottomSheetFooter,
+  BottomSheetModalProvider,
   BottomSheetScrollView,
-  BottomSheetFlatList,
   BottomSheetTextInput,
 }
 

modules/bottom-sheet/src/BottomSheetPortal.tsx

@@ -5,6 +5,7 @@ import {createPortalGroup_INTERNAL} from './lib/Portal'
 type PortalContext = React.ElementType<{children: React.ReactNode}>
 
 export const Context = React.createContext({} as PortalContext)
+Context.displayName = 'BottomSheetPortalContext'
 
 export const useBottomSheetPortal_INTERNAL = () => React.useContext(Context)
 

modules/bottom-sheet/src/lib/Portal.tsx

@@ -18,6 +18,7 @@ export function createPortalGroup_INTERNAL() {
     append: () => {},
     remove: () => {},
   })
+  Context.displayName = 'BottomSheetPortalContext'
 
   function Provider(props: React.PropsWithChildren<{}>) {
     const map = React.useRef<ComponentMap>({})

src/alf/index.tsx

@@ -8,9 +8,9 @@ import {
   setFontScale as persistFontScale,
 } from '#/alf/fonts'
 import {createThemes, defaultTheme} from '#/alf/themes'
-import {Theme, ThemeName} from '#/alf/types'
+import {type Theme, type ThemeName} from '#/alf/types'
 import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
-import {Device} from '#/storage'
+import {type Device} from '#/storage'
 
 export {atoms} from '#/alf/atoms'
 export * from '#/alf/breakpoints'
@@ -61,6 +61,7 @@ export const Context = React.createContext<Alf>({
   },
   flags: {},
 })
+Context.displayName = 'AlfContext'
 
 export function ThemeProvider({
   children,

src/components/Admonition.tsx

@@ -23,6 +23,7 @@ type Context = {
 const Context = createContext<Context>({
   type: 'info',
 })
+Context.displayName = 'AdmonitionContext'
 
 export function Icon() {
   const t = useTheme()

src/components/Button.tsx

@@ -109,6 +109,7 @@ const Context = React.createContext<VariantProps & ButtonState>({
   pressed: false,
   disabled: false,
 })
+Context.displayName = 'ButtonContext'
 
 export function useButtonContext() {
   return React.useContext(Context)

src/components/ContextMenu/context.tsx

@@ -7,10 +7,13 @@ import {
 } from '#/components/ContextMenu/types'
 
 export const Context = React.createContext<ContextType | null>(null)
+Context.displayName = 'ContextMenuContext'
 
 export const MenuContext = React.createContext<MenuContextType | null>(null)
+MenuContext.displayName = 'ContextMenuMenuContext'
 
 export const ItemContext = React.createContext<ItemContextType | null>(null)
+ItemContext.displayName = 'ContextMenuItemContext'
 
 export function useContextMenuContext() {
   const context = React.useContext(Context)

src/components/Dialog/context.ts

@@ -23,6 +23,7 @@ export const Context = createContext<DialogContextProps>({
   setDisableDrag: () => {},
   isWithinDialog: false,
 })
+Context.displayName = 'DialogContext'
 
 export function useDialogContext() {
   return useContext(Context)

src/components/Grid.tsx

@@ -1,11 +1,12 @@
 import {createContext, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 
-import {atoms as a, ViewStyleProp} from '#/alf'
+import {atoms as a, type ViewStyleProp} from '#/alf'
 
 const Context = createContext({
   gap: 0,
 })
+Context.displayName = 'GridContext'
 
 export function Row({
   children,

src/components/Layout/Header/index.tsx

@@ -77,6 +77,7 @@ export function Outer({
 }
 
 const AlignmentContext = createContext<'platform' | 'left'>('platform')
+AlignmentContext.displayName = 'AlignmentContext'
 
 export function Content({
   children,

src/components/Layout/context.ts

@@ -3,3 +3,4 @@ import React from 'react'
 export const ScrollbarOffsetContext = React.createContext({
   isWithinOffsetView: false,
 })
+ScrollbarOffsetContext.displayName = 'ScrollbarOffsetContext'

src/components/Menu/context.tsx

@@ -3,8 +3,10 @@ import React from 'react'
 import {type ContextType, type ItemContextType} from '#/components/Menu/types'
 
 export const Context = React.createContext<ContextType | null>(null)
+Context.displayName = 'MenuContext'
 
 export const ItemContext = React.createContext<ItemContextType | null>(null)
+ItemContext.displayName = 'MenuItemContext'
 
 export function useMenuContext() {
   const context = React.useContext(Context)

src/components/PolicyUpdateOverlay/context.tsx

@@ -28,6 +28,7 @@ const Context = createContext<{
    */
   setIsReadyToShowOverlay: () => {},
 })
+Context.displayName = 'PolicyUpdateOverlayContext'
 
 export function usePolicyUpdateContext() {
   const context = useContext(Context)

src/components/Portal.tsx

@@ -28,6 +28,7 @@ export function createPortalGroup() {
     append: () => {},
     remove: () => {},
   })
+  Context.displayName = 'PortalContext'
 
   function Provider(props: React.PropsWithChildren<{}>) {
     const map = useRef<ComponentMap>({})

src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx

@@ -15,6 +15,7 @@ const Context = React.createContext<{
   setActiveView: (viewId: string) => void
   sendViewPosition: (viewId: string, y: number) => void
 } | null>(null)
+Context.displayName = 'ActiveVideoWebContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   if (!isWeb) {

src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx

@@ -8,6 +8,7 @@ const Context = React.createContext<{
   volume: number
   setVolume: React.Dispatch<React.SetStateAction<number>>
 } | null>(null)
+Context.displayName = 'VideoVolumeContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [muted, setMuted] = React.useState(true)

src/components/Post/Embed/VideoEmbed/index.web.tsx

@@ -125,6 +125,7 @@ export function VideoEmbed({
 }
 
 const NearScreenContext = createContext(false)
+NearScreenContext.displayName = 'VideoNearScreenContext'
 
 /**
  * Renders a 100vh tall div and watches it with an IntersectionObserver to

src/components/PostControls/PostControlButton.tsx

@@ -13,6 +13,7 @@ const PostControlContext = createContext<{
   active?: boolean
   color?: {color: string}
 }>({})
+PostControlContext.displayName = 'PostControlContext'
 
 // Base button style, which the the other ones extend
 export function PostControlButton({

src/components/Prompt.tsx

@@ -27,6 +27,7 @@ const Context = React.createContext<{
   titleId: '',
   descriptionId: '',
 })
+Context.displayName = 'PromptContext'
 
 export function Outer({
   children,

src/components/Select/index.tsx

@@ -34,10 +34,12 @@ type ContextType = {
 } & Pick<RootProps, 'value' | 'onValueChange' | 'disabled'>
 
 const Context = createContext<ContextType | null>(null)
+Context.displayName = 'SelectContext'
 
 const ValueTextContext = createContext<
   [any, React.Dispatch<React.SetStateAction<any>>]
 >([undefined, () => {}])
+ValueTextContext.displayName = 'ValueTextContext'
 
 function useSelectContext() {
   const ctx = useContext(Context)
@@ -229,6 +231,7 @@ const ItemContext = createContext<{
   focused: false,
   pressed: false,
 })
+ItemContext.displayName = 'SelectItemContext'
 
 export function useItemContext() {
   return useContext(ItemContext)

src/components/Select/index.web.tsx

@@ -23,6 +23,7 @@ import {
 } from './types'
 
 const SelectedValueContext = createContext<string | undefined | null>(null)
+SelectedValueContext.displayName = 'SelectSelectedValueContext'
 
 export function Root(props: RootProps) {
   return (
@@ -219,6 +220,7 @@ const ItemContext = createContext<{
   pressed: false,
   selected: false,
 })
+ItemContext.displayName = 'SelectItemContext'
 
 export function useItemContext() {
   return useContext(ItemContext)

src/components/Toast/Toast.tsx

@@ -24,6 +24,7 @@ export const ICONS = {
 const Context = createContext<ContextType>({
   type: 'default',
 })
+Context.displayName = 'ToastContext'
 
 export function Toast({
   type,

src/components/Tooltip/index.tsx

@@ -53,12 +53,14 @@ const TooltipContext = createContext<TooltipContextType>({
   visible: false,
   onVisibleChange: () => {},
 })
+TooltipContext.displayName = 'TooltipContext'
 
 const TargetContext = createContext<TargetContextType>({
   targetMeasurements: undefined,
   setTargetMeasurements: () => {},
   shouldMeasure: false,
 })
+TargetContext.displayName = 'TargetContext'
 
 export function Outer({
   children,

src/components/Tooltip/index.web.tsx

@@ -20,6 +20,7 @@ const TooltipContext = createContext<TooltipContextType>({
   position: 'bottom',
   onVisibleChange: () => {},
 })
+TooltipContext.displayName = 'TooltipContext'
 
 export function Outer({
   children,

src/components/dialogs/Context.tsx

@@ -27,6 +27,7 @@ type ControlsContext = {
 }
 
 const ControlsContext = createContext<ControlsContext | null>(null)
+ControlsContext.displayName = 'GlobalDialogControlsContext'
 
 export function useGlobalDialogsControlContext() {
   const ctx = useContext(ControlsContext)

src/components/dialogs/nuxs/index.tsx

@@ -47,6 +47,7 @@ const Context = React.createContext<Context>({
   activeNux: undefined,
   dismissActiveNux: () => {},
 })
+Context.displayName = 'NuxDialogContext'
 
 export function useNuxDialogContext() {
   return React.useContext(Context)

src/components/dms/MessageContext.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 const MessageContext = React.createContext(false)
+MessageContext.displayName = 'MessageContext'
 
 export function MessageContextProvider({
   children,

src/components/forms/TextField.tsx

@@ -46,6 +46,7 @@ const Context = createContext<{
   onFocus: () => {},
   onBlur: () => {},
 })
+Context.displayName = 'TextFieldContext'
 
 export type RootProps = React.PropsWithChildren<{isInvalid?: boolean}>
 

src/components/forms/Toggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, View, ViewStyle} from 'react-native'
+import {Pressable, View, type ViewStyle} from 'react-native'
 import Animated, {LinearTransition} from 'react-native-reanimated'
 
 import {HITSLOP_10} from '#/lib/constants'
@@ -8,9 +8,9 @@ import {
   atoms as a,
   flatten,
   native,
-  TextStyleProp,
+  type TextStyleProp,
   useTheme,
-  ViewStyleProp,
+  type ViewStyleProp,
 } from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {CheckThick_Stroke2_Corner0_Rounded as Checkmark} from '#/components/icons/Check'
@@ -35,6 +35,7 @@ const ItemContext = React.createContext<ItemState>({
   pressed: false,
   focused: false,
 })
+ItemContext.displayName = 'ToggleItemContext'
 
 const GroupContext = React.createContext<{
   values: string[]
@@ -49,6 +50,7 @@ const GroupContext = React.createContext<{
   maxSelectionsReached: false,
   setFieldValue: () => {},
 })
+GroupContext.displayName = 'ToggleGroupContext'
 
 export type GroupProps = React.PropsWithChildren<{
   type?: 'radio' | 'checkbox'

src/components/intents/IntentDialogs.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import * as Dialog from '#/components/Dialog'
-import {DialogControlProps} from '#/components/Dialog'
+import {type DialogControlProps} from '#/components/Dialog'
 import {VerifyEmailIntentDialog} from '#/components/intents/VerifyEmailIntentDialog'
 
 interface Context {
@@ -11,6 +11,7 @@ interface Context {
 }
 
 const Context = React.createContext({} as Context)
+Context.displayName = 'IntentDialogsContext'
 export const useIntentDialogs = () => React.useContext(Context)
 
 export function Provider({children}: {children: React.ReactNode}) {

src/components/moderation/Hider.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import {ModerationUI} from '@atproto/api'
+import {type ModerationUI} from '@atproto/api'
 
 import {
-  ModerationCauseDescription,
+  type ModerationCauseDescription,
   useModerationCauseDescription,
 } from '#/lib/moderation/useModerationCauseDescription'
 import {
@@ -22,6 +22,7 @@ type Context = {
 }
 
 const Context = React.createContext<Context>({} as Context)
+Context.displayName = 'HiderContext'
 
 export const useHider = () => React.useContext(Context)
 

src/lib/ScrollContext.tsx

@@ -1,5 +1,5 @@
-import React, {createContext, useContext, useMemo} from 'react'
-import {ScrollHandlers} from 'react-native-reanimated'
+import {createContext, useContext, useMemo} from 'react'
+import {type ScrollHandlers} from 'react-native-reanimated'
 
 const ScrollContext = createContext<ScrollHandlers<any>>({
   onBeginDrag: undefined,
@@ -7,6 +7,7 @@ const ScrollContext = createContext<ScrollHandlers<any>>({
   onScroll: undefined,
   onMomentumEnd: undefined,
 })
+ScrollContext.displayName = 'ScrollContext'
 
 export function useScrollHandlers(): ScrollHandlers<any> {
   return useContext(ScrollContext)

src/lib/ThemeContext.tsx

@@ -89,6 +89,7 @@ export interface ThemeProviderProps {
 }
 
 export const ThemeContext = createContext<Theme>(defaultTheme)
+ThemeContext.displayName = 'ThemeContext'
 
 export const useTheme = () => useContext(ThemeContext)
 

src/lib/hooks/useEnableKeyboardController.tsx

@@ -19,6 +19,8 @@ const KeyboardControllerRefCountContext = createContext<{
   incrementRefCount: () => {},
   decrementRefCount: () => {},
 })
+KeyboardControllerRefCountContext.displayName =
+  'KeyboardControllerRefCountContext'
 
 export function KeyboardControllerProvider({
   children,

src/lib/hooks/useHideBottomBarBorder.tsx

@@ -4,8 +4,11 @@ import {useFocusEffect} from '@react-navigation/native'
 type HideBottomBarBorderSetter = () => () => void
 
 const HideBottomBarBorderContext = createContext<boolean>(false)
+HideBottomBarBorderContext.displayName = 'HideBottomBarBorderContext'
 const HideBottomBarBorderSetterContext =
   createContext<HideBottomBarBorderSetter | null>(null)
+HideBottomBarBorderSetterContext.displayName =
+  'HideBottomBarBorderSetterContext'
 
 export function useHideBottomBarBorderSetter() {
   const hideBottomBarBorder = useContext(HideBottomBarBorderSetterContext)

src/lib/statsig/statsig.tsx

@@ -147,6 +147,7 @@ function toStringRecord<E extends keyof MetricEvents>(
 // and it's been difficult to get it to behave in a predictable way.
 // Our own cache ensures consistent evaluation within a single session.
 const GateCache = React.createContext<Map<string, boolean> | null>(null)
+GateCache.displayName = 'StatsigGateCacheContext'
 
 type GateOptions = {
   dangerouslyDisableExposureLogging?: boolean

src/screens/Onboarding/StepProfile/index.tsx

@@ -59,6 +59,7 @@ interface IAvatarContext {
 }
 
 const AvatarContext = React.createContext<IAvatarContext>({} as IAvatarContext)
+AvatarContext.displayName = 'AvatarContext'
 export const useAvatar = () => React.useContext(AvatarContext)
 
 const randomColor =

src/screens/Onboarding/state.ts

@@ -3,7 +3,10 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
-import {AvatarColor, Emoji} from '#/screens/Onboarding/StepProfile/types'
+import {
+  type AvatarColor,
+  type Emoji,
+} from '#/screens/Onboarding/StepProfile/types'
 
 export type OnboardingState = {
   hasPrev: boolean
@@ -147,6 +150,7 @@ export const Context = React.createContext<{
   state: {...initialState},
   dispatch: () => {},
 })
+Context.displayName = 'OnboardingContext'
 
 export function reducer(
   s: OnboardingState,

src/screens/Settings/components/SettingsList.tsx

@@ -18,6 +18,7 @@ const ItemContext = createContext({
   destructive: false,
   withinGroup: false,
 })
+ItemContext.displayName = 'SettingsListItemContext'
 
 const Portal = createPortalGroup()
 

src/screens/Signup/state.ts

@@ -246,6 +246,7 @@ interface IContext {
   dispatch: React.Dispatch<SignupAction>
 }
 export const SignupContext = React.createContext<IContext>({} as IContext)
+SignupContext.displayName = 'SignupContext'
 export const useSignupContext = () => React.useContext(SignupContext)
 
 export function useSubmitSignup() {

src/screens/StarterPack/Wizard/State.tsx

@@ -45,6 +45,7 @@ const StateContext = React.createContext<TStateContext>([
   {} as State,
   (_: Action) => {},
 ])
+StateContext.displayName = 'StarterPackWizardStateContext'
 export const useWizardState = () => React.useContext(StateContext)
 
 function reducer(state: State, action: Action): State {

src/state/a11y.tsx

@@ -8,6 +8,7 @@ const Context = React.createContext({
   reduceMotionEnabled: false,
   screenReaderEnabled: false,
 })
+Context.displayName = 'A11yContext'
 
 export function useA11y() {
   return React.useContext(Context)

src/state/ageAssurance/index.tsx

@@ -28,11 +28,13 @@ const AgeAssuranceContext = createContext<AgeAssuranceContextType>({
   lastInitiatedAt: undefined,
   isAgeRestricted: false,
 })
+AgeAssuranceContext.displayName = 'AgeAssuranceContext'
 
 const AgeAssuranceAPIContext = createContext<AgeAssuranceAPIContextType>({
   // @ts-ignore can't be bothered to type this
   refetch: () => Promise.resolve(),
 })
+AgeAssuranceAPIContext.displayName = 'AgeAssuranceAPIContext'
 
 /**
  * Low-level provider for fetching age assurance state on app load. Do not add

src/state/cache/thread-mutes.tsx

@@ -7,9 +7,11 @@ type StateContext = Map<string, boolean>
 type SetStateContext = (uri: string, value: boolean) => void
 
 const stateContext = React.createContext<StateContext>(new Map())
+stateContext.displayName = 'ThreadMutesStateContext'
 const setStateContext = React.createContext<SetStateContext>(
   (_: string) => false,
 )
+setStateContext.displayName = 'ThreadMutesSetStateContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState<StateContext>(() => new Map())

src/state/dialogs/index.tsx

@@ -26,10 +26,12 @@ interface IDialogControlContext {
 }
 
 const DialogContext = React.createContext<IDialogContext>({} as IDialogContext)
+DialogContext.displayName = 'DialogContext'
 
 const DialogControlContext = React.createContext<IDialogControlContext>(
   {} as IDialogControlContext,
 )
+DialogControlContext.displayName = 'DialogControlContext'
 
 /**
  * The number of dialogs that are fully expanded. This is used to determine the background color of the status bar
@@ -107,3 +109,4 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     </DialogContext.Provider>
   )
 }
+Provider.displayName = 'DialogsProvider'

src/state/feed-feedback.tsx

@@ -35,6 +35,7 @@ const stateContext = createContext<StateContext>({
   sendInteraction: (_interaction: AppBskyFeedDefs.Interaction) => {},
   feedDescriptor: undefined,
 })
+stateContext.displayName = 'FeedFeedbackContext'
 
 export function useFeedFeedback(
   feed: FeedDescriptor | undefined,

src/state/geolocation.tsx

@@ -154,6 +154,7 @@ type Context = {
 const context = React.createContext<Context>({
   geolocation: DEFAULT_GEOLOCATION,
 })
+context.displayName = 'GeolocationContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [geolocation, setGeolocation] = React.useState(() => {

src/state/global-gesture-events/index.tsx

@@ -25,6 +25,7 @@ const Context = createContext<{
   register: () => {},
   unregister: () => {},
 })
+Context.displayName = 'GlobalGestureEventsContext'
 
 export function GlobalGestureEventsProvider({
   children,

src/state/home-badge.tsx

@@ -4,7 +4,9 @@ type StateContext = boolean
 type ApiContext = (hasNew: boolean) => void
 
 const stateContext = React.createContext<StateContext>(false)
+stateContext.displayName = 'HomeBadgeStateContext'
 const apiContext = React.createContext<ApiContext>((_: boolean) => {})
+apiContext.displayName = 'HomeBadgeApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(false)

src/state/invites.tsx

@@ -10,9 +10,11 @@ type ApiContext = {
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.invites,
 )
+stateContext.displayName = 'InvitesStateContext'
 const apiContext = React.createContext<ApiContext>({
   setInviteCopied(_: string) {},
 })
+apiContext.displayName = 'InvitesApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('invites'))

src/state/lightbox.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {nanoid} from 'nanoid/non-secure'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {ImageSource} from '#/view/com/lightbox/ImageViewing/@types'
+import {type ImageSource} from '#/view/com/lightbox/ImageViewing/@types'
 
 export type Lightbox = {
   id: string
@@ -15,6 +15,7 @@ const LightboxContext = React.createContext<{
 }>({
   activeLightbox: null,
 })
+LightboxContext.displayName = 'LightboxContext'
 
 const LightboxControlContext = React.createContext<{
   openLightbox: (lightbox: Omit<Lightbox, 'id'>) => void
@@ -23,6 +24,7 @@ const LightboxControlContext = React.createContext<{
   openLightbox: () => {},
   closeLightbox: () => false,
 })
+LightboxControlContext.displayName = 'LightboxControlContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [activeLightbox, setActiveLightbox] = React.useState<Lightbox | null>(

src/state/messages/convo/index.tsx

@@ -26,6 +26,7 @@ import {useAgent} from '#/state/session'
 export * from '#/state/messages/convo/util'
 
 const ChatContext = React.createContext<ConvoState | null>(null)
+ChatContext.displayName = 'ChatContext'
 
 export function useConvo() {
   const ctx = useContext(ChatContext)

src/state/messages/current-convo-id.tsx

@@ -7,6 +7,7 @@ const CurrentConvoIdContext = React.createContext<{
   currentConvoId: undefined,
   setCurrentConvoId: () => {},
 })
+CurrentConvoIdContext.displayName = 'CurrentConvoIdContext'
 
 export function useCurrentConvoId() {
   const ctx = React.useContext(CurrentConvoIdContext)

src/state/messages/events/index.tsx

@@ -7,6 +7,7 @@ import {useAgent, useSession} from '#/state/session'
 const MessagesEventBusContext = React.createContext<MessagesEventBus | null>(
   null,
 )
+MessagesEventBusContext.displayName = 'MessagesEventBusContext'
 
 export function useMessagesEventBus() {
   const ctx = React.useContext(MessagesEventBusContext)

src/state/messages/message-drafts.tsx

@@ -6,6 +6,7 @@ const MessageDraftsContext = React.createContext<{
   state: State
   dispatch: React.Dispatch<Actions>
 } | null>(null)
+MessageDraftsContext.displayName = 'MessageDraftsContext'
 
 function useMessageDraftsContext() {
   const ctx = React.useContext(MessageDraftsContext)

src/state/modals/index.tsx

@@ -70,6 +70,7 @@ const ModalContext = React.createContext<{
   isModalActive: false,
   activeModals: [],
 })
+ModalContext.displayName = 'ModalContext'
 
 const ModalControlContext = React.createContext<{
   openModal: (modal: Modal) => void
@@ -80,6 +81,7 @@ const ModalControlContext = React.createContext<{
   closeModal: () => false,
   closeAllModals: () => false,
 })
+ModalControlContext.displayName = 'ModalControlContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [activeModals, setActiveModals] = React.useState<Modal[]>([])

src/state/preferences/alt-text-required.tsx

@@ -8,9 +8,11 @@ type SetContext = (v: persisted.Schema['requireAltTextEnabled']) => void
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.requireAltTextEnabled,
 )
+stateContext.displayName = 'AltTextRequiredStateContext'
 const setContext = React.createContext<SetContext>(
   (_: persisted.Schema['requireAltTextEnabled']) => {},
 )
+setContext.displayName = 'AltTextRequiredSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(

src/state/preferences/autoplay.tsx

@@ -8,7 +8,9 @@ type SetContext = (v: boolean) => void
 const stateContext = React.createContext<StateContext>(
   Boolean(persisted.defaults.disableAutoplay),
 )
+stateContext.displayName = 'AutoplayStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'AutoplaySetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [state, setState] = React.useState(

src/state/preferences/disable-haptics.tsx

@@ -8,7 +8,9 @@ type SetContext = (v: boolean) => void
 const stateContext = React.createContext<StateContext>(
   Boolean(persisted.defaults.disableHaptics),
 )
+stateContext.displayName = 'DisableHapticsStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'DisableHapticsSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [state, setState] = React.useState(

src/state/preferences/external-embeds-prefs.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {EmbedPlayerSource} from '#/lib/strings/embed-player'
+import {type EmbedPlayerSource} from '#/lib/strings/embed-player'
 import * as persisted from '#/state/persisted'
 
 type StateContext = persisted.Schema['externalEmbeds']
@@ -12,7 +12,9 @@ type SetContext = (
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.externalEmbeds,
 )
+stateContext.displayName = 'ExternalEmbedsPrefsStateContext'
 const setContext = React.createContext<SetContext>({} as SetContext)
+setContext.displayName = 'ExternalEmbedsPrefsSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('externalEmbeds'))

src/state/preferences/hidden-posts.tsx

@@ -14,10 +14,12 @@ type ApiContext = {
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.hiddenPosts,
 )
+stateContext.displayName = 'HiddenPostsStateContext'
 const apiContext = React.createContext<ApiContext>({
   hidePost: () => {},
   unhidePost: () => {},
 })
+apiContext.displayName = 'HiddenPostsApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('hiddenPosts'))

src/state/preferences/in-app-browser.tsx

@@ -8,9 +8,11 @@ type SetContext = (v: persisted.Schema['useInAppBrowser']) => void
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.useInAppBrowser,
 )
+stateContext.displayName = 'InAppBrowserStateContext'
 const setContext = React.createContext<SetContext>(
   (_: persisted.Schema['useInAppBrowser']) => {},
 )
+setContext.displayName = 'InAppBrowserSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('useInAppBrowser'))

src/state/preferences/kawaii.tsx

@@ -8,6 +8,7 @@ type StateContext = persisted.Schema['kawaii']
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.kawaii,
 )
+stateContext.displayName = 'KawaiiStateContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('kawaii'))

src/state/preferences/label-defs.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import {AppBskyLabelerDefs, InterpretedLabelValueDefinition} from '@atproto/api'
+import {
+  type AppBskyLabelerDefs,
+  type InterpretedLabelValueDefinition,
+} from '@atproto/api'
 
 import {useLabelDefinitionsQuery} from '../queries/preferences'
 
@@ -12,6 +15,7 @@ const stateContext = React.createContext<StateContext>({
   labelDefs: {},
   labelers: [],
 })
+stateContext.displayName = 'LabelDefsStateContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const state = useLabelDefinitionsQuery()

src/state/preferences/languages.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {AppLanguage} from '#/locale/languages'
+import {type AppLanguage} from '#/locale/languages'
 import * as persisted from '#/state/persisted'
 
 type SetStateCb = (
@@ -20,6 +20,7 @@ type ApiContext = {
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.languagePrefs,
 )
+stateContext.displayName = 'LanguagePrefsStateContext'
 const apiContext = React.createContext<ApiContext>({
   setPrimaryLanguage: (_: string) => {},
   setPostLanguage: (_: string) => {},
@@ -29,6 +30,7 @@ const apiContext = React.createContext<ApiContext>({
   savePostLanguageToHistory: () => {},
   setAppLanguage: (_: AppLanguage) => {},
 })
+apiContext.displayName = 'LanguagePrefsApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(persisted.get('languagePrefs'))

src/state/preferences/large-alt-badge.tsx

@@ -8,9 +8,11 @@ type SetContext = (v: persisted.Schema['largeAltBadgeEnabled']) => void
 const stateContext = React.createContext<StateContext>(
   persisted.defaults.largeAltBadgeEnabled,
 )
+stateContext.displayName = 'LargeAltBadgeStateContext'
 const setContext = React.createContext<SetContext>(
   (_: persisted.Schema['largeAltBadgeEnabled']) => {},
 )
+setContext.displayName = 'LargeAltBadgeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(

src/state/preferences/moderation-opts.tsx

@@ -1,5 +1,5 @@
-import React, {createContext, useContext, useMemo} from 'react'
-import {BskyAgent, ModerationOpts} from '@atproto/api'
+import {createContext, useContext, useMemo} from 'react'
+import {BskyAgent, type ModerationOpts} from '@atproto/api'
 
 import {useHiddenPosts, useLabelDefinitions} from '#/state/preferences'
 import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation'
@@ -9,11 +9,13 @@ import {usePreferencesQuery} from '../queries/preferences'
 export const moderationOptsContext = createContext<ModerationOpts | undefined>(
   undefined,
 )
+moderationOptsContext.displayName = 'ModerationOptsContext'
 
 // used in the moderation state devtool
 export const moderationOptsOverrideContext = createContext<
   ModerationOpts | undefined
 >(undefined)
+moderationOptsOverrideContext.displayName = 'ModerationOptsOverrideContext'
 
 export function useModerationOpts() {
   return useContext(moderationOptsContext)

src/state/preferences/subtitles.tsx

@@ -8,7 +8,9 @@ type SetContext = (v: boolean) => void
 const stateContext = React.createContext<StateContext>(
   Boolean(persisted.defaults.subtitlesEnabled),
 )
+stateContext.displayName = 'SubtitlesStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'SubtitlesSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [state, setState] = React.useState(

src/state/preferences/trending.tsx

@@ -22,10 +22,12 @@ const StateContext = React.createContext<StateContext>({
   trendingDisabled: Boolean(persisted.defaults.trendingDisabled),
   trendingVideoDisabled: Boolean(persisted.defaults.trendingVideoDisabled),
 })
+StateContext.displayName = 'TrendingStateContext'
 const ApiContext = React.createContext<ApiContext>({
   setTrendingDisabled() {},
   setTrendingVideoDisabled() {},
 })
+ApiContext.displayName = 'TrendingApiContext'
 
 function usePersistedBooleanValue<T extends keyof persisted.Schema>(key: T) {
   const [value, _set] = React.useState(() => {

src/state/preferences/used-starter-packs.tsx

@@ -6,7 +6,9 @@ type StateContext = boolean | undefined
 type SetContext = (v: boolean) => void
 
 const stateContext = React.createContext<StateContext>(false)
+stateContext.displayName = 'UsedStarterPacksStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'UsedStarterPacksSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [state, setState] = React.useState<StateContext>(() =>

src/state/queries/messages/list-conversations.tsx

@@ -62,6 +62,7 @@ const ListConvosContext = createContext<{
   accepted: ChatBskyConvoDefs.ConvoView[]
   request: ChatBskyConvoDefs.ConvoView[]
 } | null>(null)
+ListConvosContext.displayName = 'ListConvosContext'
 
 export function useListConvos() {
   const ctx = useContext(ListConvosContext)

src/state/queries/notifications/unread.tsx

@@ -35,12 +35,14 @@ interface ApiContext {
 }
 
 const stateContext = React.createContext<StateContext>('')
+stateContext.displayName = 'NotificationsUnreadStateContext'
 
 const apiContext = React.createContext<ApiContext>({
   async markAllRead() {},
   async checkUnread() {},
   getCachedUnreadPage: () => undefined,
 })
+apiContext.displayName = 'NotificationsUnreadApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const {hasSession} = useSession()

src/state/service-config.tsx

@@ -16,8 +16,10 @@ type LiveNowContext = {
 const TrendingContext = createContext<TrendingContext>({
   enabled: false,
 })
+TrendingContext.displayName = 'TrendingContext'
 
 const LiveNowContext = createContext<LiveNowContext | null>(null)
+LiveNowContext.displayName = 'LiveNowContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const langPrefs = useLanguagePrefs()

src/state/session/index.tsx

@@ -30,8 +30,10 @@ const StateContext = React.createContext<SessionStateContext>({
   currentAccount: undefined,
   hasSession: false,
 })
+StateContext.displayName = 'SessionStateContext'
 
 const AgentContext = React.createContext<BskyAgent | null>(null)
+AgentContext.displayName = 'SessionAgentContext'
 
 const ApiContext = React.createContext<SessionApiContext>({
   createAccount: async () => {},
@@ -42,6 +44,7 @@ const ApiContext = React.createContext<SessionApiContext>({
   removeAccount: () => {},
   partialRefreshSession: async () => {},
 })
+ApiContext.displayName = 'SessionApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const cancelPendingTask = useOneTaskAtATime()

src/state/shell/color-mode.tsx

@@ -15,7 +15,9 @@ const stateContext = React.createContext<StateContext>({
   colorMode: 'system',
   darkTheme: 'dark',
 })
+stateContext.displayName = 'ColorModeStateContext'
 const setContext = React.createContext<SetContext>({} as SetContext)
+setContext.displayName = 'ColorModeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))

src/state/shell/composer/index.tsx

@@ -51,12 +51,14 @@ type ControlsContext = {
 }
 
 const stateContext = React.createContext<StateContext>(undefined)
+stateContext.displayName = 'ComposerStateContext'
 const controlsContext = React.createContext<ControlsContext>({
   openComposer(_opts: ComposerOpts) {},
   closeComposer() {
     return false
   },
 })
+controlsContext.displayName = 'ComposerControlsContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const {_} = useLingui()

src/state/shell/drawer-open.tsx

@@ -4,7 +4,9 @@ type StateContext = boolean
 type SetContext = (v: boolean) => void
 
 const stateContext = React.createContext<StateContext>(false)
+stateContext.displayName = 'DrawerOpenStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'DrawerOpenSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(false)

src/state/shell/drawer-swipe-disabled.tsx

@@ -4,7 +4,9 @@ type StateContext = boolean
 type SetContext = (v: boolean) => void
 
 const stateContext = React.createContext<StateContext>(false)
+stateContext.displayName = 'DrawerSwipeDisabledStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'DrawerSwipeDisabledSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [state, setState] = React.useState(false)

src/state/shell/logged-out.tsx

@@ -39,12 +39,14 @@ const StateContext = React.createContext<State>({
   showLoggedOut: false,
   requestedAccountSwitchTo: undefined,
 })
+StateContext.displayName = 'LoggedOutStateContext'
 
 const ControlsContext = React.createContext<Controls>({
   setShowLoggedOut: () => {},
   requestSwitchToAccount: () => {},
   clearRequestedAccount: () => {},
 })
+ControlsContext.displayName = 'LoggedOutControlsContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const activeStarterPack = useActiveStarterPack()

src/state/shell/minimal-mode.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import {SharedValue, useSharedValue, withSpring} from 'react-native-reanimated'
+import {
+  type SharedValue,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated'
 
 type StateContext = {
   headerMode: SharedValue<number>
@@ -29,7 +33,9 @@ const stateContext = React.createContext<StateContext>({
     set() {},
   },
 })
+stateContext.displayName = 'MinimalModeStateContext'
 const setContext = React.createContext<SetContext>((_: boolean) => {})
+setContext.displayName = 'MinimalModeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const headerMode = useSharedValue(0)

src/state/shell/onboarding.tsx

@@ -29,7 +29,9 @@ export type DispatchContext = (action: Action) => void
 const stateContext = React.createContext<StateContext>(
   compute(persisted.defaults.onboarding),
 )
+stateContext.displayName = 'OnboardingStateContext'
 const dispatchContext = React.createContext<DispatchContext>((_: Action) => {})
+dispatchContext.displayName = 'OnboardingDispatchContext'
 
 function reducer(state: StateContext, action: Action): StateContext {
   switch (action.type) {

src/state/shell/post-progress.tsx

@@ -10,6 +10,7 @@ const PostProgressContext = React.createContext<PostProgressState>({
   progress: 0,
   status: 'idle',
 })
+PostProgressContext.displayName = 'PostProgressContext'
 
 export function Provider() {}
 

src/state/shell/progress-guide.tsx

@@ -5,7 +5,7 @@ import {useLingui} from '@lingui/react'
 import {logEvent} from '#/lib/statsig/statsig'
 import {
   ProgressGuideToast,
-  ProgressGuideToastRef,
+  type ProgressGuideToastRef,
 } from '#/components/ProgressGuide/Toast'
 import {
   usePreferencesQuery,
@@ -45,6 +45,7 @@ export type ProgressGuide =
   | undefined
 
 const ProgressGuideContext = React.createContext<ProgressGuide>(undefined)
+ProgressGuideContext.displayName = 'ProgressGuideContext'
 
 const ProgressGuideControlContext = React.createContext<{
   startProgressGuide(guide: ProgressGuideName): void
@@ -55,6 +56,7 @@ const ProgressGuideControlContext = React.createContext<{
   endProgressGuide: () => {},
   captureAction: (_action: ProgressGuideAction, _count = 1) => {},
 })
+ProgressGuideControlContext.displayName = 'ProgressGuideControlContext'
 
 export function useProgressGuide(guide: ProgressGuideName) {
   const ctx = React.useContext(ProgressGuideContext)

src/state/shell/selected-feed.tsx

@@ -2,13 +2,15 @@ import React from 'react'
 
 import {isWeb} from '#/platform/detection'
 import * as persisted from '#/state/persisted'
-import {FeedDescriptor} from '#/state/queries/post-feed'
+import {type FeedDescriptor} from '#/state/queries/post-feed'
 
 type StateContext = FeedDescriptor | null
 type SetContext = (v: FeedDescriptor) => void
 
 const stateContext = React.createContext<StateContext>(null)
+stateContext.displayName = 'SelectedFeedStateContext'
 const setContext = React.createContext<SetContext>((_: string) => {})
+setContext.displayName = 'SelectedFeedSetContext'
 
 function getInitialFeed(): FeedDescriptor | null {
   if (isWeb) {

src/state/shell/shell-layout.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {SharedValue, useSharedValue} from 'react-native-reanimated'
+import {type SharedValue, useSharedValue} from 'react-native-reanimated'
 
 type StateContext = {
   headerHeight: SharedValue<number>
@@ -28,6 +28,7 @@ const stateContext = React.createContext<StateContext>({
     set() {},
   },
 })
+stateContext.displayName = 'ShellLayoutContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const headerHeight = useSharedValue(0)

src/state/shell/starter-pack.tsx

@@ -9,7 +9,9 @@ type StateContext =
 type SetContext = (v: StateContext) => void
 
 const stateContext = React.createContext<StateContext>(undefined)
+stateContext.displayName = 'ActiveStarterPackStateContext'
 const setContext = React.createContext<SetContext>((_: StateContext) => {})
+setContext.displayName = 'ActiveStarterPackSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [state, setState] = React.useState<StateContext>()

src/state/shell/tick-every-minute.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 type StateContext = number
 
 const stateContext = React.createContext<StateContext>(0)
+stateContext.displayName = 'TickEveryMinuteContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [tick, setTick] = React.useState(Date.now())

src/state/threadgate-hidden-replies.tsx

@@ -14,11 +14,13 @@ const StateContext = React.createContext<StateContext>({
   uris: new Set(),
   recentlyUnhiddenUris: new Set(),
 })
+StateContext.displayName = 'ThreadgateHiddenRepliesStateContext'
 
 const ApiContext = React.createContext<ApiContext>({
   addHiddenReplyUri: () => {},
   removeHiddenReplyUri: () => {},
 })
+ApiContext.displayName = 'ThreadgateHiddenRepliesApiContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [uris, setHiddenReplyUris] = React.useState<Set<string>>(new Set())

src/view/com/pager/PagerHeaderContext.tsx

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react'
-import {SharedValue} from 'react-native-reanimated'
+import {type SharedValue} from 'react-native-reanimated'
 
 import {isNative} from '#/platform/detection'
 
@@ -7,6 +7,7 @@ export const PagerHeaderContext = React.createContext<{
   scrollY: SharedValue<number>
   headerHeight: number
 } | null>(null)
+PagerHeaderContext.displayName = 'PagerHeaderContext'
 
 /**
  * Passes information about the scroll position and header height down via