ReceiveLBC: switch from Modal to Page

ui/component/router/view.jsx

@@ -46,6 +46,7 @@ import CheckoutPage from 'page/checkoutPage';
 import ChannelNew from 'page/channelNew';
 import RepostNew from 'page/repost';
 import BuyPage from 'page/buy';
+import ReceivePage from 'page/receive';
 import NotificationsPage from 'page/notifications';
 import SignInWalletPasswordPage from 'page/signInWalletPassword';
 import YoutubeSyncPage from 'page/youtubeSync';
@@ -281,6 +282,7 @@ function AppRouter(props: Props) {
       <PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamSetupPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
+      <PrivateRoute {...props} path={`/$/${PAGES.RECEIVE}`} component={ReceivePage} />
       <PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
 

ui/component/walletAddress/view.jsx

@@ -4,10 +4,9 @@ import Button from 'component/button';
 import CopyableText from 'component/copyableText';
 import QRCode from 'component/common/qr-code';
 import Card from 'component/common/card';
-import LbcSymbol from 'component/common/lbc-symbol';
 
 type Props = {
-  checkAddressIsMine: string => void,
+  checkAddressIsMine: (string) => void,
   receiveAddress: string,
   getNewAddress: () => void,
   gettingNewAddress: boolean,
@@ -49,7 +48,7 @@ class WalletAddress extends React.PureComponent<Props, State> {
 
     return (
       <Card
-        title={<LbcSymbol prefix={__('Receive')} isTitle />}
+        title={__('Receive Credits')}
         subtitle={__('Use this address to receive LBRY Credits.')}
         actions={
           <React.Fragment>

ui/component/walletBalance/view.jsx

@@ -17,7 +17,7 @@ type Props = {
   claimsBalance: number,
   supportsBalance: number,
   tipsBalance: number,
-  doOpenModal: string => void,
+  doOpenModal: (string) => void,
   hasSynced: boolean,
   doFetchUtxoCounts: () => void,
   doUtxoConsolidate: () => void,
@@ -153,12 +153,7 @@ const WalletBalance = (props: Props) => {
           {/* @endif */}
           <div className="section__actions">
             <Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
-            <Button
+            <Button button="secondary" label={__('Receive')} icon={ICONS.RECEIVE} navigate={`/$/${PAGES.RECEIVE}`} />
-              button="secondary"
-              label={__('Receive')}
-              icon={ICONS.RECEIVE}
-              onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
-            />
             <Button
               button="secondary"
               label={__('Send')}

ui/component/yrblWalletEmpty/index.js

@@ -1,12 +1,9 @@
 import { connect } from 'react-redux';
 import { selectBalance } from 'lbry-redux';
-import { doOpenModal } from 'redux/actions/app';
 import Wallet from './view';
 
-const select = state => ({
+const select = (state) => ({
   balance: selectBalance(state),
 });
 
-export default connect(select, {
+export default connect(select, {})(Wallet);
-  doOpenModal,
-})(Wallet);

ui/component/yrblWalletEmpty/view.jsx

@@ -1,6 +1,5 @@
 // @flow
 import type { Node } from 'react';
-import * as MODALS from 'constants/modal_types';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import React from 'react';
@@ -13,10 +12,9 @@ type Props = {
   includeWalletLink: boolean,
   type?: string,
   actions?: Node,
-  doOpenModal: string => void,
 };
 export default function YrblHelp(props: Props) {
-  const { includeWalletLink = false, type = 'sad', doOpenModal } = props;
+  const { includeWalletLink = false, type = 'sad' } = props;
 
   return (
     <div className="main--empty">
@@ -47,7 +45,7 @@ export default function YrblHelp(props: Props) {
                 icon={ICONS.RECEIVE}
                 button="secondary"
                 label={__('Your Address')}
-                onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
+                navigate={`/$/${PAGES.RECEIVE}`}
               />
             )}
           </div>

ui/constants/modal_types.js

@@ -32,7 +32,6 @@ export const WALLET_UNLOCK = 'wallet_unlock';
 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 CREATE_CHANNEL = 'create_channel';
 export const YOUTUBE_WELCOME = 'youtube_welcome';
 export const SET_REFERRER = 'set_referrer';

ui/constants/pages.js

@@ -57,6 +57,7 @@ exports.CREATOR_DASHBOARD = 'dashboard';
 exports.CHECKOUT = 'checkout';
 exports.CODE_2257 = '2257';
 exports.BUY = 'buy';
+exports.RECEIVE = 'receive';
 exports.CHANNEL_NEW = 'channel/new';
 exports.NOTIFICATIONS = 'notifications';
 exports.YOUTUBE_SYNC = 'youtube';

ui/modal/modalRouter/view.jsx

@@ -29,7 +29,6 @@ import ModalRewardCode from 'modal/modalRewardCode';
 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';
 import ModalSetReferrer from 'modal/modalSetReferrer';
 import ModalSignOut from 'modal/modalSignOut';
@@ -122,8 +121,6 @@ function ModalRouter(props: Props) {
       return <ModalCommentAcknowledgement {...modalProps} />;
     case MODALS.WALLET_SEND:
       return <ModalWalletSend {...modalProps} />;
-    case MODALS.WALLET_RECEIVE:
-      return <ModalWalletReceive {...modalProps} />;
     case MODALS.YOUTUBE_WELCOME:
       return <ModalYoutubeWelcome />;
     case MODALS.SET_REFERRER:

ui/modal/modalWalletReceive/index.js

@@ -1,14 +0,0 @@
-import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
-import WalletReceive from './view';
-
-const select = state => ({});
-
-const perform = {
-  doHideModal,
-};
-
-export default connect(
-  select,
-  perform
-)(WalletReceive);

ui/modal/modalWalletReceive/view.jsx

@@ -1,16 +0,0 @@
-// @flow
-import React from 'react';
-import WalletAddress from 'component/walletAddress';
-import { Modal } from 'modal/modal';
-
-type Props = { doHideModal: () => void };
-
-const WalletAddressPage = (props: Props) => {
-  const { doHideModal } = props;
-  return (
-    <Modal isOpen type="card" onAborted={doHideModal}>
-      <WalletAddress />
-    </Modal>
-  );
-};
-export default WalletAddressPage;

ui/page/receive/index.js

@@ -0,0 +1,6 @@
+import { connect } from 'react-redux';
+import ReceivePage from './view';
+
+const select = (state) => ({});
+
+export default connect(select, {})(ReceivePage);

ui/page/receive/view.jsx

@@ -0,0 +1,26 @@
+// @flow
+import React from 'react';
+import Page from 'component/page';
+import LbcSymbol from 'component/common/lbc-symbol';
+import WalletAddress from 'component/walletAddress';
+
+type Props = {};
+
+export default function ReceivePage(props: Props) {
+  return (
+    <Page
+      noSideNavigation
+      className="main--buy"
+      backout={{
+        backoutLabel: __('Done'),
+        title: (
+          <>
+            <LbcSymbol prefix={__('Receive')} size={28} />
+          </>
+        ),
+      }}
+    >
+      <WalletAddress />
+    </Page>
+  );
+}