fix: toast stripped function fetch cannot run on import

8 months ago · 718b814902
parent 5d9bb47c93
commit 718b814902
10 changed files with 150 additions and 85 deletions
--- a/ts/components/dialog/EditProfilePictureModal.tsx
+++ b/ts/components/dialog/EditProfilePictureModal.tsx
@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { clearOurAvatar, uploadOurAvatar } from '../../interactions/conversationInteractions';
 import { ToastUtils } from '../../session/utils';
-import { editProfileModal, updateEditProfilePictureModel } from '../../state/ducks/modalDialog';
+import { editProfileModal, updateEditProfilePictureModal } from '../../state/ducks/modalDialog';
 import type { EditProfilePictureModalProps } from '../../types/ReduxTypes';
 import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
 import { SessionWrapperModal } from '../SessionWrapperModal';
@ -75,7 +75,7 @@ export const EditProfilePictureModal = (props: EditProfilePictureModalProps) =>
  const { avatarPath, profileName, ourId } = props;

  const closeDialog = () => {
-    dispatch(updateEditProfilePictureModel(null));
+    dispatch(updateEditProfilePictureModal(null));
    dispatch(editProfileModal({}));
  };

@ -95,7 +95,7 @@ export const EditProfilePictureModal = (props: EditProfilePictureModalProps) =>

    await uploadProfileAvatar(newAvatarObjectUrl);
    setLoading(false);
