diff --git a/lib/components/base-edit-thread-avatar-provider.react.js b/lib/components/base-edit-thread-avatar-provider.react.js
index cfe084956..8e65f6c51 100644
--- a/lib/components/base-edit-thread-avatar-provider.react.js
+++ b/lib/components/base-edit-thread-avatar-provider.react.js
@@ -1,118 +1,118 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useChangeThreadSettings,
   changeThreadSettingsActionTypes,
 } from '../actions/thread-actions.js';
 import { createLoadingStatusSelector } from '../selectors/loading-selectors.js';
 import type { UpdateUserAvatarRequest } from '../types/avatar-types.js';
 import type { LoadingStatus } from '../types/loading-types.js';
 import type { UpdateThreadRequest } from '../types/thread-types.js';
-import { useDispatchActionPromise } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 export type EditThreadAvatarContextType = {
   +updateThreadAvatarMediaUploadInProgress: (inProgress: boolean) => void,
   +threadAvatarSaveInProgress: boolean,
   +baseSetThreadAvatar: (
     threadID: string,
     avatarRequest: UpdateUserAvatarRequest,
   ) => Promise<void>,
 };
 
 const EditThreadAvatarContext: React.Context<?EditThreadAvatarContextType> =
   React.createContext<?EditThreadAvatarContextType>();
 
 type Props = {
   +activeThreadID: string,
   +children: React.Node,
 };
 function BaseEditThreadAvatarProvider(props: Props): React.Node {
   const { activeThreadID, children } = props;
 
   const updateThreadAvatarLoadingStatus: LoadingStatus = useSelector(
     createLoadingStatusSelector(
       changeThreadSettingsActionTypes,
       `${changeThreadSettingsActionTypes.started}:${activeThreadID}:avatar`,
     ),
   );
 
   const dispatchActionPromise = useDispatchActionPromise();
   const changeThreadSettingsCall = useChangeThreadSettings();
 
   const [
     threadAvatarMediaUploadInProgress,
     setThreadAvatarMediaUploadInProgress,
   ] = React.useState<$ReadOnlySet<string>>(new Set<string>());
 
   const updateThreadAvatarMediaUploadInProgress = React.useCallback(
     (inProgress: boolean) =>
       setThreadAvatarMediaUploadInProgress(prevState => {
         const updatedSet = new Set(prevState);
         if (inProgress) {
           updatedSet.add(activeThreadID);
         } else {
           updatedSet.delete(activeThreadID);
         }
         return updatedSet;
       }),
     [activeThreadID],
   );
 
   const threadAvatarSaveInProgress =
     threadAvatarMediaUploadInProgress.has(activeThreadID) ||
     updateThreadAvatarLoadingStatus === 'loading';
 
   // NOTE: Do NOT consume `baseSetThreadAvatar` directly.
   //       Use platform-specific `[web/native]SetThreadAvatar` instead.
   const baseSetThreadAvatar = React.useCallback(
     async (threadID: string, avatarRequest: UpdateUserAvatarRequest) => {
       const updateThreadRequest: UpdateThreadRequest = {
         threadID,
         changes: {
           avatar: avatarRequest,
         },
       };
       const action = changeThreadSettingsActionTypes.started;
       if (
         avatarRequest.type === 'image' ||
         avatarRequest.type === 'encrypted_image'
       ) {
         updateThreadAvatarMediaUploadInProgress(false);
       }
       const promise = changeThreadSettingsCall(updateThreadRequest);
       void dispatchActionPromise(changeThreadSettingsActionTypes, promise, {
         customKeyName: `${action}:${threadID}:avatar`,
       });
       await promise;
     },
     [
       changeThreadSettingsCall,
       dispatchActionPromise,
       updateThreadAvatarMediaUploadInProgress,
     ],
   );
 
   const context = React.useMemo(
     () => ({
       updateThreadAvatarMediaUploadInProgress,
       threadAvatarSaveInProgress,
       baseSetThreadAvatar,
     }),
     [
       updateThreadAvatarMediaUploadInProgress,
       threadAvatarSaveInProgress,
       baseSetThreadAvatar,
     ],
   );
 
   return (
     <EditThreadAvatarContext.Provider value={context}>
       {children}
     </EditThreadAvatarContext.Provider>
   );
 }
 
 export { EditThreadAvatarContext, BaseEditThreadAvatarProvider };
diff --git a/lib/components/edit-user-avatar-provider.react.js b/lib/components/edit-user-avatar-provider.react.js
index 53cbdff59..49661e8b7 100644
--- a/lib/components/edit-user-avatar-provider.react.js
+++ b/lib/components/edit-user-avatar-provider.react.js
@@ -1,127 +1,125 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   updateUserAvatar,
   updateUserAvatarActionTypes,
 } from '../actions/user-actions.js';
 import { createLoadingStatusSelector } from '../selectors/loading-selectors.js';
 import type { UpdateUserAvatarRequest } from '../types/avatar-types.js';
 import type { SetState } from '../types/hook-types.js';
 import type { LoadingStatus } from '../types/loading-types.js';
 import type { NativeMediaSelection } from '../types/media-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from '../utils/action-utils.js';
+import { useServerCall } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 export type UserAvatarSelection =
   | { +needsUpload: true, +mediaSelection: NativeMediaSelection }
   | { +needsUpload: false, +updateUserAvatarRequest: UpdateUserAvatarRequest };
 type RegistrationMode =
   | { +registrationMode: 'off' }
   | {
       +registrationMode: 'on',
       +successCallback: UserAvatarSelection => mixed,
     };
 const registrationModeOff = { registrationMode: 'off' };
 
 export type EditUserAvatarContextType = {
   +setUserAvatarMediaUploadInProgress: SetState<boolean>,
   +userAvatarSaveInProgress: boolean,
   +baseSetUserAvatar: (avatarRequest: UpdateUserAvatarRequest) => Promise<void>,
   +setRegistrationMode: (registrationMode: RegistrationMode) => void,
   +getRegistrationModeEnabled: () => boolean,
   +getRegistrationModeSuccessCallback: () => ?(UserAvatarSelection) => mixed,
 };
 
 const EditUserAvatarContext: React.Context<?EditUserAvatarContextType> =
   React.createContext<?EditUserAvatarContextType>();
 
 const updateUserAvatarLoadingStatusSelector = createLoadingStatusSelector(
   updateUserAvatarActionTypes,
 );
 
 type Props = {
   +children: React.Node,
 };
 function EditUserAvatarProvider(props: Props): React.Node {
   const { children } = props;
 
   const registrationModeRef =
     React.useRef<RegistrationMode>(registrationModeOff);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const updateUserAvatarCall = useServerCall(updateUserAvatar);
 
   const [userAvatarMediaUploadInProgress, setUserAvatarMediaUploadInProgress] =
     React.useState(false);
 
   const updateUserAvatarLoadingStatus: LoadingStatus = useSelector(
     updateUserAvatarLoadingStatusSelector,
   );
 
   const userAvatarSaveInProgress =
     userAvatarMediaUploadInProgress ||
     updateUserAvatarLoadingStatus === 'loading';
 
   // NOTE: Do **NOT** consume `baseSetUserAvatar` directly.
   //       Use platform-specific `[web/native]SetUserAvatar` instead.
   const baseSetUserAvatar = React.useCallback(
     async (request: UpdateUserAvatarRequest) => {
       const promise = (async () => {
         if (request.type === 'image' || request.type === 'encrypted_image') {
           setUserAvatarMediaUploadInProgress(false);
         }
         return await updateUserAvatarCall(request);
       })();
       void dispatchActionPromise(updateUserAvatarActionTypes, promise);
       await promise;
     },
     [dispatchActionPromise, updateUserAvatarCall],
   );
 
   const setRegistrationMode = React.useCallback((mode: RegistrationMode) => {
     registrationModeRef.current = mode;
   }, []);
   const getRegistrationModeEnabled = React.useCallback(
     () => registrationModeRef.current.registrationMode === 'on',
     [],
   );
   const getRegistrationModeSuccessCallback = React.useCallback(
     () =>
       registrationModeRef.current.registrationMode === 'on'
         ? registrationModeRef.current.successCallback
         : null,
     [],
   );
 
   const context = React.useMemo(
     () => ({
       setUserAvatarMediaUploadInProgress,
       userAvatarSaveInProgress,
       baseSetUserAvatar,
       setRegistrationMode,
       getRegistrationModeEnabled,
       getRegistrationModeSuccessCallback,
     }),
     [
       setUserAvatarMediaUploadInProgress,
       userAvatarSaveInProgress,
       baseSetUserAvatar,
       setRegistrationMode,
       getRegistrationModeEnabled,
       getRegistrationModeSuccessCallback,
     ],
   );
 
   return (
     <EditUserAvatarContext.Provider value={context}>
       {children}
     </EditUserAvatarContext.Provider>
   );
 }
 
 export { EditUserAvatarContext, EditUserAvatarProvider };
diff --git a/lib/components/keyserver-connection-handler.js b/lib/components/keyserver-connection-handler.js
index 6d00b43e9..e72295aee 100644
--- a/lib/components/keyserver-connection-handler.js
+++ b/lib/components/keyserver-connection-handler.js
@@ -1,65 +1,65 @@
 // @flow
 
 import * as React from 'react';
 
 import { logOutActionTypes, useLogOut } from '../actions/user-actions.js';
 import { connectionSelector } from '../selectors/keyserver-selectors.js';
 import { IdentityClientContext } from '../shared/identity-client-context.js';
 import type { BaseSocketProps } from '../socket/socket.react.js';
-import { useDispatchActionPromise } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 import { usingCommServicesAccessToken } from '../utils/services-utils.js';
 import { ashoatKeyserverID } from '../utils/validation-utils.js';
 
 type Props = {
   ...BaseSocketProps,
   +keyserverID: string,
   +socketComponent: React.ComponentType<BaseSocketProps>,
 };
 function KeyserverConnectionHandler(props: Props) {
   const { socketComponent: Socket, keyserverID, ...rest } = props;
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callLogOut = useLogOut();
 
   const hasConnectionIssue = useSelector(
     state => !!connectionSelector(keyserverID)(state)?.connectionIssue,
   );
 
   React.useEffect(() => {
     if (hasConnectionIssue) {
       void dispatchActionPromise(logOutActionTypes, callLogOut());
     }
   }, [callLogOut, hasConnectionIssue, dispatchActionPromise]);
 
   const identityClient = React.useContext(
     IdentityClientContext,
   )?.identityClient;
   React.useEffect(() => {
     if (!usingCommServicesAccessToken) {
       return;
     }
 
     void (async () => {
       try {
         await identityClient?.getKeyserverKeys(keyserverID);
       } catch (e) {
         console.log(
           `Error getting keys for keyserver with id ${keyserverID}`,
           e,
         );
       }
     })();
   }, [keyserverID, identityClient]);
 
   if (keyserverID !== ashoatKeyserverID) {
     return null;
   }
   return <Socket {...rest} />;
 }
 
 const Handler: React.ComponentType<Props> = React.memo<Props>(
   KeyserverConnectionHandler,
 );
 
 export default Handler;
diff --git a/lib/hooks/child-threads.js b/lib/hooks/child-threads.js
index 0d21efb8d..6513c15e1 100644
--- a/lib/hooks/child-threads.js
+++ b/lib/hooks/child-threads.js
@@ -1,122 +1,122 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useFetchSingleMostRecentMessagesFromThreads,
   fetchSingleMostRecentMessagesFromThreadsActionTypes,
 } from '../actions/message-actions.js';
 import {
   useFilteredChatListData,
   type ChatThreadItem,
 } from '../selectors/chat-selectors.js';
 import { useGlobalThreadSearchIndex } from '../selectors/nav-selectors.js';
 import { childThreadInfos } from '../selectors/thread-selectors.js';
 import { threadInChatList } from '../shared/thread-utils.js';
 import threadWatcher from '../shared/thread-watcher.js';
 import type { RawThreadInfo, ThreadInfo } from '../types/thread-types.js';
-import { useDispatchActionPromise } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 type ThreadFilter = {
   +predicate?: (thread: ThreadInfo) => boolean,
   +searchText?: string,
 };
 
 function useFilteredChildThreads(
   threadID: string,
   filter?: ThreadFilter,
 ): $ReadOnlyArray<ChatThreadItem> {
   const defaultPredicate = React.useCallback(() => true, []);
   const { predicate = defaultPredicate, searchText = '' } = filter ?? {};
   const childThreads = useSelector(state => childThreadInfos(state)[threadID]);
   const subchannelIDs = React.useMemo(() => {
     if (!childThreads) {
       return new Set<string>();
     }
     return new Set<string>(
       childThreads.filter(predicate).map(threadInfo => threadInfo.id),
     );
   }, [childThreads, predicate]);
 
   const filterSubchannels = React.useCallback(
     (thread: ?(RawThreadInfo | ThreadInfo)) => {
       const candidateThreadID = thread?.id;
       if (!candidateThreadID) {
         return false;
       }
       return subchannelIDs.has(candidateThreadID);
     },
     [subchannelIDs],
   );
   const allSubchannelsList = useFilteredChatListData(filterSubchannels);
 
   const searchIndex = useGlobalThreadSearchIndex();
 
   const searchResultIDs = React.useMemo(
     () => searchIndex.getSearchResults(searchText),
     [searchIndex, searchText],
   );
 
   const searchTextExists = !!searchText.length;
 
   const subchannelIDsNotInChatList = React.useMemo(
     () =>
       new Set(
         allSubchannelsList
           .filter(item => !threadInChatList(item.threadInfo))
           .map(item => item.threadInfo.id),
       ),
     [allSubchannelsList],
   );
 
   React.useEffect(() => {
     if (!subchannelIDsNotInChatList.size) {
       return undefined;
     }
     subchannelIDsNotInChatList.forEach(tID => threadWatcher.watchID(tID));
 
     return () =>
       subchannelIDsNotInChatList.forEach(tID => threadWatcher.removeID(tID));
   }, [subchannelIDsNotInChatList]);
 
   const filteredSubchannelsChatList = React.useMemo(() => {
     if (!searchTextExists) {
       return allSubchannelsList;
     }
     return allSubchannelsList.filter(item =>
       searchResultIDs.includes(item.threadInfo.id),
     );
   }, [allSubchannelsList, searchResultIDs, searchTextExists]);
 
   const threadIDsWithNoMessages = React.useMemo(
     () =>
       new Set(
         filteredSubchannelsChatList
           .filter(item => !item.mostRecentMessageInfo)
           .map(item => item.threadInfo.id),
       ),
     [filteredSubchannelsChatList],
   );
   const dispatchActionPromise = useDispatchActionPromise();
   const fetchSingleMostRecentMessages =
     useFetchSingleMostRecentMessagesFromThreads();
 
   React.useEffect(() => {
     if (!threadIDsWithNoMessages.size) {
       return;
     }
     void dispatchActionPromise(
       fetchSingleMostRecentMessagesFromThreadsActionTypes,
       fetchSingleMostRecentMessages(Array.from(threadIDsWithNoMessages)),
     );
   }, [
     threadIDsWithNoMessages,
     fetchSingleMostRecentMessages,
     dispatchActionPromise,
   ]);
 
   return filteredSubchannelsChatList;
 }
 
 export { useFilteredChildThreads };
diff --git a/lib/hooks/invite-links.js b/lib/hooks/invite-links.js
index 90ce1bfdb..3483861c5 100644
--- a/lib/hooks/invite-links.js
+++ b/lib/hooks/invite-links.js
@@ -1,102 +1,102 @@
 // @flow
 
 import React from 'react';
 
 import {
   useCreateOrUpdatePublicLink,
   createOrUpdatePublicLinkActionTypes,
   useDisableInviteLink,
   disableInviteLinkLinkActionTypes,
 } from '../actions/link-actions.js';
 import { createLoadingStatusSelector } from '../selectors/loading-selectors.js';
 import type { SetState } from '../types/hook-types.js';
 import type { InviteLink } from '../types/link-types.js';
-import { useDispatchActionPromise } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 const createOrUpdatePublicLinkStatusSelector = createLoadingStatusSelector(
   createOrUpdatePublicLinkActionTypes,
 );
 const disableInviteLinkStatusSelector = createLoadingStatusSelector(
   disableInviteLinkLinkActionTypes,
 );
 
 function useInviteLinksActions(
   communityID: string,
   inviteLink: ?InviteLink,
 ): {
   +error: ?string,
   +isLoading: boolean,
   +name: string,
   +setName: SetState<string>,
   +createOrUpdateInviteLink: () => mixed,
   +disableInviteLink: () => mixed,
 } {
   const [name, setName] = React.useState(
     inviteLink?.name ?? Math.random().toString(36).slice(-9),
   );
   const [error, setError] = React.useState(null);
   const dispatchActionPromise = useDispatchActionPromise();
 
   const callCreateOrUpdatePublicLink = useCreateOrUpdatePublicLink();
   const createCreateOrUpdateActionPromise = React.useCallback(async () => {
     setError(null);
     try {
       return await callCreateOrUpdatePublicLink({
         name,
         communityID,
       });
     } catch (e) {
       setError(e.message);
       throw e;
     }
   }, [callCreateOrUpdatePublicLink, communityID, name]);
   const createOrUpdateInviteLink = React.useCallback(() => {
     void dispatchActionPromise(
       createOrUpdatePublicLinkActionTypes,
       createCreateOrUpdateActionPromise(),
     );
   }, [createCreateOrUpdateActionPromise, dispatchActionPromise]);
 
   const disableInviteLinkServerCall = useDisableInviteLink();
   const createDisableLinkActionPromise = React.useCallback(async () => {
     setError(null);
     try {
       return await disableInviteLinkServerCall({
         name,
         communityID,
       });
     } catch (e) {
       setError(e.message);
       throw e;
     }
   }, [disableInviteLinkServerCall, communityID, name]);
   const disableInviteLink = React.useCallback(() => {
     void dispatchActionPromise(
       disableInviteLinkLinkActionTypes,
       createDisableLinkActionPromise(),
     );
   }, [createDisableLinkActionPromise, dispatchActionPromise]);
   const disableInviteLinkStatus = useSelector(disableInviteLinkStatusSelector);
 
   const createOrUpdatePublicLinkStatus = useSelector(
     createOrUpdatePublicLinkStatusSelector,
   );
   const isLoading =
     createOrUpdatePublicLinkStatus === 'loading' ||
     disableInviteLinkStatus === 'loading';
 
   return React.useMemo(
     () => ({
       error,
       isLoading,
       name,
       setName,
       createOrUpdateInviteLink,
       disableInviteLink,
     }),
     [createOrUpdateInviteLink, disableInviteLink, error, isLoading, name],
   );
 }
 
 export { useInviteLinksActions };
diff --git a/lib/hooks/promote-sidebar.react.js b/lib/hooks/promote-sidebar.react.js
index 5e8cce9b2..e9e4dd1a9 100644
--- a/lib/hooks/promote-sidebar.react.js
+++ b/lib/hooks/promote-sidebar.react.js
@@ -1,94 +1,94 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from '../actions/thread-actions.js';
 import { createLoadingStatusSelector } from '../selectors/loading-selectors.js';
 import { threadInfoSelector } from '../selectors/thread-selectors.js';
 import {
   threadHasPermission,
   threadIsSidebar,
 } from '../shared/thread-utils.js';
 import type { LoadingStatus } from '../types/loading-types.js';
 import { threadPermissions } from '../types/thread-permission-types.js';
 import { threadTypes } from '../types/thread-types-enum.js';
 import type { ThreadInfo } from '../types/thread-types.js';
-import { useDispatchActionPromise } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 function canPromoteSidebar(
   sidebarThreadInfo: ThreadInfo,
   parentThreadInfo: ?ThreadInfo,
 ): boolean {
   if (!threadIsSidebar(sidebarThreadInfo)) {
     return false;
   }
 
   const canChangeThreadType = threadHasPermission(
     sidebarThreadInfo,
     threadPermissions.EDIT_PERMISSIONS,
   );
   const canCreateSubchannelsInParent = threadHasPermission(
     parentThreadInfo,
     threadPermissions.CREATE_SUBCHANNELS,
   );
   return canChangeThreadType && canCreateSubchannelsInParent;
 }
 
 type PromoteSidebarType = {
   +onPromoteSidebar: () => void,
   +loading: LoadingStatus,
   +canPromoteSidebar: boolean,
 };
 
 function usePromoteSidebar(
   threadInfo: ThreadInfo,
   onError?: () => mixed,
 ): PromoteSidebarType {
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useChangeThreadSettings();
   const loadingStatusSelector = createLoadingStatusSelector(
     changeThreadSettingsActionTypes,
   );
   const loadingStatus = useSelector(loadingStatusSelector);
 
   const { parentThreadID } = threadInfo;
   const parentThreadInfo: ?ThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
 
   const canPromote = canPromoteSidebar(threadInfo, parentThreadInfo);
 
   const onClick = React.useCallback(() => {
     try {
       void dispatchActionPromise(
         changeThreadSettingsActionTypes,
         (async () => {
           return await callChangeThreadSettings({
             threadID: threadInfo.id,
             changes: { type: threadTypes.COMMUNITY_OPEN_SUBTHREAD },
           });
         })(),
       );
     } catch (e) {
       onError?.();
       throw e;
     }
   }, [threadInfo.id, callChangeThreadSettings, dispatchActionPromise, onError]);
 
   const returnValues = React.useMemo(
     () => ({
       onPromoteSidebar: onClick,
       loading: loadingStatus,
       canPromoteSidebar: canPromote,
     }),
     [onClick, loadingStatus, canPromote],
   );
 
   return returnValues;
 }
 
 export { usePromoteSidebar, canPromoteSidebar };
diff --git a/lib/hooks/relationship-prompt.js b/lib/hooks/relationship-prompt.js
index cd4d43ab2..0702cf1e4 100644
--- a/lib/hooks/relationship-prompt.js
+++ b/lib/hooks/relationship-prompt.js
@@ -1,127 +1,125 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   updateRelationships as serverUpdateRelationships,
   updateRelationshipsActionTypes,
 } from '../actions/relationship-actions.js';
 import { getSingleOtherUser } from '../shared/thread-utils.js';
 import {
   type RelationshipAction,
   relationshipActions,
 } from '../types/relationship-types.js';
 import type { ThreadInfo } from '../types/thread-types.js';
 import type { UserInfo } from '../types/user-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from '../utils/action-utils.js';
+import { useServerCall } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 type RelationshipCallbacks = {
   +blockUser: () => void,
   +unblockUser: () => void,
   +friendUser: () => void,
   +unfriendUser: () => void,
 };
 
 type RelationshipPromptData = {
   +otherUserInfo: ?UserInfo,
   +callbacks: RelationshipCallbacks,
 };
 
 function useRelationshipPrompt(
   threadInfo: ThreadInfo,
   onErrorCallback?: () => void,
   pendingPersonalThreadUserInfo?: ?UserInfo,
 ): RelationshipPromptData {
   // We're fetching the info from state because we need the most recent
   // relationship status. Additionally, member info does not contain info
   // about relationship.
   const otherUserInfo = useSelector(state => {
     const otherUserID =
       getSingleOtherUser(threadInfo, state.currentUserInfo?.id) ??
       pendingPersonalThreadUserInfo?.id;
     const { userInfos } = state.userStore;
     return otherUserID && userInfos[otherUserID]
       ? userInfos[otherUserID]
       : pendingPersonalThreadUserInfo;
   });
 
   const callbacks = useRelationshipCallbacks(
     otherUserInfo?.id,
     onErrorCallback,
   );
 
   return React.useMemo(
     () => ({
       otherUserInfo,
       callbacks,
     }),
     [callbacks, otherUserInfo],
   );
 }
 
 function useRelationshipCallbacks(
   otherUserID?: string,
   onErrorCallback?: () => void,
 ): RelationshipCallbacks {
   const callUpdateRelationships = useServerCall(serverUpdateRelationships);
   const updateRelationship = React.useCallback(
     async (action: RelationshipAction) => {
       try {
         invariant(otherUserID, 'Other user info id should be present');
         return await callUpdateRelationships({
           action,
           userIDs: [otherUserID],
         });
       } catch (e) {
         onErrorCallback?.();
         throw e;
       }
     },
     [callUpdateRelationships, onErrorCallback, otherUserID],
   );
 
   const dispatchActionPromise = useDispatchActionPromise();
   const onButtonPress = React.useCallback(
     (action: RelationshipAction) => {
       void dispatchActionPromise(
         updateRelationshipsActionTypes,
         updateRelationship(action),
       );
     },
     [dispatchActionPromise, updateRelationship],
   );
 
   const blockUser = React.useCallback(
     () => onButtonPress(relationshipActions.BLOCK),
     [onButtonPress],
   );
   const unblockUser = React.useCallback(
     () => onButtonPress(relationshipActions.UNBLOCK),
     [onButtonPress],
   );
   const friendUser = React.useCallback(
     () => onButtonPress(relationshipActions.FRIEND),
     [onButtonPress],
   );
   const unfriendUser = React.useCallback(
     () => onButtonPress(relationshipActions.UNFRIEND),
     [onButtonPress],
   );
 
   return React.useMemo(
     () => ({
       blockUser,
       unblockUser,
       friendUser,
       unfriendUser,
     }),
     [blockUser, friendUser, unblockUser, unfriendUser],
   );
 }
 
 export { useRelationshipPrompt, useRelationshipCallbacks };
diff --git a/lib/hooks/toggle-unread-status.js b/lib/hooks/toggle-unread-status.js
index 5b19508ef..789886448 100644
--- a/lib/hooks/toggle-unread-status.js
+++ b/lib/hooks/toggle-unread-status.js
@@ -1,54 +1,54 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useSetThreadUnreadStatus,
   setThreadUnreadStatusActionTypes,
 } from '../actions/activity-actions.js';
 import type {
   SetThreadUnreadStatusPayload,
   SetThreadUnreadStatusRequest,
 } from '../types/activity-types.js';
 import type { ThreadInfo } from '../types/thread-types.js';
-import { useDispatchActionPromise } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 
 function useToggleUnreadStatus(
   threadInfo: ThreadInfo,
   mostRecentNonLocalMessage: ?string,
   afterAction: () => void,
 ): () => void {
   const dispatchActionPromise = useDispatchActionPromise();
   const { currentUser } = threadInfo;
   const boundSetThreadUnreadStatus: (
     request: SetThreadUnreadStatusRequest,
   ) => Promise<SetThreadUnreadStatusPayload> = useSetThreadUnreadStatus();
   const toggleUnreadStatus = React.useCallback(() => {
     const request = {
       threadID: threadInfo.id,
       unread: !currentUser.unread,
       latestMessage: mostRecentNonLocalMessage,
     };
     void dispatchActionPromise(
       setThreadUnreadStatusActionTypes,
       boundSetThreadUnreadStatus(request),
       undefined,
       ({
         threadID: threadInfo.id,
         unread: !currentUser.unread,
       }: { +threadID: string, +unread: boolean }),
     );
     afterAction();
   }, [
     threadInfo.id,
     currentUser.unread,
     mostRecentNonLocalMessage,
     dispatchActionPromise,
     afterAction,
     boundSetThreadUnreadStatus,
   ]);
 
   return toggleUnreadStatus;
 }
 
 export default useToggleUnreadStatus;
diff --git a/lib/shared/crypto-utils.js b/lib/shared/crypto-utils.js
index b37bee76e..59031952b 100644
--- a/lib/shared/crypto-utils.js
+++ b/lib/shared/crypto-utils.js
@@ -1,117 +1,115 @@
 //@flow
 
 import * as React from 'react';
 
 import {
   getOlmSessionInitializationData,
   getOlmSessionInitializationDataActionTypes,
 } from '../actions/user-actions.js';
 import type {
   OLMIdentityKeys,
   OLMOneTimeKeys,
   OLMPrekey,
 } from '../types/crypto-types';
 import type { OlmSessionInitializationInfo } from '../types/request-types';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from '../utils/action-utils.js';
+import { useServerCall } from '../utils/action-utils.js';
 import type {
   CallServerEndpointOptions,
   CallServerEndpoint,
 } from '../utils/call-server-endpoint.js';
 import { values, entries } from '../utils/objects.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 
 export type InitialNotifMessageOptions = {
   +callServerEndpoint?: ?CallServerEndpoint,
   +callServerEndpointOptions?: ?CallServerEndpointOptions,
 };
 
 const initialEncryptedMessageContent = {
   type: 'init',
 };
 
 function useInitialNotificationsEncryptedMessage(
   platformSpecificSessionCreator: (
     notificationsIdentityKeys: OLMIdentityKeys,
     notificationsInitializationInfo: OlmSessionInitializationInfo,
   ) => Promise<string>,
 ): (options?: ?InitialNotifMessageOptions) => Promise<string> {
   const callGetOlmSessionInitializationData = useServerCall(
     getOlmSessionInitializationData,
   );
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
     async options => {
       const callServerEndpoint = options?.callServerEndpoint;
       const callServerEndpointOptions = options?.callServerEndpointOptions;
 
       const initDataAction = callServerEndpoint
         ? getOlmSessionInitializationData(callServerEndpoint)
         : callGetOlmSessionInitializationData;
       const olmSessionDataPromise = initDataAction(callServerEndpointOptions);
 
       void dispatchActionPromise(
         getOlmSessionInitializationDataActionTypes,
         olmSessionDataPromise,
       );
 
       const { signedIdentityKeysBlob, notifInitializationInfo } =
         await olmSessionDataPromise;
 
       const { notificationIdentityPublicKeys } = JSON.parse(
         signedIdentityKeysBlob.payload,
       );
 
       return await platformSpecificSessionCreator(
         notificationIdentityPublicKeys,
         notifInitializationInfo,
       );
     },
     [
       callGetOlmSessionInitializationData,
       dispatchActionPromise,
       platformSpecificSessionCreator,
     ],
   );
 }
 
 function getOneTimeKeyValues(
   oneTimeKeys: OLMOneTimeKeys,
 ): $ReadOnlyArray<string> {
   return values(oneTimeKeys.curve25519);
 }
 
 function getPrekeyValue(prekey: OLMPrekey): string {
   const [prekeyValue] = values(prekey.curve25519);
   return prekeyValue;
 }
 
 function getOneTimeKeyValuesFromBlob(keyBlob: string): $ReadOnlyArray<string> {
   const oneTimeKeys: OLMOneTimeKeys = JSON.parse(keyBlob);
   return getOneTimeKeyValues(oneTimeKeys);
 }
 
 function getPrekeyValueFromBlob(prekeyBlob: string): string {
   const prekey: OLMPrekey = JSON.parse(prekeyBlob);
   return getPrekeyValue(prekey);
 }
 
 function getOneTimeKeyArray(
   oneTimeKeys: OLMOneTimeKeys,
 ): $ReadOnlyArray<string> {
   return entries(oneTimeKeys.curve25519).map(([key, value]: [string, string]) =>
     JSON.stringify({ curve25519: { [key]: value } }),
   );
 }
 
 export {
   getOneTimeKeyValues,
   getPrekeyValue,
   getOneTimeKeyValuesFromBlob,
   getPrekeyValueFromBlob,
   initialEncryptedMessageContent,
   useInitialNotificationsEncryptedMessage,
   getOneTimeKeyArray,
 };
diff --git a/lib/shared/edit-messages-utils.js b/lib/shared/edit-messages-utils.js
index 8b4640ec9..c122fd0c0 100644
--- a/lib/shared/edit-messages-utils.js
+++ b/lib/shared/edit-messages-utils.js
@@ -1,88 +1,88 @@
 // @flow
 
 import * as React from 'react';
 
 import { threadIsPending, threadHasPermission } from './thread-utils.js';
 import {
   sendEditMessageActionTypes,
   useSendEditMessage,
 } from '../actions/message-actions.js';
 import type {
   SendEditMessageResult,
   RobotextMessageInfo,
   ComposableMessageInfo,
   RawMessageInfo,
 } from '../types/message-types';
 import { messageTypes } from '../types/message-types-enum.js';
 import { threadPermissions } from '../types/thread-permission-types.js';
 import { type ThreadInfo } from '../types/thread-types.js';
-import { useDispatchActionPromise } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 function useEditMessage(): (
   messageID: string,
   newText: string,
 ) => Promise<SendEditMessageResult> {
   const callEditMessage = useSendEditMessage();
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
     (messageID, newText) => {
       const editMessagePromise = (async () => {
         const result = await callEditMessage({
           targetMessageID: messageID,
           text: newText,
         });
 
         return ({
           newMessageInfos: result.newMessageInfos,
         }: { +newMessageInfos: $ReadOnlyArray<RawMessageInfo> });
       })();
 
       void dispatchActionPromise(
         sendEditMessageActionTypes,
         editMessagePromise,
       );
 
       return editMessagePromise;
     },
     [dispatchActionPromise, callEditMessage],
   );
 }
 
 function useCanEditMessage(
   threadInfo: ThreadInfo,
   targetMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
 ): boolean {
   const currentUserInfo = useSelector(state => state.currentUserInfo);
 
   if (targetMessageInfo.type !== messageTypes.TEXT) {
     return false;
   }
 
   if (!currentUserInfo || !currentUserInfo.id) {
     return false;
   }
 
   const currentUserId = currentUserInfo.id;
   const targetMessageCreatorId = targetMessageInfo.creator.id;
   if (currentUserId !== targetMessageCreatorId) {
     return false;
   }
 
   const hasPermission = threadHasPermission(
     threadInfo,
     threadPermissions.EDIT_MESSAGE,
   );
   return hasPermission;
 }
 
 function getMessageLabel(hasBeenEdited: ?boolean, threadID: string): ?string {
   const isPending = threadIsPending(threadID);
   if (hasBeenEdited && !isPending) {
     return 'Edited';
   }
   return null;
 }
 
 export { useCanEditMessage, useEditMessage, getMessageLabel };
diff --git a/lib/shared/keyserver-utils.js b/lib/shared/keyserver-utils.js
index 71dcd1842..04b1fdaea 100644
--- a/lib/shared/keyserver-utils.js
+++ b/lib/shared/keyserver-utils.js
@@ -1,69 +1,69 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useGetVersion,
   getVersionActionTypes,
 } from '../actions/device-actions.js';
 import { urlsToIDsSelector } from '../selectors/keyserver-selectors.js';
-import { useDispatchActionPromise } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 function useIsKeyserverURLValid(keyserverURL?: string): () => Promise<boolean> {
   const urlsToIDs: { +[keyserverID: string]: ?string } =
     useSelector(urlsToIDsSelector);
 
   const keyserverID: ?string = keyserverURL
     ? urlsToIDs[keyserverURL]
     : undefined;
 
   const keyserverInfo = useSelector(state =>
     keyserverID ? state.keyserverStore.keyserverInfos[keyserverID] : undefined,
   );
 
   const serverCallParamOverride = React.useMemo(() => {
     if (!keyserverURL) {
       return undefined;
     }
 
     if (keyserverInfo && keyserverID) {
       return {
         keyserverInfos: {
           [(keyserverID: string)]: keyserverInfo,
         },
       };
     }
 
     return {
       keyserverInfos: {
         [(keyserverURL: string)]: {
           urlPrefix: keyserverURL,
         },
       },
     };
   }, [keyserverID, keyserverInfo, keyserverURL]);
 
   const getVersionCall = useGetVersion(serverCallParamOverride);
 
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(async () => {
     if (!keyserverURL) {
       return false;
     }
 
     const getVersionPromise = getVersionCall();
     void dispatchActionPromise(getVersionActionTypes, getVersionPromise);
 
     // We don't care about the result; just need to make sure this doesn't throw
     try {
       await getVersionPromise;
       return true;
     } catch (e) {
       return false;
     }
   }, [dispatchActionPromise, getVersionCall, keyserverURL]);
 }
 
 export { useIsKeyserverURLValid };
diff --git a/lib/shared/messages/text-message-spec.js b/lib/shared/messages/text-message-spec.js
index 7df94f13b..2f8455d95 100644
--- a/lib/shared/messages/text-message-spec.js
+++ b/lib/shared/messages/text-message-spec.js
@@ -1,334 +1,334 @@
 // @flow
 
 import invariant from 'invariant';
 import * as SimpleMarkdown from 'simple-markdown';
 
 import {
   pushTypes,
   type MessageSpec,
   type RawMessageInfoFromServerDBRowParams,
   type NotificationTextsParams,
 } from './message-spec.js';
 import { assertSingleMessageInfo, joinResult } from './utils.js';
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from '../../actions/thread-actions.js';
 import { messageTypes } from '../../types/message-types-enum.js';
 import type {
   MessageInfo,
   ClientDBMessageInfo,
 } from '../../types/message-types.js';
 import {
   type RawTextMessageInfo,
   type TextMessageData,
   type TextMessageInfo,
   rawTextMessageInfoValidator,
 } from '../../types/messages/text.js';
 import type { NotifTexts } from '../../types/notif-types.js';
 import { threadTypes } from '../../types/thread-types-enum.js';
 import type { ThreadInfo } from '../../types/thread-types.js';
 import type { RelativeUserInfo } from '../../types/user-types.js';
-import { useDispatchActionPromise } from '../../utils/action-utils.js';
 import { ET } from '../../utils/entity-text.js';
+import { useDispatchActionPromise } from '../../utils/redux-promise-utils.js';
 import {
   type ASTNode,
   type SingleASTNode,
   stripSpoilersFromNotifications,
   stripSpoilersFromMarkdownAST,
 } from '../markdown.js';
 import {
   isUserMentioned,
   renderChatMentionsWithAltText,
 } from '../mention-utils.js';
 import { notifTextsForSidebarCreation } from '../notif-utils.js';
 import {
   threadIsGroupChat,
   extractNewMentionedParentMembers,
 } from '../thread-utils.js';
 
 /**
  * most of the markdown leaves contain `content` field
  * (it is an array or a string) apart from lists,
  * which have `items` field (that holds an array)
  */
 const rawTextFromMarkdownAST = (node: ASTNode): string => {
   if (Array.isArray(node)) {
     return node.map(rawTextFromMarkdownAST).join('');
   }
   const { content, items } = node;
   if (content && typeof content === 'string') {
     return content;
   } else if (items) {
     return rawTextFromMarkdownAST(items);
   } else if (content) {
     return rawTextFromMarkdownAST(content);
   }
   return '';
 };
 
 const getFirstNonQuotedRawLine = (
   nodes: $ReadOnlyArray<SingleASTNode>,
 ): string => {
   let result = 'message';
   for (const node of nodes) {
     if (node.type === 'blockQuote') {
       result = 'quoted message';
     } else {
       const rawText = rawTextFromMarkdownAST(node);
       if (!rawText || !rawText.replace(/\s/g, '')) {
         // handles the case of an empty(or containing only white spaces)
         // new line that usually occurs between a quote and the rest
         // of the message(we don't want it as a title, thus continue)
         continue;
       }
       return rawText;
     }
   }
   return result;
 };
 
 type TextMessageSpec = MessageSpec<
   TextMessageData,
   RawTextMessageInfo,
   TextMessageInfo,
 > & {
   // We need to explicitly type this as non-optional so that
   // it can be referenced from messageContentForClientDB below
   +messageContentForServerDB: (
     data: TextMessageData | RawTextMessageInfo,
   ) => string,
   ...
 };
 
 export const textMessageSpec: TextMessageSpec = Object.freeze({
   messageContentForServerDB(
     data: TextMessageData | RawTextMessageInfo,
   ): string {
     return data.text;
   },
 
   messageContentForClientDB(data: RawTextMessageInfo): string {
     return textMessageSpec.messageContentForServerDB(data);
   },
 
   messageTitle({ messageInfo, markdownRules }) {
     const { text } = messageInfo;
     const parser = SimpleMarkdown.parserFor(markdownRules);
     const ast = stripSpoilersFromMarkdownAST(
       parser(text, { disableAutoBlockNewlines: true }),
     );
     return ET`${getFirstNonQuotedRawLine(ast).trim()}`;
   },
 
   rawMessageInfoFromServerDBRow(
     row: Object,
     params: RawMessageInfoFromServerDBRowParams,
   ): RawTextMessageInfo {
     let rawTextMessageInfo: RawTextMessageInfo = {
       type: messageTypes.TEXT,
       id: row.id.toString(),
       threadID: row.threadID.toString(),
       time: row.time,
       creatorID: row.creatorID.toString(),
       text: row.content,
     };
     if (params.localID) {
       rawTextMessageInfo = { ...rawTextMessageInfo, localID: params.localID };
     }
     return rawTextMessageInfo;
   },
 
   rawMessageInfoFromClientDB(
     clientDBMessageInfo: ClientDBMessageInfo,
   ): RawTextMessageInfo {
     let rawTextMessageInfo: RawTextMessageInfo = {
       type: messageTypes.TEXT,
       threadID: clientDBMessageInfo.thread,
       time: parseInt(clientDBMessageInfo.time),
       creatorID: clientDBMessageInfo.user,
       text: clientDBMessageInfo.content ?? '',
     };
     if (clientDBMessageInfo.local_id) {
       rawTextMessageInfo = {
         ...rawTextMessageInfo,
         localID: clientDBMessageInfo.local_id,
       };
     }
     if (clientDBMessageInfo.id !== clientDBMessageInfo.local_id) {
       rawTextMessageInfo = {
         ...rawTextMessageInfo,
         id: clientDBMessageInfo.id,
       };
     }
     return rawTextMessageInfo;
   },
 
   createMessageInfo(
     rawMessageInfo: RawTextMessageInfo,
     creator: RelativeUserInfo,
   ): TextMessageInfo {
     let messageInfo: TextMessageInfo = {
       type: messageTypes.TEXT,
       threadID: rawMessageInfo.threadID,
       creator,
       time: rawMessageInfo.time,
       text: rawMessageInfo.text,
     };
     if (rawMessageInfo.id) {
       messageInfo = { ...messageInfo, id: rawMessageInfo.id };
     }
     if (rawMessageInfo.localID) {
       messageInfo = { ...messageInfo, localID: rawMessageInfo.localID };
     }
     return messageInfo;
   },
 
   rawMessageInfoFromMessageData(
     messageData: TextMessageData,
     id: ?string,
   ): RawTextMessageInfo {
     const { sidebarCreation, ...rest } = messageData;
     if (id) {
       return { ...rest, id };
     } else {
       return { ...rest };
     }
   },
 
   async notificationTexts(
     messageInfos: $ReadOnlyArray<MessageInfo>,
     threadInfo: ThreadInfo,
     params: NotificationTextsParams,
   ): Promise<?NotifTexts> {
     // We special-case sidebarCreations. Usually we don't send any notifs in
     // that case to avoid a double-notif, but we need to update the original
     // notif if somebody was @-tagged in this message
     if (
       messageInfos.length === 3 &&
       messageInfos[2].type === messageTypes.SIDEBAR_SOURCE &&
       messageInfos[1].type === messageTypes.CREATE_SIDEBAR
     ) {
       const sidebarSourceMessageInfo = messageInfos[2];
       const createSidebarMessageInfo = messageInfos[1];
 
       const sourceMessage = messageInfos[2].sourceMessage;
       const { username } = params.notifTargetUserInfo;
       if (!username) {
         // If we couldn't fetch the username for some reason, we won't be able
         // to extract @-mentions anyways, so we'll give up on updating the notif
         return null;
       }
 
       if (
         sourceMessage.type === messageTypes.TEXT &&
         isUserMentioned(username, sourceMessage.text)
       ) {
         // If the notif target was already mentioned in the source message,
         // there's no need to update the notif
         return null;
       }
 
       const messageInfo = messageInfos[0];
       invariant(
         messageInfo.type === messageTypes.TEXT,
         'messageInfo should be messageTypes.TEXT!',
       );
       if (!isUserMentioned(username, messageInfo.text)) {
         // We only need to update the notif if the notif target is mentioned
         return null;
       }
 
       return notifTextsForSidebarCreation({
         createSidebarMessageInfo,
         sidebarSourceMessageInfo,
         firstSidebarMessageInfo: messageInfo,
         threadInfo,
         params,
       });
     }
 
     const messageInfo = assertSingleMessageInfo(messageInfos);
     invariant(
       messageInfo.type === messageTypes.TEXT,
       'messageInfo should be messageTypes.TEXT!',
     );
     const transformedNotificationText = stripSpoilersFromNotifications(
       renderChatMentionsWithAltText(messageInfo.text),
     );
     if (!threadInfo.name && !threadIsGroupChat(threadInfo)) {
       const thread = ET.thread({ display: 'uiName', threadInfo });
       return {
         merged: ET`${thread}: ${transformedNotificationText}`,
         body: transformedNotificationText,
         title: threadInfo.uiName,
       };
     } else {
       const creator = ET.user({ userInfo: messageInfo.creator });
       const thread = ET.thread({ display: 'shortName', threadInfo });
       return {
         merged: ET`${creator} to ${thread}: ${transformedNotificationText}`,
         body: transformedNotificationText,
         title: threadInfo.uiName,
         prefix: ET`${creator}:`,
       };
     }
   },
 
   notificationCollapseKey(
     rawMessageInfo: RawTextMessageInfo,
     messageData: TextMessageData,
   ): ?string {
     if (!messageData.sidebarCreation) {
       return null;
     }
     return joinResult(messageTypes.CREATE_SIDEBAR, rawMessageInfo.threadID);
   },
 
   generatesNotifs: async () => pushTypes.NOTIF,
 
   includedInRepliesCount: true,
 
   useCreationSideEffectsFunc: () => {
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeThreadSettings = useChangeThreadSettings();
     return async (
       messageInfo: RawTextMessageInfo,
       threadInfo: ThreadInfo,
       parentThreadInfo: ?ThreadInfo,
     ) => {
       if (threadInfo.type !== threadTypes.SIDEBAR) {
         return;
       }
       invariant(parentThreadInfo, 'all sidebars should have a parent thread');
 
       const mentionedNewMembers = extractNewMentionedParentMembers(
         messageInfo.text,
         threadInfo,
         parentThreadInfo,
       );
 
       if (mentionedNewMembers.length === 0) {
         return;
       }
 
       const newMemberIDs = mentionedNewMembers.map(({ id }) => id);
       const addMembersPromise = callChangeThreadSettings({
         threadID: threadInfo.id,
         changes: { newMemberIDs },
       });
 
       void dispatchActionPromise(
         changeThreadSettingsActionTypes,
         addMembersPromise,
       );
       await addMembersPromise;
     };
   },
 
   canBeSidebarSource: true,
 
   canBePinned: true,
 
   validator: rawTextMessageInfoValidator,
 });
diff --git a/lib/shared/search-utils.js b/lib/shared/search-utils.js
index 0f7f01d65..96bd676c6 100644
--- a/lib/shared/search-utils.js
+++ b/lib/shared/search-utils.js
@@ -1,453 +1,451 @@
 // @flow
 
 import * as React from 'react';
 
 import { messageID } from './message-utils.js';
 import SearchIndex from './search-index.js';
 import {
   userIsMember,
   threadMemberHasPermission,
   getContainingThreadID,
 } from './thread-utils.js';
 import {
   useSearchMessages as useSearchMessagesAction,
   searchMessagesActionTypes,
 } from '../actions/message-actions.js';
 import {
   searchUsers,
   searchUsersActionTypes,
 } from '../actions/user-actions.js';
 import { ENSCacheContext } from '../components/ens-cache-provider.react.js';
 import genesis from '../facts/genesis.js';
 import type {
   ChatMessageInfoItem,
   MessageListData,
 } from '../selectors/chat-selectors.js';
 import { useUserSearchIndex } from '../selectors/nav-selectors.js';
 import { relationshipBlockedInEitherDirection } from '../shared/relationship-utils.js';
 import type { MessageInfo, RawMessageInfo } from '../types/message-types.js';
 import { userRelationshipStatus } from '../types/relationship-types.js';
 import { threadPermissions } from '../types/thread-permission-types.js';
 import { type ThreadType, threadTypes } from '../types/thread-types-enum.js';
 import { type ThreadInfo } from '../types/thread-types.js';
 import type {
   AccountUserInfo,
   UserListItem,
   GlobalAccountUserInfo,
 } from '../types/user-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from '../utils/action-utils.js';
+import { useServerCall } from '../utils/action-utils.js';
 import { isValidENSName } from '../utils/ens-helpers.js';
 import { values } from '../utils/objects.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 const notFriendNotice = 'not friend';
 
 function appendUserInfo({
   results,
   excludeUserIDs,
   userInfo,
   parentThreadInfo,
   communityThreadInfo,
   containingThreadInfo,
 }: {
   +results: {
     [id: string]: {
       ...AccountUserInfo | GlobalAccountUserInfo,
       isMemberOfParentThread: boolean,
       isMemberOfContainingThread: boolean,
     },
   },
   +excludeUserIDs: $ReadOnlyArray<string>,
   +userInfo: AccountUserInfo | GlobalAccountUserInfo,
   +parentThreadInfo: ?ThreadInfo,
   +communityThreadInfo: ?ThreadInfo,
   +containingThreadInfo: ?ThreadInfo,
 }) {
   const { id } = userInfo;
   if (excludeUserIDs.includes(id) || id in results) {
     return;
   }
   if (
     communityThreadInfo &&
     !threadMemberHasPermission(
       communityThreadInfo,
       id,
       threadPermissions.KNOW_OF,
     )
   ) {
     return;
   }
   results[id] = {
     ...userInfo,
     isMemberOfParentThread: userIsMember(parentThreadInfo, id),
     isMemberOfContainingThread: userIsMember(containingThreadInfo, id),
   };
 }
 
 function usePotentialMemberItems({
   text,
   userInfos,
   excludeUserIDs,
   includeServerSearchUsers,
   inputParentThreadInfo,
   inputCommunityThreadInfo,
   threadType,
 }: {
   +text: string,
   +userInfos: { +[id: string]: AccountUserInfo },
   +excludeUserIDs: $ReadOnlyArray<string>,
   +includeServerSearchUsers?: $ReadOnlyArray<GlobalAccountUserInfo>,
   +inputParentThreadInfo?: ?ThreadInfo,
   +inputCommunityThreadInfo?: ?ThreadInfo,
   +threadType?: ?ThreadType,
 }): UserListItem[] {
   const memoizedUserInfos = React.useMemo(() => values(userInfos), [userInfos]);
   const searchIndex: SearchIndex = useUserSearchIndex(memoizedUserInfos);
 
   const communityThreadInfo = React.useMemo(
     () =>
       inputCommunityThreadInfo && inputCommunityThreadInfo.id !== genesis.id
         ? inputCommunityThreadInfo
         : null,
     [inputCommunityThreadInfo],
   );
   const parentThreadInfo = React.useMemo(
     () =>
       inputParentThreadInfo && inputParentThreadInfo.id !== genesis.id
         ? inputParentThreadInfo
         : null,
     [inputParentThreadInfo],
   );
 
   const containgThreadID = threadType
     ? getContainingThreadID(parentThreadInfo, threadType)
     : null;
 
   const containingThreadInfo = React.useMemo(() => {
     if (containgThreadID === parentThreadInfo?.id) {
       return parentThreadInfo;
     } else if (containgThreadID === communityThreadInfo?.id) {
       return communityThreadInfo;
     }
     return null;
   }, [containgThreadID, communityThreadInfo, parentThreadInfo]);
 
   const filteredUserResults = React.useMemo(() => {
     const results: {
       [id: string]: {
         ...AccountUserInfo | GlobalAccountUserInfo,
         isMemberOfParentThread: boolean,
         isMemberOfContainingThread: boolean,
       },
     } = {};
     if (text === '') {
       for (const id in userInfos) {
         appendUserInfo({
           results,
           excludeUserIDs,
           userInfo: userInfos[id],
           parentThreadInfo,
           communityThreadInfo,
           containingThreadInfo,
         });
       }
     } else {
       const ids = searchIndex.getSearchResults(text);
       for (const id of ids) {
         appendUserInfo({
           results,
           excludeUserIDs,
           userInfo: userInfos[id],
           parentThreadInfo,
           communityThreadInfo,
           containingThreadInfo,
         });
       }
     }
 
     if (includeServerSearchUsers) {
       for (const userInfo of includeServerSearchUsers) {
         appendUserInfo({
           results,
           excludeUserIDs,
           userInfo,
           parentThreadInfo,
           communityThreadInfo,
           containingThreadInfo,
         });
       }
     }
 
     let userResults = values(results);
     if (text === '') {
       userResults = userResults.filter(userInfo => {
         if (!containingThreadInfo) {
           return userInfo.relationshipStatus === userRelationshipStatus.FRIEND;
         }
         if (!userInfo.isMemberOfContainingThread) {
           return false;
         }
         const { relationshipStatus } = userInfo;
         if (!relationshipStatus) {
           return true;
         }
         return !relationshipBlockedInEitherDirection(relationshipStatus);
       });
     }
 
     return userResults;
   }, [
     text,
     userInfos,
     searchIndex,
     excludeUserIDs,
     includeServerSearchUsers,
     parentThreadInfo,
     containingThreadInfo,
     communityThreadInfo,
   ]);
 
   const sortedMembers = React.useMemo(() => {
     const nonFriends = [];
     const blockedUsers = [];
     const friends = [];
     const containingThreadMembers = [];
     const parentThreadMembers = [];
 
     for (const userResult of filteredUserResults) {
       const { relationshipStatus } = userResult;
       if (
         relationshipStatus &&
         relationshipBlockedInEitherDirection(relationshipStatus)
       ) {
         blockedUsers.push(userResult);
       } else if (userResult.isMemberOfParentThread) {
         parentThreadMembers.push(userResult);
       } else if (userResult.isMemberOfContainingThread) {
         containingThreadMembers.push(userResult);
       } else if (relationshipStatus === userRelationshipStatus.FRIEND) {
         friends.push(userResult);
       } else {
         nonFriends.push(userResult);
       }
     }
 
     const sortedResults = parentThreadMembers
       .concat(containingThreadMembers)
       .concat(friends)
       .concat(nonFriends)
       .concat(blockedUsers);
 
     return sortedResults.map(
       ({
         isMemberOfContainingThread,
         isMemberOfParentThread,
         relationshipStatus,
         ...result
       }) => {
         let notice, alert;
         const username = result.username;
         if (
           relationshipStatus &&
           relationshipBlockedInEitherDirection(relationshipStatus)
         ) {
           notice = 'user is blocked';
           alert = {
             title: 'User is blocked',
             text:
               `Before you add ${username} to this chat, ` +
               'you’ll need to unblock them. You can do this from the Block List ' +
               'in the Profile tab.',
           };
         } else if (!isMemberOfContainingThread && containingThreadInfo) {
           if (threadType !== threadTypes.SIDEBAR) {
             notice = 'not in community';
             alert = {
               title: 'Not in community',
               text: 'You can only add members of the community to this chat',
             };
           } else {
             notice = 'not in parent chat';
             alert = {
               title: 'Not in parent chat',
               text: 'You can only add members of the parent chat to a thread',
             };
           }
         } else if (
           !containingThreadInfo &&
           relationshipStatus !== userRelationshipStatus.FRIEND
         ) {
           notice = notFriendNotice;
           alert = {
             title: 'Not a friend',
             text:
               `Before you add ${username} to this chat, ` +
               'you’ll need to send them a friend request. ' +
               'You can do this from the Friend List in the Profile tab.',
           };
         } else if (parentThreadInfo && !isMemberOfParentThread) {
           notice = 'not in parent chat';
         }
         if (notice) {
           result = { ...result, notice };
         }
         if (alert) {
           result = { ...result, alert };
         }
         return result;
       },
     );
   }, [containingThreadInfo, filteredUserResults, parentThreadInfo, threadType]);
 
   return sortedMembers;
 }
 
 function useSearchMessages(): (
   query: string,
   threadID: string,
   onResultsReceived: (
     messages: $ReadOnlyArray<RawMessageInfo>,
     endReached: boolean,
     queryID: number,
     threadID: string,
   ) => mixed,
   queryID: number,
   cursor?: ?string,
 ) => void {
   const callSearchMessages = useSearchMessagesAction();
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
     (query, threadID, onResultsReceived, queryID, cursor) => {
       const searchMessagesPromise = (async () => {
         if (query === '') {
           onResultsReceived([], true, queryID, threadID);
           return;
         }
         const { messages, endReached } = await callSearchMessages({
           query,
           threadID,
           cursor,
         });
         onResultsReceived(messages, endReached, queryID, threadID);
       })();
 
       void dispatchActionPromise(
         searchMessagesActionTypes,
         searchMessagesPromise,
       );
     },
     [callSearchMessages, dispatchActionPromise],
   );
 }
 
 function useForwardLookupSearchText(originalText: string): string {
   const cacheContext = React.useContext(ENSCacheContext);
   const { ensCache } = cacheContext;
   const lowercaseText = originalText.toLowerCase();
 
   const [usernameToSearch, setUsernameToSearch] =
     React.useState<string>(lowercaseText);
 
   React.useEffect(() => {
     void (async () => {
       if (!ensCache || !isValidENSName(lowercaseText)) {
         setUsernameToSearch(lowercaseText);
         return;
       }
 
       const address = await ensCache.getAddressForName(lowercaseText);
       if (address) {
         setUsernameToSearch(address);
       } else {
         setUsernameToSearch(lowercaseText);
       }
     })();
   }, [ensCache, lowercaseText]);
 
   return usernameToSearch;
 }
 
 function useSearchUsers(
   usernameInputText: string,
 ): $ReadOnlyArray<GlobalAccountUserInfo> {
   const currentUserID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const forwardLookupSearchText = useForwardLookupSearchText(usernameInputText);
 
   const [serverSearchResults, setServerSearchResults] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
   const callSearchUsers = useServerCall(searchUsers);
   const dispatchActionPromise = useDispatchActionPromise();
   React.useEffect(() => {
     if (forwardLookupSearchText.length === 0) {
       setServerSearchResults([]);
       return;
     }
 
     const searchUsersPromise = (async () => {
       try {
         const { userInfos } = await callSearchUsers(forwardLookupSearchText);
         setServerSearchResults(
           userInfos.filter(({ id }) => id !== currentUserID),
         );
       } catch (err) {
         setServerSearchResults([]);
       }
     })();
     void dispatchActionPromise(searchUsersActionTypes, searchUsersPromise);
   }, [
     callSearchUsers,
     currentUserID,
     dispatchActionPromise,
     forwardLookupSearchText,
   ]);
 
   return serverSearchResults;
 }
 
 function filterChatMessageInfosForSearch(
   chatMessageInfos: MessageListData,
   translatedSearchResults: $ReadOnlyArray<MessageInfo>,
 ): ?(ChatMessageInfoItem[]) {
   if (!chatMessageInfos) {
     return null;
   }
 
   const idSet = new Set(translatedSearchResults.map(messageID));
 
   const uniqueChatMessageInfoItemsMap = new Map<string, ChatMessageInfoItem>();
   for (const item of chatMessageInfos) {
     if (item.itemType !== 'message' || item.messageInfoType !== 'composable') {
       continue;
     }
     const id = messageID(item.messageInfo);
     if (idSet.has(id)) {
       uniqueChatMessageInfoItemsMap.set(id, item);
     }
   }
 
   const sortedChatMessageInfoItems: ChatMessageInfoItem[] = [];
   for (let i = 0; i < translatedSearchResults.length; i++) {
     const id = messageID(translatedSearchResults[i]);
     const match = uniqueChatMessageInfoItemsMap.get(id);
     if (match) {
       sortedChatMessageInfoItems.push(match);
     }
   }
   return sortedChatMessageInfoItems;
 }
 
 export {
   usePotentialMemberItems,
   notFriendNotice,
   useSearchMessages,
   useSearchUsers,
   filterChatMessageInfosForSearch,
   useForwardLookupSearchText,
 };
diff --git a/lib/shared/thread-utils.js b/lib/shared/thread-utils.js
index 79345618f..83f4c32d5 100644
--- a/lib/shared/thread-utils.js
+++ b/lib/shared/thread-utils.js
@@ -1,1873 +1,1873 @@
 // @flow
 
 import invariant from 'invariant';
 import _find from 'lodash/fp/find.js';
 import _mapValues from 'lodash/fp/mapValues.js';
 import _omitBy from 'lodash/fp/omitBy.js';
 import * as React from 'react';
 
 import { getUserAvatarForThread } from './avatar-utils.js';
 import { generatePendingThreadColor } from './color-utils.js';
 import { type ParserRules } from './markdown.js';
 import { extractUserMentionsFromText } from './mention-utils.js';
 import { getMessageTitle, isInvalidSidebarSource } from './message-utils.js';
 import { relationshipBlockedInEitherDirection } from './relationship-utils.js';
 import { useForwardLookupSearchText } from './search-utils.js';
 import threadWatcher from './thread-watcher.js';
 import {
   fetchMostRecentMessagesActionTypes,
   useFetchMostRecentMessages,
 } from '../actions/message-actions.js';
 import type { RemoveUsersFromThreadInput } from '../actions/thread-actions';
 import {
   newThreadActionTypes,
   removeUsersFromThreadActionTypes,
 } from '../actions/thread-actions.js';
 import { searchUsers as searchUserCall } from '../actions/user-actions.js';
 import ashoat from '../facts/ashoat.js';
 import genesis from '../facts/genesis.js';
 import { useLoggedInUserInfo } from '../hooks/account-hooks.js';
 import {
   hasPermission,
   permissionsToBitmaskHex,
   threadPermissionsFromBitmaskHex,
 } from '../permissions/minimally-encoded-thread-permissions.js';
 import {
   permissionLookup,
   getAllThreadPermissions,
   makePermissionsBlob,
 } from '../permissions/thread-permissions.js';
 import type {
   ChatThreadItem,
   ChatMessageInfoItem,
 } from '../selectors/chat-selectors.js';
 import { useGlobalThreadSearchIndex } from '../selectors/nav-selectors.js';
 import {
   threadInfoSelector,
   pendingToRealizedThreadIDsSelector,
   threadInfosSelectorForThreadType,
 } from '../selectors/thread-selectors.js';
 import {
   getRelativeMemberInfos,
   usersWithPersonalThreadSelector,
 } from '../selectors/user-selectors.js';
 import type { CalendarQuery } from '../types/entry-types.js';
 import { messageTypes } from '../types/message-types-enum.js';
 import {
   type RobotextMessageInfo,
   type ComposableMessageInfo,
 } from '../types/message-types.js';
 import type {
   MinimallyEncodedRawThreadInfo,
   MinimallyEncodedThreadCurrentUserInfo,
   MinimallyEncodedThreadInfo,
 } from '../types/minimally-encoded-thread-permissions-types.js';
 import {
   decodeMinimallyEncodedRoleInfo,
   minimallyEncodeRawThreadInfo,
   minimallyEncodeThreadInfo,
 } from '../types/minimally-encoded-thread-permissions-types.js';
 import { userRelationshipStatus } from '../types/relationship-types.js';
 import {
   threadPermissionPropagationPrefixes,
   threadPermissions,
   configurableCommunityPermissions,
   type ThreadPermission,
   type ThreadPermissionsInfo,
   type UserSurfacedPermission,
   threadPermissionFilterPrefixes,
 } from '../types/thread-permission-types.js';
 import {
   type ThreadType,
   threadTypes,
   threadTypeIsCommunityRoot,
   assertThreadType,
 } from '../types/thread-types-enum.js';
 import type {
   LegacyRawThreadInfo,
   LegacyThreadInfo,
   MemberInfo,
   ServerThreadInfo,
   ThreadCurrentUserInfo,
   RoleInfo,
   ServerMemberInfo,
   ClientNewThreadRequest,
   NewThreadResult,
   ChangeThreadSettingsPayload,
   UserProfileThreadInfo,
   RelativeMemberInfo,
   RawThreadInfo,
   ThreadInfo,
   RawThreadInfos,
 } from '../types/thread-types.js';
 import { updateTypes } from '../types/update-types-enum.js';
 import { type ClientUpdateInfo } from '../types/update-types.js';
 import type {
   GlobalAccountUserInfo,
   UserInfos,
   AccountUserInfo,
   LoggedInUserInfo,
   UserInfo,
 } from '../types/user-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from '../utils/action-utils.js';
-import type { DispatchActionPromise } from '../utils/action-utils.js';
+import { useServerCall } from '../utils/action-utils.js';
 import type { GetENSNames } from '../utils/ens-helpers.js';
 import {
   ET,
   entityTextToRawString,
   getEntityTextAsString,
   type ThreadEntity,
   type UserEntity,
 } from '../utils/entity-text.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 import { firstLine } from '../utils/string-utils.js';
 import { trimText } from '../utils/text-utils.js';
 import { pendingThreadIDRegex } from '../utils/validation-utils.js';
 
 function threadHasPermission(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
   permission: ThreadPermission,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   invariant(
     !permissionsDisabledByBlock.has(permission) || threadInfo?.uiName,
     `${permission} can be disabled by a block, but threadHasPermission can't ` +
       'check for a block on RawThreadInfo. Please pass in ThreadInfo instead!',
   );
   if (threadInfo.minimallyEncoded) {
     return hasPermission(threadInfo.currentUser.permissions, permission);
   }
   return permissionLookup(threadInfo.currentUser.permissions, permission);
 }
 
 function viewerIsMember(threadInfo: ?(RawThreadInfo | ThreadInfo)): boolean {
   return !!(
     threadInfo &&
     threadInfo.currentUser.role !== null &&
     threadInfo.currentUser.role !== undefined
   );
 }
 
 function threadIsInHome(threadInfo: ?(RawThreadInfo | ThreadInfo)): boolean {
   return !!(threadInfo && threadInfo.currentUser.subscription.home);
 }
 
 // Can have messages
 function threadInChatList(threadInfo: ?(RawThreadInfo | ThreadInfo)): boolean {
   return (
     viewerIsMember(threadInfo) &&
     threadHasPermission(threadInfo, threadPermissions.VISIBLE)
   );
 }
 
 function threadIsTopLevel(threadInfo: ?(RawThreadInfo | ThreadInfo)): boolean {
   return threadInChatList(threadInfo) && threadIsChannel(threadInfo);
 }
 
 function threadIsChannel(threadInfo: ?(RawThreadInfo | ThreadInfo)): boolean {
   return !!(threadInfo && threadInfo.type !== threadTypes.SIDEBAR);
 }
 
 function threadIsSidebar(threadInfo: ?(RawThreadInfo | ThreadInfo)): boolean {
   return threadInfo?.type === threadTypes.SIDEBAR;
 }
 
 function threadInBackgroundChatList(
   threadInfo: ?(RawThreadInfo | ThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && !threadIsInHome(threadInfo);
 }
 
 function threadInHomeChatList(
   threadInfo: ?(RawThreadInfo | ThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && threadIsInHome(threadInfo);
 }
 
 // Can have Calendar entries,
 // does appear as a top-level entity in the thread list
 function threadInFilterList(
   threadInfo: ?(RawThreadInfo | ThreadInfo),
 ): boolean {
   return (
     threadInChatList(threadInfo) &&
     !!threadInfo &&
     threadInfo.type !== threadTypes.SIDEBAR
   );
 }
 
 function userIsMember(
   threadInfo: ?(RawThreadInfo | ThreadInfo),
   userID: string,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   if (threadInfo.id === genesis.id) {
     return true;
   }
   return threadInfo.members.some(member => member.id === userID && member.role);
 }
 
 function threadActualMembers(
   memberInfos: $ReadOnlyArray<MemberInfo | RelativeMemberInfo>,
 ): $ReadOnlyArray<string> {
   return memberInfos
     .filter(memberInfo => memberInfo.role)
     .map(memberInfo => memberInfo.id);
 }
 
 function threadOtherMembers<T: MemberInfo | RelativeMemberInfo>(
   memberInfos: $ReadOnlyArray<T>,
   viewerID: ?string,
 ): $ReadOnlyArray<T> {
   return memberInfos.filter(
     memberInfo => memberInfo.role && memberInfo.id !== viewerID,
   );
 }
 
 function threadMembersWithoutAddedAshoat<T: RawThreadInfo | ThreadInfo>(
   threadInfo: T,
 ): $PropertyType<T, 'members'> {
   if (threadInfo.community !== genesis.id) {
     return threadInfo.members;
   }
   return threadInfo.members.filter(
     member => member.id !== ashoat.id || member.role,
   );
 }
 
 function threadIsGroupChat(threadInfo: ThreadInfo): boolean {
   return threadInfo.members.length > 2;
 }
 
 function threadOrParentThreadIsGroupChat(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return threadMembersWithoutAddedAshoat(threadInfo).length > 2;
 }
 
 function threadIsPending(threadID: ?string): boolean {
   return !!threadID?.startsWith('pending');
 }
 
 function threadIsPendingSidebar(threadID: ?string): boolean {
   return !!threadID?.startsWith('pending/sidebar/');
 }
 
 function getSingleOtherUser(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
 ): ?string {
   if (!viewerID) {
     return undefined;
   }
   const otherMembers = threadOtherMembers(threadInfo.members, viewerID);
   if (otherMembers.length !== 1) {
     return undefined;
   }
   return otherMembers[0].id;
 }
 
 function getPendingThreadID(
   threadType: ThreadType,
   memberIDs: $ReadOnlyArray<string>,
   sourceMessageID: ?string,
 ): string {
   const pendingThreadKey = sourceMessageID
     ? `sidebar/${sourceMessageID}`
     : [...memberIDs].sort().join('+');
   const pendingThreadTypeString = sourceMessageID ? '' : `type${threadType}/`;
   return `pending/${pendingThreadTypeString}${pendingThreadKey}`;
 }
 
 type PendingThreadIDContents = {
   +threadType: ThreadType,
   +memberIDs: $ReadOnlyArray<string>,
   +sourceMessageID: ?string,
 };
 
 function parsePendingThreadID(
   pendingThreadID: string,
 ): ?PendingThreadIDContents {
   const pendingRegex = new RegExp(`^${pendingThreadIDRegex}$`);
   const pendingThreadIDMatches = pendingRegex.exec(pendingThreadID);
   if (!pendingThreadIDMatches) {
     return null;
   }
   const [threadTypeString, threadKey] = pendingThreadIDMatches[1].split('/');
   const threadType =
     threadTypeString === 'sidebar'
       ? threadTypes.SIDEBAR
       : assertThreadType(Number(threadTypeString.replace('type', '')));
   const memberIDs = threadTypeString === 'sidebar' ? [] : threadKey.split('+');
   const sourceMessageID = threadTypeString === 'sidebar' ? threadKey : null;
   return {
     threadType,
     memberIDs,
     sourceMessageID,
   };
 }
 
 type UserIDAndUsername = {
   +id: string,
   +username: string,
   ...
 };
 type CreatePendingThreadArgs = {
   +viewerID: string,
   +threadType: ThreadType,
   +members: $ReadOnlyArray<UserIDAndUsername>,
   +parentThreadInfo?: ?ThreadInfo,
   +threadColor?: ?string,
   +name?: ?string,
   +sourceMessageID?: string,
 };
 
 function createPendingThread({
   viewerID,
   threadType,
   members,
   parentThreadInfo,
   threadColor,
   name,
   sourceMessageID,
 }: CreatePendingThreadArgs): MinimallyEncodedThreadInfo {
   const now = Date.now();
   if (!members.some(member => member.id === viewerID)) {
     throw new Error(
       'createPendingThread should be called with the viewer as a member',
     );
   }
 
   const memberIDs = members.map(member => member.id);
   const threadID = getPendingThreadID(threadType, memberIDs, sourceMessageID);
 
   const permissions = {
     [threadPermissions.KNOW_OF]: true,
     [threadPermissions.VISIBLE]: true,
     [threadPermissions.VOICED]: true,
   };
 
   const membershipPermissions = getAllThreadPermissions(
     makePermissionsBlob(permissions, null, threadID, threadType),
     threadID,
   );
   const role = {
     id: `${threadID}/role`,
     name: 'Members',
     permissions,
     isDefault: true,
   };
 
   const rawThreadInfo = {
     id: threadID,
     type: threadType,
     name: name ?? null,
     description: null,
     color: threadColor ?? generatePendingThreadColor(memberIDs),
     creationTime: now,
     parentThreadID: parentThreadInfo?.id ?? null,
     containingThreadID: getContainingThreadID(parentThreadInfo, threadType),
     community: getCommunity(parentThreadInfo),
     members: members.map(member => ({
       id: member.id,
       role: role.id,
       permissions: membershipPermissions,
       isSender: false,
     })),
     roles: {
       [role.id]: role,
     },
     currentUser: {
       role: role.id,
       permissions: membershipPermissions,
       subscription: {
         pushNotifs: false,
         home: false,
       },
       unread: false,
     },
     repliesCount: 0,
     sourceMessageID,
     pinnedCount: 0,
   };
 
   const userInfos: { [string]: UserInfo } = {};
   for (const member of members) {
     const { id, username } = member;
     userInfos[id] = { id, username };
   }
 
   return threadInfoFromRawThreadInfo(rawThreadInfo, viewerID, userInfos);
 }
 
 type PendingPersonalThread = {
   +threadInfo: ThreadInfo,
   +pendingPersonalThreadUserInfo: UserInfo,
 };
 
 function createPendingPersonalThread(
   loggedInUserInfo: LoggedInUserInfo,
   userID: string,
   username: string,
 ): PendingPersonalThread {
   const pendingPersonalThreadUserInfo = {
     id: userID,
     username: username,
   };
 
   const threadInfo = createPendingThread({
     viewerID: loggedInUserInfo.id,
     threadType: threadTypes.PERSONAL,
     members: [loggedInUserInfo, pendingPersonalThreadUserInfo],
   });
 
   return { threadInfo, pendingPersonalThreadUserInfo };
 }
 
 function createPendingThreadItem(
   loggedInUserInfo: LoggedInUserInfo,
   user: UserIDAndUsername,
 ): ChatThreadItem {
   const { threadInfo, pendingPersonalThreadUserInfo } =
     createPendingPersonalThread(loggedInUserInfo, user.id, user.username);
 
   return {
     type: 'chatThreadItem',
     threadInfo,
     mostRecentMessageInfo: null,
     mostRecentNonLocalMessage: null,
     lastUpdatedTime: threadInfo.creationTime,
     lastUpdatedTimeIncludingSidebars: threadInfo.creationTime,
     sidebars: [],
     pendingPersonalThreadUserInfo,
   };
 }
 
 // Returns map from lowercase username to AccountUserInfo
 function memberLowercaseUsernameMap(
   members: $ReadOnlyArray<RelativeMemberInfo>,
 ): Map<string, AccountUserInfo> {
   const memberMap = new Map<string, AccountUserInfo>();
   for (const member of members) {
     const { id, role, username } = member;
     if (!role || !username) {
       continue;
     }
     memberMap.set(username.toLowerCase(), { id, username });
   }
   return memberMap;
 }
 
 // Returns map from user ID to AccountUserInfo
 function extractMentionedMembers(
   text: string,
   threadInfo: ThreadInfo,
 ): Map<string, AccountUserInfo> {
   const memberMap = memberLowercaseUsernameMap(threadInfo.members);
   const mentions = extractUserMentionsFromText(text);
 
   const mentionedMembers = new Map<string, AccountUserInfo>();
   for (const mention of mentions) {
     const userInfo = memberMap.get(mention.toLowerCase());
     if (userInfo) {
       mentionedMembers.set(userInfo.id, userInfo);
     }
   }
   return mentionedMembers;
 }
 
 // When a member of the parent is mentioned in a sidebar,
 // they will be automatically added to that sidebar
 function extractNewMentionedParentMembers(
   messageText: string,
   threadInfo: ThreadInfo,
   parentThreadInfo: ThreadInfo,
 ): AccountUserInfo[] {
   const mentionedMembersOfParent = extractMentionedMembers(
     messageText,
     parentThreadInfo,
   );
   for (const member of threadInfo.members) {
     if (member.role) {
       mentionedMembersOfParent.delete(member.id);
     }
   }
   return [...mentionedMembersOfParent.values()];
 }
 
 type SharedCreatePendingSidebarInput = {
   +sourceMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
   +parentThreadInfo: ThreadInfo,
   +loggedInUserInfo: LoggedInUserInfo,
 };
 
 type BaseCreatePendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +messageTitle: string,
 };
 function baseCreatePendingSidebar(
   input: BaseCreatePendingSidebarInput,
 ): MinimallyEncodedThreadInfo {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     messageTitle,
   } = input;
   const { color, type: parentThreadType } = parentThreadInfo;
   const threadName = trimText(messageTitle, 30);
 
   const initialMembers = new Map<string, UserIDAndUsername>();
 
   const { id: viewerID, username: viewerUsername } = loggedInUserInfo;
   initialMembers.set(viewerID, { id: viewerID, username: viewerUsername });
 
   if (userIsMember(parentThreadInfo, sourceMessageInfo.creator.id)) {
     const { id: sourceAuthorID, username: sourceAuthorUsername } =
       sourceMessageInfo.creator;
     invariant(
       sourceAuthorUsername,
       'sourceAuthorUsername should be set in createPendingSidebar',
     );
     const initialMemberUserInfo = {
       id: sourceAuthorID,
       username: sourceAuthorUsername,
     };
     initialMembers.set(sourceAuthorID, initialMemberUserInfo);
   }
 
   const singleOtherUser = getSingleOtherUser(parentThreadInfo, viewerID);
   if (parentThreadType === threadTypes.PERSONAL && singleOtherUser) {
     const singleOtherUsername = parentThreadInfo.members.find(
       member => member.id === singleOtherUser,
     )?.username;
     invariant(
       singleOtherUsername,
       'singleOtherUsername should be set in createPendingSidebar',
     );
     const singleOtherUserInfo = {
       id: singleOtherUser,
       username: singleOtherUsername,
     };
     initialMembers.set(singleOtherUser, singleOtherUserInfo);
   }
 
   if (sourceMessageInfo.type === messageTypes.TEXT) {
     const mentionedMembersOfParent = extractMentionedMembers(
       sourceMessageInfo.text,
       parentThreadInfo,
     );
     for (const [memberID, member] of mentionedMembersOfParent) {
       initialMembers.set(memberID, member);
     }
   }
 
   return createPendingThread({
     viewerID,
     threadType: threadTypes.SIDEBAR,
     members: [...initialMembers.values()],
     parentThreadInfo,
     threadColor: color,
     name: threadName,
     sourceMessageID: sourceMessageInfo.id,
   });
 }
 
 // The message title here may have ETH addresses that aren't resolved to ENS
 // names. This function should only be used in cases where we're sure that we
 // don't care about the thread title. We should prefer createPendingSidebar
 // wherever possible
 type CreateUnresolvedPendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +markdownRules: ParserRules,
 };
 function createUnresolvedPendingSidebar(
   input: CreateUnresolvedPendingSidebarInput,
 ): MinimallyEncodedThreadInfo {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     markdownRules,
   } = input;
 
   const messageTitleEntityText = getMessageTitle(
     sourceMessageInfo,
     parentThreadInfo,
     parentThreadInfo,
     markdownRules,
   );
   const messageTitle = entityTextToRawString(messageTitleEntityText, {
     ignoreViewer: true,
   });
 
   return baseCreatePendingSidebar({
     sourceMessageInfo,
     parentThreadInfo,
     messageTitle,
     loggedInUserInfo,
   });
 }
 
 type CreatePendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +markdownRules: ParserRules,
   +getENSNames: ?GetENSNames,
 };
 async function createPendingSidebar(
   input: CreatePendingSidebarInput,
 ): Promise<MinimallyEncodedThreadInfo> {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     markdownRules,
     getENSNames,
   } = input;
 
   const messageTitleEntityText = getMessageTitle(
     sourceMessageInfo,
     parentThreadInfo,
     parentThreadInfo,
     markdownRules,
   );
   const messageTitle = await getEntityTextAsString(
     messageTitleEntityText,
     getENSNames,
     { ignoreViewer: true },
   );
   invariant(
     messageTitle !== null && messageTitle !== undefined,
     'getEntityTextAsString only returns falsey when passed falsey',
   );
 
   return baseCreatePendingSidebar({
     sourceMessageInfo,
     parentThreadInfo,
     messageTitle,
     loggedInUserInfo,
   });
 }
 
 function pendingThreadType(numberOfOtherMembers: number): 4 | 6 | 7 {
   if (numberOfOtherMembers === 0) {
     return threadTypes.PRIVATE;
   } else if (numberOfOtherMembers === 1) {
     return threadTypes.PERSONAL;
   } else {
     return threadTypes.LOCAL;
   }
 }
 
 function threadTypeCanBePending(threadType: ThreadType): boolean {
   return (
     threadType === threadTypes.PERSONAL ||
     threadType === threadTypes.LOCAL ||
     threadType === threadTypes.SIDEBAR ||
     threadType === threadTypes.PRIVATE
   );
 }
 
 type CreateRealThreadParameters = {
   +threadInfo: ThreadInfo,
   +dispatchActionPromise: DispatchActionPromise,
   +createNewThread: ClientNewThreadRequest => Promise<NewThreadResult>,
   +sourceMessageID: ?string,
   +viewerID: ?string,
   +handleError?: () => mixed,
   +calendarQuery: CalendarQuery,
 };
 async function createRealThreadFromPendingThread({
   threadInfo,
   dispatchActionPromise,
   createNewThread,
   sourceMessageID,
   viewerID,
   calendarQuery,
 }: CreateRealThreadParameters): Promise<string> {
   if (!threadIsPending(threadInfo.id)) {
     return threadInfo.id;
   }
 
   const otherMemberIDs = threadOtherMembers(threadInfo.members, viewerID).map(
     member => member.id,
   );
   let resultPromise;
   if (threadInfo.type !== threadTypes.SIDEBAR) {
     invariant(
       otherMemberIDs.length > 0,
       'otherMemberIDs should not be empty for threads',
     );
     resultPromise = createNewThread({
       type: pendingThreadType(otherMemberIDs.length),
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
       calendarQuery,
     });
   } else {
     invariant(
       sourceMessageID,
       'sourceMessageID should be set when creating a sidebar',
     );
     resultPromise = createNewThread({
       type: threadTypes.SIDEBAR,
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
       sourceMessageID,
       parentThreadID: threadInfo.parentThreadID,
       name: threadInfo.name,
       calendarQuery,
     });
   }
   void dispatchActionPromise(newThreadActionTypes, resultPromise);
   const { newThreadID } = await resultPromise;
   return newThreadID;
 }
 
 type RawThreadInfoOptions = {
   +filterThreadEditAvatarPermission?: boolean,
   +excludePinInfo?: boolean,
   +filterManageInviteLinksPermission?: boolean,
   +filterVoicedInAnnouncementChannelsPermission?: boolean,
   +minimallyEncodePermissions?: boolean,
 };
 function rawThreadInfoFromServerThreadInfo(
   serverThreadInfo: ServerThreadInfo,
   viewerID: string,
   options?: RawThreadInfoOptions,
 ): ?RawThreadInfo {
   const filterThreadEditAvatarPermission =
     options?.filterThreadEditAvatarPermission;
   const excludePinInfo = options?.excludePinInfo;
   const filterManageInviteLinksPermission =
     options?.filterManageInviteLinksPermission;
   const filterVoicedInAnnouncementChannelsPermission =
     options?.filterVoicedInAnnouncementChannelsPermission;
   const shouldMinimallyEncodePermissions = options?.minimallyEncodePermissions;
 
   const filterThreadPermissions = _omitBy(
     (v, k) =>
       (filterThreadEditAvatarPermission &&
         [
           threadPermissions.EDIT_THREAD_AVATAR,
           threadPermissionPropagationPrefixes.DESCENDANT +
             threadPermissions.EDIT_THREAD_AVATAR,
         ].includes(k)) ||
       (excludePinInfo &&
         [
           threadPermissions.MANAGE_PINS,
           threadPermissionPropagationPrefixes.DESCENDANT +
             threadPermissions.MANAGE_PINS,
         ].includes(k)) ||
       (filterManageInviteLinksPermission &&
         [threadPermissions.MANAGE_INVITE_LINKS].includes(k)) ||
       (filterVoicedInAnnouncementChannelsPermission &&
         [
           threadPermissions.VOICED_IN_ANNOUNCEMENT_CHANNELS,
           threadPermissionPropagationPrefixes.DESCENDANT +
             threadPermissionFilterPrefixes.TOP_LEVEL +
             threadPermissions.VOICED_IN_ANNOUNCEMENT_CHANNELS,
         ].includes(k)),
   );
 
   const members = [];
   let currentUser;
   for (const serverMember of serverThreadInfo.members) {
     if (
       serverThreadInfo.id === genesis.id &&
       serverMember.id !== viewerID &&
       serverMember.id !== ashoat.id
     ) {
       continue;
     }
 
     const memberPermissions = filterThreadPermissions(serverMember.permissions);
 
     members.push({
       id: serverMember.id,
       role: serverMember.role,
       permissions: memberPermissions,
       isSender: serverMember.isSender,
     });
     if (serverMember.id === viewerID) {
       currentUser = {
         role: serverMember.role,
         permissions: memberPermissions,
         subscription: serverMember.subscription,
         unread: serverMember.unread,
       };
     }
   }
 
   let currentUserPermissions;
   if (currentUser) {
     currentUserPermissions = currentUser.permissions;
   } else {
     currentUserPermissions = filterThreadPermissions(
       getAllThreadPermissions(null, serverThreadInfo.id),
     );
     currentUser = {
       role: null,
       permissions: currentUserPermissions,
       subscription: {
         home: false,
         pushNotifs: false,
       },
       unread: null,
     };
   }
   if (!permissionLookup(currentUserPermissions, threadPermissions.KNOW_OF)) {
     return null;
   }
 
   const rolesWithFilteredThreadPermissions = _mapValues(role => ({
     ...role,
     permissions: filterThreadPermissions(role.permissions),
   }))(serverThreadInfo.roles);
 
   let rawThreadInfo: any = {
     id: serverThreadInfo.id,
     type: serverThreadInfo.type,
     name: serverThreadInfo.name,
     description: serverThreadInfo.description,
     color: serverThreadInfo.color,
     creationTime: serverThreadInfo.creationTime,
     parentThreadID: serverThreadInfo.parentThreadID,
     members,
     roles: rolesWithFilteredThreadPermissions,
     currentUser,
     repliesCount: serverThreadInfo.repliesCount,
     containingThreadID: serverThreadInfo.containingThreadID,
     community: serverThreadInfo.community,
   };
   const sourceMessageID = serverThreadInfo.sourceMessageID;
   if (sourceMessageID) {
     rawThreadInfo = { ...rawThreadInfo, sourceMessageID };
   }
   if (serverThreadInfo.avatar) {
     rawThreadInfo = { ...rawThreadInfo, avatar: serverThreadInfo.avatar };
   }
   if (!excludePinInfo) {
     rawThreadInfo = {
       ...rawThreadInfo,
       pinnedCount: serverThreadInfo.pinnedCount,
     };
   }
   return shouldMinimallyEncodePermissions
     ? minimallyEncodeRawThreadInfo(rawThreadInfo)
     : rawThreadInfo;
 }
 
 function threadUIName(threadInfo: ThreadInfo): string | ThreadEntity {
   if (threadInfo.name) {
     return firstLine(threadInfo.name);
   }
 
   let threadMembers: $ReadOnlyArray<RelativeMemberInfo>;
   let memberEntities: $ReadOnlyArray<UserEntity>;
   // Branching below is to appease flow
   if (threadInfo.minimallyEncoded) {
     threadMembers = threadInfo.members.filter(memberInfo => memberInfo.role);
     memberEntities = threadMembers.map(member => ET.user({ userInfo: member }));
   } else {
     threadMembers = threadInfo.members.filter(memberInfo => memberInfo.role);
     memberEntities = threadMembers.map(member => ET.user({ userInfo: member }));
   }
 
   return {
     type: 'thread',
     id: threadInfo.id,
     name: threadInfo.name,
     display: 'uiName',
     uiName: memberEntities,
     ifJustViewer:
       threadInfo.type === threadTypes.PRIVATE
         ? 'viewer_username'
         : 'just_you_string',
   };
 }
 
 function threadInfoFromRawThreadInfo(
   rawThreadInfo: RawThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): MinimallyEncodedThreadInfo {
   let threadInfo: ThreadInfo;
   if (rawThreadInfo.minimallyEncoded) {
     threadInfo = {
       minimallyEncoded: true,
       id: rawThreadInfo.id,
       type: rawThreadInfo.type,
       name: rawThreadInfo.name,
       uiName: '',
       description: rawThreadInfo.description,
       color: rawThreadInfo.color,
       creationTime: rawThreadInfo.creationTime,
       parentThreadID: rawThreadInfo.parentThreadID,
       containingThreadID: rawThreadInfo.containingThreadID,
       community: rawThreadInfo.community,
       members: getRelativeMemberInfos(rawThreadInfo, viewerID, userInfos),
       roles: rawThreadInfo.roles,
       currentUser: getMinimallyEncodedCurrentUser(
         rawThreadInfo,
         viewerID,
         userInfos,
       ),
       repliesCount: rawThreadInfo.repliesCount,
     };
   } else {
     threadInfo = {
       id: rawThreadInfo.id,
       type: rawThreadInfo.type,
       name: rawThreadInfo.name,
       uiName: '',
       description: rawThreadInfo.description,
       color: rawThreadInfo.color,
       creationTime: rawThreadInfo.creationTime,
       parentThreadID: rawThreadInfo.parentThreadID,
       containingThreadID: rawThreadInfo.containingThreadID,
       community: rawThreadInfo.community,
       members: getRelativeMemberInfos(rawThreadInfo, viewerID, userInfos),
       roles: rawThreadInfo.roles,
       currentUser: getCurrentUser(rawThreadInfo, viewerID, userInfos),
       repliesCount: rawThreadInfo.repliesCount,
     };
     threadInfo = minimallyEncodeThreadInfo(threadInfo);
   }
 
   threadInfo = {
     ...threadInfo,
     uiName: threadUIName(threadInfo),
   };
   const { sourceMessageID, avatar, pinnedCount } = rawThreadInfo;
   if (sourceMessageID) {
     threadInfo = { ...threadInfo, sourceMessageID };
   }
 
   if (avatar) {
     threadInfo = { ...threadInfo, avatar };
   } else if (
     rawThreadInfo.type === threadTypes.PERSONAL ||
     rawThreadInfo.type === threadTypes.PRIVATE
   ) {
     threadInfo = {
       ...threadInfo,
       avatar: getUserAvatarForThread(rawThreadInfo, viewerID, userInfos),
     };
   }
 
   if (pinnedCount) {
     threadInfo = { ...threadInfo, pinnedCount };
   }
   return threadInfo;
 }
 
 function getCurrentUser(
   threadInfo: LegacyRawThreadInfo | LegacyThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadCurrentUserInfo {
   if (!threadFrozenDueToBlock(threadInfo, viewerID, userInfos)) {
     return threadInfo.currentUser;
   }
 
   return {
     ...threadInfo.currentUser,
     permissions: {
       ...threadInfo.currentUser.permissions,
       ...disabledPermissions,
     },
   };
 }
 
 function getMinimallyEncodedCurrentUser(
   threadInfo: MinimallyEncodedRawThreadInfo | MinimallyEncodedThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): MinimallyEncodedThreadCurrentUserInfo {
   if (!threadFrozenDueToBlock(threadInfo, viewerID, userInfos)) {
     return threadInfo.currentUser;
   }
   const decodedPermissions = threadPermissionsFromBitmaskHex(
     threadInfo.currentUser.permissions,
   );
   const updatedPermissions = {
     ...decodedPermissions,
     ...disabledPermissions,
   };
   const encodedUpdatedPermissions = permissionsToBitmaskHex(updatedPermissions);
   return {
     ...threadInfo.currentUser,
     permissions: encodedUpdatedPermissions,
   };
 }
 
 function threadIsWithBlockedUserOnly(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
   checkOnlyViewerBlock?: boolean,
 ): boolean {
   if (
     threadOrParentThreadIsGroupChat(threadInfo) ||
     threadOrParentThreadHasAdminRole(threadInfo)
   ) {
     return false;
   }
 
   const otherUserID = getSingleOtherUser(threadInfo, viewerID);
   if (!otherUserID) {
     return false;
   }
   const otherUserRelationshipStatus =
     userInfos[otherUserID]?.relationshipStatus;
 
   if (checkOnlyViewerBlock) {
     return (
       otherUserRelationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER
     );
   }
 
   return (
     !!otherUserRelationshipStatus &&
     relationshipBlockedInEitherDirection(otherUserRelationshipStatus)
   );
 }
 
 function threadFrozenDueToBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos);
 }
 
 function threadFrozenDueToViewerBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos, true);
 }
 
 const threadTypeDescriptions: { [ThreadType]: string } = {
   [threadTypes.COMMUNITY_OPEN_SUBTHREAD]:
     'Anybody in the parent channel can see an open subchannel.',
   [threadTypes.COMMUNITY_SECRET_SUBTHREAD]:
     'Only visible to its members and admins of ancestor channels.',
 };
 
 function memberIsAdmin(
   memberInfo: RelativeMemberInfo | MemberInfo,
   threadInfo: RawThreadInfo | ThreadInfo,
 ): boolean {
   return !!(
     memberInfo.role && roleIsAdminRole(threadInfo.roles[memberInfo.role])
   );
 }
 
 // Since we don't have access to all of the ancestor ThreadInfos, we approximate
 // "parent admin" as anybody with CHANGE_ROLE permissions.
 function memberHasAdminPowers(
   memberInfo: RelativeMemberInfo | MemberInfo | ServerMemberInfo,
 ): boolean {
   if (memberInfo.minimallyEncoded) {
     return hasPermission(memberInfo.permissions, threadPermissions.CHANGE_ROLE);
   }
   return !!memberInfo.permissions[threadPermissions.CHANGE_ROLE]?.value;
 }
 
 function roleIsAdminRole(roleInfo: ?RoleInfo): boolean {
   return !!(roleInfo && !roleInfo.isDefault && roleInfo.name === 'Admins');
 }
 
 function threadHasAdminRole(
   threadInfo: ?(RawThreadInfo | ThreadInfo | ServerThreadInfo),
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   return !!_find({ name: 'Admins' })(threadInfo.roles);
 }
 
 function threadOrParentThreadHasAdminRole(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return (
     threadMembersWithoutAddedAshoat(threadInfo).filter(member =>
       memberHasAdminPowers(member),
     ).length > 0
   );
 }
 
 function identifyInvalidatedThreads(
   updateInfos: $ReadOnlyArray<ClientUpdateInfo>,
 ): Set<string> {
   const invalidated = new Set<string>();
   for (const updateInfo of updateInfos) {
     if (updateInfo.type === updateTypes.DELETE_THREAD) {
       invalidated.add(updateInfo.threadID);
     }
   }
   return invalidated;
 }
 
 const permissionsDisabledByBlockArray = [
   threadPermissions.VOICED,
   threadPermissions.EDIT_ENTRIES,
   threadPermissions.EDIT_THREAD_NAME,
   threadPermissions.EDIT_THREAD_COLOR,
   threadPermissions.EDIT_THREAD_DESCRIPTION,
   threadPermissions.CREATE_SUBCHANNELS,
   threadPermissions.CREATE_SIDEBARS,
   threadPermissions.JOIN_THREAD,
   threadPermissions.EDIT_PERMISSIONS,
   threadPermissions.ADD_MEMBERS,
   threadPermissions.REMOVE_MEMBERS,
 ];
 
 const permissionsDisabledByBlock: Set<ThreadPermission> = new Set(
   permissionsDisabledByBlockArray,
 );
 
 const disabledPermissions: ThreadPermissionsInfo =
   permissionsDisabledByBlockArray.reduce(
     (permissions: ThreadPermissionsInfo, permission: string) => ({
       ...permissions,
       [permission]: { value: false, source: null },
     }),
     {},
   );
 
 // Consider updating itemHeight in native/chat/chat-thread-list.react.js
 // if you change this
 const emptyItemText: string =
   `Background chats are just like normal chats, except they don't ` +
   `contribute to your unread count.\n\n` +
   `To move a chat over here, switch the “Background” option in its settings.`;
 
 function threadNoun(threadType: ThreadType, parentThreadID: ?string): string {
   if (threadType === threadTypes.SIDEBAR) {
     return 'thread';
   } else if (
     threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD &&
     parentThreadID === genesis.id
   ) {
     return 'chat';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.GENESIS
   ) {
     return 'channel';
   } else {
     return 'chat';
   }
 }
 
 function threadLabel(threadType: ThreadType): string {
   if (
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD
   ) {
     return 'Open';
   } else if (threadType === threadTypes.PERSONAL) {
     return 'Personal';
   } else if (threadType === threadTypes.SIDEBAR) {
     return 'Thread';
   } else if (threadType === threadTypes.PRIVATE) {
     return 'Private';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.GENESIS
   ) {
     return 'Community';
   } else {
     return 'Secret';
   }
 }
 
 function useWatchThread(threadInfo: ?ThreadInfo) {
   const dispatchActionPromise = useDispatchActionPromise();
   const callFetchMostRecentMessages = useFetchMostRecentMessages();
 
   const threadID = threadInfo?.id;
   const threadNotInChatList = !threadInChatList(threadInfo);
   React.useEffect(() => {
     if (threadID && threadNotInChatList) {
       threadWatcher.watchID(threadID);
       void dispatchActionPromise(
         fetchMostRecentMessagesActionTypes,
         callFetchMostRecentMessages({ threadID }),
       );
     }
     return () => {
       if (threadID && threadNotInChatList) {
         threadWatcher.removeID(threadID);
       }
     };
   }, [
     callFetchMostRecentMessages,
     dispatchActionPromise,
     threadNotInChatList,
     threadID,
   ]);
 }
 
 type ExistingThreadInfoFinderParams = {
   +searching: boolean,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
 };
 type ExistingThreadInfoFinder = (
   params: ExistingThreadInfoFinderParams,
 ) => ?ThreadInfo;
 // TODO (atul): Parameterize function once `createPendingThread` is updated.
 function useExistingThreadInfoFinder(
   baseThreadInfo: ?ThreadInfo,
 ): ExistingThreadInfoFinder {
   const threadInfos = useSelector(threadInfoSelector);
   const loggedInUserInfo = useLoggedInUserInfo();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const pendingToRealizedThreadIDs = useSelector(state =>
     pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
   );
   return React.useCallback(
     (params: ExistingThreadInfoFinderParams): ?ThreadInfo => {
       if (!baseThreadInfo) {
         return null;
       }
 
       const realizedThreadInfo = threadInfos[baseThreadInfo.id];
       if (realizedThreadInfo) {
         return realizedThreadInfo;
       }
 
       if (!loggedInUserInfo || !threadIsPending(baseThreadInfo.id)) {
         return baseThreadInfo;
       }
       const viewerID = loggedInUserInfo?.id;
 
       invariant(
         threadTypeCanBePending(baseThreadInfo.type),
         `ThreadInfo has pending ID ${baseThreadInfo.id}, but type that ` +
           `should not be pending ${baseThreadInfo.type}`,
       );
 
       const { searching, userInfoInputArray } = params;
 
       const { sourceMessageID } = baseThreadInfo;
       const pendingThreadID = searching
         ? getPendingThreadID(
             pendingThreadType(userInfoInputArray.length),
             [...userInfoInputArray.map(user => user.id), viewerID],
             sourceMessageID,
           )
         : getPendingThreadID(
             baseThreadInfo.type,
             baseThreadInfo.members.map(member => member.id),
             sourceMessageID,
           );
 
       const realizedThreadID = pendingToRealizedThreadIDs.get(pendingThreadID);
       if (realizedThreadID && threadInfos[realizedThreadID]) {
         return threadInfos[realizedThreadID];
       }
 
       const updatedThread = searching
         ? createPendingThread({
             viewerID,
             threadType: pendingThreadType(userInfoInputArray.length),
             members: [loggedInUserInfo, ...userInfoInputArray],
           })
         : baseThreadInfo;
 
       if (updatedThread.minimallyEncoded) {
         return {
           ...updatedThread,
           currentUser: getMinimallyEncodedCurrentUser(
             updatedThread,
             viewerID,
             userInfos,
           ),
         };
       } else {
         return {
           ...updatedThread,
           currentUser: getCurrentUser(updatedThread, viewerID, userInfos),
         };
       }
     },
     [
       baseThreadInfo,
       threadInfos,
       loggedInUserInfo,
       pendingToRealizedThreadIDs,
       userInfos,
     ],
   );
 }
 
 type ThreadTypeParentRequirement = 'optional' | 'required' | 'disabled';
 function getThreadTypeParentRequirement(
   threadType: ThreadType,
 ): ThreadTypeParentRequirement {
   if (
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD ||
     //threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.SIDEBAR
   ) {
     return 'required';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.GENESIS ||
     threadType === threadTypes.PERSONAL ||
     threadType === threadTypes.PRIVATE
   ) {
     return 'disabled';
   } else {
     return 'optional';
   }
 }
 
 function threadMemberHasPermission(
   threadInfo: ServerThreadInfo | RawThreadInfo | ThreadInfo,
   memberID: string,
   permission: ThreadPermission,
 ): boolean {
   for (const member of threadInfo.members) {
     if (member.id !== memberID) {
       continue;
     }
     if (member.minimallyEncoded) {
       return hasPermission(member.permissions, permission);
     }
     return permissionLookup(member.permissions, permission);
   }
   return false;
 }
 
 function useCanCreateSidebarFromMessage(
   threadInfo: ThreadInfo,
   messageInfo: ComposableMessageInfo | RobotextMessageInfo,
 ): boolean {
   const messageCreatorUserInfo = useSelector(
     state => state.userStore.userInfos[messageInfo.creator.id],
   );
 
   if (
     !messageInfo.id ||
     threadInfo.sourceMessageID === messageInfo.id ||
     isInvalidSidebarSource(messageInfo)
   ) {
     return false;
   }
 
   const messageCreatorRelationship = messageCreatorUserInfo?.relationshipStatus;
   const creatorRelationshipHasBlock =
     messageCreatorRelationship &&
     relationshipBlockedInEitherDirection(messageCreatorRelationship);
 
   const hasCreateSidebarsPermission = threadHasPermission(
     threadInfo,
     threadPermissions.CREATE_SIDEBARS,
   );
 
   return hasCreateSidebarsPermission && !creatorRelationshipHasBlock;
 }
 
 function useSidebarExistsOrCanBeCreated(
   threadInfo: ThreadInfo,
   messageItem: ChatMessageInfoItem,
 ): boolean {
   const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage(
     threadInfo,
     messageItem.messageInfo,
   );
   return !!messageItem.threadCreatedFromMessage || canCreateSidebarFromMessage;
 }
 
 function checkIfDefaultMembersAreVoiced(threadInfo: ThreadInfo): boolean {
   const defaultRoleID = Object.keys(threadInfo.roles).find(
     roleID => threadInfo.roles[roleID].isDefault,
   );
   invariant(
     defaultRoleID !== undefined,
     'all threads should have a default role',
   );
   const defaultRole = threadInfo.roles[defaultRoleID];
   const defaultRolePermissions = defaultRole.minimallyEncoded
     ? decodeMinimallyEncodedRoleInfo(defaultRole).permissions
     : defaultRole.permissions;
 
   return !!defaultRolePermissions[threadPermissions.VOICED];
 }
 
 const draftKeySuffix = '/message_composer';
 
 function draftKeyFromThreadID(threadID: string): string {
   return `${threadID}${draftKeySuffix}`;
 }
 
 function getContainingThreadID(
   parentThreadInfo: ?ServerThreadInfo | RawThreadInfo | ThreadInfo,
   threadType: ThreadType,
 ): ?string {
   if (!parentThreadInfo) {
     return null;
   }
   if (threadType === threadTypes.SIDEBAR) {
     return parentThreadInfo.id;
   }
   if (!parentThreadInfo.containingThreadID) {
     return parentThreadInfo.id;
   }
   return parentThreadInfo.containingThreadID;
 }
 
 function getCommunity(
   parentThreadInfo: ?ServerThreadInfo | RawThreadInfo | ThreadInfo,
 ): ?string {
   if (!parentThreadInfo) {
     return null;
   }
   const { id, community, type } = parentThreadInfo;
   if (community !== null && community !== undefined) {
     return community;
   }
   if (threadTypeIsCommunityRoot(type)) {
     return id;
   }
   return null;
 }
 
 function getThreadListSearchResults(
   chatListData: $ReadOnlyArray<ChatThreadItem>,
   searchText: string,
   threadFilter: ThreadInfo => boolean,
   threadSearchResults: $ReadOnlySet<string>,
   usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
   loggedInUserInfo: ?LoggedInUserInfo,
 ): $ReadOnlyArray<ChatThreadItem> {
   if (!searchText) {
     return chatListData.filter(
       item =>
         threadIsTopLevel(item.threadInfo) && threadFilter(item.threadInfo),
     );
   }
 
   const privateThreads = [];
   const personalThreads = [];
   const otherThreads = [];
   for (const item of chatListData) {
     if (!threadSearchResults.has(item.threadInfo.id)) {
       continue;
     }
     if (item.threadInfo.type === threadTypes.PRIVATE) {
       privateThreads.push({ ...item, sidebars: [] });
     } else if (item.threadInfo.type === threadTypes.PERSONAL) {
       personalThreads.push({ ...item, sidebars: [] });
     } else {
       otherThreads.push({ ...item, sidebars: [] });
     }
   }
 
   const chatItems: ChatThreadItem[] = [
     ...privateThreads,
     ...personalThreads,
     ...otherThreads,
   ];
   if (loggedInUserInfo) {
     chatItems.push(
       ...usersSearchResults.map(user =>
         createPendingThreadItem(loggedInUserInfo, user),
       ),
     );
   }
   return chatItems;
 }
 
 type ThreadListSearchResult = {
   +threadSearchResults: $ReadOnlySet<string>,
   +usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
 };
 function useThreadListSearch(
   searchText: string,
   viewerID: ?string,
 ): ThreadListSearchResult {
   const callSearchUsers = useServerCall(searchUserCall);
   const usersWithPersonalThread = useSelector(usersWithPersonalThreadSelector);
   const forwardLookupSearchText = useForwardLookupSearchText(searchText);
   const searchUsers = React.useCallback(
     async (usernamePrefix: string) => {
       if (usernamePrefix.length === 0) {
         return ([]: GlobalAccountUserInfo[]);
       }
 
       const { userInfos } = await callSearchUsers(usernamePrefix);
       return userInfos.filter(
         info => !usersWithPersonalThread.has(info.id) && info.id !== viewerID,
       );
     },
     [callSearchUsers, usersWithPersonalThread, viewerID],
   );
 
   const [threadSearchResults, setThreadSearchResults] = React.useState(
     new Set<string>(),
   );
   const [usersSearchResults, setUsersSearchResults] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
   const threadSearchIndex = useGlobalThreadSearchIndex();
   React.useEffect(() => {
     void (async () => {
       const results = threadSearchIndex.getSearchResults(searchText);
       setThreadSearchResults(new Set<string>(results));
       const usersResults = await searchUsers(forwardLookupSearchText);
       setUsersSearchResults(usersResults);
     })();
   }, [searchText, forwardLookupSearchText, threadSearchIndex, searchUsers]);
 
   return { threadSearchResults, usersSearchResults };
 }
 
 function removeMemberFromThread(
   threadInfo: ThreadInfo,
   memberInfo: RelativeMemberInfo,
   dispatchActionPromise: DispatchActionPromise,
   removeUserFromThreadServerCall: (
     input: RemoveUsersFromThreadInput,
   ) => Promise<ChangeThreadSettingsPayload>,
 ) {
   const customKeyName = `${removeUsersFromThreadActionTypes.started}:${memberInfo.id}`;
   void dispatchActionPromise(
     removeUsersFromThreadActionTypes,
     removeUserFromThreadServerCall({
       threadID: threadInfo.id,
       memberIDs: [memberInfo.id],
     }),
     { customKeyName },
   );
 }
 
 function getAvailableThreadMemberActions(
   memberInfo: RelativeMemberInfo,
   threadInfo: ThreadInfo,
   canEdit: ?boolean = true,
 ): $ReadOnlyArray<'change_role' | 'remove_user'> {
   const role = memberInfo.role;
   if (!canEdit || !role) {
     return [];
   }
 
   const canRemoveMembers = threadHasPermission(
     threadInfo,
     threadPermissions.REMOVE_MEMBERS,
   );
   const canChangeRoles = threadHasPermission(
     threadInfo,
     threadPermissions.CHANGE_ROLE,
   );
 
   const result = [];
 
   if (canChangeRoles && memberInfo.username && threadHasAdminRole(threadInfo)) {
     result.push('change_role');
   }
 
   if (
     canRemoveMembers &&
     !memberInfo.isViewer &&
     (canChangeRoles || threadInfo.roles[role]?.isDefault)
   ) {
     result.push('remove_user');
   }
 
   return result;
 }
 
 function patchThreadInfoToIncludeMentionedMembersOfParent(
   threadInfo: ThreadInfo,
   parentThreadInfo: ThreadInfo,
   messageText: string,
   viewerID: string,
 ): ThreadInfo {
   const members: UserIDAndUsername[] = threadInfo.members
     .map(({ id, username }) =>
       username ? ({ id, username }: UserIDAndUsername) : null,
     )
     .filter(Boolean);
   const mentionedNewMembers = extractNewMentionedParentMembers(
     messageText,
     threadInfo,
     parentThreadInfo,
   );
   if (mentionedNewMembers.length === 0) {
     return threadInfo;
   }
   members.push(...mentionedNewMembers);
   return createPendingThread({
     viewerID,
     threadType: threadTypes.SIDEBAR,
     members,
     parentThreadInfo,
     threadColor: threadInfo.color,
     name: threadInfo.name,
     sourceMessageID: threadInfo.sourceMessageID,
   });
 }
 
 function threadInfoInsideCommunity(
   threadInfo: RawThreadInfo | ThreadInfo,
   communityID: string,
 ): boolean {
   return threadInfo.community === communityID || threadInfo.id === communityID;
 }
 
 type RoleAndMemberCount = {
   [roleName: string]: number,
 };
 
 function useRoleMemberCountsForCommunity(
   threadInfo: ThreadInfo,
 ): RoleAndMemberCount {
   return React.useMemo(() => {
     const roleIDsToNames: { [string]: string } = {};
 
     Object.keys(threadInfo.roles).forEach(roleID => {
       roleIDsToNames[roleID] = threadInfo.roles[roleID].name;
     });
 
     const roleNamesToMemberCount: RoleAndMemberCount = {};
 
     threadInfo.members.forEach(({ role: roleID }) => {
       invariant(roleID, 'Community member should have a role');
       const roleName = roleIDsToNames[roleID];
 
       roleNamesToMemberCount[roleName] =
         (roleNamesToMemberCount[roleName] ?? 0) + 1;
     });
 
     // For all community roles with no members, add them to the list with 0
     Object.keys(roleIDsToNames).forEach(roleName => {
       if (roleNamesToMemberCount[roleIDsToNames[roleName]] === undefined) {
         roleNamesToMemberCount[roleIDsToNames[roleName]] = 0;
       }
     });
 
     return roleNamesToMemberCount;
   }, [threadInfo]);
 }
 
 type RoleUserSurfacedPermissions = {
   +[roleName: string]: $ReadOnlySet<UserSurfacedPermission>,
 };
 // Iterates through the existing roles in the community and 'reverse maps'
 // the set of permission literals for each role to user-facing permission enums
 // to help pre-populate the permission checkboxes when editing roles.
 function useRoleUserSurfacedPermissions(
   threadInfo: ThreadInfo,
 ): RoleUserSurfacedPermissions {
   return React.useMemo(() => {
     const roleNamesToPermissions: { [string]: Set<UserSurfacedPermission> } =
       {};
 
     Object.keys(threadInfo.roles).forEach(roleID => {
       const roleName = threadInfo.roles[roleID].name;
       const rolePermissions = threadInfo.minimallyEncoded
         ? Object.keys(
             decodeMinimallyEncodedRoleInfo(threadInfo.roles[roleID])
               .permissions,
           )
         : Object.keys(threadInfo.roles[roleID].permissions);
       const setOfUserSurfacedPermissions = new Set<UserSurfacedPermission>();
 
       rolePermissions.forEach(rolePermission => {
         const userSurfacedPermission = Object.keys(
           configurableCommunityPermissions,
         ).find(key =>
           configurableCommunityPermissions[key].has(rolePermission),
         );
 
         if (userSurfacedPermission) {
           setOfUserSurfacedPermissions.add(userSurfacedPermission);
         }
       });
       roleNamesToPermissions[roleName] = setOfUserSurfacedPermissions;
     });
 
     return roleNamesToPermissions;
   }, [threadInfo]);
 }
 
 function communityOrThreadNoun(threadInfo: RawThreadInfo | ThreadInfo): string {
   return threadTypeIsCommunityRoot(threadInfo.type)
     ? 'community'
     : threadNoun(threadInfo.type, threadInfo.parentThreadID);
 }
 
 function getThreadsToDeleteText(
   threadInfo: RawThreadInfo | ThreadInfo,
 ): string {
   return `${
     threadTypeIsCommunityRoot(threadInfo.type)
       ? 'Subchannels and threads'
       : 'Threads'
   } within this ${communityOrThreadNoun(threadInfo)}`;
 }
 
 function useUserProfileThreadInfo(userInfo: ?UserInfo): ?UserProfileThreadInfo {
   const userID = userInfo?.id;
   const username = userInfo?.username;
 
   const loggedInUserInfo = useLoggedInUserInfo();
   const isViewerProfile = loggedInUserInfo?.id === userID;
 
   const privateThreadInfosSelector = threadInfosSelectorForThreadType(
     threadTypes.PRIVATE,
   );
   const privateThreadInfos = useSelector(privateThreadInfosSelector);
 
   const personalThreadInfosSelector = threadInfosSelectorForThreadType(
     threadTypes.PERSONAL,
   );
 
   const personalThreadInfos = useSelector(personalThreadInfosSelector);
 
   const usersWithPersonalThread = useSelector(usersWithPersonalThreadSelector);
 
   return React.useMemo(() => {
     if (!loggedInUserInfo || !userID || !username) {
       return null;
     }
 
     if (isViewerProfile) {
       const privateThreadInfo: ?ThreadInfo = privateThreadInfos[0];
 
       return privateThreadInfo ? { threadInfo: privateThreadInfo } : null;
     }
 
     if (usersWithPersonalThread.has(userID)) {
       const personalThreadInfo: ?ThreadInfo = personalThreadInfos.find(
         threadInfo =>
           userID === getSingleOtherUser(threadInfo, loggedInUserInfo.id),
       );
 
       return personalThreadInfo ? { threadInfo: personalThreadInfo } : null;
     }
 
     const pendingPersonalThreadInfo = createPendingPersonalThread(
       loggedInUserInfo,
       userID,
       username,
     );
 
     return pendingPersonalThreadInfo;
   }, [
     isViewerProfile,
     loggedInUserInfo,
     personalThreadInfos,
     privateThreadInfos,
     userID,
     username,
     usersWithPersonalThread,
   ]);
 }
 
 function assertAllThreadInfosAreLegacy(rawThreadInfos: RawThreadInfos): {
   [id: string]: LegacyRawThreadInfo,
 } {
   return Object.fromEntries(
     Object.entries(rawThreadInfos).map(([id, rawThreadInfo]) => {
       invariant(
         !rawThreadInfo.minimallyEncoded,
         `rawThreadInfos shouldn't be minimallyEncoded`,
       );
       return [id, rawThreadInfo];
     }),
   );
 }
 
 export {
   threadHasPermission,
   viewerIsMember,
   threadInChatList,
   threadIsTopLevel,
   threadIsChannel,
   threadIsSidebar,
   threadInBackgroundChatList,
   threadInHomeChatList,
   threadIsInHome,
   threadInFilterList,
   userIsMember,
   threadActualMembers,
   threadOtherMembers,
   threadIsGroupChat,
   threadIsPending,
   threadIsPendingSidebar,
   getSingleOtherUser,
   getPendingThreadID,
   parsePendingThreadID,
   createPendingThread,
   createUnresolvedPendingSidebar,
   extractNewMentionedParentMembers,
   createPendingSidebar,
   pendingThreadType,
   createRealThreadFromPendingThread,
   getCurrentUser,
   getMinimallyEncodedCurrentUser,
   threadFrozenDueToBlock,
   threadFrozenDueToViewerBlock,
   rawThreadInfoFromServerThreadInfo,
   threadUIName,
   threadInfoFromRawThreadInfo,
   threadTypeDescriptions,
   memberIsAdmin,
   memberHasAdminPowers,
   roleIsAdminRole,
   threadHasAdminRole,
   identifyInvalidatedThreads,
   permissionsDisabledByBlock,
   emptyItemText,
   threadNoun,
   threadLabel,
   useWatchThread,
   useExistingThreadInfoFinder,
   getThreadTypeParentRequirement,
   threadMemberHasPermission,
   useCanCreateSidebarFromMessage,
   useSidebarExistsOrCanBeCreated,
   checkIfDefaultMembersAreVoiced,
   draftKeySuffix,
   draftKeyFromThreadID,
   threadTypeCanBePending,
   getContainingThreadID,
   getCommunity,
   getThreadListSearchResults,
   useThreadListSearch,
   removeMemberFromThread,
   getAvailableThreadMemberActions,
   threadMembersWithoutAddedAshoat,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
   useRoleMemberCountsForCommunity,
   useRoleUserSurfacedPermissions,
   getThreadsToDeleteText,
   useUserProfileThreadInfo,
   assertAllThreadInfosAreLegacy,
 };
diff --git a/lib/socket/activity-handler.react.js b/lib/socket/activity-handler.react.js
index a20e41a64..4148aafef 100644
--- a/lib/socket/activity-handler.react.js
+++ b/lib/socket/activity-handler.react.js
@@ -1,136 +1,136 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   updateActivityActionTypes,
   useUpdateActivity,
 } from '../actions/activity-actions.js';
 import { connectionSelector } from '../selectors/keyserver-selectors.js';
 import { getMostRecentNonLocalMessageID } from '../shared/message-utils.js';
 import { threadIsPending } from '../shared/thread-utils.js';
 import {
   queueActivityUpdatesActionType,
   type ActivityUpdate,
 } from '../types/activity-types.js';
 import type { ConnectionStatus } from '../types/socket-types.js';
-import { useDispatchActionPromise } from '../utils/action-utils.js';
+import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
 import { useSelector, useDispatch } from '../utils/redux-utils.js';
 import { ashoatKeyserverID } from '../utils/validation-utils.js';
 
 type Props = {
   +activeThread: ?string,
   +frozen: boolean,
 };
 function ActivityHandler(props: Props): React.Node {
   const { activeThread, frozen } = props;
 
   const prevActiveThreadRef = React.useRef<?string>();
   React.useEffect(() => {
     prevActiveThreadRef.current = activeThread;
   }, [activeThread]);
   const prevActiveThread = prevActiveThreadRef.current;
 
   const connection = useSelector(connectionSelector(ashoatKeyserverID));
   invariant(connection, 'keyserver missing from keyserverStore');
   const connectionStatus = connection.status;
   const prevConnectionStatusRef = React.useRef<?ConnectionStatus>();
   React.useEffect(() => {
     prevConnectionStatusRef.current = connectionStatus;
   }, [connectionStatus]);
   const prevConnectionStatus = prevConnectionStatusRef.current;
 
   const activeThreadLatestMessage = useSelector(state => {
     if (!activeThread) {
       return undefined;
     }
     return getMostRecentNonLocalMessageID(activeThread, state.messageStore);
   });
   const prevActiveThreadLatestMessageRef = React.useRef<?string>();
   React.useEffect(() => {
     prevActiveThreadLatestMessageRef.current = activeThreadLatestMessage;
   }, [activeThreadLatestMessage]);
   const prevActiveThreadLatestMessage =
     prevActiveThreadLatestMessageRef.current;
 
   const canSend = connectionStatus === 'connected' && !frozen;
   const prevCanSendRef = React.useRef<?boolean>();
   React.useEffect(() => {
     prevCanSendRef.current = canSend;
   }, [canSend]);
   const prevCanSend = prevCanSendRef.current;
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
   const callUpdateActivity = useUpdateActivity();
 
   React.useEffect(() => {
     const activityUpdates: ActivityUpdate[] = [];
     const isActiveThreadPending = threadIsPending(activeThread);
 
     if (activeThread !== prevActiveThread) {
       const isPrevActiveThreadPending = threadIsPending(prevActiveThread);
 
       if (prevActiveThread && !isPrevActiveThreadPending) {
         activityUpdates.push({
           focus: false,
           threadID: prevActiveThread,
           latestMessage: prevActiveThreadLatestMessage,
         });
       }
       if (activeThread && !isActiveThreadPending) {
         activityUpdates.push({
           focus: true,
           threadID: activeThread,
           latestMessage: activeThreadLatestMessage,
         });
       }
     }
 
     if (
       !frozen &&
       connectionStatus !== 'connected' &&
       prevConnectionStatus === 'connected' &&
       activeThread &&
       !isActiveThreadPending
     ) {
       // When the server closes a socket it also deletes any activity rows
       // associated with that socket's session. If that activity is still
       // ongoing, we should make sure that we clarify that with the server once
       // we reconnect.
       activityUpdates.push({
         focus: true,
         threadID: activeThread,
         latestMessage: activeThreadLatestMessage,
       });
     }
 
     if (activityUpdates.length > 0) {
       dispatch({
         type: queueActivityUpdatesActionType,
         payload: { activityUpdates, keyserverID: ashoatKeyserverID },
       });
     }
 
     if (!canSend) {
       return;
     }
 
     if (!prevCanSend) {
       activityUpdates.unshift(...connection.queuedActivityUpdates);
     }
 
     if (activityUpdates.length === 0) {
       return;
     }
     void dispatchActionPromise(
       updateActivityActionTypes,
       callUpdateActivity({ activityUpdates }),
     );
   });
 
   return null;
 }
 
 export default ActivityHandler;
diff --git a/lib/socket/calendar-query-handler.react.js b/lib/socket/calendar-query-handler.react.js
index ff320e666..50750a03b 100644
--- a/lib/socket/calendar-query-handler.react.js
+++ b/lib/socket/calendar-query-handler.react.js
@@ -1,154 +1,154 @@
 // @flow
 
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import * as React from 'react';
 
 import {
   updateCalendarQueryActionTypes,
   useUpdateCalendarQuery,
 } from '../actions/entry-actions.js';
 import type { UpdateCalendarQueryInput } from '../actions/entry-actions.js';
 import { connectionSelector } from '../selectors/keyserver-selectors.js';
 import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors.js';
 import { useIsAppForegrounded } from '../shared/lifecycle-utils.js';
 import type {
   CalendarQuery,
   CalendarQueryUpdateResult,
   CalendarQueryUpdateStartingPayload,
 } from '../types/entry-types.js';
 import { type ConnectionInfo } from '../types/socket-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
-} from '../utils/action-utils.js';
+} from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 import { ashoatKeyserverID } from '../utils/validation-utils.js';
 
 type BaseProps = {
   +currentCalendarQuery: () => CalendarQuery,
   +frozen: boolean,
 };
 type Props = {
   ...BaseProps,
   +connection: ConnectionInfo,
   +calendarQuery: CalendarQuery,
   +lastUserInteractionCalendar: number,
   +foreground: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +updateCalendarQuery: (
     input: UpdateCalendarQueryInput,
   ) => Promise<CalendarQueryUpdateResult>,
 };
 class CalendarQueryHandler extends React.PureComponent<Props> {
   serverCalendarQuery: CalendarQuery;
   expirationTimeoutID: ?TimeoutID;
 
   constructor(props: Props) {
     super(props);
     this.serverCalendarQuery = this.props.calendarQuery;
   }
 
   componentDidMount() {
     if (this.props.connection.status === 'connected') {
       this.possiblyUpdateCalendarQuery();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     const { calendarQuery } = this.props;
     if (this.props.connection.status !== 'connected') {
       if (!_isEqual(this.serverCalendarQuery)(calendarQuery)) {
         this.serverCalendarQuery = calendarQuery;
       }
       return;
     }
 
     if (
       !_isEqual(this.serverCalendarQuery)(calendarQuery) &&
       _isEqual(this.props.currentCalendarQuery())(calendarQuery)
     ) {
       this.serverCalendarQuery = calendarQuery;
     }
 
     const shouldUpdate =
       (this.isExpired ||
         prevProps.connection.status !== 'connected' ||
         this.props.currentCalendarQuery !== prevProps.currentCalendarQuery) &&
       this.shouldUpdateCalendarQuery;
 
     if (shouldUpdate) {
       this.updateCalendarQuery();
     }
   }
 
   render(): React.Node {
     return null;
   }
 
   get isExpired(): boolean {
     const timeUntilExpiration = timeUntilCalendarRangeExpiration(
       this.props.lastUserInteractionCalendar,
     );
     return (
       timeUntilExpiration !== null &&
       timeUntilExpiration !== undefined &&
       timeUntilExpiration <= 0
     );
   }
 
   get shouldUpdateCalendarQuery(): boolean {
     if (this.props.connection.status !== 'connected' || this.props.frozen) {
       return false;
     }
     const calendarQuery = this.props.currentCalendarQuery();
     return !_isEqual(calendarQuery)(this.serverCalendarQuery);
   }
 
   updateCalendarQuery() {
     const calendarQuery = this.props.currentCalendarQuery();
     this.serverCalendarQuery = calendarQuery;
     void this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery({
         calendarQuery,
         reduxAlreadyUpdated: true,
       }),
       undefined,
       ({ calendarQuery }: CalendarQueryUpdateStartingPayload),
     );
   }
 
   possiblyUpdateCalendarQuery = () => {
     if (this.shouldUpdateCalendarQuery) {
       this.updateCalendarQuery();
     }
   };
 }
 
 const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) {
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const lastUserInteractionCalendar = useSelector(
       state => state.entryStore.lastUserInteractionCalendar,
     );
     // We include this so that componentDidUpdate will be called on foreground
     const foreground = useIsAppForegrounded();
     const callUpdateCalendarQuery = useUpdateCalendarQuery();
     const dispatchActionPromise = useDispatchActionPromise();
     const calendarQuery = useSelector(state => state.actualizedCalendarQuery);
 
     return (
       <CalendarQueryHandler
         {...props}
         connection={connection}
         calendarQuery={calendarQuery}
         lastUserInteractionCalendar={lastUserInteractionCalendar}
         foreground={foreground}
         updateCalendarQuery={callUpdateCalendarQuery}
         dispatchActionPromise={dispatchActionPromise}
       />
     );
   });
 export default ConnectedCalendarQueryHandler;
diff --git a/lib/socket/report-handler.react.js b/lib/socket/report-handler.react.js
index 06e391b4b..658a87554 100644
--- a/lib/socket/report-handler.react.js
+++ b/lib/socket/report-handler.react.js
@@ -1,91 +1,91 @@
 // @flow
 
 import * as React from 'react';
 
 import { sendReportsActionTypes } from '../actions/report-actions.js';
 import { queuedReports as queuedReportsSelector } from '../selectors/socket-selectors.js';
 import {
   type ClientReportCreationRequest,
   type ClearDeliveredReportsPayload,
 } from '../types/report-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
-} from '../utils/action-utils.js';
+} from '../utils/redux-promise-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 import { sendReports } from '../utils/reports-service.js';
 
 type BaseProps = {
   +canSendReports: boolean,
 };
 type Props = {
   ...BaseProps,
   +queuedReports: $ReadOnlyArray<ClientReportCreationRequest>,
   +dispatchActionPromise: DispatchActionPromise,
 };
 class ReportHandler extends React.PureComponent<Props> {
   componentDidMount() {
     if (this.props.canSendReports) {
       this.dispatchSendReports(this.props.queuedReports);
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (!this.props.canSendReports) {
       return;
     }
 
     const couldSend = prevProps.canSendReports;
     const curReports = this.props.queuedReports;
     if (!couldSend) {
       this.dispatchSendReports(curReports);
       return;
     }
 
     const prevReports = prevProps.queuedReports;
     if (curReports !== prevReports) {
       const prevResponses = new Set(prevReports);
       const newResponses = curReports.filter(
         response => !prevResponses.has(response),
       );
       this.dispatchSendReports(newResponses);
     }
   }
 
   render(): React.Node {
     return null;
   }
 
   dispatchSendReports(reports: $ReadOnlyArray<ClientReportCreationRequest>) {
     if (reports.length === 0) {
       return;
     }
     void this.props.dispatchActionPromise(
       sendReportsActionTypes,
       this.sendReports(reports),
     );
   }
 
   async sendReports(
     reports: $ReadOnlyArray<ClientReportCreationRequest>,
   ): Promise<ClearDeliveredReportsPayload> {
     await sendReports(reports);
     return { reports };
   }
 }
 
 const ConnectedReportHandler: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedReportHandler(props) {
     const queuedReports = useSelector(queuedReportsSelector);
     const dispatchActionPromise = useDispatchActionPromise();
 
     return (
       <ReportHandler
         {...props}
         queuedReports={queuedReports}
         dispatchActionPromise={dispatchActionPromise}
       />
     );
   });
 
 export default ConnectedReportHandler;
diff --git a/lib/socket/socket.react.js b/lib/socket/socket.react.js
index cef542073..ee30af998 100644
--- a/lib/socket/socket.react.js
+++ b/lib/socket/socket.react.js
@@ -1,817 +1,817 @@
 // @flow
 
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 
 import ActivityHandler from './activity-handler.react.js';
 import APIRequestHandler from './api-request-handler.react.js';
 import CalendarQueryHandler from './calendar-query-handler.react.js';
 import { InflightRequests } from './inflight-requests.js';
 import MessageHandler from './message-handler.react.js';
 import ReportHandler from './report-handler.react.js';
 import RequestResponseHandler from './request-response-handler.react.js';
 import UpdateHandler from './update-handler.react.js';
 import { updateActivityActionTypes } from '../actions/activity-actions.js';
 import { updateLastCommunicatedPlatformDetailsActionType } from '../actions/device-actions.js';
 import { setNewSessionActionType } from '../keyserver-conn/keyserver-conn-types.js';
 import { unsupervisedBackgroundActionType } from '../reducers/lifecycle-state-reducer.js';
 import {
   pingFrequency,
   serverRequestSocketTimeout,
   clientRequestVisualTimeout,
   clientRequestSocketTimeout,
 } from '../shared/timeouts.js';
 import { logInActionSources } from '../types/account-types.js';
 import type { CompressedData } from '../types/compression-types.js';
 import { type PlatformDetails } from '../types/device-types.js';
 import type { CalendarQuery } from '../types/entry-types.js';
 import { forcePolicyAcknowledgmentActionType } from '../types/policy-types.js';
 import type { Dispatch } from '../types/redux-types.js';
 import {
   serverRequestTypes,
   type ClientClientResponse,
   type ClientServerRequest,
 } from '../types/request-types.js';
 import {
   type SessionState,
   type SessionIdentification,
   type PreRequestUserState,
 } from '../types/session-types.js';
 import {
   setConnectionIssueActionType,
   clientSocketMessageTypes,
   type ClientClientSocketMessage,
   serverSocketMessageTypes,
   type ClientServerSocketMessage,
   stateSyncPayloadTypes,
   fullStateSyncActionType,
   incrementalStateSyncActionType,
   updateConnectionStatusActionType,
   type ConnectionInfo,
   type ClientInitialClientSocketMessage,
   type ClientResponsesClientSocketMessage,
   type PingClientSocketMessage,
   type AckUpdatesClientSocketMessage,
   type APIRequestClientSocketMessage,
   type ClientSocketMessageWithoutID,
   type SocketListener,
   type ConnectionStatus,
   setLateResponseActionType,
   type CommTransportLayer,
   type ActivityUpdateResponseServerSocketMessage,
   type ClientStateSyncServerSocketMessage,
   type PongServerSocketMessage,
 } from '../types/socket-types.js';
 import { actionLogger } from '../utils/action-logger.js';
-import type { DispatchActionPromise } from '../utils/action-utils.js';
 import { resolveKeyserverSessionInvalidation } from '../utils/action-utils.js';
 import { getConfig } from '../utils/config.js';
 import { ServerError, SocketTimeout, SocketOffline } from '../utils/errors.js';
 import { promiseAll } from '../utils/promises.js';
+import type { DispatchActionPromise } from '../utils/redux-promise-utils.js';
 import sleep from '../utils/sleep.js';
 import { ashoatKeyserverID } from '../utils/validation-utils.js';
 
 const remainingTimeAfterVisualTimeout =
   clientRequestSocketTimeout - clientRequestVisualTimeout;
 
 export type BaseSocketProps = {
   +detectUnsupervisedBackgroundRef?: (
     detectUnsupervisedBackground: (alreadyClosed: boolean) => boolean,
   ) => void,
 };
 type Props = {
   ...BaseSocketProps,
   // Redux state
   +active: boolean,
   +openSocket: () => CommTransportLayer,
   +getClientResponses: (
     activeServerRequests: $ReadOnlyArray<ClientServerRequest>,
   ) => Promise<$ReadOnlyArray<ClientClientResponse>>,
   +activeThread: ?string,
   +sessionStateFunc: () => SessionState,
   +sessionIdentification: SessionIdentification,
   +cookie: ?string,
   +urlPrefix: string,
   +connection: ConnectionInfo,
   +currentCalendarQuery: () => CalendarQuery,
   +canSendReports: boolean,
   +frozen: boolean,
   +preRequestUserState: PreRequestUserState,
   +noDataAfterPolicyAcknowledgment?: boolean,
   +lastCommunicatedPlatformDetails: ?PlatformDetails,
   +decompressSocketMessage: CompressedData => string,
   // Redux dispatch functions
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +socketCrashLoopRecovery?: () => Promise<void>,
   // keyserver olm sessions specific props
   +getInitialNotificationsEncryptedMessage?: () => Promise<string>,
 };
 type State = {
   +inflightRequests: ?InflightRequests,
 };
 class Socket extends React.PureComponent<Props, State> {
   state: State = {
     inflightRequests: null,
   };
   socket: ?CommTransportLayer;
   nextClientMessageID: number = 0;
   listeners: Set<SocketListener> = new Set();
   pingTimeoutID: ?TimeoutID;
   messageLastReceived: ?number;
   reopenConnectionAfterClosing: boolean = false;
   invalidationRecoveryInProgress: boolean = false;
   initializedWithUserState: ?PreRequestUserState;
   failuresAfterPolicyAcknowledgment: number = 0;
 
   openSocket(newStatus: ConnectionStatus) {
     if (
       this.props.frozen ||
       !this.props.cookie ||
       !this.props.cookie.startsWith('user=')
     ) {
       return;
     }
     if (this.socket) {
       const { status } = this.props.connection;
       if (status === 'forcedDisconnecting') {
         this.reopenConnectionAfterClosing = true;
         return;
       } else if (status === 'disconnecting' && this.socket.readyState === 1) {
         this.markSocketInitialized();
         return;
       } else if (
         status === 'connected' ||
         status === 'connecting' ||
         status === 'reconnecting'
       ) {
         return;
       }
       if (this.socket.readyState < 2) {
         this.socket.close();
         console.log(`this.socket seems open, but Redux thinks it's ${status}`);
       }
     }
     this.props.dispatch({
       type: updateConnectionStatusActionType,
       payload: { status: newStatus, keyserverID: ashoatKeyserverID },
     });
 
     const socket = this.props.openSocket();
     const openObject: { initializeMessageSent?: true } = {};
     socket.onopen = () => {
       if (this.socket === socket) {
         void this.initializeSocket();
         openObject.initializeMessageSent = true;
       }
     };
     socket.onmessage = this.receiveMessage;
     socket.onclose = () => {
       if (this.socket === socket) {
         this.onClose();
       }
     };
     this.socket = socket;
 
     void (async () => {
       await sleep(clientRequestVisualTimeout);
       if (this.socket !== socket || openObject.initializeMessageSent) {
         return;
       }
       this.setLateResponse(-1, true);
       await sleep(remainingTimeAfterVisualTimeout);
       if (this.socket !== socket || openObject.initializeMessageSent) {
         return;
       }
       this.finishClosingSocket();
     })();
 
     this.setState({
       inflightRequests: new InflightRequests({
         timeout: () => {
           if (this.socket === socket) {
             this.finishClosingSocket();
           }
         },
         setLateResponse: (messageID: number, isLate: boolean) => {
           if (this.socket === socket) {
             this.setLateResponse(messageID, isLate);
           }
         },
       }),
     });
   }
 
   markSocketInitialized() {
     this.props.dispatch({
       type: updateConnectionStatusActionType,
       payload: { status: 'connected', keyserverID: ashoatKeyserverID },
     });
     this.resetPing();
   }
 
   closeSocket(
     // This param is a hack. When closing a socket there is a race between this
     // function and the one to propagate the activity update. We make sure that
     // the activity update wins the race by passing in this param.
     activityUpdatePending: boolean,
   ) {
     const { status } = this.props.connection;
     if (status === 'disconnected') {
       return;
     } else if (status === 'disconnecting' || status === 'forcedDisconnecting') {
       this.reopenConnectionAfterClosing = false;
       return;
     }
     this.stopPing();
     this.props.dispatch({
       type: updateConnectionStatusActionType,
       payload: { status: 'disconnecting', keyserverID: ashoatKeyserverID },
     });
     if (!activityUpdatePending) {
       this.finishClosingSocket();
     }
   }
 
   forceCloseSocket() {
     this.stopPing();
     const { status } = this.props.connection;
     if (status !== 'forcedDisconnecting' && status !== 'disconnected') {
       this.props.dispatch({
         type: updateConnectionStatusActionType,
         payload: {
           status: 'forcedDisconnecting',
           keyserverID: ashoatKeyserverID,
         },
       });
     }
     this.finishClosingSocket();
   }
 
   finishClosingSocket(receivedResponseTo?: ?number) {
     const { inflightRequests } = this.state;
     if (
       inflightRequests &&
       !inflightRequests.allRequestsResolvedExcept(receivedResponseTo)
     ) {
       return;
     }
     if (this.socket && this.socket.readyState < 2) {
       // If it's not closing already, close it
       this.socket.close();
     }
     this.socket = null;
     this.stopPing();
     this.setState({ inflightRequests: null });
     if (this.props.connection.status !== 'disconnected') {
       this.props.dispatch({
         type: updateConnectionStatusActionType,
         payload: { status: 'disconnected', keyserverID: ashoatKeyserverID },
       });
     }
     if (this.reopenConnectionAfterClosing) {
       this.reopenConnectionAfterClosing = false;
       if (this.props.active) {
         this.openSocket('connecting');
       }
     }
   }
 
   reconnect: $Call<typeof _throttle, () => void, number> = _throttle(
     () => this.openSocket('reconnecting'),
     2000,
   );
 
   componentDidMount() {
     if (this.props.detectUnsupervisedBackgroundRef) {
       this.props.detectUnsupervisedBackgroundRef(
         this.detectUnsupervisedBackground,
       );
     }
     if (this.props.active) {
       this.openSocket('connecting');
     }
   }
 
   componentWillUnmount() {
     this.closeSocket(false);
     this.reconnect.cancel();
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.active && !prevProps.active) {
       this.openSocket('connecting');
     } else if (!this.props.active && prevProps.active) {
       this.closeSocket(!!prevProps.activeThread);
     } else if (
       this.props.active &&
       prevProps.openSocket !== this.props.openSocket
     ) {
       // This case happens when the baseURL/urlPrefix is changed
       this.reopenConnectionAfterClosing = true;
       this.forceCloseSocket();
     } else if (
       this.props.active &&
       this.props.connection.status === 'disconnected' &&
       prevProps.connection.status !== 'disconnected' &&
       !this.invalidationRecoveryInProgress
     ) {
       this.reconnect();
     }
   }
 
   render(): React.Node {
     // It's important that APIRequestHandler get rendered first here. This is so
     // that it is registered with Redux first, so that its componentDidUpdate
     // processes before the other Handlers. This allows APIRequestHandler to
     // register itself with action-utils before other Handlers call
     // dispatchActionPromise in response to the componentDidUpdate triggered by
     // the same Redux change (state.connection.status).
     return (
       <React.Fragment>
         <APIRequestHandler
           inflightRequests={this.state.inflightRequests}
           sendMessage={this.sendMessageWithoutID}
         />
         <ActivityHandler
           activeThread={this.props.activeThread}
           frozen={this.props.frozen}
         />
         <RequestResponseHandler
           inflightRequests={this.state.inflightRequests}
           sendMessage={this.sendMessageWithoutID}
           addListener={this.addListener}
           removeListener={this.removeListener}
           getClientResponses={this.props.getClientResponses}
           currentCalendarQuery={this.props.currentCalendarQuery}
         />
         <UpdateHandler
           sendMessage={this.sendMessageWithoutID}
           addListener={this.addListener}
           removeListener={this.removeListener}
           keyserverID={ashoatKeyserverID}
         />
         <MessageHandler
           addListener={this.addListener}
           removeListener={this.removeListener}
         />
         <CalendarQueryHandler
           currentCalendarQuery={this.props.currentCalendarQuery}
           frozen={this.props.frozen}
         />
         <ReportHandler canSendReports={this.props.canSendReports} />
       </React.Fragment>
     );
   }
 
   sendMessageWithoutID: (message: ClientSocketMessageWithoutID) => number =
     message => {
       const id = this.nextClientMessageID++;
       // These conditions all do the same thing and the runtime checks are only
       // necessary for Flow
       if (message.type === clientSocketMessageTypes.INITIAL) {
         this.sendMessage(
           ({ ...message, id }: ClientInitialClientSocketMessage),
         );
       } else if (message.type === clientSocketMessageTypes.RESPONSES) {
         this.sendMessage(
           ({ ...message, id }: ClientResponsesClientSocketMessage),
         );
       } else if (message.type === clientSocketMessageTypes.PING) {
         this.sendMessage(({ ...message, id }: PingClientSocketMessage));
       } else if (message.type === clientSocketMessageTypes.ACK_UPDATES) {
         this.sendMessage(({ ...message, id }: AckUpdatesClientSocketMessage));
       } else if (message.type === clientSocketMessageTypes.API_REQUEST) {
         this.sendMessage(({ ...message, id }: APIRequestClientSocketMessage));
       }
       return id;
     };
 
   sendMessage(message: ClientClientSocketMessage) {
     const socket = this.socket;
     invariant(socket, 'should be set');
     socket.send(JSON.stringify(message));
   }
 
   messageFromEvent(event: MessageEvent): ?ClientServerSocketMessage {
     if (typeof event.data !== 'string') {
       console.log('socket received a non-string message');
       return null;
     }
 
     let rawMessage;
     try {
       rawMessage = JSON.parse(event.data);
     } catch (e) {
       console.log(e);
       return null;
     }
 
     if (rawMessage.type !== serverSocketMessageTypes.COMPRESSED_MESSAGE) {
       return rawMessage;
     }
 
     const result = this.props.decompressSocketMessage(rawMessage.payload);
     try {
       return JSON.parse(result);
     } catch (e) {
       console.log(e);
       return null;
     }
   }
 
   receiveMessage: (event: MessageEvent) => Promise<void> = async event => {
     const message = this.messageFromEvent(event);
     if (!message) {
       return;
     }
     this.failuresAfterPolicyAcknowledgment = 0;
 
     const { inflightRequests } = this.state;
     if (!inflightRequests) {
       // inflightRequests can be falsey here if we receive a message after we've
       // begun shutting down the socket. It's possible for a React Native
       // WebSocket to deliver a message even after close() is called on it. In
       // this case the message is probably a PONG, which we can safely ignore.
       // If it's not a PONG, it has to be something server-initiated (like
       // UPDATES or MESSAGES), since InflightRequests.allRequestsResolvedExcept
       // will wait for all responses to client-initiated requests to be
       // delivered before closing a socket. UPDATES and MESSAGES are both
       // checkpointed on the client, so should be okay to just ignore here and
       // redownload them later, probably in an incremental STATE_SYNC.
       return;
     }
 
     // If we receive any message, that indicates that our connection is healthy,
     // so we can reset the ping timeout.
     this.resetPing();
 
     inflightRequests.resolveRequestsForMessage(message);
     const { status } = this.props.connection;
     if (status === 'disconnecting' || status === 'forcedDisconnecting') {
       this.finishClosingSocket(
         // We do this for Flow
         message.responseTo !== undefined ? message.responseTo : null,
       );
     }
 
     for (const listener of this.listeners) {
       listener(message);
     }
 
     if (message.type === serverSocketMessageTypes.ERROR) {
       const { message: errorMessage, payload } = message;
       if (payload) {
         console.log(`socket sent error ${errorMessage} with payload`, payload);
       } else {
         console.log(`socket sent error ${errorMessage}`);
       }
       if (errorMessage === 'policies_not_accepted' && this.props.active) {
         this.props.dispatch({
           type: forcePolicyAcknowledgmentActionType,
           payload,
         });
       }
     } else if (message.type === serverSocketMessageTypes.AUTH_ERROR) {
       const { sessionChange } = message;
       const cookie = sessionChange ? sessionChange.cookie : this.props.cookie;
       this.invalidationRecoveryInProgress = true;
 
       const recoverySessionChange = await resolveKeyserverSessionInvalidation(
         this.props.dispatch,
         cookie,
         this.props.urlPrefix,
         logInActionSources.socketAuthErrorResolutionAttempt,
         ashoatKeyserverID,
         this.props.getInitialNotificationsEncryptedMessage,
       );
 
       if (!recoverySessionChange) {
         const { cookie: newerCookie, currentUserInfo } = sessionChange;
         this.props.dispatch({
           type: setNewSessionActionType,
           payload: {
             sessionChange: {
               cookieInvalidated: true,
               currentUserInfo,
               cookie: newerCookie,
             },
             preRequestUserState: this.initializedWithUserState,
             error: null,
             logInActionSource:
               logInActionSources.socketAuthErrorResolutionAttempt,
             keyserverID: ashoatKeyserverID,
           },
         });
       }
       this.invalidationRecoveryInProgress = false;
     }
   };
 
   addListener: (listener: SocketListener) => void = listener => {
     this.listeners.add(listener);
   };
 
   removeListener: (listener: SocketListener) => void = listener => {
     this.listeners.delete(listener);
   };
 
   onClose: () => void = () => {
     const { status } = this.props.connection;
     this.socket = null;
     this.stopPing();
     if (this.state.inflightRequests) {
       this.state.inflightRequests.rejectAll(new Error('socket closed'));
       this.setState({ inflightRequests: null });
     }
     const handled = this.detectUnsupervisedBackground(true);
     if (!handled && status !== 'disconnected') {
       this.props.dispatch({
         type: updateConnectionStatusActionType,
         payload: { status: 'disconnected', keyserverID: ashoatKeyserverID },
       });
     }
   };
 
   async sendInitialMessage() {
     const { inflightRequests } = this.state;
     invariant(
       inflightRequests,
       'inflightRequests falsey inside sendInitialMessage',
     );
     const messageID = this.nextClientMessageID++;
 
     const shouldSendInitialPlatformDetails = !_isEqual(
       this.props.lastCommunicatedPlatformDetails,
     )(getConfig().platformDetails);
 
     const clientResponses: ClientClientResponse[] = [];
     if (shouldSendInitialPlatformDetails) {
       clientResponses.push({
         type: serverRequestTypes.PLATFORM_DETAILS,
         platformDetails: getConfig().platformDetails,
       });
     }
 
     let activityUpdatePromise;
     const { queuedActivityUpdates } = this.props.connection;
     if (queuedActivityUpdates.length > 0) {
       clientResponses.push({
         type: serverRequestTypes.INITIAL_ACTIVITY_UPDATES,
         activityUpdates: queuedActivityUpdates,
       });
       activityUpdatePromise =
         inflightRequests.fetchResponse<ActivityUpdateResponseServerSocketMessage>(
           messageID,
           serverSocketMessageTypes.ACTIVITY_UPDATE_RESPONSE,
         );
     }
 
     const sessionState = this.props.sessionStateFunc();
     const { sessionIdentification } = this.props;
     const initialMessage = {
       type: clientSocketMessageTypes.INITIAL,
       id: messageID,
       payload: {
         clientResponses,
         sessionState,
         sessionIdentification,
       },
     };
     this.initializedWithUserState = this.props.preRequestUserState;
     this.sendMessage(initialMessage);
 
     const stateSyncPromise =
       inflightRequests.fetchResponse<ClientStateSyncServerSocketMessage>(
         messageID,
         serverSocketMessageTypes.STATE_SYNC,
       );
 
     // https://flow.org/try/#1N4Igxg9gdgZglgcxALlAJwKYEMwBcD6aArlLnALYYrgA2WAzvXGCADQgYAeOBARgJ74AJhhhYiNXClzEM7DFCLl602QF92kEdQb8oYAAQwSeONAMAHNBHJx6GAII0aAHgAqyA8AMBqANoA1hj8nvQycFAIALqetpwYQgZqAHwAFAA6UAYGERZEuJ4AJABK2EIA8lA0-O7JrJkAlJ4ACta29i6F5bwAVgCyWBburAa4-BYYEDAGhVgA7lhwuMnJXpnZkFBhlm12GPQGALwGflEA3OsGm9tB-AfH3T0YeAB0t-SpufkNF1lGEGgDKkaBhcDkjgYAAxncEuAzvF4gyK4AAWMLgPh8DTWfw20BuwQh7z8cHOlzxWzBVhsewhX1wgWCZNxOxp9noLzy9BRqWp7QwP0uaku1zBmHoElw9wM80WYNabIwLywzl5u3Zgr+ooMAgAclhKJ5gH4wmgItFYnB4kI1BDgGpftkYACgSCwXAIdDYfDghykQhUejMdjgOSrviwbcib6Sczstk9QaMIz+FEIeLJfRY46kpdMLgiGgsonKL9hVBMrp9EYTGRzPYoEIAJJQJZwFV9fb0LAIDCpEOXN2jfa4BX8nNwaYZEAojDOCDpEAvMJYNBSgDqSx5i4Ci4aA5ZuBHY9pxxP9he4ogNAAbn2ZEQBTny5dZUtWfynDRUt4j2FzxgSSamobAgHeaBMNA1A3pCLwAEwAIwACwvJCIBqEAA
     // $FlowFixMe fixed in Flow 0.214
     const { stateSyncMessage, activityUpdateMessage } = await promiseAll({
       activityUpdateMessage: activityUpdatePromise,
       stateSyncMessage: stateSyncPromise,
     });
 
     if (shouldSendInitialPlatformDetails) {
       this.props.dispatch({
         type: updateLastCommunicatedPlatformDetailsActionType,
         payload: {
           platformDetails: getConfig().platformDetails,
           keyserverID: ashoatKeyserverID,
         },
       });
     }
 
     if (activityUpdateMessage) {
       this.props.dispatch({
         type: updateActivityActionTypes.success,
         payload: {
           activityUpdates: { [ashoatKeyserverID]: queuedActivityUpdates },
           result: activityUpdateMessage.payload,
         },
       });
     }
 
     if (stateSyncMessage.payload.type === stateSyncPayloadTypes.FULL) {
       const { sessionID, type, ...actionPayload } = stateSyncMessage.payload;
       this.props.dispatch({
         type: fullStateSyncActionType,
         payload: {
           ...actionPayload,
           calendarQuery: sessionState.calendarQuery,
           keyserverID: ashoatKeyserverID,
         },
       });
       if (sessionID !== null && sessionID !== undefined) {
         invariant(
           this.initializedWithUserState,
           'initializedWithUserState should be set when state sync received',
         );
         this.props.dispatch({
           type: setNewSessionActionType,
           payload: {
             sessionChange: { cookieInvalidated: false, sessionID },
             preRequestUserState: this.initializedWithUserState,
             error: null,
             logInActionSource: undefined,
             keyserverID: ashoatKeyserverID,
           },
         });
       }
     } else {
       const { type, ...actionPayload } = stateSyncMessage.payload;
       this.props.dispatch({
         type: incrementalStateSyncActionType,
         payload: {
           ...actionPayload,
           calendarQuery: sessionState.calendarQuery,
           keyserverID: ashoatKeyserverID,
         },
       });
     }
 
     const currentAsOf =
       stateSyncMessage.payload.type === stateSyncPayloadTypes.FULL
         ? stateSyncMessage.payload.updatesCurrentAsOf
         : stateSyncMessage.payload.updatesResult.currentAsOf;
     this.sendMessageWithoutID({
       type: clientSocketMessageTypes.ACK_UPDATES,
       payload: { currentAsOf },
     });
 
     this.markSocketInitialized();
   }
 
   initializeSocket: (retriesLeft?: number) => Promise<void> = async (
     retriesLeft = 1,
   ) => {
     try {
       await this.sendInitialMessage();
     } catch (e) {
       if (this.props.noDataAfterPolicyAcknowledgment) {
         this.failuresAfterPolicyAcknowledgment++;
       } else {
         this.failuresAfterPolicyAcknowledgment = 0;
       }
       if (
         this.failuresAfterPolicyAcknowledgment >= 2 &&
         this.props.socketCrashLoopRecovery
       ) {
         this.failuresAfterPolicyAcknowledgment = 0;
         try {
           await this.props.socketCrashLoopRecovery();
         } catch (error) {
           console.log(error);
           this.props.dispatch({
             type: setConnectionIssueActionType,
             payload: {
               keyserverID: ashoatKeyserverID,
               connectionIssue: 'policy_acknowledgement_socket_crash_loop',
             },
           });
         }
         return;
       }
 
       console.log(e);
       const { status } = this.props.connection;
       if (
         e instanceof SocketTimeout ||
         e instanceof SocketOffline ||
         (status !== 'connecting' && status !== 'reconnecting')
       ) {
         // This indicates that the socket will be closed. Do nothing, since the
         // connection status update will trigger a reconnect.
       } else if (
         retriesLeft === 0 ||
         (e instanceof ServerError && e.message !== 'unknown_error')
       ) {
         if (e.message === 'not_logged_in') {
           this.props.dispatch({
             type: setConnectionIssueActionType,
             payload: {
               keyserverID: ashoatKeyserverID,
               connectionIssue: 'not_logged_in_error',
             },
           });
         } else if (this.socket) {
           this.socket.close();
         }
       } else {
         await this.initializeSocket(retriesLeft - 1);
       }
     }
   };
 
   stopPing() {
     if (this.pingTimeoutID) {
       clearTimeout(this.pingTimeoutID);
       this.pingTimeoutID = null;
     }
   }
 
   resetPing() {
     this.stopPing();
     const socket = this.socket;
     this.messageLastReceived = Date.now();
     this.pingTimeoutID = setTimeout(() => {
       if (this.socket === socket) {
         void this.sendPing();
       }
     }, pingFrequency);
   }
 
   async sendPing() {
     if (this.props.connection.status !== 'connected') {
       // This generally shouldn't happen because anything that changes the
       // connection status should call stopPing(), but it's good to make sure
       return;
     }
     const messageID = this.sendMessageWithoutID({
       type: clientSocketMessageTypes.PING,
     });
     try {
       invariant(
         this.state.inflightRequests,
         'inflightRequests falsey inside sendPing',
       );
       await this.state.inflightRequests.fetchResponse<PongServerSocketMessage>(
         messageID,
         serverSocketMessageTypes.PONG,
       );
     } catch (e) {}
   }
 
   setLateResponse: (messageID: number, isLate: boolean) => void = (
     messageID,
     isLate,
   ) => {
     this.props.dispatch({
       type: setLateResponseActionType,
       payload: { messageID, isLate, keyserverID: ashoatKeyserverID },
     });
   };
 
   cleanUpServerTerminatedSocket() {
     if (this.socket && this.socket.readyState < 2) {
       this.socket.close();
     } else {
       this.onClose();
     }
   }
 
   detectUnsupervisedBackground: (alreadyClosed: boolean) => boolean =
     alreadyClosed => {
       // On native, sometimes the app is backgrounded without the proper
       // callbacks getting triggered. This leaves us in an incorrect state for
       // two reasons:
       // (1) The connection is still considered to be active, causing API
       //     requests to be processed via socket and failing.
       // (2) We rely on flipping foreground state in Redux to detect activity
       //     changes, and thus won't think we need to update activity.
       if (
         this.props.connection.status !== 'connected' ||
         !this.messageLastReceived ||
         this.messageLastReceived + serverRequestSocketTimeout >= Date.now() ||
         (actionLogger.mostRecentActionTime &&
           actionLogger.mostRecentActionTime + 3000 < Date.now())
       ) {
         return false;
       }
       if (!alreadyClosed) {
         this.cleanUpServerTerminatedSocket();
       }
       this.props.dispatch({
         type: unsupervisedBackgroundActionType,
         payload: { keyserverID: ashoatKeyserverID },
       });
       return true;
     };
 }
 
 export default Socket;
diff --git a/lib/utils/action-utils.js b/lib/utils/action-utils.js
index eb17a5529..38c364405 100644
--- a/lib/utils/action-utils.js
+++ b/lib/utils/action-utils.js
@@ -1,509 +1,402 @@
 // @flow
 
 import invariant from 'invariant';
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import { createSelector } from 'reselect';
 
 import callServerEndpoint from './call-server-endpoint.js';
 import type {
   CallServerEndpoint,
   CallServerEndpointOptions,
 } from './call-server-endpoint.js';
 import { getConfig } from './config.js';
 import { promiseAll } from './promises.js';
+import { wrapActionPromise } from './redux-promise-utils.js';
 import { useSelector, useDispatch } from './redux-utils.js';
 import { usingCommServicesAccessToken } from './services-utils.js';
 import { ashoatKeyserverID } from './validation-utils.js';
 import {
   type ActionTypes,
   setNewSession,
 } from '../keyserver-conn/keyserver-conn-types.js';
 import { serverCallStateSelector } from '../selectors/server-calls.js';
 import {
   logInActionSources,
   type LogInActionSource,
   type LogInStartingPayload,
   type LogInResult,
 } from '../types/account-types.js';
 import type { PlatformDetails } from '../types/device-types.js';
 import type { Endpoint, SocketAPIHandler } from '../types/endpoints.js';
-import type { LoadingOptions, LoadingInfo } from '../types/loading-types.js';
-import type {
-  ActionPayload,
-  Dispatch,
-  PromisedAction,
-  BaseAction,
-} from '../types/redux-types.js';
+import type { Dispatch } from '../types/redux-types.js';
 import type { ClientSessionChange } from '../types/session-types.js';
 import type { CurrentUserInfo } from '../types/user-types.js';
 
-let nextPromiseIndex = 0;
-
-function wrapActionPromise<
-  STARTED_ACTION_TYPE: string,
-  STARTED_PAYLOAD: ActionPayload,
-  SUCCESS_ACTION_TYPE: string,
-  SUCCESS_PAYLOAD: ActionPayload,
-  FAILED_ACTION_TYPE: string,
->(
-  actionTypes: ActionTypes<
-    STARTED_ACTION_TYPE,
-    SUCCESS_ACTION_TYPE,
-    FAILED_ACTION_TYPE,
-  >,
-  promise: Promise<SUCCESS_PAYLOAD>,
-  loadingOptions: ?LoadingOptions,
-  startingPayload: ?STARTED_PAYLOAD,
-): PromisedAction {
-  const loadingInfo: LoadingInfo = {
-    fetchIndex: nextPromiseIndex++,
-    trackMultipleRequests: !!loadingOptions?.trackMultipleRequests,
-    customKeyName: loadingOptions?.customKeyName || null,
-  };
-  return async (dispatch: Dispatch): Promise<void> => {
-    const startAction = startingPayload
-      ? {
-          type: (actionTypes.started: STARTED_ACTION_TYPE),
-          loadingInfo,
-          payload: (startingPayload: STARTED_PAYLOAD),
-        }
-      : {
-          type: (actionTypes.started: STARTED_ACTION_TYPE),
-          loadingInfo,
-        };
-    dispatch(startAction);
-    try {
-      const result = await promise;
-      dispatch({
-        type: (actionTypes.success: SUCCESS_ACTION_TYPE),
-        payload: (result: SUCCESS_PAYLOAD),
-        loadingInfo,
-      });
-    } catch (e) {
-      console.log(e);
-      dispatch({
-        type: (actionTypes.failed: FAILED_ACTION_TYPE),
-        error: true,
-        payload: (e: Error),
-        loadingInfo,
-      });
-    }
-  };
-}
-
-export type DispatchActionPromise = <
-  STARTED: BaseAction,
-  SUCCESS: BaseAction,
-  FAILED: BaseAction,
->(
-  actionTypes: ActionTypes<
-    $PropertyType<STARTED, 'type'>,
-    $PropertyType<SUCCESS, 'type'>,
-    $PropertyType<FAILED, 'type'>,
-  >,
-  promise: Promise<$PropertyType<SUCCESS, 'payload'>>,
-  loadingOptions?: LoadingOptions,
-  startingPayload?: $PropertyType<STARTED, 'payload'>,
-) => Promise<void>;
-
-function useDispatchActionPromise(): DispatchActionPromise {
-  const dispatch = useDispatch();
-  return React.useMemo(() => createDispatchActionPromise(dispatch), [dispatch]);
-}
-
-function createDispatchActionPromise(dispatch: Dispatch) {
-  const dispatchActionPromise = function <
-    STARTED: BaseAction,
-    SUCCESS: BaseAction,
-    FAILED: BaseAction,
-  >(
-    actionTypes: ActionTypes<
-      $PropertyType<STARTED, 'type'>,
-      $PropertyType<SUCCESS, 'type'>,
-      $PropertyType<FAILED, 'type'>,
-    >,
-    promise: Promise<$PropertyType<SUCCESS, 'payload'>>,
-    loadingOptions?: LoadingOptions,
-    startingPayload?: $PropertyType<STARTED, 'payload'>,
-  ): Promise<void> {
-    return dispatch(
-      wrapActionPromise(actionTypes, promise, loadingOptions, startingPayload),
-    );
-  };
-  return dispatchActionPromise;
-}
-
-export type DispatchFunctions = {
-  +dispatch: Dispatch,
-  +dispatchActionPromise: DispatchActionPromise,
-};
-
 let currentlyWaitingForNewCookie = false;
 let serverEndpointCallsWaitingForNewCookie: ((
   callServerEndpoint: ?CallServerEndpoint,
 ) => void)[] = [];
 
 // This function is a shortcut that tells us whether it's worth even trying to
 // call resolveKeyserverSessionInvalidation
 function canResolveKeyserverSessionInvalidation() {
   if (usingCommServicesAccessToken) {
     // We can always try to resolve a keyserver session invalidation
     // automatically using the Olm auth responder
     return true;
   }
   const { resolveKeyserverSessionInvalidationUsingNativeCredentials } =
     getConfig();
   // If we can't use the Olm auth responder, then we can only resolve a
   // keyserver session invalidation on native, where we have access to the
   // user's native credentials. Note that we can't do this for ETH users, but we
   // don't know if the user is an ETH user from this function
   return !!resolveKeyserverSessionInvalidationUsingNativeCredentials;
 }
 
 // This function attempts to resolve an invalid keyserver session. A session can
 // become invalid when a keyserver invalidates it, or due to inconsistent client
 // state. If the client is usingCommServicesAccessToken, then the invalidation
 // recovery will try to go through the keyserver's Olm auth responder.
 // Otherwise, it will attempt to use the user's credentials to log in with the
 // legacy auth responder, which won't work on web and won't work for ETH users.
 async function resolveKeyserverSessionInvalidation(
   dispatch: Dispatch,
   cookie: ?string,
   urlPrefix: string,
   logInActionSource: LogInActionSource,
   keyserverID: string,
   getInitialNotificationsEncryptedMessage?: () => Promise<string>,
 ): Promise<?ClientSessionChange> {
   const { resolveKeyserverSessionInvalidationUsingNativeCredentials } =
     getConfig();
   if (!resolveKeyserverSessionInvalidationUsingNativeCredentials) {
     return null;
   }
   let newSessionChange = null;
   let callServerEndpointCallback = null;
   const boundCallServerEndpoint = async (
     endpoint: Endpoint,
     data: { +[key: string]: mixed },
     options?: ?CallServerEndpointOptions,
   ) => {
     const innerBoundSetNewSession = (
       sessionChange: ClientSessionChange,
       error: ?string,
     ) => {
       newSessionChange = sessionChange;
       setNewSession(
         dispatch,
         sessionChange,
         null,
         error,
         logInActionSource,
         keyserverID,
       );
     };
     try {
       const result = await callServerEndpoint(
         cookie,
         innerBoundSetNewSession,
         () => new Promise(r => r(null)),
         () => new Promise(r => r(null)),
         urlPrefix,
         null,
         false,
         null,
         null,
         endpoint,
         data,
         dispatch,
         options,
         false,
         keyserverID,
       );
       if (callServerEndpointCallback) {
         callServerEndpointCallback(!!newSessionChange);
       }
       return result;
     } catch (e) {
       if (callServerEndpointCallback) {
         callServerEndpointCallback(!!newSessionChange);
       }
       throw e;
     }
   };
 
   const boundCallKeyserverEndpoint = (
     endpoint: Endpoint,
     requests: { +[keyserverID: string]: ?{ +[string]: mixed } },
     options?: ?CallServerEndpointOptions,
   ) => {
     if (requests[keyserverID]) {
       const promises = {
         [keyserverID]: boundCallServerEndpoint(
           endpoint,
           requests[keyserverID],
           options,
         ),
       };
       return promiseAll(promises);
     }
     return Promise.resolve({});
   };
 
   const dispatchRecoveryAttempt = (
     actionTypes: ActionTypes<
       'LOG_IN_STARTED',
       'LOG_IN_SUCCESS',
       'LOG_IN_FAILED',
     >,
     promise: Promise<LogInResult>,
     inputStartingPayload: LogInStartingPayload,
   ) => {
     const startingPayload = { ...inputStartingPayload, logInActionSource };
     void dispatch(
       wrapActionPromise(actionTypes, promise, null, startingPayload),
     );
     return new Promise<boolean>(r => (callServerEndpointCallback = r));
   };
   await resolveKeyserverSessionInvalidationUsingNativeCredentials(
     boundCallServerEndpoint,
     boundCallKeyserverEndpoint,
     dispatchRecoveryAttempt,
     logInActionSource,
     keyserverID,
     getInitialNotificationsEncryptedMessage,
   );
   return newSessionChange;
 }
 
 // Third param is optional and gets called with newCookie if we get a new cookie
 // Necessary to propagate cookie in cookieInvalidationRecovery below
 function bindCookieAndUtilsIntoCallServerEndpoint(
   params: BindServerCallsParams,
 ): CallServerEndpoint {
   const {
     dispatch,
     cookie,
     urlPrefix,
     sessionID,
     currentUserInfo,
     isSocketConnected,
     lastCommunicatedPlatformDetails,
     keyserverID,
   } = params;
   const loggedIn = !!(currentUserInfo && !currentUserInfo.anonymous && true);
   const boundSetNewSession = (
     sessionChange: ClientSessionChange,
     error: ?string,
   ) =>
     setNewSession(
       dispatch,
       sessionChange,
       {
         currentUserInfo,
         cookiesAndSessions: { [keyserverID]: { cookie, sessionID } },
       },
       error,
       undefined,
       keyserverID,
     );
   const canResolveInvalidation = canResolveKeyserverSessionInvalidation();
   // This function gets called before callServerEndpoint sends a request,
   // to make sure that we're not in the middle of trying to recover
   // an invalidated cookie
   const waitIfCookieInvalidated = () => {
     if (!canResolveInvalidation) {
       // If there is no way to resolve the session invalidation,
       // just let the caller callServerEndpoint instance continue
       return Promise.resolve(null);
     }
     if (!currentlyWaitingForNewCookie) {
       // Our cookie seems to be valid
       return Promise.resolve(null);
     }
     // Wait to run until we get our new cookie
     return new Promise<?CallServerEndpoint>(r =>
       serverEndpointCallsWaitingForNewCookie.push(r),
     );
   };
   // This function is a helper for the next function defined below
   const attemptToResolveInvalidation = async (
     sessionChange: ClientSessionChange,
   ) => {
     const newAnonymousCookie = sessionChange.cookie;
     const newSessionChange = await resolveKeyserverSessionInvalidation(
       dispatch,
       newAnonymousCookie,
       urlPrefix,
       logInActionSources.cookieInvalidationResolutionAttempt,
       keyserverID,
     );
 
     currentlyWaitingForNewCookie = false;
     const currentWaitingCalls = serverEndpointCallsWaitingForNewCookie;
     serverEndpointCallsWaitingForNewCookie = [];
 
     const newCallServerEndpoint = newSessionChange
       ? bindCookieAndUtilsIntoCallServerEndpoint({
           ...params,
           cookie: newSessionChange.cookie,
           sessionID: newSessionChange.sessionID,
           currentUserInfo: newSessionChange.currentUserInfo,
         })
       : null;
     for (const func of currentWaitingCalls) {
       func(newCallServerEndpoint);
     }
     return newCallServerEndpoint;
   };
   // If this function is called, callServerEndpoint got a response invalidating
   // its cookie, and is wondering if it should just like... give up?
   // Or if there's a chance at redemption
   const cookieInvalidationRecovery = (sessionChange: ClientSessionChange) => {
     if (!canResolveInvalidation) {
       // If there is no way to resolve the session invalidation,
       // just let the caller callServerEndpoint instance continue
       return Promise.resolve(null);
     }
     if (!loggedIn) {
       // We don't want to attempt any use native credentials of a logged out
       // user to log-in after a cookieInvalidation while logged out
       return Promise.resolve(null);
     }
     if (currentlyWaitingForNewCookie) {
       return new Promise<?CallServerEndpoint>(r =>
         serverEndpointCallsWaitingForNewCookie.push(r),
       );
     }
     currentlyWaitingForNewCookie = true;
     return attemptToResolveInvalidation(sessionChange);
   };
 
   return (
     endpoint: Endpoint,
     data: Object,
     options?: ?CallServerEndpointOptions,
   ) =>
     callServerEndpoint(
       cookie,
       boundSetNewSession,
       waitIfCookieInvalidated,
       cookieInvalidationRecovery,
       urlPrefix,
       sessionID,
       isSocketConnected,
       lastCommunicatedPlatformDetails,
       socketAPIHandler,
       endpoint,
       data,
       dispatch,
       options,
       loggedIn,
       keyserverID,
     );
 }
 
 export type ActionFunc<F> = (callServerEndpoint: CallServerEndpoint) => F;
 export type BindServerCall = <F>(serverCall: ActionFunc<F>) => F;
 export type BindServerCallsParams = {
   +dispatch: Dispatch,
   +cookie: ?string,
   +urlPrefix: string,
   +sessionID: ?string,
   +currentUserInfo: ?CurrentUserInfo,
   +isSocketConnected: boolean,
   +lastCommunicatedPlatformDetails: ?PlatformDetails,
   +keyserverID: string,
 };
 
 // All server calls needs to include some information from the Redux state
 // (namely, the cookie). This information is used deep in the server call,
 // at the point where callServerEndpoint is called. We don't want to bother
 // propagating the cookie (and any future config info that callServerEndpoint
 // needs) through to the server calls so they can pass it to callServerEndpoint.
 // Instead, we "curry" the cookie onto callServerEndpoint within react-redux's
 // connect's mapStateToProps function, and then pass that "bound"
 // callServerEndpoint that no longer needs the cookie as a parameter on to
 // the server call.
 const baseCreateBoundServerCallsSelector = <F>(
   actionFunc: ActionFunc<F>,
 ): (BindServerCallsParams => F) =>
   createSelector(
     (state: BindServerCallsParams) => state.dispatch,
     (state: BindServerCallsParams) => state.cookie,
     (state: BindServerCallsParams) => state.urlPrefix,
     (state: BindServerCallsParams) => state.sessionID,
     (state: BindServerCallsParams) => state.currentUserInfo,
     (state: BindServerCallsParams) => state.isSocketConnected,
     (state: BindServerCallsParams) => state.lastCommunicatedPlatformDetails,
     (state: BindServerCallsParams) => state.keyserverID,
     (
       dispatch: Dispatch,
       cookie: ?string,
       urlPrefix: string,
       sessionID: ?string,
       currentUserInfo: ?CurrentUserInfo,
       isSocketConnected: boolean,
       lastCommunicatedPlatformDetails: ?PlatformDetails,
       keyserverID: string,
     ) => {
       const boundCallServerEndpoint = bindCookieAndUtilsIntoCallServerEndpoint({
         dispatch,
         cookie,
         urlPrefix,
         sessionID,
         currentUserInfo,
         isSocketConnected,
         lastCommunicatedPlatformDetails,
         keyserverID,
       });
       return actionFunc(boundCallServerEndpoint);
     },
   );
 
 type CreateBoundServerCallsSelectorType = <F>(
   ActionFunc<F>,
 ) => BindServerCallsParams => F;
 const createBoundServerCallsSelector: CreateBoundServerCallsSelectorType =
   (_memoize(baseCreateBoundServerCallsSelector): any);
 
 function useServerCall<F>(
   serverCall: ActionFunc<F>,
   paramOverride?: ?Partial<BindServerCallsParams>,
 ): F {
   const dispatch = useDispatch();
   const serverCallState = useSelector(
     serverCallStateSelector(ashoatKeyserverID),
   );
   return React.useMemo(() => {
     const { urlPrefix, isSocketConnected } = serverCallState;
     invariant(
       !!urlPrefix &&
         isSocketConnected !== undefined &&
         isSocketConnected !== null,
       'keyserver missing from keyserverStore',
     );
 
     return createBoundServerCallsSelector(serverCall)({
       ...serverCallState,
       urlPrefix,
       isSocketConnected,
       dispatch,
       ...paramOverride,
       keyserverID: ashoatKeyserverID,
     });
   }, [serverCall, serverCallState, dispatch, paramOverride]);
 }
 
 let socketAPIHandler: ?SocketAPIHandler = null;
 function registerActiveSocket(passedSocketAPIHandler: ?SocketAPIHandler) {
   socketAPIHandler = passedSocketAPIHandler;
 }
 
 export {
-  useDispatchActionPromise,
   resolveKeyserverSessionInvalidation,
   createBoundServerCallsSelector,
   registerActiveSocket,
   useServerCall,
   bindCookieAndUtilsIntoCallServerEndpoint,
 };
diff --git a/lib/utils/policy-acknowledge-utlis.js b/lib/utils/policy-acknowledge-utlis.js
index d8466472a..d482f651c 100644
--- a/lib/utils/policy-acknowledge-utlis.js
+++ b/lib/utils/policy-acknowledge-utlis.js
@@ -1,32 +1,32 @@
 // @flow
 
-import type { DispatchActionPromise } from './action-utils.js';
+import type { DispatchActionPromise } from './redux-promise-utils.js';
 import { policyAcknowledgmentActionTypes } from '../actions/user-actions.js';
 import type { PolicyType } from '../facts/policies.js';
 import type { PolicyAcknowledgmentRequest } from '../types/account-types.js';
 
 function acknowledgePolicy(
   policy: PolicyType,
   dispatchActionPromise: DispatchActionPromise,
   acknowledgmentServerCall: (
     request: PolicyAcknowledgmentRequest,
   ) => Promise<void>,
   onError: (message: string) => void,
 ) {
   const acknowledgePolicyPromise = (async () => {
     try {
       await acknowledgmentServerCall({ policy });
       return { policy };
     } catch (e) {
       console.warn('error acknowledging policy', e);
       onError('unknown error');
       throw e;
     }
   })();
   void dispatchActionPromise(
     policyAcknowledgmentActionTypes,
     acknowledgePolicyPromise,
   );
 }
 
 export { acknowledgePolicy };
diff --git a/lib/utils/redux-promise-utils.js b/lib/utils/redux-promise-utils.js
new file mode 100644
index 000000000..019239161
--- /dev/null
+++ b/lib/utils/redux-promise-utils.js
@@ -0,0 +1,111 @@
+// @flow
+
+import * as React from 'react';
+
+import { useDispatch } from './redux-utils.js';
+import type { ActionTypes } from '../keyserver-conn/keyserver-conn-types.js';
+import type { LoadingOptions, LoadingInfo } from '../types/loading-types.js';
+import type {
+  ActionPayload,
+  BaseAction,
+  Dispatch,
+  PromisedAction,
+} from '../types/redux-types.js';
+
+let nextPromiseIndex = 0;
+
+function wrapActionPromise<
+  STARTED_ACTION_TYPE: string,
+  STARTED_PAYLOAD: ActionPayload,
+  SUCCESS_ACTION_TYPE: string,
+  SUCCESS_PAYLOAD: ActionPayload,
+  FAILED_ACTION_TYPE: string,
+>(
+  actionTypes: ActionTypes<
+    STARTED_ACTION_TYPE,
+    SUCCESS_ACTION_TYPE,
+    FAILED_ACTION_TYPE,
+  >,
+  promise: Promise<SUCCESS_PAYLOAD>,
+  loadingOptions: ?LoadingOptions,
+  startingPayload: ?STARTED_PAYLOAD,
+): PromisedAction {
+  const loadingInfo: LoadingInfo = {
+    fetchIndex: nextPromiseIndex++,
+    trackMultipleRequests: !!loadingOptions?.trackMultipleRequests,
+    customKeyName: loadingOptions?.customKeyName || null,
+  };
+  return async (dispatch: Dispatch): Promise<void> => {
+    const startAction = startingPayload
+      ? {
+          type: (actionTypes.started: STARTED_ACTION_TYPE),
+          loadingInfo,
+          payload: (startingPayload: STARTED_PAYLOAD),
+        }
+      : {
+          type: (actionTypes.started: STARTED_ACTION_TYPE),
+          loadingInfo,
+        };
+    dispatch(startAction);
+    try {
+      const result = await promise;
+      dispatch({
+        type: (actionTypes.success: SUCCESS_ACTION_TYPE),
+        payload: (result: SUCCESS_PAYLOAD),
+        loadingInfo,
+      });
+    } catch (e) {
+      console.log(e);
+      dispatch({
+        type: (actionTypes.failed: FAILED_ACTION_TYPE),
+        error: true,
+        payload: (e: Error),
+        loadingInfo,
+      });
+    }
+  };
+}
+
+export type DispatchActionPromise = <
+  STARTED: BaseAction,
+  SUCCESS: BaseAction,
+  FAILED: BaseAction,
+>(
+  actionTypes: ActionTypes<
+    $PropertyType<STARTED, 'type'>,
+    $PropertyType<SUCCESS, 'type'>,
+    $PropertyType<FAILED, 'type'>,
+  >,
+  promise: Promise<$PropertyType<SUCCESS, 'payload'>>,
+  loadingOptions?: LoadingOptions,
+  startingPayload?: $PropertyType<STARTED, 'payload'>,
+) => Promise<void>;
+
+function useDispatchActionPromise(): DispatchActionPromise {
+  const dispatch = useDispatch();
+  return React.useMemo(() => createDispatchActionPromise(dispatch), [dispatch]);
+}
+
+function createDispatchActionPromise(dispatch: Dispatch) {
+  const dispatchActionPromise = function <
+    STARTED: BaseAction,
+    SUCCESS: BaseAction,
+    FAILED: BaseAction,
+  >(
+    actionTypes: ActionTypes<
+      $PropertyType<STARTED, 'type'>,
+      $PropertyType<SUCCESS, 'type'>,
+      $PropertyType<FAILED, 'type'>,
+    >,
+    promise: Promise<$PropertyType<SUCCESS, 'payload'>>,
+    loadingOptions?: LoadingOptions,
+    startingPayload?: $PropertyType<STARTED, 'payload'>,
+  ): Promise<void> {
+    return dispatch(
+      wrapActionPromise(actionTypes, promise, loadingOptions, startingPayload),
+    );
+  };
+  return dispatchActionPromise;
+}
+
+export { wrapActionPromise, useDispatchActionPromise };
diff --git a/native/account/log-in-panel.react.js b/native/account/log-in-panel.react.js
index 5708532cc..00d7c0bc2 100644
--- a/native/account/log-in-panel.react.js
+++ b/native/account/log-in-panel.react.js
@@ -1,398 +1,398 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, StyleSheet, Keyboard, Platform } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import {
   logInActionTypes,
   useLogIn,
   getOlmSessionInitializationDataActionTypes,
 } from 'lib/actions/user-actions.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import {
   validEmailRegex,
   oldValidUsernameRegex,
 } from 'lib/shared/account-utils.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import {
   type LogInInfo,
   type LogInExtraInfo,
   type LogInResult,
   type LogInStartingPayload,
   logInActionSources,
 } from 'lib/types/account-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import {
   useDispatchActionPromise,
   type DispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+} from 'lib/utils/redux-promise-utils.js';
 
 import { TextInput } from './modal-components.react.js';
 import {
   fetchNativeCredentials,
   setNativeCredentials,
 } from './native-credentials.js';
 import { PanelButton, Panel } from './panel-components.react.js';
 import PasswordInput from './password-input.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
 import type { KeyPressEvent } from '../types/react-native.js';
 import { AppOutOfDateAlertDetails } from '../utils/alert-messages.js';
 import Alert from '../utils/alert.js';
 import { nativeNotificationsSessionCreator } from '../utils/crypto-utils.js';
 import type { StateContainer } from '../utils/state-container.js';
 
 export type LogInState = {
   +usernameInputText: ?string,
   +passwordInputText: ?string,
 };
 type BaseProps = {
   +setActiveAlert: (activeAlert: boolean) => void,
   +opacityValue: Animated.Node,
   +logInState: StateContainer<LogInState>,
 };
 type Props = {
   ...BaseProps,
   +loadingStatus: LoadingStatus,
   +logInExtraInfo: () => Promise<LogInExtraInfo>,
   +dispatchActionPromise: DispatchActionPromise,
   +logIn: (logInInfo: LogInInfo) => Promise<LogInResult>,
   +getInitialNotificationsEncryptedMessage: () => Promise<string>,
 };
 class LogInPanel extends React.PureComponent<Props> {
   usernameInput: ?TextInput;
   passwordInput: ?PasswordInput;
 
   componentDidMount() {
     void this.attemptToFetchCredentials();
   }
 
   get usernameInputText(): string {
     return this.props.logInState.state.usernameInputText || '';
   }
 
   get passwordInputText(): string {
     return this.props.logInState.state.passwordInputText || '';
   }
 
   async attemptToFetchCredentials() {
     if (
       this.props.logInState.state.usernameInputText !== null &&
       this.props.logInState.state.usernameInputText !== undefined
     ) {
       return;
     }
     const credentials = await fetchNativeCredentials();
     if (!credentials) {
       return;
     }
     if (
       this.props.logInState.state.usernameInputText !== null &&
       this.props.logInState.state.usernameInputText !== undefined
     ) {
       return;
     }
     this.props.logInState.setState({
       usernameInputText: credentials.username,
       passwordInputText: credentials.password,
     });
   }
 
   render(): React.Node {
     return (
       <Panel opacityValue={this.props.opacityValue}>
         <View style={styles.row}>
           <SWMansionIcon
             name="user-1"
             size={22}
             color="#555"
             style={styles.icon}
           />
           <TextInput
             style={styles.input}
             value={this.usernameInputText}
             onChangeText={this.onChangeUsernameInputText}
             onKeyPress={this.onUsernameKeyPress}
             placeholder="Username"
             autoFocus={Platform.OS !== 'ios'}
             autoCorrect={false}
             autoCapitalize="none"
             keyboardType="ascii-capable"
             textContentType="username"
             autoComplete="username"
             returnKeyType="next"
             blurOnSubmit={false}
             onSubmitEditing={this.focusPasswordInput}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.usernameInputRef}
           />
         </View>
         <View style={styles.row}>
           <SWMansionIcon
             name="lock-on"
             size={22}
             color="#555"
             style={styles.icon}
           />
           <PasswordInput
             style={styles.input}
             value={this.passwordInputText}
             onChangeText={this.onChangePasswordInputText}
             placeholder="Password"
             textContentType="password"
             autoComplete="password"
             autoCapitalize="none"
             returnKeyType="go"
             blurOnSubmit={false}
             onSubmitEditing={this.onSubmit}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.passwordInputRef}
           />
         </View>
         <View style={styles.footer}>
           <PanelButton
             text="LOG IN"
             loadingStatus={this.props.loadingStatus}
             onSubmit={this.onSubmit}
           />
         </View>
       </Panel>
     );
   }
 
   usernameInputRef: (usernameInput: ?TextInput) => void = usernameInput => {
     this.usernameInput = usernameInput;
     if (Platform.OS === 'ios' && usernameInput) {
       setTimeout(() => usernameInput.focus());
     }
   };
 
   focusUsernameInput: () => void = () => {
     invariant(this.usernameInput, 'ref should be set');
     this.usernameInput.focus();
   };
 
   passwordInputRef: (passwordInput: ?PasswordInput) => void = passwordInput => {
     this.passwordInput = passwordInput;
   };
 
   focusPasswordInput: () => void = () => {
     invariant(this.passwordInput, 'ref should be set');
     this.passwordInput.focus();
   };
 
   onChangeUsernameInputText: (text: string) => void = text => {
     this.props.logInState.setState({ usernameInputText: text.trim() });
   };
 
   onUsernameKeyPress: (event: KeyPressEvent) => void = event => {
     const { key } = event.nativeEvent;
     if (
       key.length > 1 &&
       key !== 'Backspace' &&
       key !== 'Enter' &&
       this.passwordInputText.length === 0
     ) {
       this.focusPasswordInput();
     }
   };
 
   onChangePasswordInputText: (text: string) => void = text => {
     this.props.logInState.setState({ passwordInputText: text });
   };
 
   onSubmit: () => Promise<void> = async () => {
     this.props.setActiveAlert(true);
     if (this.usernameInputText.search(validEmailRegex) > -1) {
       Alert.alert(
         'Can’t log in with email',
         'You need to log in with your username now',
         [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
         { cancelable: false },
       );
       return;
     } else if (this.usernameInputText.search(oldValidUsernameRegex) === -1) {
       Alert.alert(
         'Invalid username',
         'Alphanumeric usernames only',
         [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
         { cancelable: false },
       );
       return;
     } else if (this.passwordInputText === '') {
       Alert.alert(
         'Empty password',
         'Password cannot be empty',
         [{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
         { cancelable: false },
       );
       return;
     }
 
     Keyboard.dismiss();
     const extraInfo = await this.props.logInExtraInfo();
     const initialNotificationsEncryptedMessage =
       await this.props.getInitialNotificationsEncryptedMessage();
 
     void this.props.dispatchActionPromise(
       logInActionTypes,
       this.logInAction({ ...extraInfo, initialNotificationsEncryptedMessage }),
       undefined,
       ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
     );
   };
 
   async logInAction(extraInfo: LogInExtraInfo): Promise<LogInResult> {
     try {
       const result = await this.props.logIn({
         ...extraInfo,
         username: this.usernameInputText,
         password: this.passwordInputText,
         logInActionSource: logInActionSources.logInFromNativeForm,
       });
       this.props.setActiveAlert(false);
       await setNativeCredentials({
         username: result.currentUserInfo.username,
         password: this.passwordInputText,
       });
       return result;
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         Alert.alert(
           'Incorrect username or password',
           "Either that user doesn't exist, or the password is incorrect",
           [{ text: 'OK', onPress: this.onUnsuccessfulLoginAlertAckowledged }],
           { cancelable: false },
         );
       } else if (e.message === 'client_version_unsupported') {
         Alert.alert(
           AppOutOfDateAlertDetails.title,
           AppOutOfDateAlertDetails.message,
           [{ text: 'OK', onPress: this.onAppOutOfDateAlertAcknowledged }],
           { cancelable: false },
         );
       } else {
         Alert.alert(
           'Unknown error',
           'Uhh... try again?',
           [{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
           { cancelable: false },
         );
       }
       throw e;
     }
   }
 
   onUnsuccessfulLoginAlertAckowledged: () => void = () => {
     this.props.setActiveAlert(false);
     this.props.logInState.setState(
       {
         usernameInputText: '',
         passwordInputText: '',
       },
       this.focusUsernameInput,
     );
   };
 
   onUsernameAlertAcknowledged: () => void = () => {
     this.props.setActiveAlert(false);
     this.props.logInState.setState(
       {
         usernameInputText: '',
       },
       this.focusUsernameInput,
     );
   };
 
   onPasswordAlertAcknowledged: () => void = () => {
     this.props.setActiveAlert(false);
     this.props.logInState.setState(
       {
         passwordInputText: '',
       },
       this.focusPasswordInput,
     );
   };
 
   onUnknownErrorAlertAcknowledged: () => void = () => {
     this.props.setActiveAlert(false);
     this.props.logInState.setState(
       {
         usernameInputText: '',
         passwordInputText: '',
       },
       this.focusUsernameInput,
     );
   };
 
   onAppOutOfDateAlertAcknowledged: () => void = () => {
     this.props.setActiveAlert(false);
   };
 }
 
 export type InnerLogInPanel = LogInPanel;
 
 const styles = StyleSheet.create({
   footer: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
   },
   icon: {
     bottom: 10,
     left: 4,
     position: 'absolute',
   },
   input: {
     paddingLeft: 35,
   },
   row: {
     marginHorizontal: 24,
   },
 });
 
 const logInLoadingStatusSelector =
   createLoadingStatusSelector(logInActionTypes);
 const olmSessionInitializationDataLoadingStatusSelector =
   createLoadingStatusSelector(getOlmSessionInitializationDataActionTypes);
 
 const ConnectedLogInPanel: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedLogInPanel(props: BaseProps) {
     const logInLoadingStatus = useSelector(logInLoadingStatusSelector);
     const olmSessionInitializationDataLoadingStatus = useSelector(
       olmSessionInitializationDataLoadingStatusSelector,
     );
     const loadingStatus = combineLoadingStatuses(
       logInLoadingStatus,
       olmSessionInitializationDataLoadingStatus,
     );
 
     const logInExtraInfo = useSelector(nativeLogInExtraInfoSelector);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callLogIn = useLogIn();
     const getInitialNotificationsEncryptedMessage =
       useInitialNotificationsEncryptedMessage(
         nativeNotificationsSessionCreator,
       );
 
     return (
       <LogInPanel
         {...props}
         loadingStatus={loadingStatus}
         logInExtraInfo={logInExtraInfo}
         dispatchActionPromise={dispatchActionPromise}
         logIn={callLogIn}
         getInitialNotificationsEncryptedMessage={
           getInitialNotificationsEncryptedMessage
         }
       />
     );
   });
 
 export default ConnectedLogInPanel;
diff --git a/native/account/register-panel.react.js b/native/account/register-panel.react.js
index c83944787..528701638 100644
--- a/native/account/register-panel.react.js
+++ b/native/account/register-panel.react.js
@@ -1,504 +1,504 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   View,
   StyleSheet,
   Platform,
   Keyboard,
   Linking,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
 import {
   registerActionTypes,
   register,
   getOlmSessionInitializationDataActionTypes,
 } from 'lib/actions/user-actions.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import { validUsernameRegex } from 'lib/shared/account-utils.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import type {
   RegisterInfo,
   LogInExtraInfo,
   RegisterResult,
   LogInStartingPayload,
 } from 'lib/types/account-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import {
-  useServerCall,
   useDispatchActionPromise,
   type DispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+} from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import { TextInput } from './modal-components.react.js';
 import { setNativeCredentials } from './native-credentials.js';
 import { PanelButton, Panel } from './panel-components.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
 import type { KeyPressEvent } from '../types/react-native.js';
 import { AppOutOfDateAlertDetails } from '../utils/alert-messages.js';
 import Alert from '../utils/alert.js';
 import { nativeNotificationsSessionCreator } from '../utils/crypto-utils.js';
 import { type StateContainer } from '../utils/state-container.js';
 
 type WritableRegisterState = {
   usernameInputText: string,
   passwordInputText: string,
   confirmPasswordInputText: string,
 };
 export type RegisterState = $ReadOnly<WritableRegisterState>;
 type BaseProps = {
   +setActiveAlert: (activeAlert: boolean) => void,
   +opacityValue: Animated.Node,
   +registerState: StateContainer<RegisterState>,
 };
 type Props = {
   ...BaseProps,
   +loadingStatus: LoadingStatus,
   +logInExtraInfo: () => Promise<LogInExtraInfo>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,
   +getInitialNotificationsEncryptedMessage: () => Promise<string>,
 };
 type State = {
   +confirmPasswordFocused: boolean,
 };
 class RegisterPanel extends React.PureComponent<Props, State> {
   state: State = {
     confirmPasswordFocused: false,
   };
   usernameInput: ?TextInput;
   passwordInput: ?TextInput;
   confirmPasswordInput: ?TextInput;
   passwordBeingAutoFilled = false;
 
   render(): React.Node {
     let confirmPasswordTextInputExtraProps;
     if (
       Platform.OS !== 'ios' ||
       this.state.confirmPasswordFocused ||
       this.props.registerState.state.confirmPasswordInputText.length > 0
     ) {
       confirmPasswordTextInputExtraProps = {
         secureTextEntry: true,
         textContentType: 'password',
       };
     }
 
     let onPasswordKeyPress;
     if (Platform.OS === 'ios') {
       onPasswordKeyPress = this.onPasswordKeyPress;
     }
 
     const privatePolicyNotice = (
       <View style={styles.notice}>
         <Text style={styles.noticeText}>
           By signing up, you agree to our{' '}
           <Text style={styles.hyperlinkText} onPress={this.onTermsOfUsePressed}>
             Terms
           </Text>
           {' & '}
           <Text
             style={styles.hyperlinkText}
             onPress={this.onPrivacyPolicyPressed}
           >
             Privacy Policy
           </Text>
           .
         </Text>
       </View>
     );
 
     return (
       <Panel opacityValue={this.props.opacityValue} style={styles.container}>
         <View style={styles.row}>
           <SWMansionIcon
             name="user-1"
             size={22}
             color="#555"
             style={styles.icon}
           />
           <TextInput
             style={styles.input}
             value={this.props.registerState.state.usernameInputText}
             onChangeText={this.onChangeUsernameInputText}
             placeholder="Username"
             autoFocus={true}
             autoCorrect={false}
             autoCapitalize="none"
             keyboardType="ascii-capable"
             textContentType="username"
             autoComplete="username-new"
             returnKeyType="next"
             blurOnSubmit={false}
             onSubmitEditing={this.focusPasswordInput}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.usernameInputRef}
           />
         </View>
         <View style={styles.row}>
           <SWMansionIcon
             name="lock-on"
             size={22}
             color="#555"
             style={styles.icon}
           />
           <TextInput
             style={styles.input}
             value={this.props.registerState.state.passwordInputText}
             onChangeText={this.onChangePasswordInputText}
             onKeyPress={onPasswordKeyPress}
             placeholder="Password"
             secureTextEntry={true}
             textContentType="password"
             autoComplete="password-new"
             returnKeyType="next"
             blurOnSubmit={false}
             onSubmitEditing={this.focusConfirmPasswordInput}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.passwordInputRef}
           />
         </View>
         <View style={styles.row}>
           <TextInput
             style={styles.input}
             value={this.props.registerState.state.confirmPasswordInputText}
             onChangeText={this.onChangeConfirmPasswordInputText}
             placeholder="Confirm password"
             autoComplete="password-new"
             returnKeyType="go"
             blurOnSubmit={false}
             onSubmitEditing={this.onSubmit}
             onFocus={this.onConfirmPasswordFocus}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.confirmPasswordInputRef}
             {...confirmPasswordTextInputExtraProps}
           />
         </View>
         <View style={styles.footer}>
           {privatePolicyNotice}
           <PanelButton
             text="SIGN UP"
             loadingStatus={this.props.loadingStatus}
             onSubmit={this.onSubmit}
           />
         </View>
       </Panel>
     );
   }
 
   usernameInputRef = (usernameInput: ?TextInput) => {
     this.usernameInput = usernameInput;
   };
 
   passwordInputRef = (passwordInput: ?TextInput) => {
     this.passwordInput = passwordInput;
   };
 
   confirmPasswordInputRef = (confirmPasswordInput: ?TextInput) => {
     this.confirmPasswordInput = confirmPasswordInput;
   };
 
   focusUsernameInput = () => {
     invariant(this.usernameInput, 'ref should be set');
     this.usernameInput.focus();
   };
 
   focusPasswordInput = () => {
     invariant(this.passwordInput, 'ref should be set');
     this.passwordInput.focus();
   };
 
   focusConfirmPasswordInput = () => {
     invariant(this.confirmPasswordInput, 'ref should be set');
     this.confirmPasswordInput.focus();
   };
 
   onTermsOfUsePressed = () => {
     void Linking.openURL('https://comm.app/terms');
   };
 
   onPrivacyPolicyPressed = () => {
     void Linking.openURL('https://comm.app/privacy');
   };
 
   onChangeUsernameInputText = (text: string) => {
     this.props.registerState.setState({ usernameInputText: text });
   };
 
   onChangePasswordInputText = (text: string) => {
     const stateUpdate: Partial<WritableRegisterState> = {};
     stateUpdate.passwordInputText = text;
     if (this.passwordBeingAutoFilled) {
       this.passwordBeingAutoFilled = false;
       stateUpdate.confirmPasswordInputText = text;
     }
     this.props.registerState.setState(stateUpdate);
   };
 
   onPasswordKeyPress = (event: KeyPressEvent) => {
     const { key } = event.nativeEvent;
     if (
       key.length > 1 &&
       key !== 'Backspace' &&
       key !== 'Enter' &&
       this.props.registerState.state.confirmPasswordInputText.length === 0
     ) {
       this.passwordBeingAutoFilled = true;
     }
   };
 
   onChangeConfirmPasswordInputText = (text: string) => {
     this.props.registerState.setState({ confirmPasswordInputText: text });
   };
 
   onConfirmPasswordFocus = () => {
     this.setState({ confirmPasswordFocused: true });
   };
 
   onSubmit = async () => {
     this.props.setActiveAlert(true);
     if (this.props.registerState.state.passwordInputText === '') {
       Alert.alert(
         'Empty password',
         'Password cannot be empty',
         [{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (
       this.props.registerState.state.passwordInputText !==
       this.props.registerState.state.confirmPasswordInputText
     ) {
       Alert.alert(
         'Passwords don’t match',
         'Password fields must contain the same password',
         [{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (
       this.props.registerState.state.usernameInputText.search(
         validUsernameRegex,
       ) === -1
     ) {
       Alert.alert(
         'Invalid username',
         'Usernames must be at least six characters long, start with either a ' +
           'letter or a number, and may contain only letters, numbers, or the ' +
           'characters “-” and “_”',
         [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
         { cancelable: false },
       );
     } else {
       Keyboard.dismiss();
       const extraInfo = await this.props.logInExtraInfo();
       const initialNotificationsEncryptedMessage =
         await this.props.getInitialNotificationsEncryptedMessage();
       void this.props.dispatchActionPromise(
         registerActionTypes,
         this.registerAction({
           ...extraInfo,
           initialNotificationsEncryptedMessage,
         }),
         undefined,
         ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
       );
     }
   };
 
   onPasswordAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
     this.props.registerState.setState(
       {
         passwordInputText: '',
         confirmPasswordInputText: '',
       },
       () => {
         invariant(this.passwordInput, 'ref should exist');
         this.passwordInput.focus();
       },
     );
   };
 
   onUsernameAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
     this.props.registerState.setState(
       {
         usernameInputText: '',
       },
       () => {
         invariant(this.usernameInput, 'ref should exist');
         this.usernameInput.focus();
       },
     );
   };
 
   async registerAction(extraInfo: LogInExtraInfo): Promise<RegisterResult> {
     try {
       const result = await this.props.register({
         ...extraInfo,
         username: this.props.registerState.state.usernameInputText,
         password: this.props.registerState.state.passwordInputText,
       });
       this.props.setActiveAlert(false);
       this.props.dispatch({
         type: setDataLoadedActionType,
         payload: {
           dataLoaded: true,
         },
       });
       await setNativeCredentials({
         username: result.currentUserInfo.username,
         password: this.props.registerState.state.passwordInputText,
       });
       return result;
     } catch (e) {
       if (e.message === 'username_reserved') {
         Alert.alert(
           'Username reserved',
           'This username is currently reserved. Please contact support@' +
             'comm.app if you would like to claim this account.',
           [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
           { cancelable: false },
         );
       } else if (e.message === 'username_taken') {
         Alert.alert(
           'Username taken',
           'An account with that username already exists',
           [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
           { cancelable: false },
         );
       } else if (e.message === 'client_version_unsupported') {
         Alert.alert(
           AppOutOfDateAlertDetails.title,
           AppOutOfDateAlertDetails.message,
           [{ text: 'OK', onPress: this.onAppOutOfDateAlertAcknowledged }],
           { cancelable: false },
         );
       } else {
         Alert.alert(
           'Unknown error',
           'Uhh... try again?',
           [{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
           { cancelable: false },
         );
       }
       throw e;
     }
   }
 
   onUnknownErrorAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
     this.props.registerState.setState(
       {
         usernameInputText: '',
         passwordInputText: '',
         confirmPasswordInputText: '',
       },
       () => {
         invariant(this.usernameInput, 'ref should exist');
         this.usernameInput.focus();
       },
     );
   };
 
   onAppOutOfDateAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
   };
 }
 
 const styles = StyleSheet.create({
   container: {
     zIndex: 2,
   },
   footer: {
     alignItems: 'stretch',
     flexDirection: 'row',
     flexShrink: 1,
     justifyContent: 'space-between',
     paddingLeft: 24,
   },
   hyperlinkText: {
     color: '#036AFF',
     fontWeight: 'bold',
   },
   icon: {
     bottom: 10,
     left: 4,
     position: 'absolute',
   },
   input: {
     paddingLeft: 35,
   },
   notice: {
     alignSelf: 'center',
     display: 'flex',
     flexShrink: 1,
     maxWidth: 190,
     paddingBottom: 18,
     paddingRight: 8,
     paddingTop: 12,
   },
   noticeText: {
     color: '#444',
     fontSize: 13,
     lineHeight: 20,
     textAlign: 'center',
   },
   row: {
     marginHorizontal: 24,
   },
 });
 
 const registerLoadingStatusSelector =
   createLoadingStatusSelector(registerActionTypes);
 const olmSessionInitializationDataLoadingStatusSelector =
   createLoadingStatusSelector(getOlmSessionInitializationDataActionTypes);
 
 const ConnectedRegisterPanel: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedRegisterPanel(props: BaseProps) {
     const registerLoadingStatus = useSelector(registerLoadingStatusSelector);
     const olmSessionInitializationDataLoadingStatus = useSelector(
       olmSessionInitializationDataLoadingStatusSelector,
     );
     const loadingStatus = combineLoadingStatuses(
       registerLoadingStatus,
       olmSessionInitializationDataLoadingStatus,
     );
 
     const logInExtraInfo = useSelector(nativeLogInExtraInfoSelector);
 
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const callRegister = useServerCall(register);
     const getInitialNotificationsEncryptedMessage =
       useInitialNotificationsEncryptedMessage(
         nativeNotificationsSessionCreator,
       );
 
     return (
       <RegisterPanel
         {...props}
         loadingStatus={loadingStatus}
         logInExtraInfo={logInExtraInfo}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         register={callRegister}
         getInitialNotificationsEncryptedMessage={
           getInitialNotificationsEncryptedMessage
         }
       />
     );
   });
 
 export default ConnectedRegisterPanel;
diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js
index 017b6c995..da9d176fd 100644
--- a/native/account/registration/connect-ethereum.react.js
+++ b/native/account/registration/connect-ethereum.react.js
@@ -1,318 +1,316 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import {
   exactSearchUser,
   exactSearchUserActionTypes,
 } from 'lib/actions/user-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { SIWEResult } from 'lib/types/siwe-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { useGetEthereumAccountFromSIWEResult } from './ethereum-utils.js';
 import RegistrationButtonContainer from './registration-button-container.react.js';
 import RegistrationButton from './registration-button.react.js';
 import RegistrationContainer from './registration-container.react.js';
 import RegistrationContentContainer from './registration-content-container.react.js';
 import { RegistrationContext } from './registration-context.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import type { CoolOrNerdMode } from './registration-types.js';
 import {
   type NavigationRoute,
   ExistingEthereumAccountRouteName,
   UsernameSelectionRouteName,
   AvatarSelectionRouteName,
 } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles } from '../../themes/colors.js';
 import EthereumLogoDark from '../../vectors/ethereum-logo-dark.react.js';
 import SIWEPanel from '../siwe-panel.react.js';
 
 const exactSearchUserLoadingStatusSelector = createLoadingStatusSelector(
   exactSearchUserActionTypes,
 );
 
 export type ConnectEthereumParams = {
   +userSelections: {
     +coolOrNerdMode: CoolOrNerdMode,
     +keyserverURL: string,
   },
 };
 
 type PanelState = 'closed' | 'opening' | 'open' | 'closing';
 
 type Props = {
   +navigation: RegistrationNavigationProp<'ConnectEthereum'>,
   +route: NavigationRoute<'ConnectEthereum'>,
 };
 function ConnectEthereum(props: Props): React.Node {
   const { params } = props.route;
   const { userSelections } = props.route.params;
 
   const registrationContext = React.useContext(RegistrationContext);
   invariant(registrationContext, 'registrationContext should be set');
   const { cachedSelections } = registrationContext;
 
   const isNerdMode = userSelections.coolOrNerdMode === 'nerd';
   const styles = useStyles(unboundStyles);
 
   let body;
   if (!isNerdMode) {
     body = (
       <Text style={styles.body}>
         Connecting your Ethereum wallet allows you to use your ENS name and
         avatar in the app. You&rsquo;ll also be able to log in with your wallet
         instead of a password.
       </Text>
     );
   } else {
     body = (
       <>
         <Text style={styles.body}>
           Connecting your Ethereum wallet has three benefits:
         </Text>
         <View style={styles.list}>
           <View style={styles.listItem}>
             <Text style={styles.listItemNumber}>{'1. '}</Text>
             <Text style={styles.listItemContent}>
               Your peers will be able to cryptographically verify that your Comm
               account is associated with your Ethereum wallet.
             </Text>
           </View>
           <View style={styles.listItem}>
             <Text style={styles.listItemNumber}>{'2. '}</Text>
             <Text style={styles.listItemContent}>
               You&rsquo;ll be able to use your ENS name and avatar in the app.
             </Text>
           </View>
           <View style={styles.listItem}>
             <Text style={styles.listItemNumber}>{'3. '}</Text>
             <Text style={styles.listItemContent}>
               You can choose to skip setting a password, and to log in with your
               Ethereum wallet instead.
             </Text>
           </View>
         </View>
       </>
     );
   }
 
   const [panelState, setPanelState] = React.useState<PanelState>('closed');
   const openPanel = React.useCallback(() => {
     setPanelState('opening');
   }, []);
   const onPanelClosed = React.useCallback(() => {
     setPanelState('closed');
   }, []);
   const onPanelClosing = React.useCallback(() => {
     setPanelState('closing');
   }, []);
 
   const siwePanelSetLoading = React.useCallback(
     (loading: boolean) => {
       if (panelState === 'closing' || panelState === 'closed') {
         return;
       }
       setPanelState(loading ? 'opening' : 'open');
     },
     [panelState],
   );
 
   const { navigate } = props.navigation;
   const onSkip = React.useCallback(() => {
     navigate<'UsernameSelection'>({
       name: UsernameSelectionRouteName,
       params,
     });
   }, [navigate, params]);
 
   const { keyserverURL } = userSelections;
   const serverCallParamOverride = React.useMemo(
     () => ({
       urlPrefix: keyserverURL,
     }),
     [keyserverURL],
   );
 
   const exactSearchUserCall = useServerCall(
     exactSearchUser,
     serverCallParamOverride,
   );
   const dispatchActionPromise = useDispatchActionPromise();
 
   const getEthereumAccountFromSIWEResult =
     useGetEthereumAccountFromSIWEResult();
 
   const onSuccessfulWalletSignature = React.useCallback(
     async (result: SIWEResult) => {
       const searchPromise = exactSearchUserCall(result.address);
       void dispatchActionPromise(exactSearchUserActionTypes, searchPromise);
 
       const { userInfo } = await searchPromise;
 
       if (userInfo) {
         navigate<'ExistingEthereumAccount'>({
           name: ExistingEthereumAccountRouteName,
           params: result,
         });
         return;
       }
 
       const ethereumAccount = await getEthereumAccountFromSIWEResult(result);
 
       const newUserSelections = {
         ...userSelections,
         accountSelection: ethereumAccount,
       };
       navigate<'AvatarSelection'>({
         name: AvatarSelectionRouteName,
         params: { userSelections: newUserSelections },
       });
     },
     [
       userSelections,
       exactSearchUserCall,
       dispatchActionPromise,
       navigate,
       getEthereumAccountFromSIWEResult,
     ],
   );
 
   let siwePanel;
   if (panelState !== 'closed') {
     siwePanel = (
       <SIWEPanel
         onClosing={onPanelClosing}
         onClosed={onPanelClosed}
         closing={panelState === 'closing'}
         onSuccessfulWalletSignature={onSuccessfulWalletSignature}
         setLoading={siwePanelSetLoading}
         keyserverCallParamOverride={serverCallParamOverride}
       />
     );
   }
 
   const { ethereumAccount } = cachedSelections;
   const alreadyHasConnected = !!ethereumAccount;
 
   const exactSearchUserCallLoading = useSelector(
     state => exactSearchUserLoadingStatusSelector(state) === 'loading',
   );
   const defaultConnectButtonVariant = alreadyHasConnected
     ? 'outline'
     : 'enabled';
   const connectButtonVariant =
     exactSearchUserCallLoading || panelState === 'opening'
       ? 'loading'
       : defaultConnectButtonVariant;
   const connectButtonText = alreadyHasConnected
     ? 'Connect new Ethereum wallet'
     : 'Connect Ethereum wallet';
 
   const onUseAlreadyConnectedWallet = React.useCallback(() => {
     invariant(
       ethereumAccount,
       'ethereumAccount should be set in onUseAlreadyConnectedWallet',
     );
     const newUserSelections = {
       ...userSelections,
       accountSelection: ethereumAccount,
     };
     navigate<'AvatarSelection'>({
       name: AvatarSelectionRouteName,
       params: { userSelections: newUserSelections },
     });
   }, [ethereumAccount, userSelections, navigate]);
 
   let alreadyConnectedButton;
   if (alreadyHasConnected) {
     alreadyConnectedButton = (
       <RegistrationButton
         onPress={onUseAlreadyConnectedWallet}
         label="Use connected Ethereum wallet"
         variant="enabled"
       />
     );
   }
 
   return (
     <>
       <RegistrationContainer>
         <RegistrationContentContainer style={styles.scrollViewContentContainer}>
           <Text style={styles.header}>
             Do you want to connect an Ethereum wallet?
           </Text>
           {body}
           <View style={styles.ethereumLogoContainer}>
             <EthereumLogoDark />
           </View>
         </RegistrationContentContainer>
         <RegistrationButtonContainer>
           {alreadyConnectedButton}
           <RegistrationButton
             onPress={openPanel}
             label={connectButtonText}
             variant={connectButtonVariant}
           />
           <RegistrationButton
             onPress={onSkip}
             label="Do not connect"
             variant="outline"
           />
         </RegistrationButtonContainer>
       </RegistrationContainer>
       {siwePanel}
     </>
   );
 }
 
 const unboundStyles = {
   scrollViewContentContainer: {
     flexGrow: 1,
   },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 16,
   },
   body: {
     fontFamily: 'Arial',
     fontSize: 15,
     lineHeight: 20,
     color: 'panelForegroundSecondaryLabel',
     paddingBottom: 16,
   },
   ethereumLogoContainer: {
     flexGrow: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
   list: {
     paddingBottom: 16,
   },
   listItem: {
     flexDirection: 'row',
   },
   listItemNumber: {
     fontFamily: 'Arial',
     fontWeight: 'bold',
     fontSize: 15,
     lineHeight: 20,
     color: 'panelForegroundSecondaryLabel',
   },
   listItemContent: {
     fontFamily: 'Arial',
     flexShrink: 1,
     fontSize: 15,
     lineHeight: 20,
     color: 'panelForegroundSecondaryLabel',
   },
 };
 
 export default ConnectEthereum;
diff --git a/native/account/registration/registration-server-call.js b/native/account/registration/registration-server-call.js
index cbc6d43a7..ad5e2c674 100644
--- a/native/account/registration/registration-server-call.js
+++ b/native/account/registration/registration-server-call.js
@@ -1,221 +1,219 @@
 // @flow
 
 import * as React from 'react';
 
 import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
 import { registerActionTypes, register } from 'lib/actions/user-actions.js';
 import type { LogInStartingPayload } from 'lib/types/account-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { setURLPrefix } from 'lib/utils/url-utils.js';
 
 import type {
   RegistrationServerCallInput,
   UsernameAccountSelection,
   AvatarData,
 } from './registration-types.js';
 import {
   useNativeSetUserAvatar,
   useUploadSelectedMedia,
 } from '../../avatars/avatar-hooks.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../../selectors/account-selectors.js';
 import { AppOutOfDateAlertDetails } from '../../utils/alert-messages.js';
 import Alert from '../../utils/alert.js';
 import { setNativeCredentials } from '../native-credentials.js';
 import { useSIWEServerCall } from '../siwe-hooks.js';
 
 // We can't just do everything in one async callback, since the server calls
 // would get bound to Redux state from before the registration. The registration
 // flow has multiple steps where critical Redux state is changed, where
 // subsequent steps depend on accessing the updated Redux state.
 
 // To address this, we break the registration process up into multiple steps.
 // When each step completes we update the currentStep state, and we have Redux
 // selectors that trigger useEffects for subsequent steps when relevant data
 // starts to appear in Redux.
 
 type CurrentStep =
   | { +step: 'inactive' }
   | {
       +step: 'waiting_for_registration_call',
       +avatarData: ?AvatarData,
       +resolve: () => void,
       +reject: Error => void,
     };
 
 const inactiveStep = { step: 'inactive' };
 
 function useRegistrationServerCall(): RegistrationServerCallInput => Promise<void> {
   const [currentStep, setCurrentStep] =
     React.useState<CurrentStep>(inactiveStep);
 
   // STEP 1: ACCOUNT REGISTRATION
 
   const logInExtraInfo = useSelector(nativeLogInExtraInfoSelector);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callRegister = useServerCall(register);
 
   const registerUsernameAccount = React.useCallback(
     async (
       accountSelection: UsernameAccountSelection,
       keyserverURL: string,
     ) => {
       const extraInfo = await logInExtraInfo();
       const registerPromise = (async () => {
         try {
           const result = await callRegister(
             {
               ...extraInfo,
               username: accountSelection.username,
               password: accountSelection.password,
             },
             {
               urlPrefixOverride: keyserverURL,
             },
           );
           await setNativeCredentials({
             username: result.currentUserInfo.username,
             password: accountSelection.password,
           });
           return result;
         } catch (e) {
           if (e.message === 'username_reserved') {
             Alert.alert(
               'Username reserved',
               'This username is currently reserved. Please contact support@' +
                 'comm.app if you would like to claim this account.',
             );
           } else if (e.message === 'username_taken') {
             Alert.alert(
               'Username taken',
               'An account with that username already exists',
             );
           } else if (e.message === 'client_version_unsupported') {
             Alert.alert(
               AppOutOfDateAlertDetails.title,
               AppOutOfDateAlertDetails.message,
             );
           } else {
             Alert.alert('Unknown error', 'Uhh... try again?');
           }
           throw e;
         }
       })();
       void dispatchActionPromise(
         registerActionTypes,
         registerPromise,
         undefined,
         ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
       );
       await registerPromise;
     },
     [logInExtraInfo, callRegister, dispatchActionPromise],
   );
 
   const siweServerCall = useSIWEServerCall();
   const dispatch = useDispatch();
   const returnedFunc = React.useCallback(
     (input: RegistrationServerCallInput) =>
       new Promise<void>(
         // eslint-disable-next-line no-async-promise-executor
         async (resolve, reject) => {
           try {
             if (currentStep.step !== 'inactive') {
               return;
             }
             const { accountSelection, avatarData, keyserverURL } = input;
             if (accountSelection.accountType === 'username') {
               await registerUsernameAccount(accountSelection, keyserverURL);
             } else {
               try {
                 await siweServerCall(accountSelection, {
                   urlPrefixOverride: keyserverURL,
                 });
               } catch (e) {
                 Alert.alert('Unknown error', 'Uhh... try again?');
                 throw e;
               }
             }
             dispatch({
               type: setURLPrefix,
               payload: keyserverURL,
             });
             setCurrentStep({
               step: 'waiting_for_registration_call',
               avatarData,
               resolve,
               reject,
             });
           } catch (e) {
             reject(e);
           }
         },
       ),
     [currentStep, registerUsernameAccount, siweServerCall, dispatch],
   );
 
   // STEP 2: SETTING AVATAR
 
   const uploadSelectedMedia = useUploadSelectedMedia();
   const nativeSetUserAvatar = useNativeSetUserAvatar();
 
   const hasCurrentUserInfo = useSelector(
     state => !!state.currentUserInfo && !state.currentUserInfo.anonymous,
   );
 
   const avatarBeingSetRef = React.useRef(false);
   React.useEffect(() => {
     if (
       !hasCurrentUserInfo ||
       currentStep.step !== 'waiting_for_registration_call' ||
       avatarBeingSetRef.current
     ) {
       return;
     }
     avatarBeingSetRef.current = true;
     const { avatarData, resolve } = currentStep;
     void (async () => {
       try {
         if (!avatarData) {
           return;
         }
         let updateUserAvatarRequest;
         if (!avatarData.needsUpload) {
           ({ updateUserAvatarRequest } = avatarData);
         } else {
           const { mediaSelection } = avatarData;
           updateUserAvatarRequest = await uploadSelectedMedia(mediaSelection);
           if (!updateUserAvatarRequest) {
             return;
           }
         }
         await nativeSetUserAvatar(updateUserAvatarRequest);
       } finally {
         dispatch({
           type: setDataLoadedActionType,
           payload: {
             dataLoaded: true,
           },
         });
         setCurrentStep(inactiveStep);
         avatarBeingSetRef.current = false;
         resolve();
       }
     })();
   }, [
     currentStep,
     hasCurrentUserInfo,
     uploadSelectedMedia,
     nativeSetUserAvatar,
     dispatch,
   ]);
 
   return returnedFunc;
 }
 
 export { useRegistrationServerCall };
diff --git a/native/account/registration/username-selection.react.js b/native/account/registration/username-selection.react.js
index 455d359bc..06bd3407f 100644
--- a/native/account/registration/username-selection.react.js
+++ b/native/account/registration/username-selection.react.js
@@ -1,226 +1,224 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text } from 'react-native';
 
 import {
   exactSearchUser,
   exactSearchUserActionTypes,
 } from 'lib/actions/user-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { validUsernameRegex } from 'lib/shared/account-utils.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import RegistrationButtonContainer from './registration-button-container.react.js';
 import RegistrationButton from './registration-button.react.js';
 import RegistrationContainer from './registration-container.react.js';
 import RegistrationContentContainer from './registration-content-container.react.js';
 import { RegistrationContext } from './registration-context.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import RegistrationTextInput from './registration-text-input.react.js';
 import type { CoolOrNerdMode } from './registration-types.js';
 import {
   type NavigationRoute,
   PasswordSelectionRouteName,
 } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles } from '../../themes/colors.js';
 
 const exactSearchUserLoadingStatusSelector = createLoadingStatusSelector(
   exactSearchUserActionTypes,
 );
 
 export type UsernameSelectionParams = {
   +userSelections: {
     +coolOrNerdMode: CoolOrNerdMode,
     +keyserverURL: string,
   },
 };
 
 type UsernameError = 'username_invalid' | 'username_taken';
 
 type Props = {
   +navigation: RegistrationNavigationProp<'UsernameSelection'>,
   +route: NavigationRoute<'UsernameSelection'>,
 };
 function UsernameSelection(props: Props): React.Node {
   const registrationContext = React.useContext(RegistrationContext);
   invariant(registrationContext, 'registrationContext should be set');
   const { cachedSelections, setCachedSelections } = registrationContext;
 
   const [username, setUsername] = React.useState(
     cachedSelections.username ?? '',
   );
   const validUsername = username.search(validUsernameRegex) > -1;
 
   const [usernameError, setUsernameError] = React.useState<?UsernameError>();
   const checkUsernameValidity = React.useCallback(() => {
     if (!validUsername) {
       setUsernameError('username_invalid');
       return false;
     }
     setUsernameError(null);
     return true;
   }, [validUsername]);
 
   const { userSelections } = props.route.params;
   const { keyserverURL } = userSelections;
   const serverCallParamOverride = React.useMemo(
     () => ({
       urlPrefix: keyserverURL,
     }),
     [keyserverURL],
   );
 
   const exactSearchUserCall = useServerCall(
     exactSearchUser,
     serverCallParamOverride,
   );
   const dispatchActionPromise = useDispatchActionPromise();
   const { navigate } = props.navigation;
   const onProceed = React.useCallback(async () => {
     if (!checkUsernameValidity()) {
       return;
     }
 
     const searchPromise = exactSearchUserCall(username);
     void dispatchActionPromise(exactSearchUserActionTypes, searchPromise);
     const { userInfo } = await searchPromise;
 
     if (userInfo) {
       setUsernameError('username_taken');
       return;
     }
 
     setUsernameError(undefined);
     setCachedSelections(oldUserSelections => ({
       ...oldUserSelections,
       username,
     }));
     navigate<'PasswordSelection'>({
       name: PasswordSelectionRouteName,
       params: {
         userSelections: {
           ...userSelections,
           username,
         },
       },
     });
   }, [
     checkUsernameValidity,
     username,
     exactSearchUserCall,
     dispatchActionPromise,
     setCachedSelections,
     navigate,
     userSelections,
   ]);
 
   const exactSearchUserCallLoading = useSelector(
     state => exactSearchUserLoadingStatusSelector(state) === 'loading',
   );
   let buttonVariant = 'disabled';
   if (exactSearchUserCallLoading) {
     buttonVariant = 'loading';
   } else if (validUsername) {
     buttonVariant = 'enabled';
   }
 
   const styles = useStyles(unboundStyles);
   let errorText;
   if (usernameError === 'username_invalid') {
     errorText = (
       <>
         <Text style={styles.errorText}>Usernames must:</Text>
         <View style={styles.listItem}>
           <Text style={[styles.errorText, styles.listItemNumber]}>{'1. '}</Text>
           <Text style={[styles.errorText, styles.listItemContent]}>
             Be at least one character long.
           </Text>
         </View>
         <View style={styles.listItem}>
           <Text style={[styles.errorText, styles.listItemNumber]}>{'2. '}</Text>
           <Text style={[styles.errorText, styles.listItemContent]}>
             Start with either a letter or a number.
           </Text>
         </View>
         <View style={styles.listItem}>
           <Text style={[styles.errorText, styles.listItemNumber]}>{'3. '}</Text>
           <Text style={[styles.errorText, styles.listItemContent]}>
             Contain only letters, numbers, or the characters “-” and “_”.
           </Text>
         </View>
       </>
     );
   } else if (usernameError === 'username_taken') {
     errorText = (
       <Text style={styles.errorText}>
         Username taken. Please try another one
       </Text>
     );
   }
 
   const shouldAutoFocus = React.useRef(!cachedSelections.username);
   return (
     <RegistrationContainer>
       <RegistrationContentContainer>
         <Text style={styles.header}>Pick a username</Text>
         <RegistrationTextInput
           value={username}
           onChangeText={setUsername}
           placeholder="Username"
           autoFocus={shouldAutoFocus.current}
           autoCorrect={false}
           autoCapitalize="none"
           keyboardType="ascii-capable"
           textContentType="username"
           autoComplete="username-new"
           returnKeyType="go"
           onSubmitEditing={onProceed}
           editable={!exactSearchUserCallLoading}
           onBlur={checkUsernameValidity}
         />
         <View style={styles.error}>{errorText}</View>
       </RegistrationContentContainer>
       <RegistrationButtonContainer>
         <RegistrationButton
           onPress={onProceed}
           label="Next"
           variant={buttonVariant}
         />
       </RegistrationButtonContainer>
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 16,
   },
   error: {
     marginTop: 16,
   },
   errorText: {
     fontFamily: 'Arial',
     fontSize: 15,
     lineHeight: 20,
     color: 'redText',
   },
   listItem: {
     flexDirection: 'row',
   },
   listItemNumber: {
     fontWeight: 'bold',
   },
   listItemContent: {
     flexShrink: 1,
   },
 };
 
 export default UsernameSelection;
diff --git a/native/account/siwe-hooks.js b/native/account/siwe-hooks.js
index 65a4c446b..983017a87 100644
--- a/native/account/siwe-hooks.js
+++ b/native/account/siwe-hooks.js
@@ -1,97 +1,95 @@
 // @flow
 
 import * as React from 'react';
 
 import { siweAuth, siweAuthActionTypes } from 'lib/actions/siwe-actions.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import type {
   LogInStartingPayload,
   LogInExtraInfo,
 } from 'lib/types/account-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import type { CallServerEndpointOptions } from 'lib/utils/call-server-endpoint.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { useSelector } from '../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
 import { nativeNotificationsSessionCreator } from '../utils/crypto-utils.js';
 
 type SIWEServerCallParams = {
   +message: string,
   +signature: string,
   +doNotRegister?: boolean,
   ...
 };
 function useSIWEServerCall(): (
   SIWEServerCallParams,
   ?CallServerEndpointOptions,
 ) => Promise<void> {
   const siweAuthCall = useServerCall(siweAuth);
 
   const callSIWE = React.useCallback(
     (
       message: string,
       signature: string,
       extraInfo: $ReadOnly<{ ...LogInExtraInfo, +doNotRegister?: boolean }>,
       callServerEndpointOptions: ?CallServerEndpointOptions,
     ) =>
       siweAuthCall(
         {
           message,
           signature,
           ...extraInfo,
         },
         callServerEndpointOptions,
       ),
     [siweAuthCall],
   );
 
   const logInExtraInfo = useSelector(nativeLogInExtraInfoSelector);
 
   const getInitialNotificationsEncryptedMessage =
     useInitialNotificationsEncryptedMessage(nativeNotificationsSessionCreator);
 
   const dispatchActionPromise = useDispatchActionPromise();
   return React.useCallback(
     async (
       { message, signature, doNotRegister },
       callServerEndpointOptions,
     ) => {
       const extraInfo = await logInExtraInfo();
       const initialNotificationsEncryptedMessage =
         await getInitialNotificationsEncryptedMessage({
           callServerEndpointOptions,
         });
 
       const siwePromise = callSIWE(
         message,
         signature,
         {
           ...extraInfo,
           initialNotificationsEncryptedMessage,
           doNotRegister,
         },
         callServerEndpointOptions,
       );
 
       void dispatchActionPromise(
         siweAuthActionTypes,
         siwePromise,
         undefined,
         ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
       );
 
       await siwePromise;
     },
     [
       logInExtraInfo,
       dispatchActionPromise,
       callSIWE,
       getInitialNotificationsEncryptedMessage,
     ],
   );
 }
 
 export { useSIWEServerCall };
diff --git a/native/account/siwe-panel.react.js b/native/account/siwe-panel.react.js
index bbd4cc173..dca1cb4bd 100644
--- a/native/account/siwe-panel.react.js
+++ b/native/account/siwe-panel.react.js
@@ -1,228 +1,228 @@
 // @flow
 
 import BottomSheet from '@gorhom/bottom-sheet';
 import * as React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import WebView from 'react-native-webview';
 
 import {
   getSIWENonce,
   getSIWENonceActionTypes,
   siweAuthActionTypes,
 } from 'lib/actions/siwe-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { SIWEWebViewMessage, SIWEResult } from 'lib/types/siwe-types.js';
 import {
   useServerCall,
-  useDispatchActionPromise,
   type BindServerCallsParams,
 } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { useKeyboardHeight } from '../keyboard/keyboard-hooks.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { BottomSheetRef } from '../types/bottom-sheet.js';
 import Alert from '../utils/alert.js';
 import { getContentSigningKey } from '../utils/crypto-utils.js';
 import { defaultLandingURLPrefix } from '../utils/url-utils.js';
 
 const commSIWE = `${defaultLandingURLPrefix}/siwe`;
 
 const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector(
   getSIWENonceActionTypes,
 );
 const siweAuthLoadingStatusSelector =
   createLoadingStatusSelector(siweAuthActionTypes);
 
 type WebViewMessageEvent = {
   +nativeEvent: {
     +data: string,
     ...
   },
   ...
 };
 
 type Props = {
   +onClosed: () => mixed,
   +onClosing: () => mixed,
   +onSuccessfulWalletSignature: SIWEResult => mixed,
   +closing: boolean,
   +setLoading: boolean => mixed,
   +keyserverCallParamOverride?: Partial<BindServerCallsParams>,
 };
 function SIWEPanel(props: Props): React.Node {
   const dispatchActionPromise = useDispatchActionPromise();
   const getSIWENonceCall = useServerCall(
     getSIWENonce,
     props.keyserverCallParamOverride,
   );
 
   const getSIWENonceCallFailed = useSelector(
     state => getSIWENonceLoadingStatusSelector(state) === 'error',
   );
 
   const { onClosing } = props;
   React.useEffect(() => {
     if (getSIWENonceCallFailed) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: onClosing }],
         { cancelable: false },
       );
     }
   }, [getSIWENonceCallFailed, onClosing]);
 
   const siweAuthCallLoading = useSelector(
     state => siweAuthLoadingStatusSelector(state) === 'loading',
   );
 
   const [nonce, setNonce] = React.useState<?string>(null);
   const [primaryIdentityPublicKey, setPrimaryIdentityPublicKey] =
     React.useState<?string>(null);
 
   React.useEffect(() => {
     void (async () => {
       void dispatchActionPromise(
         getSIWENonceActionTypes,
         (async () => {
           const response = await getSIWENonceCall();
           setNonce(response);
         })(),
       );
       const ed25519 = await getContentSigningKey();
       setPrimaryIdentityPublicKey(ed25519);
     })();
   }, [dispatchActionPromise, getSIWENonceCall]);
 
   const [isLoading, setLoading] = React.useState(true);
   const [walletConnectModalHeight, setWalletConnectModalHeight] =
     React.useState(0);
   const insets = useSafeAreaInsets();
   const keyboardHeight = useKeyboardHeight();
   const bottomInset = insets.bottom;
   const snapPoints = React.useMemo(() => {
     if (isLoading) {
       return [1];
     } else if (walletConnectModalHeight) {
       const baseHeight =
         bottomInset + walletConnectModalHeight + keyboardHeight;
       if (baseHeight < 400) {
         return [baseHeight - 10];
       } else {
         return [baseHeight + 5];
       }
     } else {
       const baseHeight = bottomInset + keyboardHeight;
       return [baseHeight + 435, baseHeight + 600];
     }
   }, [isLoading, walletConnectModalHeight, bottomInset, keyboardHeight]);
 
   const bottomSheetRef = React.useRef<?BottomSheetRef>();
   const snapToIndex = bottomSheetRef.current?.snapToIndex;
   React.useEffect(() => {
     // When the snapPoints change, always reset to the first one
     // Without this, when we close the WalletConnect modal we don't resize
     snapToIndex?.(0);
   }, [snapToIndex, snapPoints]);
 
   const closeBottomSheet = bottomSheetRef.current?.close;
   const { closing, onSuccessfulWalletSignature } = props;
   const handleMessage = React.useCallback(
     async (event: WebViewMessageEvent) => {
       const data: SIWEWebViewMessage = JSON.parse(event.nativeEvent.data);
       if (data.type === 'siwe_success') {
         const { address, message, signature } = data;
         if (address && signature) {
           closeBottomSheet?.();
           await onSuccessfulWalletSignature({ address, message, signature });
         }
       } else if (data.type === 'siwe_closed') {
         onClosing();
         closeBottomSheet?.();
       } else if (data.type === 'walletconnect_modal_update') {
         const height = data.state === 'open' ? data.height : 0;
         setWalletConnectModalHeight(height);
       }
     },
     [onSuccessfulWalletSignature, onClosing, closeBottomSheet],
   );
   const prevClosingRef = React.useRef<?boolean>();
   React.useEffect(() => {
     if (closing && !prevClosingRef.current) {
       closeBottomSheet?.();
     }
     prevClosingRef.current = closing;
   }, [closing, closeBottomSheet]);
 
   const source = React.useMemo(
     () => ({
       uri: commSIWE,
       headers: {
         'siwe-nonce': nonce,
         'siwe-primary-identity-public-key': primaryIdentityPublicKey,
       },
     }),
     [nonce, primaryIdentityPublicKey],
   );
 
   const onWebViewLoaded = React.useCallback(() => {
     setLoading(false);
   }, []);
 
   const walletConnectModalOpen = walletConnectModalHeight !== 0;
   const backgroundStyle = React.useMemo(
     () => ({
       backgroundColor: walletConnectModalOpen ? '#3396ff' : '#242529',
     }),
     [walletConnectModalOpen],
   );
 
   const bottomSheetHandleIndicatorStyle = React.useMemo(
     () => ({
       backgroundColor: 'white',
     }),
     [],
   );
 
   const { onClosed } = props;
   const onBottomSheetChange = React.useCallback(
     (index: number) => {
       if (index === -1) {
         onClosed();
       }
     },
     [onClosed],
   );
 
   let bottomSheet;
   if (nonce && primaryIdentityPublicKey) {
     bottomSheet = (
       <BottomSheet
         snapPoints={snapPoints}
         backgroundStyle={backgroundStyle}
         handleIndicatorStyle={bottomSheetHandleIndicatorStyle}
         enablePanDownToClose={true}
         onChange={onBottomSheetChange}
         ref={bottomSheetRef}
       >
         <WebView
           source={source}
           onMessage={handleMessage}
           onLoad={onWebViewLoaded}
           style={backgroundStyle}
           incognito={true}
         />
       </BottomSheet>
     );
   }
 
   const setLoadingProp = props.setLoading;
   const loading = !getSIWENonceCallFailed && (isLoading || siweAuthCallLoading);
   React.useEffect(() => {
     setLoadingProp(loading);
   }, [setLoadingProp, loading]);
 
   return bottomSheet;
 }
 
 export default SIWEPanel;
diff --git a/native/account/terms-and-privacy-modal.react.js b/native/account/terms-and-privacy-modal.react.js
index 27d153dab..7d96fee7b 100644
--- a/native/account/terms-and-privacy-modal.react.js
+++ b/native/account/terms-and-privacy-modal.react.js
@@ -1,190 +1,188 @@
 // @flow
 
 import { useIsFocused } from '@react-navigation/native';
 import * as React from 'react';
 import {
   ActivityIndicator,
   BackHandler,
   Linking,
   Platform,
   Text,
   View,
 } from 'react-native';
 
 import {
   policyAcknowledgment,
   policyAcknowledgmentActionTypes,
 } from 'lib/actions/user-actions.js';
 import { type PolicyType, policyTypes } from 'lib/facts/policies.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import { acknowledgePolicy } from 'lib/utils/policy-acknowledge-utlis.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import Button from '../components/button.react.js';
 import Modal from '../components/modal.react.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 
 export type TermsAndPrivacyModalParams = {
   +policyType: PolicyType,
 };
 
 type Props = {
   +navigation: RootNavigationProp<'TermsAndPrivacyModal'>,
   +route: NavigationRoute<'TermsAndPrivacyModal'>,
 };
 
 const loadingStatusSelector = createLoadingStatusSelector(
   policyAcknowledgmentActionTypes,
 );
 
 function TermsAndPrivacyModal(props: Props): React.Node {
   const loadingStatus = useSelector(loadingStatusSelector);
   const [acknowledgmentError, setAcknowledgmentError] = React.useState('');
   const sendAcknowledgmentRequest = useServerCall(policyAcknowledgment);
   const dispatchActionPromise = useDispatchActionPromise();
 
   const policyType = props.route.params.policyType;
   const policyState = useSelector(store => store.userPolicies[policyType]);
   const isAcknowledged = policyState?.isAcknowledged;
   const isFocused = useIsFocused();
 
   React.useEffect(() => {
     if (isAcknowledged && isFocused) {
       props.navigation.goBack();
     }
   }, [isAcknowledged, props.navigation, isFocused]);
 
   const onAccept = React.useCallback(() => {
     acknowledgePolicy(
       policyTypes.tosAndPrivacyPolicy,
       dispatchActionPromise,
       sendAcknowledgmentRequest,
       setAcknowledgmentError,
     );
   }, [dispatchActionPromise, sendAcknowledgmentRequest]);
 
   const styles = useStyles(unboundStyles);
 
   const buttonContent = React.useMemo(() => {
     if (loadingStatus === 'loading') {
       return (
         <View style={styles.loading}>
           <ActivityIndicator size="small" color="#D3D3D3" />
         </View>
       );
     }
     return <Text style={styles.buttonText}>I accept</Text>;
   }, [loadingStatus, styles.buttonText, styles.loading]);
 
   const onBackPress = props.navigation.isFocused;
   React.useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', onBackPress);
     return () => {
       BackHandler.removeEventListener('hardwareBackPress', onBackPress);
     };
   }, [onBackPress]);
 
   const safeAreaEdges = ['top', 'bottom'];
   return (
     <Modal
       disableClosing={true}
       modalStyle={styles.modal}
       safeAreaEdges={safeAreaEdges}
     >
       <Text style={styles.header}>Terms of Service and Privacy Policy</Text>
       <Text style={styles.label}>
         <Text>We recently updated our&nbsp;</Text>
         <Text style={styles.link} onPress={onTermsOfUsePressed}>
           Terms of Service
         </Text>
         <Text>&nbsp;&amp;&nbsp;</Text>
         <Text style={styles.link} onPress={onPrivacyPolicyPressed}>
           Privacy Policy
         </Text>
         <Text>
           . In order to continue using Comm, we&rsquo;re asking you to read
           through, acknowledge, and accept the updated policies.
         </Text>
       </Text>
 
       <View style={styles.buttonsContainer}>
         <Button style={styles.button} onPress={onAccept}>
           <Text style={styles.buttonText}>{buttonContent}</Text>
         </Button>
         <Text style={styles.error}>{acknowledgmentError}</Text>
       </View>
     </Modal>
   );
 }
 
 const unboundStyles = {
   modal: {
     backgroundColor: 'modalForeground',
     paddingBottom: 10,
     paddingTop: 32,
     paddingHorizontal: 32,
     flex: 0,
     borderColor: 'modalForegroundBorder',
   },
   header: {
     color: 'modalForegroundLabel',
     fontSize: 20,
     fontWeight: '600',
     textAlign: 'center',
     paddingBottom: 16,
   },
   label: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     lineHeight: 20,
     textAlign: 'center',
   },
   link: {
     color: 'purpleLink',
     fontWeight: 'bold',
   },
   buttonsContainer: {
     flexDirection: 'column',
     marginTop: 24,
     height: 72,
     paddingHorizontal: 16,
   },
   button: {
     borderRadius: 5,
     height: 48,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'purpleButton',
   },
   buttonText: {
     color: 'white',
     fontSize: 16,
     fontWeight: '600',
     textAlign: 'center',
   },
   error: {
     marginTop: 6,
     fontStyle: 'italic',
     color: 'redText',
     textAlign: 'center',
   },
   loading: {
     paddingTop: Platform.OS === 'android' ? 0 : 6,
   },
 };
 
 const onTermsOfUsePressed = () => {
   void Linking.openURL('https://comm.app/terms');
 };
 
 const onPrivacyPolicyPressed = () => {
   void Linking.openURL('https://comm.app/privacy');
 };
 
 export default TermsAndPrivacyModal;
diff --git a/native/calendar/calendar.react.js b/native/calendar/calendar.react.js
index 474a1b32f..c9cebbe6e 100644
--- a/native/calendar/calendar.react.js
+++ b/native/calendar/calendar.react.js
@@ -1,1115 +1,1115 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _find from 'lodash/fp/find.js';
 import _findIndex from 'lodash/fp/findIndex.js';
 import _map from 'lodash/fp/map.js';
 import _pickBy from 'lodash/fp/pickBy.js';
 import _size from 'lodash/fp/size.js';
 import _sum from 'lodash/fp/sum.js';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 import {
   View,
   Text,
   FlatList,
   AppState as NativeAppState,
   Platform,
   LayoutAnimation,
   TouchableWithoutFeedback,
 } from 'react-native';
 
 import {
   updateCalendarQueryActionTypes,
   useUpdateCalendarQuery,
 } from 'lib/actions/entry-actions.js';
 import type { UpdateCalendarQueryInput } from 'lib/actions/entry-actions.js';
 import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { entryKey } from 'lib/shared/entry-utils.js';
 import type {
   EntryInfo,
   CalendarQuery,
   CalendarQueryUpdateResult,
 } from 'lib/types/entry-types.js';
 import type { CalendarFilter } from 'lib/types/filter-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ConnectionStatus } from 'lib/types/socket-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  type DispatchActionPromise,
-} from 'lib/utils/action-utils.js';
 import {
   dateString,
   prettyDate,
   dateFromString,
 } from 'lib/utils/date-utils.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 import sleep from 'lib/utils/sleep.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import CalendarInputBar from './calendar-input-bar.react.js';
 import {
   Entry,
   InternalEntry,
   dummyNodeForEntryHeightMeasurement,
 } from './entry.react.js';
 import SectionFooter from './section-footer.react.js';
 import ContentLoading from '../components/content-loading.react.js';
 import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
 import ListLoadingIndicator from '../components/list-loading-indicator.react.js';
 import NodeHeightMeasurer from '../components/node-height-measurer.react.js';
 import {
   addKeyboardShowListener,
   addKeyboardDismissListener,
   removeKeyboardListener,
 } from '../keyboard/keyboard.js';
 import DisconnectedBar from '../navigation/disconnected-bar.react.js';
 import {
   createIsForegroundSelector,
   createActiveTabSelector,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import {
   CalendarRouteName,
   ThreadPickerModalRouteName,
 } from '../navigation/route-names.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import type { TabNavigationProp } from '../navigation/tab-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { calendarListData } from '../selectors/calendar-selectors.js';
 import type {
   CalendarItem,
   SectionHeaderItem,
   SectionFooterItem,
   LoaderItem,
 } from '../selectors/calendar-selectors.js';
 import {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors.js';
 import {
   useColors,
   useStyles,
   useIndicatorStyle,
   type Colors,
   type IndicatorStyle,
 } from '../themes/colors.js';
 import type {
   EventSubscription,
   ScrollEvent,
   ViewableItemsChange,
   KeyboardEvent,
 } from '../types/react-native.js';
 
 export type EntryInfoWithHeight = {
   ...EntryInfo,
   +textHeight: number,
 };
 type CalendarItemWithHeight =
   | LoaderItem
   | SectionHeaderItem
   | SectionFooterItem
   | {
       itemType: 'entryInfo',
       entryInfo: EntryInfoWithHeight,
       threadInfo: ThreadInfo,
     };
 type ExtraData = {
   +activeEntries: { +[key: string]: boolean },
   +visibleEntries: { +[key: string]: boolean },
 };
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   flatList: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   keyboardAvoidingViewContainer: {
     position: 'absolute',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
   keyboardAvoidingView: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
   },
   sectionHeader: {
     backgroundColor: 'panelSecondaryForeground',
     borderBottomWidth: 2,
     borderColor: 'listBackground',
     height: 31,
   },
   sectionHeaderText: {
     color: 'listSeparatorLabel',
     fontWeight: 'bold',
     padding: 5,
   },
   weekendSectionHeader: {},
 };
 
 type BaseProps = {
   +navigation: TabNavigationProp<'Calendar'>,
   +route: NavigationRoute<'Calendar'>,
 };
 type Props = {
   ...BaseProps,
   // Nav state
   +calendarActive: boolean,
   // Redux state
   +listData: ?$ReadOnlyArray<CalendarItem>,
   +startDate: string,
   +endDate: string,
   +calendarFilters: $ReadOnlyArray<CalendarFilter>,
   +dimensions: DerivedDimensionsInfo,
   +loadingStatus: LoadingStatus,
   +connectionStatus: ConnectionStatus,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   +indicatorStyle: IndicatorStyle,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +updateCalendarQuery: (
     input: UpdateCalendarQueryInput,
   ) => Promise<CalendarQueryUpdateResult>,
 };
 type State = {
   +listDataWithHeights: ?$ReadOnlyArray<CalendarItemWithHeight>,
   +readyToShowList: boolean,
   +extraData: ExtraData,
   +currentlyEditing: $ReadOnlyArray<string>,
 };
 class Calendar extends React.PureComponent<Props, State> {
   flatList: ?FlatList<CalendarItemWithHeight> = null;
   currentState: ?string = NativeAppState.currentState;
   appStateListener: ?EventSubscription;
   lastForegrounded = 0;
   lastCalendarReset = 0;
   currentScrollPosition: ?number = null;
   // We don't always want an extraData update to trigger a state update, so we
   // cache the most recent value as a member here
   latestExtraData: ExtraData;
   // For some reason, we have to delay the scrollToToday call after the first
   // scroll upwards
   firstScrollComplete = false;
   // When an entry becomes active, we make a note of its key so that once the
   // keyboard event happens, we know where to move the scrollPos to
   lastEntryKeyActive: ?string = null;
   keyboardShowListener: ?EventSubscription;
   keyboardDismissListener: ?EventSubscription;
   keyboardShownHeight: ?number = null;
   // If the query fails, we try it again
   topLoadingFromScroll: ?CalendarQuery = null;
   bottomLoadingFromScroll: ?CalendarQuery = null;
   // We wait until the loaders leave view before letting them be triggered again
   topLoaderWaitingToLeaveView = true;
   bottomLoaderWaitingToLeaveView = true;
   // We keep refs to the entries so CalendarInputBar can save them
   entryRefs: Map<string, ?InternalEntry> = new Map();
 
   constructor(props: Props) {
     super(props);
     this.latestExtraData = {
       activeEntries: {},
       visibleEntries: {},
     };
     this.state = {
       listDataWithHeights: null,
       readyToShowList: false,
       extraData: this.latestExtraData,
       currentlyEditing: [],
     };
   }
 
   componentDidMount() {
     this.appStateListener = NativeAppState.addEventListener(
       'change',
       this.handleAppStateChange,
     );
     this.keyboardShowListener = addKeyboardShowListener(this.keyboardShow);
     this.keyboardDismissListener = addKeyboardDismissListener(
       this.keyboardDismiss,
     );
     this.props.navigation.addListener('tabPress', this.onTabPress);
   }
 
   componentWillUnmount() {
     if (this.appStateListener) {
       this.appStateListener.remove();
       this.appStateListener = null;
     }
     if (this.keyboardShowListener) {
       removeKeyboardListener(this.keyboardShowListener);
       this.keyboardShowListener = null;
     }
     if (this.keyboardDismissListener) {
       removeKeyboardListener(this.keyboardDismissListener);
       this.keyboardDismissListener = null;
     }
     this.props.navigation.removeListener('tabPress', this.onTabPress);
   }
 
   handleAppStateChange = (nextAppState: ?string) => {
     const lastState = this.currentState;
     this.currentState = nextAppState;
     if (
       !lastState ||
       !lastState.match(/inactive|background/) ||
       this.currentState !== 'active'
     ) {
       // We're only handling foregrounding here
       return;
     }
     if (Date.now() - this.lastCalendarReset < 500) {
       // If the calendar got reset right before this callback triggered, that
       // indicates we should reset the scroll position
       this.lastCalendarReset = 0;
       this.scrollToToday(false);
     } else {
       // Otherwise, it's possible that the calendar is about to get reset. We
       // record a timestamp here so we can scrollToToday there.
       this.lastForegrounded = Date.now();
     }
   };
 
   onTabPress = () => {
     if (this.props.navigation.isFocused()) {
       this.scrollToToday();
     }
   };
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (!this.props.listData && this.props.listData !== prevProps.listData) {
       this.latestExtraData = {
         activeEntries: {},
         visibleEntries: {},
       };
       this.setState({
         listDataWithHeights: null,
         readyToShowList: false,
         extraData: this.latestExtraData,
       });
       this.firstScrollComplete = false;
       this.topLoaderWaitingToLeaveView = true;
       this.bottomLoaderWaitingToLeaveView = true;
     }
 
     const { loadingStatus, connectionStatus } = this.props;
     const {
       loadingStatus: prevLoadingStatus,
       connectionStatus: prevConnectionStatus,
     } = prevProps;
     if (
       (loadingStatus === 'error' && prevLoadingStatus === 'loading') ||
       (connectionStatus === 'connected' && prevConnectionStatus !== 'connected')
     ) {
       this.loadMoreAbove();
       this.loadMoreBelow();
     }
 
     const lastLDWH = prevState.listDataWithHeights;
     const newLDWH = this.state.listDataWithHeights;
     if (!newLDWH) {
       return;
     } else if (!lastLDWH) {
       if (!this.props.calendarActive) {
         // FlatList has an initialScrollIndex prop, which is usually close to
         // centering but can be off when there is a particularly large Entry in
         // the list. scrollToToday lets us actually center, but gets overriden
         // by initialScrollIndex if we call it right after the FlatList mounts
         void sleep(50).then(() => this.scrollToToday());
       }
       return;
     }
 
     if (newLDWH.length < lastLDWH.length) {
       this.topLoaderWaitingToLeaveView = true;
       this.bottomLoaderWaitingToLeaveView = true;
       if (this.flatList) {
         if (!this.props.calendarActive) {
           // If the currentCalendarQuery gets reset we scroll to the center
           this.scrollToToday();
         } else if (Date.now() - this.lastForegrounded < 500) {
           // If the app got foregrounded right before the calendar got reset,
           // that indicates we should reset the scroll position
           this.lastForegrounded = 0;
           this.scrollToToday(false);
         } else {
           // Otherwise, it's possible that we got triggered before the
           // foreground callback. Let's record a timestamp here so we can call
           // scrollToToday there
           this.lastCalendarReset = Date.now();
         }
       }
     }
 
     const { lastStartDate, newStartDate, lastEndDate, newEndDate } =
       Calendar.datesFromListData(lastLDWH, newLDWH);
 
     if (newStartDate > lastStartDate || newEndDate < lastEndDate) {
       // If there are fewer items in our new data, which happens when the
       // current calendar query gets reset due to inactivity, let's reset the
       // scroll position to the center (today)
       if (!this.props.calendarActive) {
         void sleep(50).then(() => this.scrollToToday());
       }
       this.firstScrollComplete = false;
     } else if (newStartDate < lastStartDate) {
       this.updateScrollPositionAfterPrepend(lastLDWH, newLDWH);
     } else if (newEndDate > lastEndDate) {
       this.firstScrollComplete = true;
     } else if (newLDWH.length > lastLDWH.length) {
       LayoutAnimation.easeInEaseOut();
     }
 
     if (newStartDate < lastStartDate) {
       this.topLoadingFromScroll = null;
     }
     if (newEndDate > lastEndDate) {
       this.bottomLoadingFromScroll = null;
     }
 
     const { keyboardShownHeight, lastEntryKeyActive } = this;
     if (keyboardShownHeight && lastEntryKeyActive) {
       this.scrollToKey(lastEntryKeyActive, keyboardShownHeight);
       this.lastEntryKeyActive = null;
     }
   }
 
   static datesFromListData(
     lastLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
     newLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
   ): {
     +lastStartDate: Date,
     +newStartDate: Date,
     +lastEndDate: Date,
     +newEndDate: Date,
   } {
     const lastSecondItem = lastLDWH[1];
     const newSecondItem = newLDWH[1];
     invariant(
       newSecondItem.itemType === 'header' &&
         lastSecondItem.itemType === 'header',
       'second item in listData should be a header',
     );
     const lastStartDate = dateFromString(lastSecondItem.dateString);
     const newStartDate = dateFromString(newSecondItem.dateString);
 
     const lastPenultimateItem = lastLDWH[lastLDWH.length - 2];
     const newPenultimateItem = newLDWH[newLDWH.length - 2];
     invariant(
       newPenultimateItem.itemType === 'footer' &&
         lastPenultimateItem.itemType === 'footer',
       'penultimate item in listData should be a footer',
     );
     const lastEndDate = dateFromString(lastPenultimateItem.dateString);
     const newEndDate = dateFromString(newPenultimateItem.dateString);
 
     return { lastStartDate, newStartDate, lastEndDate, newEndDate };
   }
 
   /**
    * When prepending list items, FlatList isn't smart about preserving scroll
    * position. If we're at the start of the list before prepending, FlatList
    * will just keep us at the front after prepending. But we want to preserve
    * the previous on-screen items, so we have to do a calculation to get the new
    * scroll position. (And deal with the inherent glitchiness of trying to time
    * that change with the items getting prepended... *sigh*.)
    */
   updateScrollPositionAfterPrepend(
     lastLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
     newLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
   ) {
     const existingKeys = new Set(_map(Calendar.keyExtractor)(lastLDWH));
     const newItems = _filter(
       (item: CalendarItemWithHeight) =>
         !existingKeys.has(Calendar.keyExtractor(item)),
     )(newLDWH);
     const heightOfNewItems = Calendar.heightOfItems(newItems);
     const flatList = this.flatList;
     invariant(flatList, 'flatList should be set');
     const scrollAction = () => {
       invariant(
         this.currentScrollPosition !== undefined &&
           this.currentScrollPosition !== null,
         'currentScrollPosition should be set',
       );
       const currentScrollPosition = Math.max(this.currentScrollPosition, 0);
       const offset = currentScrollPosition + heightOfNewItems;
       flatList.scrollToOffset({
         offset,
         animated: false,
       });
     };
     scrollAction();
     if (!this.firstScrollComplete) {
       setTimeout(scrollAction, 0);
       this.firstScrollComplete = true;
     }
   }
 
   scrollToToday(animated: ?boolean = undefined) {
     if (animated === undefined) {
       animated = this.props.calendarActive;
     }
     const ldwh = this.state.listDataWithHeights;
     if (!ldwh) {
       return;
     }
     const todayIndex = _findIndex(['dateString', dateString(new Date())])(ldwh);
     invariant(this.flatList, "scrollToToday called, but flatList isn't set");
     this.flatList.scrollToIndex({
       index: todayIndex,
       animated,
       viewPosition: 0.5,
     });
   }
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   renderItem = (row: { +item: CalendarItemWithHeight, ... }): React.Node => {
     const item = row.item;
     if (item.itemType === 'loader') {
       return <ListLoadingIndicator />;
     } else if (item.itemType === 'header') {
       return this.renderSectionHeader(item);
     } else if (item.itemType === 'entryInfo') {
       const key = entryKey(item.entryInfo);
       return (
         <Entry
           navigation={this.props.navigation}
           entryInfo={item.entryInfo}
           threadInfo={item.threadInfo}
           active={!!this.state.extraData.activeEntries[key]}
           visible={!!this.state.extraData.visibleEntries[key]}
           makeActive={this.makeActive}
           onEnterEditMode={this.onEnterEntryEditMode}
           onConcludeEditMode={this.onConcludeEntryEditMode}
           onPressWhitespace={this.makeAllEntriesInactive}
           entryRef={this.entryRef}
         />
       );
     } else if (item.itemType === 'footer') {
       return this.renderSectionFooter(item);
     }
     invariant(false, 'renderItem conditions should be exhaustive');
   };
 
   renderSectionHeader = (item: SectionHeaderItem): React.Node => {
     let date = prettyDate(item.dateString);
     if (dateString(new Date()) === item.dateString) {
       date += ' (today)';
     }
     const dateObj = dateFromString(item.dateString).getDay();
     const weekendStyle =
       dateObj === 0 || dateObj === 6
         ? this.props.styles.weekendSectionHeader
         : null;
     return (
       <TouchableWithoutFeedback onPress={this.makeAllEntriesInactive}>
         <View style={[this.props.styles.sectionHeader, weekendStyle]}>
           <Text style={this.props.styles.sectionHeaderText}>{date}</Text>
         </View>
       </TouchableWithoutFeedback>
     );
   };
 
   renderSectionFooter = (item: SectionFooterItem): React.Node => {
     return (
       <SectionFooter
         dateString={item.dateString}
         onAdd={this.onAdd}
         onPressWhitespace={this.makeAllEntriesInactive}
       />
     );
   };
 
   onAdd = (dayString: string) => {
     this.props.navigation.navigate(ThreadPickerModalRouteName, {
       presentedFrom: this.props.route.key,
       dateString: dayString,
     });
   };
 
   static keyExtractor = (
     item: CalendarItemWithHeight | CalendarItem,
     // ESLint doesn't recognize that invariant always throws
     // eslint-disable-next-line consistent-return
   ): string => {
     if (item.itemType === 'loader') {
       return item.key;
     } else if (item.itemType === 'header') {
       return item.dateString + '/header';
     } else if (item.itemType === 'entryInfo') {
       return entryKey(item.entryInfo);
     } else if (item.itemType === 'footer') {
       return item.dateString + '/footer';
     }
     invariant(false, 'keyExtractor conditions should be exhaustive');
   };
 
   static getItemLayout = (
     data: ?$ReadOnlyArray<CalendarItemWithHeight>,
     index: number,
   ): { length: number, offset: number, index: number } => {
     if (!data) {
       return { length: 0, offset: 0, index };
     }
     const offset = Calendar.heightOfItems(data.filter((_, i) => i < index));
     const item = data[index];
     const length = item ? Calendar.itemHeight(item) : 0;
     return { length, offset, index };
   };
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   static itemHeight = (item: CalendarItemWithHeight): number => {
     if (item.itemType === 'loader') {
       return 56;
     } else if (item.itemType === 'header') {
       return 31;
     } else if (item.itemType === 'entryInfo') {
       const verticalPadding = 10;
       return verticalPadding + item.entryInfo.textHeight;
     } else if (item.itemType === 'footer') {
       return 40;
     }
     invariant(false, 'itemHeight conditions should be exhaustive');
   };
 
   static heightOfItems = (
     data: $ReadOnlyArray<CalendarItemWithHeight>,
   ): number => {
     return _sum(data.map(Calendar.itemHeight));
   };
 
   render(): React.Node {
     const { listDataWithHeights } = this.state;
     let flatList = null;
     if (listDataWithHeights) {
       const flatListStyle = { opacity: this.state.readyToShowList ? 1 : 0 };
       const initialScrollIndex = this.initialScrollIndex(listDataWithHeights);
       flatList = (
         <FlatList
           data={listDataWithHeights}
           renderItem={this.renderItem}
           keyExtractor={Calendar.keyExtractor}
           getItemLayout={Calendar.getItemLayout}
           onViewableItemsChanged={this.onViewableItemsChanged}
           onScroll={this.onScroll}
           initialScrollIndex={initialScrollIndex}
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="on-drag"
           onMomentumScrollEnd={this.onMomentumScrollEnd}
           onScrollEndDrag={this.onScrollEndDrag}
           scrollsToTop={false}
           extraData={this.state.extraData}
           style={[this.props.styles.flatList, flatListStyle]}
           indicatorStyle={this.props.indicatorStyle}
           ref={this.flatListRef}
         />
       );
     }
     let loadingIndicator = null;
     if (!listDataWithHeights || !this.state.readyToShowList) {
       loadingIndicator = (
         <ContentLoading fillType="absolute" colors={this.props.colors} />
       );
     }
     const disableInputBar = this.state.currentlyEditing.length === 0;
     return (
       <>
         <NodeHeightMeasurer
           listData={this.props.listData}
           itemToID={Calendar.keyExtractor}
           itemToMeasureKey={this.heightMeasurerKey}
           itemToDummy={this.heightMeasurerDummy}
           mergeItemWithHeight={this.heightMeasurerMergeItem}
           allHeightsMeasured={this.allHeightsMeasured}
         />
         <View style={this.props.styles.container}>
           <DisconnectedBar visible={this.props.calendarActive} />
           {loadingIndicator}
           {flatList}
         </View>
         <KeyboardAvoidingView
           behavior="position"
           style={this.props.styles.keyboardAvoidingViewContainer}
           contentContainerStyle={this.props.styles.keyboardAvoidingView}
           pointerEvents="box-none"
         >
           <CalendarInputBar
             onSave={this.onSaveEntry}
             disabled={disableInputBar}
           />
         </KeyboardAvoidingView>
       </>
     );
   }
 
   flatListHeight(): number {
     const { safeAreaHeight, tabBarHeight } = this.props.dimensions;
     return safeAreaHeight - tabBarHeight;
   }
 
   initialScrollIndex(data: $ReadOnlyArray<CalendarItemWithHeight>): number {
     const todayIndex = _findIndex(['dateString', dateString(new Date())])(data);
     const heightOfTodayHeader = Calendar.itemHeight(data[todayIndex]);
 
     let returnIndex = todayIndex;
     let heightLeft = (this.flatListHeight() - heightOfTodayHeader) / 2;
     while (heightLeft > 0) {
       heightLeft -= Calendar.itemHeight(data[--returnIndex]);
     }
     return returnIndex;
   }
 
   flatListRef = (flatList: ?FlatList<CalendarItemWithHeight>) => {
     this.flatList = flatList;
   };
 
   entryRef = (inEntryKey: string, entry: ?InternalEntry) => {
     this.entryRefs.set(inEntryKey, entry);
   };
 
   makeAllEntriesInactive = () => {
     if (_size(this.state.extraData.activeEntries) === 0) {
       if (_size(this.latestExtraData.activeEntries) !== 0) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: this.state.extraData.activeEntries,
         };
       }
       return;
     }
     this.latestExtraData = {
       visibleEntries: this.latestExtraData.visibleEntries,
       activeEntries: {},
     };
     this.setState({ extraData: this.latestExtraData });
   };
 
   makeActive = (key: string, active: boolean) => {
     if (!active) {
       const activeKeys = Object.keys(this.latestExtraData.activeEntries);
       if (activeKeys.length === 0) {
         if (Object.keys(this.state.extraData.activeEntries).length !== 0) {
           this.setState({ extraData: this.latestExtraData });
         }
         return;
       }
       const activeKey = activeKeys[0];
       if (activeKey === key) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: {},
         };
         this.setState({ extraData: this.latestExtraData });
       }
       return;
     }
 
     if (
       _size(this.state.extraData.activeEntries) === 1 &&
       this.state.extraData.activeEntries[key]
     ) {
       if (
         _size(this.latestExtraData.activeEntries) !== 1 ||
         !this.latestExtraData.activeEntries[key]
       ) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: this.state.extraData.activeEntries,
         };
       }
       return;
     }
     this.latestExtraData = {
       visibleEntries: this.latestExtraData.visibleEntries,
       activeEntries: { [key]: true },
     };
     this.setState({ extraData: this.latestExtraData });
   };
 
   onEnterEntryEditMode = (entryInfo: EntryInfoWithHeight) => {
     const key = entryKey(entryInfo);
     const keyboardShownHeight = this.keyboardShownHeight;
     if (keyboardShownHeight && this.state.listDataWithHeights) {
       this.scrollToKey(key, keyboardShownHeight);
     } else {
       this.lastEntryKeyActive = key;
     }
     const newCurrentlyEditing = [
       ...new Set([...this.state.currentlyEditing, key]),
     ];
     if (newCurrentlyEditing.length > this.state.currentlyEditing.length) {
       this.setState({ currentlyEditing: newCurrentlyEditing });
     }
   };
 
   onConcludeEntryEditMode = (entryInfo: EntryInfoWithHeight) => {
     const key = entryKey(entryInfo);
     const newCurrentlyEditing = this.state.currentlyEditing.filter(
       k => k !== key,
     );
     if (newCurrentlyEditing.length < this.state.currentlyEditing.length) {
       this.setState({ currentlyEditing: newCurrentlyEditing });
     }
   };
 
   keyboardShow = (event: KeyboardEvent) => {
     // flatListHeight() factors in the size of the tab bar,
     // but it is hidden by the keyboard since it is at the bottom
     const { bottomInset, tabBarHeight } = this.props.dimensions;
     const inputBarHeight = Platform.OS === 'android' ? 37.7 : 35.5;
     const keyboardHeight: number = Platform.select({
       // Android doesn't include the bottomInset in this height measurement
       android: event.endCoordinates.height,
       default: Math.max(event.endCoordinates.height - bottomInset, 0),
     });
     const keyboardShownHeight =
       inputBarHeight + Math.max(keyboardHeight - tabBarHeight, 0);
     this.keyboardShownHeight = keyboardShownHeight;
 
     const lastEntryKeyActive = this.lastEntryKeyActive;
     if (lastEntryKeyActive && this.state.listDataWithHeights) {
       this.scrollToKey(lastEntryKeyActive, keyboardShownHeight);
       this.lastEntryKeyActive = null;
     }
   };
 
   keyboardDismiss = () => {
     this.keyboardShownHeight = null;
   };
 
   scrollToKey(lastEntryKeyActive: string, keyboardHeight: number) {
     const data = this.state.listDataWithHeights;
     invariant(data, 'should be set');
     const index = data.findIndex(
       (item: CalendarItemWithHeight) =>
         Calendar.keyExtractor(item) === lastEntryKeyActive,
     );
     if (index === -1) {
       return;
     }
     const itemStart = Calendar.heightOfItems(data.filter((_, i) => i < index));
     const itemHeight = Calendar.itemHeight(data[index]);
     const entryAdditionalActiveHeight = Platform.OS === 'android' ? 21 : 20;
     const itemEnd = itemStart + itemHeight + entryAdditionalActiveHeight;
     const visibleHeight = this.flatListHeight() - keyboardHeight;
     if (
       this.currentScrollPosition !== undefined &&
       this.currentScrollPosition !== null &&
       itemStart > this.currentScrollPosition &&
       itemEnd < this.currentScrollPosition + visibleHeight
     ) {
       return;
     }
     const offset = itemStart - (visibleHeight - itemHeight) / 2;
     invariant(this.flatList, 'flatList should be set');
     this.flatList.scrollToOffset({ offset, animated: true });
   }
 
   heightMeasurerKey = (item: CalendarItem): ?string => {
     if (item.itemType !== 'entryInfo') {
       return null;
     }
     return item.entryInfo.text;
   };
 
   heightMeasurerDummy = (item: CalendarItem): React.MixedElement => {
     invariant(
       item.itemType === 'entryInfo',
       'NodeHeightMeasurer asked for dummy for non-entryInfo item',
     );
     return dummyNodeForEntryHeightMeasurement(item.entryInfo.text);
   };
 
   heightMeasurerMergeItem = (
     item: CalendarItem,
     height: ?number,
   ): CalendarItemWithHeight => {
     if (item.itemType !== 'entryInfo') {
       return item;
     }
     invariant(height !== null && height !== undefined, 'height should be set');
     const { entryInfo } = item;
     return {
       itemType: 'entryInfo',
       entryInfo: Calendar.entryInfoWithHeight(entryInfo, height),
       threadInfo: item.threadInfo,
     };
   };
 
   static entryInfoWithHeight(
     entryInfo: EntryInfo,
     textHeight: number,
   ): EntryInfoWithHeight {
     // Blame Flow for not accepting object spread on exact types
     if (entryInfo.id && entryInfo.localID) {
       return {
         id: entryInfo.id,
         localID: entryInfo.localID,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     } else if (entryInfo.id) {
       return {
         id: entryInfo.id,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     } else {
       return {
         localID: entryInfo.localID,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     }
   }
 
   allHeightsMeasured = (
     listDataWithHeights: $ReadOnlyArray<CalendarItemWithHeight>,
   ) => {
     this.setState({ listDataWithHeights });
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     const ldwh = this.state.listDataWithHeights;
     if (!ldwh) {
       // This indicates the listData was cleared (set to null) right before this
       // callback was called. Since this leads to the FlatList getting cleared,
       // we'll just ignore this callback.
       return;
     }
 
     const visibleEntries: { [string]: boolean } = {};
     for (const token of info.viewableItems) {
       if (token.item.itemType === 'entryInfo') {
         visibleEntries[entryKey(token.item.entryInfo)] = true;
       }
     }
     this.latestExtraData = {
       activeEntries: _pickBy((_, key: string) => {
         if (visibleEntries[key]) {
           return true;
         }
         // We don't automatically set scrolled-away entries to be inactive
         // because entries can be out-of-view at creation time if they need to
         // be scrolled into view (see onEnterEntryEditMode). If Entry could
         // distinguish the reasons its active prop gets set to false, it could
         // differentiate the out-of-view case from the something-pressed case,
         // and then we could set scrolled-away entries to be inactive without
         // worrying about this edge case. Until then...
         const foundItem = _find(
           item => item.entryInfo && entryKey(item.entryInfo) === key,
         )(ldwh);
         return !!foundItem;
       })(this.latestExtraData.activeEntries),
       visibleEntries,
     };
 
     const topLoader = _find({ key: 'TopLoader' })(info.viewableItems);
     if (this.topLoaderWaitingToLeaveView && !topLoader) {
       this.topLoaderWaitingToLeaveView = false;
       this.topLoadingFromScroll = null;
     }
 
     const bottomLoader = _find({ key: 'BottomLoader' })(info.viewableItems);
     if (this.bottomLoaderWaitingToLeaveView && !bottomLoader) {
       this.bottomLoaderWaitingToLeaveView = false;
       this.bottomLoadingFromScroll = null;
     }
 
     if (
       !this.state.readyToShowList &&
       !this.topLoaderWaitingToLeaveView &&
       !this.bottomLoaderWaitingToLeaveView &&
       info.viewableItems.length > 0
     ) {
       this.setState({
         readyToShowList: true,
         extraData: this.latestExtraData,
       });
     }
 
     if (
       topLoader &&
       !this.topLoaderWaitingToLeaveView &&
       !this.topLoadingFromScroll
     ) {
       this.topLoaderWaitingToLeaveView = true;
       const start = dateFromString(this.props.startDate);
       start.setDate(start.getDate() - 31);
       const startDate = dateString(start);
       const endDate = this.props.endDate;
       this.topLoadingFromScroll = {
         startDate,
         endDate,
         filters: this.props.calendarFilters,
       };
       this.loadMoreAbove();
     } else if (
       bottomLoader &&
       !this.bottomLoaderWaitingToLeaveView &&
       !this.bottomLoadingFromScroll
     ) {
       this.bottomLoaderWaitingToLeaveView = true;
       const end = dateFromString(this.props.endDate);
       end.setDate(end.getDate() + 31);
       const endDate = dateString(end);
       const startDate = this.props.startDate;
       this.bottomLoadingFromScroll = {
         startDate,
         endDate,
         filters: this.props.calendarFilters,
       };
       this.loadMoreBelow();
     }
   };
 
   dispatchCalendarQueryUpdate(calendarQuery: CalendarQuery) {
     void this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery({ calendarQuery }),
     );
   }
 
   loadMoreAbove: () => void = _throttle(() => {
     if (
       this.topLoadingFromScroll &&
       this.topLoaderWaitingToLeaveView &&
       this.props.connectionStatus === 'connected'
     ) {
       this.dispatchCalendarQueryUpdate(this.topLoadingFromScroll);
     }
   }, 1000);
 
   loadMoreBelow: () => void = _throttle(() => {
     if (
       this.bottomLoadingFromScroll &&
       this.bottomLoaderWaitingToLeaveView &&
       this.props.connectionStatus === 'connected'
     ) {
       this.dispatchCalendarQueryUpdate(this.bottomLoadingFromScroll);
     }
   }, 1000);
 
   onScroll = (event: ScrollEvent) => {
     this.currentScrollPosition = event.nativeEvent.contentOffset.y;
   };
 
   // When the user "flicks" the scroll view, this callback gets triggered after
   // the scrolling ends
   onMomentumScrollEnd = () => {
     this.setState({ extraData: this.latestExtraData });
   };
 
   // This callback gets triggered when the user lets go of scrolling the scroll
   // view, regardless of whether it was a "flick" or a pan
   onScrollEndDrag = () => {
     // We need to figure out if this was a flick or not. If it's a flick, we'll
     // let onMomentumScrollEnd handle it once scroll position stabilizes
     const currentScrollPosition = this.currentScrollPosition;
     setTimeout(() => {
       if (this.currentScrollPosition === currentScrollPosition) {
         this.setState({ extraData: this.latestExtraData });
       }
     }, 50);
   };
 
   onSaveEntry = () => {
     const entryKeys = Object.keys(this.latestExtraData.activeEntries);
     if (entryKeys.length === 0) {
       return;
     }
     const entryRef = this.entryRefs.get(entryKeys[0]);
     if (entryRef) {
       entryRef.completeEdit();
     }
   };
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(
   updateCalendarQueryActionTypes,
 );
 const activeTabSelector = createActiveTabSelector(CalendarRouteName);
 const activeThreadPickerSelector = createIsForegroundSelector(
   ThreadPickerModalRouteName,
 );
 
 const ConnectedCalendar: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCalendar(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const calendarActive =
       activeTabSelector(navContext) || activeThreadPickerSelector(navContext);
 
     const listData = useSelector(calendarListData);
     const startDate = useSelector(state => state.navInfo.startDate);
     const endDate = useSelector(state => state.navInfo.endDate);
     const calendarFilters = useSelector(state => state.calendarFilters);
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const loadingStatus = useSelector(loadingStatusSelector);
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const connectionStatus = connection.status;
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callUpdateCalendarQuery = useUpdateCalendarQuery();
 
     return (
       <Calendar
         {...props}
         calendarActive={calendarActive}
         listData={listData}
         startDate={startDate}
         endDate={endDate}
         calendarFilters={calendarFilters}
         dimensions={dimensions}
         loadingStatus={loadingStatus}
         connectionStatus={connectionStatus}
         colors={colors}
         styles={styles}
         indicatorStyle={indicatorStyle}
         dispatchActionPromise={dispatchActionPromise}
         updateCalendarQuery={callUpdateCalendarQuery}
       />
     );
   },
 );
 
 export default ConnectedCalendar;
diff --git a/native/calendar/entry.react.js b/native/calendar/entry.react.js
index 237d4f7be..c276e311c 100644
--- a/native/calendar/entry.react.js
+++ b/native/calendar/entry.react.js
@@ -1,818 +1,818 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import _omit from 'lodash/fp/omit.js';
 import * as React from 'react';
 import {
   View,
   Text,
   TextInput as BaseTextInput,
   Platform,
   TouchableWithoutFeedback,
   LayoutAnimation,
   Keyboard,
 } from 'react-native';
 import shallowequal from 'shallowequal';
 import tinycolor from 'tinycolor2';
 
 import {
   createEntryActionTypes,
   useCreateEntry,
   saveEntryActionTypes,
   useSaveEntry,
   deleteEntryActionTypes,
   useDeleteEntry,
   concurrentModificationResetActionType,
 } from 'lib/actions/entry-actions.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { entryKey } from 'lib/shared/entry-utils.js';
 import { threadHasPermission } from 'lib/shared/thread-utils.js';
 import type {
   CreateEntryInfo,
   SaveEntryInfo,
   SaveEntryResult,
   SaveEntryPayload,
   CreateEntryPayload,
   DeleteEntryInfo,
   DeleteEntryResult,
   CalendarQuery,
 } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type { ResolvedThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  type DispatchActionPromise,
-} from 'lib/utils/action-utils.js';
 import { dateString } from 'lib/utils/date-utils.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import { ServerError } from 'lib/utils/errors.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import sleep from 'lib/utils/sleep.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import type { EntryInfoWithHeight } from './calendar.react.js';
 import LoadingIndicator from './loading-indicator.react.js';
 import {
   type MessageListParams,
   useNavigateToThread,
 } from '../chat/message-list-types.js';
 import Button from '../components/button.react.js';
 import SingleLine from '../components/single-line.react.js';
 import TextInput from '../components/text-input.react.js';
 import Markdown from '../markdown/markdown.react.js';
 import { inlineMarkdownRules } from '../markdown/rules.react.js';
 import {
   createIsForegroundSelector,
   nonThreadCalendarQuery,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { ThreadPickerModalRouteName } from '../navigation/route-names.js';
 import type { TabNavigationProp } from '../navigation/tab-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { colors, useStyles } from '../themes/colors.js';
 import type { LayoutEvent } from '../types/react-native.js';
 import Alert from '../utils/alert.js';
 import { waitForInteractions } from '../utils/timers.js';
 
 function hueDistance(firstColor: string, secondColor: string): number {
   const firstHue = tinycolor(firstColor).toHsv().h;
   const secondHue = tinycolor(secondColor).toHsv().h;
   const distance = Math.abs(firstHue - secondHue);
   return distance > 180 ? 360 - distance : distance;
 }
 const omitEntryInfo = _omit(['entryInfo']);
 
 function dummyNodeForEntryHeightMeasurement(
   entryText: string,
 ): React.Element<typeof View> {
   const text = entryText === '' ? ' ' : entryText;
   return (
     <View style={[unboundStyles.entry, unboundStyles.textContainer]}>
       <Text style={unboundStyles.text}>{text}</Text>
     </View>
   );
 }
 
 const unboundStyles = {
   actionLinks: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginTop: -5,
   },
   button: {
     padding: 5,
   },
   buttonContents: {
     flex: 1,
     flexDirection: 'row',
   },
   container: {
     backgroundColor: 'listBackground',
   },
   entry: {
     borderRadius: 8,
     margin: 5,
     overflow: 'hidden',
   },
   leftLinks: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'flex-start',
     paddingHorizontal: 5,
   },
   leftLinksText: {
     fontSize: 12,
     fontWeight: 'bold',
     paddingLeft: 5,
   },
   pencilIcon: {
     lineHeight: 13,
     paddingTop: 1,
   },
   rightLinks: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'flex-end',
     paddingHorizontal: 5,
   },
   rightLinksText: {
     fontSize: 12,
     fontWeight: 'bold',
   },
   text: {
     fontFamily: 'System',
     fontSize: 16,
   },
   textContainer: {
     position: 'absolute',
     top: 0,
     paddingBottom: 6,
     paddingLeft: 10,
     paddingRight: 10,
     paddingTop: 5,
     transform: (Platform.select({
       ios: [{ translateY: -1 / 3 }],
       default: [],
     }): $ReadOnlyArray<{ +translateY: number }>),
   },
   textInput: {
     fontFamily: 'System',
     fontSize: 16,
     left: ((Platform.OS === 'android' ? 9.8 : 10): number),
     margin: 0,
     padding: 0,
     position: 'absolute',
     right: 10,
     top: ((Platform.OS === 'android' ? 4.8 : 0.5): number),
   },
 };
 
 type SharedProps = {
   +navigation: TabNavigationProp<'Calendar'>,
   +entryInfo: EntryInfoWithHeight,
   +visible: boolean,
   +active: boolean,
   +makeActive: (entryKey: string, active: boolean) => void,
   +onEnterEditMode: (entryInfo: EntryInfoWithHeight) => void,
   +onConcludeEditMode: (entryInfo: EntryInfoWithHeight) => void,
   +onPressWhitespace: () => void,
   +entryRef: (entryKey: string, entry: ?InternalEntry) => void,
 };
 type BaseProps = {
   ...SharedProps,
   +threadInfo: ThreadInfo,
 };
 type Props = {
   ...SharedProps,
   +threadInfo: ResolvedThreadInfo,
   // Redux state
   +calendarQuery: () => CalendarQuery,
   +online: boolean,
   +styles: $ReadOnly<typeof unboundStyles>,
   // Nav state
   +threadPickerActive: boolean,
   +navigateToThread: (params: MessageListParams) => void,
   // Redux dispatch functions
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +createEntry: (info: CreateEntryInfo) => Promise<CreateEntryPayload>,
   +saveEntry: (info: SaveEntryInfo) => Promise<SaveEntryResult>,
   +deleteEntry: (info: DeleteEntryInfo) => Promise<DeleteEntryResult>,
 };
 type State = {
   +editing: boolean,
   +text: string,
   +loadingStatus: LoadingStatus,
   +height: number,
 };
 class InternalEntry extends React.Component<Props, State> {
   textInput: ?React.ElementRef<typeof BaseTextInput>;
   creating: boolean = false;
   needsUpdateAfterCreation: boolean = false;
   needsDeleteAfterCreation: boolean = false;
   nextSaveAttemptIndex: number = 0;
   mounted: boolean = false;
   deleted: boolean = false;
   currentlySaving: ?string;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       editing: false,
       text: props.entryInfo.text,
       loadingStatus: 'inactive',
       height: props.entryInfo.textHeight,
     };
     this.state = {
       ...this.state,
       editing: InternalEntry.isActive(props, this.state),
     };
   }
 
   guardedSetState(input: Partial<State>) {
     if (this.mounted) {
       this.setState(input);
     }
   }
 
   shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
     return (
       !shallowequal(nextState, this.state) ||
       !shallowequal(omitEntryInfo(nextProps), omitEntryInfo(this.props)) ||
       !_isEqual(nextProps.entryInfo)(this.props.entryInfo)
     );
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const wasActive = InternalEntry.isActive(prevProps, prevState);
     const isActive = InternalEntry.isActive(this.props, this.state);
 
     if (
       !isActive &&
       (this.props.entryInfo.text !== prevProps.entryInfo.text ||
         this.props.entryInfo.textHeight !== prevProps.entryInfo.textHeight) &&
       (this.props.entryInfo.text !== this.state.text ||
         this.props.entryInfo.textHeight !== this.state.height)
     ) {
       this.guardedSetState({
         text: this.props.entryInfo.text,
         height: this.props.entryInfo.textHeight,
       });
       this.currentlySaving = null;
     }
 
     if (
       !this.props.active &&
       this.state.text === prevState.text &&
       this.state.height !== prevState.height &&
       this.state.height !== this.props.entryInfo.textHeight
     ) {
       const approxMeasuredHeight = Math.round(this.state.height * 1000) / 1000;
       const approxExpectedHeight =
         Math.round(this.props.entryInfo.textHeight * 1000) / 1000;
       console.log(
         `Entry height for ${entryKey(this.props.entryInfo)} was expected to ` +
           `be ${approxExpectedHeight} but is actually ` +
           `${approxMeasuredHeight}. This means Calendar's FlatList isn't ` +
           'getting the right item height for some of its nodes, which is ' +
           'guaranteed to cause glitchy behavior. Please investigate!!',
       );
     }
 
     // Our parent will set the active prop to false if something else gets
     // pressed or if the Entry is scrolled out of view. In either of those cases
     // we should complete the edit process.
     if (!this.props.active && prevProps.active) {
       this.completeEdit();
     }
 
     if (this.state.height !== prevState.height || isActive !== wasActive) {
       LayoutAnimation.easeInEaseOut();
     }
 
     if (
       this.props.online &&
       !prevProps.online &&
       this.state.loadingStatus === 'error'
     ) {
       this.save();
     }
 
     if (
       this.state.editing &&
       prevState.editing &&
       (this.state.text.trim() === '') !== (prevState.text.trim() === '')
     ) {
       LayoutAnimation.easeInEaseOut();
     }
   }
 
   componentDidMount() {
     this.mounted = true;
     this.props.entryRef(entryKey(this.props.entryInfo), this);
   }
 
   componentWillUnmount() {
     this.mounted = false;
     this.props.entryRef(entryKey(this.props.entryInfo), null);
     this.props.onConcludeEditMode(this.props.entryInfo);
   }
 
   static isActive(props: Props, state: State): boolean {
     return (
       props.active ||
       state.editing ||
       !props.entryInfo.id ||
       state.loadingStatus !== 'inactive'
     );
   }
 
   render(): React.Node {
     const active = InternalEntry.isActive(this.props, this.state);
     const { editing } = this.state;
     const threadColor = `#${this.props.threadInfo.color}`;
 
     const darkColor = colorIsDark(this.props.threadInfo.color);
     let actionLinks = null;
     if (active) {
       const actionLinksColor = darkColor ? '#D3D3D3' : '#404040';
       const actionLinksTextStyle = { color: actionLinksColor };
       const { modalIosHighlightUnderlay: actionLinksUnderlayColor } = darkColor
         ? colors.dark
         : colors.light;
       const loadingIndicatorCanUseRed = hueDistance('red', threadColor) > 50;
       let editButtonContent = null;
       if (editing && this.state.text.trim() === '') {
         // nothing
       } else if (editing) {
         editButtonContent = (
           <React.Fragment>
             <Icon name="check" size={14} color={actionLinksColor} />
             <Text
               style={[this.props.styles.leftLinksText, actionLinksTextStyle]}
             >
               SAVE
             </Text>
           </React.Fragment>
         );
       } else {
         editButtonContent = (
           <React.Fragment>
             <Icon
               name="pencil"
               size={12}
               color={actionLinksColor}
               style={this.props.styles.pencilIcon}
             />
             <Text
               style={[this.props.styles.leftLinksText, actionLinksTextStyle]}
             >
               EDIT
             </Text>
           </React.Fragment>
         );
       }
       actionLinks = (
         <View style={this.props.styles.actionLinks}>
           <View style={this.props.styles.leftLinks}>
             <Button
               onPress={this.delete}
               iosFormat="highlight"
               iosHighlightUnderlayColor={actionLinksUnderlayColor}
               iosActiveOpacity={0.85}
               style={this.props.styles.button}
             >
               <View style={this.props.styles.buttonContents}>
                 <Icon name="close" size={14} color={actionLinksColor} />
                 <Text
                   style={[
                     this.props.styles.leftLinksText,
                     actionLinksTextStyle,
                   ]}
                 >
                   DELETE
                 </Text>
               </View>
             </Button>
             <Button
               onPress={this.onPressEdit}
               iosFormat="highlight"
               iosHighlightUnderlayColor={actionLinksUnderlayColor}
               iosActiveOpacity={0.85}
               style={this.props.styles.button}
             >
               <View style={this.props.styles.buttonContents}>
                 {editButtonContent}
               </View>
             </Button>
           </View>
           <View style={this.props.styles.rightLinks}>
             <LoadingIndicator
               loadingStatus={this.state.loadingStatus}
               color={actionLinksColor}
               canUseRed={loadingIndicatorCanUseRed}
             />
             <Button
               onPress={this.onPressThreadName}
               iosFormat="highlight"
               iosHighlightUnderlayColor={actionLinksUnderlayColor}
               iosActiveOpacity={0.85}
               style={this.props.styles.button}
             >
               <SingleLine
                 style={[this.props.styles.rightLinksText, actionLinksTextStyle]}
               >
                 {this.props.threadInfo.uiName}
               </SingleLine>
             </Button>
           </View>
         </View>
       );
     }
 
     const textColor = darkColor ? 'white' : 'black';
     let textInput;
     if (editing) {
       const textInputStyle = {
         color: textColor,
         backgroundColor: threadColor,
       };
       const selectionColor = darkColor ? '#129AFF' : '#036AFF';
       textInput = (
         <TextInput
           style={[this.props.styles.textInput, textInputStyle]}
           value={this.state.text}
           onChangeText={this.onChangeText}
           multiline={true}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           selectionColor={selectionColor}
           ref={this.textInputRef}
         />
       );
     }
 
     let rawText = this.state.text;
     if (rawText === '' || rawText.slice(-1) === '\n') {
       rawText += ' ';
     }
     const textStyle = {
       ...this.props.styles.text,
       color: textColor,
       opacity: textInput ? 0 : 1,
     };
     // We use an empty View to set the height of the entry, and then position
     // the Text and TextInput absolutely. This allows to measure height changes
     // to the Text while controlling the actual height of the entry.
     const heightStyle = { height: this.state.height };
     const entryStyle = { backgroundColor: threadColor };
     const opacity = editing ? 1.0 : 0.6;
     const canEditEntry = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.EDIT_ENTRIES,
     );
     return (
       <TouchableWithoutFeedback onPress={this.props.onPressWhitespace}>
         <View style={this.props.styles.container}>
           <Button
             disabled={!canEditEntry}
             onPress={this.setActive}
             style={[this.props.styles.entry, entryStyle]}
             androidFormat="opacity"
             iosActiveOpacity={opacity}
           >
             <View>
               <View style={heightStyle} />
               <View
                 style={this.props.styles.textContainer}
                 onLayout={this.onTextContainerLayout}
               >
                 <Markdown
                   style={textStyle}
                   rules={inlineMarkdownRules(darkColor)}
                 >
                   {rawText}
                 </Markdown>
               </View>
               {textInput}
             </View>
             {actionLinks}
           </Button>
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   textInputRef: (textInput: ?React.ElementRef<typeof BaseTextInput>) => void =
     textInput => {
       this.textInput = textInput;
       if (textInput && this.state.editing) {
         void this.enterEditMode();
       }
     };
 
   enterEditMode: () => Promise<void> = async () => {
     this.setActive();
     this.props.onEnterEditMode(this.props.entryInfo);
     if (Platform.OS === 'android') {
       // If we don't do this, the TextInput focuses
       // but the soft keyboard doesn't come up
       await waitForInteractions();
       await sleep(15);
     }
     this.focus();
   };
 
   focus: () => void = () => {
     const { textInput } = this;
     if (!textInput) {
       return;
     }
     textInput.focus();
   };
 
   onFocus: () => void = () => {
     if (this.props.threadPickerActive) {
       this.props.navigation.goBack();
     }
   };
 
   setActive: () => void = () => this.makeActive(true);
 
   completeEdit: () => void = () => {
     // This gets called from CalendarInputBar (save button above keyboard),
     // onPressEdit (save button in Entry action links), and in
     // componentDidUpdate above when Calendar sets this Entry to inactive.
     // Calendar does this if something else gets pressed or the Entry is
     // scrolled out of view. Note that an Entry won't consider itself inactive
     // until it's done updating the server with its state, and if the network
     // requests fail it may stay "active".
     if (this.textInput) {
       this.textInput.blur();
     }
     this.onBlur();
   };
 
   onBlur: () => void = () => {
     if (this.state.text.trim() === '') {
       this.delete();
     } else if (this.props.entryInfo.text !== this.state.text) {
       this.save();
     }
     this.guardedSetState({ editing: false });
     this.makeActive(false);
     this.props.onConcludeEditMode(this.props.entryInfo);
   };
 
   save: () => void = () => {
     this.dispatchSave(this.props.entryInfo.id, this.state.text);
   };
 
   onTextContainerLayout: (event: LayoutEvent) => void = event => {
     this.guardedSetState({
       height: Math.ceil(event.nativeEvent.layout.height),
     });
   };
 
   onChangeText: (newText: string) => void = newText => {
     this.guardedSetState({ text: newText });
   };
 
   makeActive(active: boolean) {
     const { threadInfo } = this.props;
     if (!threadHasPermission(threadInfo, threadPermissions.EDIT_ENTRIES)) {
       return;
     }
     this.props.makeActive(entryKey(this.props.entryInfo), active);
   }
 
   dispatchSave(serverID: ?string, newText: string) {
     if (this.currentlySaving === newText) {
       return;
     }
     this.currentlySaving = newText;
 
     if (newText.trim() === '') {
       // We don't save the empty string, since as soon as the element becomes
       // inactive it'll get deleted
       return;
     }
 
     if (!serverID) {
       if (this.creating) {
         // We need the first save call to return so we know the ID of the entry
         // we're updating, so we'll need to handle this save later
         this.needsUpdateAfterCreation = true;
         return;
       } else {
         this.creating = true;
       }
     }
 
     this.guardedSetState({ loadingStatus: 'loading' });
     if (!serverID) {
       void this.props.dispatchActionPromise(
         createEntryActionTypes,
         this.createAction(newText),
       );
     } else {
       void this.props.dispatchActionPromise(
         saveEntryActionTypes,
         this.saveAction(serverID, newText),
       );
     }
   }
 
   async createAction(text: string): Promise<CreateEntryPayload> {
     const localID = this.props.entryInfo.localID;
     invariant(localID, "if there's no serverID, there should be a localID");
     const curSaveAttempt = this.nextSaveAttemptIndex++;
     try {
       const response = await this.props.createEntry({
         text,
         timestamp: this.props.entryInfo.creationTime,
         date: dateString(
           this.props.entryInfo.year,
           this.props.entryInfo.month,
           this.props.entryInfo.day,
         ),
         threadID: this.props.entryInfo.threadID,
         localID,
         calendarQuery: this.props.calendarQuery(),
       });
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'inactive' });
       }
       this.creating = false;
       if (this.needsUpdateAfterCreation) {
         this.needsUpdateAfterCreation = false;
         this.dispatchSave(response.entryID, this.state.text);
       }
       if (this.needsDeleteAfterCreation) {
         this.needsDeleteAfterCreation = false;
         this.dispatchDelete(response.entryID);
       }
       return response;
     } catch (e) {
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'error' });
       }
       this.currentlySaving = null;
       this.creating = false;
       throw e;
     }
   }
 
   async saveAction(
     entryID: string,
     newText: string,
   ): Promise<SaveEntryPayload> {
     const curSaveAttempt = this.nextSaveAttemptIndex++;
     try {
       const response = await this.props.saveEntry({
         entryID,
         text: newText,
         prevText: this.props.entryInfo.text,
         timestamp: Date.now(),
         calendarQuery: this.props.calendarQuery(),
       });
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'inactive' });
       }
       return { ...response, threadID: this.props.entryInfo.threadID };
     } catch (e) {
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'error' });
       }
       this.currentlySaving = null;
       if (e instanceof ServerError && e.message === 'concurrent_modification') {
         const revertedText = e.payload?.db;
         const onRefresh = () => {
           this.guardedSetState({
             loadingStatus: 'inactive',
             text: revertedText,
           });
           this.props.dispatch({
             type: concurrentModificationResetActionType,
             payload: { id: entryID, dbText: revertedText },
           });
         };
         Alert.alert(
           'Concurrent modification',
           'It looks like somebody is attempting to modify that field at the ' +
             'same time as you! Please try again.',
           [{ text: 'OK', onPress: onRefresh }],
           { cancelable: false },
         );
       }
       throw e;
     }
   }
 
   delete: () => void = () => {
     this.dispatchDelete(this.props.entryInfo.id);
   };
 
   onPressEdit: () => void = () => {
     if (this.state.editing) {
       this.completeEdit();
     } else {
       this.guardedSetState({ editing: true });
     }
   };
 
   dispatchDelete(serverID: ?string) {
     if (this.deleted) {
       return;
     }
     this.deleted = true;
     LayoutAnimation.easeInEaseOut();
     const { localID } = this.props.entryInfo;
     void this.props.dispatchActionPromise(
       deleteEntryActionTypes,
       this.deleteAction(serverID),
       undefined,
       { localID, serverID },
     );
   }
 
   async deleteAction(serverID: ?string): Promise<?DeleteEntryResult> {
     if (serverID) {
       return await this.props.deleteEntry({
         entryID: serverID,
         prevText: this.props.entryInfo.text,
         calendarQuery: this.props.calendarQuery(),
       });
     } else if (this.creating) {
       this.needsDeleteAfterCreation = true;
     }
     return null;
   }
 
   onPressThreadName: () => void = () => {
     Keyboard.dismiss();
     this.props.navigateToThread({ threadInfo: this.props.threadInfo });
   };
 }
 
 registerFetchKey(saveEntryActionTypes);
 registerFetchKey(deleteEntryActionTypes);
 const activeThreadPickerSelector = createIsForegroundSelector(
   ThreadPickerModalRouteName,
 );
 
 const Entry: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedEntry(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const threadPickerActive = activeThreadPickerSelector(navContext);
 
     const calendarQuery = useSelector(state =>
       nonThreadCalendarQuery({
         redux: state,
         navContext,
       }),
     );
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const online = connection.status === 'connected';
     const styles = useStyles(unboundStyles);
 
     const navigateToThread = useNavigateToThread();
 
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const callCreateEntry = useCreateEntry();
     const callSaveEntry = useSaveEntry();
     const callDeleteEntry = useDeleteEntry();
 
     const { threadInfo: unresolvedThreadInfo, ...restProps } = props;
     const threadInfo = useResolvedThreadInfo(unresolvedThreadInfo);
 
     return (
       <InternalEntry
         {...restProps}
         threadPickerActive={threadPickerActive}
         calendarQuery={calendarQuery}
         online={online}
         styles={styles}
         navigateToThread={navigateToThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         createEntry={callCreateEntry}
         saveEntry={callSaveEntry}
         deleteEntry={callDeleteEntry}
         threadInfo={threadInfo}
       />
     );
   },
 );
 
 export { InternalEntry, Entry, dummyNodeForEntryHeightMeasurement };
diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
index e026b4256..097fbd793 100644
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1,1476 +1,1476 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Ionicons.js';
 import type { GenericNavigationAction } from '@react-navigation/core';
 import invariant from 'invariant';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 import {
   View,
   TextInput,
   TouchableOpacity,
   Platform,
   Text,
   ActivityIndicator,
   TouchableWithoutFeedback,
   NativeAppEventEmitter,
 } from 'react-native';
 import { TextInputKeyboardMangerIOS } from 'react-native-keyboard-input';
 import Animated, {
   EasingNode,
   FadeInDown,
   FadeOutDown,
 } from 'react-native-reanimated';
 
 import {
   moveDraftActionType,
   updateDraftActionType,
 } from 'lib/actions/draft-actions.js';
 import {
   joinThreadActionTypes,
   useJoinThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import {
   useChatMentionContext,
   useThreadChatMentionCandidates,
 } from 'lib/hooks/chat-mention-hooks.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
 import {
   useMentionTypeaheadUserSuggestions,
   useMentionTypeaheadChatSuggestions,
   getTypeaheadRegexMatches,
   type Selection,
   useUserMentionsCandidates,
   type MentionTypeaheadSuggestionItem,
   type TypeaheadMatchedStrings,
 } from 'lib/shared/mention-utils.js';
 import {
   useNextLocalID,
   trimMessage,
   useMessagePreview,
   messageKey,
   type MessagePreviewResult,
 } from 'lib/shared/message-utils.js';
 import SentencePrefixSearchIndex from 'lib/shared/sentence-prefix-search-index.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   checkIfDefaultMembersAreVoiced,
   draftKeyFromThreadID,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type { SetState } from 'lib/types/hook-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { PhotoPaste } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type {
   SendEditMessageResponse,
   MessageInfo,
 } from 'lib/types/message-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type {
   ClientThreadJoinRequest,
   ThreadJoinPayload,
   ChatMentionCandidates,
   RelativeMemberInfo,
   ThreadInfo,
 } from 'lib/types/thread-types.js';
 import { type UserInfos } from 'lib/types/user-types.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import { ChatContext } from './chat-context.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import {
   MessageEditingContext,
   type MessageEditingContextType,
 } from './message-editing-context.react.js';
 import type { RemoveEditMode } from './message-list-types.js';
 import TypeaheadTooltip from './typeahead-tooltip.react.js';
 import MentionTypeaheadTooltipButton from '../chat/mention-typeahead-tooltip-button.react.js';
 import Button from '../components/button.react.js';
 // eslint-disable-next-line import/extensions
 import ClearableTextInput from '../components/clearable-text-input.react';
 import type { SyncedSelectionData } from '../components/selectable-text-input.js';
 // eslint-disable-next-line import/extensions
 import SelectableTextInput from '../components/selectable-text-input.react';
 import SingleLine from '../components/single-line.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import {
   type InputState,
   InputStateContext,
   type EditInputBarMessageParameters,
 } from '../input/input-state.js';
 import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import { getKeyboardHeight } from '../keyboard/keyboard.js';
 import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
 import {
   nonThreadCalendarQuery,
   activeThreadSelector,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { OverlayContextType } from '../navigation/overlay-context.js';
 import {
   type NavigationRoute,
   ChatCameraModalRouteName,
   ImagePasteModalRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../themes/colors.js';
 import type { LayoutEvent, ImagePasteEvent } from '../types/react-native.js';
 import {
   type AnimatedViewStyle,
   AnimatedView,
   type ViewStyle,
 } from '../types/styles.js';
 import Alert from '../utils/alert.js';
 import { runTiming } from '../utils/animation-utils.js';
 import { exitEditAlert } from '../utils/edit-messages-utils.js';
 import {
   nativeMentionTypeaheadRegex,
   mentionTypeaheadTooltipActions,
 } from '../utils/typeahead-utils.js';
 
 const { Value, Clock, block, set, cond, neq, sub, interpolateNode, stopClock } =
   Animated;
 
 const expandoButtonsAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 
 const unboundStyles = {
   cameraIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   cameraRollIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   container: {
     backgroundColor: 'listBackground',
     paddingLeft: Platform.OS === 'android' ? 10 : 5,
   },
   expandButton: {
     bottom: 0,
     position: 'absolute',
     right: 0,
   },
   expandIcon: {
     paddingBottom: Platform.OS === 'android' ? 13 : 11,
     paddingRight: 2,
   },
   expandoButtons: {
     alignSelf: 'flex-end',
   },
   explanation: {
     color: 'listBackgroundSecondaryLabel',
     paddingBottom: 4,
     paddingTop: 1,
     textAlign: 'center',
   },
   innerExpandoButtons: {
     alignItems: 'flex-end',
     alignSelf: 'flex-end',
     flexDirection: 'row',
   },
   inputContainer: {
     flexDirection: 'row',
   },
   joinButton: {
     borderRadius: 8,
     flex: 1,
     justifyContent: 'center',
     marginHorizontal: 12,
     marginVertical: 3,
   },
   joinButtonContainer: {
     flexDirection: 'row',
     height: 48,
     marginBottom: 8,
   },
   editView: {
     marginLeft: 20,
     marginRight: 20,
     padding: 10,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   editViewContent: {
     flex: 1,
     paddingRight: 6,
   },
   exitEditButton: {
     marginTop: 6,
   },
   editingLabel: {
     paddingBottom: 4,
   },
   editingMessagePreview: {
     color: 'listForegroundLabel',
   },
   joinButtonContent: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },
   joinButtonTextLight: {
     color: 'white',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinButtonTextDark: {
     color: 'black',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinThreadLoadingIndicator: {
     paddingVertical: 2,
   },
   sendButton: {
     position: 'absolute',
     bottom: 4,
     left: 0,
   },
   sendIcon: {
     paddingLeft: 9,
     paddingRight: 8,
     paddingVertical: 6,
   },
   textInput: {
     backgroundColor: 'listInputBackground',
     borderRadius: 8,
     color: 'listForegroundLabel',
     fontSize: 16,
     marginLeft: 4,
     marginRight: 4,
     marginTop: 6,
     marginBottom: 8,
     maxHeight: 110,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +draft: string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: string,
   +userInfos: UserInfos,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +isActive: boolean,
   +keyboardState: ?KeyboardState,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   +inputState: ?InputState,
   +userMentionsCandidates: $ReadOnlyArray<RelativeMemberInfo>,
   +chatMentionSearchIndex: SentencePrefixSearchIndex,
   +chatMentionCandidates: ChatMentionCandidates,
   +parentThreadInfo: ?ThreadInfo,
   +editedMessagePreview: ?MessagePreviewResult,
   +editedMessageInfo: ?MessageInfo,
   +editMessage: (
     messageID: string,
     text: string,
   ) => Promise<SendEditMessageResponse>,
   +navigation: ?ChatNavigationProp<'MessageList'>,
   +overlayContext: ?OverlayContextType,
   +messageEditingContext: ?MessageEditingContextType,
   +selectionState: SyncedSelectionData,
   +setSelectionState: SetState<SyncedSelectionData>,
   +suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem>,
   +typeaheadMatchedStrings: ?TypeaheadMatchedStrings,
 };
 type State = {
   +text: string,
   +textEdited: boolean,
   +buttonsExpanded: boolean,
   +isExitingDuringEditMode: boolean,
 };
 class ChatInputBar extends React.PureComponent<Props, State> {
   textInput: ?React.ElementRef<typeof TextInput>;
   clearableTextInput: ?ClearableTextInput;
   selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>;
 
   expandoButtonsOpen: Value;
   targetExpandoButtonsOpen: Value;
   expandoButtonsStyle: AnimatedViewStyle;
   cameraRollIconStyle: AnimatedViewStyle;
   cameraIconStyle: AnimatedViewStyle;
   expandIconStyle: AnimatedViewStyle;
 
   sendButtonContainerOpen: Value;
   targetSendButtonContainerOpen: Value;
   sendButtonContainerStyle: AnimatedViewStyle;
 
   clearBeforeRemoveListener: () => void;
   clearFocusListener: () => void;
   clearBlurListener: () => void;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       text: props.draft,
       textEdited: false,
       buttonsExpanded: true,
       isExitingDuringEditMode: false,
     };
 
     this.setUpActionIconAnimations();
     this.setUpSendIconAnimations();
   }
 
   setUpActionIconAnimations() {
     this.expandoButtonsOpen = new Value(1);
     this.targetExpandoButtonsOpen = new Value(1);
     const prevTargetExpandoButtonsOpen = new Value(1);
     const expandoButtonClock = new Clock();
     const expandoButtonsOpen = block([
       cond(neq(this.targetExpandoButtonsOpen, prevTargetExpandoButtonsOpen), [
         stopClock(expandoButtonClock),
         set(prevTargetExpandoButtonsOpen, this.targetExpandoButtonsOpen),
       ]),
       cond(
         neq(this.expandoButtonsOpen, this.targetExpandoButtonsOpen),
         set(
           this.expandoButtonsOpen,
           runTiming(
             expandoButtonClock,
             this.expandoButtonsOpen,
             this.targetExpandoButtonsOpen,
             true,
             expandoButtonsAnimationConfig,
           ),
         ),
       ),
       this.expandoButtonsOpen,
     ]);
 
     this.cameraRollIconStyle = {
       ...unboundStyles.cameraRollIcon,
       opacity: expandoButtonsOpen,
     };
     this.cameraIconStyle = {
       ...unboundStyles.cameraIcon,
       opacity: expandoButtonsOpen,
     };
 
     const expandoButtonsWidth = interpolateNode(expandoButtonsOpen, {
       inputRange: [0, 1],
       outputRange: [26, 66],
     });
     this.expandoButtonsStyle = {
       ...unboundStyles.expandoButtons,
       width: expandoButtonsWidth,
     };
 
     const expandOpacity = sub(1, expandoButtonsOpen);
     this.expandIconStyle = {
       ...unboundStyles.expandIcon,
       opacity: expandOpacity,
     };
   }
 
   setUpSendIconAnimations() {
     const initialSendButtonContainerOpen = trimMessage(this.props.draft)
       ? 1
       : 0;
     this.sendButtonContainerOpen = new Value(initialSendButtonContainerOpen);
     this.targetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const prevTargetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const sendButtonClock = new Clock();
     const sendButtonContainerOpen = block([
       cond(
         neq(
           this.targetSendButtonContainerOpen,
           prevTargetSendButtonContainerOpen,
         ),
         [
           stopClock(sendButtonClock),
           set(
             prevTargetSendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
           ),
         ],
       ),
       cond(
         neq(this.sendButtonContainerOpen, this.targetSendButtonContainerOpen),
         set(
           this.sendButtonContainerOpen,
           runTiming(
             sendButtonClock,
             this.sendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
             true,
             sendButtonAnimationConfig,
           ),
         ),
       ),
       this.sendButtonContainerOpen,
     ]);
 
     const sendButtonContainerWidth = interpolateNode(sendButtonContainerOpen, {
       inputRange: [0, 1],
       outputRange: [4, 38],
     });
     this.sendButtonContainerStyle = { width: sendButtonContainerWidth };
   }
 
   static mediaGalleryOpen(props: Props): boolean {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.mediaGalleryOpen);
   }
 
   static systemKeyboardShowing(props: Props): boolean {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.systemKeyboardShowing);
   }
 
   get systemKeyboardShowing(): boolean {
     return ChatInputBar.systemKeyboardShowing(this.props);
   }
 
   immediatelyShowSendButton() {
     this.sendButtonContainerOpen.setValue(1);
     this.targetSendButtonContainerOpen.setValue(1);
   }
 
   updateSendButton(currentText: string) {
     if (this.shouldShowTextInput) {
       this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
     } else {
       this.setUpSendIconAnimations();
     }
   }
 
   componentDidMount() {
     const { isActive, navigation } = this.props;
     if (isActive) {
       this.addEditInputMessageListener();
     }
     if (!navigation) {
       return;
     }
     this.clearBeforeRemoveListener = navigation.addListener(
       'beforeRemove',
       this.onNavigationBeforeRemove,
     );
     this.clearFocusListener = navigation.addListener(
       'focus',
       this.onNavigationFocus,
     );
     this.clearBlurListener = navigation.addListener(
       'blur',
       this.onNavigationBlur,
     );
   }
 
   componentWillUnmount() {
     if (this.props.isActive) {
       this.removeEditInputMessageListener();
     }
     if (this.clearBeforeRemoveListener) {
       this.clearBeforeRemoveListener();
     }
     if (this.clearFocusListener) {
       this.clearFocusListener();
     }
     if (this.clearBlurListener) {
       this.clearBlurListener();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (
       this.state.textEdited &&
       this.state.text &&
       this.props.threadInfo.id !== prevProps.threadInfo.id
     ) {
       this.props.dispatch({
         type: moveDraftActionType,
         payload: {
           oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),
           newKey: draftKeyFromThreadID(this.props.threadInfo.id),
         },
       });
     } else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {
       this.setState({ text: this.props.draft });
     }
     if (this.props.isActive && !prevProps.isActive) {
       this.addEditInputMessageListener();
     } else if (!this.props.isActive && prevProps.isActive) {
       this.removeEditInputMessageListener();
     }
 
     const currentText = trimMessage(this.state.text);
     const prevText = trimMessage(prevState.text);
 
     if (
       (currentText === '' && prevText !== '') ||
       (currentText !== '' && prevText === '')
     ) {
       this.updateSendButton(currentText);
     }
 
     const systemKeyboardIsShowing = ChatInputBar.systemKeyboardShowing(
       this.props,
     );
     const systemKeyboardWasShowing =
       ChatInputBar.systemKeyboardShowing(prevProps);
     if (systemKeyboardIsShowing && !systemKeyboardWasShowing) {
       this.hideButtons();
     } else if (!systemKeyboardIsShowing && systemKeyboardWasShowing) {
       this.expandButtons();
     }
 
     const imageGalleryIsOpen = ChatInputBar.mediaGalleryOpen(this.props);
     const imageGalleryWasOpen = ChatInputBar.mediaGalleryOpen(prevProps);
     if (!imageGalleryIsOpen && imageGalleryWasOpen) {
       this.hideButtons();
     } else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
       this.expandButtons();
       this.setIOSKeyboardHeight();
     }
 
     if (
       this.props.messageEditingContext?.editState.editedMessage &&
       !prevProps.messageEditingContext?.editState.editedMessage
     ) {
       this.blockNavigation();
     }
   }
 
   addEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addEditInputMessageListener',
     );
     this.props.inputState.addEditInputMessageListener(this.focusAndUpdateText);
   }
 
   removeEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeEditInputMessageListener',
     );
     this.props.inputState.removeEditInputMessageListener(
       this.focusAndUpdateText,
     );
   }
 
   setIOSKeyboardHeight() {
     if (Platform.OS !== 'ios') {
       return;
     }
     const { textInput } = this;
     if (!textInput) {
       return;
     }
     const keyboardHeight = getKeyboardHeight();
     if (keyboardHeight === null || keyboardHeight === undefined) {
       return;
     }
     TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
   }
 
   get shouldShowTextInput(): boolean {
     if (threadHasPermission(this.props.threadInfo, threadPermissions.VOICED)) {
       return true;
     }
     // If the thread is created by somebody else while the viewer is attempting
     // to create it, the threadInfo might be modified in-place
     // and won't list the viewer as a member,
     // which will end up hiding the input.
     // In this case, we will assume that our creation action
     // will get translated into a join, and as long
     // as members are voiced, we can show the input.
     if (!this.props.threadCreationInProgress) {
       return false;
     }
     return checkIfDefaultMembersAreVoiced(this.props.threadInfo);
   }
 
   render(): React.Node {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
     let joinButton = null;
     const threadColor = `#${this.props.threadInfo.color}`;
     const isEditMode = this.isEditMode();
     if (!isMember && canJoin && !this.props.threadCreationInProgress) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <ActivityIndicator
             size="small"
             color="white"
             style={this.props.styles.joinThreadLoadingIndicator}
           />
         );
       } else {
         const textStyle = colorIsDark(this.props.threadInfo.color)
           ? this.props.styles.joinButtonTextLight
           : this.props.styles.joinButtonTextDark;
         buttonContent = (
           <View style={this.props.styles.joinButtonContent}>
             <SWMansionIcon name="plus" style={textStyle} />
             <Text style={textStyle}>Join Chat</Text>
           </View>
         );
       }
       joinButton = (
         <View style={this.props.styles.joinButtonContainer}>
           <Button
             onPress={this.onPressJoin}
             iosActiveOpacity={0.85}
             style={[
               this.props.styles.joinButton,
               { backgroundColor: threadColor },
             ]}
           >
             {buttonContent}
           </Button>
         </View>
       );
     }
 
     let typeaheadTooltip = null;
 
     if (
       this.props.suggestions.length > 0 &&
       this.props.typeaheadMatchedStrings &&
       !isEditMode
     ) {
       typeaheadTooltip = (
         <TypeaheadTooltip
           text={this.state.text}
           matchedStrings={this.props.typeaheadMatchedStrings}
           suggestions={this.props.suggestions}
           focusAndUpdateTextAndSelection={this.focusAndUpdateTextAndSelection}
           typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
           TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
         />
       );
     }
 
     let content;
     const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
       this.props.threadInfo,
     );
     if (this.shouldShowTextInput) {
       content = this.renderInput();
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <Text style={this.props.styles.explanation}>
           You can&rsquo;t send messages to a user that you&rsquo;ve blocked.
         </Text>
       );
     } else if (isMember) {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     } else if (defaultMembersAreVoiced && canJoin) {
       content = null;
     } else {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     }
 
     const keyboardInputHost =
       Platform.OS === 'android' ? null : (
         <KeyboardInputHost textInputRef={this.textInput} />
       );
 
     let editedMessage;
     if (isEditMode && this.props.editedMessagePreview) {
       const { message } = this.props.editedMessagePreview;
       editedMessage = (
         <AnimatedView
           style={this.props.styles.editView}
           entering={FadeInDown}
           exiting={FadeOutDown}
         >
           <View style={this.props.styles.editViewContent}>
             <TouchableOpacity
               onPress={this.scrollToEditedMessage}
               activeOpacity={0.4}
             >
               <Text
                 style={[{ color: threadColor }, this.props.styles.editingLabel]}
               >
                 Editing message
               </Text>
               <SingleLine style={this.props.styles.editingMessagePreview}>
                 {message.text}
               </SingleLine>
             </TouchableOpacity>
           </View>
           <SWMansionIcon
             style={this.props.styles.exitEditButton}
             name="cross"
             size={22}
             color={threadColor}
             onPress={this.onPressExitEditMode}
           />
         </AnimatedView>
       );
     }
 
     return (
       <AnimatedView
         style={this.props.styles.container}
         onLayout={this.props.onInputBarLayout}
       >
         {typeaheadTooltip}
         {joinButton}
         {editedMessage}
         {content}
         {keyboardInputHost}
       </AnimatedView>
     );
   }
 
   renderInput(): React.Node {
     const expandoButton = (
       <TouchableOpacity
         onPress={this.expandButtons}
         activeOpacity={0.4}
         style={this.props.styles.expandButton}
       >
         <AnimatedView style={this.expandIconStyle}>
           <SWMansionIcon
             name="chevron-right"
             size={22}
             color={`#${this.props.threadInfo.color}`}
           />
         </AnimatedView>
       </TouchableOpacity>
     );
     const threadColor = `#${this.props.threadInfo.color}`;
     const expandoButtonsViewStyle: Array<ViewStyle> = [
       this.props.styles.innerExpandoButtons,
     ];
     if (this.isEditMode()) {
       expandoButtonsViewStyle.push({ display: 'none' });
     }
     return (
       <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
         <View style={this.props.styles.inputContainer}>
           <AnimatedView style={this.expandoButtonsStyle}>
             <View style={expandoButtonsViewStyle}>
               {this.state.buttonsExpanded ? expandoButton : null}
               <TouchableOpacity
                 onPress={this.showMediaGallery}
                 activeOpacity={0.4}
               >
                 <AnimatedView style={this.cameraRollIconStyle}>
                   <SWMansionIcon
                     name="image-1"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               <TouchableOpacity
                 onPress={this.props.openCamera}
                 activeOpacity={0.4}
                 disabled={!this.state.buttonsExpanded}
               >
                 <AnimatedView style={this.cameraIconStyle}>
                   <SWMansionIcon
                     name="camera"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               {this.state.buttonsExpanded ? null : expandoButton}
             </View>
           </AnimatedView>
           <SelectableTextInput
             allowImagePasteForThreadID={this.props.threadInfo.id}
             value={this.state.text}
             onChangeText={this.updateText}
             selection={this.props.selectionState.selection}
             onUpdateSyncedSelectionData={this.props.setSelectionState}
             placeholder="Send a message..."
             placeholderTextColor={this.props.colors.listInputButton}
             multiline={true}
             style={this.props.styles.textInput}
             textInputRef={this.textInputRef}
             clearableTextInputRef={this.clearableTextInputRef}
             ref={this.selectableTextInputRef}
             selectionColor={`#${this.props.threadInfo.color}`}
           />
           <AnimatedView style={this.sendButtonContainerStyle}>
             <TouchableOpacity
               onPress={this.onSend}
               activeOpacity={0.4}
               style={this.props.styles.sendButton}
               disabled={trimMessage(this.state.text) === ''}
             >
               <Icon
                 name="md-send"
                 size={25}
                 style={this.props.styles.sendIcon}
                 color={threadColor}
               />
             </TouchableOpacity>
           </AnimatedView>
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof TextInput>) => {
     this.textInput = textInput;
   };
 
   clearableTextInputRef = (clearableTextInput: ?ClearableTextInput) => {
     this.clearableTextInput = clearableTextInput;
   };
 
   selectableTextInputRef = (
     selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>,
   ) => {
     this.selectableTextInput = selectableTextInput;
   };
 
   updateText = (text: string) => {
     if (this.state.isExitingDuringEditMode) {
       return;
     }
     this.setState({ text, textEdited: true });
     this.props.messageEditingContext?.setEditedMessageChanged(
       this.isMessageEdited(text),
     );
     if (this.isEditMode()) {
       return;
     }
     this.saveDraft(text);
   };
 
   saveDraft: (text: string) => void = _throttle(text => {
     this.props.dispatch({
       type: updateDraftActionType,
       payload: {
         key: draftKeyFromThreadID(this.props.threadInfo.id),
         text,
       },
     });
   }, 400);
 
   focusAndUpdateTextAndSelection = (text: string, selection: Selection) => {
     this.selectableTextInput?.prepareForSelectionMutation(text, selection);
     this.setState({
       text,
       textEdited: true,
     });
     this.props.setSelectionState({ text, selection });
     this.saveDraft(text);
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateText = (params: EditInputBarMessageParameters) => {
     const { message: text, mode } = params;
     const currentText = this.state.text;
     if (mode === 'replace') {
       this.updateText(text);
     } else if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.updateText(prependedText);
     }
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateButtonsVisibility = () => {
     const { textInput } = this;
     if (!textInput) {
       return;
     }
 
     this.immediatelyShowSendButton();
     this.immediatelyHideButtons();
     textInput.focus();
   };
 
   onSend = async () => {
     if (!trimMessage(this.state.text)) {
       return;
     }
 
     const editedMessage = this.getEditedMessage();
     if (editedMessage && editedMessage.id) {
       await this.editMessage(editedMessage.id, this.state.text);
       return;
     }
 
     this.updateSendButton('');
 
     const { clearableTextInput } = this;
     invariant(
       clearableTextInput,
       'clearableTextInput should be sent in onSend',
     );
     let text = await clearableTextInput.getValueAndReset();
     text = trimMessage(text);
     if (!text) {
       return;
     }
 
     const localID = this.props.nextLocalID;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
     invariant(
       this.props.inputState,
       'inputState should be set in ChatInputBar.onSend',
     );
 
     await this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
       this.props.parentThreadInfo,
     );
   };
 
   isEditMode = (): boolean => {
     const editState = this.props.messageEditingContext?.editState;
     const isThisThread =
       editState?.editedMessage?.threadID === this.props.threadInfo.id;
     return editState?.editedMessage !== null && isThisThread;
   };
 
   isMessageEdited = (newText?: string): boolean => {
     let text = newText ?? this.state.text;
     text = trimMessage(text);
     const originalText = this.props.editedMessageInfo?.text;
     return text !== originalText;
   };
 
   unblockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation) {
       return;
     }
     navigation.setParams({ removeEditMode: null });
   };
 
   removeEditMode: RemoveEditMode = action => {
     const { navigation } = this.props;
     if (!navigation || this.state.isExitingDuringEditMode) {
       return 'ignore_action';
     }
     if (!this.isMessageEdited()) {
       this.unblockNavigation();
       return 'reduce_action';
     }
     const unblockAndDispatch = () => {
       this.unblockNavigation();
       navigation.dispatch(action);
     };
     const onContinueEditing = () => {
       this.props.overlayContext?.resetScrollBlockingModalStatus();
     };
     exitEditAlert({
       onDiscard: unblockAndDispatch,
       onContinueEditing,
     });
     return 'ignore_action';
   };
 
   blockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation || !navigation.isFocused()) {
       return;
     }
     navigation.setParams({
       removeEditMode: this.removeEditMode,
     });
   };
 
   editMessage = async (messageID: string, text: string) => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     text = trimMessage(text);
     try {
       await this.props.editMessage(messageID, text);
       this.exitEditMode();
     } catch (error) {
       Alert.alert(
         'Couldn’t edit the message',
         'Please try again later',
         [{ text: 'OK' }],
         {
           cancelable: true,
         },
       );
     }
   };
 
   getEditedMessage = (): ?MessageInfo => {
     const editState = this.props.messageEditingContext?.editState;
     return editState?.editedMessage;
   };
 
   onPressExitEditMode = () => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     exitEditAlert({
       onDiscard: this.exitEditMode,
     });
   };
 
   scrollToEditedMessage = () => {
     const editedMessage = this.getEditedMessage();
     if (!editedMessage) {
       return;
     }
     const editedMessageKey = messageKey(editedMessage);
     this.props.inputState?.scrollToMessage(editedMessageKey);
   };
 
   exitEditMode = () => {
     this.props.messageEditingContext?.setEditedMessage(null, () => {
       this.unblockNavigation();
       this.updateText(this.props.draft);
       this.focusAndUpdateButtonsVisibility();
       this.updateSendButton(this.props.draft);
     });
   };
 
   onNavigationFocus = () => {
     this.setState({ isExitingDuringEditMode: false });
   };
 
   onNavigationBlur = () => {
     if (!this.isEditMode()) {
       return;
     }
     this.setState(
       { text: this.props.draft, isExitingDuringEditMode: true },
       this.exitEditMode,
     );
   };
 
   onNavigationBeforeRemove = (e: {
     +data: { +action: GenericNavigationAction },
     +preventDefault: () => void,
     ...
   }) => {
     if (!this.isEditMode()) {
       return;
     }
     const { action } = e.data;
     e.preventDefault();
     const saveExit = () => {
       this.props.messageEditingContext?.setEditedMessage(null, () => {
         this.setState({ isExitingDuringEditMode: true }, () => {
           if (!this.props.navigation) {
             return;
           }
           this.props.navigation.dispatch(action);
         });
       });
     };
     if (!this.isMessageEdited()) {
       saveExit();
       return;
     }
     exitEditAlert({
       onDiscard: saveExit,
     });
   };
 
   onPressJoin = () => {
     void this.props.dispatchActionPromise(
       joinThreadActionTypes,
       this.joinAction(),
     );
   };
 
   async joinAction(): Promise<ThreadJoinPayload> {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 
   expandButtons = () => {
     if (this.state.buttonsExpanded || this.isEditMode()) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(1);
     this.setState({ buttonsExpanded: true });
   };
 
   hideButtons() {
     if (
       ChatInputBar.mediaGalleryOpen(this.props) ||
       !this.systemKeyboardShowing ||
       !this.state.buttonsExpanded
     ) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   immediatelyHideButtons() {
     this.expandoButtonsOpen.setValue(0);
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   showMediaGallery = () => {
     const { keyboardState } = this.props;
     invariant(keyboardState, 'keyboardState should be initialized');
     keyboardState.showMediaGallery(this.props.threadInfo);
   };
 
   dismissKeyboard = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 const createThreadLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 type ConnectedChatInputBarBaseProps = {
   ...BaseProps,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +navigation?: ChatNavigationProp<'MessageList'>,
 };
 function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {
   const navContext = React.useContext(NavContext);
   const keyboardState = React.useContext(KeyboardContext);
   const inputState = React.useContext(InputStateContext);
   const overlayContext = React.useContext(OverlayContext);
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const draft = useSelector(
     state =>
       state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
   );
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
   const createThreadLoadingStatus = useSelector(
     createThreadLoadingStatusSelector,
   );
   const threadCreationInProgress = createThreadLoadingStatus === 'loading';
   const calendarQuery = useSelector(state =>
     nonThreadCalendarQuery({
       redux: state,
       navContext,
     }),
   );
   const nextLocalID = useNextLocalID();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const isActive = React.useMemo(
     () => props.threadInfo.id === activeThreadSelector(navContext),
     [props.threadInfo.id, navContext],
   );
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
   const callJoinThread = useJoinThread();
 
   const { getChatMentionSearchIndex } = useChatMentionContext();
   const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
   const { parentThreadID } = props.threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
 
   const userMentionsCandidates = useUserMentionsCandidates(
     props.threadInfo,
     parentThreadInfo,
   );
 
   const chatMentionCandidates = useThreadChatMentionCandidates(
     props.threadInfo,
   );
 
   const messageEditingContext = React.useContext(MessageEditingContext);
 
   const editedMessageInfo = messageEditingContext?.editState.editedMessage;
   const editedMessagePreview = useMessagePreview(
     editedMessageInfo,
     props.threadInfo,
     getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
   );
   const editMessage = useEditMessage();
 
   const [selectionState, setSelectionState] =
     React.useState<SyncedSelectionData>({
       text: draft,
       selection: { start: 0, end: 0 },
     });
 
   const typeaheadRegexMatches = React.useMemo(
     () =>
       getTypeaheadRegexMatches(
         selectionState.text,
         selectionState.selection,
         nativeMentionTypeaheadRegex,
       ),
     [selectionState.text, selectionState.selection],
   );
 
   const typeaheadMatchedStrings: ?TypeaheadMatchedStrings =
     React.useMemo(() => {
       if (typeaheadRegexMatches === null) {
         return null;
       }
       return {
         textBeforeAtSymbol: typeaheadRegexMatches[1] ?? '',
         query: typeaheadRegexMatches[4] ?? '',
       };
     }, [typeaheadRegexMatches]);
 
   const suggestedUsers = useMentionTypeaheadUserSuggestions(
     userMentionsCandidates,
     typeaheadMatchedStrings,
   );
 
   const suggestedChats = useMentionTypeaheadChatSuggestions(
     chatMentionSearchIndex,
     chatMentionCandidates,
     typeaheadMatchedStrings,
   );
 
   const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
     React.useMemo(
       () => [...suggestedUsers, ...suggestedChats],
       [suggestedUsers, suggestedChats],
     );
 
   return (
     <ChatInputBar
       {...props}
       viewerID={viewerID}
       draft={draft}
       joinThreadLoadingStatus={joinThreadLoadingStatus}
       threadCreationInProgress={threadCreationInProgress}
       calendarQuery={calendarQuery}
       nextLocalID={nextLocalID}
       userInfos={userInfos}
       colors={colors}
       styles={styles}
       isActive={isActive}
       keyboardState={keyboardState}
       dispatch={dispatch}
       dispatchActionPromise={dispatchActionPromise}
       joinThread={callJoinThread}
       inputState={inputState}
       userMentionsCandidates={userMentionsCandidates}
       chatMentionSearchIndex={chatMentionSearchIndex}
       chatMentionCandidates={chatMentionCandidates}
       parentThreadInfo={parentThreadInfo}
       editedMessagePreview={editedMessagePreview}
       editedMessageInfo={editedMessageInfo}
       editMessage={editMessage}
       navigation={props.navigation}
       overlayContext={overlayContext}
       messageEditingContext={messageEditingContext}
       selectionState={selectionState}
       setSelectionState={setSelectionState}
       suggestions={suggestions}
       typeaheadMatchedStrings={typeaheadMatchedStrings}
     />
   );
 }
 
 type DummyChatInputBarProps = {
   ...BaseProps,
   +onHeightMeasured: (height: number) => mixed,
 };
 const noop = () => {};
 function DummyChatInputBar(props: DummyChatInputBarProps): React.Node {
   const { onHeightMeasured, ...restProps } = props;
   const onInputBarLayout = React.useCallback(
     (event: LayoutEvent) => {
       const { height } = event.nativeEvent.layout;
       onHeightMeasured(height);
     },
     [onHeightMeasured],
   );
   return (
     <View pointerEvents="none">
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={noop}
       />
     </View>
   );
 }
 
 type ChatInputBarProps = {
   ...BaseProps,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 };
 const ConnectedChatInputBar: React.ComponentType<ChatInputBarProps> =
   React.memo<ChatInputBarProps>(function ConnectedChatInputBar(
     props: ChatInputBarProps,
   ) {
     const { navigation, route, ...restProps } = props;
     const keyboardState = React.useContext(KeyboardContext);
 
     const { threadInfo } = props;
     const imagePastedCallback = React.useCallback(
       (imagePastedEvent: ImagePasteEvent) => {
         if (threadInfo.id !== imagePastedEvent.threadID) {
           return;
         }
         const pastedImage: PhotoPaste = {
           step: 'photo_paste',
           dimensions: {
             height: imagePastedEvent.height,
             width: imagePastedEvent.width,
           },
           filename: imagePastedEvent.fileName,
           uri: 'file://' + imagePastedEvent.filePath,
           selectTime: 0,
           sendTime: 0,
           retries: 0,
         };
         navigation.navigate<'ImagePasteModal'>({
           name: ImagePasteModalRouteName,
           params: {
             imagePasteStagingInfo: pastedImage,
             thread: threadInfo,
           },
         });
       },
       [navigation, threadInfo],
     );
 
     React.useEffect(() => {
       const imagePasteListener = NativeAppEventEmitter.addListener(
         'imagePasted',
         imagePastedCallback,
       );
       return () => imagePasteListener.remove();
     }, [imagePastedCallback]);
 
     const chatContext = React.useContext(ChatContext);
     invariant(chatContext, 'should be set');
     const { setChatInputBarHeight, deleteChatInputBarHeight } = chatContext;
     const onInputBarLayout = React.useCallback(
       (event: LayoutEvent) => {
         const { height } = event.nativeEvent.layout;
         setChatInputBarHeight(threadInfo.id, height);
       },
       [threadInfo.id, setChatInputBarHeight],
     );
 
     React.useEffect(() => {
       return () => {
         deleteChatInputBarHeight(threadInfo.id);
       };
     }, [deleteChatInputBarHeight, threadInfo.id]);
 
     const openCamera = React.useCallback(() => {
       keyboardState?.dismissKeyboard();
       navigation.navigate<'ChatCameraModal'>({
         name: ChatCameraModalRouteName,
         params: {
           presentedFrom: route.key,
           thread: threadInfo,
         },
       });
     }, [keyboardState, navigation, route.key, threadInfo]);
 
     return (
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={openCamera}
         navigation={navigation}
       />
     );
   });
 
 export { ConnectedChatInputBar as ChatInputBar, DummyChatInputBar };
diff --git a/native/chat/compose-subchannel.react.js b/native/chat/compose-subchannel.react.js
index 139c7e2f4..2979eed75 100644
--- a/native/chat/compose-subchannel.react.js
+++ b/native/chat/compose-subchannel.react.js
@@ -1,368 +1,368 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _flow from 'lodash/fp/flow.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import * as React from 'react';
 import { View, Text } from 'react-native';
 
 import {
   newThreadActionTypes,
   useNewThread,
 } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userInfoSelectorForPotentialMembers } from 'lib/selectors/user-selectors.js';
 import { usePotentialMemberItems } from 'lib/shared/search-utils.js';
 import { threadInFilterList, userIsMember } from 'lib/shared/thread-utils.js';
 import { type ThreadType, threadTypes } from 'lib/types/thread-types-enum.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { type AccountUserInfo } from 'lib/types/user-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
 import { useNavigateToThread } from './message-list-types.js';
 import ParentThreadHeader from './parent-thread-header.react.js';
 import LinkButton from '../components/link-button.react.js';
 import {
   createTagInput,
   type BaseTagInput,
 } from '../components/tag-input.react.js';
 import ThreadList from '../components/thread-list.react.js';
 import UserList from '../components/user-list.react.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 
 const TagInput = createTagInput<AccountUserInfo>();
 
 const tagInputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
 
 export type ComposeSubchannelParams = {
   +threadType: ThreadType,
   +parentThreadInfo: ThreadInfo,
 };
 
 type Props = {
   +navigation: ChatNavigationProp<'ComposeSubchannel'>,
   +route: NavigationRoute<'ComposeSubchannel'>,
 };
 function ComposeSubchannel(props: Props): React.Node {
   const [usernameInputText, setUsernameInputText] = React.useState<string>('');
   const [userInfoInputArray, setUserInfoInputArray] = React.useState<
     $ReadOnlyArray<AccountUserInfo>,
   >([]);
   const [createButtonEnabled, setCreateButtonEnabled] =
     React.useState<boolean>(true);
 
   const tagInputRef = React.useRef<?BaseTagInput<AccountUserInfo>>();
   const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
     setUsernameInputText('');
     tagInputRef.current?.focus();
   }, []);
 
   const waitingOnThreadIDRef = React.useRef<?string>();
 
   const { threadType, parentThreadInfo } = props.route.params;
   const userInfoInputIDs = userInfoInputArray.map(userInfo => userInfo.id);
   const callNewThread = useNewThread();
   const calendarQuery = useCalendarQuery();
   const newChatThreadAction = React.useCallback(async () => {
     try {
       const assumedThreadType =
         threadType ?? threadTypes.COMMUNITY_SECRET_SUBTHREAD;
       const query = calendarQuery();
       invariant(
         assumedThreadType === 3 ||
           assumedThreadType === 4 ||
           assumedThreadType === 6 ||
           assumedThreadType === 7,
         "Sidebars and communities can't be created from the thread composer",
       );
       const result = await callNewThread({
         type: assumedThreadType,
         parentThreadID: parentThreadInfo.id,
         initialMemberIDs: userInfoInputIDs,
         color: parentThreadInfo.color,
         calendarQuery: query,
       });
       waitingOnThreadIDRef.current = result.newThreadID;
       return result;
     } catch (e) {
       setCreateButtonEnabled(true);
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }, [
     threadType,
     userInfoInputIDs,
     calendarQuery,
     parentThreadInfo,
     callNewThread,
     onUnknownErrorAlertAcknowledged,
   ]);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const dispatchNewChatThreadAction = React.useCallback(() => {
     setCreateButtonEnabled(false);
     void dispatchActionPromise(newThreadActionTypes, newChatThreadAction());
   }, [dispatchActionPromise, newChatThreadAction]);
 
   const userInfoInputArrayEmpty = userInfoInputArray.length === 0;
   const onPressCreateThread = React.useCallback(() => {
     if (!createButtonEnabled) {
       return;
     }
     if (userInfoInputArrayEmpty) {
       Alert.alert(
         'Chatting to yourself?',
         'Are you sure you want to create a channel containing only yourself?',
         [
           { text: 'Cancel', style: 'cancel' },
           { text: 'Confirm', onPress: dispatchNewChatThreadAction },
         ],
         { cancelable: true },
       );
     } else {
       dispatchNewChatThreadAction();
     }
   }, [
     createButtonEnabled,
     userInfoInputArrayEmpty,
     dispatchNewChatThreadAction,
   ]);
 
   const { navigation } = props;
   const { setOptions } = navigation;
   React.useEffect(() => {
     setOptions({
       headerRight: () => (
         <LinkButton
           text="Create"
           onPress={onPressCreateThread}
           disabled={!createButtonEnabled}
         />
       ),
     });
   }, [setOptions, onPressCreateThread, createButtonEnabled]);
 
   const { setParams } = navigation;
   const parentThreadInfoID = parentThreadInfo.id;
   const reduxParentThreadInfo = useSelector(
     state => threadInfoSelector(state)[parentThreadInfoID],
   );
   React.useEffect(() => {
     if (reduxParentThreadInfo) {
       setParams({ parentThreadInfo: reduxParentThreadInfo });
     }
   }, [reduxParentThreadInfo, setParams]);
 
   const threadInfos = useSelector(threadInfoSelector);
   const newlyCreatedThreadInfo = waitingOnThreadIDRef.current
     ? threadInfos[waitingOnThreadIDRef.current]
     : null;
   const { pushNewThread } = navigation;
   React.useEffect(() => {
     if (!newlyCreatedThreadInfo) {
       return;
     }
 
     const waitingOnThreadID = waitingOnThreadIDRef.current;
     if (waitingOnThreadID === null || waitingOnThreadID === undefined) {
       return;
     }
     waitingOnThreadIDRef.current = undefined;
 
     pushNewThread(newlyCreatedThreadInfo);
   }, [newlyCreatedThreadInfo, pushNewThread]);
 
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   const { community } = parentThreadInfo;
   const communityThreadInfo = useSelector(state =>
     community ? threadInfoSelector(state)[community] : null,
   );
   const userSearchResults = usePotentialMemberItems({
     text: usernameInputText,
     userInfos: otherUserInfos,
     excludeUserIDs: userInfoInputIDs,
     inputParentThreadInfo: parentThreadInfo,
     inputCommunityThreadInfo: communityThreadInfo,
     threadType,
   });
 
   const existingThreads: $ReadOnlyArray<ThreadInfo> = React.useMemo(() => {
     if (userInfoInputIDs.length === 0) {
       return [];
     }
     return _flow(
       _filter(
         (threadInfo: ThreadInfo) =>
           threadInFilterList(threadInfo) &&
           threadInfo.parentThreadID === parentThreadInfo.id &&
           userInfoInputIDs.every(userID => userIsMember(threadInfo, userID)),
       ),
       _sortBy(
         ([
           'members.length',
           (threadInfo: ThreadInfo) => (threadInfo.name ? 1 : 0),
         ]: $ReadOnlyArray<string | ((threadInfo: ThreadInfo) => mixed)>),
       ),
     )(threadInfos);
   }, [userInfoInputIDs, threadInfos, parentThreadInfo]);
 
   const navigateToThread = useNavigateToThread();
   const onSelectExistingThread = React.useCallback(
     (threadID: string) => {
       const threadInfo = threadInfos[threadID];
       navigateToThread({ threadInfo });
     },
     [threadInfos, navigateToThread],
   );
 
   const onUserSelect = React.useCallback(
     ({ id }: AccountUserInfo) => {
       if (userInfoInputIDs.some(existingUserID => id === existingUserID)) {
         return;
       }
       setUserInfoInputArray(oldUserInfoInputArray => [
         ...oldUserInfoInputArray,
         otherUserInfos[id],
       ]);
       setUsernameInputText('');
     },
     [userInfoInputIDs, otherUserInfos],
   );
 
   const styles = useStyles(unboundStyles);
 
   let existingThreadsSection = null;
   if (existingThreads.length > 0) {
     existingThreadsSection = (
       <View style={styles.existingThreads}>
         <View style={styles.existingThreadsRow}>
           <Text style={styles.existingThreadsLabel}>Existing channels</Text>
         </View>
         <View style={styles.existingThreadList}>
           <ThreadList
             threadInfos={existingThreads}
             onSelect={onSelectExistingThread}
             itemTextStyle={styles.listItem}
           />
         </View>
       </View>
     );
   }
 
   const inputProps = React.useMemo(
     () => ({
       ...tagInputProps,
       onSubmitEditing: onPressCreateThread,
     }),
     [onPressCreateThread],
   );
   const userSearchResultWithENSNames = useENSNames(userSearchResults);
   const userInfoInputArrayWithENSNames = useENSNames(userInfoInputArray);
   return (
     <View style={styles.container}>
       <ParentThreadHeader
         parentThreadInfo={parentThreadInfo}
         childThreadType={threadType}
       />
       <View style={styles.userSelectionRow}>
         <Text style={styles.tagInputLabel}>To: </Text>
         <View style={styles.tagInputContainer}>
           <TagInput
             value={userInfoInputArrayWithENSNames}
             onChange={setUserInfoInputArray}
             text={usernameInputText}
             onChangeText={setUsernameInputText}
             labelExtractor={tagDataLabelExtractor}
             inputProps={inputProps}
             ref={tagInputRef}
           />
         </View>
       </View>
       <View style={styles.userList}>
         <UserList
           userInfos={userSearchResultWithENSNames}
           onSelect={onUserSelect}
           itemTextStyle={styles.listItem}
         />
       </View>
       {existingThreadsSection}
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
   },
   existingThreadList: {
     backgroundColor: 'modalBackground',
     flex: 1,
     paddingRight: 12,
   },
   existingThreads: {
     flex: 1,
   },
   existingThreadsLabel: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     paddingLeft: 12,
     textAlign: 'center',
   },
   existingThreadsRow: {
     backgroundColor: 'modalForeground',
     borderBottomWidth: 1,
     borderColor: 'modalForegroundBorder',
     borderTopWidth: 1,
     paddingVertical: 6,
   },
   listItem: {
     color: 'modalForegroundLabel',
   },
   tagInputContainer: {
     flex: 1,
     marginLeft: 8,
     paddingRight: 12,
   },
   tagInputLabel: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     paddingLeft: 12,
   },
   userList: {
     backgroundColor: 'modalBackground',
     flex: 1,
     paddingLeft: 35,
     paddingRight: 12,
   },
   userSelectionRow: {
     alignItems: 'center',
     backgroundColor: 'modalForeground',
     borderBottomWidth: 1,
     borderColor: 'modalForegroundBorder',
     flexDirection: 'row',
     paddingVertical: 6,
   },
 };
 
 const MemoizedComposeSubchannel: React.ComponentType<Props> =
   React.memo<Props>(ComposeSubchannel);
 
 export default MemoizedComposeSubchannel;
diff --git a/native/chat/message-list.react.js b/native/chat/message-list.react.js
index 2715b7818..6e4619dd9 100644
--- a/native/chat/message-list.react.js
+++ b/native/chat/message-list.react.js
@@ -1,373 +1,373 @@
 // @flow
 
 import invariant from 'invariant';
 import _find from 'lodash/fp/find.js';
 import * as React from 'react';
 import { View, TouchableWithoutFeedback } from 'react-native';
 import { createSelector } from 'reselect';
 
 import {
   fetchMessagesBeforeCursorActionTypes,
   useFetchMessagesBeforeCursor,
   fetchMostRecentMessagesActionTypes,
   useFetchMostRecentMessages,
   type FetchMostRecentMessagesInput,
   type FetchMessagesBeforeCursorInput,
 } from 'lib/actions/message-actions.js';
 import { useOldestMessageServerID } from 'lib/hooks/message-hooks.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import { messageKey } from 'lib/shared/message-utils.js';
 import { useWatchThread } from 'lib/shared/thread-utils.js';
 import type { FetchMessageInfosPayload } from 'lib/types/message-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import ChatList from './chat-list.react.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import Message from './message.react.js';
 import RelationshipPrompt from './relationship-prompt.react.js';
 import ListLoadingIndicator from '../components/list-loading-indicator.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import { defaultStackScreenOptions } from '../navigation/options.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   useStyles,
   type IndicatorStyle,
   useIndicatorStyle,
 } from '../themes/colors.js';
 import type {
   ChatMessageInfoItemWithHeight,
   ChatMessageItemWithHeight,
 } from '../types/chat-types.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 import type { ViewableItemsChange } from '../types/react-native.js';
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   header: {
     height: 12,
   },
   listLoadingIndicator: {
     flex: 1,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
   +messageListData: $ReadOnlyArray<ChatMessageItemWithHeight>,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 };
 type Props = {
   ...BaseProps,
   +startReached: boolean,
   +styles: $ReadOnly<typeof unboundStyles>,
   +indicatorStyle: IndicatorStyle,
   +dispatchActionPromise: DispatchActionPromise,
   +fetchMessagesBeforeCursor: (
     input: FetchMessagesBeforeCursorInput,
   ) => Promise<FetchMessageInfosPayload>,
   +fetchMostRecentMessages: (
     input: FetchMostRecentMessagesInput,
   ) => Promise<FetchMessageInfosPayload>,
   +overlayContext: ?OverlayContextType,
   +keyboardState: ?KeyboardState,
   +oldestMessageServerID: ?string,
 };
 type State = {
   +focusedMessageKey: ?string,
   +messageListVerticalBounds: ?VerticalBounds,
   +loadingFromScroll: boolean,
 };
 type PropsAndState = {
   ...Props,
   ...State,
 };
 type FlatListExtraData = {
   messageListVerticalBounds: ?VerticalBounds,
   focusedMessageKey: ?string,
   navigation: ChatNavigationProp<'MessageList'>,
   route: NavigationRoute<'MessageList'>,
 };
 class MessageList extends React.PureComponent<Props, State> {
   state: State = {
     focusedMessageKey: null,
     messageListVerticalBounds: null,
     loadingFromScroll: false,
   };
   flatListContainer: ?React.ElementRef<typeof View>;
 
   flatListExtraDataSelector: PropsAndState => FlatListExtraData =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.messageListVerticalBounds,
       (propsAndState: PropsAndState) => propsAndState.focusedMessageKey,
       (propsAndState: PropsAndState) => propsAndState.navigation,
       (propsAndState: PropsAndState) => propsAndState.route,
       (
         messageListVerticalBounds: ?VerticalBounds,
         focusedMessageKey: ?string,
         navigation: ChatNavigationProp<'MessageList'>,
         route: NavigationRoute<'MessageList'>,
       ) => ({
         messageListVerticalBounds,
         focusedMessageKey,
         navigation,
         route,
       }),
     );
 
   get flatListExtraData(): FlatListExtraData {
     return this.flatListExtraDataSelector({ ...this.props, ...this.state });
   }
 
   static getOverlayContext(props: Props): OverlayContextType {
     const { overlayContext } = props;
     invariant(overlayContext, 'MessageList should have OverlayContext');
     return overlayContext;
   }
 
   static scrollDisabled(props: Props): boolean {
     const overlayContext = MessageList.getOverlayContext(props);
     return overlayContext.scrollBlockingModalStatus !== 'closed';
   }
 
   static modalOpen(props: Props): boolean {
     const overlayContext = MessageList.getOverlayContext(props);
     return overlayContext.scrollBlockingModalStatus === 'open';
   }
 
   componentDidUpdate(prevProps: Props) {
     const modalIsOpen = MessageList.modalOpen(this.props);
     const modalWasOpen = MessageList.modalOpen(prevProps);
     if (!modalIsOpen && modalWasOpen) {
       this.setState({ focusedMessageKey: null });
     }
 
     if (defaultStackScreenOptions.gestureEnabled) {
       const scrollIsDisabled = MessageList.scrollDisabled(this.props);
       const scrollWasDisabled = MessageList.scrollDisabled(prevProps);
       if (!scrollWasDisabled && scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: false });
       } else if (scrollWasDisabled && !scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: true });
       }
     }
   }
 
   dismissKeyboard = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 
   renderItem = (row: { item: ChatMessageItemWithHeight, ... }): React.Node => {
     if (row.item.itemType === 'loader') {
       return (
         <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
           <View style={this.props.styles.listLoadingIndicator}>
             <ListLoadingIndicator />
           </View>
         </TouchableWithoutFeedback>
       );
     }
     const messageInfoItem: ChatMessageInfoItemWithHeight = row.item;
     const { messageListVerticalBounds, focusedMessageKey, navigation, route } =
       this.flatListExtraData;
     const focused =
       messageKey(messageInfoItem.messageInfo) === focusedMessageKey;
     return (
       <Message
         item={messageInfoItem}
         focused={focused}
         navigation={navigation}
         route={route}
         toggleFocus={this.toggleMessageFocus}
         verticalBounds={messageListVerticalBounds}
         shouldDisplayPinIndicator={true}
       />
     );
   };
 
   toggleMessageFocus = (inMessageKey: string) => {
     if (this.state.focusedMessageKey === inMessageKey) {
       this.setState({ focusedMessageKey: null });
     } else {
       this.setState({ focusedMessageKey: inMessageKey });
     }
   };
 
   // Actually header, it's just that our FlatList is inverted
   ListFooterComponent = (): React.Node => (
     <View style={this.props.styles.header} />
   );
 
   render(): React.Node {
     const { messageListData, startReached } = this.props;
     const footer = startReached ? this.ListFooterComponent : undefined;
     let relationshipPrompt = null;
     if (this.props.threadInfo.type === threadTypes.PERSONAL) {
       relationshipPrompt = (
         <RelationshipPrompt
           pendingPersonalThreadUserInfo={
             this.props.route.params.pendingPersonalThreadUserInfo
           }
           threadInfo={this.props.threadInfo}
         />
       );
     }
     return (
       <View
         style={this.props.styles.container}
         ref={this.flatListContainerRef}
         onLayout={this.onFlatListContainerLayout}
       >
         {relationshipPrompt}
         <ChatList
           navigation={this.props.navigation}
           inverted={true}
           data={messageListData}
           renderItem={this.renderItem}
           onViewableItemsChanged={this.onViewableItemsChanged}
           ListFooterComponent={footer}
           scrollsToTop={false}
           scrollEnabled={!MessageList.scrollDisabled(this.props)}
           extraData={this.flatListExtraData}
           indicatorStyle={this.props.indicatorStyle}
           keyboardShouldPersistTaps="always"
         />
       </View>
     );
   }
 
   flatListContainerRef = (
     flatListContainer: ?React.ElementRef<typeof View>,
   ) => {
     this.flatListContainer = flatListContainer;
   };
 
   onFlatListContainerLayout = () => {
     const { flatListContainer } = this;
     if (!flatListContainer) {
       return;
     }
     flatListContainer.measure((x, y, width, height, pageX, pageY) => {
       if (
         height === null ||
         height === undefined ||
         pageY === null ||
         pageY === undefined
       ) {
         return;
       }
       this.setState({ messageListVerticalBounds: { height, y: pageY } });
     });
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     if (this.state.focusedMessageKey) {
       let focusedMessageVisible = false;
       for (const token of info.viewableItems) {
         if (
           token.item.itemType === 'message' &&
           messageKey(token.item.messageInfo) === this.state.focusedMessageKey
         ) {
           focusedMessageVisible = true;
           break;
         }
       }
       if (!focusedMessageVisible) {
         this.setState({ focusedMessageKey: null });
       }
     }
 
     const loader = _find({ key: 'loader' })(info.viewableItems);
     if (!loader || this.state.loadingFromScroll) {
       return;
     }
 
     this.setState({ loadingFromScroll: true });
     const { oldestMessageServerID } = this.props;
     const threadID = this.props.threadInfo.id;
 
     void (async () => {
       try {
         if (oldestMessageServerID) {
           await this.props.dispatchActionPromise(
             fetchMessagesBeforeCursorActionTypes,
             this.props.fetchMessagesBeforeCursor({
               threadID,
               beforeMessageID: oldestMessageServerID,
             }),
           );
         } else {
           await this.props.dispatchActionPromise(
             fetchMostRecentMessagesActionTypes,
             this.props.fetchMostRecentMessages({ threadID }),
           );
         }
       } finally {
         this.setState({ loadingFromScroll: false });
       }
     })();
   };
 }
 
 registerFetchKey(fetchMessagesBeforeCursorActionTypes);
 registerFetchKey(fetchMostRecentMessagesActionTypes);
 
 const ConnectedMessageList: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMessageList(props: BaseProps) {
     const keyboardState = React.useContext(KeyboardContext);
     const overlayContext = React.useContext(OverlayContext);
 
     const threadID = props.threadInfo.id;
     const startReached = useSelector(
       state =>
         !!(
           state.messageStore.threads[threadID] &&
           state.messageStore.threads[threadID].startReached
         ),
     );
 
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callFetchMessagesBeforeCursor = useFetchMessagesBeforeCursor();
     const callFetchMostRecentMessages = useFetchMostRecentMessages();
 
     const oldestMessageServerID = useOldestMessageServerID(threadID);
 
     useWatchThread(props.threadInfo);
 
     return (
       <MessageList
         {...props}
         startReached={startReached}
         styles={styles}
         indicatorStyle={indicatorStyle}
         dispatchActionPromise={dispatchActionPromise}
         fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
         fetchMostRecentMessages={callFetchMostRecentMessages}
         overlayContext={overlayContext}
         keyboardState={keyboardState}
         oldestMessageServerID={oldestMessageServerID}
       />
     );
   });
 
 export default ConnectedMessageList;
diff --git a/native/chat/message-report-utils.js b/native/chat/message-report-utils.js
index 2617e91cc..3ae2e9344 100644
--- a/native/chat/message-report-utils.js
+++ b/native/chat/message-report-utils.js
@@ -1,61 +1,61 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useSendMessageReport,
   sendMessageReportActionTypes,
 } from 'lib/actions/message-report-actions.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 import Alert from '../utils/alert.js';
 
 const confirmReport = () => displayActionResultModal('reported to admin');
 
 function useOnPressReport(
   route:
     | TooltipRoute<'TextMessageTooltipModal'>
     | TooltipRoute<'MultimediaMessageTooltipModal'>,
 ): () => mixed {
   const messageID = route.params.item.messageInfo.id;
   const dispatchActionPromise = useDispatchActionPromise();
   const callSendMessageReport = useSendMessageReport();
   return React.useCallback(() => {
     if (!messageID) {
       Alert.alert(
         'Couldn’t send the report',
         'Uhh... try again?',
         [{ text: 'OK' }],
         {
           cancelable: false,
         },
       );
       return;
     }
     const messageReportPromise = (async () => {
       try {
         const result = await callSendMessageReport({ messageID });
         confirmReport();
         return result;
       } catch (e) {
         Alert.alert(
           'Couldn’t send the report',
           'Uhh... try again?',
           [{ text: 'OK' }],
           {
             cancelable: false,
           },
         );
         throw e;
       }
     })();
     void dispatchActionPromise(
       sendMessageReportActionTypes,
       messageReportPromise,
     );
   }, [callSendMessageReport, messageID, dispatchActionPromise]);
 }
 
 export { useOnPressReport };
diff --git a/native/chat/reaction-message-utils.js b/native/chat/reaction-message-utils.js
index e12b35161..78053cc62 100644
--- a/native/chat/reaction-message-utils.js
+++ b/native/chat/reaction-message-utils.js
@@ -1,207 +1,207 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useSendReactionMessage,
   sendReactionMessageActionTypes,
 } from 'lib/actions/message-actions.js';
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { RawReactionMessageInfo } from 'lib/types/messages/reaction.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { cloneError } from 'lib/utils/errors.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { useSelector } from '../redux/redux-utils.js';
 import type {
   LayoutCoordinates,
   VerticalBounds,
 } from '../types/layout-types.js';
 import Alert from '../utils/alert.js';
 
 function useSendReaction(
   messageID: ?string,
   localID: string,
   threadID: string,
   reactions: ReactionInfo,
 ): (reaction: string) => mixed {
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
 
   const callSendReactionMessage = useSendReactionMessage();
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
     reaction => {
       if (!messageID) {
         return;
       }
 
       invariant(viewerID, 'viewerID should be set');
 
       const viewerReacted = reactions[reaction]
         ? reactions[reaction].viewerReacted
         : false;
       const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
 
       const reactionMessagePromise = (async () => {
         try {
           const result = await callSendReactionMessage({
             threadID,
             localID,
             targetMessageID: messageID,
             reaction,
             action,
           });
           return {
             localID,
             serverID: result.id,
             threadID,
             time: result.time,
             interface: result.interface,
           };
         } catch (e) {
           Alert.alert(
             'Couldn’t send the reaction',
             'Please try again later',
             [{ text: 'OK' }],
             {
               cancelable: true,
             },
           );
 
           const copy = cloneError(e);
           copy.localID = localID;
           copy.threadID = threadID;
           throw copy;
         }
       })();
 
       const startingPayload: RawReactionMessageInfo = {
         type: messageTypes.REACTION,
         threadID,
         localID,
         creatorID: viewerID,
         time: Date.now(),
         targetMessageID: messageID,
         reaction,
         action,
       };
 
       void dispatchActionPromise(
         sendReactionMessageActionTypes,
         reactionMessagePromise,
         undefined,
         startingPayload,
       );
     },
     [
       messageID,
       viewerID,
       reactions,
       threadID,
       localID,
       dispatchActionPromise,
       callSendReactionMessage,
     ],
   );
 }
 
 type ReactionSelectionPopoverPositionArgs = {
   +initialCoordinates: LayoutCoordinates,
   +verticalBounds: VerticalBounds,
   +margin: ?number,
 };
 
 type WritableContainerStyle = {
   position: 'absolute',
   left?: number,
   right?: number,
   bottom?: number,
   top?: number,
   ...
 };
 type ContainerStyle = $ReadOnly<WritableContainerStyle>;
 
 type ReactionSelectionPopoverPosition = {
   +containerStyle: ContainerStyle,
   +popoverLocation: 'above' | 'below',
 };
 function useReactionSelectionPopoverPosition({
   initialCoordinates,
   verticalBounds,
   margin,
 }: ReactionSelectionPopoverPositionArgs): ReactionSelectionPopoverPosition {
   const calculatedMargin = getCalculatedMargin(margin);
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const popoverLocation: 'above' | 'below' = (() => {
     const { y, height } = initialCoordinates;
     const contentTop = y;
     const contentBottom = y + height;
     const boundsTop = verticalBounds.y;
     const boundsBottom = verticalBounds.y + verticalBounds.height;
 
     const fullHeight =
       reactionSelectionPopoverDimensions.height + calculatedMargin;
 
     if (
       contentBottom + fullHeight > boundsBottom &&
       contentTop - fullHeight > boundsTop
     ) {
       return 'above';
     }
 
     return 'below';
   })();
 
   const containerStyle = React.useMemo(() => {
     const { x, width, height } = initialCoordinates;
 
     const style: WritableContainerStyle = {
       position: 'absolute',
     };
 
     const extraLeftSpace = x;
     const extraRightSpace = windowWidth - width - x;
     if (extraLeftSpace < extraRightSpace) {
       style.left = 0;
     } else {
       style.right = 0;
     }
 
     if (popoverLocation === 'above') {
       style.bottom = height + calculatedMargin / 2;
     } else {
       style.top = height + calculatedMargin / 2;
     }
 
     return style;
   }, [calculatedMargin, initialCoordinates, popoverLocation, windowWidth]);
   return React.useMemo(
     () => ({
       popoverLocation,
       containerStyle,
     }),
     [popoverLocation, containerStyle],
   );
 }
 
 function getCalculatedMargin(margin: ?number): number {
   return margin ?? 16;
 }
 
 const reactionSelectionPopoverDimensions = {
   height: 56,
   width: 316,
 };
 
 export {
   useSendReaction,
   useReactionSelectionPopoverPosition,
   getCalculatedMargin,
   reactionSelectionPopoverDimensions,
 };
diff --git a/native/chat/settings/add-users-modal.react.js b/native/chat/settings/add-users-modal.react.js
index a27a17b44..2d2d530e8 100644
--- a/native/chat/settings/add-users-modal.react.js
+++ b/native/chat/settings/add-users-modal.react.js
@@ -1,285 +1,285 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, ActivityIndicator } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userInfoSelectorForPotentialMembers } from 'lib/selectors/user-selectors.js';
 import { usePotentialMemberItems } from 'lib/shared/search-utils.js';
 import { threadActualMembers } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { type AccountUserInfo } from 'lib/types/user-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import Button from '../../components/button.react.js';
 import Modal from '../../components/modal.react.js';
 import {
   createTagInput,
   type BaseTagInput,
 } from '../../components/tag-input.react.js';
 import UserList from '../../components/user-list.react.js';
 import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles } from '../../themes/colors.js';
 import Alert from '../../utils/alert.js';
 
 const TagInput = createTagInput<AccountUserInfo>();
 
 const tagInputProps = {
   placeholder: 'Select users to add',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
 
 export type AddUsersModalParams = {
   +presentedFrom: string,
   +threadInfo: ThreadInfo,
 };
 
 type Props = {
   +navigation: RootNavigationProp<'AddUsersModal'>,
   +route: NavigationRoute<'AddUsersModal'>,
 };
 function AddUsersModal(props: Props): React.Node {
   const [usernameInputText, setUsernameInputText] = React.useState<string>('');
   const [userInfoInputArray, setUserInfoInputArray] = React.useState<
     $ReadOnlyArray<AccountUserInfo>,
   >([]);
 
   const tagInputRef = React.useRef<?BaseTagInput<AccountUserInfo>>();
   const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
     setUsernameInputText('');
     setUserInfoInputArray([]);
     tagInputRef.current?.focus();
   }, []);
 
   const { navigation } = props;
   const { goBackOnce } = navigation;
   const close = React.useCallback(() => {
     goBackOnce();
   }, [goBackOnce]);
 
   const callChangeThreadSettings = useChangeThreadSettings();
   const userInfoInputIDs = userInfoInputArray.map(userInfo => userInfo.id);
   const { route } = props;
   const { threadInfo } = route.params;
   const threadID = threadInfo.id;
   const addUsersToThread = React.useCallback(async () => {
     try {
       const result = await callChangeThreadSettings({
         threadID: threadID,
         changes: { newMemberIDs: userInfoInputIDs },
       });
       close();
       return result;
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }, [
     callChangeThreadSettings,
     threadID,
     userInfoInputIDs,
     close,
     onUnknownErrorAlertAcknowledged,
   ]);
 
   const inputLength = userInfoInputArray.length;
   const dispatchActionPromise = useDispatchActionPromise();
   const userInfoInputArrayEmpty = inputLength === 0;
   const onPressAdd = React.useCallback(() => {
     if (userInfoInputArrayEmpty) {
       return;
     }
     void dispatchActionPromise(
       changeThreadSettingsActionTypes,
       addUsersToThread(),
     );
   }, [userInfoInputArrayEmpty, dispatchActionPromise, addUsersToThread]);
 
   const changeThreadSettingsLoadingStatus = useSelector(
     createLoadingStatusSelector(changeThreadSettingsActionTypes),
   );
   const isLoading = changeThreadSettingsLoadingStatus === 'loading';
 
   const styles = useStyles(unboundStyles);
 
   let addButton = null;
   if (inputLength > 0) {
     let activityIndicator = null;
     if (isLoading) {
       activityIndicator = (
         <View style={styles.activityIndicator}>
           <ActivityIndicator color="white" />
         </View>
       );
     }
     const addButtonText = `Add (${inputLength})`;
     addButton = (
       <Button
         onPress={onPressAdd}
         style={styles.addButton}
         disabled={isLoading}
       >
         {activityIndicator}
         <Text style={styles.addText}>{addButtonText}</Text>
       </Button>
     );
   }
 
   let cancelButton;
   if (!isLoading) {
     cancelButton = (
       <Button onPress={close} style={styles.cancelButton}>
         <Text style={styles.cancelText}>Cancel</Text>
       </Button>
     );
   } else {
     cancelButton = <View />;
   }
 
   const threadMemberIDs = React.useMemo(
     () => threadActualMembers(threadInfo.members),
     [threadInfo.members],
   );
   const excludeUserIDs = React.useMemo(
     () => userInfoInputIDs.concat(threadMemberIDs),
     [userInfoInputIDs, threadMemberIDs],
   );
 
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   const { parentThreadID, community } = props.route.params.threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
   const communityThreadInfo = useSelector(state =>
     community ? threadInfoSelector(state)[community] : null,
   );
   const userSearchResults = usePotentialMemberItems({
     text: usernameInputText,
     userInfos: otherUserInfos,
     excludeUserIDs,
     inputParentThreadInfo: parentThreadInfo,
     inputCommunityThreadInfo: communityThreadInfo,
     threadType: threadInfo.type,
   });
 
   const onChangeTagInput = React.useCallback(
     (newUserInfoInputArray: $ReadOnlyArray<AccountUserInfo>) => {
       if (!isLoading) {
         setUserInfoInputArray(newUserInfoInputArray);
       }
     },
     [isLoading],
   );
 
   const onChangeTagInputText = React.useCallback(
     (text: string) => {
       if (!isLoading) {
         setUsernameInputText(text);
       }
     },
     [isLoading],
   );
 
   const onUserSelect = React.useCallback(
     ({ id }: AccountUserInfo) => {
       if (isLoading) {
         return;
       }
       if (userInfoInputIDs.some(existingUserID => id === existingUserID)) {
         return;
       }
       setUserInfoInputArray(oldUserInfoInputArray => [
         ...oldUserInfoInputArray,
         otherUserInfos[id],
       ]);
       setUsernameInputText('');
     },
     [isLoading, userInfoInputIDs, otherUserInfos],
   );
 
   const inputProps = React.useMemo(
     () => ({
       ...tagInputProps,
       onSubmitEditing: onPressAdd,
     }),
     [onPressAdd],
   );
   const userSearchResultWithENSNames = useENSNames(userSearchResults);
   const userInfoInputArrayWithENSNames = useENSNames(userInfoInputArray);
   return (
     <Modal>
       <TagInput
         value={userInfoInputArrayWithENSNames}
         onChange={onChangeTagInput}
         text={usernameInputText}
         onChangeText={onChangeTagInputText}
         labelExtractor={tagDataLabelExtractor}
         defaultInputWidth={160}
         maxHeight={36}
         inputProps={inputProps}
         ref={tagInputRef}
       />
       <UserList
         userInfos={userSearchResultWithENSNames}
         onSelect={onUserSelect}
       />
       <View style={styles.buttons}>
         {cancelButton}
         {addButton}
       </View>
     </Modal>
   );
 }
 
 const unboundStyles = {
   activityIndicator: {
     paddingRight: 6,
   },
   addButton: {
     backgroundColor: 'vibrantGreenButton',
     borderRadius: 3,
     flexDirection: 'row',
     paddingHorizontal: 10,
     paddingVertical: 4,
   },
   addText: {
     color: 'white',
     fontSize: 18,
   },
   buttons: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginTop: 12,
   },
   cancelButton: {
     backgroundColor: 'modalButton',
     borderRadius: 3,
     paddingHorizontal: 10,
     paddingVertical: 4,
   },
   cancelText: {
     color: 'modalButtonLabel',
     fontSize: 18,
   },
 };
 
 const MemoizedAddUsersModal: React.ComponentType<Props> =
   React.memo<Props>(AddUsersModal);
 
 export default MemoizedAddUsersModal;
diff --git a/native/chat/settings/color-selector-modal.react.js b/native/chat/settings/color-selector-modal.react.js
index 0b7c85604..b1f53818f 100644
--- a/native/chat/settings/color-selector-modal.react.js
+++ b/native/chat/settings/color-selector-modal.react.js
@@ -1,190 +1,192 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import * as React from 'react';
 import { TouchableHighlight } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import {
   type ChangeThreadSettingsPayload,
   type UpdateThreadRequest,
   type ThreadInfo,
 } from 'lib/types/thread-types.js';
-import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import ColorSelector from '../../components/color-selector.react.js';
 import Modal from '../../components/modal.react.js';
 import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../../themes/colors.js';
 import Alert from '../../utils/alert.js';
 
 export type ColorSelectorModalParams = {
   +presentedFrom: string,
   +color: string,
   +threadInfo: ThreadInfo,
   +setColor: (color: string) => void,
 };
 
 const unboundStyles = {
   closeButton: {
     borderRadius: 3,
     height: 18,
     position: 'absolute',
     right: 5,
     top: 5,
     width: 18,
   },
   closeButtonIcon: {
     color: 'modalBackgroundSecondaryLabel',
     left: 3,
     position: 'absolute',
   },
   colorSelector: {
     bottom: 10,
     left: 10,
     position: 'absolute',
     right: 10,
     top: 10,
   },
   colorSelectorContainer: {
     backgroundColor: 'modalBackground',
     borderRadius: 5,
     flex: 0,
     marginHorizontal: 15,
     marginVertical: 20,
   },
 };
 
 type BaseProps = {
   +navigation: RootNavigationProp<'ColorSelectorModal'>,
   +route: NavigationRoute<'ColorSelectorModal'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   +windowWidth: number,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeThreadSettings: (
     request: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 };
 function ColorSelectorModal(props: Props): React.Node {
   const {
     changeThreadSettings: updateThreadSettings,
     dispatchActionPromise,
     windowWidth,
   } = props;
   const { threadInfo, setColor } = props.route.params;
 
   const close = props.navigation.goBackOnce;
 
   const onErrorAcknowledged = React.useCallback(() => {
     setColor(threadInfo.color);
   }, [setColor, threadInfo.color]);
 
   const editColor = React.useCallback(
     async (newColor: string) => {
       const threadID = threadInfo.id;
       try {
         return await updateThreadSettings({
           threadID,
           changes: { color: newColor },
         });
       } catch (e) {
         Alert.alert(
           'Unknown error',
           'Uhh... try again?',
           [{ text: 'OK', onPress: onErrorAcknowledged }],
           { cancelable: false },
         );
         throw e;
       }
     },
     [onErrorAcknowledged, threadInfo.id, updateThreadSettings],
   );
 
   const onColorSelected = React.useCallback(
     (color: string) => {
       const colorEditValue = color.substr(1);
       setColor(colorEditValue);
       close();
 
       const action = changeThreadSettingsActionTypes.started;
       const threadID = props.route.params.threadInfo.id;
       void dispatchActionPromise(
         changeThreadSettingsActionTypes,
         editColor(colorEditValue),
         {
           customKeyName: `${action}:${threadID}:color`,
         },
       );
     },
     [
       setColor,
       close,
       dispatchActionPromise,
       editColor,
       props.route.params.threadInfo.id,
     ],
   );
 
   const { colorSelectorContainer, closeButton, closeButtonIcon } = props.styles;
   // Based on the assumption we are always in portrait,
   // and consequently width is the lowest dimensions
   const modalStyle = React.useMemo(
     () => [colorSelectorContainer, { height: 0.75 * windowWidth }],
     [colorSelectorContainer, windowWidth],
   );
 
   const { modalIosHighlightUnderlay } = props.colors;
   const { color } = props.route.params;
   return (
     <Modal modalStyle={modalStyle}>
       <ColorSelector
         currentColor={color}
         windowWidth={windowWidth}
         onColorSelected={onColorSelected}
       />
       <TouchableHighlight
         onPress={close}
         style={closeButton}
         underlayColor={modalIosHighlightUnderlay}
       >
         <Icon name="close" size={16} style={closeButtonIcon} />
       </TouchableHighlight>
     </Modal>
   );
 }
 
 const ConnectedColorSelectorModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedColorSelectorModal(props: BaseProps) {
     const styles = useStyles(unboundStyles);
     const colors = useColors();
     const windowWidth = useSelector(state => state.dimensions.width);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeThreadSettings = useChangeThreadSettings();
 
     return (
       <ColorSelectorModal
         {...props}
         styles={styles}
         colors={colors}
         windowWidth={windowWidth}
         dispatchActionPromise={dispatchActionPromise}
         changeThreadSettings={callChangeThreadSettings}
       />
     );
   });
 
 export default ConnectedColorSelectorModal;
diff --git a/native/chat/settings/delete-thread.react.js b/native/chat/settings/delete-thread.react.js
index fc5599dc4..98b7546d0 100644
--- a/native/chat/settings/delete-thread.react.js
+++ b/native/chat/settings/delete-thread.react.js
@@ -1,293 +1,293 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   View,
   TextInput as BaseTextInput,
   ActivityIndicator,
 } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import {
   deleteThreadActionTypes,
   useDeleteThread,
 } from 'lib/actions/thread-actions.js';
 import type { DeleteThreadInput } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   threadInfoSelector,
   containedThreadInfos,
 } from 'lib/selectors/thread-selectors.js';
 import {
   identifyInvalidatedThreads,
   getThreadsToDeleteText,
 } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type {
   LeaveThreadPayload,
   ThreadInfo,
   ResolvedThreadInfo,
 } from 'lib/types/thread-types.js';
+import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import {
   useDispatchActionPromise,
   type DispatchActionPromise,
-} from 'lib/utils/action-utils.js';
-import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+} from 'lib/utils/redux-promise-utils.js';
 
 import Button from '../../components/button.react.js';
 import { clearThreadsActionType } from '../../navigation/action-types.js';
 import {
   NavContext,
   type NavAction,
 } from '../../navigation/navigation-context.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 import Alert from '../../utils/alert.js';
 import type { ChatNavigationProp } from '../chat.react.js';
 
 export type DeleteThreadParams = {
   +threadInfo: ThreadInfo,
 };
 
 const unboundStyles = {
   deleteButton: {
     backgroundColor: 'vibrantRedButton',
     borderRadius: 5,
     flex: 1,
     marginHorizontal: 24,
     marginVertical: 12,
     padding: 12,
   },
   deleteText: {
     color: 'white',
     fontSize: 18,
     textAlign: 'center',
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   input: {
     color: 'panelForegroundLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginBottom: 24,
     paddingHorizontal: 24,
     paddingVertical: 12,
   },
   warningText: {
     color: 'panelForegroundLabel',
     fontSize: 16,
     marginBottom: 24,
     marginHorizontal: 24,
     textAlign: 'center',
   },
 };
 
 type BaseProps = {
   +navigation: ChatNavigationProp<'DeleteThread'>,
   +route: NavigationRoute<'DeleteThread'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +threadInfo: ResolvedThreadInfo,
   +shouldUseDeleteConfirmationAlert: boolean,
   +loadingStatus: LoadingStatus,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +deleteThread: (input: DeleteThreadInput) => Promise<LeaveThreadPayload>,
   // withNavContext
   +navDispatch: (action: NavAction) => void,
 };
 class DeleteThread extends React.PureComponent<Props> {
   mounted = false;
   passwordInput: ?React.ElementRef<typeof BaseTextInput>;
 
   componentDidMount() {
     this.mounted = true;
   }
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   render(): React.Node {
     const buttonContent =
       this.props.loadingStatus === 'loading' ? (
         <ActivityIndicator size="small" color="white" />
       ) : (
         <Text style={this.props.styles.deleteText}>Delete chat</Text>
       );
     const { threadInfo } = this.props;
     return (
       <ScrollView
         contentContainerStyle={this.props.styles.scrollViewContentContainer}
         style={this.props.styles.scrollView}
       >
         <View>
           <Text style={this.props.styles.warningText}>
             {`The chat "${threadInfo.uiName}" will be permanently deleted. `}
             There is no way to reverse this.
           </Text>
         </View>
         <Button
           onPress={this.submitDeletion}
           style={this.props.styles.deleteButton}
         >
           {buttonContent}
         </Button>
       </ScrollView>
     );
   }
 
   passwordInputRef = (
     passwordInput: ?React.ElementRef<typeof BaseTextInput>,
   ) => {
     this.passwordInput = passwordInput;
   };
 
   focusPasswordInput = () => {
     invariant(this.passwordInput, 'passwordInput should be set');
     this.passwordInput.focus();
   };
 
   dispatchDeleteThreadAction = () => {
     void this.props.dispatchActionPromise(
       deleteThreadActionTypes,
       this.deleteThread(),
     );
   };
 
   submitDeletion = () => {
     if (!this.props.shouldUseDeleteConfirmationAlert) {
       this.dispatchDeleteThreadAction();
       return;
     }
     Alert.alert(
       'Warning',
       `${getThreadsToDeleteText(
         this.props.threadInfo,
       )} will also be permanently deleted.`,
       [
         { text: 'Cancel', style: 'cancel' },
         { text: 'Continue', onPress: this.dispatchDeleteThreadAction },
       ],
       { cancelable: false },
     );
   };
 
   async deleteThread(): Promise<LeaveThreadPayload> {
     const { threadInfo, navDispatch } = this.props;
     navDispatch({
       type: clearThreadsActionType,
       payload: { threadIDs: [threadInfo.id] },
     });
     try {
       const result = await this.props.deleteThread({ threadID: threadInfo.id });
       const invalidated = identifyInvalidatedThreads(
         result.updatesResult.newUpdates,
       );
       navDispatch({
         type: clearThreadsActionType,
         payload: { threadIDs: [...invalidated] },
       });
       return result;
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         Alert.alert(
           'Permission not granted',
           'You do not have permission to delete this thread',
           [{ text: 'OK' }],
           { cancelable: false },
         );
       } else {
         Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
           cancelable: false,
         });
       }
       throw e;
     }
   }
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(
   deleteThreadActionTypes,
 );
 
 const ConnectedDeleteThread: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedDeleteThread(props: BaseProps) {
     const threadID = props.route.params.threadInfo.id;
     const reduxThreadInfo = useSelector(
       state => threadInfoSelector(state)[threadID],
     );
     const reduxContainedThreadInfos = useSelector(
       state => containedThreadInfos(state)[threadID],
     );
 
     const { setParams } = props.navigation;
     React.useEffect(() => {
       if (reduxThreadInfo) {
         setParams({ threadInfo: reduxThreadInfo });
       }
     }, [reduxThreadInfo, setParams]);
     const threadInfo = reduxThreadInfo ?? props.route.params.threadInfo;
     const resolvedThreadInfo = useResolvedThreadInfo(threadInfo);
 
     const loadingStatus = useSelector(loadingStatusSelector);
 
     const colors = useColors();
     const styles = useStyles(unboundStyles);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callDeleteThread = useDeleteThread();
 
     const navContext = React.useContext(NavContext);
     invariant(navContext, 'NavContext should be set in DeleteThread');
     const navDispatch = navContext.dispatch;
 
     const shouldUseDeleteConfirmationAlert =
       reduxContainedThreadInfos && reduxContainedThreadInfos.length > 0;
 
     return (
       <DeleteThread
         {...props}
         threadInfo={resolvedThreadInfo}
         shouldUseDeleteConfirmationAlert={shouldUseDeleteConfirmationAlert}
         loadingStatus={loadingStatus}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         deleteThread={callDeleteThread}
         navDispatch={navDispatch}
       />
     );
   });
 
 export default ConnectedDeleteThread;
diff --git a/native/chat/settings/thread-settings-description.react.js b/native/chat/settings/thread-settings-description.react.js
index e50ddb840..8033e0253 100644
--- a/native/chat/settings/thread-settings-description.react.js
+++ b/native/chat/settings/thread-settings-description.react.js
@@ -1,324 +1,324 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   ActivityIndicator,
   TextInput as BaseTextInput,
   View,
 } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadHasPermission } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ChangeThreadSettingsPayload,
   type UpdateThreadRequest,
   type ThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import SaveSettingButton from './save-setting-button.react.js';
 import {
   ThreadSettingsCategoryHeader,
   ThreadSettingsCategoryFooter,
 } from './thread-settings-category.react.js';
 import Button from '../../components/button.react.js';
 import EditSettingButton from '../../components/edit-setting-button.react.js';
 import SWMansionIcon from '../../components/swmansion-icon.react.js';
 import TextInput from '../../components/text-input.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../../themes/colors.js';
 import type {
   LayoutEvent,
   ContentSizeChangeEvent,
 } from '../../types/react-native.js';
 import Alert from '../../utils/alert.js';
 
 const unboundStyles = {
   addDescriptionButton: {
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
   addDescriptionText: {
     color: 'panelForegroundTertiaryLabel',
     flex: 1,
     fontSize: 16,
   },
   editIcon: {
     color: 'panelForegroundTertiaryLabel',
     paddingLeft: 10,
     textAlign: 'right',
   },
   outlineCategory: {
     backgroundColor: 'panelForeground',
     borderColor: 'panelForegroundBorder',
     borderRadius: 1,
     borderStyle: 'dashed',
     borderWidth: 1,
     marginLeft: -1,
     marginRight: -1,
   },
   row: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 4,
   },
   text: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     margin: 0,
     padding: 0,
     borderBottomColor: 'transparent',
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
   +descriptionEditValue: ?string,
   +setDescriptionEditValue: (value: ?string, callback?: () => void) => void,
   +descriptionTextHeight: ?number,
   +setDescriptionTextHeight: (number: number) => void,
   +canChangeSettings: boolean,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeThreadSettings: (
     update: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 };
 class ThreadSettingsDescription extends React.PureComponent<Props> {
   textInput: ?React.ElementRef<typeof BaseTextInput>;
 
   render(): React.Node {
     if (
       this.props.descriptionEditValue !== null &&
       this.props.descriptionEditValue !== undefined
     ) {
       const textInputStyle: { height?: number } = {};
       if (
         this.props.descriptionTextHeight !== undefined &&
         this.props.descriptionTextHeight !== null
       ) {
         textInputStyle.height = this.props.descriptionTextHeight;
       }
       return (
         <View>
           <ThreadSettingsCategoryHeader type="full" title="Description" />
           <View style={this.props.styles.row}>
             <TextInput
               style={[this.props.styles.text, textInputStyle]}
               value={this.props.descriptionEditValue}
               onChangeText={this.props.setDescriptionEditValue}
               multiline={true}
               autoFocus={true}
               selectTextOnFocus={true}
               onBlur={this.onSubmit}
               editable={this.props.loadingStatus !== 'loading'}
               onContentSizeChange={this.onTextInputContentSizeChange}
               ref={this.textInputRef}
               selectionColor={`#${this.props.threadInfo.color}`}
             />
             {this.renderButton()}
           </View>
           <ThreadSettingsCategoryFooter type="full" />
         </View>
       );
     }
 
     if (this.props.threadInfo.description) {
       return (
         <View>
           <ThreadSettingsCategoryHeader type="full" title="Description" />
           <View style={this.props.styles.row}>
             <Text style={this.props.styles.text} onLayout={this.onLayoutText}>
               {this.props.threadInfo.description}
             </Text>
             {this.renderButton()}
           </View>
           <ThreadSettingsCategoryFooter type="full" />
         </View>
       );
     }
 
     const canEditThreadDescription = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.EDIT_THREAD_DESCRIPTION,
     );
     const { panelIosHighlightUnderlay } = this.props.colors;
     if (canEditThreadDescription) {
       return (
         <View>
           <ThreadSettingsCategoryHeader type="outline" title="Description" />
           <View style={this.props.styles.outlineCategory}>
             <Button
               onPress={this.onPressEdit}
               style={this.props.styles.addDescriptionButton}
               iosFormat="highlight"
               iosHighlightUnderlayColor={panelIosHighlightUnderlay}
               iosActiveOpacity={0.85}
             >
               <Text style={this.props.styles.addDescriptionText}>
                 Add a description...
               </Text>
               <SWMansionIcon
                 name="edit-1"
                 size={20}
                 style={this.props.styles.editIcon}
               />
             </Button>
           </View>
           <ThreadSettingsCategoryFooter type="outline" />
         </View>
       );
     }
 
     return null;
   }
 
   renderButton(): React.Node {
     if (this.props.loadingStatus === 'loading') {
       return (
         <ActivityIndicator
           size="small"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     } else if (
       this.props.descriptionEditValue === null ||
       this.props.descriptionEditValue === undefined
     ) {
       return (
         <EditSettingButton
           onPress={this.onPressEdit}
           canChangeSettings={this.props.canChangeSettings}
         />
       );
     }
     return <SaveSettingButton onPress={this.onSubmit} />;
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof BaseTextInput>) => {
     this.textInput = textInput;
   };
 
   onLayoutText = (event: LayoutEvent) => {
     this.props.setDescriptionTextHeight(event.nativeEvent.layout.height);
   };
 
   onTextInputContentSizeChange = (event: ContentSizeChangeEvent) => {
     this.props.setDescriptionTextHeight(event.nativeEvent.contentSize.height);
   };
 
   onPressEdit = () => {
     this.props.setDescriptionEditValue(this.props.threadInfo.description);
   };
 
   onSubmit = () => {
     invariant(
       this.props.descriptionEditValue !== null &&
         this.props.descriptionEditValue !== undefined,
       'should be set',
     );
     const description = this.props.descriptionEditValue.trim();
 
     if (description === this.props.threadInfo.description) {
       this.props.setDescriptionEditValue(null);
       return;
     }
 
     const editDescriptionPromise = this.editDescription(description);
     const action = changeThreadSettingsActionTypes.started;
     const threadID = this.props.threadInfo.id;
 
     void this.props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
       editDescriptionPromise,
       {
         customKeyName: `${action}:${threadID}:description`,
       },
     );
     void editDescriptionPromise.then(() => {
       this.props.setDescriptionEditValue(null);
     });
   };
 
   async editDescription(
     newDescription: string,
   ): Promise<ChangeThreadSettingsPayload> {
     try {
       return await this.props.changeThreadSettings({
         threadID: this.props.threadInfo.id,
         changes: { description: newDescription },
       });
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: this.onErrorAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }
 
   onErrorAcknowledged = () => {
     this.props.setDescriptionEditValue(
       this.props.threadInfo.description,
       () => {
         invariant(this.textInput, 'textInput should be set');
         this.textInput.focus();
       },
     );
   };
 }
 
 const ConnectedThreadSettingsDescription: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsDescription(
     props: BaseProps,
   ) {
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:description`,
       ),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeThreadSettings = useChangeThreadSettings();
     return (
       <ThreadSettingsDescription
         {...props}
         loadingStatus={loadingStatus}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         changeThreadSettings={callChangeThreadSettings}
       />
     );
   });
 
 export default ConnectedThreadSettingsDescription;
diff --git a/native/chat/settings/thread-settings-edit-relationship.react.js b/native/chat/settings/thread-settings-edit-relationship.react.js
index 6ed8fd770..41e182e3a 100644
--- a/native/chat/settings/thread-settings-edit-relationship.react.js
+++ b/native/chat/settings/thread-settings-edit-relationship.react.js
@@ -1,129 +1,127 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import {
   updateRelationships as serverUpdateRelationships,
   updateRelationshipsActionTypes,
 } from 'lib/actions/relationship-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import {
   getRelationshipActionText,
   getRelationshipDispatchAction,
 } from 'lib/shared/relationship-utils.js';
 import { getSingleOtherUser } from 'lib/shared/thread-utils.js';
 import {
   type RelationshipAction,
   type RelationshipButton,
 } from 'lib/types/relationship-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import Button from '../../components/button.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles, useColors } from '../../themes/colors.js';
 import type { ViewStyle } from '../../types/styles.js';
 import Alert from '../../utils/alert.js';
 
 type Props = {
   +threadInfo: ThreadInfo,
   +buttonStyle: ViewStyle,
   +relationshipButton: RelationshipButton,
 };
 
 const ThreadSettingsEditRelationship: React.ComponentType<Props> =
   React.memo<Props>(function ThreadSettingsEditRelationship(props: Props) {
     const otherUserInfoFromRedux = useSelector(state => {
       const currentUserID = state.currentUserInfo?.id;
       const otherUserID = getSingleOtherUser(props.threadInfo, currentUserID);
       invariant(otherUserID, 'Other user should be specified');
 
       const { userInfos } = state.userStore;
       return userInfos[otherUserID];
     });
     invariant(otherUserInfoFromRedux, 'Other user info should be specified');
 
     const [otherUserInfo] = useENSNames([otherUserInfoFromRedux]);
 
     const callUpdateRelationships = useServerCall(serverUpdateRelationships);
     const updateRelationship = React.useCallback(
       async (action: RelationshipAction) => {
         try {
           return await callUpdateRelationships({
             action,
             userIDs: [otherUserInfo.id],
           });
         } catch (e) {
           Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
             cancelable: true,
           });
           throw e;
         }
       },
       [callUpdateRelationships, otherUserInfo],
     );
 
     const { relationshipButton } = props;
     const relationshipAction = React.useMemo(
       () => getRelationshipDispatchAction(relationshipButton),
       [relationshipButton],
     );
 
     const dispatchActionPromise = useDispatchActionPromise();
     const onButtonPress = React.useCallback(() => {
       void dispatchActionPromise(
         updateRelationshipsActionTypes,
         updateRelationship(relationshipAction),
       );
     }, [dispatchActionPromise, relationshipAction, updateRelationship]);
 
     const colors = useColors();
     const { panelIosHighlightUnderlay } = colors;
 
     const styles = useStyles(unboundStyles);
     const otherUserInfoUsername = otherUserInfo.username;
     invariant(otherUserInfoUsername, 'Other user username should be specified');
 
     const relationshipButtonText = React.useMemo(
       () =>
         getRelationshipActionText(relationshipButton, otherUserInfoUsername),
       [otherUserInfoUsername, relationshipButton],
     );
 
     return (
       <View style={styles.container}>
         <Button
           onPress={onButtonPress}
           style={[styles.button, props.buttonStyle]}
           iosFormat="highlight"
           iosHighlightUnderlayColor={panelIosHighlightUnderlay}
         >
           <Text style={styles.text}>{relationshipButtonText}</Text>
         </Button>
       </View>
     );
   });
 
 const unboundStyles = {
   button: {
     flexDirection: 'row',
     paddingHorizontal: 12,
     paddingVertical: 10,
   },
   container: {
     backgroundColor: 'panelForeground',
     paddingHorizontal: 12,
   },
   text: {
     color: 'redText',
     flex: 1,
     fontSize: 16,
   },
 };
 
 export default ThreadSettingsEditRelationship;
diff --git a/native/chat/settings/thread-settings-home-notifs.react.js b/native/chat/settings/thread-settings-home-notifs.react.js
index 15bbebae6..771724c8a 100644
--- a/native/chat/settings/thread-settings-home-notifs.react.js
+++ b/native/chat/settings/thread-settings-home-notifs.react.js
@@ -1,116 +1,118 @@
 // @flow
 
 import * as React from 'react';
 import { View, Switch } from 'react-native';
 
 import {
   updateSubscriptionActionTypes,
   useUpdateSubscription,
 } from 'lib/actions/user-actions.js';
 import type {
   SubscriptionUpdateRequest,
   SubscriptionUpdateResult,
 } from 'lib/types/subscription-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import SingleLine from '../../components/single-line.react.js';
 import { useStyles } from '../../themes/colors.js';
 
 const unboundStyles = {
   currentValue: {
     alignItems: 'flex-end',
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     flex: 1,
   },
   row: {
     alignItems: 'center',
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 3,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +updateSubscription: (
     subscriptionUpdate: SubscriptionUpdateRequest,
   ) => Promise<SubscriptionUpdateResult>,
 };
 type State = {
   +currentValue: boolean,
 };
 class ThreadSettingsHomeNotifs extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
       currentValue: !props.threadInfo.currentUser.subscription.home,
     };
   }
 
   render(): React.Node {
     const componentLabel = 'Background';
     return (
       <View style={this.props.styles.row}>
         <SingleLine style={this.props.styles.label} adjustsFontSizeToFit={true}>
           {componentLabel}
         </SingleLine>
         <View style={this.props.styles.currentValue}>
           <Switch
             value={this.state.currentValue}
             onValueChange={this.onValueChange}
           />
         </View>
       </View>
     );
   }
 
   onValueChange = (value: boolean) => {
     this.setState({ currentValue: value });
     void this.props.dispatchActionPromise(
       updateSubscriptionActionTypes,
       this.props.updateSubscription({
         threadID: this.props.threadInfo.id,
         updatedFields: {
           home: !value,
         },
       }),
     );
   };
 }
 
 const ConnectedThreadSettingsHomeNotifs: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsHomeNotifs(
     props: BaseProps,
   ) {
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const callUpdateSubscription = useUpdateSubscription();
     return (
       <ThreadSettingsHomeNotifs
         {...props}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         updateSubscription={callUpdateSubscription}
       />
     );
   });
 
 export default ConnectedThreadSettingsHomeNotifs;
diff --git a/native/chat/settings/thread-settings-leave-thread.react.js b/native/chat/settings/thread-settings-leave-thread.react.js
index 3e2fc9bad..f2acbabf3 100644
--- a/native/chat/settings/thread-settings-leave-thread.react.js
+++ b/native/chat/settings/thread-settings-leave-thread.react.js
@@ -1,184 +1,184 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, ActivityIndicator, View } from 'react-native';
 
 import {
   leaveThreadActionTypes,
   useLeaveThread,
 } from 'lib/actions/thread-actions.js';
 import type { LeaveThreadInput } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
 import { identifyInvalidatedThreads } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { LeaveThreadPayload, ThreadInfo } from 'lib/types/thread-types.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import Button from '../../components/button.react.js';
 import { clearThreadsActionType } from '../../navigation/action-types.js';
 import {
   NavContext,
   type NavContextType,
 } from '../../navigation/navigation-context.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 import type { ViewStyle } from '../../types/styles.js';
 import Alert from '../../utils/alert.js';
 
 const unboundStyles = {
   button: {
     flexDirection: 'row',
     paddingHorizontal: 12,
     paddingVertical: 10,
   },
   container: {
     backgroundColor: 'panelForeground',
     paddingHorizontal: 12,
   },
   text: {
     color: 'redText',
     flex: 1,
     fontSize: 16,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
   +buttonStyle: ViewStyle,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +otherUsersButNoOtherAdmins: boolean,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +leaveThread: (input: LeaveThreadInput) => Promise<LeaveThreadPayload>,
   // withNavContext
   +navContext: ?NavContextType,
 };
 class ThreadSettingsLeaveThread extends React.PureComponent<Props> {
   render(): React.Node {
     const { panelIosHighlightUnderlay, panelForegroundSecondaryLabel } =
       this.props.colors;
     const loadingIndicator =
       this.props.loadingStatus === 'loading' ? (
         <ActivityIndicator size="small" color={panelForegroundSecondaryLabel} />
       ) : null;
     return (
       <View style={this.props.styles.container}>
         <Button
           onPress={this.onPress}
           style={[this.props.styles.button, this.props.buttonStyle]}
           iosFormat="highlight"
           iosHighlightUnderlayColor={panelIosHighlightUnderlay}
         >
           <Text style={this.props.styles.text}>Leave chat...</Text>
           {loadingIndicator}
         </Button>
       </View>
     );
   }
 
   onPress = () => {
     if (this.props.otherUsersButNoOtherAdmins) {
       Alert.alert(
         'Need another admin',
         'Make somebody else an admin before you leave!',
         undefined,
         { cancelable: true },
       );
       return;
     }
 
     Alert.alert(
       'Confirm action',
       'Are you sure you want to leave this chat?',
       [
         { text: 'Cancel', style: 'cancel' },
         { text: 'OK', onPress: this.onConfirmLeaveThread },
       ],
       { cancelable: true },
     );
   };
 
   onConfirmLeaveThread = () => {
     const threadID = this.props.threadInfo.id;
     void this.props.dispatchActionPromise(
       leaveThreadActionTypes,
       this.leaveThread(),
       {
         customKeyName: `${leaveThreadActionTypes.started}:${threadID}`,
       },
     );
   };
 
   async leaveThread(): Promise<LeaveThreadPayload> {
     const threadID = this.props.threadInfo.id;
     const { navContext } = this.props;
     invariant(navContext, 'navContext should exist in leaveThread');
     navContext.dispatch({
       type: clearThreadsActionType,
       payload: { threadIDs: [threadID] },
     });
     try {
       const result = await this.props.leaveThread({ threadID });
       const invalidated = identifyInvalidatedThreads(
         result.updatesResult.newUpdates,
       );
       navContext.dispatch({
         type: clearThreadsActionType,
         payload: { threadIDs: [...invalidated] },
       });
       return result;
     } catch (e) {
       Alert.alert('Unknown error', 'Uhh... try again?', undefined, {
         cancelable: true,
       });
       throw e;
     }
   }
 }
 
 const ConnectedThreadSettingsLeaveThread: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsLeaveThread(
     props: BaseProps,
   ) {
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         leaveThreadActionTypes,
         `${leaveThreadActionTypes.started}:${threadID}`,
       ),
     );
     const otherUsersButNoOtherAdminsValue = useSelector(
       otherUsersButNoOtherAdmins(props.threadInfo.id),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const callLeaveThread = useLeaveThread();
     const navContext = React.useContext(NavContext);
     return (
       <ThreadSettingsLeaveThread
         {...props}
         loadingStatus={loadingStatus}
         otherUsersButNoOtherAdmins={otherUsersButNoOtherAdminsValue}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         leaveThread={callLeaveThread}
         navContext={navContext}
       />
     );
   });
 
 export default ConnectedThreadSettingsLeaveThread;
diff --git a/native/chat/settings/thread-settings-member-tooltip-modal.react.js b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
index 5c79c0c76..ad6cf6531 100644
--- a/native/chat/settings/thread-settings-member-tooltip-modal.react.js
+++ b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
@@ -1,111 +1,111 @@
 // @flow
 
 import * as React from 'react';
 
 import { useRemoveUsersFromThread } from 'lib/actions/thread-actions.js';
 import { removeMemberFromThread } from 'lib/shared/thread-utils.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
 import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import ThreadSettingsMemberTooltipButton from './thread-settings-member-tooltip-button.react.js';
 import type { AppNavigationProp } from '../../navigation/app-navigator.react';
 import { ChangeRolesScreenRouteName } from '../../navigation/route-names.js';
 import {
   createTooltip,
   type TooltipParams,
   type TooltipRoute,
   type BaseTooltipProps,
   type TooltipMenuProps,
 } from '../../tooltip/tooltip.react.js';
 import Alert from '../../utils/alert.js';
 
 export type ThreadSettingsMemberTooltipModalParams = TooltipParams<{
   +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo,
 }>;
 
 function useOnRemoveUser(
   route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>,
 ) {
   const { memberInfo, threadInfo } = route.params;
   const boundRemoveUsersFromThread = useRemoveUsersFromThread();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const onConfirmRemoveUser = React.useCallback(
     () =>
       removeMemberFromThread(
         threadInfo,
         memberInfo,
         dispatchActionPromise,
         boundRemoveUsersFromThread,
       ),
     [threadInfo, memberInfo, dispatchActionPromise, boundRemoveUsersFromThread],
   );
 
   const userText = stringForUser(memberInfo);
   return React.useCallback(() => {
     Alert.alert(
       'Confirm removal',
       `Are you sure you want to remove ${userText} from this chat?`,
       [
         { text: 'Cancel', style: 'cancel' },
         { text: 'OK', onPress: onConfirmRemoveUser },
       ],
       { cancelable: true },
     );
   }, [onConfirmRemoveUser, userText]);
 }
 
 function useOnChangeRole(
   route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>,
   navigation: AppNavigationProp<'ThreadSettingsMemberTooltipModal'>,
 ) {
   const { threadInfo, memberInfo } = route.params;
   return React.useCallback(() => {
     navigation.navigate<'ChangeRolesScreen'>({
       name: ChangeRolesScreenRouteName,
       params: {
         threadInfo,
         memberInfo,
         role: memberInfo.role,
       },
       key: route.key,
     });
   }, [navigation, route.key, threadInfo, memberInfo]);
 }
 
 function TooltipMenu(
   props: TooltipMenuProps<'ThreadSettingsMemberTooltipModal'>,
 ): React.Node {
   const { route, navigation, tooltipItem: TooltipItem } = props;
 
   const onChangeRole = useOnChangeRole(route, navigation);
   const onRemoveUser = useOnRemoveUser(route);
 
   return (
     <>
       <TooltipItem
         id="change_role"
         text="Change role"
         onPress={onChangeRole}
         key="change_role"
       />
       <TooltipItem
         id="remove_user"
         text="Remove user"
         onPress={onRemoveUser}
         key="remove_user"
       />
     </>
   );
 }
 
 const ThreadSettingsMemberTooltipModal: React.ComponentType<
   BaseTooltipProps<'ThreadSettingsMemberTooltipModal'>,
 > = createTooltip<'ThreadSettingsMemberTooltipModal'>(
   ThreadSettingsMemberTooltipButton,
   TooltipMenu,
 );
 
 export default ThreadSettingsMemberTooltipModal;
diff --git a/native/chat/settings/thread-settings-name.react.js b/native/chat/settings/thread-settings-name.react.js
index 32ea8bfca..62e41c239 100644
--- a/native/chat/settings/thread-settings-name.react.js
+++ b/native/chat/settings/thread-settings-name.react.js
@@ -1,246 +1,246 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   ActivityIndicator,
   TextInput as BaseTextInput,
   View,
 } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type {
   ChangeThreadSettingsPayload,
   UpdateThreadRequest,
   ResolvedThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 import { firstLine } from 'lib/utils/string-utils.js';
 import { chatNameMaxLength } from 'lib/utils/validation-utils.js';
 
 import SaveSettingButton from './save-setting-button.react.js';
 import EditSettingButton from '../../components/edit-setting-button.react.js';
 import SingleLine from '../../components/single-line.react.js';
 import TextInput from '../../components/text-input.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../../themes/colors.js';
 import Alert from '../../utils/alert.js';
 
 const unboundStyles = {
   currentValue: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     width: 96,
   },
   row: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 8,
   },
 };
 
 type BaseProps = {
   +threadInfo: ResolvedThreadInfo,
   +nameEditValue: ?string,
   +setNameEditValue: (value: ?string, callback?: () => void) => void,
   +canChangeSettings: boolean,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeThreadSettings: (
     update: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 };
 class ThreadSettingsName extends React.PureComponent<Props> {
   textInput: ?React.ElementRef<typeof BaseTextInput>;
 
   render(): React.Node {
     return (
       <View style={this.props.styles.row}>
         <Text style={this.props.styles.label}>Name</Text>
         {this.renderContent()}
       </View>
     );
   }
 
   renderButton(): React.Node {
     if (this.props.loadingStatus === 'loading') {
       return (
         <ActivityIndicator
           size="small"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     } else if (
       this.props.nameEditValue === null ||
       this.props.nameEditValue === undefined
     ) {
       return (
         <EditSettingButton
           onPress={this.onPressEdit}
           canChangeSettings={this.props.canChangeSettings}
         />
       );
     }
     return <SaveSettingButton onPress={this.onSubmit} />;
   }
 
   renderContent(): React.Node {
     if (
       this.props.nameEditValue === null ||
       this.props.nameEditValue === undefined
     ) {
       return (
         <React.Fragment>
           <SingleLine style={this.props.styles.currentValue}>
             {this.props.threadInfo.uiName}
           </SingleLine>
           {this.renderButton()}
         </React.Fragment>
       );
     }
 
     return (
       <React.Fragment>
         <TextInput
           style={this.props.styles.currentValue}
           value={this.props.nameEditValue}
           onChangeText={this.props.setNameEditValue}
           autoFocus={true}
           selectTextOnFocus={true}
           onBlur={this.onSubmit}
           editable={this.props.loadingStatus !== 'loading'}
           ref={this.textInputRef}
           selectionColor={`#${this.props.threadInfo.color}`}
           maxLength={chatNameMaxLength}
         />
         {this.renderButton()}
       </React.Fragment>
     );
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof BaseTextInput>) => {
     this.textInput = textInput;
   };
 
   threadEditName(): string {
     return firstLine(
       this.props.threadInfo.name ? this.props.threadInfo.name : '',
     );
   }
 
   onPressEdit = () => {
     this.props.setNameEditValue(this.threadEditName());
   };
 
   onSubmit = () => {
     invariant(
       this.props.nameEditValue !== null &&
         this.props.nameEditValue !== undefined,
       'should be set',
     );
     const name = firstLine(this.props.nameEditValue);
 
     if (name === this.threadEditName()) {
       this.props.setNameEditValue(null);
       return;
     }
 
     const editNamePromise = this.editName(name);
     const action = changeThreadSettingsActionTypes.started;
     const threadID = this.props.threadInfo.id;
 
     void this.props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
       editNamePromise,
       {
         customKeyName: `${action}:${threadID}:name`,
       },
     );
     void editNamePromise.then(() => {
       this.props.setNameEditValue(null);
     });
   };
 
   async editName(newName: string): Promise<ChangeThreadSettingsPayload> {
     try {
       return await this.props.changeThreadSettings({
         threadID: this.props.threadInfo.id,
         changes: { name: newName },
       });
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: this.onErrorAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }
 
   onErrorAcknowledged = () => {
     this.props.setNameEditValue(this.threadEditName(), () => {
       invariant(this.textInput, 'textInput should be set');
       this.textInput.focus();
     });
   };
 }
 
 const ConnectedThreadSettingsName: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsName(props: BaseProps) {
     const styles = useStyles(unboundStyles);
     const colors = useColors();
 
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:name`,
       ),
     );
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeThreadSettings = useChangeThreadSettings();
 
     return (
       <ThreadSettingsName
         {...props}
         styles={styles}
         colors={colors}
         loadingStatus={loadingStatus}
         dispatchActionPromise={dispatchActionPromise}
         changeThreadSettings={callChangeThreadSettings}
       />
     );
   });
 
 export default ConnectedThreadSettingsName;
diff --git a/native/chat/settings/thread-settings-push-notifs.react.js b/native/chat/settings/thread-settings-push-notifs.react.js
index 06919de11..0cfc196f8 100644
--- a/native/chat/settings/thread-settings-push-notifs.react.js
+++ b/native/chat/settings/thread-settings-push-notifs.react.js
@@ -1,194 +1,196 @@
 // @flow
 
 import * as React from 'react';
 import { View, Switch, TouchableOpacity, Platform } from 'react-native';
 import Linking from 'react-native/Libraries/Linking/Linking.js';
 
 import {
   updateSubscriptionActionTypes,
   useUpdateSubscription,
 } from 'lib/actions/user-actions.js';
 import { extractKeyserverIDFromID } from 'lib/keyserver-conn/keyserver-call-utils.js';
 import { deviceTokenSelector } from 'lib/selectors/keyserver-selectors.js';
 import type {
   SubscriptionUpdateRequest,
   SubscriptionUpdateResult,
 } from 'lib/types/subscription-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import SingleLine from '../../components/single-line.react.js';
 import SWMansionIcon from '../../components/swmansion-icon.react.js';
 import { CommAndroidNotifications } from '../../push/android.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles } from '../../themes/colors.js';
 import Alert from '../../utils/alert.js';
 
 const unboundStyles = {
   currentValue: {
     alignItems: 'flex-end',
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     flex: 1,
   },
   row: {
     alignItems: 'center',
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 3,
   },
   infoIcon: {
     paddingRight: 20,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +hasPushPermissions: boolean,
   +updateSubscription: (
     subscriptionUpdate: SubscriptionUpdateRequest,
   ) => Promise<SubscriptionUpdateResult>,
 };
 type State = {
   +currentValue: boolean,
 };
 class ThreadSettingsPushNotifs extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
       currentValue: props.threadInfo.currentUser.subscription.pushNotifs,
     };
   }
 
   render(): React.Node {
     const componentLabel = 'Push notifs';
     let notificationsSettingsLinkingIcon: React.Node = undefined;
     if (!this.props.hasPushPermissions) {
       notificationsSettingsLinkingIcon = (
         <TouchableOpacity
           onPress={this.onNotificationsSettingsLinkingIconPress}
         >
           <View style={this.props.styles.infoIcon}>
             <SWMansionIcon name="info-circle" size={25} color="gray" />
           </View>
         </TouchableOpacity>
       );
     }
     return (
       <View style={this.props.styles.row}>
         <SingleLine style={this.props.styles.label} adjustsFontSizeToFit={true}>
           {componentLabel}
         </SingleLine>
         {notificationsSettingsLinkingIcon}
         <View style={this.props.styles.currentValue}>
           <Switch
             value={this.state.currentValue}
             onValueChange={this.onValueChange}
             disabled={!this.props.hasPushPermissions}
           />
         </View>
       </View>
     );
   }
 
   onValueChange = (value: boolean) => {
     this.setState({ currentValue: value });
     void this.props.dispatchActionPromise(
       updateSubscriptionActionTypes,
       this.props.updateSubscription({
         threadID: this.props.threadInfo.id,
         updatedFields: {
           pushNotifs: value,
         },
       }),
     );
   };
 
   onNotificationsSettingsLinkingIconPress = async () => {
     let platformRequestsPermission;
     if (Platform.OS !== 'android') {
       platformRequestsPermission = true;
     } else {
       platformRequestsPermission =
         await CommAndroidNotifications.canRequestNotificationsPermissionFromUser();
     }
 
     const alertTitle = platformRequestsPermission
       ? 'Need notif permissions'
       : 'Unable to initialize notifs';
     const notificationsSettingsPath =
       Platform.OS === 'ios'
         ? 'Settings App → Notifications → Comm'
         : 'Settings → Apps → Comm → Notifications';
 
     let alertMessage;
     if (platformRequestsPermission && this.state.currentValue) {
       alertMessage =
         'Notifs for this chat are enabled, but cannot be delivered ' +
         'to this device because you haven’t granted notif permissions to Comm. ' +
         'Please enable them in ' +
         notificationsSettingsPath;
     } else if (platformRequestsPermission) {
       alertMessage =
         'In order to enable push notifs for this chat, ' +
         'you need to first grant notif permissions to Comm. ' +
         'Please enable them in ' +
         notificationsSettingsPath;
     } else {
       alertMessage =
         'Please check your network connection, make sure Google Play ' +
         'services are installed and enabled, and confirm that your Google ' +
         'Play credentials are valid in the Google Play Store.';
     }
     Alert.alert(alertTitle, alertMessage, [
       {
         text: 'Go to settings',
         onPress: () => Linking.openSettings(),
       },
       {
         text: 'Cancel',
         style: 'cancel',
       },
     ]);
   };
 }
 
 const ConnectedThreadSettingsPushNotifs: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsPushNotifs(
     props: BaseProps,
   ) {
     const keyserverID = extractKeyserverIDFromID(props.threadInfo.id);
     const deviceToken = useSelector(deviceTokenSelector(keyserverID));
     const hasPushPermissions =
       deviceToken !== null && deviceToken !== undefined;
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const callUpdateSubscription = useUpdateSubscription();
     return (
       <ThreadSettingsPushNotifs
         {...props}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         updateSubscription={callUpdateSubscription}
         hasPushPermissions={hasPushPermissions}
       />
     );
   });
 
 export default ConnectedThreadSettingsPushNotifs;
diff --git a/native/chat/toggle-pin-modal.react.js b/native/chat/toggle-pin-modal.react.js
index 98eeab13a..f454e8283 100644
--- a/native/chat/toggle-pin-modal.react.js
+++ b/native/chat/toggle-pin-modal.react.js
@@ -1,164 +1,164 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import {
   useToggleMessagePin,
   toggleMessagePinActionTypes,
 } from 'lib/actions/message-actions.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import MessageResult from './message-result.react.js';
 import Button from '../components/button.react.js';
 import Modal from '../components/modal.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types';
 
 export type TogglePinModalParams = {
   +item: ChatMessageInfoItemWithHeight,
   +threadInfo: ThreadInfo,
 };
 
 type TogglePinModalProps = {
   +navigation: AppNavigationProp<'TogglePinModal'>,
   +route: NavigationRoute<'TogglePinModal'>,
 };
 
 function TogglePinModal(props: TogglePinModalProps): React.Node {
   const { navigation, route } = props;
   const { item, threadInfo } = route.params;
   const { messageInfo, isPinned } = item;
   const styles = useStyles(unboundStyles);
 
   const callToggleMessagePin = useToggleMessagePin();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const modalInfo = React.useMemo(() => {
     if (isPinned) {
       return {
         name: 'Remove Pinned Message',
         action: 'unpin',
         confirmationText:
           'Are you sure you want to remove this pinned message?',
         buttonText: 'Remove Pinned Message',
         buttonStyle: styles.removePinButton,
       };
     }
 
     return {
       name: 'Pin Message',
       action: 'pin',
       confirmationText:
         'You may pin this message to the channel you are ' +
         'currently viewing. To unpin a message, select the pinned messages ' +
         'icon in the channel.',
       buttonText: 'Pin Message',
       buttonStyle: styles.pinButton,
     };
   }, [isPinned, styles.pinButton, styles.removePinButton]);
 
   const createToggleMessagePinPromise = React.useCallback(async () => {
     invariant(messageInfo.id, 'messageInfo.id should be defined');
     const result = await callToggleMessagePin({
       messageID: messageInfo.id,
       action: modalInfo.action,
     });
     return ({
       newMessageInfos: result.newMessageInfos,
       threadID: result.threadID,
     }: { +newMessageInfos: $ReadOnlyArray<RawMessageInfo>, +threadID: string });
   }, [callToggleMessagePin, messageInfo.id, modalInfo.action]);
 
   const onPress = React.useCallback(() => {
     void dispatchActionPromise(
       toggleMessagePinActionTypes,
       createToggleMessagePinPromise(),
     );
 
     navigation.goBack();
   }, [createToggleMessagePinPromise, dispatchActionPromise, navigation]);
 
   const onCancel = React.useCallback(() => {
     navigation.goBack();
   }, [navigation]);
 
   return (
     <Modal modalStyle={styles.modal}>
       <Text style={styles.modalHeader}>{modalInfo.name}</Text>
       <Text style={styles.modalConfirmationText}>
         {modalInfo.confirmationText}
       </Text>
       <MessageResult
         item={item}
         threadInfo={threadInfo}
         navigation={navigation}
         route={route}
         messageVerticalBounds={null}
         scrollable={true}
       />
       <View style={styles.buttonsContainer}>
         <Button style={modalInfo.buttonStyle} onPress={onPress}>
           <Text style={styles.textColor}>{modalInfo.buttonText}</Text>
         </Button>
         <Button style={styles.cancelButton} onPress={onCancel}>
           <Text style={styles.textColor}>Cancel</Text>
         </Button>
       </View>
     </Modal>
   );
 }
 
 const unboundStyles = {
   modal: {
     backgroundColor: 'modalForeground',
     borderColor: 'modalForegroundBorder',
   },
   modalHeader: {
     fontSize: 18,
     color: 'modalForegroundLabel',
   },
   modalConfirmationText: {
     fontSize: 12,
     color: 'modalBackgroundLabel',
     marginTop: 4,
   },
   buttonsContainer: {
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'flex-end',
     marginBottom: 0,
     height: 72,
     paddingHorizontal: 16,
   },
   removePinButton: {
     borderRadius: 5,
     height: 48,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'vibrantRedButton',
   },
   pinButton: {
     borderRadius: 5,
     height: 48,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'purpleButton',
   },
   cancelButton: {
     borderRadius: 5,
     height: 48,
     justifyContent: 'center',
     alignItems: 'center',
   },
   textColor: {
     color: 'modalButtonLabel',
   },
 };
 
 export default TogglePinModal;
diff --git a/native/community-creation/community-configuration.react.js b/native/community-creation/community-configuration.react.js
index baa3a45fb..c731bf6fc 100644
--- a/native/community-creation/community-configuration.react.js
+++ b/native/community-creation/community-configuration.react.js
@@ -1,213 +1,213 @@
 // @flow
 
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import {
   useNewThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { NewThreadResult } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
 import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';
 import RegistrationButtonContainer from '../account/registration/registration-button-container.react.js';
 import RegistrationButton from '../account/registration/registration-button.react.js';
 import RegistrationContainer from '../account/registration/registration-container.react.js';
 import RegistrationContentContainer from '../account/registration/registration-content-container.react.js';
 import {
   ThreadSettingsCategoryFooter,
   ThreadSettingsCategoryHeader,
 } from '../chat/settings/thread-settings-category.react.js';
 import EnumSettingsOption from '../components/enum-settings-option.react.js';
 import TextInput from '../components/text-input.react.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import {
   CommunityCreationMembersRouteName,
   type NavigationRoute,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors, useStyles } from '../themes/colors.js';
 
 type Props = {
   +navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>,
   +route: NavigationRoute<'CommunityConfiguration'>,
 };
 
 const createNewCommunityLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 function CommunityConfiguration(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const { navigate } = props.navigation;
 
   const dispatchActionPromise = useDispatchActionPromise();
 
   const callNewThread = useNewThread();
   const calendarQueryFunc = useCalendarQuery();
 
   const createNewCommunityLoadingStatus: LoadingStatus = useSelector(
     createNewCommunityLoadingStatusSelector,
   );
 
   const [pendingCommunityName, setPendingCommunityName] = React.useState('');
   const [announcementSetting, setAnnouncementSetting] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState<?string>();
 
   const onChangePendingCommunityName = React.useCallback((newValue: string) => {
     setErrorMessage();
     setPendingCommunityName(newValue);
   }, []);
 
   const callCreateNewCommunity = React.useCallback(async () => {
     const calendarQuery = calendarQueryFunc();
     try {
       const newThreadResult: NewThreadResult = await callNewThread({
         name: pendingCommunityName,
         type: announcementSetting
           ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT
           : threadTypes.COMMUNITY_ROOT,
         calendarQuery,
       });
       return newThreadResult;
     } catch (e) {
       setErrorMessage('Community creation failed. Please try again.');
       throw e;
     }
   }, [
     announcementSetting,
     calendarQueryFunc,
     callNewThread,
     pendingCommunityName,
   ]);
 
   const createNewCommunity = React.useCallback(async () => {
     setErrorMessage();
     const newThreadResultPromise = callCreateNewCommunity();
     void dispatchActionPromise(newThreadActionTypes, newThreadResultPromise);
     const newThreadResult = await newThreadResultPromise;
 
     navigate<'CommunityCreationMembers'>({
       name: CommunityCreationMembersRouteName,
       params: {
         announcement: announcementSetting,
         threadID: newThreadResult.newThreadID,
       },
     });
   }, [
     announcementSetting,
     callCreateNewCommunity,
     dispatchActionPromise,
     navigate,
   ]);
 
   const onCheckBoxPress = React.useCallback(() => {
     setErrorMessage();
     setAnnouncementSetting(!announcementSetting);
   }, [announcementSetting]);
 
   const enumSettingsOptionDescription =
     'Make it so only admins can post to ' +
     'the root channel of the community.';
 
   return (
     <RegistrationContainer>
       <RegistrationContentContainer style={styles.containerPaddingOverride}>
         <CommunityCreationKeyserverLabel />
         <ThreadSettingsCategoryHeader type="full" title="COMMUNITY INFO" />
         <View style={styles.communityNameRow}>
           <Text style={styles.communityNameLabel}>Name</Text>
           <TextInput
             style={styles.communityNamePendingValue}
             placeholder="Community Name"
             placeholderTextColor={colors.panelSecondaryForegroundBorder}
             value={pendingCommunityName}
             onChangeText={onChangePendingCommunityName}
             editable={true}
           />
         </View>
         <ThreadSettingsCategoryFooter type="full" />
 
         <View style={styles.communityNameNoticeContainer}>
           <Text style={styles.communityNameNoticeText}>
             You may edit your community&rsquo;s image and name later.
           </Text>
         </View>
 
         <ThreadSettingsCategoryHeader type="full" title="OPTIONAL SETTINGS" />
         <EnumSettingsOption
           icon="megaphone"
           name="Announcement root"
           description={enumSettingsOptionDescription}
           enumValue={announcementSetting}
           onEnumValuePress={onCheckBoxPress}
         />
         <ThreadSettingsCategoryFooter type="full" />
         <RegistrationButtonContainer>
           <RegistrationButton
             onPress={createNewCommunity}
             label="Create community"
             variant={
               createNewCommunityLoadingStatus === 'loading'
                 ? 'loading'
                 : 'enabled'
             }
           />
         </RegistrationButtonContainer>
         <View style={styles.errorMessageContainer}>
           <Text style={styles.errorMessageText}>{errorMessage}</Text>
         </View>
       </RegistrationContentContainer>
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   containerPaddingOverride: {
     padding: 0,
   },
   communityNameRow: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 8,
   },
   communityNameLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     width: 96,
   },
   communityNamePendingValue: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   communityNameNoticeContainer: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
   },
   communityNameNoticeText: {
     color: 'panelForegroundTertiaryLabel',
   },
   errorMessageContainer: {
     alignItems: 'center',
   },
   errorMessageText: {
     color: 'redText',
   },
 };
 
 export default CommunityConfiguration;
diff --git a/native/community-creation/community-creation-members.react.js b/native/community-creation/community-creation-members.react.js
index 51f40e47b..2018c7e93 100644
--- a/native/community-creation/community-creation-members.react.js
+++ b/native/community-creation/community-creation-members.react.js
@@ -1,186 +1,186 @@
 // @flow
 
 import * as React from 'react';
 import { ActivityIndicator } from 'react-native';
 
 import {
   useChangeThreadSettings,
   changeThreadSettingsActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userInfoSelectorForPotentialMembers } from 'lib/selectors/user-selectors.js';
 import { usePotentialMemberItems } from 'lib/shared/search-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { AccountUserInfo } from 'lib/types/user-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import CommunityCreationContentContainer from './community-creation-content-container.react.js';
 import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
 import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';
 import RegistrationContainer from '../account/registration/registration-container.react.js';
 import { useNavigateToThread } from '../chat/message-list-types.js';
 import LinkButton from '../components/link-button.react.js';
 import {
   createTagInput,
   type BaseTagInput,
 } from '../components/tag-input.react.js';
 import UserList from '../components/user-list.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 export type CommunityCreationMembersScreenParams = {
   +announcement: boolean,
   +threadID: string,
 };
 
 const TagInput = createTagInput<AccountUserInfo>();
 const tagInputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
 
 type Props = {
   +navigation: CommunityCreationNavigationProp<'CommunityCreationMembers'>,
   +route: NavigationRoute<'CommunityCreationMembers'>,
 };
 
 const changeThreadSettingsLoadingStatusSelector = createLoadingStatusSelector(
   changeThreadSettingsActionTypes,
 );
 
 function CommunityCreationMembers(props: Props): React.Node {
   const { announcement, threadID } = props.route.params;
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useChangeThreadSettings();
   const changeThreadSettingsLoadingStatus: LoadingStatus = useSelector(
     changeThreadSettingsLoadingStatusSelector,
   );
 
   const { navigation } = props;
   const { setOptions } = navigation;
 
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
 
   const [usernameInputText, setUsernameInputText] = React.useState<string>('');
   const [selectedUsers, setSelectedUsers] = React.useState<
     $ReadOnlyArray<AccountUserInfo>,
   >([]);
 
   const selectedUserIDs = React.useMemo(
     () => selectedUsers.map(userInfo => userInfo.id),
     [selectedUsers],
   );
 
   const navigateToThread = useNavigateToThread();
   const threadInfos = useSelector(threadInfoSelector);
   const communityThreadInfo = threadInfos[threadID];
 
   const addSelectedUsersToCommunity = React.useCallback(() => {
     void dispatchActionPromise(
       changeThreadSettingsActionTypes,
       (async () => {
         const result = await callChangeThreadSettings({
           threadID,
           changes: { newMemberIDs: selectedUserIDs },
         });
         navigateToThread({ threadInfo: communityThreadInfo });
         return result;
       })(),
     );
   }, [
     callChangeThreadSettings,
     communityThreadInfo,
     dispatchActionPromise,
     navigateToThread,
     selectedUserIDs,
     threadID,
   ]);
 
   const exitCommunityCreationFlow = React.useCallback(() => {
     navigateToThread({ threadInfo: communityThreadInfo });
   }, [communityThreadInfo, navigateToThread]);
 
   const activityIndicatorStyle = React.useMemo(
     () => ({ paddingRight: 20 }),
     [],
   );
 
   React.useEffect(() => {
     setOptions({
       headerRight: () => {
         if (changeThreadSettingsLoadingStatus === 'loading') {
           return (
             <ActivityIndicator size="small" style={activityIndicatorStyle} />
           );
         }
         return (
           <LinkButton
             text={selectedUserIDs.length === 0 ? 'Skip' : 'Done'}
             onPress={
               selectedUserIDs.length === 0
                 ? exitCommunityCreationFlow
                 : addSelectedUsersToCommunity
             }
           />
         );
       },
     });
   }, [
     activityIndicatorStyle,
     addSelectedUsersToCommunity,
     changeThreadSettingsLoadingStatus,
     exitCommunityCreationFlow,
     selectedUserIDs.length,
     setOptions,
   ]);
 
   const userSearchResults = usePotentialMemberItems({
     text: usernameInputText,
     userInfos: otherUserInfos,
     excludeUserIDs: selectedUserIDs,
     threadType: announcement
       ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT
       : threadTypes.COMMUNITY_ROOT,
   });
 
   const onSelectUser = React.useCallback(
     ({ id }: AccountUserInfo) => {
       if (selectedUserIDs.some(existingUserID => id === existingUserID)) {
         return;
       }
       setSelectedUsers(oldUserInfoInputArray => [
         ...oldUserInfoInputArray,
         otherUserInfos[id],
       ]);
       setUsernameInputText('');
     },
     [otherUserInfos, selectedUserIDs],
   );
 
   const tagInputRef = React.useRef<?BaseTagInput<AccountUserInfo>>();
 
   return (
     <RegistrationContainer>
       <CommunityCreationContentContainer>
         <CommunityCreationKeyserverLabel />
         <TagInput
           value={selectedUsers}
           onChange={setSelectedUsers}
           text={usernameInputText}
           onChangeText={setUsernameInputText}
           labelExtractor={tagDataLabelExtractor}
           inputProps={tagInputProps}
           ref={tagInputRef}
         />
         <UserList userInfos={userSearchResults} onSelect={onSelectUser} />
       </CommunityCreationContentContainer>
     </RegistrationContainer>
   );
 }
 
 export default CommunityCreationMembers;
diff --git a/native/components/version-supported.react.js b/native/components/version-supported.react.js
index d5a3c4ccf..c1b2e4310 100644
--- a/native/components/version-supported.react.js
+++ b/native/components/version-supported.react.js
@@ -1,60 +1,60 @@
 // @flow
 
 import * as React from 'react';
 
 import { useLogOut, logOutActionTypes } from 'lib/actions/user-actions.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { commRustModule } from '../native-modules.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { AppOutOfDateAlertDetails } from '../utils/alert-messages.js';
 import Alert from '../utils/alert.js';
 
 function VersionSupportedChecker(): React.Node {
   const hasRun = React.useRef(false);
 
   const loggedIn = useSelector(isLoggedIn);
   const dispatchActionPromise = useDispatchActionPromise();
   const callLogOut = useLogOut();
 
   const onUsernameAlertAcknowledged = React.useCallback(() => {
     if (loggedIn) {
       void dispatchActionPromise(logOutActionTypes, callLogOut());
     }
   }, [callLogOut, dispatchActionPromise, loggedIn]);
 
   const checkVersionSupport = React.useCallback(async () => {
     try {
       const isVersionSupported = await commRustModule.versionSupported();
       if (isVersionSupported) {
         return;
       }
       Alert.alert(
         AppOutOfDateAlertDetails.title,
         AppOutOfDateAlertDetails.message,
         [
           {
             text: 'OK',
             onPress: onUsernameAlertAcknowledged,
           },
         ],
         { cancelable: false },
       );
     } catch (error) {
       console.log('Error checking version:', error);
     }
   }, [onUsernameAlertAcknowledged]);
 
   React.useEffect(() => {
     if (hasRun.current) {
       return;
     }
     hasRun.current = true;
     void checkVersionSupport();
   }, [checkVersionSupport]);
 
   return null;
 }
 
 export default VersionSupportedChecker;
diff --git a/native/crash.react.js b/native/crash.react.js
index 25e79d438..b9ef211b4 100644
--- a/native/crash.react.js
+++ b/native/crash.react.js
@@ -1,304 +1,304 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import Clipboard from '@react-native-clipboard/clipboard';
 import invariant from 'invariant';
 import _shuffle from 'lodash/fp/shuffle.js';
 import * as React from 'react';
 import {
   View,
   Text,
   Platform,
   StyleSheet,
   ScrollView,
   ActivityIndicator,
 } from 'react-native';
 
 import {
   sendReportActionTypes,
   sendReport,
 } from 'lib/actions/report-actions.js';
 import { logOutActionTypes, useLogOut } from 'lib/actions/user-actions.js';
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
 import type { LogOutResult } from 'lib/types/account-types.js';
 import { type ErrorData, reportTypes } from 'lib/types/report-types.js';
 import type { PreRequestUserState } from 'lib/types/session-types.js';
 import { actionLogger } from 'lib/utils/action-logger.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 import {
   generateReportID,
   useIsReportEnabled,
 } from 'lib/utils/report-utils.js';
 import {
   sanitizeReduxReport,
   type ReduxCrashReport,
 } from 'lib/utils/sanitization.js';
 import sleep from 'lib/utils/sleep.js';
 
 import Button from './components/button.react.js';
 import ConnectedStatusBar from './connected-status-bar.react.js';
 import { commCoreModule } from './native-modules.js';
 import { persistConfig, codeVersion } from './redux/persist.js';
 import { useSelector } from './redux/redux-utils.js';
 import { wipeAndExit } from './utils/crash-utils.js';
 
 const errorTitles = ['Oh no!!', 'Womp womp womp...'];
 
 type BaseProps = {
   +errorData: $ReadOnlyArray<ErrorData>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +preRequestUserState: PreRequestUserState,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +logOut: (preRequestUserState: PreRequestUserState) => Promise<LogOutResult>,
   +crashReportingEnabled: boolean,
 };
 type State = {
   +errorReportID: ?string,
   +doneWaiting: boolean,
 };
 class Crash extends React.PureComponent<Props, State> {
   errorTitle: string = _shuffle(errorTitles)[0];
 
   constructor(props: Props) {
     super(props);
     this.state = {
       errorReportID: null,
       doneWaiting: !props.crashReportingEnabled,
     };
   }
 
   componentDidMount() {
     if (this.state.doneWaiting) {
       return;
     }
     void this.props.dispatchActionPromise(
       sendReportActionTypes,
       this.sendReport(),
     );
     void this.timeOut();
   }
 
   async timeOut() {
     // If it takes more than 10s, give up and let the user exit
     await sleep(10000);
     this.setState({ doneWaiting: true });
   }
 
   render(): React.Node {
     const errorText = [...this.props.errorData]
       .reverse()
       .map(errorData => errorData.error.message)
       .join('\n');
 
     let crashID;
     if (!this.state.doneWaiting) {
       crashID = <ActivityIndicator size="small" color="black" />;
     } else if (this.state.doneWaiting && this.state.errorReportID) {
       crashID = (
         <View style={styles.crashID}>
           <Text style={styles.crashIDText}>Crash report ID:</Text>
           <View style={styles.errorReportID}>
             <Text style={styles.errorReportIDText}>
               {this.state.errorReportID}
             </Text>
             <Button onPress={this.onCopyCrashReportID}>
               <Text style={styles.copyCrashReportIDButtonText}>(Copy)</Text>
             </Button>
           </View>
         </View>
       );
     } else {
       crashID = (
         <Text style={styles.text}>
           Crash reporting can be enabled in the Profile tab.
         </Text>
       );
     }
 
     const buttonStyle = { opacity: Number(this.state.doneWaiting) };
 
     return (
       <View style={styles.container}>
         <ConnectedStatusBar barStyle="dark-content" />
         <Icon name="bug" size={32} color="red" />
         <Text style={styles.header}>{this.errorTitle}</Text>
         <Text style={styles.text}>I&rsquo;m sorry, but the app crashed.</Text>
         {crashID}
         <Text style={styles.text}>
           Here&rsquo;s some text that&rsquo;s probably not helpful:
         </Text>
         <ScrollView style={styles.scrollView}>
           <Text style={styles.errorText}>{errorText}</Text>
         </ScrollView>
         <View style={[styles.buttons, buttonStyle]}>
           <Button onPress={this.onPressKill} style={styles.button}>
             <Text style={styles.buttonText}>Kill the app</Text>
           </Button>
           <Button onPress={this.onPressWipe} style={styles.button}>
             <Text style={styles.buttonText}>Wipe state and kill app</Text>
           </Button>
         </View>
       </View>
     );
   }
 
   async sendReport() {
     // There's a type error here because ActionLogger doesn't understand the
     // exact shape of the Redux state / actions it is passed. We could solve it
     // by adding some type params to ActionLogger
     const rawReduxReport: ReduxCrashReport = ({
       preloadedState: actionLogger.preloadedState,
       currentState: actionLogger.currentState,
       actions: actionLogger.actions,
     }: any);
     const sanitizedReduxReport = sanitizeReduxReport(rawReduxReport);
     const result = await sendReport({
       type: reportTypes.ERROR,
       platformDetails: {
         platform: Platform.OS,
         codeVersion,
         stateVersion: persistConfig.version,
       },
       errors: this.props.errorData.map(data => ({
         errorMessage: data.error.message,
         stack: data.error.stack,
         componentStack: data.info && data.info.componentStack,
       })),
       ...sanitizedReduxReport,
       id: generateReportID(),
     });
     this.setState({
       errorReportID: result.id,
       doneWaiting: true,
     });
   }
 
   onPressKill = () => {
     if (!this.state.doneWaiting) {
       return;
     }
     commCoreModule.terminate();
   };
 
   onPressWipe = () => {
     if (!this.state.doneWaiting) {
       return;
     }
     void this.props.dispatchActionPromise(
       logOutActionTypes,
       this.logOutAndExit(),
     );
   };
 
   async logOutAndExit() {
     try {
       await this.props.logOut(this.props.preRequestUserState);
     } catch (e) {}
     await wipeAndExit();
   }
 
   onCopyCrashReportID = () => {
     invariant(this.state.errorReportID, 'should be set');
     Clipboard.setString(this.state.errorReportID);
   };
 }
 
 const styles = StyleSheet.create({
   button: {
     backgroundColor: '#FF0000',
     borderRadius: 5,
     marginHorizontal: 10,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
   buttonText: {
     color: 'white',
     fontSize: 16,
   },
   buttons: {
     flexDirection: 'row',
   },
   container: {
     alignItems: 'center',
     backgroundColor: 'white',
     flex: 1,
     justifyContent: 'center',
   },
   copyCrashReportIDButtonText: {
     color: '#036AFF',
   },
   crashID: {
     alignItems: 'center',
     paddingBottom: 12,
     paddingTop: 2,
   },
   crashIDText: {
     color: 'black',
   },
   errorReportID: {
     flexDirection: 'row',
     height: 20,
   },
   errorReportIDText: {
     color: 'black',
     fontFamily: (Platform.select({
       ios: 'Menlo',
       default: 'monospace',
     }): string),
     fontSize: 12,
     paddingRight: 8,
     paddingTop: 3,
   },
   errorText: {
     color: 'black',
     fontFamily: (Platform.select({
       ios: 'Menlo',
       default: 'monospace',
     }): string),
   },
   header: {
     color: 'black',
     fontSize: 24,
     paddingBottom: 24,
   },
   scrollView: {
     flex: 1,
     marginBottom: 24,
     marginTop: 12,
     maxHeight: 200,
     paddingHorizontal: 50,
   },
   text: {
     color: 'black',
     paddingBottom: 12,
   },
 });
 
 const ConnectedCrash: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCrash(props: BaseProps) {
     const preRequestUserState = useSelector(preRequestUserStateSelector);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callLogOut = useLogOut();
     const crashReportingEnabled = useIsReportEnabled('crashReports');
     return (
       <Crash
         {...props}
         preRequestUserState={preRequestUserState}
         dispatchActionPromise={dispatchActionPromise}
         logOut={callLogOut}
         crashReportingEnabled={crashReportingEnabled}
       />
     );
   },
 );
 
 export default ConnectedCrash;
diff --git a/native/input/input-state-container.react.js b/native/input/input-state-container.react.js
index 6455cd054..38c7dcaf5 100644
--- a/native/input/input-state-container.react.js
+++ b/native/input/input-state-container.react.js
@@ -1,1752 +1,1752 @@
 // @flow
 
 import * as FileSystem from 'expo-file-system';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { createSelector } from 'reselect';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   useSendMultimediaMessage,
   sendTextMessageActionTypes,
   useSendTextMessage,
 } from 'lib/actions/message-actions.js';
 import type {
   SendMultimediaMessageInput,
   SendTextMessageInput,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { useNewThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   updateMultimediaMessageMediaActionType,
   useBlobServiceUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
   type BlobServiceUploadAction,
   type BlobServiceUploadResult,
 } from 'lib/actions/upload-actions.js';
 import commStaffCommunity from 'lib/facts/comm-staff-community.js';
 import { pathFromURI, replaceExtension } from 'lib/media/file-utils.js';
 import {
   isLocalUploadID,
   getNextLocalUploadID,
 } from 'lib/media/media-utils.js';
 import { videoDurationLimit } from 'lib/media/video-utils.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import {
   createMediaMessageInfo,
   useNextLocalID,
   useMessageCreationSideEffectsFunc,
 } from 'lib/shared/message-utils.js';
 import type { CreationSideEffectsFunc } from 'lib/shared/messages/message-spec.js';
 import {
   createRealThreadFromPendingThread,
   threadIsPending,
   threadIsPendingSidebar,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   Media,
   NativeMediaSelection,
   MediaMissionResult,
   MediaMission,
   MediaMissionStep,
 } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
 } from 'lib/types/message-types.js';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images.js';
 import type { RawMediaMessageInfo } from 'lib/types/messages/media.js';
 import { getMediaMessageServerDBContentsFromMedia } from 'lib/types/messages/media.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import {
   type ClientMediaMissionReportCreationRequest,
   reportTypes,
 } from 'lib/types/report-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import {
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ThreadInfo,
 } from 'lib/types/thread-types.js';
-import {
-  type DispatchActionPromise,
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import type {
   CallServerEndpointOptions,
   CallServerEndpointResponse,
 } from 'lib/utils/call-server-endpoint.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
 import { values } from 'lib/utils/objects.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import {
   generateReportID,
   useIsReportEnabled,
 } from 'lib/utils/report-utils.js';
 
 import {
   type EditInputBarMessageParameters,
   InputStateContext,
   type PendingMultimediaUploads,
   type MultimediaProcessingStep,
   type MessagePendingUploads,
   type InputState,
 } from './input-state.js';
 import { encryptMedia } from '../media/encryption-utils.js';
 import { disposeTempFile } from '../media/file-utils.js';
 import { processMedia } from '../media/media-utils.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import { useSelector } from '../redux/redux-utils.js';
 import blobServiceUploadHandler from '../utils/blob-service-upload.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type MediaIDs =
   | { +type: 'photo', +localMediaID: string }
   | { +type: 'video', +localMediaID: string, +localThumbnailID: string };
 type UploadFileInput = {
   +selection: NativeMediaSelection,
   +ids: MediaIDs,
 };
 type WritableCompletedUploads = {
   [localMessageID: string]: ?$ReadOnlySet<string>,
 };
 type CompletedUploads = $ReadOnly<WritableCompletedUploads>;
 type ActiveURI = { +count: number, +onClear: $ReadOnlyArray<() => mixed> };
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +nextLocalID: string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +ongoingMessageCreation: boolean,
   +hasWiFi: boolean,
   +mediaReportsEnabled: boolean,
   +calendarQuery: () => CalendarQuery,
   +dispatch: Dispatch,
   +staffCanSee: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +blobServiceUpload: BlobServiceUploadAction,
   +sendMultimediaMessage: (
     input: SendMultimediaMessageInput,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (input: SendTextMessageInput) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type State = {
   +pendingUploads: PendingMultimediaUploads,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
   };
   sendCallbacks: Array<() => void> = [];
   activeURIs: Map<string, ActiveURI> = new Map();
   editInputBarCallbacks: Array<
     (params: EditInputBarMessageParameters) => void,
   > = [];
   scrollToMessageCallbacks: Array<(messageID: string) => void> = [];
   pendingThreadCreations: Map<string, Promise<string>> = new Map();
   pendingThreadUpdateHandlers: Map<string, (ThreadInfo) => mixed> = new Map();
   // TODO: flip the switch
   // Note that this enables Blob service for encrypted media only
   useBlobServiceUploads = false;
 
   // When the user sends a multimedia message that triggers the creation of a
   // sidebar, the sidebar gets created right away, but the message needs to wait
   // for the uploads to complete before sending. We use this Set to track the
   // message localIDs that need sidebarCreation: true.
   pendingSidebarCreationMessageLocalIDs: Set<string> = new Set();
 
   static getCompletedUploads(props: Props, state: State): CompletedUploads {
     const completedUploads: WritableCompletedUploads = {};
     for (const localMessageID in state.pendingUploads) {
       const messagePendingUploads = state.pendingUploads[localMessageID];
       const rawMessageInfo = props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
 
       let allUploadsComplete = true;
       const completedUploadIDs = new Set(Object.keys(messagePendingUploads));
       for (const singleMedia of rawMessageInfo.media) {
         if (isLocalUploadID(singleMedia.id)) {
           allUploadsComplete = false;
           completedUploadIDs.delete(singleMedia.id);
         }
       }
 
       if (allUploadsComplete) {
         completedUploads[localMessageID] = null;
       } else if (completedUploadIDs.size > 0) {
         completedUploads[localMessageID] = completedUploadIDs;
       }
     }
     return completedUploads;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const currentlyComplete = InputStateContainer.getCompletedUploads(
       this.props,
       this.state,
     );
     const previouslyComplete = InputStateContainer.getCompletedUploads(
       prevProps,
       prevState,
     );
 
     const newPendingUploads: PendingMultimediaUploads = {};
     let pendingUploadsChanged = false;
     const readyMessageIDs = [];
     for (const localMessageID in this.state.pendingUploads) {
       const messagePendingUploads = this.state.pendingUploads[localMessageID];
       const prevRawMessageInfo = prevProps.messageStoreMessages[localMessageID];
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       const completedUploadIDs = currentlyComplete[localMessageID];
       const previouslyCompletedUploadIDs = previouslyComplete[localMessageID];
 
       if (!rawMessageInfo && prevRawMessageInfo) {
         pendingUploadsChanged = true;
         continue;
       } else if (completedUploadIDs === null) {
         // All of this message's uploads have been completed
         newPendingUploads[localMessageID] = {};
         if (previouslyCompletedUploadIDs !== null) {
           readyMessageIDs.push(localMessageID);
           pendingUploadsChanged = true;
         }
         continue;
       } else if (!completedUploadIDs) {
         // Nothing has been completed
         newPendingUploads[localMessageID] = messagePendingUploads;
         continue;
       }
 
       const newUploads: MessagePendingUploads = {};
       let uploadsChanged = false;
       for (const localUploadID in messagePendingUploads) {
         if (!completedUploadIDs.has(localUploadID)) {
           newUploads[localUploadID] = messagePendingUploads[localUploadID];
         } else if (
           !previouslyCompletedUploadIDs ||
           !previouslyCompletedUploadIDs.has(localUploadID)
         ) {
           uploadsChanged = true;
         }
       }
 
       if (uploadsChanged) {
         pendingUploadsChanged = true;
         newPendingUploads[localMessageID] = newUploads;
       } else {
         newPendingUploads[localMessageID] = messagePendingUploads;
       }
     }
     if (pendingUploadsChanged) {
       this.setState({ pendingUploads: newPendingUploads });
     }
 
     for (const localMessageID of readyMessageIDs) {
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
       void this.dispatchMultimediaMessageAction(rawMessageInfo);
     }
   }
 
   async dispatchMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<void> {
     if (!threadIsPending(messageInfo.threadID)) {
       void this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     void this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const sidebarCreation =
       this.pendingSidebarCreationMessageLocalIDs.has(localID);
     const mediaMessageContents = getMediaMessageServerDBContentsFromMedia(
       messageInfo.media,
     );
     try {
       const result = await this.props.sendMultimediaMessage({
         threadID,
         localID,
         mediaMessageContents,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       return {
         localID,
         serverID: result.id,
         threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = localID;
       copy.threadID = threadID;
       throw copy;
     }
   }
 
   inputStateSelector: State => InputState = createSelector(
     (state: State) => state.pendingUploads,
     (pendingUploads: PendingMultimediaUploads) =>
       ({
         pendingUploads,
         sendTextMessage: this.sendTextMessage,
         sendMultimediaMessage: this.sendMultimediaMessage,
         editInputMessage: this.editInputMessage,
         addEditInputMessageListener: this.addEditInputMessageListener,
         removeEditInputMessageListener: this.removeEditInputMessageListener,
         messageHasUploadFailure: this.messageHasUploadFailure,
         retryMessage: this.retryMessage,
         registerSendCallback: this.registerSendCallback,
         unregisterSendCallback: this.unregisterSendCallback,
         uploadInProgress: this.uploadInProgress,
         reportURIDisplayed: this.reportURIDisplayed,
         setPendingThreadUpdateHandler: this.setPendingThreadUpdateHandler,
         scrollToMessage: this.scrollToMessage,
         addScrollToMessageListener: this.addScrollToMessageListener,
         removeScrollToMessageListener: this.removeScrollToMessageListener,
       }: InputState),
   );
 
   scrollToMessage = (messageID: string) => {
     this.scrollToMessageCallbacks.forEach(callback => callback(messageID));
   };
 
   addScrollToMessageListener = (callback: (messageID: string) => void) => {
     this.scrollToMessageCallbacks.push(callback);
   };
 
   removeScrollToMessageListener = (
     callbackScrollToMessage: (messageID: string) => void,
   ) => {
     this.scrollToMessageCallbacks = this.scrollToMessageCallbacks.filter(
       candidate => candidate !== callbackScrollToMessage,
     );
   };
 
   uploadInProgress = (): boolean => {
     if (this.props.ongoingMessageCreation) {
       return true;
     }
     const { pendingUploads } = this.state;
     return values(pendingUploads).some(messagePendingUploads =>
       values(messagePendingUploads).some(upload => !upload.failed),
     );
   };
 
   sendTextMessage = async (
     messageInfo: RawTextMessageInfo,
     inputThreadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
 
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     if (threadIsPendingSidebar(inputThreadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localID);
     }
 
     if (!threadIsPending(inputThreadInfo.id)) {
       void this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(
           messageInfo,
           inputThreadInfo,
           parentThreadInfo,
         ),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let threadInfo = inputThreadInfo;
     const { viewerID } = this.props;
     if (viewerID && inputThreadInfo.type === threadTypes.SIDEBAR) {
       invariant(parentThreadInfo, 'sidebar should have parent');
       threadInfo = patchThreadInfoToIncludeMentionedMembersOfParent(
         inputThreadInfo,
         parentThreadInfo,
         messageInfo.text,
         viewerID,
       );
       if (threadInfo !== inputThreadInfo) {
         const pendingThreadUpdateHandler = this.pendingThreadUpdateHandlers.get(
           threadInfo.id,
         );
         pendingThreadUpdateHandler?.(threadInfo);
       }
     }
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
 
     // Branching to appease `flow`.
     const newThreadInfo = threadInfo.minimallyEncoded
       ? {
           ...threadInfo,
           id: newThreadID,
         }
       : {
           ...threadInfo,
           id: newThreadID,
         };
 
     void this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   };
 
   startThreadCreation(threadInfo: ThreadInfo): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return Promise.resolve(threadInfo.id);
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ): Promise<SendMessagePayload> {
     try {
       await this.props.textMessageCreationSideEffectsFunc(
         messageInfo,
         threadInfo,
         parentThreadInfo,
       );
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const sidebarCreation =
         this.pendingSidebarCreationMessageLocalIDs.has(localID);
       const result = await this.props.sendTextMessage({
         threadID: messageInfo.threadID,
         localID,
         text: messageInfo.text,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       return {
         localID,
         serverID: result.id,
         threadID: messageInfo.threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       throw copy;
     }
   }
 
   shouldEncryptMedia(threadInfo: ThreadInfo): boolean {
     return threadInfoInsideCommunity(threadInfo, commStaffCommunity.id);
   }
 
   sendMultimediaMessage = async (
     selections: $ReadOnlyArray<NativeMediaSelection>,
     threadInfo: ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
     const localMessageID = this.props.nextLocalID;
     void this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const uploadFileInputs = [],
       media: Array<Media> = [];
     for (const selection of selections) {
       const localMediaID = getNextLocalUploadID();
       let ids;
       if (
         selection.step === 'photo_library' ||
         selection.step === 'photo_capture' ||
         selection.step === 'photo_paste'
       ) {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'photo',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
           thumbHash: null,
         });
         ids = { type: 'photo', localMediaID };
       }
       const localThumbnailID = getNextLocalUploadID();
       if (selection.step === 'video_library') {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'video',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
           loop: false,
           thumbnailID: localThumbnailID,
           thumbnailURI: selection.uri,
           thumbnailThumbHash: null,
         });
         ids = { type: 'video', localMediaID, localThumbnailID };
       }
       invariant(ids, `unexpected MediaSelection ${selection.step}`);
       uploadFileInputs.push({ selection, ids });
     }
 
     const pendingUploads: MessagePendingUploads = {};
     for (const uploadFileInput of uploadFileInputs) {
       const { localMediaID } = uploadFileInput.ids;
       pendingUploads[localMediaID] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (uploadFileInput.ids.type === 'video') {
         const { localThumbnailID } = uploadFileInput.ids;
         pendingUploads[localThumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
 
     this.setState(
       prevState => {
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [localMessageID]: pendingUploads,
           },
         };
       },
       () => {
         const creatorID = this.props.viewerID;
         invariant(creatorID, 'need viewer ID in order to send a message');
         const messageInfo = createMediaMessageInfo(
           {
             localID: localMessageID,
             threadID: threadInfo.id,
             creatorID,
             media,
           },
           { forceMultimediaMessageType: this.shouldEncryptMedia(threadInfo) },
         );
         this.props.dispatch({
           type: createLocalMessageActionType,
           payload: messageInfo,
         });
       },
     );
 
     await this.uploadFiles(localMessageID, uploadFileInputs, threadInfo);
   };
 
   async uploadFiles(
     localMessageID: string,
     uploadFileInputs: $ReadOnlyArray<UploadFileInput>,
     threadInfo: ThreadInfo,
   ) {
     const results = await Promise.all(
       uploadFileInputs.map(uploadFileInput =>
         this.uploadFile(localMessageID, uploadFileInput, threadInfo),
       ),
     );
     const errors = [...new Set(results.filter(Boolean))];
     if (errors.length > 0) {
       displayActionResultModal(errors.join(', ') + ' :(');
     }
   }
 
   async uploadFile(
     localMessageID: string,
     uploadFileInput: UploadFileInput,
     threadInfo: ThreadInfo,
   ): Promise<?string> {
     const { ids, selection } = uploadFileInput;
     const { localMediaID } = ids;
     const start = selection.sendTime;
     const steps: Array<MediaMissionStep> = [selection];
     let encryptionSteps: $ReadOnlyArray<MediaMissionStep> = [];
     let serverID;
     let userTime;
     let errorMessage;
     let reportPromise: ?Promise<$ReadOnlyArray<MediaMissionStep>>;
     const filesToDispose = [];
 
     const onUploadFinished = async (result: MediaMissionResult) => {
       if (!this.props.mediaReportsEnabled) {
         return errorMessage;
       }
       if (reportPromise) {
         const finalSteps = await reportPromise;
         steps.push(...finalSteps);
         steps.push(...encryptionSteps);
       }
       const totalTime = Date.now() - start;
       userTime = userTime ? userTime : totalTime;
       this.queueMediaMissionReport(
         { localID: localMediaID, localMessageID, serverID },
         { steps, result, totalTime, userTime },
       );
       return errorMessage;
     };
     const onUploadFailed = (mediaID: string, message: string) => {
       errorMessage = message;
       this.handleUploadFailure(localMessageID, mediaID);
       userTime = Date.now() - start;
     };
 
     const onTranscodingProgress = (percent: number) => {
       this.setProgress(localMessageID, localMediaID, 'transcoding', percent);
     };
 
     let processedMedia;
     const processingStart = Date.now();
     try {
       const processMediaReturn = processMedia(selection, {
         hasWiFi: this.props.hasWiFi,
         finalFileHeaderCheck: this.props.staffCanSee,
         onTranscodingProgress,
       });
       reportPromise = processMediaReturn.reportPromise;
       const processResult = await processMediaReturn.resultPromise;
       if (!processResult.success) {
         const message =
           processResult.reason === 'video_too_long'
             ? `can't do vids longer than ${videoDurationLimit}min`
             : 'processing failed';
         onUploadFailed(localMediaID, message);
         return await onUploadFinished(processResult);
       }
       if (processResult.shouldDisposePath) {
         filesToDispose.push(processResult.shouldDisposePath);
       }
       processedMedia = processResult;
     } catch (e) {
       onUploadFailed(localMediaID, 'processing failed');
       return await onUploadFinished({
         success: false,
         reason: 'processing_exception',
         time: Date.now() - processingStart,
         exceptionMessage: getMessageForException(e),
       });
     }
 
     if (this.shouldEncryptMedia(threadInfo)) {
       const encryptionStart = Date.now();
       try {
         const { result: encryptionResult, ...encryptionReturn } =
           await encryptMedia(processedMedia);
         encryptionSteps = encryptionReturn.steps;
         if (!encryptionResult.success) {
           onUploadFailed(localMediaID, encryptionResult.reason);
           return await onUploadFinished(encryptionResult);
         }
         if (encryptionResult.shouldDisposePath) {
           filesToDispose.push(encryptionResult.shouldDisposePath);
         }
         processedMedia = encryptionResult;
       } catch (e) {
         onUploadFailed(localMediaID, 'encryption failed');
         return await onUploadFinished({
           success: false,
           reason: 'encryption_exception',
           time: Date.now() - encryptionStart,
           exceptionMessage: getMessageForException(e),
         });
       }
     }
 
     const { uploadURI, filename, mime } = processedMedia;
 
     const { hasWiFi } = this.props;
 
     const uploadStart = Date.now();
     let uploadExceptionMessage,
       uploadResult,
       uploadThumbnailResult,
       mediaMissionResult;
     try {
       if (
         this.useBlobServiceUploads &&
         (processedMedia.mediaType === 'encrypted_photo' ||
           processedMedia.mediaType === 'encrypted_video')
       ) {
         const uploadPromise = this.props.blobServiceUpload({
           uploadInput: {
             blobInput: {
               type: 'uri',
               uri: uploadURI,
               filename: filename,
               mimeType: mime,
             },
             blobHash: processedMedia.blobHash,
             encryptionKey: processedMedia.encryptionKey,
             dimensions: processedMedia.dimensions,
             thumbHash:
               processedMedia.mediaType === 'encrypted_photo'
                 ? processedMedia.thumbHash
                 : null,
           },
           keyserverOrThreadID: threadInfo.id,
           callbacks: {
             blobServiceUploadHandler,
             onProgress: (percent: number) => {
               this.setProgress(
                 localMessageID,
                 localMediaID,
                 'uploading',
                 percent,
               );
             },
           },
         });
 
         const uploadThumbnailPromise: Promise<?BlobServiceUploadResult> =
           (async () => {
             if (processedMedia.mediaType !== 'encrypted_video') {
               return undefined;
             }
             return await this.props.blobServiceUpload({
               uploadInput: {
                 blobInput: {
                   type: 'uri',
                   uri: processedMedia.uploadThumbnailURI,
                   filename: replaceExtension(`thumb${filename}`, 'jpg'),
                   mimeType: 'image/jpeg',
                 },
                 blobHash: processedMedia.thumbnailBlobHash,
                 encryptionKey: processedMedia.thumbnailEncryptionKey,
                 loop: false,
                 dimensions: processedMedia.dimensions,
                 thumbHash: processedMedia.thumbHash,
               },
               keyserverOrThreadID: threadInfo.id,
               callbacks: {
                 blobServiceUploadHandler,
               },
             });
           })();
 
         [uploadResult, uploadThumbnailResult] = await Promise.all([
           uploadPromise,
           uploadThumbnailPromise,
         ]);
       } else {
         const uploadPromise = this.props.uploadMultimedia(
           { uri: uploadURI, name: filename, type: mime },
           {
             ...processedMedia.dimensions,
             loop:
               processedMedia.mediaType === 'video' ||
               processedMedia.mediaType === 'encrypted_video'
                 ? processedMedia.loop
                 : undefined,
             encryptionKey: processedMedia.encryptionKey,
             thumbHash:
               processedMedia.mediaType === 'photo' ||
               processedMedia.mediaType === 'encrypted_photo'
                 ? processedMedia.thumbHash
                 : null,
           },
           {
             onProgress: (percent: number) =>
               this.setProgress(
                 localMessageID,
                 localMediaID,
                 'uploading',
                 percent,
               ),
             uploadBlob: this.uploadBlob,
           },
         );
 
         const uploadThumbnailPromise: Promise<?UploadMultimediaResult> =
           (async () => {
             if (
               processedMedia.mediaType !== 'video' &&
               processedMedia.mediaType !== 'encrypted_video'
             ) {
               return undefined;
             }
             return await this.props.uploadMultimedia(
               {
                 uri: processedMedia.uploadThumbnailURI,
                 name: replaceExtension(`thumb${filename}`, 'jpg'),
                 type: 'image/jpeg',
               },
               {
                 ...processedMedia.dimensions,
                 loop: false,
                 encryptionKey: processedMedia.thumbnailEncryptionKey,
                 thumbHash: processedMedia.thumbHash,
               },
               {
                 uploadBlob: this.uploadBlob,
               },
             );
           })();
 
         [uploadResult, uploadThumbnailResult] = await Promise.all([
           uploadPromise,
           uploadThumbnailPromise,
         ]);
       }
       mediaMissionResult = { success: true };
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       onUploadFailed(localMediaID, 'upload failed');
       mediaMissionResult = {
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       };
     }
 
     if (
       ((processedMedia.mediaType === 'photo' ||
         processedMedia.mediaType === 'encrypted_photo') &&
         uploadResult) ||
       ((processedMedia.mediaType === 'video' ||
         processedMedia.mediaType === 'encrypted_video') &&
         uploadResult &&
         uploadThumbnailResult)
     ) {
       const { encryptionKey } = processedMedia;
       const { id, uri, dimensions, loop } = uploadResult;
       serverID = id;
 
       const mediaSourcePayload =
         processedMedia.mediaType === 'encrypted_photo' ||
         processedMedia.mediaType === 'encrypted_video'
           ? {
               type: processedMedia.mediaType,
               blobURI: uri,
               encryptionKey,
             }
           : {
               type: uploadResult.mediaType,
               uri,
             };
       let updateMediaPayload = {
         messageID: localMessageID,
         currentMediaID: localMediaID,
         mediaUpdate: {
           id,
           ...mediaSourcePayload,
           dimensions,
           localMediaSelection: undefined,
           loop: uploadResult.mediaType === 'video' ? loop : undefined,
         },
       };
 
       if (
         processedMedia.mediaType === 'video' ||
         processedMedia.mediaType === 'encrypted_video'
       ) {
         invariant(uploadThumbnailResult, 'uploadThumbnailResult exists');
         const { uri: thumbnailURI, id: thumbnailID } = uploadThumbnailResult;
         const { thumbnailEncryptionKey, thumbHash: thumbnailThumbHash } =
           processedMedia;
 
         if (processedMedia.mediaType === 'encrypted_video') {
           updateMediaPayload = {
             ...updateMediaPayload,
             mediaUpdate: {
               ...updateMediaPayload.mediaUpdate,
               thumbnailID,
               thumbnailBlobURI: thumbnailURI,
               thumbnailEncryptionKey,
               thumbnailThumbHash,
             },
           };
         } else {
           updateMediaPayload = {
             ...updateMediaPayload,
             mediaUpdate: {
               ...updateMediaPayload.mediaUpdate,
               thumbnailID,
               thumbnailURI,
               thumbnailThumbHash,
             },
           };
         }
       } else {
         updateMediaPayload = {
           ...updateMediaPayload,
           mediaUpdate: {
             ...updateMediaPayload.mediaUpdate,
             thumbHash: processedMedia.thumbHash,
           },
         };
       }
 
       // When we dispatch this action, it updates Redux and triggers the
       // componentDidUpdate in this class. componentDidUpdate will handle
       // calling dispatchMultimediaMessageAction once all the uploads are
       // complete, and does not wait until this function concludes.
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: updateMediaPayload,
       });
       userTime = Date.now() - start;
     }
 
     const processSteps = await reportPromise;
     reportPromise = null;
     steps.push(...processSteps);
     steps.push(...encryptionSteps);
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: filename,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
       hasWiFi,
     });
 
     const cleanupPromises = [];
 
     if (filesToDispose.length > 0) {
       // If processMedia needed to do any transcoding before upload, we dispose
       // of the resultant temporary file here. Since the transcoded temporary
       // file is only used for upload, we can dispose of it after processMedia
       // (reportPromise) and the upload are complete
       filesToDispose.forEach(shouldDisposePath => {
         cleanupPromises.push(
           (async () => {
             const disposeStep = await disposeTempFile(shouldDisposePath);
             steps.push(disposeStep);
           })(),
         );
       });
     }
 
     // if there's a thumbnail we'll temporarily unlink it here
     // instead of in media-utils, will be changed in later diffs
     if (processedMedia.mediaType === 'video') {
       const { uploadThumbnailURI } = processedMedia;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: thumbnailPath } =
             await this.waitForCaptureURIUnload(uploadThumbnailURI);
           steps.push(...clearSteps);
           if (!thumbnailPath) {
             return;
           }
           const disposeStep = await disposeTempFile(thumbnailPath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     if (selection.captureTime || selection.step === 'photo_paste') {
       // If we are uploading a newly captured photo, we dispose of the original
       // file here. Note that we try to save photo captures to the camera roll
       // if we have permission. Even if we fail, this temporary file isn't
       // visible to the user, so there's no point in keeping it around. Since
       // the initial URI is used in rendering paths, we have to wait for it to
       // be replaced with the remote URI before we can dispose. Check out the
       // Multimedia component to see how the URIs get switched out.
       const captureURI = selection.uri;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: capturePath } =
             await this.waitForCaptureURIUnload(captureURI);
           steps.push(...clearSteps);
           if (!capturePath) {
             return;
           }
           const disposeStep = await disposeTempFile(capturePath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     await Promise.all(cleanupPromises);
 
     return await onUploadFinished(mediaMissionResult);
   }
 
   setProgress(
     localMessageID: string,
     localUploadID: string,
     processingStep: MultimediaProcessingStep,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const pendingUploads = prevState.pendingUploads[localMessageID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newOutOfHundred = Math.floor(progressPercent * 100);
       const oldOutOfHundred = Math.floor(pendingUpload.progressPercent * 100);
       if (newOutOfHundred === oldOutOfHundred) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
           processingStep,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: newPendingUploads,
         },
       };
     });
   }
 
   uploadBlob = async (
     url: string,
     cookie: ?string,
     sessionID: ?string,
     input: { +[key: string]: mixed },
     options?: ?CallServerEndpointOptions,
   ): Promise<CallServerEndpointResponse> => {
     invariant(
       cookie &&
         input.multimedia &&
         Array.isArray(input.multimedia) &&
         input.multimedia.length === 1 &&
         input.multimedia[0] &&
         typeof input.multimedia[0] === 'object',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
     const { uri, name, type } = input.multimedia[0];
     invariant(
       typeof uri === 'string' &&
         typeof name === 'string' &&
         typeof type === 'string',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
 
     const parameters: { [key: string]: mixed } = {};
     parameters.cookie = cookie;
     parameters.filename = name;
 
     for (const key in input) {
       if (
         key === 'multimedia' ||
         key === 'cookie' ||
         key === 'sessionID' ||
         key === 'filename'
       ) {
         continue;
       }
       const value = input[key];
       invariant(
         typeof value === 'string',
         'blobUpload calls can only handle string values for non-multimedia keys',
       );
       parameters[key] = value;
     }
 
     let path = uri;
     if (Platform.OS === 'android') {
       const resolvedPath = pathFromURI(uri);
       if (resolvedPath) {
         path = resolvedPath;
       }
     }
     const uploadTask = FileSystem.createUploadTask(
       url,
       path,
       {
         uploadType: FileSystem.FileSystemUploadType.MULTIPART,
         fieldName: 'multimedia',
         headers: {
           Accept: 'application/json',
         },
         parameters,
       },
       uploadProgress => {
         if (options && options.onProgress) {
           const { totalByteSent, totalBytesExpectedToSend } = uploadProgress;
           options.onProgress(totalByteSent / totalBytesExpectedToSend);
         }
       },
     );
     if (options && options.abortHandler) {
       options.abortHandler(() => uploadTask.cancelAsync());
     }
     try {
       const response = await uploadTask.uploadAsync();
       return JSON.parse(response.body);
     } catch (e) {
       throw new Error(
         `Failed to upload blob: ${
           getMessageForException(e) ?? 'unknown error'
         }`,
       );
     }
   };
 
   handleUploadFailure(localMessageID: string, localUploadID: string) {
     this.setState(prevState => {
       const uploads = prevState.pendingUploads[localMessageID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReport(
     ids: { localID: string, localMessageID: string, serverID: ?string },
     mediaMission: MediaMission,
   ) {
     const report: ClientMediaMissionReportCreationRequest = {
       type: reportTypes.MEDIA_MISSION,
       time: Date.now(),
       platformDetails: getConfig().platformDetails,
       mediaMission,
       uploadServerID: ids.serverID,
       uploadLocalID: ids.localID,
       messageLocalID: ids.localMessageID,
       id: generateReportID(),
     };
     this.props.dispatch({
       type: queueReportsActionType,
       payload: {
         reports: [report],
       },
     });
   }
 
   messageHasUploadFailure = (localMessageID: string): boolean => {
     const pendingUploads = this.state.pendingUploads[localMessageID];
     if (!pendingUploads) {
       return false;
     }
     return values(pendingUploads).some(upload => upload.failed);
   };
 
   editInputMessage = (params: EditInputBarMessageParameters) => {
     this.editInputBarCallbacks.forEach(addEditInputBarCallback =>
       addEditInputBarCallback(params),
     );
   };
 
   addEditInputMessageListener = (
     callbackEditInputBar: (params: EditInputBarMessageParameters) => void,
   ) => {
     this.editInputBarCallbacks.push(callbackEditInputBar);
   };
 
   removeEditInputMessageListener = (
     callbackEditInputBar: (params: EditInputBarMessageParameters) => void,
   ) => {
     this.editInputBarCallbacks = this.editInputBarCallbacks.filter(
       candidate => candidate !== callbackEditInputBar,
     );
   };
 
   retryTextMessage = async (
     rawMessageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     await this.sendTextMessage(
       {
         ...rawMessageInfo,
         time: Date.now(),
       },
       threadInfo,
       parentThreadInfo,
     );
   };
 
   retryMultimediaMessage = async (
     rawMessageInfo: RawMultimediaMessageInfo,
     localMessageID: string,
     threadInfo: ThreadInfo,
   ): Promise<void> => {
     const pendingUploads = this.state.pendingUploads[localMessageID] ?? {};
 
     const now = Date.now();
 
     void this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const updateMedia = <T: Media>(media: $ReadOnlyArray<T>): T[] =>
       media.map(singleMedia => {
         invariant(
           singleMedia.type === 'photo' || singleMedia.type === 'video',
           'Retry selection must be unencrypted',
         );
 
         let updatedMedia = singleMedia;
 
         const oldMediaID = updatedMedia.id;
         if (
           // not complete
           isLocalUploadID(oldMediaID) &&
           // not still ongoing
           (!pendingUploads[oldMediaID] || pendingUploads[oldMediaID].failed)
         ) {
           // If we have an incomplete upload that isn't in pendingUploads, that
           // indicates the app has restarted. We'll reassign a new localID to
           // avoid collisions. Note that this isn't necessary for the message ID
           // since the localID reducer prevents collisions there
           const mediaID = pendingUploads[oldMediaID]
             ? oldMediaID
             : getNextLocalUploadID();
           if (updatedMedia.type === 'photo') {
             updatedMedia = {
               type: 'photo',
               ...updatedMedia,
               id: mediaID,
             };
           } else {
             updatedMedia = {
               type: 'video',
               ...updatedMedia,
               id: mediaID,
             };
           }
         }
 
         if (updatedMedia.type === 'video') {
           const oldThumbnailID = updatedMedia.thumbnailID;
           invariant(oldThumbnailID, 'oldThumbnailID not null or undefined');
           if (
             // not complete
             isLocalUploadID(oldThumbnailID) &&
             // not still ongoing
             (!pendingUploads[oldThumbnailID] ||
               pendingUploads[oldThumbnailID].failed)
           ) {
             const thumbnailID = pendingUploads[oldThumbnailID]
               ? oldThumbnailID
               : getNextLocalUploadID();
             updatedMedia = {
               ...updatedMedia,
               thumbnailID,
             };
           }
         }
 
         if (updatedMedia === singleMedia) {
           return singleMedia;
         }
 
         const oldSelection = updatedMedia.localMediaSelection;
         invariant(
           oldSelection,
           'localMediaSelection should be set on locally created Media',
         );
         const retries = oldSelection.retries ? oldSelection.retries + 1 : 1;
 
         // We switch for Flow
         let selection;
         if (oldSelection.step === 'photo_capture') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_library') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_paste') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else {
           selection = { ...oldSelection, sendTime: now, retries };
         }
 
         if (updatedMedia.type === 'photo') {
           return {
             type: 'photo',
             ...updatedMedia,
             localMediaSelection: selection,
           };
         }
         return {
           type: 'video',
           ...updatedMedia,
           localMediaSelection: selection,
         };
       });
 
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawMediaMessageInfo);
     } else if (rawMessageInfo.type === messageTypes.IMAGES) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawImagesMessageInfo);
     } else {
       invariant(false, `rawMessageInfo ${localMessageID} should be multimedia`);
     }
 
     const incompleteMedia: Media[] = [];
     for (const singleMedia of newRawMessageInfo.media) {
       if (isLocalUploadID(singleMedia.id)) {
         incompleteMedia.push(singleMedia);
       }
     }
     if (incompleteMedia.length === 0) {
       void this.dispatchMultimediaMessageAction(newRawMessageInfo);
       this.setState(prevState => ({
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {},
         },
       }));
       return;
     }
 
     const retryMedia = incompleteMedia.filter(
       ({ id }) => !pendingUploads[id] || pendingUploads[id].failed,
     );
     if (retryMedia.length === 0) {
       // All media are already in the process of being uploaded
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     // We clear out the failed status on individual media here,
     // which makes the UI show pending status instead of error messages
     for (const singleMedia of retryMedia) {
       pendingUploads[singleMedia.id] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (singleMedia.type === 'video') {
         const { thumbnailID } = singleMedia;
         invariant(thumbnailID, 'thumbnailID not null or undefined');
         pendingUploads[thumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
     this.setState(prevState => ({
       pendingUploads: {
         ...prevState.pendingUploads,
         [localMessageID]: pendingUploads,
       },
     }));
 
     const uploadFileInputs = retryMedia.map(singleMedia => {
       invariant(
         singleMedia.localMediaSelection,
         'localMediaSelection should be set on locally created Media',
       );
 
       let ids;
       if (singleMedia.type === 'photo') {
         ids = { type: 'photo', localMediaID: singleMedia.id };
       } else {
         invariant(
           singleMedia.thumbnailID,
           'singleMedia.thumbnailID should be set for videos',
         );
         ids = {
           type: 'video',
           localMediaID: singleMedia.id,
           localThumbnailID: singleMedia.thumbnailID,
         };
       }
 
       return {
         selection: singleMedia.localMediaSelection,
         ids,
       };
     });
 
     await this.uploadFiles(localMessageID, uploadFileInputs, threadInfo);
   };
 
   retryMessage = async (
     localMessageID: string,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
 
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
 
     if (rawMessageInfo.type === messageTypes.TEXT) {
       await this.retryTextMessage(rawMessageInfo, threadInfo, parentThreadInfo);
     } else if (
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
     ) {
       await this.retryMultimediaMessage(
         rawMessageInfo,
         localMessageID,
         threadInfo,
       );
     }
   };
 
   registerSendCallback = (callback: () => void) => {
     this.sendCallbacks.push(callback);
   };
 
   unregisterSendCallback = (callback: () => void) => {
     this.sendCallbacks = this.sendCallbacks.filter(
       candidate => candidate !== callback,
     );
   };
 
   reportURIDisplayed = (uri: string, loaded: boolean) => {
     const prevActiveURI = this.activeURIs.get(uri);
     const curCount = prevActiveURI && prevActiveURI.count;
     const prevCount = curCount ? curCount : 0;
     const count = loaded ? prevCount + 1 : prevCount - 1;
     const prevOnClear = prevActiveURI && prevActiveURI.onClear;
     const onClear = prevOnClear ? prevOnClear : [];
     const activeURI = { count, onClear };
     if (count) {
       this.activeURIs.set(uri, activeURI);
       return;
     }
     this.activeURIs.delete(uri);
     for (const callback of onClear) {
       callback();
     }
   };
 
   waitForCaptureURIUnload(uri: string): Promise<{
     +steps: $ReadOnlyArray<MediaMissionStep>,
     +result: ?string,
   }> {
     const start = Date.now();
     const path = pathFromURI(uri);
     if (!path) {
       return Promise.resolve({
         result: null,
         steps: [
           {
             step: 'wait_for_capture_uri_unload',
             success: false,
             time: Date.now() - start,
             uri,
           },
         ],
       });
     }
 
     const getResult = () => ({
       result: path,
       steps: [
         {
           step: 'wait_for_capture_uri_unload',
           success: true,
           time: Date.now() - start,
           uri,
         },
       ],
     });
 
     const activeURI = this.activeURIs.get(uri);
     if (!activeURI) {
       return Promise.resolve(getResult());
     }
 
     return new Promise(resolve => {
       const finish = () => resolve(getResult());
       const newActiveURI = {
         ...activeURI,
         onClear: [...activeURI.onClear, finish],
       };
       this.activeURIs.set(uri, newActiveURI);
     });
   }
 
   setPendingThreadUpdateHandler = (
     threadID: string,
     pendingThreadUpdateHandler: ?(ThreadInfo) => mixed,
   ) => {
     if (!pendingThreadUpdateHandler) {
       this.pendingThreadUpdateHandlers.delete(threadID);
     } else {
       this.pendingThreadUpdateHandlers.set(
         threadID,
         pendingThreadUpdateHandler,
       );
     }
   };
 
   render(): React.Node {
     const inputState = this.inputStateSelector(this.state);
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const mediaCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendMultimediaMessageActionTypes,
 );
 const textCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendTextMessageActionTypes,
 );
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(
     props: BaseProps,
   ) {
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const nextLocalID = useNextLocalID();
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const ongoingMessageCreation = useSelector(
       state =>
         combineLoadingStatuses(
           mediaCreationLoadingStatusSelector(state),
           textCreationLoadingStatusSelector(state),
         ) === 'loading',
     );
     const hasWiFi = useSelector(state => state.connectivity.hasWiFi);
     const calendarQuery = useCalendarQuery();
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callBlobServiceUpload = useBlobServiceUpload();
     const callSendMultimediaMessage = useSendMultimediaMessage();
     const callSendTextMessage = useSendTextMessage();
     const callNewThread = useNewThread();
     const dispatchActionPromise = useDispatchActionPromise();
     const dispatch = useDispatch();
     const mediaReportsEnabled = useIsReportEnabled('mediaReports');
     const staffCanSee = useStaffCanSee();
     const textMessageCreationSideEffectsFunc =
       useMessageCreationSideEffectsFunc<RawTextMessageInfo>(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         viewerID={viewerID}
         nextLocalID={nextLocalID}
         messageStoreMessages={messageStoreMessages}
         ongoingMessageCreation={ongoingMessageCreation}
         hasWiFi={hasWiFi}
         mediaReportsEnabled={mediaReportsEnabled}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         blobServiceUpload={callBlobServiceUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatchActionPromise={dispatchActionPromise}
         dispatch={dispatch}
         staffCanSee={staffCanSee}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js
index 2b9ad2593..a59f05dde 100644
--- a/native/navigation/community-drawer-content.react.js
+++ b/native/navigation/community-drawer-content.react.js
@@ -1,234 +1,234 @@
 // @flow
 
 import { useDrawerStatus } from '@react-navigation/drawer';
 import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
 import { FlatList, Platform, View, Text, TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
 import {
   fetchPrimaryInviteLinkActionTypes,
   useFetchPrimaryInviteLinks,
 } from 'lib/actions/link-actions.js';
 import {
   childThreadInfos,
   communityThreadSelector,
 } from 'lib/selectors/thread-selectors.js';
 import { threadTypeIsCommunityRoot } from 'lib/types/thread-types-enum.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import {
   createRecursiveDrawerItemsData,
   useAppendCommunitySuffix,
 } from 'lib/utils/drawer-utils.react.js';
 import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import CommunityDrawerItem from './community-drawer-item.react.js';
 import { CommunityCreationRouteName } from './route-names.js';
 import { useNavigateToThread } from '../chat/message-list-types.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { useStyles } from '../themes/colors.js';
 import {
   flattenDrawerItemsData,
   filterOutThreadAndDescendantIDs,
   type CommunityDrawerItemDataFlattened,
 } from '../utils/drawer-utils.react.js';
 
 const maxDepth = 2;
 const safeAreaEdges: $ReadOnlyArray<string> = Platform.select({
   ios: ['top'],
   default: ['top', 'bottom'],
 });
 
 function CommunityDrawerContent(): React.Node {
   const communities = useSelector(communityThreadSelector);
   const resolvedCommunities = useResolvedThreadInfos(communities);
   const communitiesSuffixed = useAppendCommunitySuffix(resolvedCommunities);
   const styles = useStyles(unboundStyles);
 
   const callFetchPrimaryLinks = useFetchPrimaryInviteLinks();
   const dispatchActionPromise = useDispatchActionPromise();
   const drawerStatus = useDrawerStatus();
   React.useEffect(() => {
     if (drawerStatus !== 'open') {
       return;
     }
     void dispatchActionPromise(
       fetchPrimaryInviteLinkActionTypes,
       callFetchPrimaryLinks(),
     );
   }, [callFetchPrimaryLinks, dispatchActionPromise, drawerStatus]);
 
   const [expanded, setExpanded] = React.useState<Set<string>>(() => {
     if (communitiesSuffixed.length === 1) {
       return new Set([communitiesSuffixed[0].id]);
     }
     return new Set();
   });
 
   const setOpenCommunityOrClose = React.useCallback(
     (id: string) =>
       expanded.has(id) ? setExpanded(new Set()) : setExpanded(new Set([id])),
     [expanded],
   );
 
   const labelStylesObj = useStyles(labelUnboundStyles);
   const labelStyles = React.useMemo(
     () => [
       labelStylesObj.level0Label,
       labelStylesObj.level1Label,
       labelStylesObj.level2Label,
     ],
     [labelStylesObj],
   );
   const childThreadInfosMap = useSelector(childThreadInfos);
 
   const drawerItemsData = React.useMemo(
     () =>
       createRecursiveDrawerItemsData(
         childThreadInfosMap,
         communitiesSuffixed,
         labelStyles,
         maxDepth,
       ),
     [childThreadInfosMap, communitiesSuffixed, labelStyles],
   );
 
   const toggleExpanded = React.useCallback(
     (id: string) =>
       setExpanded(expandedState => {
         if (expanded.has(id)) {
           return new Set(
             filterOutThreadAndDescendantIDs(
               [...expandedState.values()],
               drawerItemsData,
               id,
             ),
           );
         }
         return new Set([...expanded.values(), id]);
       }),
     [drawerItemsData, expanded],
   );
 
   const navigateToThread = useNavigateToThread();
 
   const renderItem = React.useCallback(
     ({
       item,
     }: {
       +item: CommunityDrawerItemDataFlattened,
       ...
     }): React.Node => {
       const isCommunity = threadTypeIsCommunityRoot(item.threadInfo.type);
       return (
         <CommunityDrawerItem
           key={item.threadInfo.id}
           itemData={item}
           navigateToThread={navigateToThread}
           isExpanded={expanded.has(item.threadInfo.id)}
           toggleExpanded={
             isCommunity ? setOpenCommunityOrClose : toggleExpanded
           }
         />
       );
     },
     [expanded, navigateToThread, setOpenCommunityOrClose, toggleExpanded],
   );
 
   const { navigate } = useNavigation();
   const onPressCommunityCreation = React.useCallback(() => {
     navigate(CommunityCreationRouteName);
   }, [navigate]);
 
   const communityCreationButton = (
     <TouchableOpacity onPress={onPressCommunityCreation} activeOpacity={0.4}>
       <View style={styles.communityCreationContainer}>
         <View style={styles.communityCreationIconContainer}>
           <SWMansionIcon
             name="plus"
             size={22}
             style={styles.communityCreationIcon}
           />
         </View>
         <Text style={styles.communityCreationText}>Create community</Text>
       </View>
     </TouchableOpacity>
   );
 
   const flattenedDrawerItemsData = React.useMemo(
     () => flattenDrawerItemsData(drawerItemsData, [...expanded.values()]),
     [drawerItemsData, expanded],
   );
 
   return (
     <SafeAreaView style={styles.drawerContent} edges={safeAreaEdges}>
       <FlatList
         data={flattenedDrawerItemsData}
         renderItem={renderItem}
         initialNumToRender={30}
       />
       {communityCreationButton}
     </SafeAreaView>
   );
 }
 
 const unboundStyles = {
   drawerContent: {
     flex: 1,
     paddingRight: 8,
     paddingTop: 8,
     paddingBottom: 8,
   },
   communityCreationContainer: {
     flexDirection: 'row',
     padding: 24,
     alignItems: 'center',
     borderTopWidth: 1,
     borderColor: 'panelSeparator',
   },
   communityCreationText: {
     color: 'panelForegroundLabel',
     fontSize: 16,
     lineHeight: 24,
     fontWeight: '500',
   },
   communityCreationIconContainer: {
     height: 28,
     width: 28,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 16,
     marginRight: 12,
     backgroundColor: 'panelSecondaryForeground',
   },
   communityCreationIcon: {
     color: 'panelForegroundLabel',
   },
 };
 const labelUnboundStyles = {
   level0Label: {
     color: 'drawerItemLabelLevel0',
     fontSize: 16,
     lineHeight: 24,
     fontWeight: '500',
   },
   level1Label: {
     color: 'drawerItemLabelLevel1',
     fontSize: 14,
     lineHeight: 22,
     fontWeight: '500',
   },
   level2Label: {
     color: 'drawerItemLabelLevel2',
     fontSize: 14,
     lineHeight: 22,
     fontWeight: '400',
   },
 };
 
 const MemoizedCommunityDrawerContent: React.ComponentType<{}> = React.memo(
   CommunityDrawerContent,
 );
 
 export default MemoizedCommunityDrawerContent;
diff --git a/native/navigation/deep-links-context-provider.react.js b/native/navigation/deep-links-context-provider.react.js
index 2e3ac806a..7d85b7943 100644
--- a/native/navigation/deep-links-context-provider.react.js
+++ b/native/navigation/deep-links-context-provider.react.js
@@ -1,142 +1,140 @@
 // @flow
 
 import { useNavigation } from '@react-navigation/native';
 import * as Application from 'expo-application';
 import * as React from 'react';
 import { Linking, Platform } from 'react-native';
 
 import {
   verifyInviteLink,
   verifyInviteLinkActionTypes,
 } from 'lib/actions/link-actions.js';
 import {
   parseInstallReferrerFromInviteLinkURL,
   parseDataFromDeepLink,
   type ParsedDeepLinkData,
 } from 'lib/facts/links.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import type { SetState } from 'lib/types/hook-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import {
   InviteLinkModalRouteName,
   SecondaryDeviceQRCodeScannerRouteName,
 } from './route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useOnFirstLaunchEffect } from '../utils/hooks.js';
 
 type DeepLinksContextType = {
   +setCurrentLinkUrl: SetState<?string>,
 };
 
 const defaultContext = {
   setCurrentLinkUrl: () => {},
 };
 
 const DeepLinksContext: React.Context<DeepLinksContextType> =
   React.createContext<DeepLinksContextType>(defaultContext);
 
 type Props = {
   +children: React.Node,
 };
 function DeepLinksContextProvider(props: Props): React.Node {
   const { children } = props;
   const [currentLink, setCurrentLink] = React.useState<?string>(null);
 
   React.useEffect(() => {
     // This listener listens for an event where a user clicked a link when the
     // app was running
     const subscription = Linking.addEventListener('url', ({ url }) =>
       setCurrentLink(url),
     );
     // We're also checking if the app was opened by using a link.
     // In that case the listener won't be called and we're instead checking
     // if the initial URL is set.
     void (async () => {
       const initialURL = await Linking.getInitialURL();
       if (initialURL) {
         setCurrentLink(initialURL);
       }
     })();
 
     return () => {
       subscription.remove();
     };
   }, []);
 
   const checkInstallReferrer = React.useCallback(async () => {
     if (Platform.OS !== 'android') {
       return;
     }
     const installReferrer = await Application.getInstallReferrerAsync();
     if (!installReferrer) {
       return;
     }
     const linkSecret = parseInstallReferrerFromInviteLinkURL(installReferrer);
     if (linkSecret) {
       setCurrentLink(linkSecret);
     }
   }, []);
   useOnFirstLaunchEffect('ANDROID_REFERRER', checkInstallReferrer);
 
   const loggedIn = useSelector(isLoggedIn);
   const dispatchActionPromise = useDispatchActionPromise();
   const validateLink = useServerCall(verifyInviteLink);
   const navigation = useNavigation();
   React.useEffect(() => {
     void (async () => {
       if (!loggedIn || !currentLink) {
         return;
       }
       // We're setting this to null so that we ensure that each link click
       // results in at most one validation and navigation.
       setCurrentLink(null);
 
       const parsedData: ParsedDeepLinkData = parseDataFromDeepLink(currentLink);
       if (!parsedData) {
         return;
       }
 
       if (parsedData.type === 'invite-link') {
         const { secret } = parsedData.data;
         const validateLinkPromise = validateLink({ secret });
         void dispatchActionPromise(
           verifyInviteLinkActionTypes,
           validateLinkPromise,
         );
         const result = await validateLinkPromise;
         if (result.status === 'already_joined') {
           return;
         }
 
         navigation.navigate<'InviteLinkModal'>({
           name: InviteLinkModalRouteName,
           params: {
             invitationDetails: result,
             secret,
           },
         });
       } else if (parsedData.type === 'qr-code') {
         navigation.navigate(SecondaryDeviceQRCodeScannerRouteName);
       }
     })();
   }, [currentLink, dispatchActionPromise, loggedIn, navigation, validateLink]);
 
   const contextValue = React.useMemo(
     () => ({
       setCurrentLinkUrl: setCurrentLink,
     }),
     [],
   );
 
   return (
     <DeepLinksContext.Provider value={contextValue}>
       {children}
     </DeepLinksContext.Provider>
   );
 }
 
 export { DeepLinksContext, DeepLinksContextProvider };
diff --git a/native/navigation/invite-link-modal.react.js b/native/navigation/invite-link-modal.react.js
index 0b37397d7..96e5a4d9a 100644
--- a/native/navigation/invite-link-modal.react.js
+++ b/native/navigation/invite-link-modal.react.js
@@ -1,254 +1,254 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, ActivityIndicator } from 'react-native';
 
 import {
   useJoinThread,
   joinThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { InviteLinkVerificationResponse } from 'lib/types/link-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { nonThreadCalendarQuery } from './nav-selectors.js';
 import { NavContext } from './navigation-context.js';
 import type { RootNavigationProp } from './root-navigator.react.js';
 import type { NavigationRoute } from './route-names.js';
 import Button from '../components/button.react.js';
 import Modal from '../components/modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 
 export type InviteLinkModalParams = {
   +invitationDetails: InviteLinkVerificationResponse,
   +secret: string,
 };
 
 type Props = {
   +navigation: RootNavigationProp<'InviteLinkModal'>,
   +route: NavigationRoute<'InviteLinkModal'>,
 };
 
 function InviteLinkModal(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const { invitationDetails, secret } = props.route.params;
 
   React.useEffect(() => {
     if (invitationDetails.status === 'already_joined') {
       props.navigation.goBack();
     }
   }, [invitationDetails.status, props.navigation]);
 
   const header = React.useMemo(() => {
     if (invitationDetails.status === 'valid') {
       return (
         <>
           <Text style={styles.invitation}>You have been invited to join</Text>
           <Text style={styles.communityName}>
             {invitationDetails.community.name}
           </Text>
         </>
       );
     }
     return (
       <>
         <Text style={styles.invalidInviteTitle}>Invite invalid</Text>
         <Text style={styles.invalidInviteExplanation}>
           This invite link may be expired. Please try again with another invite
           link.
         </Text>
       </>
     );
   }, [
     invitationDetails,
     styles.communityName,
     styles.invalidInviteExplanation,
     styles.invalidInviteTitle,
     styles.invitation,
   ]);
 
   const callJoinThread = useJoinThread();
   const navContext = React.useContext(NavContext);
   const calendarQuery = useSelector(state =>
     nonThreadCalendarQuery({
       redux: state,
       navContext,
     }),
   );
   const communityID = invitationDetails.community?.id;
   const createJoinCommunityAction = React.useCallback(async () => {
     invariant(
       communityID,
       'CommunityID should be present while calling this function',
     );
     const query = calendarQuery();
     try {
       const result = await callJoinThread({
         threadID: communityID,
         calendarQuery: {
           startDate: query.startDate,
           endDate: query.endDate,
           filters: [
             ...query.filters,
             { type: 'threads', threadIDs: [communityID] },
           ],
         },
         inviteLinkSecret: secret,
       });
       props.navigation.goBack();
       return result;
     } catch (e) {
       props.navigation.setParams({
         invitationDetails: {
           status: 'invalid',
         },
         secret,
       });
       throw e;
     }
   }, [calendarQuery, callJoinThread, communityID, props.navigation, secret]);
   const dispatchActionPromise = useDispatchActionPromise();
   const joinCommunity = React.useCallback(() => {
     void dispatchActionPromise(
       joinThreadActionTypes,
       createJoinCommunityAction(),
     );
   }, [createJoinCommunityAction, dispatchActionPromise]);
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
 
   const buttons = React.useMemo(() => {
     if (invitationDetails.status === 'valid') {
       const joinButtonContent =
         joinThreadLoadingStatus === 'loading' ? (
           <ActivityIndicator
             size="small"
             color="white"
             style={styles.activityIndicatorStyle}
           />
         ) : (
           <Text style={styles.buttonText}>Accept invite</Text>
         );
       return (
         <>
           <Button
             style={[styles.button, styles.buttonPrimary, styles.gap]}
             onPress={joinCommunity}
             disabled={joinThreadLoadingStatus === 'loading'}
           >
             {joinButtonContent}
           </Button>
           <Button
             style={[styles.button, styles.buttonSecondary]}
             onPress={props.navigation.goBack}
           >
             <Text style={styles.buttonText}>Cancel</Text>
           </Button>
         </>
       );
     }
     return (
       <Button
         style={[styles.button, styles.buttonPrimary]}
         onPress={props.navigation.goBack}
       >
         <Text style={styles.buttonText}>Return to Comm</Text>
       </Button>
     );
   }, [
     invitationDetails.status,
     joinCommunity,
     joinThreadLoadingStatus,
     props.navigation.goBack,
     styles.activityIndicatorStyle,
     styles.button,
     styles.buttonPrimary,
     styles.buttonSecondary,
     styles.buttonText,
     styles.gap,
   ]);
 
   return (
     <Modal modalStyle={styles.modal}>
       <View>{header}</View>
       <View style={styles.separator} />
       <View>{buttons}</View>
     </Modal>
   );
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 
 const unboundStyles = {
   modal: {
     backgroundColor: 'modalForeground',
     paddingVertical: 24,
     paddingHorizontal: 16,
     flex: 0,
   },
   invitation: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 14,
     fontWeight: '400',
     lineHeight: 22,
     marginBottom: 24,
   },
   communityName: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 18,
     fontWeight: '500',
     lineHeight: 24,
   },
   invalidInviteTitle: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 22,
     fontWeight: '500',
     lineHeight: 28,
     marginBottom: 24,
   },
   invalidInviteExplanation: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 14,
     fontWeight: '400',
     lineHeight: 22,
   },
   separator: {
     height: 1,
     backgroundColor: 'modalSeparator',
     marginVertical: 24,
   },
   gap: {
     marginBottom: 16,
   },
   button: {
     borderRadius: 8,
     paddingVertical: 12,
     paddingHorizontal: 24,
   },
   buttonPrimary: {
     backgroundColor: 'purpleButton',
   },
   buttonSecondary: {
     borderColor: 'secondaryButtonBorder',
     borderWidth: 1,
   },
   buttonText: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 16,
     fontWeight: '500',
     lineHeight: 24,
   },
   activityIndicatorStyle: {
     paddingVertical: 2,
   },
 };
 
 export default InviteLinkModal;
diff --git a/native/profile/default-notifications-preferences.react.js b/native/profile/default-notifications-preferences.react.js
index c6cd949fd..e8b5271a3 100644
--- a/native/profile/default-notifications-preferences.react.js
+++ b/native/profile/default-notifications-preferences.react.js
@@ -1,213 +1,213 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, Platform } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import {
   useSetUserSettings,
   setUserSettingsActionTypes,
 } from 'lib/actions/user-actions.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import {
   type UpdateUserSettingsRequest,
   type NotificationTypes,
   type DefaultNotificationPayload,
   notificationTypes,
   userSettingsTypes,
 } from 'lib/types/account-types.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import Action from '../components/action-row.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 
 const CheckIcon = () => (
   <SWMansionIcon
     name="check"
     size={20}
     color="#888888"
     style={unboundStyles.icon}
   />
 );
 
 type ProfileRowProps = {
   +content: string,
   +onPress: () => void,
   +danger?: boolean,
   +selected?: boolean,
 };
 
 function NotificationRow(props: ProfileRowProps): React.Node {
   const { content, onPress, danger, selected } = props;
   return (
     <Action.Row onPress={onPress}>
       <Action.Text danger={danger} content={content} />
       {selected ? <CheckIcon /> : null}
     </Action.Row>
   );
 }
 
 const unboundStyles = {
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     marginVertical: 2,
   },
   icon: {
     lineHeight: Platform.OS === 'ios' ? 18 : 20,
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
 };
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'DefaultNotifications'>,
   +route: NavigationRoute<'DefaultNotifications'>,
 };
 
 type Props = {
   ...BaseProps,
   +styles: $ReadOnly<typeof unboundStyles>,
   +dispatchActionPromise: DispatchActionPromise,
   +changeNotificationSettings: (
     notificationSettingsRequest: UpdateUserSettingsRequest,
   ) => Promise<void>,
   +selectedDefaultNotification: NotificationTypes,
 };
 
 class DefaultNotificationsPreferences extends React.PureComponent<Props> {
   async updatedDefaultNotifications(
     data: NotificationTypes,
   ): Promise<DefaultNotificationPayload> {
     const { changeNotificationSettings } = this.props;
 
     try {
       await changeNotificationSettings({
         name: userSettingsTypes.DEFAULT_NOTIFICATIONS,
         data,
       });
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: () => {} }],
         { cancelable: false },
       );
     }
 
     return {
       [userSettingsTypes.DEFAULT_NOTIFICATIONS]: data,
     };
   }
 
   selectNotificationSetting = (data: NotificationTypes) => {
     const { dispatchActionPromise } = this.props;
 
     void dispatchActionPromise(
       setUserSettingsActionTypes,
       this.updatedDefaultNotifications(data),
     );
   };
 
   selectAllNotifications = () => {
     this.selectNotificationSetting(notificationTypes.FOCUSED);
   };
 
   selectBackgroundNotifications = () => {
     this.selectNotificationSetting(notificationTypes.BACKGROUND);
   };
 
   selectNoneNotifications = () => {
     this.selectNotificationSetting(notificationTypes.BADGE_ONLY);
   };
 
   render(): React.Node {
     const { styles, selectedDefaultNotification } = this.props;
     return (
       <ScrollView
         contentContainerStyle={styles.scrollViewContentContainer}
         style={styles.scrollView}
       >
         <Text style={styles.header}>NOTIFICATIONS</Text>
         <View style={styles.section}>
           <NotificationRow
             content="Focused"
             onPress={this.selectAllNotifications}
             selected={notificationTypes.FOCUSED === selectedDefaultNotification}
           />
           <NotificationRow
             content="Focused (badge only)"
             onPress={this.selectBackgroundNotifications}
             selected={
               notificationTypes.BADGE_ONLY === selectedDefaultNotification
             }
           />
           <NotificationRow
             content="Background"
             onPress={this.selectNoneNotifications}
             selected={
               notificationTypes.BACKGROUND === selectedDefaultNotification
             }
           />
         </View>
       </ScrollView>
     );
   }
 }
 
 registerFetchKey(setUserSettingsActionTypes);
 const ConnectedDefaultNotificationPreferences: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedDefaultNotificationPreferences(
     props: BaseProps,
   ) {
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const changeNotificationSettings = useSetUserSettings();
     const defaultNotification = userSettingsTypes.DEFAULT_NOTIFICATIONS;
 
     const selectedDefaultNotification = useSelector<NotificationTypes>(
       ({ currentUserInfo }) => {
         if (
           currentUserInfo?.settings &&
           currentUserInfo?.settings[defaultNotification]
         ) {
           return currentUserInfo?.settings[defaultNotification];
         }
         return notificationTypes.FOCUSED;
       },
     );
 
     return (
       <DefaultNotificationsPreferences
         {...props}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         changeNotificationSettings={changeNotificationSettings}
         selectedDefaultNotification={selectedDefaultNotification}
       />
     );
   });
 
 export default ConnectedDefaultNotificationPreferences;
diff --git a/native/profile/delete-account.react.js b/native/profile/delete-account.react.js
index ca782672d..d84f6db47 100644
--- a/native/profile/delete-account.react.js
+++ b/native/profile/delete-account.react.js
@@ -1,173 +1,173 @@
 // @flow
 
 import * as React from 'react';
 import { Text, View, ActivityIndicator } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import {
   deleteIdentityAccountActionTypes,
   deleteKeyserverAccountActionTypes,
   useDeleteIdentityAccount,
   useDeleteKeyserverAccount,
 } from 'lib/actions/user-actions.js';
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import { deleteNativeCredentialsFor } from '../account/native-credentials.js';
 import Button from '../components/button.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 
 const keyserverLoadingStatusSelector = createLoadingStatusSelector(
   deleteKeyserverAccountActionTypes,
 );
 const identityLoadingStatusSelector = createLoadingStatusSelector(
   deleteIdentityAccountActionTypes,
 );
 
 type Props = {
   +navigation: ProfileNavigationProp<'DeleteAccount'>,
   +route: NavigationRoute<'DeleteAccount'>,
 };
 const DeleteAccount: React.ComponentType<Props> = React.memo<Props>(
   function DeleteAccount() {
     const keyserverLoadingStatus = useSelector(keyserverLoadingStatusSelector);
     const identityLoadingStatus = useSelector(identityLoadingStatusSelector);
     const combinedLoadingStatuses = combineLoadingStatuses(
       keyserverLoadingStatus,
       identityLoadingStatus,
     );
     const preRequestUserState = useSelector(preRequestUserStateSelector);
 
     const styles = useStyles(unboundStyles);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callDeleteKeyserverAccount = useDeleteKeyserverAccount();
     const callDeleteIdentityAccount = useDeleteIdentityAccount();
 
     const isButtonDisabled = combinedLoadingStatuses === 'loading';
 
     const buttonContent = isButtonDisabled ? (
       <ActivityIndicator size="small" color="white" />
     ) : (
       <Text style={styles.saveText}>Delete account</Text>
     );
 
     const noWayToReverseThisStyles = React.useMemo(
       () => [styles.warningText, styles.lastWarningText],
       [styles.warningText, styles.lastWarningText],
     );
 
     const deleteKeyserverAction = React.useCallback(async () => {
       try {
         await deleteNativeCredentialsFor();
         return await callDeleteKeyserverAccount(preRequestUserState);
       } catch (e) {
         Alert.alert(
           'Unknown error deleting keyserver account',
           'Uhh... try again?',
           [{ text: 'OK' }],
           {
             cancelable: false,
           },
         );
         throw e;
       }
     }, [callDeleteKeyserverAccount, preRequestUserState]);
 
     const deleteIdentityAction = React.useCallback(async () => {
       try {
         return await callDeleteIdentityAccount();
       } catch (e) {
         Alert.alert(
           'Unknown error deleting account',
           'Uhh... try again?',
           [{ text: 'OK' }],
           {
             cancelable: false,
           },
         );
         throw e;
       }
     }, [callDeleteIdentityAccount]);
 
     const onDelete = React.useCallback(() => {
       void dispatchActionPromise(
         deleteKeyserverAccountActionTypes,
         deleteKeyserverAction(),
       );
       if (usingCommServicesAccessToken) {
         void dispatchActionPromise(
           deleteIdentityAccountActionTypes,
           deleteIdentityAction(),
         );
       }
     }, [dispatchActionPromise, deleteKeyserverAction, deleteIdentityAction]);
 
     return (
       <ScrollView
         contentContainerStyle={styles.scrollViewContentContainer}
         style={styles.scrollView}
       >
         <View>
           <Text style={styles.warningText}>
             Your account will be permanently deleted.
           </Text>
         </View>
         <View>
           <Text style={noWayToReverseThisStyles}>
             There is no way to reverse this.
           </Text>
         </View>
         <Button
           onPress={onDelete}
           style={styles.deleteButton}
           disabled={isButtonDisabled}
         >
           {buttonContent}
         </Button>
       </ScrollView>
     );
   },
 );
 
 const unboundStyles = {
   deleteButton: {
     backgroundColor: 'vibrantRedButton',
     borderRadius: 5,
     flex: 1,
     marginHorizontal: 24,
     marginVertical: 12,
     padding: 12,
   },
   lastWarningText: {
     marginBottom: 24,
   },
   saveText: {
     color: 'white',
     fontSize: 18,
     textAlign: 'center',
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   warningText: {
     color: 'panelForegroundLabel',
     fontSize: 16,
     marginHorizontal: 24,
     textAlign: 'center',
   },
 };
 
 export default DeleteAccount;
diff --git a/native/profile/edit-password.react.js b/native/profile/edit-password.react.js
index 89069623c..41e162cb8 100644
--- a/native/profile/edit-password.react.js
+++ b/native/profile/edit-password.react.js
@@ -1,371 +1,371 @@
 // @flow
 
 import { CommonActions } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   View,
   TextInput as BaseTextInput,
   ActivityIndicator,
 } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import {
   changeUserPasswordActionTypes,
   changeUserPassword,
 } from 'lib/actions/user-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { PasswordUpdate } from 'lib/types/user-types.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import {
-  useServerCall,
   useDispatchActionPromise,
   type DispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+} from 'lib/utils/redux-promise-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import { setNativeCredentials } from '../account/native-credentials.js';
 import Button from '../components/button.react.js';
 import TextInput from '../components/text-input.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 
 const unboundStyles = {
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   hr: {
     backgroundColor: 'panelForegroundBorder',
     height: 1,
     marginHorizontal: 15,
   },
   input: {
     color: 'panelForegroundLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 9,
   },
   saveButton: {
     backgroundColor: 'vibrantGreenButton',
     borderRadius: 5,
     flex: 1,
     marginHorizontal: 24,
     marginVertical: 12,
     padding: 12,
   },
   saveText: {
     color: 'white',
     fontSize: 18,
     textAlign: 'center',
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     paddingVertical: 3,
   },
 };
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'EditPassword'>,
   +route: NavigationRoute<'EditPassword'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +username: ?string,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise<void>,
 };
 type State = {
   +currentPassword: string,
   +newPassword: string,
   +confirmPassword: string,
 };
 class EditPassword extends React.PureComponent<Props, State> {
   state: State = {
     currentPassword: '',
     newPassword: '',
     confirmPassword: '',
   };
   mounted = false;
   currentPasswordInput: ?React.ElementRef<typeof BaseTextInput>;
   newPasswordInput: ?React.ElementRef<typeof BaseTextInput>;
   confirmPasswordInput: ?React.ElementRef<typeof BaseTextInput>;
 
   componentDidMount() {
     this.mounted = true;
   }
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   render(): React.Node {
     const buttonContent =
       this.props.loadingStatus === 'loading' ? (
         <ActivityIndicator size="small" color="white" />
       ) : (
         <Text style={this.props.styles.saveText}>Save</Text>
       );
     const { panelForegroundTertiaryLabel } = this.props.colors;
     return (
       <ScrollView
         contentContainerStyle={this.props.styles.scrollViewContentContainer}
         style={this.props.styles.scrollView}
       >
         <Text style={this.props.styles.header}>CURRENT PASSWORD</Text>
         <View style={this.props.styles.section}>
           <View style={this.props.styles.row}>
             <TextInput
               style={this.props.styles.input}
               value={this.state.currentPassword}
               onChangeText={this.onChangeCurrentPassword}
               placeholder="Current password"
               placeholderTextColor={panelForegroundTertiaryLabel}
               secureTextEntry={true}
               textContentType="password"
               autoComplete="password"
               autoFocus={true}
               returnKeyType="next"
               onSubmitEditing={this.focusNewPassword}
               ref={this.currentPasswordRef}
             />
           </View>
         </View>
         <Text style={this.props.styles.header}>NEW PASSWORD</Text>
         <View style={this.props.styles.section}>
           <View style={this.props.styles.row}>
             <TextInput
               style={this.props.styles.input}
               value={this.state.newPassword}
               onChangeText={this.onChangeNewPassword}
               placeholder="New password"
               placeholderTextColor={panelForegroundTertiaryLabel}
               secureTextEntry={true}
               textContentType="newPassword"
               autoComplete="password-new"
               returnKeyType="next"
               onSubmitEditing={this.focusConfirmPassword}
               ref={this.newPasswordRef}
             />
           </View>
           <View style={this.props.styles.hr} />
           <View style={this.props.styles.row}>
             <TextInput
               style={this.props.styles.input}
               value={this.state.confirmPassword}
               onChangeText={this.onChangeConfirmPassword}
               placeholder="Confirm password"
               placeholderTextColor={panelForegroundTertiaryLabel}
               secureTextEntry={true}
               textContentType="newPassword"
               returnKeyType="go"
               onSubmitEditing={this.submitPassword}
               ref={this.confirmPasswordRef}
             />
           </View>
         </View>
         <Button
           onPress={this.submitPassword}
           style={this.props.styles.saveButton}
         >
           {buttonContent}
         </Button>
       </ScrollView>
     );
   }
 
   onChangeCurrentPassword = (currentPassword: string) => {
     this.setState({ currentPassword });
   };
 
   currentPasswordRef = (
     currentPasswordInput: ?React.ElementRef<typeof BaseTextInput>,
   ) => {
     this.currentPasswordInput = currentPasswordInput;
   };
 
   focusCurrentPassword = () => {
     invariant(this.currentPasswordInput, 'currentPasswordInput should be set');
     this.currentPasswordInput.focus();
   };
 
   onChangeNewPassword = (newPassword: string) => {
     this.setState({ newPassword });
   };
 
   newPasswordRef = (
     newPasswordInput: ?React.ElementRef<typeof BaseTextInput>,
   ) => {
     this.newPasswordInput = newPasswordInput;
   };
 
   focusNewPassword = () => {
     invariant(this.newPasswordInput, 'newPasswordInput should be set');
     this.newPasswordInput.focus();
   };
 
   onChangeConfirmPassword = (confirmPassword: string) => {
     this.setState({ confirmPassword });
   };
 
   confirmPasswordRef = (
     confirmPasswordInput: ?React.ElementRef<typeof BaseTextInput>,
   ) => {
     this.confirmPasswordInput = confirmPasswordInput;
   };
 
   focusConfirmPassword = () => {
     invariant(this.confirmPasswordInput, 'confirmPasswordInput should be set');
     this.confirmPasswordInput.focus();
   };
 
   goBackOnce() {
     this.props.navigation.dispatch(state => ({
       ...CommonActions.goBack(),
       target: state.key,
     }));
   }
 
   submitPassword = () => {
     if (this.state.newPassword === '') {
       Alert.alert(
         'Empty password',
         'New password cannot be empty',
         [{ text: 'OK', onPress: this.onNewPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (this.state.newPassword !== this.state.confirmPassword) {
       Alert.alert(
         'Passwords don’t match',
         'New password fields must contain the same password',
         [{ text: 'OK', onPress: this.onNewPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (this.state.newPassword === this.state.currentPassword) {
       this.goBackOnce();
     } else {
       void this.props.dispatchActionPromise(
         changeUserPasswordActionTypes,
         this.savePassword(),
       );
     }
   };
 
   async savePassword() {
     const { username } = this.props;
     if (!username) {
       return;
     }
     try {
       await this.props.changeUserPassword({
         updatedFields: {
           password: this.state.newPassword,
         },
         currentPassword: this.state.currentPassword,
       });
       await setNativeCredentials({
         username,
         password: this.state.newPassword,
       });
       this.goBackOnce();
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         Alert.alert(
           'Incorrect password',
           'The current password you entered is incorrect',
           [{ text: 'OK', onPress: this.onCurrentPasswordAlertAcknowledged }],
           { cancelable: false },
         );
       } else {
         Alert.alert(
           'Unknown error',
           'Uhh... try again?',
           [{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
           { cancelable: false },
         );
       }
     }
   }
 
   onNewPasswordAlertAcknowledged = () => {
     this.setState(
       { newPassword: '', confirmPassword: '' },
       this.focusNewPassword,
     );
   };
 
   onCurrentPasswordAlertAcknowledged = () => {
     this.setState({ currentPassword: '' }, this.focusCurrentPassword);
   };
 
   onUnknownErrorAlertAcknowledged = () => {
     this.setState(
       { currentPassword: '', newPassword: '', confirmPassword: '' },
       this.focusCurrentPassword,
     );
   };
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(
   changeUserPasswordActionTypes,
 );
 
 const ConnectedEditPassword: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedEditPassword(props: BaseProps) {
     const loadingStatus = useSelector(loadingStatusSelector);
     const username = useSelector(state => {
       if (state.currentUserInfo && !state.currentUserInfo.anonymous) {
         return state.currentUserInfo.username;
       }
       return undefined;
     });
     const colors = useColors();
     const styles = useStyles(unboundStyles);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeUserPassword = useServerCall(changeUserPassword);
 
     return (
       <EditPassword
         {...props}
         loadingStatus={loadingStatus}
         username={username}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         changeUserPassword={callChangeUserPassword}
       />
     );
   });
 
 export default ConnectedEditPassword;
diff --git a/native/profile/profile-screen.react.js b/native/profile/profile-screen.react.js
index 78650e8ba..456d447fb 100644
--- a/native/profile/profile-screen.react.js
+++ b/native/profile/profile-screen.react.js
@@ -1,459 +1,459 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, Platform, ScrollView } from 'react-native';
 
 import { logOutActionTypes, useLogOut } from 'lib/actions/user-actions.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { accountHasPassword } from 'lib/shared/account-utils.js';
 import type { LogOutResult } from 'lib/types/account-types.js';
 import { type CurrentUserInfo } from 'lib/types/user-types.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import { deleteNativeCredentialsFor } from '../account/native-credentials.js';
 import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
 import Action from '../components/action-row.react.js';
 import Button from '../components/button.react.js';
 import EditSettingButton from '../components/edit-setting-button.react.js';
 import SingleLine from '../components/single-line.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import {
   EditPasswordRouteName,
   DeleteAccountRouteName,
   BuildInfoRouteName,
   DevToolsRouteName,
   AppearancePreferencesRouteName,
   FriendListRouteName,
   BlockListRouteName,
   PrivacyPreferencesRouteName,
   DefaultNotificationsPreferencesRouteName,
   LinkedDevicesRouteName,
   BackupMenuRouteName,
   KeyserverSelectionListRouteName,
   TunnelbrokerMenuRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type ProfileRowProps = {
   +content: string,
   +onPress: () => void,
   +danger?: boolean,
 };
 
 function ProfileRow(props: ProfileRowProps): React.Node {
   const { content, onPress, danger } = props;
   return (
     <Action.Row onPress={onPress}>
       <Action.Text danger={danger} content={content} />
       <Action.Icon name="ios-arrow-forward" />
     </Action.Row>
   );
 }
 
 const unboundStyles = {
   avatarSection: {
     alignItems: 'center',
     paddingVertical: 16,
   },
   container: {
     flex: 1,
   },
   content: {
     flex: 1,
   },
   deleteAccountButton: {
     paddingHorizontal: 24,
     paddingVertical: 12,
   },
   editPasswordButton: {
     paddingTop: Platform.OS === 'android' ? 3 : 2,
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     paddingRight: 12,
   },
   loggedInLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
   },
   logOutText: {
     color: 'link',
     fontSize: 16,
     paddingLeft: 6,
   },
   row: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   paddedRow: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     paddingVertical: 1,
   },
   unpaddedSection: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
   },
   username: {
     color: 'panelForegroundLabel',
     flex: 1,
   },
   value: {
     color: 'panelForegroundLabel',
     fontSize: 16,
     textAlign: 'right',
   },
 };
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'ProfileScreen'>,
   +route: NavigationRoute<'ProfileScreen'>,
 };
 type Props = {
   ...BaseProps,
   +currentUserInfo: ?CurrentUserInfo,
   +logOutLoading: boolean,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   +dispatchActionPromise: DispatchActionPromise,
   +logOut: () => Promise<LogOutResult>,
   +staffCanSee: boolean,
   +stringForUser: ?string,
   +isAccountWithPassword: boolean,
 };
 
 class ProfileScreen extends React.PureComponent<Props> {
   get loggedOutOrLoggingOut(): boolean {
     return (
       !this.props.currentUserInfo ||
       this.props.currentUserInfo.anonymous ||
       this.props.logOutLoading
     );
   }
 
   render(): React.Node {
     let developerTools,
       defaultNotifications,
       keyserverSelection,
       tunnelbrokerMenu;
     const { staffCanSee, isAccountWithPassword } = this.props;
     if (staffCanSee) {
       developerTools = (
         <ProfileRow content="Developer tools" onPress={this.onPressDevTools} />
       );
 
       defaultNotifications = (
         <ProfileRow
           content="Default Notifications"
           onPress={this.onPressDefaultNotifications}
         />
       );
 
       keyserverSelection = (
         <ProfileRow
           content="Keyservers"
           onPress={this.onPressKeyserverSelection}
         />
       );
 
       tunnelbrokerMenu = (
         <ProfileRow
           content="Tunnelbroker menu"
           onPress={this.onPressTunnelbrokerMenu}
         />
       );
     }
 
     let backupMenu;
     if (staffCanSee && isAccountWithPassword) {
       backupMenu = (
         <ProfileRow content="Backup menu" onPress={this.onPressBackupMenu} />
       );
     }
 
     let passwordEditionUI;
     if (accountHasPassword(this.props.currentUserInfo)) {
       passwordEditionUI = (
         <Action.Row>
           <Text style={this.props.styles.label}>Password</Text>
           <Text
             style={[this.props.styles.content, this.props.styles.value]}
             numberOfLines={1}
           >
             ••••••••••••••••
           </Text>
           <EditSettingButton
             onPress={this.onPressEditPassword}
             canChangeSettings={true}
             style={this.props.styles.editPasswordButton}
           />
         </Action.Row>
       );
     }
 
     let linkedDevices;
     if (__DEV__) {
       linkedDevices = (
         <ProfileRow content="Linked devices" onPress={this.onPressDevices} />
       );
     }
 
     return (
       <View style={this.props.styles.container}>
         <ScrollView
           contentContainerStyle={this.props.styles.scrollViewContentContainer}
           style={this.props.styles.scrollView}
         >
           <Text style={this.props.styles.header}>USER AVATAR</Text>
           <View
             style={[this.props.styles.section, this.props.styles.avatarSection]}
           >
             <EditUserAvatar userID={this.props.currentUserInfo?.id} />
           </View>
           <Text style={this.props.styles.header}>ACCOUNT</Text>
           <View style={this.props.styles.section}>
             <Action.Row>
               <Text style={this.props.styles.loggedInLabel}>Logged in as </Text>
               <SingleLine
                 style={[this.props.styles.label, this.props.styles.username]}
               >
                 {this.props.stringForUser}
               </SingleLine>
               <Button
                 onPress={this.onPressLogOut}
                 disabled={this.loggedOutOrLoggingOut}
               >
                 <Text style={this.props.styles.logOutText}>Log out</Text>
               </Button>
             </Action.Row>
             {passwordEditionUI}
           </View>
           <View style={this.props.styles.section}>
             <ProfileRow
               content="Friend list"
               onPress={this.onPressFriendList}
             />
             <ProfileRow content="Block list" onPress={this.onPressBlockList} />
           </View>
           <Text style={this.props.styles.header}>PREFERENCES</Text>
           <View style={this.props.styles.section}>
             <ProfileRow content="Appearance" onPress={this.onPressAppearance} />
             <ProfileRow content="Privacy" onPress={this.onPressPrivacy} />
             {defaultNotifications}
             {backupMenu}
             {tunnelbrokerMenu}
           </View>
           <View style={this.props.styles.section}>
             {linkedDevices}
             {keyserverSelection}
             <ProfileRow content="Build info" onPress={this.onPressBuildInfo} />
             {developerTools}
           </View>
           <View style={this.props.styles.unpaddedSection}>
             <ProfileRow
               content="Delete account..."
               danger
               onPress={this.onPressDeleteAccount}
             />
           </View>
         </ScrollView>
       </View>
     );
   }
 
   onPressLogOut = () => {
     if (this.loggedOutOrLoggingOut) {
       return;
     }
     if (!this.props.isAccountWithPassword) {
       Alert.alert(
         'Log out',
         'Are you sure you want to log out?',
         [
           { text: 'No', style: 'cancel' },
           {
             text: 'Yes',
             onPress: this.logOutWithoutDeletingNativeCredentialsWrapper,
             style: 'destructive',
           },
         ],
         { cancelable: true },
       );
       return;
     }
     const alertTitle =
       Platform.OS === 'ios' ? 'Keep Login Info in Keychain' : 'Keep Login Info';
     const alertDescription =
       'We will automatically fill out log-in forms with your credentials ' +
       'in the app.';
     Alert.alert(
       alertTitle,
       alertDescription,
       [
         { text: 'Cancel', style: 'cancel' },
         {
           text: 'Keep',
           onPress: this.logOutWithoutDeletingNativeCredentialsWrapper,
         },
         {
           text: 'Remove',
           onPress: this.logOutAndDeleteNativeCredentialsWrapper,
           style: 'destructive',
         },
       ],
       { cancelable: true },
     );
   };
 
   logOutWithoutDeletingNativeCredentialsWrapper = () => {
     if (this.loggedOutOrLoggingOut) {
       return;
     }
     this.logOut();
   };
 
   logOutAndDeleteNativeCredentialsWrapper = async () => {
     if (this.loggedOutOrLoggingOut) {
       return;
     }
     await this.deleteNativeCredentials();
     this.logOut();
   };
 
   logOut() {
     void this.props.dispatchActionPromise(
       logOutActionTypes,
       this.props.logOut(),
     );
   }
 
   async deleteNativeCredentials() {
     await deleteNativeCredentialsFor();
   }
 
   onPressEditPassword = () => {
     this.props.navigation.navigate({ name: EditPasswordRouteName });
   };
 
   onPressDeleteAccount = () => {
     this.props.navigation.navigate({ name: DeleteAccountRouteName });
   };
 
   onPressDevices = () => {
     this.props.navigation.navigate({ name: LinkedDevicesRouteName });
   };
 
   onPressBuildInfo = () => {
     this.props.navigation.navigate({ name: BuildInfoRouteName });
   };
 
   onPressDevTools = () => {
     this.props.navigation.navigate({ name: DevToolsRouteName });
   };
 
   onPressAppearance = () => {
     this.props.navigation.navigate({ name: AppearancePreferencesRouteName });
   };
 
   onPressPrivacy = () => {
     this.props.navigation.navigate({ name: PrivacyPreferencesRouteName });
   };
 
   onPressDefaultNotifications = () => {
     this.props.navigation.navigate({
       name: DefaultNotificationsPreferencesRouteName,
     });
   };
 
   onPressFriendList = () => {
     this.props.navigation.navigate({ name: FriendListRouteName });
   };
 
   onPressBlockList = () => {
     this.props.navigation.navigate({ name: BlockListRouteName });
   };
 
   onPressBackupMenu = () => {
     this.props.navigation.navigate({ name: BackupMenuRouteName });
   };
 
   onPressTunnelbrokerMenu = () => {
     this.props.navigation.navigate({ name: TunnelbrokerMenuRouteName });
   };
 
   onPressKeyserverSelection = () => {
     this.props.navigation.navigate({ name: KeyserverSelectionListRouteName });
   };
 }
 
 const logOutLoadingStatusSelector =
   createLoadingStatusSelector(logOutActionTypes);
 
 const ConnectedProfileScreen: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedProfileScreen(props: BaseProps) {
     const currentUserInfo = useSelector(state => state.currentUserInfo);
     const logOutLoading =
       useSelector(logOutLoadingStatusSelector) === 'loading';
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const callLogOut = useLogOut();
     const dispatchActionPromise = useDispatchActionPromise();
     const staffCanSee = useStaffCanSee();
     const stringForUser = useStringForUser(currentUserInfo);
     const isAccountWithPassword = useSelector(state =>
       accountHasPassword(state.currentUserInfo),
     );
 
     return (
       <ProfileScreen
         {...props}
         currentUserInfo={currentUserInfo}
         logOutLoading={logOutLoading}
         colors={colors}
         styles={styles}
         logOut={callLogOut}
         dispatchActionPromise={dispatchActionPromise}
         staffCanSee={staffCanSee}
         stringForUser={stringForUser}
         isAccountWithPassword={isAccountWithPassword}
       />
     );
   });
 
 export default ConnectedProfileScreen;
diff --git a/native/profile/relationship-list-item.react.js b/native/profile/relationship-list-item.react.js
index 8f9e7bb51..95e991e7d 100644
--- a/native/profile/relationship-list-item.react.js
+++ b/native/profile/relationship-list-item.react.js
@@ -1,356 +1,356 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
 
 import {
   updateRelationshipsActionTypes,
   updateRelationships,
 } from 'lib/actions/relationship-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ReactRef } from 'lib/types/react-types.js';
 import {
   type RelationshipRequest,
   type RelationshipAction,
   type RelationshipErrors,
   userRelationshipStatus,
   relationshipActions,
 } from 'lib/types/relationship-types.js';
 import type {
   AccountUserInfo,
   GlobalAccountUserInfo,
 } from 'lib/types/user-types.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import {
-  type DispatchActionPromise,
-  useServerCall,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import type { RelationshipListNavigate } from './relationship-list.react.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import PencilIcon from '../components/pencil-icon.react.js';
 import SingleLine from '../components/single-line.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import {
   UserRelationshipTooltipModalRouteName,
   FriendListRouteName,
   BlockListRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
 import Alert from '../utils/alert.js';
 
 const unboundStyles = {
   container: {
     flex: 1,
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 10,
     backgroundColor: 'panelForeground',
     borderColor: 'panelForegroundBorder',
   },
   borderBottom: {
     borderBottomWidth: 1,
   },
   buttonContainer: {
     flexDirection: 'row',
   },
   editButtonWithMargin: {
     marginLeft: 15,
   },
   username: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
     marginLeft: 8,
   },
   editButton: {
     paddingLeft: 10,
   },
   blueAction: {
     color: 'link',
     fontSize: 16,
     paddingLeft: 6,
   },
   redAction: {
     color: 'redText',
     fontSize: 16,
     paddingLeft: 6,
   },
 };
 
 type BaseProps = {
   +userInfo: AccountUserInfo,
   +lastListItem: boolean,
   +verticalBounds: ?VerticalBounds,
   +relationshipListRoute: NavigationRoute<'FriendList' | 'BlockList'>,
   +navigate: RelationshipListNavigate,
   +onSelect: (selectedUser: GlobalAccountUserInfo) => void,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +removeUserLoadingStatus: LoadingStatus,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +updateRelationships: (
     request: RelationshipRequest,
   ) => Promise<RelationshipErrors>,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   +navigateToUserProfileBottomSheet: (userID: string) => mixed,
 };
 class RelationshipListItem extends React.PureComponent<Props> {
   editButton: ReactRef<React.ElementRef<typeof View>> = React.createRef();
 
   render(): React.Node {
     const {
       lastListItem,
       removeUserLoadingStatus,
       userInfo,
       relationshipListRoute,
     } = this.props;
     const relationshipsToEdit = {
       [FriendListRouteName]: [userRelationshipStatus.FRIEND],
       [BlockListRouteName]: [
         userRelationshipStatus.BOTH_BLOCKED,
         userRelationshipStatus.BLOCKED_BY_VIEWER,
       ],
     }[relationshipListRoute.name];
 
     const canEditFriendRequest = {
       [FriendListRouteName]: true,
       [BlockListRouteName]: false,
     }[relationshipListRoute.name];
 
     const borderBottom = lastListItem ? null : this.props.styles.borderBottom;
 
     let editButton = null;
     if (removeUserLoadingStatus === 'loading') {
       editButton = (
         <ActivityIndicator
           size="small"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     } else if (relationshipsToEdit.includes(userInfo.relationshipStatus)) {
       editButton = (
         <TouchableOpacity
           onPress={this.onPressEdit}
           style={this.props.styles.editButton}
         >
           <View onLayout={this.onLayout} ref={this.editButton}>
             <PencilIcon />
           </View>
         </TouchableOpacity>
       );
     } else if (
       userInfo.relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED &&
       canEditFriendRequest
     ) {
       editButton = (
         <View style={this.props.styles.buttonContainer}>
           <TouchableOpacity
             onPress={this.onPressFriendUser}
             style={this.props.styles.editButton}
           >
             <Text style={this.props.styles.blueAction}>Accept</Text>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={this.onPressUnfriendUser}
             style={[
               this.props.styles.editButton,
               this.props.styles.editButtonWithMargin,
             ]}
           >
             <Text style={this.props.styles.redAction}>Reject</Text>
           </TouchableOpacity>
         </View>
       );
     } else if (
       userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT &&
       canEditFriendRequest
     ) {
       editButton = (
         <TouchableOpacity
           onPress={this.onPressUnfriendUser}
           style={this.props.styles.editButton}
         >
           <Text style={this.props.styles.redAction}>Cancel request</Text>
         </TouchableOpacity>
       );
     } else {
       editButton = (
         <TouchableOpacity
           onPress={this.onSelect}
           style={this.props.styles.editButton}
         >
           <Text style={this.props.styles.blueAction}>Add</Text>
         </TouchableOpacity>
       );
     }
 
     return (
       <TouchableOpacity
         onPress={this.onPressUser}
         style={[this.props.styles.container, borderBottom]}
       >
         <UserAvatar size="S" userID={this.props.userInfo.id} />
         <SingleLine style={this.props.styles.username}>
           {this.props.userInfo.username}
         </SingleLine>
         {editButton}
       </TouchableOpacity>
     );
   }
 
   onPressUser = () => {
     this.props.navigateToUserProfileBottomSheet(this.props.userInfo.id);
   };
 
   onSelect = () => {
     const { id, username } = this.props.userInfo;
     this.props.onSelect({ id, username });
   };
 
   visibleEntryIDs(): [string] {
     const { relationshipListRoute } = this.props;
     const id = {
       [FriendListRouteName]: 'unfriend',
       [BlockListRouteName]: 'unblock',
     }[relationshipListRoute.name];
     return [id];
   }
 
   onPressEdit = () => {
     if (this.props.keyboardState?.dismissKeyboardIfShowing()) {
       return;
     }
 
     const {
       editButton,
       props: { verticalBounds },
     } = this;
     const { overlayContext, userInfo } = this.props;
     invariant(
       overlayContext,
       'RelationshipListItem should have OverlayContext',
     );
     overlayContext.setScrollBlockingModalStatus('open');
 
     if (!editButton.current || !verticalBounds) {
       return;
     }
     const { relationshipStatus, ...restUserInfo } = userInfo;
     const relativeUserInfo = {
       ...restUserInfo,
       isViewer: false,
     };
     editButton.current.measure((x, y, width, height, pageX, pageY) => {
       const coordinates = { x: pageX, y: pageY, width, height };
       this.props.navigate<'UserRelationshipTooltipModal'>({
         name: UserRelationshipTooltipModalRouteName,
         params: {
           presentedFrom: this.props.relationshipListRoute.key,
           initialCoordinates: coordinates,
           verticalBounds,
           visibleEntryIDs: this.visibleEntryIDs(),
           relativeUserInfo,
           tooltipButtonIcon: 'pencil',
         },
       });
     });
   };
 
   // We need to set onLayout in order to allow .measure() to be on the ref
   onLayout = () => {};
 
   onPressFriendUser = () => {
     this.onPressUpdateFriendship(relationshipActions.FRIEND);
   };
 
   onPressUnfriendUser = () => {
     this.onPressUpdateFriendship(relationshipActions.UNFRIEND);
   };
 
   onPressUpdateFriendship(action: RelationshipAction) {
     const { id } = this.props.userInfo;
     const customKeyName = `${updateRelationshipsActionTypes.started}:${id}`;
     void this.props.dispatchActionPromise(
       updateRelationshipsActionTypes,
       this.updateFriendship(action),
       { customKeyName },
     );
   }
 
   async updateFriendship(
     action: RelationshipAction,
   ): Promise<RelationshipErrors> {
     try {
       return await this.props.updateRelationships({
         action,
         userIDs: [this.props.userInfo.id],
       });
     } catch (e) {
       Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
         cancelable: true,
       });
       throw e;
     }
   }
 }
 
 const ConnectedRelationshipListItem: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedRelationshipListItem(
     props: BaseProps,
   ) {
     const removeUserLoadingStatus = useSelector(state =>
       createLoadingStatusSelector(
         updateRelationshipsActionTypes,
         `${updateRelationshipsActionTypes.started}:${props.userInfo.id}`,
       )(state),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const boundUpdateRelationships = useServerCall(updateRelationships);
     const overlayContext = React.useContext(OverlayContext);
     const keyboardState = React.useContext(KeyboardContext);
 
     const navigateToUserProfileBottomSheet =
       useNavigateToUserProfileBottomSheet();
 
     return (
       <RelationshipListItem
         {...props}
         removeUserLoadingStatus={removeUserLoadingStatus}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         updateRelationships={boundUpdateRelationships}
         overlayContext={overlayContext}
         keyboardState={keyboardState}
         navigateToUserProfileBottomSheet={navigateToUserProfileBottomSheet}
       />
     );
   });
 
 export default ConnectedRelationshipListItem;
diff --git a/native/profile/relationship-list.react.js b/native/profile/relationship-list.react.js
index e59f5a668..071b48132 100644
--- a/native/profile/relationship-list.react.js
+++ b/native/profile/relationship-list.react.js
@@ -1,489 +1,487 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, Platform } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
 import {
   updateRelationshipsActionTypes,
   updateRelationships,
 } from 'lib/actions/relationship-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
 import { userRelationshipsSelector } from 'lib/selectors/relationship-selectors.js';
 import { useSearchUsers } from 'lib/shared/search-utils.js';
 import {
   userRelationshipStatus,
   relationshipActions,
 } from 'lib/types/relationship-types.js';
 import type {
   GlobalAccountUserInfo,
   AccountUserInfo,
 } from 'lib/types/user-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import RelationshipListItem from './relationship-list-item.react.js';
 import LinkButton from '../components/link-button.react.js';
 import { createTagInput, BaseTagInput } from '../components/tag-input.react.js';
 import { KeyboardContext } from '../keyboard/keyboard-state.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import {
   FriendListRouteName,
   BlockListRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles, useIndicatorStyle } from '../themes/colors.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 import Alert from '../utils/alert.js';
 
 const TagInput = createTagInput<GlobalAccountUserInfo>();
 
 export type RelationshipListNavigate = $PropertyType<
   ProfileNavigationProp<'FriendList' | 'BlockList'>,
   'navigate',
 >;
 
 const tagInputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 type ListItem =
   | { +type: 'empty', +because: 'no-relationships' | 'no-results' }
   | { +type: 'header' }
   | { +type: 'footer' }
   | {
       +type: 'user',
       +userInfo: AccountUserInfo,
       +lastListItem: boolean,
       +verticalBounds: ?VerticalBounds,
     };
 
 // ESLint doesn't recognize that invariant always throws
 // eslint-disable-next-line consistent-return
 function keyExtractor(item: ListItem) {
   if (item.userInfo) {
     return item.userInfo.id;
   } else if (item.type === 'empty') {
     return 'empty';
   } else if (item.type === 'header') {
     return 'header';
   } else if (item.type === 'footer') {
     return 'footer';
   }
   invariant(false, 'keyExtractor conditions should be exhaustive');
 }
 
 const tagDataLabelExtractor = (userInfo: GlobalAccountUserInfo) =>
   userInfo.username;
 
 type Props = {
   +navigation: ProfileNavigationProp<'FriendList' | 'BlockList'>,
   +route: NavigationRoute<'FriendList' | 'BlockList'>,
 };
 function RelationshipList(props: Props): React.Node {
   const { route } = props;
   const routeName = route.name;
   const excludeStatuses = React.useMemo(
     () =>
       ({
         [FriendListRouteName]: [
           userRelationshipStatus.BLOCKED_VIEWER,
           userRelationshipStatus.BOTH_BLOCKED,
         ],
         [BlockListRouteName]: [],
       })[routeName],
     [routeName],
   );
 
   const userInfos = useSelector(state => state.userStore.userInfos);
   const userInfosArray = React.useMemo(
     () =>
       values(userInfos).filter(userInfo => {
         const relationship = userInfo.relationshipStatus;
         return !excludeStatuses.includes(relationship);
       }),
     [userInfos, excludeStatuses],
   );
 
   const [searchInputText, setSearchInputText] = React.useState<string>('');
   const [userStoreSearchResults, setUserStoreSearchResults] = React.useState<
     $ReadOnlySet<string>,
   >(new Set());
 
   const serverSearchResults = useSearchUsers(searchInputText);
   const filteredServerSearchResults = React.useMemo(
     () =>
       serverSearchResults.filter(searchUserInfo => {
         const userInfo = userInfos[searchUserInfo.id];
         return (
           !userInfo || !excludeStatuses.includes(userInfo.relationshipStatus)
         );
       }),
     [serverSearchResults, userInfos, excludeStatuses],
   );
 
   const userStoreSearchIndex = useUserSearchIndex(userInfosArray);
   const onChangeSearchText = React.useCallback(
     async (searchText: string) => {
       setSearchInputText(searchText);
 
       const results = userStoreSearchIndex.getSearchResults(searchText);
       setUserStoreSearchResults(new Set(results));
     },
     [userStoreSearchIndex],
   );
 
   const overlayContext = React.useContext(OverlayContext);
   invariant(overlayContext, 'RelationshipList should have OverlayContext');
   const scrollEnabled = overlayContext.scrollBlockingModalStatus === 'closed';
 
   const tagInputRef = React.useRef<?BaseTagInput<GlobalAccountUserInfo>>();
   const flatListContainerRef = React.useRef<?React.ElementRef<typeof View>>();
 
   const keyboardState = React.useContext(KeyboardContext);
   const keyboardNotShowing = !!(
     keyboardState && !keyboardState.keyboardShowing
   );
   const [verticalBounds, setVerticalBounds] =
     React.useState<?VerticalBounds>(null);
   const onFlatListContainerLayout = React.useCallback(() => {
     if (!flatListContainerRef.current) {
       return;
     }
 
     if (!keyboardNotShowing) {
       return;
     }
 
     flatListContainerRef.current.measure(
       (x, y, width, height, pageX, pageY) => {
         if (
           height === null ||
           height === undefined ||
           pageY === null ||
           pageY === undefined
         ) {
           return;
         }
         setVerticalBounds({ height, y: pageY });
       },
     );
   }, [keyboardNotShowing]);
 
   const [currentTags, setCurrentTags] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
 
   const onSelect = React.useCallback(
     (selectedUser: GlobalAccountUserInfo) => {
       if (currentTags.find(o => o.id === selectedUser.id)) {
         return;
       }
       setSearchInputText('');
       setCurrentTags(prevCurrentTags => prevCurrentTags.concat(selectedUser));
     },
     [currentTags],
   );
 
   const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
     setCurrentTags([]);
     setSearchInputText('');
     tagInputRef.current?.focus();
   }, []);
 
   const callUpdateRelationships = useServerCall(updateRelationships);
   const updateRelationshipsOnServer = React.useCallback(async () => {
     const action = {
       [FriendListRouteName]: relationshipActions.FRIEND,
       [BlockListRouteName]: relationshipActions.BLOCK,
     }[routeName];
     const userIDs = currentTags.map(userInfo => userInfo.id);
     try {
       const result = await callUpdateRelationships({
         action,
         userIDs,
       });
       setCurrentTags([]);
       setSearchInputText('');
       return result;
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
         { cancelable: true, onDismiss: onUnknownErrorAlertAcknowledged },
       );
       throw e;
     }
   }, [
     routeName,
     currentTags,
     callUpdateRelationships,
     onUnknownErrorAlertAcknowledged,
   ]);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const noCurrentTags = currentTags.length === 0;
   const onPressAdd = React.useCallback(() => {
     if (noCurrentTags) {
       return;
     }
     void dispatchActionPromise(
       updateRelationshipsActionTypes,
       updateRelationshipsOnServer(),
     );
   }, [noCurrentTags, dispatchActionPromise, updateRelationshipsOnServer]);
   const inputProps = React.useMemo(
     () => ({
       ...tagInputProps,
       onSubmitEditing: onPressAdd,
     }),
     [onPressAdd],
   );
 
   const { navigation } = props;
   const { navigate } = navigation;
   const styles = useStyles(unboundStyles);
   const renderItem = React.useCallback(
     // ESLint doesn't recognize that invariant always throws
     // eslint-disable-next-line consistent-return
     ({ item }: { item: ListItem, ... }) => {
       if (item.type === 'empty') {
         const action = {
           [FriendListRouteName]: 'added',
           [BlockListRouteName]: 'blocked',
         }[routeName];
 
         const emptyMessage =
           item.because === 'no-relationships'
             ? `You haven't ${action} any users yet`
             : 'No results';
 
         return <Text style={styles.emptyText}>{emptyMessage}</Text>;
       } else if (item.type === 'header' || item.type === 'footer') {
         return <View style={styles.separator} />;
       } else if (item.type === 'user') {
         return (
           <RelationshipListItem
             userInfo={item.userInfo}
             lastListItem={item.lastListItem}
             verticalBounds={item.verticalBounds}
             navigate={navigate}
             relationshipListRoute={route}
             onSelect={onSelect}
           />
         );
       } else {
         invariant(false, `unexpected RelationshipList item type ${item.type}`);
       }
     },
     [routeName, navigate, route, onSelect, styles.emptyText, styles.separator],
   );
 
   const { setOptions } = navigation;
   const prevNoCurrentTags = React.useRef(noCurrentTags);
   React.useEffect(() => {
     let setSaveButtonDisabled;
     if (!prevNoCurrentTags.current && noCurrentTags) {
       setSaveButtonDisabled = true;
     } else if (prevNoCurrentTags.current && !noCurrentTags) {
       setSaveButtonDisabled = false;
     }
     prevNoCurrentTags.current = noCurrentTags;
     if (setSaveButtonDisabled === undefined) {
       return;
     }
     setOptions({
       headerRight: () => (
         <LinkButton
           text="Save"
           onPress={onPressAdd}
           disabled={setSaveButtonDisabled}
         />
       ),
     });
   }, [setOptions, noCurrentTags, onPressAdd]);
 
   const relationships = useSelector(userRelationshipsSelector);
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const usersWithoutENSNames = React.useMemo(() => {
     if (searchInputText === '') {
       return {
         [FriendListRouteName]: relationships.friends,
         [BlockListRouteName]: relationships.blocked,
       }[routeName];
     }
 
     const mergedUserInfos: { [id: string]: AccountUserInfo } = {};
     for (const userInfo of filteredServerSearchResults) {
       mergedUserInfos[userInfo.id] = userInfo;
     }
     for (const id of userStoreSearchResults) {
       const { username, relationshipStatus } = userInfos[id];
       if (username) {
         mergedUserInfos[id] = { id, username, relationshipStatus };
       }
     }
 
     const excludeUserIDsArray = currentTags
       .map(userInfo => userInfo.id)
       .concat(viewerID || []);
     const excludeUserIDs = new Set(excludeUserIDsArray);
 
     const sortToEnd = [];
     const userSearchResults = [];
     const sortRelationshipTypesToEnd = {
       [FriendListRouteName]: [userRelationshipStatus.FRIEND],
       [BlockListRouteName]: [
         userRelationshipStatus.BLOCKED_BY_VIEWER,
         userRelationshipStatus.BOTH_BLOCKED,
       ],
     }[routeName];
     for (const userID in mergedUserInfos) {
       if (excludeUserIDs.has(userID)) {
         continue;
       }
 
       const userInfo = mergedUserInfos[userID];
       if (sortRelationshipTypesToEnd.includes(userInfo.relationshipStatus)) {
         sortToEnd.push(userInfo);
       } else {
         userSearchResults.push(userInfo);
       }
     }
 
     return userSearchResults.concat(sortToEnd);
   }, [
     searchInputText,
     relationships,
     routeName,
     viewerID,
     currentTags,
     filteredServerSearchResults,
     userStoreSearchResults,
     userInfos,
   ]);
 
   const displayUsers = useENSNames(usersWithoutENSNames);
   const listData = React.useMemo(() => {
     let emptyItem;
     if (displayUsers.length === 0 && searchInputText === '') {
       emptyItem = { type: 'empty', because: 'no-relationships' };
     } else if (displayUsers.length === 0) {
       emptyItem = { type: 'empty', because: 'no-results' };
     }
 
     const mappedUsers = displayUsers.map((userInfo, index) => ({
       type: 'user',
       userInfo,
       lastListItem: displayUsers.length - 1 === index,
       verticalBounds,
     }));
 
     return []
       .concat(emptyItem ? emptyItem : [])
       .concat(emptyItem ? [] : { type: 'header' })
       .concat(mappedUsers)
       .concat(emptyItem ? [] : { type: 'footer' });
   }, [displayUsers, verticalBounds, searchInputText]);
 
   const indicatorStyle = useIndicatorStyle();
   const currentTagsWithENSNames = useENSNames(currentTags);
   return (
     <View style={styles.container}>
       <View style={styles.tagInputContainer}>
         <Text style={styles.tagInputLabel}>Search:</Text>
         <View style={styles.tagInput}>
           <TagInput
             value={currentTagsWithENSNames}
             onChange={setCurrentTags}
             text={searchInputText}
             onChangeText={onChangeSearchText}
             labelExtractor={tagDataLabelExtractor}
             ref={tagInputRef}
             inputProps={inputProps}
             maxHeight={36}
           />
         </View>
       </View>
       <View
         ref={flatListContainerRef}
         onLayout={onFlatListContainerLayout}
         style={styles.container}
       >
         <FlatList
           contentContainerStyle={styles.contentContainer}
           data={listData}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           scrollEnabled={scrollEnabled}
           indicatorStyle={indicatorStyle}
           keyboardShouldPersistTaps="handled"
         />
       </View>
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
     backgroundColor: 'panelBackground',
   },
   contentContainer: {
     paddingTop: 12,
     paddingBottom: 24,
   },
   separator: {
     backgroundColor: 'panelForegroundBorder',
     height: Platform.OS === 'android' ? 1.5 : 1,
   },
   emptyText: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
     textAlign: 'center',
     paddingHorizontal: 12,
     paddingVertical: 10,
     marginHorizontal: 12,
   },
   tagInput: {
     flex: 1,
     marginLeft: 8,
     paddingRight: 12,
   },
   tagInputLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     paddingLeft: 12,
   },
   tagInputContainer: {
     alignItems: 'center',
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     flexDirection: 'row',
     paddingVertical: 6,
   },
 };
 
 registerFetchKey(updateRelationshipsActionTypes);
 
 const MemoizedRelationshipList: React.ComponentType<Props> =
   React.memo<Props>(RelationshipList);
 MemoizedRelationshipList.displayName = 'RelationshipList';
 
 export default MemoizedRelationshipList;
diff --git a/native/profile/user-relationship-tooltip-modal.react.js b/native/profile/user-relationship-tooltip-modal.react.js
index eddb48be5..6b46fbc4e 100644
--- a/native/profile/user-relationship-tooltip-modal.react.js
+++ b/native/profile/user-relationship-tooltip-modal.react.js
@@ -1,167 +1,165 @@
 // @flow
 
 import * as React from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import {
   updateRelationshipsActionTypes,
   updateRelationships,
 } from 'lib/actions/relationship-actions.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
 import type { RelativeUserInfo } from 'lib/types/user-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import PencilIcon from '../components/pencil-icon.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { useColors } from '../themes/colors.js';
 import {
   createTooltip,
   type TooltipParams,
   type BaseTooltipProps,
   type TooltipMenuProps,
   type TooltipRoute,
 } from '../tooltip/tooltip.react.js';
 import type { UserProfileBottomSheetNavigationProp } from '../user-profile/user-profile-bottom-sheet-navigator.react.js';
 import Alert from '../utils/alert.js';
 
 type Action = 'unfriend' | 'block' | 'unblock';
 type TooltipButtonIcon = 'pencil' | 'menu';
 
 export type UserRelationshipTooltipModalParams = TooltipParams<{
   +tooltipButtonIcon: TooltipButtonIcon,
   +relativeUserInfo: RelativeUserInfo,
 }>;
 
 type OnRemoveUserProps = {
   ...UserRelationshipTooltipModalParams,
   +action: Action,
 };
 function useRelationshipAction(input: OnRemoveUserProps) {
   const boundRemoveRelationships = useServerCall(updateRelationships);
   const dispatchActionPromise = useDispatchActionPromise();
   const userText = stringForUser(input.relativeUserInfo);
 
   return React.useCallback(() => {
     const callRemoveRelationships = async () => {
       try {
         return await boundRemoveRelationships({
           action: input.action,
           userIDs: [input.relativeUserInfo.id],
         });
       } catch (e) {
         Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
           cancelable: true,
         });
         throw e;
       }
     };
     const onConfirmRemoveUser = () => {
       const customKeyName = `${updateRelationshipsActionTypes.started}:${input.relativeUserInfo.id}`;
       void dispatchActionPromise(
         updateRelationshipsActionTypes,
         callRemoveRelationships(),
         { customKeyName },
       );
     };
     const action = {
       unfriend: 'removal',
       block: 'block',
       unblock: 'unblock',
     }[input.action];
     const message = {
       unfriend: `remove ${userText} from friends?`,
       block: `block ${userText}`,
       unblock: `unblock ${userText}?`,
     }[input.action];
     Alert.alert(
       `Confirm ${action}`,
       `Are you sure you want to ${message}`,
       [
         { text: 'Cancel', style: 'cancel' },
         { text: 'OK', onPress: onConfirmRemoveUser },
       ],
       { cancelable: true },
     );
   }, [boundRemoveRelationships, dispatchActionPromise, userText, input]);
 }
 
 function TooltipMenu(
   props: TooltipMenuProps<'UserRelationshipTooltipModal'>,
 ): React.Node {
   const { route, tooltipItem: TooltipItem } = props;
 
   const onRemoveUser = useRelationshipAction({
     ...route.params,
     action: 'unfriend',
   });
 
   const onBlockUser = useRelationshipAction({
     ...route.params,
     action: 'block',
   });
 
   const onUnblockUser = useRelationshipAction({
     ...route.params,
     action: 'unblock',
   });
 
   return (
     <>
       <TooltipItem
         id="unfriend"
         text="Unfriend"
         onPress={onRemoveUser}
         key="unfriend"
       />
       <TooltipItem id="block" text="Block" onPress={onBlockUser} key="block" />
       <TooltipItem
         id="unblock"
         text="Unblock"
         onPress={onUnblockUser}
         key="unblock"
       />
     </>
   );
 }
 
 type Props = {
   +navigation: UserProfileBottomSheetNavigationProp<'UserRelationshipTooltipModal'>,
   +route: TooltipRoute<'UserRelationshipTooltipModal'>,
   ...
 };
 
 function UserRelationshipTooltipButton(props: Props): React.Node {
   const { navigation, route } = props;
 
   const { goBackOnce } = navigation;
   const { tooltipButtonIcon } = route.params;
 
   const colors = useColors();
 
   const icon = React.useMemo(() => {
     if (tooltipButtonIcon === 'pencil') {
       return <PencilIcon />;
     }
     return (
       <SWMansionIcon
         name="menu-vertical"
         size={24}
         color={colors.modalBackgroundLabel}
       />
     );
   }, [colors.modalBackgroundLabel, tooltipButtonIcon]);
 
   return <TouchableOpacity onPress={goBackOnce}>{icon}</TouchableOpacity>;
 }
 
 const UserRelationshipTooltipModal: React.ComponentType<
   BaseTooltipProps<'UserRelationshipTooltipModal'>,
 > = createTooltip<'UserRelationshipTooltipModal'>(
   UserRelationshipTooltipButton,
   TooltipMenu,
 );
 
 export default UserRelationshipTooltipModal;
diff --git a/native/push/push-handler.react.js b/native/push/push-handler.react.js
index 7e85bac1d..be2354aa1 100644
--- a/native/push/push-handler.react.js
+++ b/native/push/push-handler.react.js
@@ -1,741 +1,741 @@
 // @flow
 
 import * as Haptics from 'expo-haptics';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform, LogBox } from 'react-native';
 import { Notification as InAppNotification } from 'react-native-in-app-message';
 
 import type {
   DeviceTokens,
   SetDeviceTokenActionPayload,
 } from 'lib/actions/device-actions.js';
 import {
   setDeviceTokenActionTypes,
   useSetDeviceToken,
   useSetDeviceTokenFanout,
 } from 'lib/actions/device-actions.js';
 import { saveMessagesActionType } from 'lib/actions/message-actions.js';
 import {
   updatesCurrentAsOfSelector,
   connectionSelector,
   deviceTokensSelector,
 } from 'lib/selectors/keyserver-selectors.js';
 import {
   unreadCount,
   threadInfoSelector,
 } from 'lib/selectors/thread-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import { mergePrefixIntoBody } from 'lib/shared/notif-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { type ConnectionInfo } from 'lib/types/socket-types.js';
 import type { GlobalTheme } from 'lib/types/theme-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  type DispatchActionPromise,
-} from 'lib/utils/action-utils.js';
 import {
   convertNotificationMessageInfoToNewIDSchema,
   convertNonPendingIDToNewSchema,
 } from 'lib/utils/migration-utils.js';
 import {
   type NotifPermissionAlertInfo,
   recordNotifPermissionAlertActionType,
   shouldSkipPushPermissionAlert,
 } from 'lib/utils/push-alerts.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import sleep from 'lib/utils/sleep.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import {
   parseAndroidMessage,
   androidNotificationChannelID,
   handleAndroidMessage,
   getCommAndroidNotificationsEventEmitter,
   type AndroidMessage,
   CommAndroidNotifications,
 } from './android.js';
 import {
   CommIOSNotification,
   type CoreIOSNotificationData,
   type CoreIOSNotificationDataWithRequestIdentifier,
 } from './comm-ios-notification.js';
 import InAppNotif from './in-app-notif.react.js';
 import {
   requestIOSPushPermissions,
   iosPushPermissionResponseReceived,
   CommIOSNotifications,
   getCommIOSNotificationsEventEmitter,
   type CoreIOSNotificationBackgroundData,
 } from './ios.js';
 import {
   type MessageListParams,
   useNavigateToThread,
 } from '../chat/message-list-types.js';
 import {
   addLifecycleListener,
   getCurrentLifecycleState,
 } from '../lifecycle/lifecycle.js';
 import { replaceWithThreadActionType } from '../navigation/action-types.js';
 import { activeMessageListSelector } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { RootContext, type RootContextType } from '../root-context.js';
 import type { EventSubscription } from '../types/react-native.js';
 import Alert from '../utils/alert.js';
 
 LogBox.ignoreLogs([
   // react-native-in-app-message
   'ForceTouchGestureHandler is not available',
 ]);
 
 type BaseProps = {
   +navigation: RootNavigationProp<'App'>,
 };
 type Props = {
   ...BaseProps,
   // Navigation state
   +activeThread: ?string,
   // Redux state
   +unreadCount: number,
   +deviceTokens: {
     +[keyserverID: string]: ?string,
   },
   +threadInfos: { +[id: string]: ThreadInfo },
   +notifPermissionAlertInfo: NotifPermissionAlertInfo,
   +connection: ConnectionInfo,
   +updatesCurrentAsOf: number,
   +activeTheme: ?GlobalTheme,
   +loggedIn: boolean,
   +navigateToThread: (params: MessageListParams) => void,
   // Redux dispatch functions
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +setDeviceToken: (
     input: DeviceTokens,
   ) => Promise<SetDeviceTokenActionPayload>,
   +setDeviceTokenFanout: (
     deviceToken: ?string,
   ) => Promise<SetDeviceTokenActionPayload>,
   // withRootContext
   +rootContext: ?RootContextType,
 };
 type State = {
   +inAppNotifProps: ?{
     +customComponent: React.Node,
     +blurType: ?('xlight' | 'dark'),
     +onPress: () => void,
   },
 };
 
 class PushHandler extends React.PureComponent<Props, State> {
   state: State = {
     inAppNotifProps: null,
   };
   currentState: ?string = getCurrentLifecycleState();
   appStarted = 0;
   androidNotificationsEventSubscriptions: Array<EventSubscription> = [];
   androidNotificationsPermissionPromise: ?Promise<boolean> = undefined;
   initialAndroidNotifHandled = false;
   openThreadOnceReceived: Set<string> = new Set();
   lifecycleSubscription: ?EventSubscription;
   iosNotificationEventSubscriptions: Array<EventSubscription> = [];
 
   componentDidMount() {
     this.appStarted = Date.now();
     this.lifecycleSubscription = addLifecycleListener(
       this.handleAppStateChange,
     );
     this.onForeground();
     if (Platform.OS === 'ios') {
       const commIOSNotificationsEventEmitter =
         getCommIOSNotificationsEventEmitter();
       this.iosNotificationEventSubscriptions.push(
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants()
             .REMOTE_NOTIFICATIONS_REGISTERED_EVENT,
           registration =>
             this.registerPushPermissions(registration?.deviceToken),
         ),
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants()
             .REMOTE_NOTIFICATIONS_REGISTRATION_FAILED_EVENT,
           this.failedToRegisterPushPermissionsIOS,
         ),
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants()
             .NOTIFICATION_RECEIVED_FOREGROUND_EVENT,
           this.iosForegroundNotificationReceived,
         ),
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants().NOTIFICATION_OPENED_EVENT,
           this.iosNotificationOpened,
         ),
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants()
             .NOTIFICATION_RECEIVED_BACKGROUND_EVENT,
           this.iosBackgroundNotificationReceived,
         ),
       );
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.createChannel(
         androidNotificationChannelID,
         'Default',
         CommAndroidNotifications.getConstants().NOTIFICATIONS_IMPORTANCE_HIGH,
         'Comm notifications channel',
       );
       const commAndroidNotificationsEventEmitter =
         getCommAndroidNotificationsEventEmitter();
       this.androidNotificationsEventSubscriptions.push(
         commAndroidNotificationsEventEmitter.addListener(
           CommAndroidNotifications.getConstants()
             .COMM_ANDROID_NOTIFICATIONS_TOKEN,
           this.handleAndroidDeviceToken,
         ),
         commAndroidNotificationsEventEmitter.addListener(
           CommAndroidNotifications.getConstants()
             .COMM_ANDROID_NOTIFICATIONS_MESSAGE,
           this.androidMessageReceived,
         ),
         commAndroidNotificationsEventEmitter.addListener(
           CommAndroidNotifications.getConstants()
             .COMM_ANDROID_NOTIFICATIONS_NOTIFICATION_OPENED,
           this.androidNotificationOpened,
         ),
       );
     }
 
     if (this.props.connection.status === 'connected') {
       this.updateBadgeCount();
     }
   }
 
   componentWillUnmount() {
     if (this.lifecycleSubscription) {
       this.lifecycleSubscription.remove();
     }
     if (Platform.OS === 'ios') {
       for (const iosNotificationEventSubscription of this
         .iosNotificationEventSubscriptions) {
         iosNotificationEventSubscription.remove();
       }
     } else if (Platform.OS === 'android') {
       for (const androidNotificationsEventSubscription of this
         .androidNotificationsEventSubscriptions) {
         androidNotificationsEventSubscription.remove();
       }
       this.androidNotificationsEventSubscriptions = [];
     }
   }
 
   handleAppStateChange = (nextState: ?string) => {
     if (!nextState || nextState === 'unknown') {
       return;
     }
     const lastState = this.currentState;
     this.currentState = nextState;
     if (lastState === 'background' && nextState === 'active') {
       this.onForeground();
       this.clearNotifsOfThread();
     }
   };
 
   onForeground() {
     if (this.props.loggedIn) {
       void this.ensurePushNotifsEnabled();
     } else {
       // We do this in case there was a crash, so we can clear deviceToken from
       // any other cookies it might be set for
       const deviceTokensMap: { [string]: string } = {};
       for (const keyserverID in this.props.deviceTokens) {
         const deviceToken = this.props.deviceTokens[keyserverID];
         if (deviceToken) {
           deviceTokensMap[keyserverID] = deviceToken;
         }
       }
       this.setDeviceToken(deviceTokensMap);
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.activeThread !== prevProps.activeThread) {
       this.clearNotifsOfThread();
     }
 
     if (
       this.props.connection.status === 'connected' &&
       (prevProps.connection.status !== 'connected' ||
         this.props.unreadCount !== prevProps.unreadCount)
     ) {
       this.updateBadgeCount();
     }
 
     for (const threadID of this.openThreadOnceReceived) {
       const threadInfo = this.props.threadInfos[threadID];
       if (threadInfo) {
         this.navigateToThread(threadInfo, false);
         this.openThreadOnceReceived.clear();
         break;
       }
     }
 
     if (this.props.loggedIn && !prevProps.loggedIn) {
       void this.ensurePushNotifsEnabled();
     } else {
       for (const keyserverID in this.props.deviceTokens) {
         const deviceToken = this.props.deviceTokens[keyserverID];
         const prevDeviceToken = prevProps.deviceTokens[keyserverID];
         if (!deviceToken && prevDeviceToken) {
           void this.ensurePushNotifsEnabled();
           break;
         }
       }
     }
 
     if (!this.props.loggedIn && prevProps.loggedIn) {
       this.clearAllNotifs();
       this.resetBadgeCount();
     }
 
     if (
       this.state.inAppNotifProps &&
       this.state.inAppNotifProps !== prevState.inAppNotifProps
     ) {
       Haptics.notificationAsync();
       InAppNotification.show();
     }
   }
 
   updateBadgeCount() {
     const curUnreadCount = this.props.unreadCount;
     if (Platform.OS === 'ios') {
       CommIOSNotifications.setBadgesCount(curUnreadCount);
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.setBadge(curUnreadCount);
     }
   }
 
   resetBadgeCount() {
     if (Platform.OS === 'ios') {
       CommIOSNotifications.setBadgesCount(0);
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.setBadge(0);
     }
   }
 
   clearAllNotifs() {
     if (Platform.OS === 'ios') {
       CommIOSNotifications.removeAllDeliveredNotifications();
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.removeAllDeliveredNotifications();
     }
   }
 
   clearNotifsOfThread() {
     const { activeThread } = this.props;
     if (!activeThread) {
       return;
     }
     if (Platform.OS === 'ios') {
       CommIOSNotifications.getDeliveredNotifications(notifications =>
         PushHandler.clearDeliveredIOSNotificationsForThread(
           activeThread,
           notifications,
         ),
       );
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.removeAllActiveNotificationsForThread(
         activeThread,
       );
     }
   }
 
   static clearDeliveredIOSNotificationsForThread(
     threadID: string,
     notifications: $ReadOnlyArray<CoreIOSNotificationDataWithRequestIdentifier>,
   ) {
     const identifiersToClear = [];
     for (const notification of notifications) {
       if (notification.threadID === threadID) {
         identifiersToClear.push(notification.identifier);
       }
     }
     if (identifiersToClear) {
       CommIOSNotifications.removeDeliveredNotifications(identifiersToClear);
     }
   }
 
   async ensurePushNotifsEnabled() {
     if (!this.props.loggedIn) {
       return;
     }
     if (Platform.OS === 'ios') {
       let missingDeviceToken = false;
       for (const keyserverID in this.props.deviceTokens) {
         const deviceToken = this.props.deviceTokens[keyserverID];
         if (deviceToken === null || deviceToken === undefined) {
           missingDeviceToken = true;
           break;
         }
       }
       await requestIOSPushPermissions(missingDeviceToken);
     } else if (Platform.OS === 'android') {
       await this.ensureAndroidPushNotifsEnabled();
     }
   }
 
   async ensureAndroidPushNotifsEnabled() {
     const permissionPromisesResult = await Promise.all([
       CommAndroidNotifications.hasPermission(),
       CommAndroidNotifications.canRequestNotificationsPermissionFromUser(),
     ]);
 
     let [hasPermission] = permissionPromisesResult;
     const [, canRequestPermission] = permissionPromisesResult;
 
     if (!hasPermission && canRequestPermission) {
       const permissionResponse = await (async () => {
         // We issue a call to sleep to match iOS behavior where prompt
         // doesn't appear immediately but after logged-out modal disappears
         await sleep(10);
         return await this.requestAndroidNotificationsPermission();
       })();
       hasPermission = permissionResponse;
     }
 
     if (!hasPermission) {
       this.failedToRegisterPushPermissionsAndroid(!canRequestPermission);
       return;
     }
 
     try {
       const fcmToken = await CommAndroidNotifications.getToken();
       await this.handleAndroidDeviceToken(fcmToken);
     } catch (e) {
       this.failedToRegisterPushPermissionsAndroid(!canRequestPermission);
     }
   }
 
   requestAndroidNotificationsPermission = (): Promise<boolean> => {
     if (!this.androidNotificationsPermissionPromise) {
       this.androidNotificationsPermissionPromise = (async () => {
         const notifPermission =
           await CommAndroidNotifications.requestNotificationsPermission();
         this.androidNotificationsPermissionPromise = undefined;
         return notifPermission;
       })();
     }
     return this.androidNotificationsPermissionPromise;
   };
 
   handleAndroidDeviceToken = async (deviceToken: string) => {
     this.registerPushPermissions(deviceToken);
     await this.handleInitialAndroidNotification();
   };
 
   async handleInitialAndroidNotification() {
     if (this.initialAndroidNotifHandled) {
       return;
     }
     this.initialAndroidNotifHandled = true;
     const initialNotifThreadID =
       await CommAndroidNotifications.getInitialNotificationThreadID();
     if (initialNotifThreadID) {
       await this.androidNotificationOpened(initialNotifThreadID);
     }
   }
 
   registerPushPermissions = (deviceToken: ?string) => {
     const deviceType = Platform.OS;
     if (deviceType !== 'android' && deviceType !== 'ios') {
       return;
     }
     if (deviceType === 'ios') {
       iosPushPermissionResponseReceived();
     }
     const deviceTokensMap: { [string]: ?string } = {};
     for (const keyserverID in this.props.deviceTokens) {
       const keyserverDeviceToken = this.props.deviceTokens[keyserverID];
       if (deviceToken !== keyserverDeviceToken) {
         deviceTokensMap[keyserverID] = deviceToken;
       }
     }
     this.setDeviceToken(deviceTokensMap);
   };
 
   setDeviceToken(deviceTokens: DeviceTokens) {
     void this.props.dispatchActionPromise(
       setDeviceTokenActionTypes,
       this.props.setDeviceToken(deviceTokens),
     );
   }
 
   setAllDeviceTokensNull = () => {
     void this.props.dispatchActionPromise(
       setDeviceTokenActionTypes,
       this.props.setDeviceTokenFanout(null),
     );
   };
 
   failedToRegisterPushPermissionsIOS = () => {
     this.setAllDeviceTokensNull();
     if (!this.props.loggedIn) {
       return;
     }
     iosPushPermissionResponseReceived();
   };
 
   failedToRegisterPushPermissionsAndroid = (
     shouldShowAlertOnAndroid: boolean,
   ) => {
     this.setAllDeviceTokensNull();
     if (!this.props.loggedIn) {
       return;
     }
     if (shouldShowAlertOnAndroid) {
       this.showNotifAlertOnAndroid();
     }
   };
 
   showNotifAlertOnAndroid() {
     const alertInfo = this.props.notifPermissionAlertInfo;
     if (shouldSkipPushPermissionAlert(alertInfo)) {
       return;
     }
     this.props.dispatch({
       type: recordNotifPermissionAlertActionType,
       payload: { time: Date.now() },
     });
 
     Alert.alert(
       'Unable to initialize notifs!',
       'Please check your network connection, make sure Google Play ' +
         'services are installed and enabled, and confirm that your Google ' +
         'Play credentials are valid in the Google Play Store.',
       undefined,
       { cancelable: true },
     );
   }
 
   navigateToThread(threadInfo: ThreadInfo, clearChatRoutes: boolean) {
     if (clearChatRoutes) {
       this.props.navigation.dispatch({
         type: replaceWithThreadActionType,
         payload: { threadInfo },
       });
     } else {
       this.props.navigateToThread({ threadInfo });
     }
   }
 
   onPressNotificationForThread(threadID: string, clearChatRoutes: boolean) {
     const threadInfo = this.props.threadInfos[threadID];
     if (threadInfo) {
       this.navigateToThread(threadInfo, clearChatRoutes);
     } else {
       this.openThreadOnceReceived.add(threadID);
     }
   }
 
   saveMessageInfos(rawMessageInfos: ?$ReadOnlyArray<RawMessageInfo>) {
     if (!rawMessageInfos) {
       return;
     }
     const { updatesCurrentAsOf } = this.props;
     this.props.dispatch({
       type: saveMessagesActionType,
       payload: { rawMessageInfos, updatesCurrentAsOf },
     });
   }
 
   iosForegroundNotificationReceived = (
     rawNotification: CoreIOSNotificationData,
   ) => {
     const notification = new CommIOSNotification(rawNotification);
     if (Date.now() < this.appStarted + 1500) {
       // On iOS, when the app is opened from a notif press, for some reason this
       // callback gets triggered before iosNotificationOpened. In fact this
       // callback shouldn't be triggered at all. To avoid weirdness we are
       // ignoring any foreground notification received within the first second
       // of the app being started, since they are most likely to be erroneous.
       notification.finish(
         CommIOSNotifications.getConstants().FETCH_RESULT_NO_DATA,
       );
       return;
     }
     const threadID = notification.getData().threadID;
     const messageInfos = notification.getData().messageInfos;
     this.saveMessageInfos(messageInfos);
 
     let title = notification.getData().title;
     let body = notification.getData().body;
 
     if (title && body) {
       ({ title, body } = mergePrefixIntoBody({ title, body }));
     } else {
       body = notification.getMessage();
     }
 
     if (body) {
       this.showInAppNotification(threadID, body, title);
     } else {
       console.log(
         'Non-rescind foreground notification without alert received!',
       );
     }
     notification.finish(
       CommIOSNotifications.getConstants().FETCH_RESULT_NEW_DATA,
     );
   };
 
   iosBackgroundNotificationReceived = (
     backgroundData: CoreIOSNotificationBackgroundData,
   ) => {
     const convertedMessageInfos = backgroundData.messageInfosArray
       .flatMap(convertNotificationMessageInfoToNewIDSchema)
       .filter(Boolean);
 
     if (!convertedMessageInfos.length) {
       return;
     }
 
     this.saveMessageInfos(convertedMessageInfos);
   };
 
   onPushNotifBootsApp() {
     if (
       this.props.rootContext &&
       this.props.rootContext.detectUnsupervisedBackground
     ) {
       this.props.rootContext.detectUnsupervisedBackground(false);
     }
   }
 
   iosNotificationOpened = (rawNotification: CoreIOSNotificationData) => {
     const notification = new CommIOSNotification(rawNotification);
     this.onPushNotifBootsApp();
     const threadID = notification.getData().threadID;
     const messageInfos = notification.getData().messageInfos;
     this.saveMessageInfos(messageInfos);
     this.onPressNotificationForThread(threadID, true);
     notification.finish(
       CommIOSNotifications.getConstants().FETCH_RESULT_NEW_DATA,
     );
   };
 
   showInAppNotification(threadID: string, message: string, title?: ?string) {
     if (threadID === this.props.activeThread) {
       return;
     }
     this.setState({
       inAppNotifProps: {
         customComponent: (
           <InAppNotif
             title={title}
             message={message}
             activeTheme={this.props.activeTheme}
           />
         ),
         blurType: this.props.activeTheme === 'dark' ? 'xlight' : 'dark',
         onPress: () => {
           InAppNotification.hide();
           this.onPressNotificationForThread(threadID, false);
         },
       },
     });
   }
 
   androidNotificationOpened = async (threadID: string) => {
     const convertedThreadID = convertNonPendingIDToNewSchema(
       threadID,
       ashoatKeyserverID,
     );
     this.onPushNotifBootsApp();
     this.onPressNotificationForThread(convertedThreadID, true);
   };
 
   androidMessageReceived = async (message: AndroidMessage) => {
     const parsedMessage = parseAndroidMessage(message);
     this.onPushNotifBootsApp();
 
     const { messageInfos } = parsedMessage;
     this.saveMessageInfos(messageInfos);
 
     handleAndroidMessage(
       parsedMessage,
       this.props.updatesCurrentAsOf,
       this.handleAndroidNotificationIfActive,
     );
   };
 
   handleAndroidNotificationIfActive = (
     threadID: string,
     texts: { body: string, title: ?string },
   ): boolean => {
     if (this.currentState !== 'active') {
       return false;
     }
     this.showInAppNotification(threadID, texts.body, texts.title);
     return true;
   };
 
   render(): React.Node {
     return (
       <InAppNotification
         {...this.state.inAppNotifProps}
         hideStatusBar={false}
       />
     );
   }
 }
 
 const ConnectedPushHandler: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedPushHandler(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const activeThread = activeMessageListSelector(navContext);
     const boundUnreadCount = useSelector(unreadCount);
     const deviceTokens = useSelector(deviceTokensSelector);
     const threadInfos = useSelector(threadInfoSelector);
     const notifPermissionAlertInfo = useSelector(
       state => state.notifPermissionAlertInfo,
     );
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const updatesCurrentAsOf = useSelector(
       updatesCurrentAsOfSelector(ashoatKeyserverID),
     );
     const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
     const loggedIn = useSelector(isLoggedIn);
     const navigateToThread = useNavigateToThread();
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const callSetDeviceToken = useSetDeviceToken();
     const callSetDeviceTokenFanout = useSetDeviceTokenFanout();
     const rootContext = React.useContext(RootContext);
     return (
       <PushHandler
         {...props}
         activeThread={activeThread}
         unreadCount={boundUnreadCount}
         deviceTokens={deviceTokens}
         threadInfos={threadInfos}
         notifPermissionAlertInfo={notifPermissionAlertInfo}
         connection={connection}
         updatesCurrentAsOf={updatesCurrentAsOf}
         activeTheme={activeTheme}
         loggedIn={loggedIn}
         navigateToThread={navigateToThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         setDeviceToken={callSetDeviceToken}
         setDeviceTokenFanout={callSetDeviceTokenFanout}
         rootContext={rootContext}
       />
     );
   });
 
 export default ConnectedPushHandler;
diff --git a/native/roles/change-roles-header-right-button.react.js b/native/roles/change-roles-header-right-button.react.js
index a3182ef90..643190daf 100644
--- a/native/roles/change-roles-header-right-button.react.js
+++ b/native/roles/change-roles-header-right-button.react.js
@@ -1,88 +1,88 @@
 // @flow
 
 import { useNavigation } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
   useChangeThreadMemberRoles,
   changeThreadMemberRolesActionTypes,
 } from 'lib/actions/thread-actions.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import type { NavigationRoute } from '../navigation/route-names';
 import { useColors } from '../themes/colors.js';
 
 type Props = {
   +route: NavigationRoute<'ChangeRolesScreen'>,
   +shouldRoleChangeBeDisabled: boolean,
 };
 
 function ChangeRolesHeaderRightButton(props: Props): React.Node {
   const { threadInfo, memberInfo, role: selectedRole } = props.route.params;
   const { shouldRoleChangeBeDisabled } = props;
   const { role: initialRole } = memberInfo;
   invariant(initialRole, 'Expected initial role to be defined');
   invariant(selectedRole, 'Expected selected role to be defined');
   const navigation = useNavigation();
 
   const callChangeThreadMemberRoles = useChangeThreadMemberRoles();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const { disabledButton, purpleLink } = useColors();
   const textStyle = React.useMemo(
     () => ({
       color: shouldRoleChangeBeDisabled ? disabledButton : purpleLink,
       marginRight: 10,
     }),
     [disabledButton, purpleLink, shouldRoleChangeBeDisabled],
   );
 
   const handleSave = React.useCallback(() => {
     if (selectedRole === initialRole) {
       navigation.goBack();
       return;
     }
 
     void dispatchActionPromise(
       changeThreadMemberRolesActionTypes,
       callChangeThreadMemberRoles({
         threadID: threadInfo.id,
         memberIDs: [memberInfo.id],
         newRole: selectedRole,
       }),
     );
 
     navigation.goBack();
   }, [
     callChangeThreadMemberRoles,
     dispatchActionPromise,
     initialRole,
     memberInfo.id,
     navigation,
     selectedRole,
     threadInfo.id,
   ]);
 
   const saveButton = React.useMemo(() => {
     if (shouldRoleChangeBeDisabled) {
       return (
         <View>
           <Text style={textStyle}>Save</Text>
         </View>
       );
     }
 
     return (
       <TouchableOpacity onPress={handleSave}>
         <Text style={textStyle}>Save</Text>
       </TouchableOpacity>
     );
   }, [shouldRoleChangeBeDisabled, textStyle, handleSave]);
 
   return saveButton;
 }
 
 export default ChangeRolesHeaderRightButton;
diff --git a/native/roles/create-roles-header-right-button.react.js b/native/roles/create-roles-header-right-button.react.js
index adcd5cc27..6cd233f8a 100644
--- a/native/roles/create-roles-header-right-button.react.js
+++ b/native/roles/create-roles-header-right-button.react.js
@@ -1,119 +1,119 @@
 // @flow
 
 import { useNavigation } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import { TouchableOpacity, Text } from 'react-native';
 
 import {
   useModifyCommunityRole,
   modifyCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import type { NavigationRoute } from '../navigation/route-names';
 import { useStyles } from '../themes/colors.js';
 
 type Props = {
   +route: NavigationRoute<'CreateRolesScreen'>,
   +setRoleCreationFailed: boolean => mixed,
 };
 
 function CreateRolesHeaderRightButton(props: Props): React.Node {
   const { threadInfo, action, existingRoleID, roleName, rolePermissions } =
     props.route.params;
   const { setRoleCreationFailed } = props;
   const navigation = useNavigation();
   const styles = useStyles(unboundStyles);
 
   const callModifyCommunityRole = useModifyCommunityRole();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const threadRoleNames = React.useMemo(
     () => values(threadInfo.roles).map(role => role.name),
     [threadInfo.roles],
   );
 
   const onPressCreate = React.useCallback(() => {
     if (threadRoleNames.includes(roleName) && action === 'create_role') {
       setRoleCreationFailed(true);
       return;
     }
 
     let callModifyCommunityRoleParams = {};
     if (action === 'create_role') {
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         action,
         name: roleName,
         permissions: [...rolePermissions],
       };
     } else {
       invariant(existingRoleID, 'existingRoleID should be set');
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         action,
         existingRoleID,
         name: roleName,
         permissions: [...rolePermissions],
       };
     }
 
     void dispatchActionPromise(
       modifyCommunityRoleActionTypes,
       callModifyCommunityRole(callModifyCommunityRoleParams),
     );
 
     navigation.goBack();
   }, [
     callModifyCommunityRole,
     dispatchActionPromise,
     threadInfo,
     action,
     existingRoleID,
     roleName,
     rolePermissions,
     navigation,
     setRoleCreationFailed,
     threadRoleNames,
   ]);
 
   const headerRightText = action === 'create_role' ? 'Create' : 'Save';
   const shouldHeaderRightBeDisabled = roleName.length === 0;
   const createButton = React.useMemo(() => {
     const textStyle = shouldHeaderRightBeDisabled
       ? styles.createButtonDisabled
       : styles.createButton;
 
     return (
       <TouchableOpacity
         onPress={onPressCreate}
         disabled={shouldHeaderRightBeDisabled}
       >
         <Text style={textStyle}>{headerRightText}</Text>
       </TouchableOpacity>
     );
   }, [
     shouldHeaderRightBeDisabled,
     headerRightText,
     styles.createButtonDisabled,
     styles.createButton,
     onPressCreate,
   ]);
 
   return createButton;
 }
 
 const unboundStyles = {
   createButtonDisabled: {
     color: 'disabledButton',
     marginRight: 10,
   },
   createButton: {
     color: 'purpleLink',
     marginRight: 10,
   },
 };
 
 export default CreateRolesHeaderRightButton;
diff --git a/native/roles/role-utils.react.js b/native/roles/role-utils.react.js
index bc960a104..08ddc1433 100644
--- a/native/roles/role-utils.react.js
+++ b/native/roles/role-utils.react.js
@@ -1,62 +1,62 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useDeleteCommunityRole,
   deleteCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { constructRoleDeletionMessagePrompt } from 'lib/utils/role-utils.js';
 
 import Alert from '../utils/alert.js';
 
 function useDisplayDeleteRoleAlert(
   threadInfo: ThreadInfo,
   existingRoleID: string,
   defaultRoleID: string,
   memberCount: number,
 ): () => void {
   const defaultRoleName = threadInfo.roles[defaultRoleID].name;
   const callDeleteCommunityRole = useDeleteCommunityRole();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const onDeleteRole = React.useCallback(() => {
     void dispatchActionPromise(
       deleteCommunityRoleActionTypes,
       callDeleteCommunityRole({
         community: threadInfo.id,
         roleID: existingRoleID,
       }),
     );
   }, [
     callDeleteCommunityRole,
     dispatchActionPromise,
     existingRoleID,
     threadInfo.id,
   ]);
 
   const message = constructRoleDeletionMessagePrompt(
     defaultRoleName,
     memberCount,
   );
 
   return React.useCallback(
     () =>
       Alert.alert('Delete role', message, [
         {
           text: 'Yes, delete role',
           style: 'destructive',
           onPress: onDeleteRole,
         },
         {
           text: 'Cancel',
           style: 'cancel',
         },
       ]),
     [message, onDeleteRole],
   );
 }
 
 export { useDisplayDeleteRoleAlert };
diff --git a/native/socket.react.js b/native/socket.react.js
index 48f855fd6..6ca5f28fa 100644
--- a/native/socket.react.js
+++ b/native/socket.react.js
@@ -1,180 +1,178 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { preRequestUserStateForSingleKeyserverSelector } from 'lib/selectors/account-selectors.js';
 import {
   cookieSelector,
   urlPrefixSelector,
   connectionSelector,
   lastCommunicatedPlatformDetailsSelector,
 } from 'lib/selectors/keyserver-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import { accountHasPassword } from 'lib/shared/account-utils.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import Socket, { type BaseSocketProps } from 'lib/socket/socket.react.js';
 import { logInActionSources } from 'lib/types/account-types.js';
 import { setConnectionIssueActionType } from 'lib/types/socket-types.js';
-import {
-  useDispatchActionPromise,
-  resolveKeyserverSessionInvalidation,
-} from 'lib/utils/action-utils.js';
+import { resolveKeyserverSessionInvalidation } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import { InputStateContext } from './input/input-state.js';
 import {
   activeMessageListSelector,
   nativeCalendarQuery,
 } from './navigation/nav-selectors.js';
 import { NavContext } from './navigation/navigation-context.js';
 import { useSelector } from './redux/redux-utils.js';
 import { noDataAfterPolicyAcknowledgmentSelector } from './selectors/account-selectors.js';
 import {
   openSocketSelector,
   sessionIdentificationSelector,
   nativeGetClientResponsesSelector,
   nativeSessionStateFuncSelector,
 } from './selectors/socket-selectors.js';
 import Alert from './utils/alert.js';
 import { nativeNotificationsSessionCreator } from './utils/crypto-utils.js';
 import { decompressMessage } from './utils/decompress.js';
 
 const NativeSocket: React.ComponentType<BaseSocketProps> =
   React.memo<BaseSocketProps>(function NativeSocket(props: BaseSocketProps) {
     const inputState = React.useContext(InputStateContext);
     const navContext = React.useContext(NavContext);
 
     const cookie = useSelector(cookieSelector(ashoatKeyserverID));
     const urlPrefix = useSelector(urlPrefixSelector(ashoatKeyserverID));
     invariant(urlPrefix, 'missing urlPrefix for given keyserver id');
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const frozen = useSelector(state => state.frozen);
     const active = useSelector(
       state => isLoggedIn(state) && state.lifecycleState !== 'background',
     );
     const noDataAfterPolicyAcknowledgment = useSelector(
       noDataAfterPolicyAcknowledgmentSelector(ashoatKeyserverID),
     );
     const currentUserInfo = useSelector(state => state.currentUserInfo);
 
     const openSocket = useSelector(openSocketSelector(ashoatKeyserverID));
     invariant(openSocket, 'openSocket failed to be created');
     const sessionIdentification = useSelector(
       sessionIdentificationSelector(ashoatKeyserverID),
     );
     const preRequestUserState = useSelector(
       preRequestUserStateForSingleKeyserverSelector(ashoatKeyserverID),
     );
 
     const getInitialNotificationsEncryptedMessage =
       useInitialNotificationsEncryptedMessage(
         nativeNotificationsSessionCreator,
       );
 
     const getClientResponses = useSelector(state =>
       nativeGetClientResponsesSelector({
         redux: state,
         navContext,
         getInitialNotificationsEncryptedMessage,
       }),
     );
     const sessionStateFunc = useSelector(state =>
       nativeSessionStateFuncSelector(ashoatKeyserverID)({
         redux: state,
         navContext,
       }),
     );
     const currentCalendarQuery = useSelector(state =>
       nativeCalendarQuery({
         redux: state,
         navContext,
       }),
     );
 
     const canSendReports = useSelector(
       state =>
         !state.frozen &&
         state.connectivity.hasWiFi &&
         (!inputState || !inputState.uploadInProgress()),
     );
 
     const activeThread = React.useMemo(() => {
       if (!active) {
         return null;
       }
       return activeMessageListSelector(navContext);
     }, [active, navContext]);
 
     const lastCommunicatedPlatformDetails = useSelector(
       lastCommunicatedPlatformDetailsSelector(ashoatKeyserverID),
     );
 
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
 
     const socketCrashLoopRecovery = React.useCallback(async () => {
       if (!accountHasPassword(currentUserInfo)) {
         void dispatch({
           type: setConnectionIssueActionType,
           payload: {
             keyserverID: ashoatKeyserverID,
             connectionIssue: 'policy_acknowledgement_socket_crash_loop',
           },
         });
         Alert.alert(
           'Log in needed',
           'After acknowledging the policies, we need you to log in to your account again',
           [{ text: 'OK' }],
         );
         return;
       }
 
       await resolveKeyserverSessionInvalidation(
         dispatch,
         cookie,
         urlPrefix,
         logInActionSources.refetchUserDataAfterAcknowledgment,
         ashoatKeyserverID,
         getInitialNotificationsEncryptedMessage,
       );
     }, [
       cookie,
       currentUserInfo,
       dispatch,
       urlPrefix,
       getInitialNotificationsEncryptedMessage,
     ]);
 
     return (
       <Socket
         {...props}
         active={active}
         openSocket={openSocket}
         getClientResponses={getClientResponses}
         activeThread={activeThread}
         sessionStateFunc={sessionStateFunc}
         sessionIdentification={sessionIdentification}
         cookie={cookie}
         urlPrefix={urlPrefix}
         connection={connection}
         currentCalendarQuery={currentCalendarQuery}
         canSendReports={canSendReports}
         frozen={frozen}
         preRequestUserState={preRequestUserState}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         noDataAfterPolicyAcknowledgment={noDataAfterPolicyAcknowledgment}
         socketCrashLoopRecovery={socketCrashLoopRecovery}
         getInitialNotificationsEncryptedMessage={
           getInitialNotificationsEncryptedMessage
         }
         lastCommunicatedPlatformDetails={lastCommunicatedPlatformDetails}
         decompressSocketMessage={decompressMessage}
       />
     );
   });
 
 export default NativeSocket;
diff --git a/web/account/siwe-login-form.react.js b/web/account/siwe-login-form.react.js
index cb0c65f96..a433dad7a 100644
--- a/web/account/siwe-login-form.react.js
+++ b/web/account/siwe-login-form.react.js
@@ -1,267 +1,265 @@
 // @flow
 
 import '@rainbow-me/rainbowkit/styles.css';
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 import { useAccount, useWalletClient } from 'wagmi';
 
 import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
 import {
   getSIWENonce,
   getSIWENonceActionTypes,
   siweAuth,
   siweAuthActionTypes,
 } from 'lib/actions/siwe-actions.js';
 import ConnectedWalletInfo from 'lib/components/connected-wallet-info.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import stores from 'lib/facts/stores.js';
 import { logInExtraInfoSelector } from 'lib/selectors/account-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type {
   LogInStartingPayload,
   LogInExtraInfo,
 } from 'lib/types/account-types.js';
 import type { OLMIdentityKeys } from 'lib/types/crypto-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import { ServerError } from 'lib/utils/errors.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import {
   createSIWEMessage,
   getSIWEStatementForPublicKey,
   siweMessageSigningExplanationStatements,
 } from 'lib/utils/siwe-utils.js';
 
 import { useGetSignedIdentityKeysBlob } from './account-hooks.js';
 import HeaderSeparator from './header-separator.react.js';
 import css from './siwe.css';
 import Button from '../components/button.react.js';
 import OrBreak from '../components/or-break.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type SIWELogInError = 'account_does_not_exist';
 
 type SIWELoginFormProps = {
   +cancelSIWEAuthFlow: () => void,
 };
 
 const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector(
   getSIWENonceActionTypes,
 );
 const siweAuthLoadingStatusSelector =
   createLoadingStatusSelector(siweAuthActionTypes);
 function SIWELoginForm(props: SIWELoginFormProps): React.Node {
   const { address } = useAccount();
   const { data: signer } = useWalletClient();
   const dispatchActionPromise = useDispatchActionPromise();
   const getSIWENonceCall = useServerCall(getSIWENonce);
   const getSIWENonceCallLoadingStatus = useSelector(
     getSIWENonceLoadingStatusSelector,
   );
   const siweAuthLoadingStatus = useSelector(siweAuthLoadingStatusSelector);
   const siweAuthCall = useServerCall(siweAuth);
   const logInExtraInfo = useSelector(logInExtraInfoSelector);
 
   const [siweNonce, setSIWENonce] = React.useState<?string>(null);
 
   const siweNonceShouldBeFetched =
     !siweNonce && getSIWENonceCallLoadingStatus !== 'loading';
 
   React.useEffect(() => {
     if (!siweNonceShouldBeFetched) {
       return;
     }
     void dispatchActionPromise(
       getSIWENonceActionTypes,
       (async () => {
         const response = await getSIWENonceCall();
         setSIWENonce(response);
       })(),
     );
   }, [dispatchActionPromise, getSIWENonceCall, siweNonceShouldBeFetched]);
 
   const primaryIdentityPublicKeys: ?OLMIdentityKeys = useSelector(
     state => state.cryptoStore?.primaryIdentityKeys,
   );
 
   const getSignedIdentityKeysBlob = useGetSignedIdentityKeysBlob();
 
   const callSIWEAuthEndpoint = React.useCallback(
     async (message: string, signature: string, extraInfo: LogInExtraInfo) => {
       const signedIdentityKeysBlob = await getSignedIdentityKeysBlob();
       invariant(
         signedIdentityKeysBlob,
         'signedIdentityKeysBlob must be set in attemptSIWEAuth',
       );
       try {
         return await siweAuthCall({
           message,
           signature,
           signedIdentityKeysBlob,
           doNotRegister: true,
           ...extraInfo,
         });
       } catch (e) {
         if (
           e instanceof ServerError &&
           e.message === 'account_does_not_exist'
         ) {
           setError('account_does_not_exist');
         }
         throw e;
       }
     },
     [getSignedIdentityKeysBlob, siweAuthCall],
   );
 
   const attemptSIWEAuth = React.useCallback(
     (message: string, signature: string) => {
       return dispatchActionPromise(
         siweAuthActionTypes,
         callSIWEAuthEndpoint(message, signature, logInExtraInfo),
         undefined,
         ({ calendarQuery: logInExtraInfo.calendarQuery }: LogInStartingPayload),
       );
     },
     [callSIWEAuthEndpoint, dispatchActionPromise, logInExtraInfo],
   );
 
   const dispatch = useDispatch();
   const onSignInButtonClick = React.useCallback(async () => {
     invariant(signer, 'signer must be present during SIWE attempt');
     invariant(siweNonce, 'nonce must be present during SIWE attempt');
     invariant(
       primaryIdentityPublicKeys,
       'primaryIdentityPublicKeys must be present during SIWE attempt',
     );
     const statement = getSIWEStatementForPublicKey(
       primaryIdentityPublicKeys.ed25519,
     );
     const message = createSIWEMessage(address, statement, siweNonce);
     const signature = await signer.signMessage({ message });
     await attemptSIWEAuth(message, signature);
     dispatch({
       type: setDataLoadedActionType,
       payload: {
         dataLoaded: true,
       },
     });
   }, [
     address,
     attemptSIWEAuth,
     primaryIdentityPublicKeys,
     signer,
     siweNonce,
     dispatch,
   ]);
 
   const { cancelSIWEAuthFlow } = props;
 
   const backButtonColor = React.useMemo(
     () => ({ backgroundColor: '#211E2D' }),
     [],
   );
 
   const signInButtonColor = React.useMemo(
     () => ({ backgroundColor: '#6A20E3' }),
     [],
   );
 
   const [error, setError] = React.useState<?SIWELogInError>();
 
   const mainMiddleAreaClassName = classNames({
     [css.mainMiddleArea]: true,
     [css.hidden]: !!error,
   });
   const errorOverlayClassNames = classNames({
     [css.errorOverlay]: true,
     [css.hidden]: !error,
   });
 
   if (
     siweAuthLoadingStatus === 'loading' ||
     !siweNonce ||
     !primaryIdentityPublicKeys
   ) {
     return (
       <div className={css.loadingIndicator}>
         <LoadingIndicator status="loading" size="large" />
       </div>
     );
   }
 
   let errorText;
   if (error === 'account_does_not_exist') {
     errorText = (
       <>
         <p className={css.redText}>
           No Comm account found for that Ethereum wallet!
         </p>
         <p>
           We require that users register on their mobile devices. Comm relies on
           a primary device capable of scanning QR codes in order to authorize
           secondary devices.
         </p>
         <p>
           You can install our iOS app&nbsp;
           <a href={stores.appStoreUrl} target="_blank" rel="noreferrer">
             here
           </a>
           , or our Android app&nbsp;
           <a href={stores.googlePlayUrl} target="_blank" rel="noreferrer">
             here
           </a>
           .
         </p>
       </>
     );
   }
 
   return (
     <div className={css.siweLoginFormContainer}>
       <h4>Sign in with Ethereum</h4>
       <HeaderSeparator />
       <div className={css.walletConnectedText}>
         <p>Wallet Connected</p>
       </div>
       <div className={css.connectButtonContainer}>
         <ConnectedWalletInfo />
       </div>
       <div className={css.middleArea}>
         <div className={mainMiddleAreaClassName}>
           <div className={css.messageSigningStatements}>
             <p>{siweMessageSigningExplanationStatements}</p>
             <p>
               By signing up, you agree to our{' '}
               <a href="https://comm.app/terms">Terms of Use</a> &{' '}
               <a href="https://comm.app/privacy">Privacy Policy</a>.
             </p>
           </div>
           <Button
             variant="filled"
             onClick={onSignInButtonClick}
             buttonColor={signInButtonColor}
           >
             Sign in using this wallet
           </Button>
         </div>
         <div className={errorOverlayClassNames}>{errorText}</div>
       </div>
       <OrBreak />
       <Button
         variant="filled"
         onClick={cancelSIWEAuthFlow}
         buttonColor={backButtonColor}
       >
         <SWMansionIcon icon="chevron-left" size={18} />
         Back to sign in with username
       </Button>
     </div>
   );
 }
 
 export default SIWELoginForm;
diff --git a/web/account/traditional-login-form.react.js b/web/account/traditional-login-form.react.js
index ccb59f72f..6e38021bd 100644
--- a/web/account/traditional-login-form.react.js
+++ b/web/account/traditional-login-form.react.js
@@ -1,189 +1,189 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { useLogIn, logInActionTypes } from 'lib/actions/user-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { logInExtraInfoSelector } from 'lib/selectors/account-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   oldValidUsernameRegex,
   validEmailRegex,
 } from 'lib/shared/account-utils.js';
 import type {
   LogInExtraInfo,
   LogInStartingPayload,
 } from 'lib/types/account-types.js';
 import { logInActionSources } from 'lib/types/account-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { useGetSignedIdentityKeysBlob } from './account-hooks.js';
 import HeaderSeparator from './header-separator.react.js';
 import css from './log-in-form.css';
 import PasswordInput from './password-input.react.js';
 import Button from '../components/button.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import Input from '../modals/input.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes);
 function TraditionalLoginForm(): React.Node {
   const inputDisabled = useSelector(loadingStatusSelector) === 'loading';
   const loginExtraInfo = useSelector(logInExtraInfoSelector);
   const callLogIn = useLogIn();
   const dispatchActionPromise = useDispatchActionPromise();
   const modalContext = useModalContext();
 
   const getSignedIdentityKeysBlob = useGetSignedIdentityKeysBlob();
 
   const usernameInputRef = React.useRef<?HTMLInputElement>();
   React.useEffect(() => {
     usernameInputRef.current?.focus();
   }, []);
 
   const [username, setUsername] = React.useState<string>('');
   const onUsernameChange = React.useCallback(
     (e: SyntheticEvent<HTMLInputElement>) => {
       invariant(e.target instanceof HTMLInputElement, 'target not input');
       setUsername(e.target.value);
     },
     [],
   );
 
   const onUsernameBlur = React.useCallback(() => {
     setUsername(untrimmedUsername => untrimmedUsername.trim());
   }, []);
 
   const [password, setPassword] = React.useState<string>('');
   const onPasswordChange = React.useCallback(
     (e: SyntheticEvent<HTMLInputElement>) => {
       invariant(e.target instanceof HTMLInputElement, 'target not input');
       setPassword(e.target.value);
     },
     [],
   );
 
   const [errorMessage, setErrorMessage] = React.useState<string>('');
 
   const logInAction = React.useCallback(
     async (extraInfo: LogInExtraInfo) => {
       const signedIdentityKeysBlob = await getSignedIdentityKeysBlob();
       try {
         invariant(
           signedIdentityKeysBlob,
           'signedIdentityKeysBlob must be set in logInAction',
         );
 
         const result = await callLogIn({
           ...extraInfo,
           username,
           password,
           logInActionSource: logInActionSources.logInFromWebForm,
           signedIdentityKeysBlob,
         });
         modalContext.popModal();
         return result;
       } catch (e) {
         setUsername('');
         setPassword('');
         if (e.message === 'invalid_credentials') {
           setErrorMessage('incorrect username or password');
         } else {
           setErrorMessage('unknown error');
         }
         usernameInputRef.current?.focus();
         throw e;
       }
     },
     [callLogIn, modalContext, password, getSignedIdentityKeysBlob, username],
   );
 
   const onSubmit = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       event.preventDefault();
 
       if (username.search(validEmailRegex) > -1) {
         setUsername('');
         setErrorMessage('usernames only, not emails');
         usernameInputRef.current?.focus();
         return;
       } else if (username.search(oldValidUsernameRegex) === -1) {
         setUsername('');
         setErrorMessage('alphanumeric usernames only');
         usernameInputRef.current?.focus();
         return;
       } else if (password === '') {
         setErrorMessage('password is empty');
         usernameInputRef.current?.focus();
         return;
       }
       void dispatchActionPromise(
         logInActionTypes,
         logInAction(loginExtraInfo),
         undefined,
         ({ calendarQuery: loginExtraInfo.calendarQuery }: LogInStartingPayload),
       );
     },
     [dispatchActionPromise, logInAction, loginExtraInfo, username, password],
   );
 
   const loginButtonContent = React.useMemo(() => {
     if (inputDisabled) {
       return <LoadingIndicator status="loading" />;
     }
     return 'Sign in';
   }, [inputDisabled]);
 
   const signInButtonColor = React.useMemo(
     () => ({ backgroundColor: '#6A20E3' }),
     [],
   );
 
   return (
     <form method="POST">
       <div>
         <h4>Sign in to Comm</h4>
         <HeaderSeparator />
         <div className={css.form_title}>Username</div>
         <div className={css.form_content}>
           <Input
             className={css.input}
             type="text"
             placeholder="Username"
             value={username}
             onChange={onUsernameChange}
             onBlur={onUsernameBlur}
             ref={usernameInputRef}
             disabled={inputDisabled}
           />
         </div>
       </div>
       <div>
         <div className={css.form_title}>Password</div>
         <div className={css.form_content}>
           <PasswordInput
             className={css.input}
             value={password}
             onChange={onPasswordChange}
             disabled={inputDisabled}
           />
         </div>
       </div>
       <div className={css.form_footer}>
         <Button
           variant="filled"
           type="submit"
           disabled={inputDisabled}
           onClick={onSubmit}
           buttonColor={signInButtonColor}
         >
           {loginButtonContent}
         </Button>
         <div className={css.modal_form_error}>{errorMessage}</div>
       </div>
     </form>
   );
 }
 
 export default TraditionalLoginForm;
diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
index f057a3dee..36452f4bd 100644
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -1,292 +1,292 @@
 // @flow
 
 import dateFormat from 'dateformat';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   updateCalendarQueryActionTypes,
   useUpdateCalendarQuery,
 } from 'lib/actions/entry-actions.js';
 import type { UpdateCalendarQueryInput } from 'lib/actions/entry-actions.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { currentDaysToEntries } from 'lib/selectors/thread-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import {
   type EntryInfo,
   type CalendarQuery,
   type CalendarQueryUpdateResult,
   type CalendarQueryUpdateStartingPayload,
 } from 'lib/types/entry-types.js';
-import {
-  type DispatchActionPromise,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
 import {
   getDate,
   dateString,
   startDateForYearAndMonth,
   endDateForYearAndMonth,
 } from 'lib/utils/date-utils.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import css from './calendar.css';
 import Day from './day.react.js';
 import FilterPanel from './filter-panel.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   yearAssertingSelector,
   monthAssertingSelector,
   webCalendarQuery,
 } from '../selectors/nav-selectors.js';
 import type { NavInfo } from '../types/nav-types.js';
 import { canonicalURLFromReduxState } from '../url-utils.js';
 
 type StartAndEndDates = {
   +startDate: string,
   +endDate: string,
 };
 
 type BaseProps = {
   +url: string,
 };
 type Props = {
   ...BaseProps,
   +year: number,
   +month: number,
   +daysToEntries: { +[dayString: string]: EntryInfo[] },
   +navInfo: NavInfo,
   +currentCalendarQuery: () => CalendarQuery,
   +loggedIn: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +updateCalendarQuery: (
     input: UpdateCalendarQueryInput,
   ) => Promise<CalendarQueryUpdateResult>,
 };
 type State = {
   +filterPanelOpen: boolean,
 };
 class Calendar extends React.PureComponent<Props, State> {
   state: State = {
     filterPanelOpen: false,
   };
 
   getDate(
     dayOfMonth: number,
     monthInput: ?number = undefined,
     yearInput: ?number = undefined,
   ): Date {
     return getDate(
       yearInput ? yearInput : this.props.year,
       monthInput ? monthInput : this.props.month,
       dayOfMonth,
     );
   }
 
   prevMonthDates(): StartAndEndDates {
     const { year, month } = this.props;
     const lastMonthDate = getDate(year, month - 1, 1);
     const prevYear = lastMonthDate.getFullYear();
     const prevMonth = lastMonthDate.getMonth() + 1;
     return {
       startDate: startDateForYearAndMonth(prevYear, prevMonth),
       endDate: endDateForYearAndMonth(prevYear, prevMonth),
     };
   }
 
   nextMonthDates(): StartAndEndDates {
     const { year, month } = this.props;
     const nextMonthDate = getDate(year, month + 1, 1);
     const nextYear = nextMonthDate.getFullYear();
     const nextMonth = nextMonthDate.getMonth() + 1;
     return {
       startDate: startDateForYearAndMonth(nextYear, nextMonth),
       endDate: endDateForYearAndMonth(nextYear, nextMonth),
     };
   }
 
   render(): React.Node {
     const { year, month } = this.props;
     const monthName = dateFormat(getDate(year, month, 1), 'mmmm');
     const prevURL = canonicalURLFromReduxState(
       { ...this.props.navInfo, ...this.prevMonthDates() },
       this.props.url,
       this.props.loggedIn,
     );
     const nextURL = canonicalURLFromReduxState(
       { ...this.props.navInfo, ...this.nextMonthDates() },
       this.props.url,
       this.props.loggedIn,
     );
 
     const lastDayOfMonth = this.getDate(0, this.props.month + 1);
     const totalDaysInMonth = lastDayOfMonth.getDate();
     const firstDayToPrint = 1 - this.getDate(1).getDay();
     const lastDayToPrint = totalDaysInMonth + 6 - lastDayOfMonth.getDay();
 
     const rows = [];
     let columns = [];
     let week = 1;
     let tabIndex = 1;
     for (
       let curDayOfMonth = firstDayToPrint;
       curDayOfMonth <= lastDayToPrint;
       curDayOfMonth++
     ) {
       if (curDayOfMonth < 1 || curDayOfMonth > totalDaysInMonth) {
         columns.push(<td key={curDayOfMonth} />);
       } else {
         const dayString = dateString(
           this.props.year,
           this.props.month,
           curDayOfMonth,
         );
         const entries = this.props.daysToEntries[dayString];
         invariant(
           entries,
           'the currentDaysToEntries selector should make sure all dayStrings ' +
             `in the current range have entries, but ${dayString} did not`,
         );
         columns.push(
           <Day
             dayString={dayString}
             entryInfos={entries}
             key={curDayOfMonth}
             startingTabIndex={tabIndex}
           />,
         );
         tabIndex += entries.length;
       }
       if (columns.length === 7) {
         rows.push(<tr key={week++}>{columns}</tr>);
         columns = [];
       }
     }
 
     let filterPanel = null;
     let filterButton = null;
     if (this.state.filterPanelOpen) {
       filterPanel = <FilterPanel toggleFilters={this.toggleFilters} />;
     } else {
       filterButton = (
         <a className={css.filtersButton} onClick={this.toggleFilters}>
           <SWMansionIcon icon="filters-2" size={16} />
         </a>
       );
     }
 
     return (
       <div className={css.container}>
         {filterPanel}
         <div className={css.content}>
           <div>
             {filterButton}
             <nav className={css.nav}>
               <a
                 className={css.monthLink}
                 href={prevURL}
                 onClick={this.onClickPrevURL}
               >
                 <SWMansionIcon icon="chevron-left" size={24} />
               </a>
               <h2 className={css.monthName}>
                 {' '}
                 {monthName} {year}{' '}
               </h2>
               <a
                 className={css.monthLink}
                 href={nextURL}
                 onClick={this.onClickNextURL}
               >
                 <SWMansionIcon icon="chevron-right" size={24} />
               </a>
             </nav>
           </div>
           <table className={css.calendar}>
             <thead>
               <tr>
                 <th>Sunday</th>
                 <th>Monday</th>
                 <th>Tuesday</th>
                 <th>Wednesday</th>
                 <th>Thursday</th>
                 <th>Friday</th>
                 <th>Saturday</th>
               </tr>
             </thead>
             <tbody>{rows}</tbody>
           </table>
         </div>
       </div>
     );
   }
 
   toggleFilters = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.setState({ filterPanelOpen: !this.state.filterPanelOpen });
   };
 
   onClickPrevURL = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const currentCalendarQuery = this.props.currentCalendarQuery();
     const newCalendarQuery = {
       ...currentCalendarQuery,
       ...this.prevMonthDates(),
     };
     void this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery({
         calendarQuery: newCalendarQuery,
         reduxAlreadyUpdated: true,
       }),
       undefined,
       ({ calendarQuery: newCalendarQuery }: CalendarQueryUpdateStartingPayload),
     );
   };
 
   onClickNextURL = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const currentCalendarQuery = this.props.currentCalendarQuery();
     const newCalendarQuery = {
       ...currentCalendarQuery,
       ...this.nextMonthDates(),
     };
     void this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery({
         calendarQuery: newCalendarQuery,
         reduxAlreadyUpdated: true,
       }),
       undefined,
       ({ calendarQuery: newCalendarQuery }: CalendarQueryUpdateStartingPayload),
     );
   };
 }
 
 const ConnectedCalendar: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCalendar(props) {
     const year = useSelector(yearAssertingSelector);
     const month = useSelector(monthAssertingSelector);
     const daysToEntries = useSelector(currentDaysToEntries);
     const navInfo = useSelector(state => state.navInfo);
     const currentCalendarQuery = useSelector(webCalendarQuery);
     const loggedIn = useSelector(isLoggedIn);
     const callUpdateCalendarQuery = useUpdateCalendarQuery();
     const dispatchActionPromise = useDispatchActionPromise();
 
     return (
       <Calendar
         {...props}
         year={year}
         month={month}
         daysToEntries={daysToEntries}
         navInfo={navInfo}
         currentCalendarQuery={currentCalendarQuery}
         loggedIn={loggedIn}
         dispatchActionPromise={dispatchActionPromise}
         updateCalendarQuery={callUpdateCalendarQuery}
       />
     );
   },
 );
 
 export default ConnectedCalendar;
diff --git a/web/calendar/entry.react.js b/web/calendar/entry.react.js
index 7d60f3056..5b9f40361 100644
--- a/web/calendar/entry.react.js
+++ b/web/calendar/entry.react.js
@@ -1,505 +1,505 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   createEntryActionTypes,
   useCreateEntry,
   saveEntryActionTypes,
   useSaveEntry,
   deleteEntryActionTypes,
   useDeleteEntry,
   concurrentModificationResetActionType,
 } from 'lib/actions/entry-actions.js';
 import {
   useModalContext,
   type PushModal,
 } from 'lib/components/modal-provider.react.js';
 import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { entryKey } from 'lib/shared/entry-utils.js';
 import { threadHasPermission } from 'lib/shared/thread-utils.js';
 import {
   type EntryInfo,
   type CreateEntryInfo,
   type SaveEntryInfo,
   type SaveEntryResult,
   type SaveEntryPayload,
   type CreateEntryPayload,
   type DeleteEntryInfo,
   type DeleteEntryResult,
   type CalendarQuery,
 } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
-import {
-  type DispatchActionPromise,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
 import { dateString } from 'lib/utils/date-utils.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import { ServerError } from 'lib/utils/errors.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import css from './calendar.css';
 import LoadingIndicator from '../loading-indicator.react.js';
 import LogInFirstModal from '../modals/account/log-in-first-modal.react.js';
 import ConcurrentModificationModal from '../modals/concurrent-modification-modal.react.js';
 import HistoryModal from '../modals/history/history-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 import { HistoryVector, DeleteVector } from '../vectors.react.js';
 
 type BaseProps = {
   +innerRef: (key: string, me: Entry) => void,
   +entryInfo: EntryInfo,
   +focusOnFirstEntryNewerThan: (time: number) => void,
   +tabIndex: number,
 };
 type Props = {
   ...BaseProps,
   +threadInfo: ResolvedThreadInfo,
   +loggedIn: boolean,
   +calendarQuery: () => CalendarQuery,
   +online: boolean,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +createEntry: (info: CreateEntryInfo) => Promise<CreateEntryPayload>,
   +saveEntry: (info: SaveEntryInfo) => Promise<SaveEntryResult>,
   +deleteEntry: (info: DeleteEntryInfo) => Promise<DeleteEntryResult>,
   +pushModal: PushModal,
   +popModal: () => void,
 };
 type State = {
   +focused: boolean,
   +loadingStatus: LoadingStatus,
   +text: string,
 };
 class Entry extends React.PureComponent<Props, State> {
   textarea: ?HTMLTextAreaElement;
   creating: boolean;
   needsUpdateAfterCreation: boolean;
   needsDeleteAfterCreation: boolean;
   nextSaveAttemptIndex: number;
   mounted: boolean;
   currentlySaving: ?string;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       focused: false,
       loadingStatus: 'inactive',
       text: props.entryInfo.text,
     };
     this.creating = false;
     this.needsUpdateAfterCreation = false;
     this.needsDeleteAfterCreation = false;
     this.nextSaveAttemptIndex = 0;
   }
 
   guardedSetState(input: Partial<State>) {
     if (this.mounted) {
       this.setState(input);
     }
   }
 
   componentDidMount() {
     this.mounted = true;
     this.props.innerRef(entryKey(this.props.entryInfo), this);
     this.updateHeight();
     // Whenever a new Entry is created, focus on it
     if (!this.props.entryInfo.id) {
       this.focus();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (
       !this.state.focused &&
       this.props.entryInfo.text !== this.state.text &&
       this.props.entryInfo.text !== prevProps.entryInfo.text
     ) {
       this.setState({ text: this.props.entryInfo.text });
       this.currentlySaving = null;
     }
 
     if (
       this.props.online &&
       !prevProps.online &&
       this.state.loadingStatus === 'error'
     ) {
       this.save();
     }
   }
 
   focus() {
     invariant(
       this.textarea instanceof HTMLTextAreaElement,
       'textarea ref not set',
     );
     this.textarea.focus();
   }
 
   onMouseDown: (event: SyntheticEvent<HTMLDivElement>) => void = event => {
     if (this.state.focused && event.target !== this.textarea) {
       // Don't lose focus when some non-textarea part is clicked
       event.preventDefault();
     }
   };
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   updateHeight: () => void = () => {
     invariant(
       this.textarea instanceof HTMLTextAreaElement,
       'textarea ref not set',
     );
     this.textarea.style.height = 'auto';
     this.textarea.style.height = this.textarea.scrollHeight + 'px';
   };
 
   render(): React.Node {
     let actionLinks = null;
     if (this.state.focused) {
       let historyButton = null;
       if (this.props.entryInfo.id) {
         historyButton = (
           <a href="#" onClick={this.onHistory}>
             <HistoryVector className={css.history} />
             <span className={css.actionLinksText}>History</span>
           </a>
         );
       }
       const rightActionLinksClassName = `${css.rightActionLinks} ${css.actionLinksText}`;
       actionLinks = (
         <div className={css.actionLinks}>
           <a href="#" onClick={this.onDelete}>
             <DeleteVector />
             <span className={css.actionLinksText}>Delete</span>
           </a>
           {historyButton}
           <span className={rightActionLinksClassName}>
             {this.props.threadInfo.uiName}
           </span>
           <div className={css.clear}></div>
         </div>
       );
     }
 
     const darkColor = colorIsDark(this.props.threadInfo.color);
     const entryClasses = classNames({
       [css.entry]: true,
       [css.darkEntry]: darkColor,
       [css.focusedEntry]: this.state.focused,
     });
     const style = { backgroundColor: `#${this.props.threadInfo.color}` };
     const loadingIndicatorColor = darkColor ? 'white' : 'black';
     const canEditEntry = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.EDIT_ENTRIES,
     );
     return (
       <div
         className={entryClasses}
         style={style}
         onMouseDown={this.onMouseDown}
       >
         <textarea
           rows="1"
           className={css.entryText}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
           value={this.state.text}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           tabIndex={this.props.tabIndex}
           ref={this.textareaRef}
           disabled={!canEditEntry}
         />
         <LoadingIndicator
           status={this.state.loadingStatus}
           color={loadingIndicatorColor}
           loadingClassName={css.entryLoading}
           errorClassName={css.entryError}
         />
         {actionLinks}
       </div>
     );
   }
 
   textareaRef: (textarea: ?HTMLTextAreaElement) => void = textarea => {
     this.textarea = textarea;
   };
 
   onFocus: () => void = () => {
     if (!this.state.focused) {
       this.setState({ focused: true });
     }
   };
 
   onBlur: () => void = () => {
     this.setState({ focused: false });
     if (this.state.text.trim() === '') {
       this.delete();
     } else if (this.props.entryInfo.text !== this.state.text) {
       this.save();
     }
   };
 
   delete() {
     this.dispatchDelete(this.props.entryInfo.id, false);
   }
 
   save() {
     this.dispatchSave(this.props.entryInfo.id, this.state.text);
   }
 
   onChange: (event: SyntheticEvent<HTMLTextAreaElement>) => void = event => {
     if (!this.props.loggedIn) {
       this.props.pushModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     const target = event.target;
     invariant(target instanceof HTMLTextAreaElement, 'target not textarea');
     this.setState({ text: target.value }, this.updateHeight);
   };
 
   onKeyDown: (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => void =
     event => {
       if (event.key === 'Escape') {
         invariant(
           this.textarea instanceof HTMLTextAreaElement,
           'textarea ref not set',
         );
         this.textarea.blur();
       }
     };
 
   dispatchSave(serverID: ?string, newText: string) {
     if (this.currentlySaving === newText) {
       return;
     }
     this.currentlySaving = newText;
 
     if (newText.trim() === '') {
       // We don't save the empty string, since as soon as the element loses
       // focus it'll get deleted
       return;
     }
 
     if (!serverID) {
       if (this.creating) {
         // We need the first save call to return so we know the ID of the entry
         // we're updating, so we'll need to handle this save later
         this.needsUpdateAfterCreation = true;
         return;
       } else {
         this.creating = true;
       }
     }
 
     if (!serverID) {
       void this.props.dispatchActionPromise(
         createEntryActionTypes,
         this.createAction(newText),
       );
     } else {
       void this.props.dispatchActionPromise(
         saveEntryActionTypes,
         this.saveAction(serverID, newText),
       );
     }
   }
 
   async createAction(text: string): Promise<CreateEntryPayload> {
     const localID = this.props.entryInfo.localID;
     invariant(localID, "if there's no serverID, there should be a localID");
     const curSaveAttempt = this.nextSaveAttemptIndex++;
     this.guardedSetState({ loadingStatus: 'loading' });
     try {
       const response = await this.props.createEntry({
         text,
         timestamp: this.props.entryInfo.creationTime,
         date: dateString(
           this.props.entryInfo.year,
           this.props.entryInfo.month,
           this.props.entryInfo.day,
         ),
         threadID: this.props.entryInfo.threadID,
         localID,
         calendarQuery: this.props.calendarQuery(),
       });
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'inactive' });
       }
       this.creating = false;
       if (this.needsUpdateAfterCreation) {
         this.needsUpdateAfterCreation = false;
         this.dispatchSave(response.entryID, this.state.text);
       }
       if (this.needsDeleteAfterCreation) {
         this.needsDeleteAfterCreation = false;
         this.dispatchDelete(response.entryID, false);
       }
       return response;
     } catch (e) {
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'error' });
       }
       this.currentlySaving = null;
       this.creating = false;
       throw e;
     }
   }
 
   async saveAction(
     entryID: string,
     newText: string,
   ): Promise<SaveEntryPayload> {
     const curSaveAttempt = this.nextSaveAttemptIndex++;
     this.guardedSetState({ loadingStatus: 'loading' });
     try {
       const response = await this.props.saveEntry({
         entryID,
         text: newText,
         prevText: this.props.entryInfo.text,
         timestamp: Date.now(),
         calendarQuery: this.props.calendarQuery(),
       });
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'inactive' });
       }
       return { ...response, threadID: this.props.entryInfo.threadID };
     } catch (e) {
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'error' });
       }
       this.currentlySaving = null;
       if (e instanceof ServerError && e.message === 'concurrent_modification') {
         const onRefresh = () => {
           this.setState({ loadingStatus: 'inactive' }, this.updateHeight);
           this.props.dispatch({
             type: concurrentModificationResetActionType,
             payload: { id: entryID, dbText: e.payload?.db },
           });
           this.props.popModal();
         };
         this.props.pushModal(
           <ConcurrentModificationModal onRefresh={onRefresh} />,
         );
       }
       throw e;
     }
   }
 
   onDelete: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
     if (!this.props.loggedIn) {
       this.props.pushModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     this.dispatchDelete(this.props.entryInfo.id, true);
   };
 
   dispatchDelete(serverID: ?string, focusOnNextEntry: boolean) {
     const { localID } = this.props.entryInfo;
     void this.props.dispatchActionPromise(
       deleteEntryActionTypes,
       this.deleteAction(serverID, focusOnNextEntry),
       undefined,
       { localID, serverID },
     );
   }
 
   async deleteAction(
     serverID: ?string,
     focusOnNextEntry: boolean,
   ): Promise<?DeleteEntryResult> {
     invariant(
       this.props.loggedIn,
       'user should be logged in if delete triggered',
     );
     if (focusOnNextEntry) {
       this.props.focusOnFirstEntryNewerThan(this.props.entryInfo.creationTime);
     }
     if (serverID) {
       return await this.props.deleteEntry({
         entryID: serverID,
         prevText: this.props.entryInfo.text,
         calendarQuery: this.props.calendarQuery(),
       });
     } else if (this.creating) {
       this.needsDeleteAfterCreation = true;
     }
     return null;
   }
 
   onHistory: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
     this.props.pushModal(
       <HistoryModal
         mode="entry"
         dayString={dateString(
           this.props.entryInfo.year,
           this.props.entryInfo.month,
           this.props.entryInfo.day,
         )}
         currentEntryID={this.props.entryInfo.id}
       />,
     );
   };
 }
 
 export type InnerEntry = Entry;
 
 const ConnectedEntry: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedEntry(props) {
     const { threadID } = props.entryInfo;
     const unresolvedThreadInfo = useSelector(
       state => threadInfoSelector(state)[threadID],
     );
     const threadInfo = useResolvedThreadInfo(unresolvedThreadInfo);
     const loggedIn = useSelector(
       state =>
         !!(state.currentUserInfo && !state.currentUserInfo.anonymous && true),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const online = connection.status === 'connected';
     const callCreateEntry = useCreateEntry();
     const callSaveEntry = useSaveEntry();
     const callDeleteEntry = useDeleteEntry();
     const dispatchActionPromise = useDispatchActionPromise();
     const dispatch = useDispatch();
 
     const modalContext = useModalContext();
 
     return (
       <Entry
         {...props}
         threadInfo={threadInfo}
         loggedIn={loggedIn}
         calendarQuery={calendarQuery}
         online={online}
         createEntry={callCreateEntry}
         saveEntry={callSaveEntry}
         deleteEntry={callDeleteEntry}
         dispatchActionPromise={dispatchActionPromise}
         dispatch={dispatch}
         pushModal={modalContext.pushModal}
         popModal={modalContext.popModal}
       />
     );
   },
 );
 
 export default ConnectedEntry;
diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
index 57e1e047c..d34c0dabb 100644
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -1,680 +1,680 @@
 // @flow
 
 import invariant from 'invariant';
 import _difference from 'lodash/fp/difference.js';
 import * as React from 'react';
 
 import {
   joinThreadActionTypes,
   useJoinThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import {
   useChatMentionContext,
   useThreadChatMentionCandidates,
 } from 'lib/hooks/chat-mention-hooks.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import {
   getTypeaheadRegexMatches,
   useUserMentionsCandidates,
   useMentionTypeaheadChatSuggestions,
   type MentionTypeaheadSuggestionItem,
   type TypeaheadMatchedStrings,
   useMentionTypeaheadUserSuggestions,
 } from 'lib/shared/mention-utils.js';
 import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   checkIfDefaultMembersAreVoiced,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ClientThreadJoinRequest,
   type ThreadJoinPayload,
   type ThreadInfo,
 } from 'lib/types/thread-types.js';
 import { type UserInfos } from 'lib/types/user-types.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import css from './chat-input-bar.css';
 import TypeaheadTooltip from './typeahead-tooltip.react.js';
 import Button from '../components/button.react.js';
 import {
   type InputState,
   type PendingMultimediaUpload,
 } from '../input/input-state.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { allowedMimeTypeString } from '../media/file-utils.js';
 import Multimedia from '../media/multimedia.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 import {
   webMentionTypeaheadRegex,
   getMentionTypeaheadTooltipActions,
   getMentionTypeaheadTooltipButtons,
 } from '../utils/typeahead-utils.js';
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
   +inputState: InputState,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: number,
   +isThreadActive: boolean,
   +userInfos: UserInfos,
   +dispatchActionPromise: DispatchActionPromise,
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   +typeaheadMatchedStrings: ?TypeaheadMatchedStrings,
   +suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem>,
   +parentThreadInfo: ?ThreadInfo,
 };
 
 class ChatInputBar extends React.PureComponent<Props> {
   textarea: ?HTMLTextAreaElement;
   multimediaInput: ?HTMLInputElement;
 
   componentDidMount() {
     this.updateHeight();
     if (this.props.isThreadActive) {
       this.addReplyListener();
     }
   }
 
   componentWillUnmount() {
     if (this.props.isThreadActive) {
       this.removeReplyListener();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.isThreadActive && !prevProps.isThreadActive) {
       this.addReplyListener();
     } else if (!this.props.isThreadActive && prevProps.isThreadActive) {
       this.removeReplyListener();
     }
 
     const { inputState } = this.props;
     const prevInputState = prevProps.inputState;
     if (inputState.draft !== prevInputState.draft) {
       this.updateHeight();
     }
 
     if (
       inputState.draft !== prevInputState.draft ||
       inputState.textCursorPosition !== prevInputState.textCursorPosition
     ) {
       inputState.setTypeaheadState({
         canBeVisible: true,
       });
     }
 
     const curUploadIDs = ChatInputBar.unassignedUploadIDs(
       inputState.pendingUploads,
     );
     const prevUploadIDs = ChatInputBar.unassignedUploadIDs(
       prevInputState.pendingUploads,
     );
     const { multimediaInput, textarea } = this;
     if (
       multimediaInput &&
       _difference(prevUploadIDs)(curUploadIDs).length > 0
     ) {
       // Whenever a pending upload is removed, we reset the file
       // HTMLInputElement's value field, so that if the same upload occurs again
       // the onChange call doesn't get filtered
       multimediaInput.value = '';
     } else if (
       textarea &&
       _difference(curUploadIDs)(prevUploadIDs).length > 0
     ) {
       // Whenever a pending upload is added, we focus the textarea
       textarea.focus();
       return;
     }
 
     if (
       (this.props.threadInfo.id !== prevProps.threadInfo.id ||
         (inputState.textCursorPosition !== prevInputState.textCursorPosition &&
           this.textarea?.selectionStart === this.textarea?.selectionEnd)) &&
       this.textarea
     ) {
       this.textarea.focus();
 
       this.textarea?.setSelectionRange(
         inputState.textCursorPosition,
         inputState.textCursorPosition,
         'none',
       );
     }
   }
 
   static unassignedUploadIDs(
     pendingUploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ): Array<string> {
     return pendingUploads
       .filter(
         (pendingUpload: PendingMultimediaUpload) => !pendingUpload.messageID,
       )
       .map((pendingUpload: PendingMultimediaUpload) => pendingUpload.localID);
   }
 
   updateHeight() {
     const textarea = this.textarea;
     if (textarea) {
       textarea.style.height = 'auto';
       const newHeight = Math.min(textarea.scrollHeight, 150);
       textarea.style.height = `${newHeight}px`;
     }
   }
 
   addReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addReplyListener',
     );
     this.props.inputState.addReplyListener(this.focusAndUpdateText);
   }
 
   removeReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeReplyListener',
     );
     this.props.inputState.removeReplyListener(this.focusAndUpdateText);
   }
 
   render(): React.Node {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
 
     let joinButton = null;
     if (!isMember && canJoin && !this.props.threadCreationInProgress) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <LoadingIndicator
             status={this.props.joinThreadLoadingStatus}
             size="medium"
             color="white"
           />
         );
       } else {
         buttonContent = (
           <>
             <SWMansionIcon icon="plus" size={24} />
             <p className={css.joinButtonText}>Join Chat</p>
           </>
         );
       }
       joinButton = (
         <div className={css.joinButtonContainer}>
           <Button
             variant="filled"
             buttonColor={{ backgroundColor: `#${this.props.threadInfo.color}` }}
             onClick={this.onClickJoin}
           >
             {buttonContent}
           </Button>
         </div>
       );
     }
 
     const { pendingUploads, cancelPendingUpload } = this.props.inputState;
     const multimediaPreviews = pendingUploads.map(pendingUpload => {
       const { uri, mediaType, thumbHash, dimensions } = pendingUpload;
       let mediaSource = { thumbHash, dimensions };
       if (mediaType !== 'encrypted_photo' && mediaType !== 'encrypted_video') {
         mediaSource = {
           ...mediaSource,
           type: mediaType,
           uri,
           thumbnailURI: null,
         };
       } else {
         const { encryptionKey } = pendingUpload;
         invariant(
           encryptionKey,
           'encryptionKey should be set for encrypted media',
         );
         mediaSource = {
           ...mediaSource,
           type: mediaType,
           blobURI: uri,
           encryptionKey,
           thumbnailBlobURI: null,
           thumbnailEncryptionKey: null,
         };
       }
       return (
         <Multimedia
           mediaSource={mediaSource}
           pendingUpload={pendingUpload}
           remove={cancelPendingUpload}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
           key={pendingUpload.localID}
         />
       );
     });
     const previews =
       multimediaPreviews.length > 0 ? (
         <div className={css.previews}>{multimediaPreviews}</div>
       ) : null;
 
     let content;
     // If the thread is created by somebody else while the viewer is attempting
     // to create it, the threadInfo might be modified in-place and won't
     // list the viewer as a member, which will end up hiding the input. In
     // this case, we will assume that our creation action will get translated,
     // into a join and as long as members are voiced, we can show the input.
     const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
       this.props.threadInfo,
     );
 
     let sendButton;
     if (this.props.inputState.draft.length) {
       sendButton = (
         <a onClick={this.onSend} className={css.sendButton}>
           <SWMansionIcon
             icon="send-2"
             size={22}
             color={`#${this.props.threadInfo.color}`}
           />
         </a>
       );
     }
 
     if (
       threadHasPermission(this.props.threadInfo, threadPermissions.VOICED) ||
       (this.props.threadCreationInProgress && defaultMembersAreVoiced)
     ) {
       content = (
         <div className={css.inputBarWrapper}>
           <a className={css.multimediaUpload} onClick={this.onMultimediaClick}>
             <input
               type="file"
               onChange={this.onMultimediaFileChange}
               ref={this.multimediaInputRef}
               accept={allowedMimeTypeString}
               multiple
             />
             <SWMansionIcon
               icon="image-1"
               size={22}
               color={`#${this.props.threadInfo.color}`}
               disableFill
             />
           </a>
           <div className={css.inputBarTextInput}>
             <textarea
               rows="1"
               placeholder="Type your message"
               value={this.props.inputState.draft}
               onChange={this.onChangeMessageText}
               onKeyDown={this.onKeyDown}
               onClick={this.onClickTextarea}
               onSelect={this.onSelectTextarea}
               ref={this.textareaRef}
               autoFocus
             />
           </div>
           {sendButton}
         </div>
       );
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <span className={css.explanation}>
           You can&rsquo;t send messages to a user that you&rsquo;ve blocked.
         </span>
       );
     } else if (isMember) {
       content = (
         <span className={css.explanation}>
           You don&rsquo;t have permission to send messages.
         </span>
       );
     } else if (defaultMembersAreVoiced && canJoin) {
       content = null;
     } else {
       content = (
         <span className={css.explanation}>
           You don&rsquo;t have permission to send messages.
         </span>
       );
     }
 
     let typeaheadTooltip;
     if (
       this.props.inputState.typeaheadState.canBeVisible &&
       this.props.suggestions.length > 0 &&
       this.props.typeaheadMatchedStrings &&
       this.textarea
     ) {
       typeaheadTooltip = (
         <TypeaheadTooltip
           inputState={this.props.inputState}
           textarea={this.textarea}
           matchedStrings={this.props.typeaheadMatchedStrings}
           suggestions={this.props.suggestions}
           typeaheadTooltipActionsGetter={getMentionTypeaheadTooltipActions}
           typeaheadTooltipButtonsGetter={getMentionTypeaheadTooltipButtons}
         />
       );
     }
 
     return (
       <div className={css.inputBar}>
         {joinButton}
         {previews}
         {content}
         {typeaheadTooltip}
       </div>
     );
   }
 
   textareaRef = (textarea: ?HTMLTextAreaElement) => {
     this.textarea = textarea;
     if (textarea) {
       textarea.focus();
     }
   };
 
   onChangeMessageText = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setDraft(event.currentTarget.value);
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   onClickTextarea = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   onSelectTextarea = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   focusAndUpdateText = (text: string) => {
     // We need to call focus() first on Safari, otherwise the cursor
     // ends up at the start instead of the end for some reason
     const { textarea } = this;
     invariant(textarea, 'textarea should be set');
     textarea.focus();
 
     // We reset the textarea to an empty string at the start so that the cursor
     // always ends up at the end, even if the text doesn't actually change
     textarea.value = '';
     const currentText = this.props.inputState.draft;
     if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.props.inputState.setDraft(prependedText);
       textarea.value = prependedText;
     } else {
       textarea.value = currentText;
     }
 
     // The above strategies make sure the cursor is at the end,
     // but we also need to make sure that we're scrolled to the bottom
     textarea.scrollTop = textarea.scrollHeight;
   };
 
   onKeyDown = (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => {
     const { accept, close, moveChoiceUp, moveChoiceDown } =
       this.props.inputState.typeaheadState;
 
     const actions = {
       Enter: accept,
       Tab: accept,
       ArrowDown: moveChoiceDown,
       ArrowUp: moveChoiceUp,
       Escape: close,
     };
 
     if (
       this.props.inputState.typeaheadState.canBeVisible &&
       actions[event.key]
     ) {
       event.preventDefault();
       actions[event.key]();
     } else if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
       this.send();
     }
   };
 
   onSend = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.send();
   };
 
   send() {
     let { nextLocalID } = this.props;
 
     const text = trimMessage(this.props.inputState.draft);
     if (text) {
       this.dispatchTextMessageAction(text, nextLocalID);
       nextLocalID++;
     }
     if (this.props.inputState.pendingUploads.length > 0) {
       this.props.inputState.createMultimediaMessage(
         nextLocalID,
         this.props.threadInfo,
       );
     }
   }
 
   dispatchTextMessageAction(text: string, nextLocalID: number) {
     this.props.inputState.setDraft('');
 
     const localID = `${localIDPrefix}${nextLocalID}`;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
 
     void this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
       this.props.parentThreadInfo,
     );
   }
 
   multimediaInputRef = (multimediaInput: ?HTMLInputElement) => {
     this.multimediaInput = multimediaInput;
   };
 
   onMultimediaClick = () => {
     if (this.multimediaInput) {
       this.multimediaInput.click();
     }
   };
 
   onMultimediaFileChange = async (
     event: SyntheticInputEvent<HTMLInputElement>,
   ) => {
     const result = await this.props.inputState.appendFiles(
       this.props.threadInfo,
       [...event.target.files],
     );
     if (!result && this.multimediaInput) {
       this.multimediaInput.value = '';
     }
   };
 
   onClickJoin = () => {
     void this.props.dispatchActionPromise(
       joinThreadActionTypes,
       this.joinAction(),
     );
   };
 
   async joinAction(): Promise<ThreadJoinPayload> {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 const createThreadLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 const ConnectedChatInputBar: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedChatInputBar(props) {
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const nextLocalID = useSelector(state => state.nextLocalID);
     const isThreadActive = useSelector(
       state => props.threadInfo.id === state.navInfo.activeChatThreadID,
     );
     const userInfos = useSelector(state => state.userStore.userInfos);
     const joinThreadLoadingStatus = useSelector(
       joinThreadLoadingStatusSelector,
     );
     const createThreadLoadingStatus = useSelector(
       createThreadLoadingStatusSelector,
     );
     const threadCreationInProgress = createThreadLoadingStatus === 'loading';
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const dispatchActionPromise = useDispatchActionPromise();
     const callJoinThread = useJoinThread();
     const { getChatMentionSearchIndex } = useChatMentionContext();
     const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
     const { parentThreadID } = props.threadInfo;
     const parentThreadInfo = useSelector(state =>
       parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
     );
 
     const userMentionsCandidates = useUserMentionsCandidates(
       props.threadInfo,
       parentThreadInfo,
     );
 
     const chatMentionCandidates = useThreadChatMentionCandidates(
       props.threadInfo,
     );
 
     const typeaheadRegexMatches = React.useMemo(
       () =>
         getTypeaheadRegexMatches(
           props.inputState.draft,
           {
             start: props.inputState.textCursorPosition,
             end: props.inputState.textCursorPosition,
           },
           webMentionTypeaheadRegex,
         ),
       [props.inputState.textCursorPosition, props.inputState.draft],
     );
 
     const typeaheadMatchedStrings: ?TypeaheadMatchedStrings =
       React.useMemo(() => {
         if (typeaheadRegexMatches === null) {
           return null;
         }
         return {
           textBeforeAtSymbol: typeaheadRegexMatches.groups?.textPrefix ?? '',
           query: typeaheadRegexMatches.groups?.mentionText ?? '',
         };
       }, [typeaheadRegexMatches]);
 
     React.useEffect(() => {
       if (props.inputState.typeaheadState.keepUpdatingThreadMembers) {
         const setter = props.inputState.setTypeaheadState;
         setter({
           frozenUserMentionsCandidates: userMentionsCandidates,
           frozenChatMentionsCandidates: chatMentionCandidates,
         });
       }
     }, [
       userMentionsCandidates,
       props.inputState.setTypeaheadState,
       props.inputState.typeaheadState.keepUpdatingThreadMembers,
       chatMentionCandidates,
     ]);
 
     const suggestedUsers = useMentionTypeaheadUserSuggestions(
       props.inputState.typeaheadState.frozenUserMentionsCandidates,
       typeaheadMatchedStrings,
     );
 
     const suggestedChats = useMentionTypeaheadChatSuggestions(
       chatMentionSearchIndex,
       props.inputState.typeaheadState.frozenChatMentionsCandidates,
       typeaheadMatchedStrings,
     );
 
     const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
       React.useMemo(
         () => [...suggestedUsers, ...suggestedChats],
         [suggestedUsers, suggestedChats],
       );
 
     return (
       <ChatInputBar
         {...props}
         viewerID={viewerID}
         joinThreadLoadingStatus={joinThreadLoadingStatus}
         threadCreationInProgress={threadCreationInProgress}
         calendarQuery={calendarQuery}
         nextLocalID={nextLocalID}
         isThreadActive={isThreadActive}
         userInfos={userInfos}
         dispatchActionPromise={dispatchActionPromise}
         joinThread={callJoinThread}
         typeaheadMatchedStrings={typeaheadMatchedStrings}
         suggestions={suggestions}
         parentThreadInfo={parentThreadInfo}
       />
     );
   });
 
 export default ConnectedChatInputBar;
diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
index 5710367f0..84be58711 100644
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -1,486 +1,486 @@
 // @flow
 
 import classNames from 'classnames';
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
 import _debounce from 'lodash/debounce.js';
 import * as React from 'react';
 
 import {
   fetchMessagesBeforeCursorActionTypes,
   useFetchMessagesBeforeCursor,
   fetchMostRecentMessagesActionTypes,
   useFetchMostRecentMessages,
 } from 'lib/actions/message-actions.js';
 import type {
   FetchMostRecentMessagesInput,
   FetchMessagesBeforeCursorInput,
 } from 'lib/actions/message-actions.js';
 import { useThreadChatMentionCandidates } from 'lib/hooks/chat-mention-hooks.js';
 import { useOldestMessageServerID } from 'lib/hooks/message-hooks.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import {
   type ChatMessageItem,
   useMessageListData,
 } from 'lib/selectors/chat-selectors.js';
 import { messageKey } from 'lib/shared/message-utils.js';
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { FetchMessageInfosPayload } from 'lib/types/message-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import { editBoxHeight, defaultMaxTextAreaHeight } from './chat-constants.js';
 import css from './chat-message-list.css';
 import type { ScrollToMessageCallback } from './edit-message-provider.js';
 import { useEditModalContext } from './edit-message-provider.js';
 import { MessageListContext } from './message-list-types.js';
 import Message from './message.react.js';
 import RelationshipPrompt from './relationship-prompt/relationship-prompt.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { useTextMessageRulesFunc } from '../markdown/rules.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipContext } from '../tooltips/tooltip-provider.js';
 
 const browser = detectBrowser();
 const supportsReverseFlex =
   !browser || browser.name !== 'firefox' || parseInt(browser.version) >= 81;
 
 // Margin between the top of the maximum height edit box
 // and the top of the container
 const editBoxTopMargin = 10;
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
 };
 
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +messageListData: ?$ReadOnlyArray<ChatMessageItem>,
   +startReached: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +fetchMessagesBeforeCursor: (
     input: FetchMessagesBeforeCursorInput,
   ) => Promise<FetchMessageInfosPayload>,
   +fetchMostRecentMessages: (
     input: FetchMostRecentMessagesInput,
   ) => Promise<FetchMessageInfosPayload>,
   +inputState: ?InputState,
   +clearTooltip: () => mixed,
   +oldestMessageServerID: ?string,
   +isEditState: boolean,
   +addScrollToMessageListener: ScrollToMessageCallback => mixed,
   +removeScrollToMessageListener: ScrollToMessageCallback => mixed,
 };
 type Snapshot = {
   +scrollTop: number,
   +scrollHeight: number,
 };
 
 type State = {
   +scrollingEndCallback: ?() => mixed,
 };
 
 class ChatMessageList extends React.PureComponent<Props, State> {
   container: ?HTMLDivElement;
   messageContainer: ?HTMLDivElement;
   loadingFromScroll = false;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       scrollingEndCallback: null,
     };
   }
 
   componentDidMount() {
     this.scrollToBottom();
     this.props.addScrollToMessageListener(this.scrollToMessage);
   }
 
   componentWillUnmount() {
     this.props.removeScrollToMessageListener(this.scrollToMessage);
   }
 
   getSnapshotBeforeUpdate(prevProps: Props): ?Snapshot {
     if (
       ChatMessageList.hasNewMessage(this.props, prevProps) &&
       this.messageContainer
     ) {
       const { scrollTop, scrollHeight } = this.messageContainer;
       return { scrollTop, scrollHeight };
     }
     return null;
   }
 
   static hasNewMessage(props: Props, prevProps: Props): boolean {
     const { messageListData } = props;
     if (!messageListData || messageListData.length === 0) {
       return false;
     }
     const prevMessageListData = prevProps.messageListData;
     if (!prevMessageListData || prevMessageListData.length === 0) {
       return true;
     }
     return (
       ChatMessageList.keyExtractor(prevMessageListData[0]) !==
       ChatMessageList.keyExtractor(messageListData[0])
     );
   }
 
   componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) {
     const { messageListData } = this.props;
     const prevMessageListData = prevProps.messageListData;
 
     const { messageContainer } = this;
     if (messageContainer && prevMessageListData !== messageListData) {
       this.onScroll();
     }
 
     // We'll scroll to the bottom if the user was already scrolled to the bottom
     // before the new message, or if the new message was composed locally
     const hasNewMessage = ChatMessageList.hasNewMessage(this.props, prevProps);
     if (
       this.props.activeChatThreadID !== prevProps.activeChatThreadID ||
       (hasNewMessage &&
         messageListData &&
         messageListData[0].itemType === 'message' &&
         messageListData[0].messageInfo.localID) ||
       (hasNewMessage &&
         snapshot &&
         Math.abs(snapshot.scrollTop) <= 1 &&
         !this.props.isEditState)
     ) {
       this.scrollToBottom();
     } else if (hasNewMessage && messageContainer && snapshot) {
       const { scrollTop, scrollHeight } = messageContainer;
       if (
         scrollHeight > snapshot.scrollHeight &&
         scrollTop === snapshot.scrollTop
       ) {
         const newHeight = scrollHeight - snapshot.scrollHeight;
         const newScrollTop = Math.abs(scrollTop) + newHeight;
         if (supportsReverseFlex) {
           messageContainer.scrollTop = -1 * newScrollTop;
         } else {
           messageContainer.scrollTop = newScrollTop;
         }
       }
     }
   }
 
   scrollToBottom() {
     if (this.messageContainer) {
       this.messageContainer.scrollTop = 0;
     }
   }
 
   static keyExtractor(item: ChatMessageItem): string {
     if (item.itemType === 'loader') {
       return 'loader';
     }
     return messageKey(item.messageInfo);
   }
 
   renderItem = (item: ChatMessageItem): React.Node => {
     if (item.itemType === 'loader') {
       return (
         <div key="loader" className={css.loading}>
           <LoadingIndicator status="loading" size="large" color="white" />
         </div>
       );
     }
     const { threadInfo } = this.props;
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     return (
       <Message
         item={item}
         threadInfo={threadInfo}
         shouldDisplayPinIndicator={true}
         key={ChatMessageList.keyExtractor(item)}
       />
     );
   };
 
   scrollingEndCallbackWrapper = (
     composedMessageID: string,
     callback: (maxHeight: number) => mixed,
   ): (() => mixed) => {
     return () => {
       const maxHeight = this.getMaxEditTextAreaHeight(composedMessageID);
       callback(maxHeight);
     };
   };
 
   scrollToMessage = (
     composedMessageID: string,
     callback: (maxHeight: number) => mixed,
   ) => {
     const element = document.getElementById(composedMessageID);
     if (!element) {
       return;
     }
     const scrollingEndCallback = this.scrollingEndCallbackWrapper(
       composedMessageID,
       callback,
     );
     if (!this.willMessageEditWindowOverflow(composedMessageID)) {
       scrollingEndCallback();
       return;
     }
     this.setState(
       {
         scrollingEndCallback,
       },
       () => {
         element.scrollIntoView({ behavior: 'smooth', block: 'center' });
         // It covers the case when browser decide not to scroll to the message
         // because it's already in the view.
         // In this case, the 'scroll' event won't be triggered,
         // so we need to call the callback manually.
         this.debounceEditModeAfterScrollToMessage();
       },
     );
   };
 
   getMaxEditTextAreaHeight = (composedMessageID: string): number => {
     const { messageContainer } = this;
     if (!messageContainer) {
       return defaultMaxTextAreaHeight;
     }
     const messageElement = document.getElementById(composedMessageID);
     if (!messageElement) {
       console.log(`couldn't find the message element`);
       return defaultMaxTextAreaHeight;
     }
 
     const msgPos = messageElement.getBoundingClientRect();
     const containerPos = messageContainer.getBoundingClientRect();
 
     const messageBottom = msgPos.bottom;
     const containerTop = containerPos.top;
 
     const maxHeight =
       messageBottom - containerTop - editBoxHeight - editBoxTopMargin;
 
     return maxHeight;
   };
 
   willMessageEditWindowOverflow(composedMessageID: string): boolean {
     const { messageContainer } = this;
     if (!messageContainer) {
       return false;
     }
     const messageElement = document.getElementById(composedMessageID);
     if (!messageElement) {
       console.log(`couldn't find the message element`);
       return false;
     }
 
     const msgPos = messageElement.getBoundingClientRect();
     const containerPos = messageContainer.getBoundingClientRect();
     const containerTop = containerPos.top;
     const containerBottom = containerPos.bottom;
 
     const availableTextAreaHeight =
       (containerBottom - containerTop) / 2 - editBoxHeight;
     const messageHeight = msgPos.height;
     const expectedMinimumHeight = Math.min(
       defaultMaxTextAreaHeight,
       availableTextAreaHeight,
     );
     const offset = Math.max(
       0,
       expectedMinimumHeight + editBoxHeight + editBoxTopMargin - messageHeight,
     );
 
     const messageTop = msgPos.top - offset;
     const messageBottom = msgPos.bottom;
 
     return messageBottom > containerBottom || messageTop < containerTop;
   }
 
   render(): React.Node {
     const { messageListData, threadInfo, inputState, isEditState } = this.props;
     if (!messageListData) {
       return <div className={css.container} />;
     }
     invariant(inputState, 'InputState should be set');
     const messages = messageListData.map(this.renderItem);
 
     let relationshipPrompt = null;
     if (threadInfo.type === threadTypes.PERSONAL) {
       relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
     }
 
     const messageContainerStyle = classNames({
       [css.disableAnchor]:
         this.state.scrollingEndCallback !== null || isEditState,
       [css.messageContainer]: true,
       [css.mirroredMessageContainer]: !supportsReverseFlex,
     });
     return (
       <div className={css.outerMessageContainer}>
         {relationshipPrompt}
         <div className={messageContainerStyle} ref={this.messageContainerRef}>
           {messages}
         </div>
       </div>
     );
   }
 
   messageContainerRef = (messageContainer: ?HTMLDivElement) => {
     this.messageContainer = messageContainer;
     // In case we already have all the most recent messages,
     // but they're not enough
     void this.possiblyLoadMoreMessages();
     if (messageContainer) {
       messageContainer.addEventListener('scroll', this.onScroll);
     }
   };
 
   onScroll = () => {
     if (!this.messageContainer) {
       return;
     }
     this.props.clearTooltip();
     void this.possiblyLoadMoreMessages();
     this.debounceEditModeAfterScrollToMessage();
   };
 
   debounceEditModeAfterScrollToMessage: () => void = _debounce(() => {
     if (this.state.scrollingEndCallback) {
       this.state.scrollingEndCallback();
     }
     this.setState({ scrollingEndCallback: null });
   }, 100);
 
   async possiblyLoadMoreMessages() {
     if (!this.messageContainer) {
       return;
     }
 
     const { scrollTop, scrollHeight, clientHeight } = this.messageContainer;
     if (
       this.props.startReached ||
       Math.abs(scrollTop) + clientHeight + 55 < scrollHeight
     ) {
       return;
     }
 
     if (this.loadingFromScroll) {
       return;
     }
     this.loadingFromScroll = true;
 
     const threadID = this.props.activeChatThreadID;
     invariant(threadID, 'should be set');
 
     try {
       const { oldestMessageServerID } = this.props;
       if (oldestMessageServerID) {
         await this.props.dispatchActionPromise(
           fetchMessagesBeforeCursorActionTypes,
           this.props.fetchMessagesBeforeCursor({
             threadID,
             beforeMessageID: oldestMessageServerID,
           }),
         );
       } else {
         await this.props.dispatchActionPromise(
           fetchMostRecentMessagesActionTypes,
           this.props.fetchMostRecentMessages({ threadID }),
         );
       }
     } finally {
       this.loadingFromScroll = false;
     }
   }
 }
 
 registerFetchKey(fetchMessagesBeforeCursorActionTypes);
 registerFetchKey(fetchMostRecentMessagesActionTypes);
 const ConnectedChatMessageList: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedChatMessageList(
     props: BaseProps,
   ): React.Node {
     const { threadInfo } = props;
     const messageListData = useMessageListData({
       threadInfo,
       searching: false,
       userInfoInputArray: [],
     });
 
     const startReached = !!useSelector(state => {
       const activeID = threadInfo.id;
       if (!activeID) {
         return null;
       }
 
       if (threadIsPending(activeID)) {
         return true;
       }
 
       const threadMessageInfo = state.messageStore.threads[activeID];
       if (!threadMessageInfo) {
         return null;
       }
       return threadMessageInfo.startReached;
     });
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callFetchMessagesBeforeCursor = useFetchMessagesBeforeCursor();
     const callFetchMostRecentMessages = useFetchMostRecentMessages();
 
     const inputState = React.useContext(InputStateContext);
 
     const { clearTooltip } = useTooltipContext();
 
     const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
     const getTextMessageMarkdownRules = useTextMessageRulesFunc(
       threadInfo,
       chatMentionCandidates,
     );
     const messageListContext = React.useMemo(() => {
       if (!getTextMessageMarkdownRules) {
         return undefined;
       }
       return { getTextMessageMarkdownRules };
     }, [getTextMessageMarkdownRules]);
 
     const oldestMessageServerID = useOldestMessageServerID(threadInfo.id);
 
     const {
       editState,
       addScrollToMessageListener,
       removeScrollToMessageListener,
     } = useEditModalContext();
     const isEditState = editState !== null;
 
     return (
       <MessageListContext.Provider value={messageListContext}>
         <ChatMessageList
           activeChatThreadID={threadInfo.id}
           threadInfo={threadInfo}
           messageListData={messageListData}
           startReached={startReached}
           inputState={inputState}
           dispatchActionPromise={dispatchActionPromise}
           fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
           fetchMostRecentMessages={callFetchMostRecentMessages}
           clearTooltip={clearTooltip}
           oldestMessageServerID={oldestMessageServerID}
           isEditState={isEditState}
           addScrollToMessageListener={addScrollToMessageListener}
           removeScrollToMessageListener={removeScrollToMessageListener}
         />
       </MessageListContext.Provider>
     );
   });
 
 export default ConnectedChatMessageList;
diff --git a/web/chat/reaction-message-utils.js b/web/chat/reaction-message-utils.js
index 2e78b7c14..8e1dcfe40 100644
--- a/web/chat/reaction-message-utils.js
+++ b/web/chat/reaction-message-utils.js
@@ -1,219 +1,219 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useSendReactionMessage,
   sendReactionMessageActionTypes,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ReactionInfo } from 'lib/selectors/chat-selectors';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { RawReactionMessageInfo } from 'lib/types/messages/reaction.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import type { CallServerEndpointResultInfoInterface } from 'lib/utils/call-server-endpoint.js';
 import { cloneError } from 'lib/utils/errors.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import Alert from '../modals/alert.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   type TooltipSize,
   type TooltipPositionStyle,
 } from '../tooltips/tooltip-utils.js';
 import { getAppContainerPositionInfo } from '../utils/window-utils.js';
 
 function useSendReaction(
   messageID: ?string,
   localID: string,
   threadID: string,
   reactions: ReactionInfo,
 ): (reaction: string) => mixed {
   const { pushModal } = useModalContext();
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
 
   const callSendReactionMessage = useSendReactionMessage();
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
     reaction => {
       if (!messageID) {
         return;
       }
 
       invariant(viewerID, 'viewerID should be set');
 
       const viewerReacted = reactions[reaction]
         ? reactions[reaction].viewerReacted
         : false;
       const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
 
       const reactionMessagePromise = (async () => {
         try {
           const result = await callSendReactionMessage({
             threadID,
             localID,
             targetMessageID: messageID,
             reaction,
             action,
           });
           const serverID: string = result.id;
           const time: number = result.time;
           const interfaceInfo: CallServerEndpointResultInfoInterface =
             result.interface;
           return {
             localID,
             serverID,
             threadID,
             time,
             interface: interfaceInfo,
           };
         } catch (e) {
           pushModal(
             <Alert title="Couldn’t send the reaction">
               Please try again later
             </Alert>,
           );
 
           const copy = cloneError(e);
           copy.localID = localID;
           copy.threadID = threadID;
           throw copy;
         }
       })();
 
       const startingPayload: RawReactionMessageInfo = {
         type: messageTypes.REACTION,
         threadID,
         localID,
         creatorID: viewerID,
         time: Date.now(),
         targetMessageID: messageID,
         reaction,
         action,
       };
 
       void dispatchActionPromise(
         sendReactionMessageActionTypes,
         reactionMessagePromise,
         undefined,
         startingPayload,
       );
     },
     [
       messageID,
       viewerID,
       reactions,
       threadID,
       localID,
       dispatchActionPromise,
       callSendReactionMessage,
       pushModal,
     ],
   );
 }
 
 type EmojiKeyboardPosition = {
   +bottom: number,
   +left: number,
 };
 
 function getEmojiKeyboardPosition(
   emojiKeyboard: ?HTMLDivElement,
   tooltipPositionStyle: TooltipPositionStyle,
   tooltipSize: TooltipSize,
 ): ?EmojiKeyboardPosition {
   const { alignment, anchorPoint } = tooltipPositionStyle;
   const tooltipAnchorX = anchorPoint.x;
   const tooltipAnchorY = anchorPoint.y;
 
   const tooltipWidth = tooltipSize.width;
   const tooltipHeight = tooltipSize.height;
 
   const appContainerPositionInfo = getAppContainerPositionInfo();
 
   if (!appContainerPositionInfo) {
     return null;
   }
 
   let emojiKeyboardWidth = 352;
   let emojiKeyboardHeight = 435;
 
   if (emojiKeyboard) {
     const { width, height } = emojiKeyboard.getBoundingClientRect();
     emojiKeyboardWidth = width;
     emojiKeyboardHeight = height;
   }
 
   const {
     top: containerTop,
     left: containerLeft,
     right: containerRight,
     bottom: containerBottom,
   } = appContainerPositionInfo;
 
   const padding = 16;
 
   const canBeDisplayedOnRight =
     tooltipAnchorX + tooltipWidth + emojiKeyboardWidth <= containerRight;
 
   const canBeDisplayedOnLeft =
     tooltipAnchorX - emojiKeyboardWidth >= containerLeft;
 
   const canBeDisplayedOnTop =
     tooltipAnchorY - emojiKeyboardHeight - padding >= containerTop;
 
   const canBeDisplayedOnBottom =
     tooltipAnchorY + tooltipHeight + emojiKeyboardHeight + padding <=
     containerBottom;
 
   const emojiKeyboardOverflowTop =
     containerTop - (tooltipAnchorY + tooltipHeight - emojiKeyboardHeight);
 
   const emojiKeyboardOverflowTopCorrection =
     emojiKeyboardOverflowTop > 0 ? -emojiKeyboardOverflowTop - padding : 0;
 
   const emojiKeyboardOverflowRight =
     tooltipAnchorX + emojiKeyboardWidth - containerRight;
 
   const emojiKeyboardOverflowRightCorrection =
     emojiKeyboardOverflowRight > 0 ? -emojiKeyboardOverflowRight - padding : 0;
 
   if (alignment === 'left' && canBeDisplayedOnRight) {
     return {
       left: tooltipWidth,
       bottom: emojiKeyboardOverflowTopCorrection,
     };
   }
 
   if (alignment === 'right' && canBeDisplayedOnLeft) {
     return {
       left: -emojiKeyboardWidth,
       bottom: emojiKeyboardOverflowTopCorrection,
     };
   }
 
   if (canBeDisplayedOnTop) {
     return {
       bottom: tooltipHeight + padding,
       left: emojiKeyboardOverflowRightCorrection,
     };
   }
 
   if (canBeDisplayedOnBottom) {
     return {
       bottom: -emojiKeyboardHeight - padding,
       left: emojiKeyboardOverflowRightCorrection,
     };
   }
 
   return {
     left: alignment === 'left' ? -emojiKeyboardWidth : tooltipWidth,
     bottom: emojiKeyboardOverflowTopCorrection,
   };
 }
 
 export { useSendReaction, getEmojiKeyboardPosition };
diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js
index 1a5e7edd4..674aa22ab 100644
--- a/web/chat/thread-menu.react.js
+++ b/web/chat/thread-menu.react.js
@@ -1,314 +1,314 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useLeaveThread,
   leaveThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
 import { childThreadInfos } from 'lib/selectors/thread-selectors.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadIsChannel,
 } from 'lib/shared/thread-utils.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './thread-menu.css';
 import MenuItem from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
 import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react.js';
 import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react.js';
 import ComposeSubchannelModal from '../modals/threads/create/compose-subchannel-modal.react.js';
 import ThreadSettingsMediaGalleryModal from '../modals/threads/gallery/thread-settings-media-gallery.react.js';
 import ThreadMembersModal from '../modals/threads/members/members-modal.react.js';
 import ThreadNotificationsModal from '../modals/threads/notifications/notifications-modal.react.js';
 import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react.js';
 import SidebarsModal from '../modals/threads/sidebars/sidebars-modal.react.js';
 import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type ThreadMenuProps = {
   +threadInfo: ThreadInfo,
 };
 
 function ThreadMenu(props: ThreadMenuProps): React.Node {
   const { pushModal, popModal } = useModalContext();
   const { threadInfo } = props;
   const { onPromoteSidebar, canPromoteSidebar } = usePromoteSidebar(threadInfo);
 
   const onClickSettings = React.useCallback(
     () => pushModal(<ThreadSettingsModal threadID={threadInfo.id} />),
     [pushModal, threadInfo.id],
   );
 
   const settingsItem = React.useMemo(() => {
     return (
       <MenuItem
         key="settings"
         text="Settings"
         icon="settings"
         onClick={onClickSettings}
       />
     );
   }, [onClickSettings]);
 
   const onClickMembers = React.useCallback(
     () =>
       pushModal(
         <ThreadMembersModal threadID={threadInfo.id} onClose={popModal} />,
       ),
     [popModal, pushModal, threadInfo.id],
   );
   const membersItem = React.useMemo(() => {
     if (threadInfo.type === threadTypes.PERSONAL) {
       return null;
     }
     return (
       <MenuItem
         key="members"
         text="Members"
         icon="users"
         onClick={onClickMembers}
       />
     );
   }, [onClickMembers, threadInfo.type]);
 
   const onClickThreadMediaGallery = React.useCallback(
     () =>
       pushModal(
         <ThreadSettingsMediaGalleryModal
           onClose={popModal}
           parentThreadInfo={threadInfo}
           limit={36}
           activeTab="All"
         />,
       ),
     [popModal, pushModal, threadInfo],
   );
 
   const threadMediaGalleryItem = React.useMemo(
     () => (
       <MenuItem
         key="threadMediaGallery"
         text="Media"
         icon="image-1"
         onClick={onClickThreadMediaGallery}
       />
     ),
     [onClickThreadMediaGallery],
   );
 
   const childThreads = useSelector(
     state => childThreadInfos(state)[threadInfo.id],
   );
 
   const hasSidebars = React.useMemo(() => {
     return childThreads?.some(
       childThreadInfo => childThreadInfo.type === threadTypes.SIDEBAR,
     );
   }, [childThreads]);
 
   const onClickSidebars = React.useCallback(
     () =>
       pushModal(<SidebarsModal threadID={threadInfo.id} onClose={popModal} />),
     [popModal, pushModal, threadInfo.id],
   );
 
   const sidebarItem = React.useMemo(() => {
     if (!hasSidebars) {
       return null;
     }
     return (
       <MenuItem
         key="sidebars"
         text="Threads"
         icon="arrow-right"
         onClick={onClickSidebars}
       />
     );
   }, [hasSidebars, onClickSidebars]);
 
   const canCreateSubchannels = React.useMemo(
     () => threadHasPermission(threadInfo, threadPermissions.CREATE_SUBCHANNELS),
     [threadInfo],
   );
 
   const hasSubchannels = React.useMemo(() => {
     return !!childThreads?.some(threadIsChannel);
   }, [childThreads]);
 
   const onClickViewSubchannels = React.useCallback(
     () =>
       pushModal(
         <SubchannelsModal threadID={threadInfo.id} onClose={popModal} />,
       ),
     [popModal, pushModal, threadInfo.id],
   );
 
   const viewSubchannelsItem = React.useMemo(() => {
     if (!hasSubchannels) {
       return null;
     }
     return (
       <MenuItem
         key="subchannels"
         text="Subchannels"
         icon="message-square"
         onClick={onClickViewSubchannels}
       />
     );
   }, [hasSubchannels, onClickViewSubchannels]);
 
   const onClickCreateSubchannel = React.useCallback(
     () =>
       pushModal(
         <ComposeSubchannelModal
           parentThreadInfo={threadInfo}
           onClose={popModal}
         />,
       ),
     [popModal, pushModal, threadInfo],
   );
 
   const createSubchannelsItem = React.useMemo(() => {
     if (!canCreateSubchannels) {
       return null;
     }
     return (
       <MenuItem
         key="newSubchannel"
         text="Create new subchannel"
         icon="plus-circle"
         onClick={onClickCreateSubchannel}
       />
     );
   }, [canCreateSubchannels, onClickCreateSubchannel]);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callLeaveThread = useLeaveThread();
 
   const onConfirmLeaveThread = React.useCallback(() => {
     void dispatchActionPromise(
       leaveThreadActionTypes,
       callLeaveThread({ threadID: threadInfo.id }),
     );
     popModal();
   }, [callLeaveThread, popModal, dispatchActionPromise, threadInfo.id]);
 
   const onClickLeaveThread = React.useCallback(
     () =>
       pushModal(
         <ConfirmLeaveThreadModal
           threadInfo={threadInfo}
           onClose={popModal}
           onConfirm={onConfirmLeaveThread}
         />,
       ),
     [popModal, onConfirmLeaveThread, pushModal, threadInfo],
   );
 
   const leaveThreadItem = React.useMemo(() => {
     const canLeaveThread = threadHasPermission(
       threadInfo,
       threadPermissions.LEAVE_THREAD,
     );
     if (!viewerIsMember(threadInfo) || !canLeaveThread) {
       return null;
     }
     return (
       <MenuItem
         key="leave"
         text="Leave chat"
         icon="logout"
         dangerous
         onClick={onClickLeaveThread}
       />
     );
   }, [onClickLeaveThread, threadInfo]);
 
   const onClickPromoteSidebarToThread = React.useCallback(
     () =>
       pushModal(
         <SidebarPromoteModal
           threadInfo={threadInfo}
           onClose={popModal}
           onConfirm={onPromoteSidebar}
         />,
       ),
     [pushModal, threadInfo, popModal, onPromoteSidebar],
   );
 
   const promoteSidebar = React.useMemo(() => {
     return (
       <MenuItem
         key="promote"
         text="Promote to channel"
         icon="message-square-lines"
         onClick={onClickPromoteSidebarToThread}
       />
     );
   }, [onClickPromoteSidebarToThread]);
 
   const onClickNotifications = React.useCallback(() => {
     pushModal(
       <ThreadNotificationsModal threadID={threadInfo.id} onClose={popModal} />,
     );
   }, [popModal, pushModal, threadInfo.id]);
 
   const notificationsItem = React.useMemo(() => {
     if (!viewerIsMember(threadInfo)) {
       return null;
     }
     return (
       <MenuItem
         key="notifications"
         text="Notifications"
         icon="bell"
         onClick={onClickNotifications}
       />
     );
   }, [onClickNotifications, threadInfo]);
 
   const menuItems = React.useMemo(() => {
     const separator = <hr key="separator" className={css.separator} />;
 
     const items = [
       settingsItem,
       notificationsItem,
       membersItem,
       threadMediaGalleryItem,
       sidebarItem,
       viewSubchannelsItem,
       createSubchannelsItem,
       leaveThreadItem && separator,
       canPromoteSidebar && promoteSidebar,
       leaveThreadItem,
     ];
     return items.filter(Boolean);
   }, [
     settingsItem,
     notificationsItem,
     membersItem,
     threadMediaGalleryItem,
     sidebarItem,
     viewSubchannelsItem,
     promoteSidebar,
     createSubchannelsItem,
     leaveThreadItem,
     canPromoteSidebar,
   ]);
   const icon = React.useMemo(
     () => <SWMansionIcon icon="menu-vertical" size={20} />,
     [],
   );
   return <Menu icon={icon}>{menuItems}</Menu>;
 }
 
 export default ThreadMenu;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index 3d72cf0c1..f7d4833e0 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1707 +1,1707 @@
 // @flow
 
 import invariant from 'invariant';
 import _groupBy from 'lodash/fp/groupBy.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 import _omit from 'lodash/fp/omit.js';
 import _partition from 'lodash/fp/partition.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import { createSelector } from 'reselect';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   useLegacySendMultimediaMessage,
   sendTextMessageActionTypes,
   useSendTextMessage,
 } from 'lib/actions/message-actions.js';
 import type {
   LegacySendMultimediaMessageInput,
   SendTextMessageInput,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { useNewThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   updateMultimediaMessageMediaActionType,
   useDeleteUpload,
   useBlobServiceUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
   type BlobServiceUploadAction,
   type DeleteUploadInput,
 } from 'lib/actions/upload-actions.js';
 import {
   useModalContext,
   type PushModal,
 } from 'lib/components/modal-provider.react.js';
 import blobService from 'lib/facts/blob-service.js';
 import commStaffCommunity from 'lib/facts/comm-staff-community.js';
 import { getNextLocalUploadID } from 'lib/media/media-utils.js';
 import { pendingToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors.js';
 import {
   createMediaMessageInfo,
   localIDPrefix,
   useMessageCreationSideEffectsFunc,
 } from 'lib/shared/message-utils.js';
 import type { CreationSideEffectsFunc } from 'lib/shared/messages/message-spec.js';
 import {
   createRealThreadFromPendingThread,
   draftKeyFromThreadID,
   threadIsPending,
   threadIsPendingSidebar,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   MediaMissionStep,
   MediaMissionFailure,
   MediaMissionResult,
   MediaMission,
 } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
 } from 'lib/types/message-types.js';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images.js';
 import type { RawMediaMessageInfo } from 'lib/types/messages/media.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { reportTypes } from 'lib/types/report-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import {
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ThreadInfo,
 } from 'lib/types/thread-types.js';
-import {
-  type DispatchActionPromise,
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import {
   makeBlobServiceEndpointURL,
   isBlobServiceURI,
   blobHashFromBlobServiceURI,
 } from 'lib/utils/blob-service.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
+import {
+  useDispatchActionPromise,
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { generateReportID } from 'lib/utils/report-utils.js';
 
 import {
   type PendingMultimediaUpload,
   type TypeaheadState,
   InputStateContext,
   type BaseInputState,
   type TypeaheadInputState,
   type InputState,
 } from './input-state.js';
 import { encryptFile } from '../media/encryption-utils.js';
 import { generateThumbHash } from '../media/image-utils.js';
 import {
   preloadMediaResource,
   validateFile,
   preloadImage,
 } from '../media/media-utils.js';
 import InvalidUploadModal from '../modals/chat/invalid-upload.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 
 type CombinedInputState = {
   +inputBaseState: BaseInputState,
   +typeaheadState: TypeaheadInputState,
 };
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +drafts: { +[key: string]: string },
   +viewerID: ?string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +pendingRealizedThreadIDs: $ReadOnlyMap<string, string>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +calendarQuery: () => CalendarQuery,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +blobServiceUpload: BlobServiceUploadAction,
   +deleteUpload: (input: DeleteUploadInput) => Promise<void>,
   +sendMultimediaMessage: (
     input: LegacySendMultimediaMessageInput,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (input: SendTextMessageInput) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +pushModal: PushModal,
   +sendCallbacks: $ReadOnlyArray<() => mixed>,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type WritableState = {
   pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   textCursorPositions: { [threadID: string]: number },
   typeaheadState: TypeaheadState,
 };
 type State = $ReadOnly<WritableState>;
 
 type PropsAndState = {
   ...Props,
   ...State,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     textCursorPositions: {},
     typeaheadState: {
       canBeVisible: false,
       keepUpdatingThreadMembers: true,
       frozenUserMentionsCandidates: [],
       frozenChatMentionsCandidates: {},
       moveChoiceUp: null,
       moveChoiceDown: null,
       close: null,
       accept: null,
     },
   };
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations: Map<string, Promise<string>> = new Map<
     string,
     Promise<string>,
   >();
   // TODO: flip the switch
   // Note that this enables Blob service for encrypted media only
   useBlobServiceUploads = false;
 
   // When the user sends a multimedia message that triggers the creation of a
   // sidebar, the sidebar gets created right away, but the message needs to wait
   // for the uploads to complete before sending. We use this Set to track the
   // message localIDs that need sidebarCreation: true.
   pendingSidebarCreationMessageLocalIDs: Set<string> = new Set<string>();
 
   static reassignToRealizedThreads<T>(
     state: { +[threadID: string]: T },
     props: Props,
   ): ?{ [threadID: string]: T } {
     const newState: { [string]: T } = {};
     let updated = false;
     for (const threadID in state) {
       const newThreadID =
         props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State): ?Partial<State> {
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
     const textCursorPositions = InputStateContainer.reassignToRealizedThreads(
       state.textCursorPositions,
       props,
     );
 
     if (!pendingUploads && !textCursorPositions) {
       return null;
     }
 
     const stateUpdate: Partial<WritableState> = {};
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     if (textCursorPositions) {
       stateUpdate.textCursorPositions = textCursorPositions;
     }
     return stateUpdate;
   }
 
   static completedMessageIDs(state: State): Set<string> {
     const completed = new Map<string, boolean>();
     for (const threadID in state.pendingUploads) {
       const pendingUploads = state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID, serverID, failed } = upload;
         if (!messageID || !messageID.startsWith(localIDPrefix)) {
           continue;
         }
         if (!serverID || failed) {
           completed.set(messageID, false);
           continue;
         }
         if (completed.get(messageID) === undefined) {
           completed.set(messageID, true);
         }
       }
     }
     const messageIDs = new Set<string>();
     for (const [messageID, isCompleted] of completed) {
       if (isCompleted) {
         messageIDs.add(messageID);
       }
     }
     return messageIDs;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const previouslyAssignedMessageIDs = new Set<string>();
     for (const threadID in prevState.pendingUploads) {
       const pendingUploads = prevState.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const { messageID } = pendingUploads[localUploadID];
         if (messageID) {
           previouslyAssignedMessageIDs.add(messageID);
         }
       }
     }
 
     const newlyAssignedUploads = new Map<
       string,
       {
         +threadID: string,
         +shouldEncrypt: boolean,
         +uploads: PendingMultimediaUpload[],
       },
     >();
     for (const threadID in this.state.pendingUploads) {
       const pendingUploads = this.state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID } = upload;
         if (
           !messageID ||
           !messageID.startsWith(localIDPrefix) ||
           previouslyAssignedMessageIDs.has(messageID)
         ) {
           continue;
         }
         const { shouldEncrypt } = upload;
         let assignedUploads = newlyAssignedUploads.get(messageID);
         if (!assignedUploads) {
           assignedUploads = { threadID, shouldEncrypt, uploads: [] };
           newlyAssignedUploads.set(messageID, assignedUploads);
         }
         if (shouldEncrypt !== assignedUploads.shouldEncrypt) {
           console.warn(
             `skipping upload ${localUploadID} ` +
               "because shouldEncrypt doesn't match",
           );
           continue;
         }
         assignedUploads.uploads.push(upload);
       }
     }
 
     const newMessageInfos = new Map<string, RawMultimediaMessageInfo>();
     for (const [messageID, assignedUploads] of newlyAssignedUploads) {
       const { uploads, threadID, shouldEncrypt } = assignedUploads;
       const creatorID = this.props.viewerID;
       invariant(creatorID, 'need viewer ID in order to send a message');
       const media = uploads.map(
         ({
           localID,
           serverID,
           uri,
           mediaType,
           dimensions,
           encryptionKey,
           thumbHash,
         }) => {
           // We can get into this state where dimensions are null if the user is
           // uploading a file type that the browser can't render. In that case
           // we fake the dimensions here while we wait for the server to tell us
           // the true dimensions.
           const shimmedDimensions = dimensions ?? { height: 0, width: 0 };
           invariant(
             mediaType === 'photo' || mediaType === 'encrypted_photo',
             "web InputStateContainer can't handle video",
           );
           if (
             mediaType !== 'encrypted_photo' &&
             mediaType !== 'encrypted_video'
           ) {
             return {
               id: serverID ? serverID : localID,
               uri,
               type: 'photo',
               dimensions: shimmedDimensions,
               thumbHash,
             };
           }
           invariant(
             encryptionKey,
             'encrypted media must have an encryption key',
           );
           return {
             id: serverID ? serverID : localID,
             blobURI: uri,
             type: 'encrypted_photo',
             encryptionKey,
             dimensions: shimmedDimensions,
             thumbHash,
           };
         },
       );
       const messageInfo = createMediaMessageInfo(
         {
           localID: messageID,
           threadID,
           creatorID,
           media,
         },
         { forceMultimediaMessageType: shouldEncrypt },
       );
       newMessageInfos.set(messageID, messageInfo);
     }
 
     const currentlyCompleted = InputStateContainer.completedMessageIDs(
       this.state,
     );
     const previouslyCompleted =
       InputStateContainer.completedMessageIDs(prevState);
     for (const messageID of currentlyCompleted) {
       if (previouslyCompleted.has(messageID)) {
         continue;
       }
       let rawMessageInfo = newMessageInfos.get(messageID);
       if (rawMessageInfo) {
         newMessageInfos.delete(messageID);
       } else {
         rawMessageInfo = this.getRawMultimediaMessageInfo(messageID);
       }
       void this.sendMultimediaMessage(rawMessageInfo);
     }
 
     for (const [, messageInfo] of newMessageInfos) {
       this.props.dispatch({
         type: createLocalMessageActionType,
         payload: messageInfo,
       });
     }
   }
 
   getRawMultimediaMessageInfo(
     localMessageID: string,
   ): RawMultimediaMessageInfo {
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
     invariant(
       rawMessageInfo.type === messageTypes.IMAGES ||
         rawMessageInfo.type === messageTypes.MULTIMEDIA,
       `rawMessageInfo ${localMessageID} should be multimedia`,
     );
     return rawMessageInfo;
   }
 
   shouldEncryptMedia(threadInfo: ThreadInfo): boolean {
     return threadInfoInsideCommunity(threadInfo, commStaffCommunity.id);
   }
 
   async sendMultimediaMessage(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<void> {
     if (!threadIsPending(messageInfo.threadID)) {
       void this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     // While the thread was being created, the image preload may have completed,
     // and we might have a finalized URI now. So we fetch from Redux again
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should exist for locally-created RawMessageInfo',
     );
     const latestMessageInfo = this.getRawMultimediaMessageInfo(localID);
 
     // Conditional is necessary for Flow
     let newMessageInfo;
     if (latestMessageInfo.type === messageTypes.MULTIMEDIA) {
       newMessageInfo = {
         ...latestMessageInfo,
         threadID: newThreadID,
         time: Date.now(),
       };
     } else {
       newMessageInfo = {
         ...latestMessageInfo,
         threadID: newThreadID,
         time: Date.now(),
       };
     }
 
     void this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const sidebarCreation =
       this.pendingSidebarCreationMessageLocalIDs.has(localID);
     const mediaIDs = [];
     for (const { id } of messageInfo.media) {
       mediaIDs.push(id);
     }
     try {
       const result = await this.props.sendMultimediaMessage({
         threadID,
         localID,
         mediaIDs,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       this.setState(prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const newUploads: { [string]: PendingMultimediaUpload } = {};
         for (const localUploadID in prevUploads) {
           const upload = prevUploads[localUploadID];
           if (upload.messageID !== localID) {
             newUploads[localUploadID] = upload;
           } else if (!upload.uriIsReal) {
             newUploads[localUploadID] = {
               ...upload,
               messageID: result.id,
             };
           }
         }
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newUploads,
           },
         };
       });
       return {
         localID,
         serverID: result.id,
         threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = localID;
       copy.threadID = threadID;
       throw copy;
     }
   }
 
   startThreadCreation(threadInfo: ThreadInfo): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return Promise.resolve(threadInfo.id);
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   inputBaseStateSelector: (?string) => PropsAndState => BaseInputState =
     _memoize((threadID: ?string) =>
       createSelector(
         (propsAndState: PropsAndState) =>
           threadID ? propsAndState.pendingUploads[threadID] : null,
         (propsAndState: PropsAndState) =>
           threadID
             ? propsAndState.drafts[draftKeyFromThreadID(threadID)]
             : null,
         (propsAndState: PropsAndState) =>
           threadID ? propsAndState.textCursorPositions[threadID] : null,
         (
           pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
           draft: ?string,
           textCursorPosition: ?number,
         ) => {
           let threadPendingUploads: $ReadOnlyArray<PendingMultimediaUpload> =
             [];
           const assignedUploads: {
             [string]: $ReadOnlyArray<PendingMultimediaUpload>,
           } = {};
           if (pendingUploads) {
             const [uploadsWithMessageIDs, uploadsWithoutMessageIDs] =
               _partition('messageID')(pendingUploads);
             threadPendingUploads = _sortBy('localID')(uploadsWithoutMessageIDs);
             const threadAssignedUploads = _groupBy('messageID')(
               uploadsWithMessageIDs,
             );
             for (const messageID in threadAssignedUploads) {
               // lodash libdefs don't return $ReadOnlyArray
               assignedUploads[messageID] = [
                 ...threadAssignedUploads[messageID],
               ];
             }
           }
           return ({
             pendingUploads: threadPendingUploads,
             assignedUploads,
             draft: draft ?? '',
             textCursorPosition: textCursorPosition ?? 0,
             appendFiles: (
               threadInfo: ThreadInfo,
               files: $ReadOnlyArray<File>,
             ) => this.appendFiles(threadInfo, files),
             cancelPendingUpload: (localUploadID: string) =>
               this.cancelPendingUpload(threadID, localUploadID),
             sendTextMessage: (
               messageInfo: RawTextMessageInfo,
               threadInfo: ThreadInfo,
               parentThreadInfo: ?ThreadInfo,
             ) =>
               this.sendTextMessage(messageInfo, threadInfo, parentThreadInfo),
             createMultimediaMessage: (
               localID: number,
               threadInfo: ThreadInfo,
             ) => this.createMultimediaMessage(localID, threadInfo),
             setDraft: (newDraft: string) => this.setDraft(threadID, newDraft),
             setTextCursorPosition: (newPosition: number) =>
               this.setTextCursorPosition(threadID, newPosition),
             messageHasUploadFailure: (localMessageID: string) =>
               this.messageHasUploadFailure(assignedUploads[localMessageID]),
             retryMultimediaMessage: (
               localMessageID: string,
               threadInfo: ThreadInfo,
             ) =>
               this.retryMultimediaMessage(
                 localMessageID,
                 threadInfo,
                 assignedUploads[localMessageID],
               ),
             addReply: (message: string) => this.addReply(message),
             addReplyListener: this.addReplyListener,
             removeReplyListener: this.removeReplyListener,
             registerSendCallback: this.props.registerSendCallback,
             unregisterSendCallback: this.props.unregisterSendCallback,
           }: BaseInputState);
         },
       ),
     );
 
   typeaheadStateSelector: PropsAndState => TypeaheadInputState = createSelector(
     (propsAndState: PropsAndState) => propsAndState.typeaheadState,
     (typeaheadState: TypeaheadState) => ({
       typeaheadState,
       setTypeaheadState: this.setTypeaheadState,
     }),
   );
 
   inputStateSelector: CombinedInputState => InputState = createSelector(
     (state: CombinedInputState) => state.inputBaseState,
     (state: CombinedInputState) => state.typeaheadState,
     (inputBaseState: BaseInputState, typeaheadState: TypeaheadInputState) => ({
       ...inputBaseState,
       ...typeaheadState,
     }),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadInfo: ThreadInfo,
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     const selectionTime = Date.now();
     const { pushModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map(file => this.appendFile(threadInfo, file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
       pushModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
       for (const appendResult of appendResults) {
         const { steps } = appendResult;
         let { result } = appendResult;
         let uploadLocalID;
         if (result.success) {
           uploadLocalID = result.pendingUpload.localID;
           result = { success: false, reason: 'web_sibling_validation_failed' };
         }
         const mediaMission = { steps, result, userTime: time, totalTime: time };
         reports.push({ mediaMission, uploadLocalID });
       }
       this.queueMediaMissionReports(reports);
 
       return false;
     }
 
     const newUploads = appendResults.map(({ result }) => {
       invariant(result.success, 'any failed validation should be caught above');
       return result.pendingUpload;
     });
 
     const newUploadsObject = _keyBy('localID')(newUploads);
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const mergedUploads = prevUploads
           ? { ...prevUploads, ...newUploadsObject }
           : newUploadsObject;
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: mergedUploads,
           },
         };
       },
       () => this.uploadFiles(threadInfo.id, newUploads),
     );
     return true;
   }
 
   async appendFile(
     threadInfo: ThreadInfo,
     file: File,
     selectTime: number,
   ): Promise<{
     steps: $ReadOnlyArray<MediaMissionStep>,
     result:
       | MediaMissionFailure
       | { success: true, pendingUpload: PendingMultimediaUpload },
   }> {
     const steps: MediaMissionStep[] = [
       {
         step: 'web_selection',
         filename: file.name,
         size: file.size,
         mime: file.type,
         selectTime,
       },
     ];
 
     let response;
     const validationStart = Date.now();
     try {
       response = await validateFile(file);
     } catch (e) {
       return {
         steps,
         result: {
           success: false,
           reason: 'processing_exception',
           time: Date.now() - validationStart,
           exceptionMessage: getMessageForException(e),
         },
       };
     }
     const { steps: validationSteps, result } = response;
     steps.push(...validationSteps);
     if (!result.success) {
       return { steps, result };
     }
     const { uri, file: fixedFile, mediaType, dimensions } = result;
 
     const shouldEncrypt = this.shouldEncryptMedia(threadInfo);
 
     let encryptionResult;
     if (shouldEncrypt) {
       let encryptionResponse;
       const encryptionStart = Date.now();
       try {
         encryptionResponse = await encryptFile(fixedFile);
       } catch (e) {
         return {
           steps,
           result: {
             success: false,
             reason: 'encryption_exception',
             time: Date.now() - encryptionStart,
             exceptionMessage: getMessageForException(e),
           },
         };
       }
       steps.push(...encryptionResponse.steps);
       encryptionResult = encryptionResponse.result;
     }
     if (encryptionResult && !encryptionResult.success) {
       return { steps, result: encryptionResult };
     }
 
     const { steps: thumbHashSteps, result: thumbHashResult } =
       await generateThumbHash(fixedFile, encryptionResult?.encryptionKey);
     const thumbHash = thumbHashResult.success
       ? thumbHashResult.thumbHash
       : null;
     steps.push(...thumbHashSteps);
 
     return {
       steps,
       result: {
         success: true,
         pendingUpload: {
           localID: getNextLocalUploadID(),
           serverID: null,
           messageID: null,
           failed: false,
           file: encryptionResult?.file ?? fixedFile,
           mediaType: encryptionResult ? 'encrypted_photo' : mediaType,
           dimensions,
           uri: encryptionResult?.uri ?? uri,
           loop: false,
           uriIsReal: false,
           blobHolder: null,
           blobHash: encryptionResult?.sha256Hash,
           encryptionKey: encryptionResult?.encryptionKey,
           thumbHash,
           progressPercent: 0,
           abort: null,
           steps,
           selectTime,
           shouldEncrypt,
         },
       },
     };
   }
 
   uploadFiles(
     threadID: string,
     uploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ): Promise<mixed> {
     return Promise.all(
       uploads.map(upload => this.uploadFile(threadID, upload)),
     );
   }
 
   async uploadFile(threadID: string, upload: PendingMultimediaUpload) {
     const { selectTime, localID, encryptionKey } = upload;
     const isEncrypted =
       !!encryptionKey &&
       (upload.mediaType === 'encrypted_photo' ||
         upload.mediaType === 'encrypted_video');
 
     const steps = [...upload.steps];
     let userTime;
 
     const sendReport = (missionResult: MediaMissionResult) => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const latestUpload = this.state.pendingUploads[newThreadID][localID];
       invariant(
         latestUpload,
         `pendingUpload ${localID} for ${newThreadID} missing in sendReport`,
       );
       const { serverID, messageID } = latestUpload;
       const totalTime = Date.now() - selectTime;
       userTime = userTime ? userTime : totalTime;
       const mission = { steps, result: missionResult, totalTime, userTime };
       this.queueMediaMissionReports([
         {
           mediaMission: mission,
           uploadLocalID: localID,
           uploadServerID: serverID,
           messageLocalID: messageID,
         },
       ]);
     };
 
     let uploadResult, uploadExceptionMessage;
     const uploadStart = Date.now();
     try {
       const callbacks = {
         onProgress: (percent: number) =>
           this.setProgress(threadID, localID, percent),
         abortHandler: (abort: () => void) =>
           this.handleAbortCallback(threadID, localID, abort),
       };
       if (
         this.useBlobServiceUploads &&
         (upload.mediaType === 'encrypted_photo' ||
           upload.mediaType === 'encrypted_video')
       ) {
         const { blobHash, dimensions, thumbHash } = upload;
         invariant(
           encryptionKey && blobHash && dimensions,
           'incomplete encrypted upload',
         );
         uploadResult = await this.props.blobServiceUpload({
           uploadInput: {
             blobInput: {
               type: 'file',
               file: upload.file,
             },
             blobHash,
             encryptionKey,
             dimensions,
             loop: false,
             thumbHash,
           },
           keyserverOrThreadID: threadID,
           callbacks,
         });
       } else {
         let uploadExtras = {
           ...upload.dimensions,
           loop: false,
           thumbHash: upload.thumbHash,
         };
         if (encryptionKey) {
           uploadExtras = { ...uploadExtras, encryptionKey };
         }
         uploadResult = await this.props.uploadMultimedia(
           upload.file,
           uploadExtras,
           callbacks,
         );
       }
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       this.handleUploadFailure(threadID, localID);
     }
     userTime = Date.now() - selectTime;
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: upload.file.name,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
     });
     if (!uploadResult) {
       sendReport({
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       });
       return;
     }
     const result = uploadResult;
     const outputMediaType = isEncrypted ? 'encrypted_photo' : result.mediaType;
 
     const successThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterSuccess =
       this.state.pendingUploads[successThreadID][localID];
     invariant(
       uploadAfterSuccess,
       `pendingUpload ${localID}/${result.id} for ${successThreadID} missing ` +
         `after upload`,
     );
     if (uploadAfterSuccess.messageID) {
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterSuccess.messageID,
           currentMediaID: localID,
           mediaUpdate: {
             id: result.id,
           },
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning serverID`,
       );
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               serverID: result.id,
               blobHolder: result.blobHolder,
               abort: null,
             },
           },
         },
       };
     });
 
     if (encryptionKey) {
       const { steps: preloadSteps } = await preloadMediaResource(result.uri);
       steps.push(...preloadSteps);
     } else {
       const { steps: preloadSteps } = await preloadImage(result.uri);
       steps.push(...preloadSteps);
     }
     sendReport({ success: true });
 
     const preloadThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterPreload =
       this.state.pendingUploads[preloadThreadID][localID];
     invariant(
       uploadAfterPreload,
       `pendingUpload ${localID}/${result.id} for ${preloadThreadID} missing ` +
         `after preload`,
     );
     if (uploadAfterPreload.messageID) {
       const { mediaType, uri, dimensions, loop } = result;
       const { thumbHash } = upload;
       let mediaUpdate = {
         loop,
         dimensions,
         ...(thumbHash ? { thumbHash } : undefined),
       };
       if (!isEncrypted) {
         mediaUpdate = {
           ...mediaUpdate,
           type: mediaType,
           uri,
         };
       } else {
         mediaUpdate = {
           ...mediaUpdate,
           type: outputMediaType,
           blobURI: uri,
           encryptionKey,
         };
       }
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterPreload.messageID,
           currentMediaID: result.id ?? uploadAfterPreload.localID,
           mediaUpdate,
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning URI`,
       );
       const { messageID } = currentUpload;
       if (messageID && !messageID.startsWith(localIDPrefix)) {
         const newPendingUploads = _omit([localID])(uploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               uri: result.uri,
               mediaType: outputMediaType,
               dimensions: result.dimensions,
               uriIsReal: true,
               loop: result.loop,
             },
           },
         },
       };
     });
   }
 
   handleAbortCallback(
     threadID: string,
     localUploadID: string,
     abort: () => void,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been cancelled before we were even handed the
         // abort function. We should immediately abort.
         abort();
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               abort,
             },
           },
         },
       };
     });
   }
 
   handleUploadFailure(threadID: string, localUploadID: string) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload || !upload.abort || upload.serverID) {
         // The upload has been cancelled or completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
               abort: null,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReports(
     partials: $ReadOnlyArray<{
       mediaMission: MediaMission,
       uploadLocalID?: ?string,
       uploadServerID?: ?string,
       messageLocalID?: ?string,
     }>,
   ) {
     const reports = partials.map(
       ({ mediaMission, uploadLocalID, uploadServerID, messageLocalID }) => ({
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID,
         uploadLocalID,
         messageLocalID,
         id: generateReportID(),
       }),
     );
     this.props.dispatch({ type: queueReportsActionType, payload: { reports } });
   }
 
   cancelPendingUpload(threadID: ?string, localUploadID: string) {
     invariant(threadID, 'threadID should be set in cancelPendingUpload');
 
     let revokeURL: ?string, abortRequest: ?() => void;
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const currentPendingUploads = prevState.pendingUploads[newThreadID];
         if (!currentPendingUploads) {
           return {};
         }
         const pendingUpload = currentPendingUploads[localUploadID];
         if (!pendingUpload) {
           return {};
         }
         if (!pendingUpload.uriIsReal) {
           revokeURL = pendingUpload.uri;
         }
         if (pendingUpload.abort) {
           abortRequest = pendingUpload.abort;
         }
         if (pendingUpload.serverID) {
           void this.props.deleteUpload({
             id: pendingUpload.serverID,
             keyserverOrThreadID: threadID,
           });
           if (isBlobServiceURI(pendingUpload.uri)) {
             invariant(
               pendingUpload.blobHolder,
               'blob service upload has no holder',
             );
             const endpoint = blobService.httpEndpoints.DELETE_BLOB;
             const holder = pendingUpload.blobHolder;
             const blobHash = blobHashFromBlobServiceURI(pendingUpload.uri);
             void fetch(makeBlobServiceEndpointURL(endpoint), {
               method: endpoint.method,
               body: JSON.stringify({
                 holder,
                 blob_hash: blobHash,
               }),
               headers: {
                 'content-type': 'application/json',
               },
             });
           }
         }
         const newPendingUploads = _omit([localUploadID])(currentPendingUploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       },
       () => {
         if (revokeURL) {
           URL.revokeObjectURL(revokeURL);
         }
         if (abortRequest) {
           abortRequest();
         }
       },
     );
   }
 
   async sendTextMessage(
     messageInfo: RawTextMessageInfo,
     inputThreadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     if (threadIsPendingSidebar(inputThreadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localID);
     }
 
     if (!threadIsPending(inputThreadInfo.id)) {
       void this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(
           messageInfo,
           inputThreadInfo,
           parentThreadInfo,
         ),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let threadInfo = inputThreadInfo;
     const { viewerID } = this.props;
     if (viewerID && inputThreadInfo.type === threadTypes.SIDEBAR) {
       invariant(parentThreadInfo, 'sidebar should have parent');
       threadInfo = patchThreadInfoToIncludeMentionedMembersOfParent(
         inputThreadInfo,
         parentThreadInfo,
         messageInfo.text,
         viewerID,
       );
       if (threadInfo !== inputThreadInfo) {
         this.props.dispatch({
           type: updateNavInfoActionType,
           payload: { pendingThread: threadInfo },
         });
       }
     }
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
 
     // Branching to appease `flow`.
     const newThreadInfo = threadInfo.minimallyEncoded
       ? {
           ...threadInfo,
           id: newThreadID,
         }
       : {
           ...threadInfo,
           id: newThreadID,
         };
     void this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ): Promise<SendMessagePayload> {
     try {
       await this.props.textMessageCreationSideEffectsFunc(
         messageInfo,
         threadInfo,
         parentThreadInfo,
       );
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const sidebarCreation =
         this.pendingSidebarCreationMessageLocalIDs.has(localID);
       const result = await this.props.sendTextMessage({
         threadID: messageInfo.threadID,
         localID,
         text: messageInfo.text,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       return {
         localID,
         serverID: result.id,
         threadID: messageInfo.threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       throw copy;
     }
   }
 
   // Creates a MultimediaMessage from the unassigned pending uploads,
   // if there are any
   createMultimediaMessage(localID: number, threadInfo: ThreadInfo) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const localMessageID = `${localIDPrefix}${localID}`;
     void this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const currentPendingUploads = prevState.pendingUploads[newThreadID];
       if (!currentPendingUploads) {
         return {};
       }
       const newPendingUploads: { [string]: PendingMultimediaUpload } = {};
       let uploadAssigned = false;
       for (const localUploadID in currentPendingUploads) {
         const upload = currentPendingUploads[localUploadID];
         if (upload.messageID) {
           newPendingUploads[localUploadID] = upload;
         } else {
           const newUpload = {
             ...upload,
             messageID: localMessageID,
           };
           uploadAssigned = true;
           newPendingUploads[localUploadID] = newUpload;
         }
       }
       if (!uploadAssigned) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   setDraft(threadID: ?string, draft: string) {
     invariant(threadID, 'threadID should be set in setDraft');
 
     const newThreadID = this.getRealizedOrPendingThreadID(threadID);
     this.props.dispatch({
       type: 'UPDATE_DRAFT',
       payload: {
         key: draftKeyFromThreadID(newThreadID),
         text: draft,
       },
     });
   }
 
   setTextCursorPosition(threadID: ?string, newPosition: number) {
     invariant(threadID, 'threadID should be set in setTextCursorPosition');
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       return {
         textCursorPositions: {
           ...prevState.textCursorPositions,
           [newThreadID]: newPosition,
         },
       };
     });
   }
 
   setTypeaheadState = (newState: Partial<TypeaheadState>) => {
     this.setState(prevState => ({
       typeaheadState: {
         ...prevState.typeaheadState,
         ...newState,
       },
     }));
   };
 
   setProgress(
     threadID: string,
     localUploadID: string,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const pendingUploads = prevState.pendingUploads[newThreadID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   messageHasUploadFailure(
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ): boolean {
     if (!pendingUploads) {
       return false;
     }
     return pendingUploads.some(upload => upload.failed);
   }
 
   retryMultimediaMessage(
     localMessageID: string,
     threadInfo: ThreadInfo,
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const rawMessageInfo = this.getRawMultimediaMessageInfo(localMessageID);
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawMediaMessageInfo);
     } else {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawImagesMessageInfo);
     }
 
     void this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const completed = InputStateContainer.completedMessageIDs(this.state);
     if (completed.has(localMessageID)) {
       void this.sendMultimediaMessage(newRawMessageInfo);
       return;
     }
 
     if (!pendingUploads) {
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message's timestamp in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     const uploadIDsToRetry = new Set<string>();
     const uploadsToRetry = [];
     for (const pendingUpload of pendingUploads) {
       const { serverID, messageID, localID, abort } = pendingUpload;
       if (serverID || messageID !== localMessageID) {
         continue;
       }
       if (abort) {
         abort();
       }
       uploadIDsToRetry.add(localID);
       uploadsToRetry.push(pendingUpload);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const prevPendingUploads = prevState.pendingUploads[newThreadID];
       if (!prevPendingUploads) {
         return {};
       }
       const newPendingUploads: { [string]: PendingMultimediaUpload } = {};
       let pendingUploadChanged = false;
       for (const localID in prevPendingUploads) {
         const pendingUpload = prevPendingUploads[localID];
         if (uploadIDsToRetry.has(localID) && !pendingUpload.serverID) {
           newPendingUploads[localID] = {
             ...pendingUpload,
             failed: false,
             progressPercent: 0,
             abort: null,
           };
           pendingUploadChanged = true;
         } else {
           newPendingUploads[localID] = pendingUpload;
         }
       }
       if (!pendingUploadChanged) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
 
     void this.uploadFiles(threadInfo.id, uploadsToRetry);
   }
 
   addReply = (message: string) => {
     this.replyCallbacks.forEach(addReplyCallback => addReplyCallback(message));
   };
 
   addReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks.push(callbackReply);
   };
 
   removeReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks = this.replyCallbacks.filter(
       candidate => candidate !== callbackReply,
     );
   };
 
   render(): React.Node {
     const { activeChatThreadID } = this.props;
 
     // we're going with two selectors as we want to avoid
     // recreation of chat state setter functions on typeahead state updates
     const inputBaseState = this.inputBaseStateSelector(activeChatThreadID)({
       ...this.state,
       ...this.props,
     });
 
     const typeaheadState = this.typeaheadStateSelector({
       ...this.state,
       ...this.props,
     });
 
     const inputState = this.inputStateSelector({
       inputBaseState,
       typeaheadState,
     });
 
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(props) {
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const drafts = useSelector(state => state.draftStore.drafts);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const pendingToRealizedThreadIDs = useSelector(state =>
       pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callBlobServiceUpload = useBlobServiceUpload();
     const callDeleteUpload = useDeleteUpload();
     const callSendMultimediaMessage = useLegacySendMultimediaMessage();
     const callSendTextMessage = useSendTextMessage();
     const callNewThread = useNewThread();
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const modalContext = useModalContext();
 
     const [sendCallbacks, setSendCallbacks] = React.useState<
       $ReadOnlyArray<() => mixed>,
     >([]);
     const registerSendCallback = React.useCallback((callback: () => mixed) => {
       setSendCallbacks(prevCallbacks => [...prevCallbacks, callback]);
     }, []);
     const unregisterSendCallback = React.useCallback(
       (callback: () => mixed) => {
         setSendCallbacks(prevCallbacks =>
           prevCallbacks.filter(candidate => candidate !== callback),
         );
       },
       [],
     );
     const textMessageCreationSideEffectsFunc =
       useMessageCreationSideEffectsFunc<RawTextMessageInfo>(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         blobServiceUpload={callBlobServiceUpload}
         deleteUpload={callDeleteUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         pushModal={modalContext.pushModal}
         sendCallbacks={sendCallbacks}
         registerSendCallback={registerSendCallback}
         unregisterSendCallback={unregisterSendCallback}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/web/invite-links/accept-invite-modal.react.js b/web/invite-links/accept-invite-modal.react.js
index 4b0e344b6..25f99924f 100644
--- a/web/invite-links/accept-invite-modal.react.js
+++ b/web/invite-links/accept-invite-modal.react.js
@@ -1,133 +1,133 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useJoinThread,
   joinThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import ModalOverlay from 'lib/components/modal-overlay.react.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { type InviteLinkVerificationResponse } from 'lib/types/link-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './accept-invite-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 
 type Props = {
   +verificationResponse: InviteLinkVerificationResponse,
   +inviteSecret: string,
 };
 
 function AcceptInviteModal(props: Props): React.Node {
   const { verificationResponse, inviteSecret } = props;
   const [isLinkValid, setIsLinkValid] = React.useState(
     verificationResponse.status === 'valid',
   );
   const { popModal } = useModalContext();
 
   React.useEffect(() => {
     if (verificationResponse.status === 'already_joined') {
       popModal();
     }
   }, [popModal, verificationResponse.status]);
 
   const callJoinThread = useJoinThread();
   const calendarQuery = useSelector(nonThreadCalendarQuery);
   const communityID = verificationResponse.community?.id;
   const createJoinCommunityAction = React.useCallback(async () => {
     invariant(
       communityID,
       'CommunityID should be present while calling this function',
     );
     const query = calendarQuery();
     try {
       const result = await callJoinThread({
         threadID: communityID,
         calendarQuery: {
           startDate: query.startDate,
           endDate: query.endDate,
           filters: [
             ...query.filters,
             { type: 'threads', threadIDs: [communityID] },
           ],
         },
         inviteLinkSecret: inviteSecret,
       });
       popModal();
       return result;
     } catch (e) {
       setIsLinkValid(false);
       throw e;
     }
   }, [calendarQuery, callJoinThread, communityID, inviteSecret, popModal]);
   const dispatchActionPromise = useDispatchActionPromise();
   const joinCommunity = React.useCallback(() => {
     void dispatchActionPromise(
       joinThreadActionTypes,
       createJoinCommunityAction(),
     );
   }, [createJoinCommunityAction, dispatchActionPromise]);
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
 
   let content;
   if (verificationResponse.status === 'valid' && isLinkValid) {
     const { community } = verificationResponse;
     content = (
       <>
         <div className={css.text}>You have been invited to join</div>
         <div className={css.heading}>{community.name}</div>
         <hr />
         <div className={css.group}>
           <Button
             variant="filled"
             buttonColor={buttonThemes.standard}
             disabled={joinThreadLoadingStatus === 'loading'}
             onClick={joinCommunity}
           >
             Accept invite
           </Button>
           <Button variant="outline" onClick={popModal}>
             Cancel
           </Button>
         </div>
       </>
     );
   } else {
     content = (
       <>
         <div className={css.group}>
           <div className={css.heading}>Invite invalid</div>
           <div className={css.text}>
             This invite link may be expired. Please try again with another
             invite link.
           </div>
         </div>
         <hr />
         <Button
           variant="filled"
           buttonColor={buttonThemes.standard}
           onClick={popModal}
         >
           Return to Comm
         </Button>
       </>
     );
   }
 
   return (
     <ModalOverlay onClose={popModal}>
       <div className={css.container}>{content}</div>
     </ModalOverlay>
   );
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 
 export default AcceptInviteModal;
diff --git a/web/invite-links/invite-link-handler.react.js b/web/invite-links/invite-link-handler.react.js
index d41ece5ca..e462da827 100644
--- a/web/invite-links/invite-link-handler.react.js
+++ b/web/invite-links/invite-link-handler.react.js
@@ -1,66 +1,64 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   verifyInviteLink,
   verifyInviteLinkActionTypes,
 } from 'lib/actions/link-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import AcceptInviteModal from './accept-invite-modal.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 function InviteLinkHandler(): null {
   const inviteSecret = useSelector(state => state.navInfo.inviteSecret);
   const loggedIn = useSelector(isLoggedIn);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const dispatch = useDispatch();
   const validateLink = useServerCall(verifyInviteLink);
   const { pushModal } = useModalContext();
   React.useEffect(() => {
     if (!inviteSecret || !loggedIn) {
       return;
     }
     dispatch({
       type: updateNavInfoActionType,
       payload: { inviteSecret: null },
     });
     const validateLinkPromise = validateLink({ secret: inviteSecret });
     void dispatchActionPromise(
       verifyInviteLinkActionTypes,
       validateLinkPromise,
     );
     void (async () => {
       const result = await validateLinkPromise;
       if (result.status === 'already_joined') {
         return;
       }
       pushModal(
         <AcceptInviteModal
           verificationResponse={result}
           inviteSecret={inviteSecret}
         />,
       );
     })();
   }, [
     dispatch,
     dispatchActionPromise,
     inviteSecret,
     loggedIn,
     pushModal,
     validateLink,
   ]);
 
   return null;
 }
 
 export default InviteLinkHandler;
diff --git a/web/invite-links/invite-links-refresher.react.js b/web/invite-links/invite-links-refresher.react.js
index 1187d077b..0587b4819 100644
--- a/web/invite-links/invite-links-refresher.react.js
+++ b/web/invite-links/invite-links-refresher.react.js
@@ -1,33 +1,33 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   fetchPrimaryInviteLinkActionTypes,
   useFetchPrimaryInviteLinks,
 } from 'lib/actions/link-actions.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import { useSelector } from '../redux/redux-utils.js';
 
 function InviteLinksRefresher(): React.Node {
   const isActive = useSelector(state => state.windowActive);
   const loggedIn = useSelector(isLoggedIn);
   const callFetchPrimaryLinks = useFetchPrimaryInviteLinks();
   const dispatchActionPromise = useDispatchActionPromise();
 
   React.useEffect(() => {
     if (!isActive || !loggedIn) {
       return;
     }
     void dispatchActionPromise(
       fetchPrimaryInviteLinkActionTypes,
       callFetchPrimaryLinks(),
     );
   }, [callFetchPrimaryLinks, dispatchActionPromise, isActive, loggedIn]);
 
   return null;
 }
 
 export default InviteLinksRefresher;
diff --git a/web/modals/chat/pinned-messages-modal.react.js b/web/modals/chat/pinned-messages-modal.react.js
index 5d4799032..eb2b66d8e 100644
--- a/web/modals/chat/pinned-messages-modal.react.js
+++ b/web/modals/chat/pinned-messages-modal.react.js
@@ -1,172 +1,172 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   fetchPinnedMessageActionTypes,
   useFetchPinnedMessages,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import {
   messageListData,
   type ChatMessageInfoItem,
 } from 'lib/selectors/chat-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   createMessageInfo,
   isInvalidPinSourceForThread,
   modifyItemForResultScreen,
 } from 'lib/shared/message-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { pinnedMessageCountText } from 'lib/utils/message-pinning-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './pinned-messages-modal.css';
 import MessageResult from '../../components/message-result.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import Modal from '../modal.react.js';
 
 type Props = {
   +threadInfo: ThreadInfo,
 };
 
 const loadingStatusSelector = createLoadingStatusSelector(
   fetchPinnedMessageActionTypes,
 );
 
 function PinnedMessagesModal(props: Props): React.Node {
   const { threadInfo } = props;
   const { id: threadID } = threadInfo;
   const { popModal } = useModalContext();
   const [rawMessageResults, setRawMessageResults] = React.useState<
     $ReadOnlyArray<RawMessageInfo>,
   >([]);
 
   const callFetchPinnedMessages = useFetchPinnedMessages();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const userInfos = useSelector(state => state.userStore.userInfos);
   const loadingStatus = useSelector(loadingStatusSelector);
 
   React.useEffect(() => {
     void dispatchActionPromise(
       fetchPinnedMessageActionTypes,
       (async () => {
         const result = await callFetchPinnedMessages({ threadID });
         setRawMessageResults(result.pinnedMessages);
       })(),
     );
   }, [dispatchActionPromise, callFetchPinnedMessages, threadID]);
 
   const translatedMessageResults = React.useMemo(() => {
     const threadInfos = { [threadID]: threadInfo };
 
     return rawMessageResults
       .map(messageInfo =>
         createMessageInfo(messageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [rawMessageResults, userInfos, threadID, threadInfo]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedMessageResults),
   );
 
   const sortedUniqueChatMessageInfoItems = React.useMemo(() => {
     if (!chatMessageInfos) {
       return ([]: ChatMessageInfoItem[]);
     }
 
     const chatMessageInfoItems = chatMessageInfos.filter(
       item =>
         item.itemType === 'message' &&
         item.isPinned &&
         !isInvalidPinSourceForThread(item.messageInfo, threadInfo),
     );
 
     // By the nature of using messageListData and passing in
     // the desired translatedMessageResults as additional
     // messages, we will have duplicate ChatMessageInfoItems.
     const uniqueChatMessageInfoItemsMap = new Map<
       string,
       ChatMessageInfoItem,
     >();
     chatMessageInfoItems.forEach(
       item =>
         item.messageInfo &&
         item.messageInfo.id &&
         uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
     );
 
     // Push the items in the order they appear in the rawMessageResults
     // since the messages fetched from the server are already sorted
     // in the order of pin_time (newest first).
     const sortedChatMessageInfoItems = [];
     for (let i = 0; i < rawMessageResults.length; i++) {
       const rawMessageID = rawMessageResults[i].id;
       if (!rawMessageID) {
         continue;
       }
       sortedChatMessageInfoItems.push(
         uniqueChatMessageInfoItemsMap.get(rawMessageID),
       );
     }
 
     return sortedChatMessageInfoItems;
   }, [chatMessageInfos, rawMessageResults, threadInfo]);
 
   const modifiedItems = React.useMemo(
     () =>
       sortedUniqueChatMessageInfoItems
         .filter(Boolean)
         .map(item => modifyItemForResultScreen(item)),
     [sortedUniqueChatMessageInfoItems],
   );
 
   const messageResultsToDisplay = React.useMemo(() => {
     if (modifiedItems.length === 0) {
       return (
         <div className={css.noPinnedMessages}>
           No pinned messages in this thread.
         </div>
       );
     }
 
     const items = modifiedItems.map(item => (
       <MessageResult
         key={item.messageInfo.id}
         item={item}
         threadInfo={threadInfo}
         scrollable={false}
       />
     ));
     return <>{items}</>;
   }, [modifiedItems, threadInfo]);
 
   const loadingIndicator = React.useMemo(() => {
     if (loadingStatus === 'loading') {
       return (
         <div className={css.loadingIndicator}>
           <LoadingIndicator status="loading" size="medium" />
         </div>
       );
     }
     return null;
   }, [loadingStatus]);
 
   const modalName = pinnedMessageCountText(modifiedItems.length);
 
   return (
     <Modal name={modalName} onClose={popModal} size="large">
       <hr className={css.separator} />
       <div className={css.topSpace}>{loadingIndicator}</div>
       <div className={css.messageResultsContainer}>
         {messageResultsToDisplay}
       </div>
     </Modal>
   );
 }
 
 export default PinnedMessagesModal;
diff --git a/web/modals/chat/toggle-pin-modal.react.js b/web/modals/chat/toggle-pin-modal.react.js
index 4b2a9955c..d34d23ac8 100644
--- a/web/modals/chat/toggle-pin-modal.react.js
+++ b/web/modals/chat/toggle-pin-modal.react.js
@@ -1,130 +1,130 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useToggleMessagePin,
   toggleMessagePinActionTypes,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { modifyItemForResultScreen } from 'lib/shared/message-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './toggle-pin-modal.css';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import MessageResult from '../../components/message-result.react.js';
 import Modal from '../modal.react.js';
 
 type TogglePinModalProps = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 
 function TogglePinModal(props: TogglePinModalProps): React.Node {
   const { item, threadInfo } = props;
   const { messageInfo, isPinned } = item;
   const { popModal } = useModalContext();
 
   const callToggleMessagePin = useToggleMessagePin();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const modalInfo = React.useMemo(() => {
     if (isPinned) {
       return {
         name: 'Remove Pinned Message',
         action: 'unpin',
         confirmationText:
           'Are you sure you want to remove this pinned message?',
         buttonText: 'Remove Pinned Message',
         buttonColor: buttonThemes.danger,
       };
     }
 
     return {
       name: 'Pin Message',
       action: 'pin',
       confirmationText: `You may pin this message to the channel 
         you are currently viewing. To unpin a message, select the pinned 
         messages icon in the channel.`,
       buttonText: 'Pin Message',
       buttonColor: buttonThemes.standard,
     };
   }, [isPinned]);
 
   // We want to remove inline engagement (threadCreatedFromMessage / reactions)
   // and the message header (startsConversation). We also want to set isViewer
   // to false so that the message is left-aligned and uncolored.
   const modifiedItem = React.useMemo(() => {
     if (item.messageInfoType !== 'composable') {
       return item;
     }
 
     const strippedItem = {
       ...item,
       threadCreatedFromMessage: undefined,
       reactions: {},
     };
     return modifyItemForResultScreen(strippedItem);
   }, [item]);
 
   const onClick = React.useCallback(() => {
     const createToggleMessagePinPromise = async () => {
       invariant(messageInfo.id, 'messageInfo.id should be defined');
       const result = await callToggleMessagePin({
         messageID: messageInfo.id,
         action: modalInfo.action,
       });
       return ({
         newMessageInfos: result.newMessageInfos,
         threadID: result.threadID,
       }: {
         +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
         +threadID: string,
       });
     };
 
     void dispatchActionPromise(
       toggleMessagePinActionTypes,
       createToggleMessagePinPromise(),
     );
     popModal();
   }, [
     modalInfo,
     callToggleMessagePin,
     dispatchActionPromise,
     messageInfo.id,
     popModal,
   ]);
 
   return (
     <Modal name={modalInfo.name} onClose={popModal} size="large">
       <div className={css.confirmationText}>{modalInfo.confirmationText}</div>
       <div className={css.messageContainer}>
         <MessageResult
           item={modifiedItem}
           threadInfo={threadInfo}
           scrollable={true}
         />
       </div>
       <div className={css.buttonContainer}>
         <Button
           variant="filled"
           className={css.togglePinButton}
           buttonColor={modalInfo.buttonColor}
           onClick={onClick}
         >
           {modalInfo.buttonText}
         </Button>
         <div className={css.cancelButton} onClick={popModal}>
           Cancel
         </div>
       </div>
     </Modal>
   );
 }
 
 export default TogglePinModal;
diff --git a/web/modals/history/history-entry.react.js b/web/modals/history/history-entry.react.js
index cb0385ed8..f9cb41e47 100644
--- a/web/modals/history/history-entry.react.js
+++ b/web/modals/history/history-entry.react.js
@@ -1,188 +1,188 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   restoreEntryActionTypes,
   useRestoreEntry,
 } from 'lib/actions/entry-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import {
   type EntryInfo,
   type RestoreEntryInfo,
   type RestoreEntryResult,
   type CalendarQuery,
   type RestoreEntryPayload,
 } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
 import type { UserInfo } from 'lib/types/user-types.js';
+import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
-import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import css from './history.css';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../../selectors/nav-selectors.js';
 
 type BaseProps = {
   +entryInfo: EntryInfo,
   +onClick: (entryID: string) => void,
   +animateAndLoadEntry: (entryID: string) => void,
 };
 type Props = {
   ...BaseProps,
   +threadInfo: ResolvedThreadInfo,
   +loggedIn: boolean,
   +restoreLoadingStatus: LoadingStatus,
   +calendarQuery: () => CalendarQuery,
   +dispatchActionPromise: DispatchActionPromise,
   +restoreEntry: (info: RestoreEntryInfo) => Promise<RestoreEntryResult>,
   +creator: ?UserInfo,
 };
 
 class HistoryEntry extends React.PureComponent<Props> {
   render(): React.Node {
     let deleted = null;
     if (this.props.entryInfo.deleted) {
       let restore = null;
       if (this.props.loggedIn) {
         restore = (
           <span>
             <span className={css.restoreEntryLabel}>
               (
               <a href="#" onClick={this.onRestore}>
                 restore
               </a>
               )
             </span>
             <LoadingIndicator
               status={this.props.restoreLoadingStatus}
               color="black"
               loadingClassName={css.restoreLoading}
               errorClassName={css.restoreError}
             />
           </span>
         );
       }
       deleted = (
         <span className={css.deletedEntry}>
           <span className={css.deletedEntryLabel}>deleted</span>
           {restore}
         </span>
       );
     }
 
     const textClasses = classNames({
       [css.entry]: true,
       [css.darkEntry]: colorIsDark(this.props.threadInfo.color),
     });
     const textStyle = { backgroundColor: '#' + this.props.threadInfo.color };
     const creator = this.props.creator?.username ? (
       <span className={css.entryUsername}>{this.props.creator.username}</span>
     ) : (
       'anonymous'
     );
 
     return (
       <li>
         <div className={textClasses} style={textStyle}>
           {this.props.entryInfo.text}
         </div>
         <span className={css.entryAuthor}>
           {'created by '}
           {creator}
         </span>
         <span className={css.entryThread}>{this.props.threadInfo.uiName}</span>
         <div className={css.clear} />
         {deleted}
         <a
           href="#"
           className={css.revisionHistoryButton}
           onClick={this.onClick}
         >
           revision history &gt;
         </a>
         <div className={css.clear} />
       </li>
     );
   }
 
   onRestore = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const entryID = this.props.entryInfo.id;
     invariant(entryID, 'entryInfo.id (serverID) should be set');
     void this.props.dispatchActionPromise(
       restoreEntryActionTypes,
       this.restoreEntryAction(),
       { customKeyName: `${restoreEntryActionTypes.started}:${entryID}` },
     );
   };
 
   onClick = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const entryID = this.props.entryInfo.id;
     invariant(entryID, 'entryInfo.id (serverID) should be set');
     this.props.onClick(entryID);
   };
 
   async restoreEntryAction(): Promise<RestoreEntryPayload> {
     const entryID = this.props.entryInfo.id;
     invariant(entryID, 'entry should have ID');
     const result = await this.props.restoreEntry({
       entryID,
       calendarQuery: this.props.calendarQuery(),
     });
     this.props.animateAndLoadEntry(entryID);
     return { ...result, threadID: this.props.threadInfo.id };
   }
 }
 
 const ConnectedHistoryEntry: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedHistoryEntry(props) {
     const entryID = props.entryInfo.id;
     invariant(entryID, 'entryInfo.id (serverID) should be set');
     const unresolvedThreadInfo = useSelector(
       state => threadInfoSelector(state)[props.entryInfo.threadID],
     );
     const threadInfo = useResolvedThreadInfo(unresolvedThreadInfo);
     const loggedIn = useSelector(
       state =>
         !!(state.currentUserInfo && !state.currentUserInfo.anonymous && true),
     );
     const restoreLoadingStatus = useSelector(
       createLoadingStatusSelector(
         restoreEntryActionTypes,
         `${restoreEntryActionTypes.started}:${entryID}`,
       ),
     );
     const calenderQuery = useSelector(nonThreadCalendarQuery);
     const callRestoreEntry = useRestoreEntry();
     const dispatchActionPromise = useDispatchActionPromise();
 
     const { creator } = props.entryInfo;
     const [creatorWithENSName] = useENSNames([creator]);
 
     return (
       <HistoryEntry
         {...props}
         threadInfo={threadInfo}
         loggedIn={loggedIn}
         restoreLoadingStatus={restoreLoadingStatus}
         calendarQuery={calenderQuery}
         dispatchActionPromise={dispatchActionPromise}
         restoreEntry={callRestoreEntry}
         creator={creatorWithENSName}
       />
     );
   });
 
 export default ConnectedHistoryEntry;
diff --git a/web/modals/history/history-modal.react.js b/web/modals/history/history-modal.react.js
index b3d0be17d..af8117a94 100644
--- a/web/modals/history/history-modal.react.js
+++ b/web/modals/history/history-modal.react.js
@@ -1,287 +1,287 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _flow from 'lodash/fp/flow.js';
 import _map from 'lodash/fp/map.js';
 import _unionBy from 'lodash/fp/unionBy.js';
 import * as React from 'react';
 
 import {
   fetchEntriesActionTypes,
   useFetchEntries,
   fetchRevisionsForEntryActionTypes,
   useFetchRevisionsForEntry,
 } from 'lib/actions/entry-actions.js';
 import type { FetchRevisionsForEntryInput } from 'lib/actions/entry-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { nonExcludeDeletedCalendarFiltersSelector } from 'lib/selectors/calendar-filter-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type {
   EntryInfo,
   CalendarQuery,
   FetchEntryInfosResult,
   FetchRevisionsForEntryPayload,
 } from 'lib/types/entry-types.js';
 import { type CalendarFilter } from 'lib/types/filter-types.js';
 import type {
   HistoryMode,
   HistoryRevisionInfo,
 } from 'lib/types/history-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
+import { prettyDateWithoutDay } from 'lib/utils/date-utils.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
-import { prettyDateWithoutDay } from 'lib/utils/date-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import HistoryEntry from './history-entry.react.js';
 import HistoryRevision from './history-revision.react.js';
 import css from './history.css';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { allDaysToEntries } from '../../selectors/entry-selectors.js';
 import Modal from '../modal.react.js';
 
 type BaseProps = {
   +mode: HistoryMode,
   +dayString: string,
   +currentEntryID?: ?string,
 };
 type Props = {
   ...BaseProps,
   +entryInfos: ?(EntryInfo[]),
   +dayLoadingStatus: LoadingStatus,
   +entryLoadingStatus: LoadingStatus,
   +calendarFilters: $ReadOnlyArray<CalendarFilter>,
   +dispatchActionPromise: DispatchActionPromise,
   +fetchEntries: (
     calendarQuery: CalendarQuery,
   ) => Promise<FetchEntryInfosResult>,
   +fetchRevisionsForEntry: (
     input: FetchRevisionsForEntryInput,
   ) => Promise<$ReadOnlyArray<HistoryRevisionInfo>>,
   +onClose: () => void,
 };
 type State = {
   +mode: HistoryMode,
   +animateModeChange: boolean,
   +currentEntryID: ?string,
   +revisions: $ReadOnlyArray<HistoryRevisionInfo>,
 };
 class HistoryModal extends React.PureComponent<Props, State> {
   static defaultProps: Partial<Props> = { currentEntryID: null };
 
   constructor(props: Props) {
     super(props);
     this.state = {
       mode: props.mode,
       animateModeChange: false,
       currentEntryID: props.currentEntryID,
       revisions: [],
     };
   }
 
   componentDidMount() {
     this.loadDay();
     if (this.state.mode === 'entry') {
       invariant(this.state.currentEntryID, 'entry ID should be set');
       this.loadEntry(this.state.currentEntryID);
     }
   }
 
   render(): React.Node {
     let allHistoryButton = null;
     if (this.state.mode === 'entry') {
       allHistoryButton = (
         <a
           href="#"
           onClick={this.onClickAllEntries}
           className={css.allHistoryButton}
         >
           &lt; all entries
         </a>
       );
     }
     const prettyDate = prettyDateWithoutDay(this.props.dayString);
     const loadingStatus =
       this.state.mode === 'day'
         ? this.props.dayLoadingStatus
         : this.props.entryLoadingStatus;
 
     let entries;
     const entryInfos = this.props.entryInfos;
     if (entryInfos) {
       entries = _flow(
         _filter((entryInfo: EntryInfo) => entryInfo.id),
         _map((entryInfo: EntryInfo) => {
           const serverID = entryInfo.id;
           invariant(serverID, 'serverID should be set');
           return (
             <HistoryEntry
               entryInfo={entryInfo}
               onClick={this.onClickEntry}
               animateAndLoadEntry={this.animateAndLoadEntry}
               key={serverID}
             />
           );
         }),
       )(entryInfos);
     } else {
       entries = [];
     }
 
     const revisionInfos = this.state.revisions.filter(
       revisionInfo => revisionInfo.entryID === this.state.currentEntryID,
     );
     const revisions = [];
     for (let i = 0; i < revisionInfos.length; i++) {
       const revisionInfo = revisionInfos[i];
       const nextRevisionInfo = revisionInfos[i + 1];
       const isDeletionOrRestoration =
         nextRevisionInfo !== undefined &&
         revisionInfo.deleted !== nextRevisionInfo.deleted;
       revisions.push(
         <HistoryRevision
           revisionInfo={revisionInfo}
           isDeletionOrRestoration={isDeletionOrRestoration}
           key={revisionInfo.id}
         />,
       );
     }
 
     const animate = this.state.animateModeChange;
     const dayMode = this.state.mode === 'day';
     const dayClasses = classNames({
       [css.dayHistory]: true,
       [css.dayHistoryVisible]: dayMode && !animate,
       [css.dayHistoryInvisible]: !dayMode && !animate,
       [css.dayHistoryVisibleAnimate]: dayMode && animate,
       [css.dayHistoryInvisibleAnimate]: !dayMode && animate,
     });
     const entryMode = this.state.mode === 'entry';
     const entryClasses = classNames({
       [css.entryHistory]: true,
       [css.entryHistoryVisible]: entryMode && !animate,
       [css.entryHistoryInvisible]: !entryMode && !animate,
       [css.entryHistoryVisibleAnimate]: entryMode && animate,
       [css.entryHistoryInvisibleAnimate]: !entryMode && animate,
     });
 
     return (
       <Modal name="History" onClose={this.props.onClose}>
         <div className={css.modalBody}>
           <div className={css.header}>
             {allHistoryButton}
             <span className={css.date}>{prettyDate}</span>
             <LoadingIndicator
               status={loadingStatus}
               color="black"
               loadingClassName={css.loading}
               errorClassName={css.error}
             />
           </div>
           <div className={dayClasses}>
             <ul>{entries}</ul>
           </div>
           <div className={entryClasses}>
             <ul>{revisions}</ul>
           </div>
         </div>
       </Modal>
     );
   }
 
   loadDay() {
     void this.props.dispatchActionPromise(
       fetchEntriesActionTypes,
       this.props.fetchEntries({
         startDate: this.props.dayString,
         endDate: this.props.dayString,
         filters: this.props.calendarFilters,
       }),
     );
   }
 
   loadEntry(entryID: string) {
     this.setState({ mode: 'entry', currentEntryID: entryID });
     void this.props.dispatchActionPromise(
       fetchRevisionsForEntryActionTypes,
       this.fetchRevisionsForEntryAction(entryID),
     );
   }
 
   async fetchRevisionsForEntryAction(
     entryID: string,
   ): Promise<FetchRevisionsForEntryPayload> {
     const result = await this.props.fetchRevisionsForEntry({ entryID });
     this.setState(prevState => {
       // This merge here will preserve time ordering correctly
       const revisions = _unionBy('id')(result)(prevState.revisions);
       return { ...prevState, revisions };
     });
     return {
       entryID,
       text: result[0].text,
       deleted: result[0].deleted,
     };
   }
 
   onClickEntry = (entryID: string) => {
     this.setState({ animateModeChange: true });
     this.loadEntry(entryID);
   };
 
   onClickAllEntries = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.setState({
       mode: 'day',
       animateModeChange: true,
     });
   };
 
   animateAndLoadEntry = (entryID: string) => {
     this.setState({ animateModeChange: true });
     this.loadEntry(entryID);
   };
 }
 
 const dayLoadingStatusSelector = createLoadingStatusSelector(
   fetchEntriesActionTypes,
 );
 const entryLoadingStatusSelector = createLoadingStatusSelector(
   fetchRevisionsForEntryActionTypes,
 );
 
 const ConnectedHistoryModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedHistoryModal(props) {
     const entryInfos = useSelector(
       state => allDaysToEntries(state)[props.dayString],
     );
     const dayLoadingStatus = useSelector(dayLoadingStatusSelector);
     const entryLoadingStatus = useSelector(entryLoadingStatusSelector);
     const calendarFilters = useSelector(
       nonExcludeDeletedCalendarFiltersSelector,
     );
     const callFetchEntries = useFetchEntries();
     const callFetchRevisionsForEntry = useFetchRevisionsForEntry();
     const dispatchActionPromise = useDispatchActionPromise();
     const modalContext = useModalContext();
 
     return (
       <HistoryModal
         {...props}
         entryInfos={entryInfos}
         dayLoadingStatus={dayLoadingStatus}
         entryLoadingStatus={entryLoadingStatus}
         calendarFilters={calendarFilters}
         fetchEntries={callFetchEntries}
         fetchRevisionsForEntry={callFetchRevisionsForEntry}
         dispatchActionPromise={dispatchActionPromise}
         onClose={modalContext.popModal}
       />
     );
   });
 
 export default ConnectedHistoryModal;
diff --git a/web/modals/terms-and-privacy-modal.react.js b/web/modals/terms-and-privacy-modal.react.js
index cde20c44a..3aa9ae55b 100644
--- a/web/modals/terms-and-privacy-modal.react.js
+++ b/web/modals/terms-and-privacy-modal.react.js
@@ -1,96 +1,94 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   policyAcknowledgment,
   policyAcknowledgmentActionTypes,
 } from 'lib/actions/user-actions.js';
 import { policyTypes } from 'lib/facts/policies.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import { acknowledgePolicy } from 'lib/utils/policy-acknowledge-utlis.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import Modal from './modal.react.js';
 import css from './terms-and-privacy-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const loadingStatusSelector = createLoadingStatusSelector(
   policyAcknowledgmentActionTypes,
 );
 
 const disabledOnClose = () => undefined;
 
 function TermsAndPrivacyModal(): React.Node {
   const loading = useSelector(loadingStatusSelector);
   const [acknowledgmentError, setAcknowledgmentError] = React.useState('');
   const sendAcknowledgmentRequest = useServerCall(policyAcknowledgment);
   const dispatchActionPromise = useDispatchActionPromise();
 
   const onAccept = React.useCallback(() => {
     acknowledgePolicy(
       policyTypes.tosAndPrivacyPolicy,
       dispatchActionPromise,
       sendAcknowledgmentRequest,
       setAcknowledgmentError,
     );
   }, [dispatchActionPromise, sendAcknowledgmentRequest]);
 
   const buttonContent = React.useMemo(() => {
     if (loading === 'loading') {
       return <LoadingIndicator status="loading" size="medium" />;
     }
     return 'I accept';
   }, [loading]);
 
   return (
     <Modal
       withCloseButton={false}
       modalHeaderCentered={true}
       onClose={disabledOnClose}
       name="Terms of Service and Privacy Policy"
       size="large"
     >
       <div className={css.container}>
         We recently updated our{' '}
         <a
           href="https://comm.app/terms"
           target="_blank"
           rel="noreferrer"
           className={css.link}
         >
           Terms of Service
         </a>
         {' & '}
         <a
           href="https://comm.app/privacy"
           target="_blank"
           rel="noreferrer"
           className={css.link}
         >
           Privacy Policy
         </a>
         . In order to continue using Comm, we&rsquo;re asking you to read
         through, acknowledge, and accept the updated policies.
       </div>
 
       <div className={css.button}>
         <Button
           variant="filled"
           buttonColor={buttonThemes.standard}
           onClick={onAccept}
         >
           <div className={css.buttonContent}>{buttonContent}</div>
         </Button>
         <div className={css.error}>{acknowledgmentError}</div>
       </div>
     </Modal>
   );
 }
 
 export default TermsAndPrivacyModal;
diff --git a/web/modals/threads/create/compose-subchannel-modal.react.js b/web/modals/threads/create/compose-subchannel-modal.react.js
index 67156ac35..6f41f3c33 100644
--- a/web/modals/threads/create/compose-subchannel-modal.react.js
+++ b/web/modals/threads/create/compose-subchannel-modal.react.js
@@ -1,276 +1,276 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useNewThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { trimText } from 'lib/utils/text-utils.js';
 
 import css from './compose-subchannel-modal.css';
 import SubchannelMembers from './steps/subchannel-members.react.js';
 import SubchannelSettings from './steps/subchannel-settings.react.js';
 import type { VisibilityType } from './steps/subchannel-settings.react.js';
 import Stepper from '../../../components/stepper.react.js';
 import { updateNavInfoActionType } from '../../../redux/action-types.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../../../selectors/nav-selectors.js';
 import Modal from '../../modal.react.js';
 
 type Props = {
   +onClose: () => void,
   +parentThreadInfo: ThreadInfo,
 };
 
 const getThreadType = (visibility: VisibilityType, announcement: boolean) => {
   if (visibility === 'open') {
     return announcement
       ? threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD
       : threadTypes.COMMUNITY_OPEN_SUBTHREAD;
   } else {
     return announcement
       ? threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD
       : threadTypes.COMMUNITY_SECRET_SUBTHREAD;
   }
 };
 
 type Steps = 'settings' | 'members';
 
 type HeaderProps = {
   +parentThreadName: string,
 };
 
 function ComposeSubchannelHeader(props: HeaderProps): React.Node {
   const { parentThreadName } = props;
   return (
     <div className={css.modalHeader}>
       <div>{'within '}</div>
       <div className={css.modalHeaderParentName}>{parentThreadName}</div>
     </div>
   );
 }
 
 const createSubchannelLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 function ComposeSubchannelModal(props: Props): React.Node {
   const { parentThreadInfo, onClose } = props;
   const { uiName: parentThreadName } = useResolvedThreadInfo(parentThreadInfo);
 
   const [activeStep, setActiveStep] = React.useState<Steps>('settings');
 
   const [channelName, setChannelName] = React.useState<string>('');
   const [visibilityType, setVisibilityType] =
     React.useState<VisibilityType>('open');
   const [announcement, setAnnouncement] = React.useState<boolean>(false);
   const [selectedUsers, setSelectedUsers] = React.useState<
     $ReadOnlySet<string>,
   >(new Set());
   const [searchUserText, setSearchUserText] = React.useState<string>('');
 
   const loadingState = useSelector(createSubchannelLoadingStatusSelector);
 
   const [errorMessage, setErrorMessage] = React.useState<string>('');
 
   const calendarQuery = useSelector(nonThreadCalendarQuery);
   const callNewThread = useNewThread();
 
   const dispatchActionPromise = useDispatchActionPromise();
   const dispatch = useDispatch();
 
   const createSubchannel = React.useCallback(async () => {
     try {
       const threadType = getThreadType(visibilityType, announcement);
 
       const query = calendarQuery();
       const result = await callNewThread({
         name: channelName,
         type: threadType,
         parentThreadID: parentThreadInfo.id,
         initialMemberIDs: Array.from(selectedUsers),
         calendarQuery: query,
         color: parentThreadInfo.color,
       });
 
       return result;
     } catch (e) {
       await setErrorMessage('unknown error');
       return null;
     }
   }, [
     parentThreadInfo,
     selectedUsers,
     visibilityType,
     announcement,
     callNewThread,
     calendarQuery,
     channelName,
   ]);
 
   const dispatchCreateSubchannel = React.useCallback(async () => {
     await setErrorMessage('');
 
     const response = createSubchannel();
     await dispatchActionPromise(newThreadActionTypes, response);
     const result = await response;
 
     if (result) {
       const { newThreadID } = result;
       await dispatch({
         type: updateNavInfoActionType,
         payload: {
           activeChatThreadID: newThreadID,
         },
       });
 
       props.onClose();
     }
   }, [dispatchActionPromise, createSubchannel, props, dispatch]);
 
   const onChangeChannelName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       const target = event.currentTarget;
       setChannelName(target.value);
     },
     [],
   );
 
   const onOpenVisibilityTypeSelected = React.useCallback(
     () => setVisibilityType('open'),
     [],
   );
 
   const onSecretVisibilityTypeSelected = React.useCallback(
     () => setVisibilityType('secret'),
     [],
   );
 
   const onAnnouncementSelected = React.useCallback(
     () => setAnnouncement(!announcement),
     [announcement],
   );
 
   const toggleUserSelection = React.useCallback((userID: string) => {
     setSelectedUsers((users: $ReadOnlySet<string>) => {
       const newUsers = new Set(users);
       if (newUsers.has(userID)) {
         newUsers.delete(userID);
       } else {
         newUsers.add(userID);
       }
       return newUsers;
     });
   }, []);
 
   const subchannelSettings = React.useMemo(
     () => (
       <SubchannelSettings
         channelName={channelName}
         visibilityType={visibilityType}
         announcement={announcement}
         onChangeChannelName={onChangeChannelName}
         onOpenTypeSelect={onOpenVisibilityTypeSelected}
         onSecretTypeSelect={onSecretVisibilityTypeSelected}
         onAnnouncementSelected={onAnnouncementSelected}
       />
     ),
     [
       channelName,
       visibilityType,
       announcement,
       onChangeChannelName,
       onOpenVisibilityTypeSelected,
       onSecretVisibilityTypeSelected,
       onAnnouncementSelected,
     ],
   );
 
   const stepperButtons = React.useMemo(
     () => ({
       settings: {
         nextProps: {
           content: 'Next',
           disabled: !channelName.trim(),
           onClick: () => {
             setErrorMessage('');
             setChannelName(channelName.trim());
             setActiveStep('members');
           },
         },
       },
       members: {
         prevProps: {
           content: 'Back',
           onClick: () => setActiveStep('settings'),
         },
         nextProps: {
           content: 'Create',
           loading: loadingState === 'loading',
           disabled: selectedUsers.size === 0,
           onClick: dispatchCreateSubchannel,
         },
       },
     }),
     [channelName, dispatchCreateSubchannel, loadingState, selectedUsers],
   );
 
   const subchannelMembers = React.useMemo(
     () => (
       <SubchannelMembers
         parentThreadInfo={parentThreadInfo}
         selectedUsers={selectedUsers}
         searchText={searchUserText}
         setSearchText={setSearchUserText}
         toggleUserSelection={toggleUserSelection}
       />
     ),
     [
       selectedUsers,
       toggleUserSelection,
       parentThreadInfo,
       searchUserText,
       setSearchUserText,
     ],
   );
 
   const modalName =
     activeStep === 'members'
       ? `Create channel - ${trimText(channelName, 11)}`
       : 'Create channel';
 
   return (
     <Modal name={modalName} onClose={onClose} size="fit-content">
       <div className={css.container}>
         <ComposeSubchannelHeader parentThreadName={parentThreadName} />
         <div className={css.stepItem}>
           <Stepper.Container
             className={css.stepContainer}
             activeStep={activeStep}
           >
             <Stepper.Item
               content={subchannelSettings}
               name="settings"
               nextProps={stepperButtons.settings.nextProps}
             />
             <Stepper.Item
               content={subchannelMembers}
               name="members"
               prevProps={stepperButtons.members.prevProps}
               nextProps={stepperButtons.members.nextProps}
               errorMessage={errorMessage}
             />
           </Stepper.Container>
         </div>
       </div>
     </Modal>
   );
 }
 
 export default ComposeSubchannelModal;
diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
index a26f57308..5b4b611e6 100644
--- a/web/modals/threads/members/add-members-modal.react.js
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -1,182 +1,182 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userInfoSelectorForPotentialMembers } from 'lib/selectors/user-selectors.js';
 import { usePotentialMemberItems } from 'lib/shared/search-utils.js';
 import { threadActualMembers } from 'lib/shared/thread-utils.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import AddMembersListContent from './add-members-list-content.react.js';
 import css from './members-modal.css';
 import Button from '../../../components/button.react.js';
 import Label from '../../../components/label.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import SearchModal from '../../search-modal.react.js';
 
 type ContentProps = {
   +searchText: string,
   +threadID: string,
   +onClose: () => void,
 };
 
 function AddMembersModalContent(props: ContentProps): React.Node {
   const { searchText, threadID, onClose } = props;
 
   const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
     $ReadOnlySet<string>,
   >(new Set());
 
   const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
   const { parentThreadID, community } = threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
   const communityThreadInfo = useSelector(state =>
     community ? threadInfoSelector(state)[community] : null,
   );
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   const excludeUserIDs = React.useMemo(
     () =>
       threadActualMembers(threadInfo.members).concat(
         Array.from(pendingUsersToAdd),
       ),
     [pendingUsersToAdd, threadInfo.members],
   );
 
   const userSearchResults = usePotentialMemberItems({
     text: searchText,
     userInfos: otherUserInfos,
     excludeUserIDs,
     inputParentThreadInfo: parentThreadInfo,
     inputCommunityThreadInfo: communityThreadInfo,
     threadType: threadInfo.type,
   });
   const userSearchResultsWithENSNames = useENSNames(userSearchResults);
 
   const onSwitchUser = React.useCallback(
     (userID: string) =>
       setPendingUsersToAdd(users => {
         const newUsers = new Set(users);
         if (newUsers.has(userID)) {
           newUsers.delete(userID);
         } else {
           newUsers.add(userID);
         }
         return newUsers;
       }),
     [],
   );
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useChangeThreadSettings();
 
   const addUsers = React.useCallback(() => {
     void dispatchActionPromise(
       changeThreadSettingsActionTypes,
       callChangeThreadSettings({
         threadID,
         changes: { newMemberIDs: Array.from(pendingUsersToAdd) },
       }),
     );
     onClose();
   }, [
     callChangeThreadSettings,
     dispatchActionPromise,
     onClose,
     pendingUsersToAdd,
     threadID,
   ]);
 
   const pendingUserInfos = React.useMemo(
     () =>
       Array.from(pendingUsersToAdd)
         .map(userID => ({
           id: userID,
           username: otherUserInfos[userID].username,
         }))
         .sort((a, b) => a.username.localeCompare(b.username)),
     [otherUserInfos, pendingUsersToAdd],
   );
   const pendingUserInfosWithENSNames = useENSNames(pendingUserInfos);
 
   const labelItems = React.useMemo(() => {
     if (!pendingUserInfosWithENSNames.length) {
       return null;
     }
     return (
       <div className={css.addMembersPendingList}>
         {pendingUserInfosWithENSNames.map(userInfo => (
           <Label key={userInfo.id} onClose={() => onSwitchUser(userInfo.id)}>
             {userInfo.username}
           </Label>
         ))}
       </div>
     );
   }, [onSwitchUser, pendingUserInfosWithENSNames]);
 
   return (
     <div className={css.addMembersContent}>
       {labelItems}
       <div className={css.addMembersListContainer}>
         <AddMembersListContent
           userListItems={userSearchResultsWithENSNames}
           switchUser={onSwitchUser}
           pendingUsersToAdd={pendingUsersToAdd}
           hasParentThread={!!threadInfo.parentThreadID}
         />
       </div>
       <div className={css.addMembersFooter}>
         <Button onClick={onClose} variant="outline">
           Cancel
         </Button>
         <Button
           disabled={!pendingUsersToAdd.size}
           variant="filled"
           onClick={addUsers}
         >
           Add selected members
         </Button>
       </div>
     </div>
   );
 }
 
 type Props = {
   +threadID: string,
   +onClose: () => void,
 };
 
 function AddMembersModal(props: Props): React.Node {
   const { threadID, onClose } = props;
 
   const addMembersModalContent = React.useCallback(
     (searchText: string) => (
       <AddMembersModalContent
         searchText={searchText}
         threadID={threadID}
         onClose={onClose}
       />
     ),
     [onClose, threadID],
   );
 
   return (
     <SearchModal
       name="Add members"
       searchPlaceholder="Search members"
       onClose={onClose}
       size="fit-content"
     >
       {addMembersModalContent}
     </SearchModal>
   );
 }
 
 export { AddMembersModal, AddMembersModalContent };
diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
index 5646add70..70cd73f77 100644
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -1,153 +1,153 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useChangeThreadMemberRoles,
   changeThreadMemberRolesActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
 import { roleIsAdminRole } from 'lib/shared/thread-utils.js';
 import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './change-member-role-modal.css';
 import UserAvatar from '../../../avatars/user-avatar.react.js';
 import Button, { buttonThemes } from '../../../components/button.react.js';
 import Dropdown from '../../../components/dropdown.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import Modal from '../../modal.react.js';
 import UnsavedChangesModal from '../../unsaved-changes-modal.react.js';
 
 type ChangeMemberRoleModalProps = {
   +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo,
 };
 
 function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
   const { memberInfo, threadInfo } = props;
   const { pushModal, popModal } = useModalContext();
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadMemberRoles = useChangeThreadMemberRoles();
   const otherUsersButNoOtherAdminsValue = useSelector(
     otherUsersButNoOtherAdmins(threadInfo.id),
   );
 
   const roleOptions = React.useMemo(
     () =>
       values(threadInfo.roles).map(role => ({
         id: role.id,
         name: role.name,
       })),
     [threadInfo.roles],
   );
 
   const initialSelectedRole = memberInfo.role;
   invariant(initialSelectedRole, "Member's role must be defined");
 
   const [selectedRole, setSelectedRole] = React.useState(initialSelectedRole);
 
   const onCloseModal = React.useCallback(() => {
     if (selectedRole === initialSelectedRole) {
       popModal();
       return;
     }
 
     pushModal(<UnsavedChangesModal />);
   }, [initialSelectedRole, popModal, pushModal, selectedRole]);
 
   const disabledRoleChangeMessage = React.useMemo(() => {
     const memberIsAdmin = roleIsAdminRole(
       threadInfo.roles[initialSelectedRole],
     );
 
     if (!otherUsersButNoOtherAdminsValue || !memberIsAdmin) {
       return null;
     }
 
     return (
       <div className={css.roleModalDisabled}>
         <SWMansionIcon icon="info-circle" size={36} className={css.infoIcon} />
         <div className={css.infoText}>
           There must be at least one admin at any given time in a community.
         </div>
       </div>
     );
   }, [initialSelectedRole, otherUsersButNoOtherAdminsValue, threadInfo.roles]);
 
   const onSave = React.useCallback(() => {
     if (selectedRole === initialSelectedRole) {
       popModal();
       return;
     }
 
     const createChangeThreadMemberRolesPromise = () =>
       callChangeThreadMemberRoles({
         threadID: threadInfo.id,
         memberIDs: [memberInfo.id],
         newRole: selectedRole,
       });
 
     void dispatchActionPromise(
       changeThreadMemberRolesActionTypes,
       createChangeThreadMemberRolesPromise(),
     );
     popModal();
   }, [
     callChangeThreadMemberRoles,
     dispatchActionPromise,
     initialSelectedRole,
     memberInfo.id,
     popModal,
     selectedRole,
     threadInfo.id,
   ]);
 
   return (
     <Modal name="Change Role" onClose={onCloseModal} size="large">
       <div className={css.roleModalDescription}>
         Members can only be assigned to one role at a time. Changing a
         member&rsquo;s role will replace their previously assigned role.
       </div>
       <div className={css.roleModalMember}>
         <div className={css.roleModalMemberAvatar}>
           <UserAvatar userID={memberInfo.id} size="M" />
         </div>
         <div className={css.roleModalMemberName}>{memberInfo.username}</div>
       </div>
       <div className={css.roleModalRoleSelector}>
         <Dropdown
           options={roleOptions}
           activeSelection={selectedRole}
           setActiveSelection={setSelectedRole}
           disabled={!!disabledRoleChangeMessage}
         />
       </div>
       {disabledRoleChangeMessage}
       <div className={css.roleModalActionButtons}>
         <Button
           variant="outline"
           className={css.roleModalBackButton}
           onClick={onCloseModal}
         >
           Back
         </Button>
         <Button
           variant="filled"
           className={css.roleModalSaveButton}
           buttonColor={buttonThemes.primary}
           onClick={onSave}
           disabled={!!disabledRoleChangeMessage}
         >
           Save
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default ChangeMemberRoleModal;
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
index 6b44a0a37..fa94d03db 100644
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -1,135 +1,135 @@
 // @flow
 
 import * as React from 'react';
 
 import { useRemoveUsersFromThread } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import {
   removeMemberFromThread,
   getAvailableThreadMemberActions,
 } from 'lib/shared/thread-utils.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
 import type { SetState } from 'lib/types/hook-types.js';
 import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
 
 import ChangeMemberRoleModal from './change-member-role-modal.react.js';
 import css from './members-modal.css';
 import UserAvatar from '../../../avatars/user-avatar.react.js';
 import CommIcon from '../../../CommIcon.react.js';
 import Label from '../../../components/label.react.js';
 import MenuItem from '../../../components/menu-item.react.js';
 import Menu from '../../../components/menu.react.js';
 import { usePushUserProfileModal } from '../../user-profile/user-profile-utils.js';
 
 const commIconComponent = <CommIcon size={18} icon="user-edit" />;
 
 type Props = {
   +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo,
   +setOpenMenu: SetState<?string>,
 };
 
 function ThreadMember(props: Props): React.Node {
   const { memberInfo, threadInfo, setOpenMenu } = props;
   const { pushModal } = useModalContext();
   const userName = stringForUser(memberInfo);
 
   const roles = useRolesFromCommunityThreadInfo(threadInfo, [memberInfo]);
   const roleName = roles.get(memberInfo.id)?.name;
 
   const onMenuChange = React.useCallback(
     (menuOpen: boolean) => {
       if (menuOpen) {
         setOpenMenu(() => memberInfo.id);
       } else {
         setOpenMenu(menu => (menu === memberInfo.id ? null : menu));
       }
     },
     [memberInfo.id, setOpenMenu],
   );
 
   const dispatchActionPromise = useDispatchActionPromise();
   const boundRemoveUsersFromThread = useRemoveUsersFromThread();
 
   const onClickRemoveUser = React.useCallback(
     () =>
       removeMemberFromThread(
         threadInfo,
         memberInfo,
         dispatchActionPromise,
         boundRemoveUsersFromThread,
       ),
     [boundRemoveUsersFromThread, dispatchActionPromise, memberInfo, threadInfo],
   );
 
   const onClickChangeRole = React.useCallback(() => {
     pushModal(
       <ChangeMemberRoleModal memberInfo={memberInfo} threadInfo={threadInfo} />,
     );
   }, [memberInfo, pushModal, threadInfo]);
 
   const menuItems = React.useMemo(
     () =>
       getAvailableThreadMemberActions(memberInfo, threadInfo).map(action => {
         if (action === 'change_role') {
           return (
             <MenuItem
               key="change_role"
               text="Change Role"
               iconComponent={commIconComponent}
               onClick={onClickChangeRole}
             />
           );
         }
         if (action === 'remove_user') {
           return (
             <MenuItem
               key="remove_user"
               text="Remove User"
               icon="logout"
               onClick={onClickRemoveUser}
               dangerous
             />
           );
         }
         return null;
       }),
     [memberInfo, onClickRemoveUser, onClickChangeRole, threadInfo],
   );
 
   const userSettingsIcon = React.useMemo(
     () => <SWMansionIcon icon="edit-1" size={17} />,
     [],
   );
 
   const label = React.useMemo(
     () => <Label variant="grey">{roleName}</Label>,
     [roleName],
   );
 
   const pushUserProfileModal = usePushUserProfileModal(memberInfo.id);
 
   return (
     <div className={css.memberContainer} onClick={pushUserProfileModal}>
       <div className={css.memberInfo}>
         <UserAvatar size="S" userID={memberInfo.id} />
         {userName}
         {label}
       </div>
       <div className={css.memberAction}>
         <Menu
           icon={userSettingsIcon}
           variant="member-actions"
           onChange={onMenuChange}
         >
           {menuItems}
         </Menu>
       </div>
     </div>
   );
 }
 
 export default ThreadMember;
diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js
index 9067cde3b..b7d89dc78 100644
--- a/web/modals/threads/notifications/notifications-modal.react.js
+++ b/web/modals/threads/notifications/notifications-modal.react.js
@@ -1,266 +1,266 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useUpdateSubscription,
   updateSubscriptionActionTypes,
 } from 'lib/actions/user-actions.js';
 import { canPromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { threadIsSidebar } from 'lib/shared/thread-utils.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './notifications-modal.css';
 import AllNotifsIllustration from '../../../assets/all-notifs.react.js';
 import BadgeNotifsIllustration from '../../../assets/badge-notifs.react.js';
 import MutedNotifsIllustration from '../../../assets/muted-notifs.react.js';
 import Button from '../../../components/button.react.js';
 import EnumSettingsOption from '../../../components/enum-settings-option.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import Modal from '../../modal.react.js';
 
 type NotificationSettings = 'focused' | 'badge-only' | 'background';
 
 const BANNER_NOTIFS = 'Banner notifs';
 const BADGE_COUNT = 'Badge count';
 const IN_FOCUSED_TAB = 'Lives in Focused tab';
 const IN_BACKGROUND_TAB = 'Lives in Background tab';
 
 const focusedStatements = [
   {
     statement: BANNER_NOTIFS,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: BADGE_COUNT,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: IN_FOCUSED_TAB,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
 ];
 
 const badgeOnlyStatements = [
   {
     statement: BANNER_NOTIFS,
     isStatementValid: false,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: BADGE_COUNT,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: IN_FOCUSED_TAB,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
 ];
 
 const backgroundStatements = [
   {
     statement: BANNER_NOTIFS,
     isStatementValid: false,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: BADGE_COUNT,
     isStatementValid: false,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: IN_BACKGROUND_TAB,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
 ];
 
 type Props = {
   +threadID: string,
   +onClose: () => void,
 };
 function NotificationsModal(props: Props): React.Node {
   const { onClose, threadID } = props;
   const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
   const { subscription } = threadInfo.currentUser;
   const { parentThreadID } = threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
   const isSidebar = threadIsSidebar(threadInfo);
 
   const initialThreadSetting = React.useMemo<NotificationSettings>(() => {
     if (!subscription.home) {
       return 'background';
     }
     if (!subscription.pushNotifs) {
       return 'badge-only';
     }
     return 'focused';
   }, [subscription.home, subscription.pushNotifs]);
 
   const [notificationSettings, setNotificationSettings] =
     React.useState<NotificationSettings>(initialThreadSetting);
 
   const onFocusedSelected = React.useCallback(
     () => setNotificationSettings('focused'),
     [],
   );
   const onBadgeOnlySelected = React.useCallback(
     () => setNotificationSettings('badge-only'),
     [],
   );
   const onBackgroundSelected = React.useCallback(
     () => setNotificationSettings('background'),
     [],
   );
 
   const isFocusedSelected = notificationSettings === 'focused';
   const focusedItem = React.useMemo(() => {
     const icon = <AllNotifsIllustration />;
     return (
       <EnumSettingsOption
         selected={isFocusedSelected}
         title="Focused (enabled)"
         statements={focusedStatements}
         icon={icon}
         onSelect={onFocusedSelected}
       />
     );
   }, [isFocusedSelected, onFocusedSelected]);
 
   const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only';
   const focusedBadgeOnlyItem = React.useMemo(() => {
     const icon = <BadgeNotifsIllustration />;
     return (
       <EnumSettingsOption
         selected={isFocusedBadgeOnlySelected}
         title="Focused (badge only)"
         statements={badgeOnlyStatements}
         icon={icon}
         onSelect={onBadgeOnlySelected}
       />
     );
   }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]);
 
   const isBackgroundSelected = notificationSettings === 'background';
   const backgroundItem = React.useMemo(() => {
     const icon = <MutedNotifsIllustration />;
     return (
       <EnumSettingsOption
         selected={isBackgroundSelected}
         title="Background"
         statements={backgroundStatements}
         icon={icon}
         disabled={isSidebar}
         onSelect={onBackgroundSelected}
       />
     );
   }, [isBackgroundSelected, onBackgroundSelected, isSidebar]);
 
   const dispatchActionPromise = useDispatchActionPromise();
 
   const callUpdateSubscription = useUpdateSubscription();
 
   const onClickSave = React.useCallback(() => {
     void dispatchActionPromise(
       updateSubscriptionActionTypes,
       callUpdateSubscription({
         threadID: threadID,
         updatedFields: {
           home: notificationSettings !== 'background',
           pushNotifs: notificationSettings === 'focused',
         },
       }),
     );
     onClose();
   }, [
     callUpdateSubscription,
     dispatchActionPromise,
     notificationSettings,
     onClose,
     threadID,
   ]);
 
   const modalName = isSidebar
     ? 'Thread notifications'
     : 'Channel notifications';
 
   let modalContent;
   if (isSidebar && !parentThreadInfo?.currentUser.subscription.home) {
     modalContent = (
       <>
         <p>
           {'It’s not possible to change the notif settings for a thread ' +
             'whose parent is in Background. That’s because Comm’s design ' +
             'always shows threads underneath their parent in the Inbox, ' +
             'which means that if a thread’s parent is in Background, the ' +
             'thread must also be there.'}
         </p>
         <p>
           {canPromoteSidebar(threadInfo, parentThreadInfo)
             ? 'If you want to change the notif settings for this thread, ' +
               'you can either change the notif settings for the parent, ' +
               'or you can promote the thread to a channel.'
             : 'If you want to change the notif settings for this thread, ' +
               'you’ll have to change the notif settings for the parent.'}
         </p>
       </>
     );
   } else {
     let noticeText = null;
     if (isSidebar) {
       noticeText = (
         <>
           <p className={css.notice}>
             {'It’s not possible to move this thread to Background. ' +
               'That’s because Comm’s design always shows threads ' +
               'underneath their parent in the Inbox, which means ' +
               'that if a thread’s parent is in Focused, the thread ' +
               'must also be there.'}
           </p>
           <p className={css.notice}>
             {canPromoteSidebar(threadInfo, parentThreadInfo)
               ? 'If you want to move this thread to Background, ' +
                 'you can either move the parent to Background, ' +
                 'or you can promote the thread to a channel.'
               : 'If you want to move this thread to Background, ' +
                 'you’ll have to move the parent to Background.'}
           </p>
         </>
       );
     }
 
     modalContent = (
       <>
         <div className={css.optionsContainer}>
           {focusedItem}
           {focusedBadgeOnlyItem}
           {backgroundItem}
         </div>
         <Button
           variant="filled"
           onClick={onClickSave}
           disabled={notificationSettings === initialThreadSetting}
         >
           Save
         </Button>
         {noticeText}
       </>
     );
   }
 
   return (
     <Modal name={modalName} size="fit-content" onClose={onClose}>
       <div className={css.container}>{modalContent}</div>
     </Modal>
   );
 }
 
 export default NotificationsModal;
diff --git a/web/modals/threads/settings/thread-settings-delete-tab.react.js b/web/modals/threads/settings/thread-settings-delete-tab.react.js
index a5c99a252..77adde4f4 100644
--- a/web/modals/threads/settings/thread-settings-delete-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-delete-tab.react.js
@@ -1,131 +1,131 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   deleteThreadActionTypes,
   useDeleteThread,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { containedThreadInfos } from 'lib/selectors/thread-selectors.js';
 import { type SetState } from 'lib/types/hook-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import SubmitSection from './submit-section.react.js';
 import ThreadDeleteConfirmationModal from './thread-settings-delete-confirmation-modal.react.js';
 import css from './thread-settings-delete-tab.css';
 import { buttonThemes } from '../../../components/button.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 
 type ThreadSettingsDeleteTabProps = {
   +threadSettingsOperationInProgress: boolean,
   +threadInfo: ThreadInfo,
   +setErrorMessage: SetState<?string>,
   +errorMessage?: ?string,
 };
 
 function ThreadSettingsDeleteTab(
   props: ThreadSettingsDeleteTabProps,
 ): React.Node {
   const {
     threadSettingsOperationInProgress,
     threadInfo,
     setErrorMessage,
     errorMessage,
   } = props;
 
   const modalContext = useModalContext();
   const dispatchActionPromise = useDispatchActionPromise();
   const callDeleteThread = useDeleteThread();
   const containedThreads = useSelector(
     state => containedThreadInfos(state)[threadInfo.id],
   );
   const shouldUseDeleteConfirmationModal = React.useMemo(
     () => containedThreads?.length > 0,
     [containedThreads?.length],
   );
 
   const popThreadDeleteConfirmationModal = React.useCallback(() => {
     if (shouldUseDeleteConfirmationModal) {
       modalContext.popModal();
     }
   }, [modalContext, shouldUseDeleteConfirmationModal]);
   const deleteThreadAction = React.useCallback(async () => {
     try {
       setErrorMessage('');
       const response = await callDeleteThread({ threadID: threadInfo.id });
       popThreadDeleteConfirmationModal();
       modalContext.popModal();
       return response;
     } catch (e) {
       popThreadDeleteConfirmationModal();
       setErrorMessage(
         e.message === 'invalid_credentials'
           ? 'permission not granted'
           : 'unknown error',
       );
       throw e;
     }
   }, [
     callDeleteThread,
     modalContext,
     popThreadDeleteConfirmationModal,
     setErrorMessage,
     threadInfo.id,
   ]);
   const dispatchDeleteThreadAction = React.useCallback(() => {
     void dispatchActionPromise(deleteThreadActionTypes, deleteThreadAction());
   }, [dispatchActionPromise, deleteThreadAction]);
   const onDelete = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       event.preventDefault();
       if (shouldUseDeleteConfirmationModal) {
         modalContext.pushModal(
           <ThreadDeleteConfirmationModal
             threadInfo={threadInfo}
             onConfirmation={dispatchDeleteThreadAction}
           />,
         );
       } else {
         dispatchDeleteThreadAction();
       }
     },
     [
       dispatchDeleteThreadAction,
       modalContext,
       shouldUseDeleteConfirmationModal,
       threadInfo,
     ],
   );
 
   return (
     <form method="POST" className={css.container}>
       <div>
         <div className={css.warning_container}>
           <SWMansionIcon
             icon="warning-circle"
             className={css.warning_icon}
             size={26}
           />
           <p className={css.deletion_warning}>
             Your chat will be permanently deleted. There is no way to reverse
             this.
           </p>
         </div>
       </div>
       <SubmitSection
         errorMessage={errorMessage}
         onClick={onDelete}
         variant="filled"
         buttonColor={buttonThemes.danger}
         disabled={threadSettingsOperationInProgress}
       >
         Delete
       </SubmitSection>
     </form>
   );
 }
 
 export default ThreadSettingsDeleteTab;
diff --git a/web/modals/threads/settings/thread-settings-general-tab.react.js b/web/modals/threads/settings/thread-settings-general-tab.react.js
index b0b420bfb..315b924c8 100644
--- a/web/modals/threads/settings/thread-settings-general-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-general-tab.react.js
@@ -1,199 +1,199 @@
 // @flow
 
 import * as React from 'react';
 import tinycolor from 'tinycolor2';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { threadHasPermission } from 'lib/shared/thread-utils.js';
 import { type SetState } from 'lib/types/hook-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { type ThreadChanges, type ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { firstLine } from 'lib/utils/string-utils.js';
 import { chatNameMaxLength } from 'lib/utils/validation-utils.js';
 
 import SubmitSection from './submit-section.react.js';
 import css from './thread-settings-general-tab.css';
 import EditThreadAvatar from '../../../avatars/edit-thread-avatar.react.js';
 import LoadingIndicator from '../../../loading-indicator.react.js';
 import Input from '../../input.react.js';
 import ColorSelector from '../color-selector.react.js';
 
 type ThreadSettingsGeneralTabProps = {
   +threadSettingsOperationInProgress: boolean,
   +threadInfo: ThreadInfo,
   +threadNamePlaceholder: string,
   +queuedChanges: ThreadChanges,
   +setQueuedChanges: SetState<ThreadChanges>,
   +setErrorMessage: SetState<?string>,
   +errorMessage?: ?string,
 };
 function ThreadSettingsGeneralTab(
   props: ThreadSettingsGeneralTabProps,
 ): React.Node {
   const {
     threadSettingsOperationInProgress,
     threadInfo,
     threadNamePlaceholder,
     queuedChanges,
     setQueuedChanges,
     setErrorMessage,
     errorMessage,
   } = props;
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useChangeThreadSettings();
 
   const nameInputRef = React.useRef<?HTMLInputElement>();
 
   React.useEffect(() => {
     nameInputRef.current?.focus();
   }, [threadSettingsOperationInProgress]);
 
   const changeQueued: boolean = React.useMemo(
     () => Object.values(queuedChanges).some(v => v !== null && v !== undefined),
     [queuedChanges],
   );
 
   const onChangeName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       const target = event.currentTarget;
       const newName = firstLine(target.value);
       setQueuedChanges(prevQueuedChanges =>
         Object.freeze({
           ...prevQueuedChanges,
           name: newName !== threadInfo.name ? newName : undefined,
         }),
       );
     },
     [setQueuedChanges, threadInfo.name],
   );
 
   const onChangeDescription = React.useCallback(
     (event: SyntheticEvent<HTMLTextAreaElement>) => {
       const target = event.currentTarget;
       setQueuedChanges(prevQueuedChanges =>
         Object.freeze({
           ...prevQueuedChanges,
           description:
             target.value !== threadInfo.description ? target.value : undefined,
         }),
       );
     },
     [setQueuedChanges, threadInfo.description],
   );
 
   const onChangeColor = React.useCallback(
     (color: string) => {
       setQueuedChanges(prevQueuedChanges =>
         Object.freeze({
           ...prevQueuedChanges,
           color: !tinycolor.equals(color, threadInfo.color) ? color : undefined,
         }),
       );
     },
     [setQueuedChanges, threadInfo.color],
   );
 
   const changeThreadSettingsAction = React.useCallback(async () => {
     try {
       setErrorMessage('');
       return await callChangeThreadSettings({
         threadID: threadInfo.id,
         changes: queuedChanges,
       });
     } catch (e) {
       setErrorMessage('unknown_error');
       throw e;
     } finally {
       setQueuedChanges(Object.freeze({}));
     }
   }, [
     callChangeThreadSettings,
     queuedChanges,
     setErrorMessage,
     setQueuedChanges,
     threadInfo.id,
   ]);
 
   const onSubmit = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       event.preventDefault();
       void dispatchActionPromise(
         changeThreadSettingsActionTypes,
         changeThreadSettingsAction(),
       );
     },
     [changeThreadSettingsAction, dispatchActionPromise],
   );
 
   const threadNameInputDisabled = !threadHasPermission(
     threadInfo,
     threadPermissions.EDIT_THREAD_NAME,
   );
 
   const saveButtonContent = React.useMemo(() => {
     if (threadSettingsOperationInProgress) {
       return <LoadingIndicator status="loading" />;
     }
     return 'Save';
   }, [threadSettingsOperationInProgress]);
 
   return (
     <form method="POST" className={css.container}>
       <div>
         <div className={css.editAvatarContainer}>
           <EditThreadAvatar threadInfo={threadInfo} />
         </div>
         <div className={css.form_title}>Chat name</div>
         <div className={css.form_content}>
           <Input
             type="text"
             maxLength={chatNameMaxLength}
             value={firstLine(queuedChanges.name ?? threadInfo.name)}
             placeholder={threadNamePlaceholder}
             onChange={onChangeName}
             disabled={
               threadSettingsOperationInProgress || threadNameInputDisabled
             }
             ref={nameInputRef}
           />
         </div>
       </div>
       <div>
         <div className={css.form_title}>Description</div>
         <div className={css.form_content}>
           <textarea
             value={queuedChanges.description ?? threadInfo.description ?? ''}
             placeholder="Chat description"
             onChange={onChangeDescription}
             disabled={threadSettingsOperationInProgress}
             rows={3}
           />
         </div>
       </div>
       <div>
         <div className={css.form_title}>Color</div>
         <div className={css.colorSelectorContainer}>
           <ColorSelector
             currentColor={queuedChanges.color ?? threadInfo.color}
             onColorSelection={onChangeColor}
           />
         </div>
       </div>
       <SubmitSection
         variant="filled"
         errorMessage={errorMessage}
         onClick={onSubmit}
         disabled={threadSettingsOperationInProgress || !changeQueued}
       >
         {saveButtonContent}
       </SubmitSection>
     </form>
   );
 }
 
 export default ThreadSettingsGeneralTab;
diff --git a/web/modals/threads/settings/thread-settings-privacy-tab.react.js b/web/modals/threads/settings/thread-settings-privacy-tab.react.js
index 18658e83f..ccf08a586 100644
--- a/web/modals/threads/settings/thread-settings-privacy-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-privacy-tab.react.js
@@ -1,173 +1,173 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useChangeThreadSettings,
   changeThreadSettingsActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { threadTypeDescriptions } from 'lib/shared/thread-utils.js';
 import { type SetState } from 'lib/types/hook-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { type ThreadChanges, type ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import SubmitSection from './submit-section.react.js';
 import css from './thread-settings-privacy-tab.css';
 import EnumSettingsOption from '../../../components/enum-settings-option.react.js';
 
 const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;
 
 const openStatements = [
   {
     statement: threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD],
     isStatementValid: true,
     styleStatementBasedOnValidity: false,
   },
 ];
 
 const secretStatements = [
   {
     statement: threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD],
     isStatementValid: true,
     styleStatementBasedOnValidity: false,
   },
 ];
 
 type ThreadSettingsPrivacyTabProps = {
   +threadSettingsOperationInProgress: boolean,
   +threadInfo: ThreadInfo,
   +queuedChanges: ThreadChanges,
   +setQueuedChanges: SetState<ThreadChanges>,
   +setErrorMessage: SetState<?string>,
   +errorMessage?: ?string,
 };
 function ThreadSettingsPrivacyTab(
   props: ThreadSettingsPrivacyTabProps,
 ): React.Node {
   const {
     threadSettingsOperationInProgress,
     threadInfo,
     queuedChanges,
     setQueuedChanges,
     setErrorMessage,
     errorMessage,
   } = props;
 
   const modalContext = useModalContext();
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useChangeThreadSettings();
 
   const changeQueued: boolean = React.useMemo(
     () => Object.values(queuedChanges).some(v => v !== null && v !== undefined),
     [queuedChanges],
   );
 
   const changeThreadSettingsAction = React.useCallback(async () => {
     try {
       setErrorMessage('');
       const response = await callChangeThreadSettings({
         threadID: threadInfo.id,
         changes: queuedChanges,
       });
       modalContext.popModal();
       return response;
     } catch (e) {
       setErrorMessage('unknown_error');
       setQueuedChanges(Object.freeze({}));
       throw e;
     }
   }, [
     callChangeThreadSettings,
     modalContext,
     queuedChanges,
     setErrorMessage,
     setQueuedChanges,
     threadInfo.id,
   ]);
 
   const onSubmit = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       event.preventDefault();
       void dispatchActionPromise(
         changeThreadSettingsActionTypes,
         changeThreadSettingsAction(),
       );
     },
     [changeThreadSettingsAction, dispatchActionPromise],
   );
 
   const onOpenSelected = React.useCallback(() => {
     setQueuedChanges(prevQueuedChanges =>
       Object.freeze({
         ...prevQueuedChanges,
         type:
           COMMUNITY_OPEN_SUBTHREAD !== threadInfo.type
             ? COMMUNITY_OPEN_SUBTHREAD
             : undefined,
       }),
     );
   }, [setQueuedChanges, threadInfo.type]);
 
   const onSecretSelected = React.useCallback(() => {
     setQueuedChanges(prevQueuedChanges =>
       Object.freeze({
         ...prevQueuedChanges,
         type:
           COMMUNITY_SECRET_SUBTHREAD !== threadInfo.type
             ? COMMUNITY_SECRET_SUBTHREAD
             : undefined,
       }),
     );
   }, [setQueuedChanges, threadInfo.type]);
 
   const globeIcon = React.useMemo(
     () => <SWMansionIcon icon="globe-1" size={24} />,
     [],
   );
 
   const lockIcon = React.useMemo(
     () => <SWMansionIcon icon="lock-on" size={24} />,
     [],
   );
 
   return (
     <form method="POST" className={css.container}>
       <div className={css.form_title}>Chat type</div>
       <div className={css.enum_container}>
         <EnumSettingsOption
           selected={
             (queuedChanges.type ?? threadInfo.type) === COMMUNITY_OPEN_SUBTHREAD
           }
           onSelect={onOpenSelected}
           icon={globeIcon}
           title="Open"
           statements={openStatements}
         />
         <EnumSettingsOption
           selected={
             (queuedChanges.type ?? threadInfo.type) ===
             COMMUNITY_SECRET_SUBTHREAD
           }
           onSelect={onSecretSelected}
           icon={lockIcon}
           title="Secret"
           statements={secretStatements}
         />
       </div>
 
       <SubmitSection
         variant="filled"
         onClick={onSubmit}
         disabled={threadSettingsOperationInProgress || !changeQueued}
         errorMessage={errorMessage}
       >
         Save
       </SubmitSection>
     </form>
   );
 }
 
 export default ThreadSettingsPrivacyTab;
diff --git a/web/modals/threads/settings/thread-settings-relationship-button.react.js b/web/modals/threads/settings/thread-settings-relationship-button.react.js
index 61e0ad137..14df56b7e 100644
--- a/web/modals/threads/settings/thread-settings-relationship-button.react.js
+++ b/web/modals/threads/settings/thread-settings-relationship-button.react.js
@@ -1,145 +1,143 @@
 // @flow
 import {
   faUserMinus,
   faUserPlus,
   faUserShield,
   faUserSlash,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   updateRelationships,
   updateRelationshipsActionTypes,
 } from 'lib/actions/relationship-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   getRelationshipActionText,
   getRelationshipDispatchAction,
 } from 'lib/shared/relationship-utils.js';
 import type { SetState } from 'lib/types/hook-types.js';
 import {
   relationshipButtons,
   type RelationshipButton,
 } from 'lib/types/relationship-types.js';
 import type { UserInfo } from 'lib/types/user-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './thread-settings-relationship-tab.css';
 import Button, { buttonThemes } from '../../../components/button.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 
 const loadingStatusSelector = createLoadingStatusSelector(
   updateRelationshipsActionTypes,
 );
 
 type ButtonProps = {
   +relationshipButton: RelationshipButton,
   +otherUserInfo: UserInfo,
   +setErrorMessage?: SetState<?string>,
 };
 
 function ThreadSettingsRelationshipButton(props: ButtonProps): React.Node {
   const { relationshipButton, otherUserInfo, setErrorMessage } = props;
 
   const disabled = useSelector(loadingStatusSelector) === 'loading';
 
   const { username } = otherUserInfo;
   invariant(username, 'Other username should be specified');
 
   let color;
   if (relationshipButton === relationshipButtons.FRIEND) {
     color = buttonThemes.success;
   } else if (relationshipButton === relationshipButtons.UNFRIEND) {
     color = buttonThemes.danger;
   } else if (relationshipButton === relationshipButtons.BLOCK) {
     color = buttonThemes.danger;
   } else if (relationshipButton === relationshipButtons.UNBLOCK) {
     color = buttonThemes.success;
   } else if (relationshipButton === relationshipButtons.ACCEPT) {
     color = buttonThemes.success;
   } else if (relationshipButton === relationshipButtons.REJECT) {
     color = buttonThemes.danger;
   } else if (relationshipButton === relationshipButtons.WITHDRAW) {
     color = buttonThemes.danger;
   }
 
   const { text, action } = React.useMemo(() => {
     return {
       text: getRelationshipActionText(relationshipButton, username),
       action: getRelationshipDispatchAction(relationshipButton),
     };
   }, [relationshipButton, username]);
 
   const icon = React.useMemo(() => {
     let buttonIcon = null;
 
     if (relationshipButton === relationshipButtons.FRIEND) {
       buttonIcon = faUserPlus;
     } else if (relationshipButton === relationshipButtons.UNFRIEND) {
       buttonIcon = faUserMinus;
     } else if (relationshipButton === relationshipButtons.BLOCK) {
       buttonIcon = faUserShield;
     } else if (relationshipButton === relationshipButtons.UNBLOCK) {
       buttonIcon = faUserShield;
     } else if (relationshipButton === relationshipButtons.ACCEPT) {
       buttonIcon = faUserPlus;
     } else if (relationshipButton === relationshipButtons.REJECT) {
       buttonIcon = faUserSlash;
     } else if (relationshipButton === relationshipButtons.WITHDRAW) {
       buttonIcon = faUserMinus;
     }
 
     if (buttonIcon) {
       return (
         <FontAwesomeIcon
           icon={buttonIcon}
           className={css.relationshipButtonIcon}
         />
       );
     }
     return undefined;
   }, [relationshipButton]);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callUpdateRelationships = useServerCall(updateRelationships);
 
   const updateRelationshipsActionPromise = React.useCallback(async () => {
     try {
       setErrorMessage?.('');
       return await callUpdateRelationships({
         action,
         userIDs: [otherUserInfo.id],
       });
     } catch (e) {
       setErrorMessage?.('Error updating relationship');
       throw e;
     }
   }, [action, callUpdateRelationships, otherUserInfo.id, setErrorMessage]);
   const onClick = React.useCallback(() => {
     void dispatchActionPromise(
       updateRelationshipsActionTypes,
       updateRelationshipsActionPromise(),
     );
   }, [dispatchActionPromise, updateRelationshipsActionPromise]);
 
   return (
     <Button
       variant="filled"
       buttonColor={color}
       onClick={onClick}
       disabled={disabled}
     >
       <div className={css.relationshipButtonContent}>
         {icon}
         <div className={css.relationshipButtonText}>{text}</div>
       </div>
     </Button>
   );
 }
 
 export default ThreadSettingsRelationshipButton;
diff --git a/web/push-notif/push-notifs-handler.js b/web/push-notif/push-notifs-handler.js
index f0235fffd..5d2767aa2 100644
--- a/web/push-notif/push-notifs-handler.js
+++ b/web/push-notif/push-notifs-handler.js
@@ -1,231 +1,231 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useSetDeviceTokenFanout,
   setDeviceTokenActionTypes,
 } from 'lib/actions/device-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { convertNonPendingIDToNewSchema } from 'lib/utils/migration-utils.js';
 import {
   shouldSkipPushPermissionAlert,
   recordNotifPermissionAlertActionType,
 } from 'lib/utils/push-alerts.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import { decryptDesktopNotification } from './notif-crypto-utils.js';
 import {
   WORKERS_MODULES_DIR_PATH,
   DEFAULT_OLM_FILENAME,
 } from '../database/utils/constants.js';
 import electron from '../electron.js';
 import PushNotifModal from '../modals/push-notif-modal.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 declare var baseURL: string;
 declare var olmFilename: string;
 
 function useCreateDesktopPushSubscription() {
   const dispatchActionPromise = useDispatchActionPromise();
   const callSetDeviceToken = useSetDeviceTokenFanout();
   const staffCanSee = useStaffCanSee();
 
   React.useEffect(
     () =>
       electron?.onDeviceTokenRegistered?.((token: ?string) => {
         void dispatchActionPromise(
           setDeviceTokenActionTypes,
           callSetDeviceToken(token),
         );
       }),
     [callSetDeviceToken, dispatchActionPromise],
   );
 
   React.useEffect(() => {
     electron?.fetchDeviceToken?.();
   }, []);
 
   React.useEffect(
     () =>
       electron?.onEncryptedNotification?.(
         async ({ encryptedPayload }: { encryptedPayload: string }) => {
           const decryptedPayload = await decryptDesktopNotification(
             encryptedPayload,
             staffCanSee,
           );
           electron?.showDecryptedNotification(decryptedPayload);
         },
       ),
     [staffCanSee],
   );
 
   const dispatch = useDispatch();
 
   React.useEffect(
     () =>
       electron?.onNotificationClicked?.(
         ({ threadID }: { +threadID: string }) => {
           const convertedThreadID = convertNonPendingIDToNewSchema(
             threadID,
             ashoatKeyserverID,
           );
 
           const payload = {
             chatMode: 'view',
             activeChatThreadID: convertedThreadID,
             tab: 'chat',
           };
 
           dispatch({ type: updateNavInfoActionType, payload });
         },
       ),
     [dispatch],
   );
 }
 
 function useCreatePushSubscription(): () => Promise<void> {
   const publicKey = useSelector(state => state.pushApiPublicKey);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callSetDeviceToken = useSetDeviceTokenFanout();
   const staffCanSee = useStaffCanSee();
 
   return React.useCallback(async () => {
     if (!publicKey) {
       return;
     }
 
     const workerRegistration = await navigator.serviceWorker?.ready;
     if (!workerRegistration || !workerRegistration.pushManager) {
       return;
     }
 
     const origin = window.location.origin;
     const olmWasmDirPath = `${origin}${baseURL}${WORKERS_MODULES_DIR_PATH}`;
     const olmWasmFilename = olmFilename ? olmFilename : DEFAULT_OLM_FILENAME;
     const olmWasmPath = `${olmWasmDirPath}/${olmWasmFilename}`;
     workerRegistration.active?.postMessage({ olmWasmPath, staffCanSee });
 
     const subscription = await workerRegistration.pushManager.subscribe({
       userVisibleOnly: true,
       applicationServerKey: publicKey,
     });
 
     void dispatchActionPromise(
       setDeviceTokenActionTypes,
       callSetDeviceToken(JSON.stringify(subscription)),
     );
   }, [callSetDeviceToken, dispatchActionPromise, publicKey, staffCanSee]);
 }
 
 function PushNotificationsHandler(): React.Node {
   useCreateDesktopPushSubscription();
   const createPushSubscription = useCreatePushSubscription();
 
   const notifPermissionAlertInfo = useSelector(
     state => state.notifPermissionAlertInfo,
   );
 
   const modalContext = useModalContext();
   const loggedIn = useSelector(isLoggedIn);
 
   const dispatch = useDispatch();
 
   const supported = 'Notification' in window && !electron;
 
   React.useEffect(() => {
     void (async () => {
       if (!navigator.serviceWorker || !supported) {
         return;
       }
 
       await navigator.serviceWorker.register('worker/notif', { scope: '/' });
 
       if (Notification.permission === 'granted') {
         // Make sure the subscription is current if we have the permissions
         await createPushSubscription();
       } else if (
         Notification.permission === 'default' &&
         loggedIn &&
         !shouldSkipPushPermissionAlert(notifPermissionAlertInfo)
       ) {
         // Ask existing users that are already logged in for permission
         modalContext.pushModal(<PushNotifModal />);
         dispatch({
           type: recordNotifPermissionAlertActionType,
           payload: { time: Date.now() },
         });
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Ask for permission on login
   const prevLoggedIn = React.useRef(loggedIn);
   React.useEffect(() => {
     if (!navigator.serviceWorker || !supported) {
       return;
     }
 
     if (!prevLoggedIn.current && loggedIn) {
       if (Notification.permission === 'granted') {
         void createPushSubscription();
       } else if (
         Notification.permission === 'default' &&
         !shouldSkipPushPermissionAlert(notifPermissionAlertInfo)
       ) {
         modalContext.pushModal(<PushNotifModal />);
         dispatch({
           type: recordNotifPermissionAlertActionType,
           payload: { time: Date.now() },
         });
       }
     }
     prevLoggedIn.current = loggedIn;
   }, [
     createPushSubscription,
     dispatch,
     loggedIn,
     modalContext,
     notifPermissionAlertInfo,
     prevLoggedIn,
     supported,
   ]);
 
   // Redirect to thread on notification click
   React.useEffect(() => {
     if (!navigator.serviceWorker || !supported) {
       return undefined;
     }
 
     const callback = (event: MessageEvent) => {
       if (typeof event.data !== 'object' || !event.data) {
         return;
       }
 
       if (event.data.targetThreadID) {
         const payload = {
           chatMode: 'view',
           activeChatThreadID: event.data.targetThreadID,
           tab: 'chat',
         };
 
         dispatch({ type: updateNavInfoActionType, payload });
       }
     };
 
     navigator.serviceWorker.addEventListener('message', callback);
     return () =>
       navigator.serviceWorker?.removeEventListener('message', callback);
   }, [dispatch, supported]);
 
   return null;
 }
 
 export { PushNotificationsHandler, useCreatePushSubscription };
diff --git a/web/roles/create-roles-modal.react.js b/web/roles/create-roles-modal.react.js
index d76a9c62f..1ae8c64a0 100644
--- a/web/roles/create-roles-modal.react.js
+++ b/web/roles/create-roles-modal.react.js
@@ -1,286 +1,286 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useModifyCommunityRole,
   modifyCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import {
   type UserSurfacedPermission,
   type UserSurfacedPermissionOption,
   userSurfacedPermissionOptions,
 } from 'lib/types/thread-permission-types.js';
 import type {
   RoleModificationRequest,
   ThreadInfo,
 } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './create-roles-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 import EnumSettingsOption from '../components/enum-settings-option.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import Input from '../modals/input.react.js';
 import Modal from '../modals/modal.react.js';
 import UnsavedChangesModal from '../modals/unsaved-changes-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const createRolesLoadingStatusSelector = createLoadingStatusSelector(
   modifyCommunityRoleActionTypes,
 );
 
 type CreateRolesModalProps = {
   +threadInfo: ThreadInfo,
   +action: 'create_role' | 'edit_role',
   +existingRoleID?: string,
   +roleName: string,
   +rolePermissions: $ReadOnlySet<UserSurfacedPermission>,
 };
 
 type RoleCreationErrorVariant = 'already_exists' | 'unknown_error';
 
 function CreateRolesModal(props: CreateRolesModalProps): React.Node {
   const { pushModal, popModal } = useModalContext();
   const { threadInfo, action, existingRoleID, roleName, rolePermissions } =
     props;
   const modalName = action === 'create_role' ? 'Create role' : 'Edit role';
 
   const callModifyCommunityRole = useModifyCommunityRole();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const createRolesLoadingStatus: LoadingStatus = useSelector(
     createRolesLoadingStatusSelector,
   );
 
   const [pendingRoleName, setPendingRoleName] =
     React.useState<string>(roleName);
   const [pendingRolePermissions, setPendingRolePermissions] =
     React.useState<$ReadOnlySet<UserSurfacedPermission>>(rolePermissions);
 
   const [roleCreationFailed, setRoleCreationFailed] =
     React.useState<?RoleCreationErrorVariant>();
 
   const createButtonText = action === 'create_role' ? 'Create' : 'Save';
 
   const onChangeRoleName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       setRoleCreationFailed(null);
       setPendingRoleName(event.currentTarget.value);
     },
     [],
   );
 
   const onCloseModal = React.useCallback(() => {
     const pendingSet = new Set(pendingRolePermissions);
     const roleSet = new Set(rolePermissions);
 
     let arePermissionsEqual = true;
     if (pendingSet.size !== roleSet.size) {
       arePermissionsEqual = false;
     }
     for (const permission of pendingSet) {
       if (!roleSet.has(permission)) {
         arePermissionsEqual = false;
         break;
       }
     }
 
     if (pendingRoleName === roleName && arePermissionsEqual) {
       popModal();
       return;
     }
 
     pushModal(<UnsavedChangesModal />);
   }, [
     pendingRoleName,
     roleName,
     pendingRolePermissions,
     rolePermissions,
     pushModal,
     popModal,
   ]);
 
   const clearPermissionsClassNames = classNames({
     [css.clearPermissions]: true,
     [css.clearPermissionsDisabled]: pendingRolePermissions.size === 0,
     [css.clearPermissionsEnabled]: pendingRolePermissions.size > 0,
   });
 
   const onClearPermissions = React.useCallback(
     () => setPendingRolePermissions(new Set()),
     [],
   );
 
   const isUserSurfacedPermissionSelected = React.useCallback(
     (option: UserSurfacedPermissionOption) =>
       pendingRolePermissions.has(option.userSurfacedPermission),
     [pendingRolePermissions],
   );
 
   const onEnumValuePress = React.useCallback(
     (option: UserSurfacedPermissionOption) =>
       setPendingRolePermissions(currentPermissions => {
         if (currentPermissions.has(option.userSurfacedPermission)) {
           const newPermissions = new Set(currentPermissions);
           newPermissions.delete(option.userSurfacedPermission);
           return newPermissions;
         } else {
           return new Set([
             ...currentPermissions,
             option.userSurfacedPermission,
           ]);
         }
       }),
     [],
   );
 
   const permissionsList = React.useMemo(
     () =>
       [...userSurfacedPermissionOptions].map(permission => (
         <EnumSettingsOption
           key={permission.userSurfacedPermission}
           selected={isUserSurfacedPermissionSelected(permission)}
           onSelect={() => onEnumValuePress(permission)}
           icon={null}
           title={permission.title}
           type="checkbox"
           statements={[{ statement: permission.description }]}
         />
       )),
     [isUserSurfacedPermissionSelected, onEnumValuePress],
   );
 
   const errorMessageClassNames = classNames({
     [css.errorMessage]: true,
     [css.errorMessageVisible]: !!roleCreationFailed,
   });
 
   const threadRoleNames = React.useMemo(
     () => values(threadInfo.roles).map(role => role.name),
     [threadInfo],
   );
 
   const onClickCreateRole = React.useCallback(() => {
     if (threadRoleNames.includes(pendingRoleName) && action === 'create_role') {
       setRoleCreationFailed('already_exists');
       return;
     }
 
     let callModifyCommunityRoleParams: RoleModificationRequest;
     if (action === 'create_role') {
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         action,
         name: pendingRoleName,
         permissions: [...pendingRolePermissions],
       };
     } else {
       invariant(existingRoleID, 'existingRoleID should be defined');
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         existingRoleID,
         action,
         name: pendingRoleName,
         permissions: [...pendingRolePermissions],
       };
     }
 
     void dispatchActionPromise(
       modifyCommunityRoleActionTypes,
       (async () => {
         try {
           const response = await callModifyCommunityRole(
             callModifyCommunityRoleParams,
           );
           popModal();
           return response;
         } catch (e) {
           setRoleCreationFailed('unknown_error');
           throw e;
         }
       })(),
     );
   }, [
     callModifyCommunityRole,
     dispatchActionPromise,
     threadInfo,
     action,
     existingRoleID,
     pendingRoleName,
     pendingRolePermissions,
     popModal,
     threadRoleNames,
   ]);
 
   const errorMessage = React.useMemo(() => {
     if (roleCreationFailed === 'already_exists') {
       return 'There is already a role with this name in the community';
     } else {
       return 'An unknown error occurred. Please try again';
     }
   }, [roleCreationFailed]);
 
   const saveButtonContent = React.useMemo(() => {
     if (createRolesLoadingStatus === 'loading') {
       return (
         <LoadingIndicator status={createRolesLoadingStatus} size="medium" />
       );
     }
 
     return createButtonText;
   }, [createRolesLoadingStatus, createButtonText]);
 
   return (
     <Modal name={modalName} onClose={onCloseModal} size="large">
       <form method="POST" className={css.formContainer}>
         <div className={css.roleNameLabel}>Role name</div>
         <div className={css.roleNameInput}>
           <Input
             type="text"
             value={pendingRoleName}
             onChange={onChangeRoleName}
           />
         </div>
         <div className={errorMessageClassNames}>{errorMessage}</div>
       </form>
       <hr className={css.separator} />
       <div className={css.permissionsHeaderContainer}>
         <div className={css.permissionsLabel}>Permissions</div>
         <div
           className={clearPermissionsClassNames}
           onClick={onClearPermissions}
         >
           Clear Permissions
         </div>
       </div>
       <div className={css.permissionsContainer}>{permissionsList}</div>
       <div className={css.buttonsContainer}>
         <Button
           variant="outline"
           className={css.backButton}
           buttonColor={buttonThemes.outline}
           onClick={onCloseModal}
         >
           Back
         </Button>
         <Button
           variant="filled"
           className={css.createRoleButton}
           buttonColor={buttonThemes.standard}
           onClick={onClickCreateRole}
         >
           {saveButtonContent}
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default CreateRolesModal;
diff --git a/web/roles/delete-role-modal.react.js b/web/roles/delete-role-modal.react.js
index f2aeb8755..c35e5834c 100644
--- a/web/roles/delete-role-modal.react.js
+++ b/web/roles/delete-role-modal.react.js
@@ -1,94 +1,94 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useDeleteCommunityRole,
   deleteCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { useRoleMemberCountsForCommunity } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { constructRoleDeletionMessagePrompt } from 'lib/utils/role-utils.js';
 
 import css from './delete-role-modal.css';
 import LoadingIndicator from '../loading-indicator.react.js';
 import ConfirmationAlert from '../modals/confirmation-alert.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const deleteRoleLoadingStatusSelector = createLoadingStatusSelector(
   deleteCommunityRoleActionTypes,
 );
 
 type DeleteRoleModalProps = {
   +threadInfo: ThreadInfo,
   +defaultRoleID: string,
   +roleID: string,
 };
 
 function DeleteRoleModal(props: DeleteRoleModalProps): React.Node {
   const { threadInfo, defaultRoleID, roleID } = props;
   const { popModal } = useModalContext();
 
   const callDeleteCommunityRole = useDeleteCommunityRole();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const deleteRoleLoadingStatus: LoadingStatus = useSelector(
     deleteRoleLoadingStatusSelector,
   );
 
   const roleNamesToMemberCounts = useRoleMemberCountsForCommunity(threadInfo);
   const roleName = threadInfo.roles[roleID].name;
   const memberCount = roleNamesToMemberCounts[roleName];
   const defaultRoleName = threadInfo.roles[defaultRoleID].name;
 
   const message = constructRoleDeletionMessagePrompt(
     defaultRoleName,
     memberCount,
   );
 
   const onDeleteRole = React.useCallback(() => {
     void dispatchActionPromise(
       deleteCommunityRoleActionTypes,
       (async () => {
         const response = await callDeleteCommunityRole({
           community: threadInfo.id,
           roleID: roleID,
         });
         popModal();
         return response;
       })(),
     );
   }, [
     callDeleteCommunityRole,
     dispatchActionPromise,
     roleID,
     threadInfo.id,
     popModal,
   ]);
 
   const deleteButtonContent = React.useMemo(() => {
     if (deleteRoleLoadingStatus === 'loading') {
       return (
         <LoadingIndicator status={deleteRoleLoadingStatus} size="medium" />
       );
     }
     return 'Yes, delete role';
   }, [deleteRoleLoadingStatus]);
 
   return (
     <ConfirmationAlert
       title="Delete role"
       confirmationButtonContent={deleteButtonContent}
       onConfirm={onDeleteRole}
       isDestructive
     >
       <div className={css.roleDeletionText}>{message}</div>
     </ConfirmationAlert>
   );
 }
 
 export default DeleteRoleModal;
diff --git a/web/settings/account-delete-modal.react.js b/web/settings/account-delete-modal.react.js
index 804d61f7b..5b0fa5668 100644
--- a/web/settings/account-delete-modal.react.js
+++ b/web/settings/account-delete-modal.react.js
@@ -1,145 +1,145 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useDeleteKeyserverAccount,
   deleteKeyserverAccountActionTypes,
   useDeleteIdentityAccount,
   deleteIdentityAccountActionTypes,
 } from 'lib/actions/user-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js';
 
 import css from './account-delete-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 import Modal from '../modals/modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const deleteKeyserverAccountLoadingStatusSelector = createLoadingStatusSelector(
   deleteKeyserverAccountActionTypes,
 );
 const deleteIdentityAccountLoadingStatusSelector = createLoadingStatusSelector(
   deleteIdentityAccountActionTypes,
 );
 
 const AccountDeleteModal: React.ComponentType<{}> = React.memo<{}>(
   function AccountDeleteModal(): React.Node {
     const preRequestUserState = useSelector(preRequestUserStateSelector);
     const isDeleteKeyserverAccountLoading = useSelector(
       state => deleteKeyserverAccountLoadingStatusSelector(state) === 'loading',
     );
     const isDeleteIdentityAccountLoading = useSelector(
       state => deleteIdentityAccountLoadingStatusSelector(state) === 'loading',
     );
     const inputDisabled =
       isDeleteKeyserverAccountLoading || isDeleteIdentityAccountLoading;
 
     const callDeleteIdentityAccount = useDeleteIdentityAccount();
     const callDeleteKeyserverAccount = useDeleteKeyserverAccount();
 
     const dispatchActionPromise = useDispatchActionPromise();
 
     const { popModal } = useModalContext();
 
     const [keyserverErrorMessage, setKeyserverErrorMessage] =
       React.useState('');
     const [identityErrorMessage, setIdentityErrorMessage] = React.useState('');
 
     const keyserverError = keyserverErrorMessage ? (
       <p>{keyserverErrorMessage}</p>
     ) : null;
     const identityError = identityErrorMessage ? (
       <p>{identityErrorMessage}</p>
     ) : null;
     let combinedErrorMessages;
     if (keyserverError || identityError) {
       combinedErrorMessages = (
         <div className={css.form_error}>
           {keyserverError}
           {identityError}
         </div>
       );
     }
 
     const deleteKeyserverAction = React.useCallback(async () => {
       try {
         setKeyserverErrorMessage('');
         const response = await callDeleteKeyserverAccount(preRequestUserState);
         // This check ensures that we don't call `popModal()` twice
         if (!usingCommServicesAccessToken) {
           popModal();
         }
         return response;
       } catch (e) {
         setKeyserverErrorMessage(
           'unknown error deleting account from keyserver',
         );
         throw e;
       }
     }, [callDeleteKeyserverAccount, preRequestUserState, popModal]);
 
     const deleteIdentityAction = React.useCallback(async () => {
       try {
         setIdentityErrorMessage('');
         const response = await callDeleteIdentityAccount();
         popModal();
         return response;
       } catch (e) {
         setIdentityErrorMessage(
           'unknown error deleting account from identity service',
         );
         throw e;
       }
     }, [callDeleteIdentityAccount, popModal]);
 
     const onDelete = React.useCallback(
       (event: SyntheticEvent<HTMLButtonElement>) => {
         event.preventDefault();
         void dispatchActionPromise(
           deleteKeyserverAccountActionTypes,
           deleteKeyserverAction(),
         );
         if (usingCommServicesAccessToken) {
           void dispatchActionPromise(
             deleteIdentityAccountActionTypes,
             deleteIdentityAction(),
           );
         }
       },
       [dispatchActionPromise, deleteKeyserverAction, deleteIdentityAction],
     );
 
     return (
       <Modal name="Delete Account" onClose={popModal} size="large">
         <div className={css.modal_body}>
           <form method="POST">
             <SWMansionIcon icon="warning-circle" size={22} />
             <p className={css.deletion_warning}>
               Your account will be permanently deleted. There is no way to
               reverse this.
             </p>
             <div className={css.form_footer}>
               <Button
                 variant="filled"
                 buttonColor={buttonThemes.danger}
                 type="submit"
                 onClick={onDelete}
                 disabled={inputDisabled}
               >
                 Delete Account
               </Button>
               {combinedErrorMessages}
             </div>
           </form>
         </div>
       </Modal>
     );
   },
 );
 
 export default AccountDeleteModal;
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
index c7dd9db25..0a9afac28 100644
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -1,188 +1,188 @@
 // @flow
 
 import * as React from 'react';
 
 import { useLogOut, logOutActionTypes } from 'lib/actions/user-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import { accountHasPassword } from 'lib/shared/account-utils.js';
 import { useTunnelbroker } from 'lib/tunnelbroker/tunnelbroker-context.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './account-settings.css';
 import AppearanceChangeModal from './appearance-change-modal.react.js';
 import PasswordChangeModal from './password-change-modal.js';
 import BlockListModal from './relationship/block-list-modal.react.js';
 import FriendListModal from './relationship/friend-list-modal.react.js';
 import TunnelbrokerMessagesScreen from './tunnelbroker-message-list.react.js';
 import TunnelbrokerTestScreen from './tunnelbroker-test.react.js';
 import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
 import Button from '../components/button.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 function AccountSettings(): React.Node {
   const sendLogoutRequest = useLogOut();
   const dispatchActionPromise = useDispatchActionPromise();
   const logOutUser = React.useCallback(
     () => dispatchActionPromise(logOutActionTypes, sendLogoutRequest()),
     [dispatchActionPromise, sendLogoutRequest],
   );
 
   const { pushModal, popModal } = useModalContext();
   const showPasswordChangeModal = React.useCallback(
     () => pushModal(<PasswordChangeModal />),
     [pushModal],
   );
 
   const openFriendList = React.useCallback(
     () => pushModal(<FriendListModal onClose={popModal} />),
     [popModal, pushModal],
   );
 
   const openBlockList = React.useCallback(
     () => pushModal(<BlockListModal onClose={popModal} />),
     [popModal, pushModal],
   );
 
   const isAccountWithPassword = useSelector(state =>
     accountHasPassword(state.currentUserInfo),
   );
 
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   const stringForUser = useStringForUser(currentUserInfo);
 
   const staffCanSee = useStaffCanSee();
   const { sendMessage, connected, addListener, removeListener } =
     useTunnelbroker();
   const openTunnelbrokerModal = React.useCallback(
     () =>
       pushModal(
         <TunnelbrokerTestScreen sendMessage={sendMessage} onClose={popModal} />,
       ),
     [popModal, pushModal, sendMessage],
   );
 
   const openTunnelbrokerMessagesModal = React.useCallback(
     () =>
       pushModal(
         <TunnelbrokerMessagesScreen
           addListener={addListener}
           removeListener={removeListener}
           onClose={popModal}
         />,
       ),
     [addListener, popModal, pushModal, removeListener],
   );
 
   const showAppearanceModal = React.useCallback(
     () => pushModal(<AppearanceChangeModal />),
     [pushModal],
   );
 
   if (!currentUserInfo || currentUserInfo.anonymous) {
     return null;
   }
 
   let changePasswordSection;
   if (isAccountWithPassword) {
     changePasswordSection = (
       <li>
         <span>Password</span>
         <span className={css.passwordContainer}>
           <span className={css.password}>******</span>
           <a className={css.editPasswordLink} onClick={showPasswordChangeModal}>
             <SWMansionIcon icon="edit-1" size={22} />
           </a>
         </span>
       </li>
     );
   }
 
   let preferences;
   if (staffCanSee) {
     preferences = (
       <div className={css.preferencesContainer}>
         <h4 className={css.preferencesHeader}>Preferences</h4>
         <div className={css.content}>
           <ul>
             <li>
               <span>Appearance</span>
               <a className={css.editPasswordLink} onClick={showAppearanceModal}>
                 <SWMansionIcon icon="edit-1" size={22} />
               </a>
             </li>
           </ul>
         </div>
       </div>
     );
   }
   let tunnelbroker;
   if (staffCanSee) {
     tunnelbroker = (
       <div className={css.preferencesContainer}>
         <h4 className={css.preferencesHeader}>Tunnerlbroker menu</h4>
         <div className={css.content}>
           <ul>
             <li>
               <span>Connected</span>
               <span>{connected.toString()}</span>
             </li>
             <li>
               <span>Send message to device</span>
               <Button variant="text" onClick={openTunnelbrokerModal}>
                 <p className={css.buttonText}>Insert data</p>
               </Button>
             </li>
             <li>
               <span>Trace received messages</span>
               <Button variant="text" onClick={openTunnelbrokerMessagesModal}>
                 <p className={css.buttonText}>Show list</p>
               </Button>
             </li>
           </ul>
         </div>
       </div>
     );
   }
 
   return (
     <div className={css.container}>
       <div className={css.contentContainer}>
         <h4 className={css.header}>My Account</h4>
         <EditUserAvatar userID={currentUserInfo.id} />
         <div className={css.content}>
           <ul>
             <li>
               <p className={css.logoutContainer}>
                 <span className={css.logoutLabel}>{'Logged in as '}</span>
                 <span className={css.username}>{stringForUser}</span>
               </p>
               <Button variant="text" onClick={logOutUser}>
                 <p className={css.buttonText}>Log out</p>
               </Button>
             </li>
             {changePasswordSection}
             <li>
               <span>Friend List</span>
               <Button variant="text" onClick={openFriendList}>
                 <p className={css.buttonText}>See List</p>
               </Button>
             </li>
             <li>
               <span>Block List</span>
               <Button variant="text" onClick={openBlockList}>
                 <p className={css.buttonText}>See List</p>
               </Button>
             </li>
           </ul>
         </div>
         {preferences}
         {tunnelbroker}
       </div>
     </div>
   );
 }
 
 export default AccountSettings;
diff --git a/web/settings/password-change-modal.js b/web/settings/password-change-modal.js
index 412a67ef6..46e041daf 100644
--- a/web/settings/password-change-modal.js
+++ b/web/settings/password-change-modal.js
@@ -1,262 +1,262 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   changeUserPasswordActionTypes,
   changeUserPassword,
 } from 'lib/actions/user-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { type PasswordUpdate } from 'lib/types/user-types.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import {
-  type DispatchActionPromise,
   useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+  type DispatchActionPromise,
+} from 'lib/utils/redux-promise-utils.js';
 
 import css from './password-change-modal.css';
 import Button from '../components/button.react.js';
 import Input from '../modals/input.react.js';
 import Modal from '../modals/modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type Props = {
   +inputDisabled: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise<void>,
   +popModal: () => void,
   +stringForUser: ?string,
 };
 type State = {
   +newPassword: string,
   +confirmNewPassword: string,
   +currentPassword: string,
   +errorMessage: string,
 };
 
 class PasswordChangeModal extends React.PureComponent<Props, State> {
   newPasswordInput: ?HTMLInputElement;
   currentPasswordInput: ?HTMLInputElement;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       newPassword: '',
       confirmNewPassword: '',
       currentPassword: '',
       errorMessage: '',
     };
   }
 
   componentDidMount() {
     invariant(this.newPasswordInput, 'newPasswordInput ref unset');
     this.newPasswordInput.focus();
   }
 
   render(): React.Node {
     let errorMsg;
     if (this.state.errorMessage) {
       errorMsg = (
         <div className={css['modal-form-error']}>{this.state.errorMessage}</div>
       );
     }
 
     const { inputDisabled } = this.props;
     return (
       <Modal name="Change Password" onClose={this.props.popModal} size="large">
         <div className={css['modal-body']}>
           <form method="POST">
             <div className={css['form-content']}>
               <p className={css['username-container']}>
                 <span className={css['username-label']}>{'Logged in as '}</span>
                 <span className={css['username']}>
                   {this.props.stringForUser}
                 </span>
               </p>
               <div className={css['form-content']}>
                 <Input
                   type="password"
                   placeholder="Current password"
                   value={this.state.currentPassword}
                   onChange={this.onChangeCurrentPassword}
                   disabled={inputDisabled}
                   ref={this.currentPasswordInputRef}
                   label="Current password"
                 />
               </div>
               <Input
                 type="password"
                 placeholder="New password"
                 value={this.state.newPassword}
                 onChange={this.onChangeNewPassword}
                 ref={this.newPasswordInputRef}
                 disabled={inputDisabled}
                 label="New password"
               />
               <Input
                 type="password"
                 placeholder="Confirm new password"
                 value={this.state.confirmNewPassword}
                 onChange={this.onChangeConfirmNewPassword}
                 disabled={inputDisabled}
               />
             </div>
             <div className={css['form-footer']}>
               <Button
                 type="submit"
                 variant="filled"
                 onClick={this.onSubmit}
                 disabled={
                   inputDisabled ||
                   this.state.currentPassword.length === 0 ||
                   this.state.newPassword.length === 0 ||
                   this.state.confirmNewPassword.length === 0
                 }
               >
                 Change Password
               </Button>
               {errorMsg}
             </div>
           </form>
         </div>
       </Modal>
     );
   }
 
   newPasswordInputRef = (newPasswordInput: ?HTMLInputElement) => {
     this.newPasswordInput = newPasswordInput;
   };
 
   currentPasswordInputRef = (currentPasswordInput: ?HTMLInputElement) => {
     this.currentPasswordInput = currentPasswordInput;
   };
 
   onChangeNewPassword = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.target;
     invariant(target instanceof HTMLInputElement, 'target not input');
     this.setState({ newPassword: target.value });
   };
 
   onChangeConfirmNewPassword = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.target;
     invariant(target instanceof HTMLInputElement, 'target not input');
     this.setState({ confirmNewPassword: target.value });
   };
 
   onChangeCurrentPassword = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.target;
     invariant(target instanceof HTMLInputElement, 'target not input');
     this.setState({ currentPassword: target.value });
   };
 
   onSubmit = (event: SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
     if (this.state.newPassword === '') {
       this.setState(
         {
           newPassword: '',
           confirmNewPassword: '',
           errorMessage: 'empty password',
         },
         () => {
           invariant(this.newPasswordInput, 'newPasswordInput ref unset');
           this.newPasswordInput.focus();
         },
       );
     } else if (this.state.newPassword !== this.state.confirmNewPassword) {
       this.setState(
         {
           newPassword: '',
           confirmNewPassword: '',
           errorMessage: 'passwords don’t match',
         },
         () => {
           invariant(this.newPasswordInput, 'newPasswordInput ref unset');
           this.newPasswordInput.focus();
         },
       );
       return;
     }
 
     void this.props.dispatchActionPromise(
       changeUserPasswordActionTypes,
       this.changeUserSettingsAction(),
     );
   };
 
   async changeUserSettingsAction(): Promise<void> {
     try {
       await this.props.changeUserPassword({
         updatedFields: {
           password: this.state.newPassword,
         },
         currentPassword: this.state.currentPassword,
       });
       this.props.popModal();
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         this.setState(
           {
             currentPassword: '',
             errorMessage: 'wrong current password',
           },
           () => {
             invariant(
               this.currentPasswordInput,
               'currentPasswordInput ref unset',
             );
             this.currentPasswordInput.focus();
           },
         );
       } else {
         this.setState(
           {
             newPassword: '',
             confirmNewPassword: '',
             currentPassword: '',
             errorMessage: 'unknown error',
           },
           () => {
             invariant(this.newPasswordInput, 'newPasswordInput ref unset');
             this.newPasswordInput.focus();
           },
         );
       }
       throw e;
     }
   }
 }
 
 const changeUserPasswordLoadingStatusSelector = createLoadingStatusSelector(
   changeUserPasswordActionTypes,
 );
 const ConnectedPasswordChangeModal: React.ComponentType<{}> = React.memo<{}>(
   function ConnectedPasswordChangeModal(): React.Node {
     const inputDisabled = useSelector(
       state => changeUserPasswordLoadingStatusSelector(state) === 'loading',
     );
     const callChangeUserPassword = useServerCall(changeUserPassword);
     const dispatchActionPromise = useDispatchActionPromise();
 
     const modalContext = useModalContext();
 
     const currentUserInfo = useSelector(state => state.currentUserInfo);
     const stringForUser = useStringForUser(currentUserInfo);
 
     return (
       <PasswordChangeModal
         inputDisabled={inputDisabled}
         changeUserPassword={callChangeUserPassword}
         dispatchActionPromise={dispatchActionPromise}
         popModal={modalContext.popModal}
         stringForUser={stringForUser}
       />
     );
   },
 );
 
 export default ConnectedPasswordChangeModal;
diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
index d8fbdc293..445b517e2 100644
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -1,254 +1,252 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   updateRelationships,
   updateRelationshipsActionTypes,
 } from 'lib/actions/relationship-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
 import { useSearchUsers } from 'lib/shared/search-utils.js';
 import type {
   UserRelationshipStatus,
   RelationshipAction,
 } from 'lib/types/relationship-types.js';
 import type {
   GlobalAccountUserInfo,
   AccountUserInfo,
 } from 'lib/types/user-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import AddUsersListItem from './add-users-list-item.react.js';
 import css from './add-users-list.css';
 import Button from '../../components/button.react.js';
 import type { ButtonColor } from '../../components/button.react.js';
 import Label from '../../components/label.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 
 const loadingStatusSelector = createLoadingStatusSelector(
   updateRelationshipsActionTypes,
 );
 
 type Props = {
   +searchText: string,
   +excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
   +closeModal: () => void,
   +confirmButtonContent: React.Node,
   +confirmButtonColor?: ButtonColor,
   +relationshipAction: RelationshipAction,
 };
 
 function AddUsersList(props: Props): React.Node {
   const {
     searchText,
     excludedStatuses = new Set(),
     closeModal,
     confirmButtonContent,
     confirmButtonColor,
     relationshipAction,
   } = props;
 
   const viewerID = useSelector(state => state.currentUserInfo?.id);
   const userInfos = useSelector(state => state.userStore.userInfos);
   const userInfosArray = React.useMemo(() => values(userInfos), [userInfos]);
 
   const userStoreSearchIndex = useUserSearchIndex(userInfosArray);
   const [userStoreSearchResults, setUserStoreSearchResults] = React.useState<
     $ReadOnlySet<string>,
   >(new Set(userStoreSearchIndex.getSearchResults(searchText)));
   React.useEffect(() => {
     setUserStoreSearchResults(
       new Set(userStoreSearchIndex.getSearchResults(searchText)),
     );
   }, [searchText, userStoreSearchIndex]);
 
   const serverSearchResults = useSearchUsers(searchText);
 
   const searchTextPresent = searchText.length > 0;
   const mergedUserInfos = React.useMemo(() => {
     const mergedInfos: { [string]: GlobalAccountUserInfo | AccountUserInfo } =
       {};
 
     for (const userInfo of serverSearchResults) {
       mergedInfos[userInfo.id] = userInfo;
     }
 
     const userStoreUserIDs = searchTextPresent
       ? userStoreSearchResults
       : Object.keys(userInfos);
     for (const id of userStoreUserIDs) {
       const { username, relationshipStatus } = userInfos[id];
       if (username) {
         mergedInfos[id] = { id, username, relationshipStatus };
       }
     }
 
     return mergedInfos;
   }, [
     searchTextPresent,
     serverSearchResults,
     userInfos,
     userStoreSearchResults,
   ]);
 
   const sortedUsers = React.useMemo(
     () =>
       Object.keys(mergedUserInfos)
         .map(userID => mergedUserInfos[userID])
         .filter(
           user =>
             user.id !== viewerID &&
             (!user.relationshipStatus ||
               !excludedStatuses.has(user.relationshipStatus)),
         )
         .sort((user1, user2) => user1.username.localeCompare(user2.username)),
     [excludedStatuses, mergedUserInfos, viewerID],
   );
 
   const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
   const selectUser = React.useCallback(
     (userID: string) => {
       setPendingUsersToAdd(pendingUsers => {
         const username = mergedUserInfos[userID]?.username;
         if (!username || pendingUsers.some(user => user.id === userID)) {
           return pendingUsers;
         }
 
         const newPendingUser = {
           id: userID,
           username,
         };
         let targetIndex = 0;
         while (
           targetIndex < pendingUsers.length &&
           newPendingUser.username.localeCompare(
             pendingUsers[targetIndex].username,
           ) > 0
         ) {
           targetIndex++;
         }
         return [
           ...pendingUsers.slice(0, targetIndex),
           newPendingUser,
           ...pendingUsers.slice(targetIndex),
         ];
       });
     },
     [mergedUserInfos],
   );
   const deselectUser = React.useCallback(
     (userID: string) =>
       setPendingUsersToAdd(pendingUsers =>
         pendingUsers.filter(userInfo => userInfo.id !== userID),
       ),
     [],
   );
   const pendingUserIDs = React.useMemo(
     () => new Set(pendingUsersToAdd.map(userInfo => userInfo.id)),
     [pendingUsersToAdd],
   );
 
   const pendingUsersWithENSNames = useENSNames(pendingUsersToAdd);
   const userTags = React.useMemo(() => {
     if (pendingUsersWithENSNames.length === 0) {
       return null;
     }
     const tags = pendingUsersWithENSNames.map(userInfo => (
       <Label key={userInfo.id} onClose={() => deselectUser(userInfo.id)}>
         {userInfo.username}
       </Label>
     ));
     return <div className={css.userTagsContainer}>{tags}</div>;
   }, [deselectUser, pendingUsersWithENSNames]);
 
   const filteredUsers = React.useMemo(
     () => sortedUsers.filter(userInfo => !pendingUserIDs.has(userInfo.id)),
     [pendingUserIDs, sortedUsers],
   );
   const filteredUsersWithENSNames = useENSNames(filteredUsers);
 
   const userRows = React.useMemo(
     () =>
       filteredUsersWithENSNames.map(userInfo => (
         <AddUsersListItem
           userInfo={userInfo}
           key={userInfo.id}
           selectUser={selectUser}
         />
       )),
     [filteredUsersWithENSNames, selectUser],
   );
 
   const [errorMessage, setErrorMessage] = React.useState('');
   const callUpdateRelationships = useServerCall(updateRelationships);
   const dispatchActionPromise = useDispatchActionPromise();
   const updateRelationshipsPromiseCreator = React.useCallback(async () => {
     try {
       setErrorMessage('');
       const result = await callUpdateRelationships({
         action: relationshipAction,
         userIDs: Array.from(pendingUserIDs),
       });
       closeModal();
       return result;
     } catch (e) {
       setErrorMessage('unknown error');
       throw e;
     }
   }, [callUpdateRelationships, closeModal, pendingUserIDs, relationshipAction]);
   const confirmSelection = React.useCallback(
     () =>
       dispatchActionPromise(
         updateRelationshipsActionTypes,
         updateRelationshipsPromiseCreator(),
       ),
     [dispatchActionPromise, updateRelationshipsPromiseCreator],
   );
   const loadingStatus = useSelector(loadingStatusSelector);
   let buttonContent = confirmButtonContent;
   if (loadingStatus === 'loading') {
     buttonContent = (
       <>
         <div className={css.hidden}>{confirmButtonContent}</div>
         <LoadingIndicator status="loading" />
       </>
     );
   }
 
   let errors;
   if (errorMessage) {
     errors = <div className={css.error}>{errorMessage}</div>;
   }
 
   return (
     <div className={css.container}>
       {userTags}
       <div className={css.userRowsContainer}>{userRows}</div>
       {errors}
       <div className={css.buttons}>
         <Button variant="outline" onClick={closeModal}>
           Cancel
         </Button>
         <Button
           onClick={confirmSelection}
           disabled={pendingUserIDs.size === 0 || loadingStatus === 'loading'}
           variant="filled"
           buttonColor={confirmButtonColor}
         >
           <div className={css.confirmButtonContainer}>{buttonContent}</div>
         </Button>
       </div>
     </div>
   );
 }
 
 export default AddUsersList;
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
index bfa5a5992..3c3b4b686 100644
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -1,209 +1,209 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useNewThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { NewThreadResult } from 'lib/types/thread-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
 import CommunityCreationMembersModal from './community-creation-members-modal.react.js';
 import css from './community-creation-modal.css';
 import UserAvatar from '../../avatars/user-avatar.react.js';
 import CommIcon from '../../CommIcon.react.js';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import EnumSettingsOption from '../../components/enum-settings-option.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import Input from '../../modals/input.react.js';
 import Modal from '../../modals/modal.react.js';
 import { updateNavInfoActionType } from '../../redux/action-types.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../../selectors/nav-selectors.js';
 
 const announcementStatements = [
   {
     statement:
       `This option sets the community’s root channel to an ` +
       `announcement channel. Only admins and other admin-appointed ` +
       `roles can send messages in an announcement channel.`,
     isStatementValid: true,
     styleStatementBasedOnValidity: false,
   },
 ];
 
 const createNewCommunityLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 function CommunityCreationModal(): React.Node {
   const modalContext = useModalContext();
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const callNewThread = useNewThread();
   const calendarQueryFunc = useSelector(nonThreadCalendarQuery);
 
   const [errorMessage, setErrorMessage] = React.useState<?string>();
 
   const [pendingCommunityName, setPendingCommunityName] =
     React.useState<string>('');
 
   const onChangePendingCommunityName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       setErrorMessage();
       setPendingCommunityName(event.currentTarget.value);
     },
     [],
   );
 
   const [announcementSetting, setAnnouncementSetting] = React.useState(false);
   const onAnnouncementSelected = React.useCallback(() => {
     setErrorMessage();
     setAnnouncementSetting(!announcementSetting);
   }, [announcementSetting]);
 
   const callCreateNewCommunity = React.useCallback(async () => {
     const calendarQuery = calendarQueryFunc();
 
     try {
       const newThreadResult: NewThreadResult = await callNewThread({
         name: pendingCommunityName,
         type: announcementSetting
           ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT
           : threadTypes.COMMUNITY_ROOT,
         calendarQuery,
       });
       return newThreadResult;
     } catch (e) {
       setErrorMessage('Community creation failed. Please try again.');
       throw e;
     }
   }, [
     announcementSetting,
     calendarQueryFunc,
     callNewThread,
     pendingCommunityName,
   ]);
 
   const createNewCommunity = React.useCallback(async () => {
     setErrorMessage();
 
     const newThreadResultPromise = callCreateNewCommunity();
     void dispatchActionPromise(newThreadActionTypes, newThreadResultPromise);
     const newThreadResult: NewThreadResult = await newThreadResultPromise;
 
     const { newThreadID } = newThreadResult;
     await dispatch({
       type: updateNavInfoActionType,
       payload: {
         activeChatThreadID: newThreadID,
       },
     });
 
     modalContext.popModal();
     modalContext.pushModal(
       <CommunityCreationMembersModal
         onClose={modalContext.popModal}
         threadID={newThreadID}
       />,
     );
   }, [callCreateNewCommunity, dispatch, dispatchActionPromise, modalContext]);
 
   const megaphoneIcon = React.useMemo(
     () => <CommIcon icon="megaphone" size={24} />,
     [],
   );
 
   const avatarNodeEnabled = false;
   let avatarNode;
   if (avatarNodeEnabled) {
     avatarNode = (
       <div className={css.avatarContainer}>
         <UserAvatar userID="256" size="XL" />
       </div>
     );
   }
 
   const createNewCommunityLoadingStatus: LoadingStatus = useSelector(
     createNewCommunityLoadingStatusSelector,
   );
   let buttonContent;
   if (createNewCommunityLoadingStatus === 'loading') {
     buttonContent = (
       <LoadingIndicator
         status={createNewCommunityLoadingStatus}
         size="medium"
       />
     );
   } else if (errorMessage) {
     buttonContent = errorMessage;
   } else {
     buttonContent = 'Create community';
   }
 
   return (
     <Modal
       name="Create a community"
       onClose={modalContext.popModal}
       size="large"
     >
       <div className={css.modalBody}>
         <CommunityCreationKeyserverLabel />
         {avatarNode}
         <form method="POST" className={css.formContainer}>
           <div>
             <div className={css.formTitle}>Community Name</div>
             <div className={css.formContent}>
               <Input
                 type="text"
                 value={pendingCommunityName}
                 placeholder="Community Name"
                 onChange={onChangePendingCommunityName}
               />
             </div>
           </div>
           <div className={css.formNotice}>
             You may edit your community&rsquo;s image and name later.
           </div>
           <hr />
           <div className={css.optionalSettingsContainer}>
             <div className={css.optionalSettingsLabel}>Optional settings</div>
             <EnumSettingsOption
               selected={announcementSetting}
               onSelect={onAnnouncementSelected}
               icon={megaphoneIcon}
               title="Announcement"
               statements={announcementStatements}
               iconPosition="top"
               type="checkbox"
             />
           </div>
           <div className={css.createCommunityButtonContainer}>
             <Button
               onClick={createNewCommunity}
               variant="filled"
               buttonColor={
                 errorMessage ? buttonThemes.danger : buttonThemes.standard
               }
               disabled={createNewCommunityLoadingStatus === 'loading'}
             >
               <div className={css.createCommunityButtonContent}>
                 {buttonContent}
               </div>
             </Button>
           </div>
         </form>
       </div>
     </Modal>
   );
 }
 
 export default CommunityCreationModal;
diff --git a/web/socket.react.js b/web/socket.react.js
index 62b677bfa..02463f56f 100644
--- a/web/socket.react.js
+++ b/web/socket.react.js
@@ -1,128 +1,128 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { preRequestUserStateForSingleKeyserverSelector } from 'lib/selectors/account-selectors.js';
 import {
   cookieSelector,
   urlPrefixSelector,
   connectionSelector,
   lastCommunicatedPlatformDetailsSelector,
 } from 'lib/selectors/keyserver-selectors.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import Socket, { type BaseSocketProps } from 'lib/socket/socket.react.js';
 import type { OLMIdentityKeys } from 'lib/types/crypto-types.js';
 import type { OlmSessionInitializationInfo } from 'lib/types/request-types.js';
-import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import {
   useGetSignedIdentityKeysBlob,
   useWebNotificationsSessionCreator,
 } from './account/account-hooks.js';
 import { useSelector } from './redux/redux-utils.js';
 import {
   activeThreadSelector,
   webCalendarQuery,
 } from './selectors/nav-selectors.js';
 import {
   openSocketSelector,
   sessionIdentificationSelector,
   webGetClientResponsesSelector,
   webSessionStateFuncSelector,
 } from './selectors/socket-selectors.js';
 import { decompressMessage } from './utils/decompress.js';
 
 const WebSocket: React.ComponentType<BaseSocketProps> =
   React.memo<BaseSocketProps>(function WebSocket(props) {
     const cookie = useSelector(cookieSelector(ashoatKeyserverID));
     const urlPrefix = useSelector(urlPrefixSelector(ashoatKeyserverID));
     invariant(urlPrefix, 'missing urlPrefix for given keyserver id');
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const active = useSelector(
       state =>
         !!state.currentUserInfo &&
         !state.currentUserInfo.anonymous &&
         state.lifecycleState !== 'background',
     );
 
     const openSocket = useSelector(openSocketSelector(ashoatKeyserverID));
     invariant(openSocket, 'openSocket failed to be created');
     const sessionIdentification = useSelector(
       sessionIdentificationSelector(ashoatKeyserverID),
     );
     const preRequestUserState = useSelector(
       preRequestUserStateForSingleKeyserverSelector(ashoatKeyserverID),
     );
     const getSignedIdentityKeysBlob = useGetSignedIdentityKeysBlob();
     const webNotificationsSessionCreator = useWebNotificationsSessionCreator();
     const webNotifsSessionCreatorForCookie = React.useCallback(
       async (
         notificationsIdentityKeys: OLMIdentityKeys,
         notificationsInitializationInfo: OlmSessionInitializationInfo,
       ) =>
         webNotificationsSessionCreator(
           cookie,
           notificationsIdentityKeys,
           notificationsInitializationInfo,
         ),
       [webNotificationsSessionCreator, cookie],
     );
     const getInitialNotificationsEncryptedMessage =
       useInitialNotificationsEncryptedMessage(webNotifsSessionCreatorForCookie);
     const getClientResponses = useSelector(state =>
       webGetClientResponsesSelector({
         state,
         getSignedIdentityKeysBlob,
         getInitialNotificationsEncryptedMessage,
       }),
     );
     const sessionStateFunc = useSelector(
       webSessionStateFuncSelector(ashoatKeyserverID),
     );
     const currentCalendarQuery = useSelector(webCalendarQuery);
 
     const reduxActiveThread = useSelector(activeThreadSelector);
     const windowActive = useSelector(state => state.windowActive);
     const activeThread = React.useMemo(() => {
       if (!active || !windowActive) {
         return null;
       }
       return reduxActiveThread;
     }, [active, windowActive, reduxActiveThread]);
 
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
 
     const lastCommunicatedPlatformDetails = useSelector(
       lastCommunicatedPlatformDetailsSelector(ashoatKeyserverID),
     );
 
     return (
       <Socket
         {...props}
         active={active}
         openSocket={openSocket}
         getClientResponses={getClientResponses}
         activeThread={activeThread}
         sessionStateFunc={sessionStateFunc}
         sessionIdentification={sessionIdentification}
         cookie={cookie}
         urlPrefix={urlPrefix}
         connection={connection}
         currentCalendarQuery={currentCalendarQuery}
         canSendReports={true}
         frozen={false}
         preRequestUserState={preRequestUserState}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         lastCommunicatedPlatformDetails={lastCommunicatedPlatformDetails}
         decompressSocketMessage={decompressMessage}
       />
     );
   });
 
 export default WebSocket;