add sign out confirmation modal for desktop

ui/component/header/index.js

@@ -25,9 +25,7 @@ const perform = dispatch => ({
   signOut: () => dispatch(doSignOut()),
   openMobileNavigation: () => dispatch(doOpenModal(MODALS.MOBILE_NAVIGATION)),
   openChannelCreate: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)),
+  openSignOutModal: () => dispatch(doOpenModal(MODALS.SIGN_OUT)),
 });
 
-export default connect(
-  select,
-  perform
-)(Header);
+export default connect(select, perform)(Header);

ui/component/header/view.jsx

@@ -39,6 +39,7 @@ type Props = {
   signOut: () => void,
   openMobileNavigation: () => void,
   openChannelCreate: () => void,
+  openSignOutModal: () => void,
 };
 
 const Header = (props: Props) => {
@@ -56,6 +57,7 @@ const Header = (props: Props) => {
     syncError,
     openMobileNavigation,
     openChannelCreate,
+    openSignOutModal,
   } = props;
 
   // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
@@ -175,7 +177,7 @@ const Header = (props: Props) => {
                     </MenuItem>
 
                     {authenticated ? (
-                      <MenuItem onSelect={signOut}>
+                      <MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
                         <div className="menu__link">
                           <Icon aria-hidden icon={ICONS.SIGN_OUT} />
                           {__('Sign Out')}

ui/constants/modal_types.js

@@ -36,3 +36,4 @@ export const YOUTUBE_WELCOME = 'youtube_welcome';
 export const MOBILE_NAVIGATION = 'mobile_navigation';
 export const SET_REFERRER = 'set_referrer';
 export const REPOST = 'repost';
+export const SIGN_OUT = 'sign_out';

ui/modal/modalRouter/view.jsx

@@ -35,6 +35,7 @@ import ModalCreateChannel from 'modal/modalChannelCreate';
 import ModalMobileNavigation from 'modal/modalMobileNavigation';
 import ModalSetReferrer from 'modal/modalSetReferrer';
 import ModalRepost from 'modal/modalRepost';
+import ModalSignOut from 'modal/modalSignOut';
 
 type Props = {
   modal: { id: string, modalProps: {} },
@@ -128,6 +129,8 @@ function ModalRouter(props: Props) {
       return <ModalSetReferrer {...modalProps} />;
     case MODALS.REPOST:
       return <ModalRepost {...modalProps} />;
+    case MODALS.SIGN_OUT:
+      return <ModalSignOut {...modalProps} />;
     default:
       return null;
   }

ui/modal/modalSignOut/index.js

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { doSignOut, doHideModal } from 'redux/actions/app';
+import ModalSignOut from './view';
+
+export default connect(null, {
+  doSignOut,
+  doHideModal,
+})(ModalSignOut);

ui/modal/modalSignOut/view.jsx

@@ -0,0 +1,33 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import Card from 'component/common/card';
+import Button from 'component/button';
+
+type Props = {
+  doHideModal: () => void,
+  doSignOut: () => void,
+};
+
+function ModalRepost(props: Props) {
+  const { doHideModal, doSignOut } = props;
+
+  return (
+    <Modal isOpen type="card">
+      <Card
+        title={__('Sign Out')}
+        subtitle={__(
+          'Are you sure you want to sign out? Your wallet data will be merged with another account if they sign in on this device.'
+        )}
+        actions={
+          <div className="section__actions">
+            <Button button="primary" label={__('Sign Out')} onClick={doSignOut} />
+            <Button button="link" label={__('Cancel')} onClick={doHideModal} />
+          </div>
+        }
+      />
+    </Modal>
+  );
+}
+
+export default ModalRepost;