SendLBC: switch from Modal to Page

static/app-strings.json

@@ -115,6 +115,7 @@
   "Recipient address": "Recipient address",
   "Send": "Send",
   "Receive Credits": "Receive Credits",
+  "Send Credits": "Send Credits",
   "Address copied.": "Address copied.",
   "Get New Address": "Get New Address",
   "Show QR code": "Show QR code",

ui/component/router/view.jsx

@@ -47,6 +47,7 @@ import ChannelNew from 'page/channelNew';
 import RepostNew from 'page/repost';
 import BuyPage from 'page/buy';
 import ReceivePage from 'page/receive';
+import SendPage from 'page/send';
 import NotificationsPage from 'page/notifications';
 import SignInWalletPasswordPage from 'page/signInWalletPassword';
 import YoutubeSyncPage from 'page/youtubeSync';
@@ -283,6 +284,7 @@ function AppRouter(props: Props) {
       <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.SEND}`} component={SendPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
 

ui/component/walletBalance/view.jsx

@@ -154,12 +154,7 @@ const WalletBalance = (props: Props) => {
           <div className="section__actions">
             <Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
             <Button button="secondary" label={__('Receive')} icon={ICONS.RECEIVE} navigate={`/$/${PAGES.RECEIVE}`} />
-            <Button
-              button="secondary"
-              label={__('Send')}
-              icon={ICONS.SEND}
-              onClick={() => doOpenModal(MODALS.WALLET_SEND)}
-            />
+            <Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
           </div>
           {(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
             <p className="help">

ui/component/walletSend/view.jsx

@@ -41,7 +41,7 @@ class WalletSend extends React.PureComponent<Props> {
 
     return (
       <Card
-        title={<LbcSymbol prefix={__('Send')} isTitle />}
+        title={__('Send Credits')}
         subtitle={
           <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
             Send LBRY Credits to your friends or favorite creators.

ui/constants/modal_types.js

@@ -31,7 +31,6 @@ export const WALLET_DECRYPT = 'wallet_decrypt';
 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 CREATE_CHANNEL = 'create_channel';
 export const YOUTUBE_WELCOME = 'youtube_welcome';
 export const SET_REFERRER = 'set_referrer';

ui/constants/pages.js

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

ui/modal/modalRouter/view.jsx

@@ -28,7 +28,6 @@ import ModalWalletUnlock from 'modal/modalWalletUnlock';
 import ModalRewardCode from 'modal/modalRewardCode';
 import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
 import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
-import ModalWalletSend from 'modal/modalWalletSend';
 import ModalYoutubeWelcome from 'modal/modalYoutubeWelcome';
 import ModalSetReferrer from 'modal/modalSetReferrer';
 import ModalSignOut from 'modal/modalSignOut';
@@ -119,8 +118,6 @@ function ModalRouter(props: Props) {
       return <ModalRewardCode {...modalProps} />;
     case MODALS.COMMENT_ACKNOWEDGEMENT:
       return <ModalCommentAcknowledgement {...modalProps} />;
-    case MODALS.WALLET_SEND:
-      return <ModalWalletSend {...modalProps} />;
     case MODALS.YOUTUBE_WELCOME:
       return <ModalYoutubeWelcome />;
     case MODALS.SET_REFERRER:

ui/modal/modalWalletSend/index.js

@@ -1,14 +0,0 @@
-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);

ui/modal/modalWalletSend/view.jsx

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

ui/page/send/index.js

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

ui/page/send/view.jsx

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

ui/scss/component/_main.scss

@@ -256,6 +256,11 @@
   }
 }
 
+.main--send {
+  @extend .main--buy;
+  max-width: 34rem;
+}
+
 .main--empty {
   align-self: center;
   display: flex;