Fallback for the SafetyNumberViewer

stylesheets/components/SafetyNumberViewer.scss

@@ -74,35 +74,8 @@
     text-align: center;
   }
 
-  &__close-button {
-    display: flex;
-    justify-content: flex-end;
-
-    button {
-      background: inherit;
-      border: none;
-      cursor: pointer;
-      padding: 0;
-
-      @include keyboard-mode {
-        &:focus {
-          border: 1px solid $color-ultramarine;
-        }
-      }
-
-      span {
-        display: inline-block;
-        height: 24px;
-        width: 24px;
-
-        @include light-theme {
-          @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
-        }
-        @include dark-theme {
-          @include color-svg('../images/icons/v2/x-24.svg', $color-gray-05);
-        }
-      }
-    }
+  &__buttons {
+    text-align: right;
   }
 
   &__button {

ts/components/CallManager.stories.tsx

@@ -21,7 +21,7 @@ import { AvatarColors } from '../types/Colors';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGroupCallVideoFrameSource';
 import { setupI18n } from '../util/setupI18n';
-import type { Props as SafetyNumberViewerProps } from '../state/smart/SafetyNumberViewer';
+import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
 import enMessages from '../../_locales/en/messages.json';
 import { ThemeType } from '../types/Util';
 
@@ -89,7 +89,7 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
   openSystemPreferencesAction: action('open-system-preferences-action'),
   playRingtone: action('play-ringtone'),
   renderDeviceSelection: () => <div />,
-  renderSafetyNumberViewer: (_: SafetyNumberViewerProps) => <div />,
+  renderSafetyNumberViewer: (_: SafetyNumberProps) => <div />,
   setGroupCallVideoRequest: action('set-group-call-video-request'),
   setIsCallActive: action('set-is-call-active'),
   setLocalAudio: action('set-local-audio'),

ts/components/SafetyNumberChangeDialog.tsx

@@ -16,7 +16,7 @@ import { isInSystemContacts } from '../util/isInSystemContacts';
 
 export type SafetyNumberProps = {
   contactID: string;
-  onClose?: () => void;
+  onClose: () => void;
 };
 
 export type Props = {
@@ -59,7 +59,7 @@ export const SafetyNumberChangeDialog = ({
 
   if (selectedContact) {
     return (
-      <Modal i18n={i18n} onClose={onClose}>
+      <Modal hasXButton i18n={i18n} onClose={onClose}>
         {renderSafetyNumber({ contactID: selectedContact.id, onClose })}
       </Modal>
     );

ts/components/SafetyNumberModal.tsx

@@ -8,7 +8,7 @@ import { SafetyNumberViewer } from './SafetyNumberViewer';
 
 type PropsType = {
   toggleSafetyNumberModal: () => unknown;
-} & SafetyNumberViewerPropsType;
+} & Omit<SafetyNumberViewerPropsType, 'onClose'>;
 
 export const SafetyNumberModal = ({
   i18n,
@@ -20,10 +20,14 @@ export const SafetyNumberModal = ({
       hasXButton
       i18n={i18n}
       moduleClassName="module-SafetyNumberViewer__modal"
-      onClose={() => toggleSafetyNumberModal()}
+      onClose={toggleSafetyNumberModal}
       title={i18n('SafetyNumberModal__title')}
     >
-      <SafetyNumberViewer i18n={i18n} {...safetyNumberViewerProps} />
+      <SafetyNumberViewer
+        i18n={i18n}
+        onClose={toggleSafetyNumberModal}
+        {...safetyNumberViewerProps}
+      />
     </Modal>
   );
 };

ts/components/SafetyNumberViewer.stories.tsx

@@ -58,7 +58,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
       ? overrideProps.verificationDisabled
       : false
   ),
-  onClose: overrideProps.onClose,
+  onClose: action('onClose'),
 });
 
 const story = storiesOf('Components/SafetyNumberViewer', module);

ts/components/SafetyNumberViewer.tsx

@@ -8,10 +8,10 @@ import { Intl } from './Intl';
 import type { LocalizerType } from '../types/Util';
 
 export type PropsType = {
-  contact?: ConversationType;
+  contact: ConversationType;
   generateSafetyNumber: (contact: ConversationType) => void;
   i18n: LocalizerType;
-  onClose?: () => void;
+  onClose: () => void;
   safetyNumber: string;
   toggleVerified: (contact: ConversationType) => void;
   verificationDisabled: boolean;
@@ -41,7 +41,16 @@ export const SafetyNumberViewer = ({
   if (!contact.phoneNumber) {
     return (
       <div className="module-SafetyNumberViewer">
-        {i18n('cannotGenerateSafetyNumber')}
+        <div>{i18n('cannotGenerateSafetyNumber')}</div>
+        <div className="module-SafetyNumberViewer__buttons">
+          <Button
+            className="module-SafetyNumberViewer__button"
+            onClick={() => onClose?.()}
+            variant={ButtonVariant.Primary}
+          >
+            {i18n('ok')}
+          </Button>
+        </div>
       </div>
     );
   }
@@ -60,13 +69,6 @@ export const SafetyNumberViewer = ({
 
   return (
     <div className="module-SafetyNumberViewer">
-      {onClose && (
-        <div className="module-SafetyNumberViewer__close-button">
-          <button onClick={onClose} tabIndex={0} type="button">
-            <span />
-          </button>
-        </div>
-      )}
       <div className="module-SafetyNumberViewer__number">
         {safetyNumber || getPlaceholder()}
       </div>

ts/state/roots/createSafetyNumberViewer.tsx

@@ -6,24 +6,14 @@ import { Provider } from 'react-redux';
 
 import type { Store } from 'redux';
 
+import type { SafetyNumberProps } from '../../components/SafetyNumberChangeDialog';
 import { SmartSafetyNumberViewer } from '../smart/SafetyNumberViewer';
 
-// Workaround: A react component's required properties are filtering up through connect()
-//   https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const FilteredSafetyNumberViewer = SmartSafetyNumberViewer as any;
-/* eslint-enable @typescript-eslint/no-explicit-any */
-
-type Props = {
-  contactID: string;
-  onClose?: () => void;
-};
-
 export const createSafetyNumberViewer = (
   store: Store,
-  props: Props
+  props: SafetyNumberProps
 ): React.ReactElement => (
   <Provider store={store}>
-    <FilteredSafetyNumberViewer {...props} />
+    <SmartSafetyNumberViewer {...props} />
   </Provider>
 );

ts/state/smart/CallManager.tsx

@@ -22,7 +22,7 @@ import { CallMode, CallState } from '../../types/Calling';
 import type { StateType } from '../reducer';
 import { missingCaseError } from '../../util/missingCaseError';
 import { SmartCallingDeviceSelection } from './CallingDeviceSelection';
-import type { Props as SafetyNumberViewerProps } from './SafetyNumberViewer';
+import type { SafetyNumberProps } from '../../components/SafetyNumberChangeDialog';
 import { SmartSafetyNumberViewer } from './SafetyNumberViewer';
 import { callingTones } from '../../util/callingTones';
 import {
@@ -41,7 +41,7 @@ function renderDeviceSelection(): JSX.Element {
   return <SmartCallingDeviceSelection />;
 }
 
-function renderSafetyNumberViewer(props: SafetyNumberViewerProps): JSX.Element {
+function renderSafetyNumberViewer(props: SafetyNumberProps): JSX.Element {
   return <SmartSafetyNumberViewer {...props} />;
 }
 

ts/state/smart/SafetyNumberViewer.tsx

@@ -5,16 +5,12 @@ import { connect } from 'react-redux';
 import { mapDispatchToProps } from '../actions';
 import { SafetyNumberViewer } from '../../components/SafetyNumberViewer';
 import type { StateType } from '../reducer';
+import type { SafetyNumberProps } from '../../components/SafetyNumberChangeDialog';
 import { getContactSafetyNumber } from '../selectors/safetyNumber';
 import { getConversationSelector } from '../selectors/conversations';
 import { getIntl } from '../selectors/user';
 
-export type Props = {
-  contactID: string;
-  onClose?: () => void;
-};
-
-const mapStateToProps = (state: StateType, props: Props) => {
+const mapStateToProps = (state: StateType, props: SafetyNumberProps) => {
   return {
     ...props,
     ...getContactSafetyNumber(state, props),