fix: toast stripped function fetch cannot run on import

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 (

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',
         }

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} />}
     </>
   );

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>
+  );
+}

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({
+    updateOpenUrlModal({
-      title: window.i18n('urlOpen'),
+      urlToOpen,
-      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);
-      },
     })
   );
 };

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,

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}

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 })}
+      title={window.i18n.stripped('callsMissedCallFrom', { name: conversationName })}
-      description={getStrippedI18n('callsYouMissedCallPermissions', { 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'),
+    window.i18n.stripped('callsPermissionsRequired'),
-    getStrippedI18n('callsPermissionsRequiredDescription'),
+    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() {

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,
+  updateEditProfilePictureModal,
-  updateHideRecoveryPasswordModel,
+  updateHideRecoveryPasswordModal,
+  updateOpenUrlModal,
   updateLightBoxOptions,
 } = actions;
 export const modalReducer = reducer;

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