diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx
index e7c286e67..a8343348e 100644
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@@ -15,6 +15,9 @@ import FileViewer from 'component/fileViewer';
import { withRouter } from 'react-router';
import usePrevious from 'effects/use-previous';
import Button from 'component/button';
+// @if TARGET='web'
+import YoutubeWelcome from 'component/youtubeWelcome';
+// @endif
export const MAIN_WRAPPER_CLASS = 'main-wrapper';
// @if TARGET='app'
@@ -194,6 +197,10 @@ function App(props: Props) {
+ {/* @if TARGET='web' */}
+
+ {/* @endif */}
+
{/* @if TARGET='app' */}
{showUpgradeButton && (
diff --git a/ui/component/youtubeWelcome/index.js b/ui/component/youtubeWelcome/index.js
new file mode 100644
index 000000000..f05d0ad7f
--- /dev/null
+++ b/ui/component/youtubeWelcome/index.js
@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { doOpenModal } from 'redux/actions/app';
+import YoutubeWelcome from './view';
+
+export default connect(
+ null,
+ {
+ doOpenModal,
+ }
+)(YoutubeWelcome);
diff --git a/ui/component/youtubeWelcome/view.jsx b/ui/component/youtubeWelcome/view.jsx
new file mode 100644
index 000000000..e149d6719
--- /dev/null
+++ b/ui/component/youtubeWelcome/view.jsx
@@ -0,0 +1,24 @@
+// @flow
+import * as MODALS from 'constants/modal_types';
+import React from 'react';
+import usePersistedState from 'effects/use-persisted-state';
+
+type Props = { doOpenModal: string => void };
+
+const YoutubeWelcome = (props: Props) => {
+ const { doOpenModal } = props;
+ const [hasBeenShownIntro, setHasBeenShownIntro] = usePersistedState('youtube-welcome', false);
+ const isYouTubeReferrer = document.referrer.includes('youtube.com');
+ const shouldShowWelcome = !hasBeenShownIntro && isYouTubeReferrer;
+
+ React.useEffect(() => {
+ if (shouldShowWelcome) {
+ doOpenModal(MODALS.YOUTUBE_WELCOME);
+ setHasBeenShownIntro(true);
+ }
+ }, [shouldShowWelcome, setHasBeenShownIntro, doOpenModal]);
+
+ return null;
+};
+
+export default YoutubeWelcome;
diff --git a/ui/constants/modal_types.js b/ui/constants/modal_types.js
index 9c63b9957..a082e000f 100644
--- a/ui/constants/modal_types.js
+++ b/ui/constants/modal_types.js
@@ -31,3 +31,4 @@ export const WALLET_SYNC = 'wallet_sync';
export const WALLET_PASSWORD_UNSAVE = 'wallet_password_unsave';
export const WALLET_SEND = 'wallet_send';
export const WALLET_RECEIVE = 'wallet_receive';
+export const YOUTUBE_WELCOME = 'youtube_welcome';
diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx
index 0016b72b4..8f7a7a748 100644
--- a/ui/modal/modalRouter/view.jsx
+++ b/ui/modal/modalRouter/view.jsx
@@ -29,6 +29,7 @@ import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
import ModalWalletSend from 'modal/modalWalletSend';
import ModalWalletReceive from 'modal/modalWalletReceive';
+import ModalYoutubeWelcome from 'modal/modalYoutubeWelcome';
type Props = {
modal: { id: string, modalProps: {} },
@@ -105,6 +106,8 @@ function ModalRouter(props: Props) {
return ;
case MODALS.WALLET_RECEIVE:
return ;
+ case MODALS.YOUTUBE_WELCOME:
+ return ;
default:
return null;
}
diff --git a/ui/modal/modalYoutubeWelcome/index.js b/ui/modal/modalYoutubeWelcome/index.js
new file mode 100644
index 000000000..fe7889090
--- /dev/null
+++ b/ui/modal/modalYoutubeWelcome/index.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import WalletSend from './view';
+
+const select = state => ({});
+
+const perform = {
+ doHideModal,
+};
+
+export default connect(
+ select,
+ perform
+)(WalletSend);
diff --git a/ui/modal/modalYoutubeWelcome/view.jsx b/ui/modal/modalYoutubeWelcome/view.jsx
new file mode 100644
index 000000000..4898b2b7c
--- /dev/null
+++ b/ui/modal/modalYoutubeWelcome/view.jsx
@@ -0,0 +1,27 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import Card from 'component/common/card';
+import Confetti from 'react-confetti';
+import Button from 'component/button';
+
+type Props = { doHideModal: () => void };
+
+const YoutubeWelcome = (props: Props) => {
+ const { doHideModal } = props;
+
+ return (
+
+
+ }
+ />
+
+ );
+};
+
+export default YoutubeWelcome;