-    dispatch(updateEditProfilePictureModel(null));
+    dispatch(updateEditProfilePictureModal(null));
  };

  const handleRemove = async () => {
@ -103,7 +103,7 @@ export const EditProfilePictureModal = (props: EditProfilePictureModalProps) =>
    await clearOurAvatar();
    setNewAvatarObjectUrl(null);
    setLoading(false);
-    dispatch(updateEditProfilePictureModel(null));
+    dispatch(updateEditProfilePictureModal(null));
  };

  return (
--- a/ts/components/dialog/HideRecoveryPasswordDialog.tsx
+++ b/ts/components/dialog/HideRecoveryPasswordDialog.tsx
@ -2,7 +2,7 @@ import { isEmpty } from 'lodash';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { SettingsKey } from '../../data/settings-key';
-import { updateHideRecoveryPasswordModel } from '../../state/ducks/modalDialog';
+import { updateHideRecoveryPasswordModal } from '../../state/ducks/modalDialog';
 import { showSettingsSection } from '../../state/ducks/section';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { Flex } from '../basic/Flex';
@ -25,7 +25,7 @@ export function HideRecoveryPasswordDialog(props: HideRecoveryPasswordDialogProp
  const dispatch = useDispatch();

  const onClose = () => {
-    dispatch(updateHideRecoveryPasswordModel(null));
+    dispatch(updateHideRecoveryPasswordModal(null));
  };

  const onConfirmation = async () => {
@ -44,7 +44,7 @@ export function HideRecoveryPasswordDialog(props: HideRecoveryPasswordDialogProp
          text: window.i18n('theContinue'),
          buttonColor: SessionButtonColor.Danger,
          onClick: () => {
-            dispatch(updateHideRecoveryPasswordModel({ state: 'secondWarning' }));
+            dispatch(updateHideRecoveryPasswordModal({ state: 'secondWarning' }));
          },
          dataTestId: 'session-confirm-ok-button',
        }
--- a/ts/components/dialog/ModalContainer.tsx
+++ b/ts/components/dialog/ModalContainer.tsx
@ -12,6 +12,7 @@ import {
  getInviteContactModal,
  getLightBoxOptions,
  getOnionPathDialog,
+  getOpenUrlModalState,
  getReactClearAllDialog,
  getReactListDialog,
  getRemoveModeratorsModal,
@ -39,6 +40,7 @@ import { UpdateGroupMembersDialog } from './UpdateGroupMembersDialog';
 import { UpdateGroupNameDialog } from './UpdateGroupNameDialog';
 import { UserDetailsDialog } from './UserDetailsDialog';
 import { EditProfileDialog } from './edit-profile/EditProfileDialog';
+import { OpenUrlModal } from './OpenUrlModal';

 export const ModalContainer = () => {
  const confirmModalState = useSelector(getConfirmModal);
@ -59,6 +61,7 @@ export const ModalContainer = () => {
  const reactClearAllModalState = useSelector(getReactClearAllDialog);
  const editProfilePictureModalState = useSelector(getEditProfilePictureModalState);
  const hideRecoveryPasswordModalState = useSelector(getHideRecoveryPasswordModalState);
+  const openUrlModalState = useSelector(getOpenUrlModalState);
  const lightBoxOptions = useSelector(getLightBoxOptions);

  return (
@ -87,6 +90,7 @@ export const ModalContainer = () => {
      {hideRecoveryPasswordModalState && (
        <HideRecoveryPasswordDialog {...hideRecoveryPasswordModalState} />
      )}
+      {openUrlModalState && <OpenUrlModal {...openUrlModalState} />}
      {lightBoxOptions && <LightboxGallery {...lightBoxOptions} />}
    </>
  );
--- a/ts/components/dialog/OpenUrlModal.tsx
+++ b/ts/components/dialog/OpenUrlModal.tsx
@ -0,0 +1,71 @@
+import { shell } from 'electron';
+import { isEmpty } from 'lodash';
+import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
+import { MessageInteraction } from '../../interactions';
+import { OpenUrlModalState, updateOpenUrlModal } from '../../state/ducks/modalDialog';
+import { SessionWrapperModal } from '../SessionWrapperModal';
+import { Flex } from '../basic/Flex';
+import { I18n } from '../basic/I18n';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { SpacerMD } from '../basic/Text';
+
+const StyledDescriptionContainer = styled.div`
+  max-height: 150px;
+  overflow-y: auto;
+`;
+
+export function OpenUrlModal(props: OpenUrlModalState) {
+  const dispatch = useDispatch();
+  // console.warn('props', props);
+
+  if (!props || isEmpty(props) || !props.urlToOpen) {
+    return null;
+  }
+  const url = props.urlToOpen;
+
+  function onClose() {
+    dispatch(updateOpenUrlModal(null));
+  }
+  function onClickOpen() {
+    void shell.openExternal(url);
+
+    onClose();
+  }
+
+  function onClickCopy() {
+    MessageInteraction.copyBodyToClipboard(url);
+    onClose();
+  }
+
+  return (
+    <SessionWrapperModal
+      title={window.i18n('urlOpen')}
+      onClose={onClose}
+      showExitIcon={false}
+      showHeader={true}
+      additionalClassName="no-body-padding"
+    >
+      <StyledDescriptionContainer>
+        <I18n token={'urlOpenDescription'} args={{ url }} />
+      </StyledDescriptionContainer>
+      <SpacerMD />
+      <Flex container={true} justifyContent="center" alignItems="center" width="100%">
+        <SessionButton
+          text={window.i18n('urlOpen')}
+          buttonColor={SessionButtonColor.Danger}
+          buttonType={SessionButtonType.Ghost}
+          onClick={onClickOpen}
+          dataTestId="session-confirm-ok-button"
+        />
+        <SessionButton
+          text={window.i18n('urlCopy')}
+          buttonColor={SessionButtonColor.Primary}
+          buttonType={SessionButtonType.Ghost}
+          onClick={onClickCopy}
+          dataTestId="session-confirm-cancel-button"
+        />
+      </Flex>
+    </SessionWrapperModal>
+  );
+}
--- a/ts/components/dialog/SessionConfirm.tsx
+++ b/ts/components/dialog/SessionConfirm.tsx
@ -1,12 +1,11 @@
-import { shell } from 'electron';
 import { Dispatch, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 import { useLastMessage } from '../../hooks/useParamSelector';
-import { MessageInteraction } from '../../interactions';
 import { updateConversationInteractionState } from '../../interactions/conversationInteractions';
-import { updateConfirmModal } from '../../state/ducks/modalDialog';
+import { ConversationInteractionStatus } from '../../interactions/types';
+import { updateConfirmModal, updateOpenUrlModal } from '../../state/ducks/modalDialog';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
@ -14,7 +13,6 @@ import { SessionRadioGroup, SessionRadioItems } from '../basic/SessionRadioGroup
 import { SpacerLG } from '../basic/Text';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 import { SessionSpinner } from '../loading';
-import { ConversationInteractionStatus } from '../../interactions/types';

 const StyledSubText = styled(SessionHtmlRenderer)<{ textLength: number }>`
  font-size: var(--font-size-md);
@ -218,25 +216,9 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
 };

 export const showLinkVisitWarningDialog = (urlToOpen: string, dispatch: Dispatch<any>) => {
-  function onClickOk() {
-    void shell.openExternal(urlToOpen);
-  }
-
  dispatch(
-    updateConfirmModal({
-      title: window.i18n('urlOpen'),
-      message: window.i18n('urlOpenDescription', { url: urlToOpen }),
-      okText: window.i18n('open'),
-      okTheme: SessionButtonColor.Primary,
-      cancelText: window.i18n('copy'),
-      showExitIcon: true,
-      onClickOk,
-      onClickClose: () => {
-        dispatch(updateConfirmModal(null));
-      },
-      onClickCancel: () => {
-        MessageInteraction.copyBodyToClipboard(urlToOpen);
-      },
+    updateOpenUrlModal({
+      urlToOpen,
    })
  );
 };
--- a/ts/components/dialog/edit-profile/EditProfileDialog.tsx
+++ b/ts/components/dialog/edit-profile/EditProfileDialog.tsx
@ -11,7 +11,7 @@ import { useHotkey } from '../../../hooks/useHotkey';
 import { useOurAvatarPath, useOurConversationUsername } from '../../../hooks/useParamSelector';
 import { ProfileManager } from '../../../session/profile_manager/ProfileManager';
 import LIBSESSION_CONSTANTS from '../../../session/utils/libsession/libsession_constants';
-import { editProfileModal, updateEditProfilePictureModel } from '../../../state/ducks/modalDialog';
+import { editProfileModal, updateEditProfilePictureModal } from '../../../state/ducks/modalDialog';
 import { SessionWrapperModal } from '../../SessionWrapperModal';
 import { Flex } from '../../basic/Flex';
 import { SessionButton } from '../../basic/SessionButton';
@ -232,7 +232,7 @@ export const EditProfileDialog = () => {
    }
    closeDialog();
    dispatch(
-      updateEditProfilePictureModel({
+      updateEditProfilePictureModal({
        avatarPath,
        profileName,
        ourId,
--- a/ts/components/settings/section/CategoryRecoveryPassword.tsx
+++ b/ts/components/settings/section/CategoryRecoveryPassword.tsx
@ -7,7 +7,7 @@ import { useIconToImageURL } from '../../../hooks/useIconToImageURL';
 import { usePasswordModal } from '../../../hooks/usePasswordModal';
 import { mnDecode } from '../../../session/crypto/mnemonic';
 import {
-  updateHideRecoveryPasswordModel,
+  updateHideRecoveryPasswordModal,
  updateLightBoxOptions,
 } from '../../../state/ducks/modalDialog';
 import { showSettingsSection } from '../../../state/ducks/section';
@ -201,7 +201,7 @@ export const SettingsCategoryRecoveryPassword = () => {
          title={window.i18n('recoveryPasswordHidePermanently')}
          description={window.i18n('recoveryPasswordHideRecoveryPasswordDescription')}
          onClick={() => {
-            dispatch(updateHideRecoveryPasswordModel({ state: 'firstWarning' }));
+            dispatch(updateHideRecoveryPasswordModal({ state: 'firstWarning' }));
          }}
          buttonText={window.i18n('hide')}
          buttonColor={SessionButtonColor.Danger}
--- a/ts/session/utils/Toast.tsx
+++ b/ts/session/utils/Toast.tsx
@ -35,12 +35,6 @@ export function pushToastInfo(
  );
 }

-/**
- * We are rendering a toast. A toast is only rendering a string and no html at all.
- * We have to strip the html tags from the strings we are given.
- */
-const getStrippedI18n = window.i18n.stripped;
-
 export function pushToastSuccess(id: string, title: string, description?: string) {
  toast.success(
    <SessionToast title={title} description={description} type={SessionToastType.Success} />,
@ -52,70 +46,70 @@ export function pushLoadAttachmentFailure(message?: string) {
  if (message) {
    pushToastError(
      'unableToLoadAttachment',
-      `${getStrippedI18n('attachmentsErrorLoad')} ${message}`
+      `${window.i18n.stripped('attachmentsErrorLoad')} ${message}`
    );
  } else {
-    pushToastError('unableToLoadAttachment', getStrippedI18n('attachmentsErrorLoad'));
+    pushToastError('unableToLoadAttachment', window.i18n.stripped('attachmentsErrorLoad'));
  }
 }

 export function pushFileSizeErrorAsByte() {
-  pushToastError('fileSizeWarning', getStrippedI18n('attachmentsErrorSize'));
+  pushToastError('fileSizeWarning', window.i18n.stripped('attachmentsErrorSize'));
 }

 export function pushMultipleNonImageError() {
-  pushToastError('attachmentsErrorTypes', getStrippedI18n('attachmentsErrorTypes'));
+  pushToastError('attachmentsErrorTypes', window.i18n.stripped('attachmentsErrorTypes'));
 }

 export function pushCannotMixError() {
-  pushToastError('attachmentsErrorTypes', getStrippedI18n('attachmentsErrorTypes'));
+  pushToastError('attachmentsErrorTypes', window.i18n.stripped('attachmentsErrorTypes'));
 }

 export function pushMaximumAttachmentsError() {
-  pushToastError('attachmentsErrorNumber', getStrippedI18n('attachmentsErrorNumber'));
+  pushToastError('attachmentsErrorNumber', window.i18n.stripped('attachmentsErrorNumber'));
 }

 export function pushCopiedToClipBoard() {
-  pushToastInfo('copiedToClipboard', getStrippedI18n('copied'));
+  pushToastInfo('copiedToClipboard', window.i18n.stripped('copied'));
 }

 export function pushRestartNeeded() {
-  pushToastInfo('restartNeeded', getStrippedI18n('settingsRestartDescription'));
+  pushToastInfo('restartNeeded', window.i18n.stripped('settingsRestartDescription'));
 }

 export function pushAlreadyMemberOpenGroup() {
-  pushToastInfo('publicChatExists', getStrippedI18n('communityJoinedAlready'));
+  pushToastInfo('publicChatExists', window.i18n.stripped('communityJoinedAlready'));
 }

 export function pushUserBanSuccess() {
-  pushToastSuccess('userBanned', getStrippedI18n('banUserBanned'));
+  pushToastSuccess('userBanned', window.i18n.stripped('banUserBanned'));
 }

 export function pushUserBanFailure() {
-  pushToastError('userBanFailed', getStrippedI18n('banErrorFailed'));
+  pushToastError('userBanFailed', window.i18n.stripped('banErrorFailed'));
 }

 export function pushUserUnbanSuccess() {
-  pushToastSuccess('userUnbanned', getStrippedI18n('banUnbanUserUnbanned'));
+  pushToastSuccess('userUnbanned', window.i18n.stripped('banUnbanUserUnbanned'));
 }

 export function pushUserUnbanFailure() {
-  pushToastError('userUnbanFailed', getStrippedI18n('banUnbanErrorFailed'));
+  pushToastError('userUnbanFailed', window.i18n.stripped('banUnbanErrorFailed'));
 }

 export function pushMessageDeleteForbidden() {
  pushToastError(
    'messageDeletionForbidden',
-    getStrippedI18n('deleteafterMessageDeletionStandardisationmessageDeletionForbidden')
+    window.i18n.stripped('deleteafterMessageDeletionStandardisationmessageDeletionForbidden')
  );
 }

 export function pushUnableToCall() {
-  pushToastError('unableToCall', getStrippedI18n('callsCannotStart'));
+  pushToastError('unableToCall', window.i18n.stripped('callsCannotStart'));
 }

 export function pushedMissedCall(userName: string) {
-  pushToastInfo('missedCall', getStrippedI18n('callsMissedCallFrom', { name: userName }));
+  pushToastInfo('missedCall', window.i18n.stripped('callsMissedCallFrom', { name: userName }));
 }

 const openPermissionsSettings = () => {
@ -127,8 +121,10 @@ export function pushedMissedCallCauseOfPermission(conversationName: string) {
  const id = 'missedCallPermission';
  toast.info(
    <SessionToast
-      title={getStrippedI18n('callsMissedCallFrom', { name: conversationName })}
-      description={getStrippedI18n('callsYouMissedCallPermissions', { name: conversationName })}
+      title={window.i18n.stripped('callsMissedCallFrom', { name: conversationName })}
+      description={window.i18n.stripped('callsYouMissedCallPermissions', {
+        name: conversationName,
+      })}
      type={SessionToastType.Info}
      onToastClick={openPermissionsSettings}
    />,
@ -139,8 +135,8 @@ export function pushedMissedCallCauseOfPermission(conversationName: string) {
 export function pushVideoCallPermissionNeeded() {
  pushToastInfo(
    'videoCallPermissionNeeded',
-    getStrippedI18n('callsPermissionsRequired'),
-    getStrippedI18n('callsPermissionsRequiredDescription'),
+    window.i18n.stripped('callsPermissionsRequired'),
+    window.i18n.stripped('callsPermissionsRequiredDescription'),
    openPermissionsSettings
  );
 }
@ -148,46 +144,46 @@ export function pushVideoCallPermissionNeeded() {
 export function pushAudioPermissionNeeded() {
  pushToastInfo(
    'audioPermissionNeeded',
-    getStrippedI18n('permissionsMicrophoneAccessRequiredDesktop'),
+    window.i18n.stripped('permissionsMicrophoneAccessRequiredDesktop'),
    undefined,
    openPermissionsSettings
  );
 }

 export function pushOriginalNotFound() {
-  pushToastError('messageErrorOriginal', getStrippedI18n('messageErrorOriginal'));
+  pushToastError('messageErrorOriginal', window.i18n.stripped('messageErrorOriginal'));
 }

 export function pushTooManyMembers() {
-  pushToastError('groupAddMemberMaximum', getStrippedI18n('groupAddMemberMaximum'));
+  pushToastError('groupAddMemberMaximum', window.i18n.stripped('groupAddMemberMaximum'));
 }

 export function pushMessageRequestPending() {
-  pushToastInfo('messageRequestPending', getStrippedI18n('messageRequestPending'));
+  pushToastInfo('messageRequestPending', window.i18n.stripped('messageRequestPending'));
 }

 export function pushUnblockToSend() {
-  pushToastInfo('unblockToSend', getStrippedI18n('blockBlockedDescription'));
+  pushToastInfo('unblockToSend', window.i18n.stripped('blockBlockedDescription'));
 }

 export function pushYouLeftTheGroup() {
-  pushToastError('youLeftTheGroup', getStrippedI18n('groupMemberYouLeft'));
+  pushToastError('youLeftTheGroup', window.i18n.stripped('groupMemberYouLeft'));
 }

 export function someDeletionsFailed(count: number) {
-  pushToastWarning('deletionError', getStrippedI18n('deleteMessagesFailed', { count }));
+  pushToastWarning('deletionError', window.i18n.stripped('deleteMessagesFailed', { count }));
 }

 export function pushDeleted() {
-  pushToastSuccess('deleted', getStrippedI18n('deleteMessagesDeleted'), undefined);
+  pushToastSuccess('deleted', window.i18n.stripped('deleteMessagesDeleted'), undefined);
 }

 export function pushCannotRemoveCreatorFromGroup() {
-  pushToastWarning('adminCannotBeRemoved', getStrippedI18n('adminCannotBeRemoved'));
+  pushToastWarning('adminCannotBeRemoved', window.i18n.stripped('adminCannotBeRemoved'));
 }

 export function pushFailedToAddAsModerator() {
-  pushToastWarning('adminPromotionFailed', getStrippedI18n('adminPromotionFailed'));
+  pushToastWarning('adminPromotionFailed', window.i18n.stripped('adminPromotionFailed'));
 }

 export function pushFailedToRemoveFromModerator(names: Array<string>) {
@ -196,18 +192,18 @@ export function pushFailedToRemoveFromModerator(names: Array<string>) {
    case 0:
      throw new Error('pushFailedToRemoveFromModerator invalid case error');
    case 1:
-      localizedString = getStrippedI18n('adminRemoveFailed', {
+      localizedString = window.i18n.stripped('adminRemoveFailed', {
        name: names[0],
      });
      break;
    case 2:
-      localizedString = getStrippedI18n('adminRemoveFailedOther', {
+      localizedString = window.i18n.stripped('adminRemoveFailedOther', {
        name: names[0],
        other_name: names[1],
      });
      break;
    default:
-      localizedString = getStrippedI18n('adminRemoveFailedMultiple', {
+      localizedString = window.i18n.stripped('adminRemoveFailedMultiple', {
        name: names[0],
        count: names.length - 1,
      });
@ -217,7 +213,7 @@ export function pushFailedToRemoveFromModerator(names: Array<string>) {
 }

 export function pushUserAddedToModerators(name: string) {
-  pushToastSuccess('adminPromotedToAdmin', getStrippedI18n('adminPromotedToAdmin', { name }));
+  pushToastSuccess('adminPromotedToAdmin', window.i18n.stripped('adminPromotedToAdmin', { name }));
 }

 export function pushUserRemovedFromModerators(names: Array<string>) {
@ -226,18 +222,18 @@ export function pushUserRemovedFromModerators(names: Array<string>) {
    case 0:
      throw new Error('pushUserRemovedFromModerators invalid case error');
    case 1:
-      localizedString = getStrippedI18n('adminRemovedUser', {
+      localizedString = window.i18n.stripped('adminRemovedUser', {
        name: names[0],
      });
      break;
    case 2:
-      localizedString = getStrippedI18n('adminRemovedUserOther', {
+      localizedString = window.i18n.stripped('adminRemovedUserOther', {
        name: names[0],
        other_name: names[1],
      });
      break;
    default:
-      localizedString = getStrippedI18n('adminRemovedUserMultiple', {
+      localizedString = window.i18n.stripped('adminRemovedUserMultiple', {
        name: names[0],
        count: names.length - 1,
      });
@ -248,23 +244,23 @@ export function pushUserRemovedFromModerators(names: Array<string>) {
 }

 export function pushInvalidPubKey() {
-  pushToastSuccess('accountIdErrorInvalid', getStrippedI18n('accountIdErrorInvalid'));
+  pushToastSuccess('accountIdErrorInvalid', window.i18n.stripped('accountIdErrorInvalid'));
 }

 export function pushNoCameraFound() {
-  pushToastWarning('noCameraFound', getStrippedI18n('cameraErrorNotFound'));
+  pushToastWarning('noCameraFound', window.i18n.stripped('cameraErrorNotFound'));
 }

 export function pushNoAudioInputFound() {
-  pushToastWarning('noAudioInputFound', getStrippedI18n('audioNoInput'));
+  pushToastWarning('noAudioInputFound', window.i18n.stripped('audioNoInput'));
 }

 export function pushNoAudioOutputFound() {
-  pushToastWarning('noAudioOutputFound', getStrippedI18n('audioNoOutput'));
+  pushToastWarning('noAudioOutputFound', window.i18n.stripped('audioNoOutput'));
 }

 export function pushNoMediaUntilApproved() {
-  pushToastError('noMediaUntilApproved', getStrippedI18n('messageRequestPendingDescription'));
+  pushToastError('noMediaUntilApproved', window.i18n.stripped('messageRequestPendingDescription'));
 }

 export function pushRateLimitHitReactions() {
--- a/ts/state/ducks/modalDialog.tsx
+++ b/ts/state/ducks/modalDialog.tsx
@ -24,6 +24,7 @@ export type EditProfileModalState = object | null;
 export type OnionPathModalState = EditProfileModalState;
 export type EnterPasswordModalState = EnterPasswordModalProps | null;
 export type DeleteAccountModalState = EditProfileModalState;
+export type OpenUrlModalState = { urlToOpen: string } | null;

 export type SessionPasswordModalState = { passwordAction: PasswordAction; onOk: () => void } | null;

@ -68,6 +69,7 @@ export type ModalState = {
  reactClearAllModalState: ReactModalsState;
  editProfilePictureModalState: EditProfilePictureModalState;
  hideRecoveryPasswordModalState: HideRecoveryPasswordModalState;
+  openUrlModal: OpenUrlModalState;
  lightBoxOptions: LightBoxOptions;
 };

@ -90,6 +92,7 @@ export const initialModalState: ModalState = {
  reactClearAllModalState: null,
  editProfilePictureModalState: null,
  hideRecoveryPasswordModalState: null,
+  openUrlModal: null,
  lightBoxOptions: null,
 };

@ -145,12 +148,15 @@ const ModalSlice = createSlice({
    updateReactClearAllModal(state, action: PayloadAction<ReactModalsState>) {
      return { ...state, reactClearAllModalState: action.payload };
    },
-    updateEditProfilePictureModel(state, action: PayloadAction<EditProfilePictureModalState>) {
+    updateEditProfilePictureModal(state, action: PayloadAction<EditProfilePictureModalState>) {
      return { ...state, editProfilePictureModalState: action.payload };
    },
-    updateHideRecoveryPasswordModel(state, action: PayloadAction<HideRecoveryPasswordModalState>) {
+    updateHideRecoveryPasswordModal(state, action: PayloadAction<HideRecoveryPasswordModalState>) {
      return { ...state, hideRecoveryPasswordModalState: action.payload };
    },
+    updateOpenUrlModal(state, action: PayloadAction<OpenUrlModalState>) {
+      return { ...state, updateOpenUrlModal: action.payload };
+    },
    updateLightBoxOptions(state, action: PayloadAction<LightBoxOptions>) {
      const lightBoxOptions = action.payload;

@ -189,8 +195,9 @@ export const {
  updateBanOrUnbanUserModal,
  updateReactListModal,
  updateReactClearAllModal,
-  updateEditProfilePictureModel,
-  updateHideRecoveryPasswordModel,
+  updateEditProfilePictureModal,
+  updateHideRecoveryPasswordModal,
+  updateOpenUrlModal,
  updateLightBoxOptions,
 } = actions;
 export const modalReducer = reducer;
--- a/ts/state/selectors/modal.ts
+++ b/ts/state/selectors/modal.ts
@ -128,6 +128,11 @@ export const getHideRecoveryPasswordModalState = createSelector(
  (state: ModalState): HideRecoveryPasswordModalState => state.hideRecoveryPasswordModalState
 );

+export const getOpenUrlModalState = createSelector(
+  getModal,
+  (state: ModalState) => state.openUrlModal
+);
+
 export const getLightBoxOptions = createSelector(
  getModal,
  (state: ModalState): LightBoxOptions => state.lightBoxOptions