refactor wallet area

app/main.js

@@ -51,7 +51,7 @@ let daemonStopRequested = false;
 let readyToQuit = false;
 
 // If we receive a URI to open from an external app but there's no window to
-// send it to, it's cached in this variable.
+// sendCredits it to, it's cached in this variable.
 let openUri = null;
 
 function processRequestedUri(uri) {

ui/js/component/router/view.jsx

@@ -4,7 +4,9 @@ import HelpPage from "page/help";
 import ReportPage from "page/report.js";
 import StartPage from "page/start.js";
 import WalletPage from "page/wallet";
-import ShowPage from "page/showPage";
+import ReceiveCreditsPage from "page/receiveCredits";
+import SendCreditsPage from "page/sendCredits";
+import ShowPage from "page/show";
 import PublishPage from "page/publish";
 import DiscoverPage from "page/discover";
 import DeveloperPage from "page/developer.js";
@@ -35,11 +37,11 @@ const Router = props => {
     help: <HelpPage params={params} />,
     publish: <PublishPage params={params} />,
     published: <FileListPublished params={params} />,
-    receive: <WalletPage params={params} />,
+    receive: <ReceiveCreditsPage params={params} />,
     report: <ReportPage params={params} />,
     rewards: <RewardsPage params={params} />,
     search: <SearchPage params={params} />,
-    send: <WalletPage params={params} />,
+    send: <SendCreditsPage params={params} />,
     settings: <SettingsPage params={params} />,
     show: <ShowPage params={params} />,
     start: <StartPage params={params} />,

ui/js/component/walletBalance/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { connect } from "react-redux";
+import { doNavigate } from "actions/app";
+import { selectBalance } from "selectors/wallet";
+import WalletBalance from "./view";
+
+const select = state => ({
+  balance: selectBalance(state),
+});
+
+const perform = dispatch => ({
+  navigate: path => dispatch(doNavigate(path)),
+});
+
+export default connect(select, perform)(WalletBalance);

ui/js/component/walletBalance/view.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Link from "component/link";
+import { CreditAmount } from "component/common";
+
+const WalletBalance = props => {
+  const { balance, navigate } = props;
+
+  return (
+    <section className="card">
+      <div className="card__title-primary">
+        <h3>{__("Balance")}</h3>
+      </div>
+      <div className="card__content">
+        {balance && <CreditAmount amount={balance} precision={8} />}
+      </div>
+      <div className="card__content">
+        <div className="help">
+          <Link
+            onClick={() => navigate("/backup")}
+            label={__("Backup Your Wallet")}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WalletBalance;

ui/js/page/receiveCredits/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import ReceiveCreditsPage from "./view";
+
+export default connect(null, null)(ReceiveCreditsPage);

ui/js/page/receiveCredits/view.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import SubHeader from "component/subHeader";
+import WalletBalance from "component/walletBalance";
+import WalletAddress from "component/walletAddress";
+
+const ReceiveCreditsPage = props => {
+  return (
+    <main className="main--single-column">
+      <SubHeader />
+      <WalletBalance />
+      <WalletAddress />
+    </main>
+  );
+};
+
+export default ReceiveCreditsPage;

ui/js/page/sendCredits/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import SendCreditsPage from "./view";
+
+export default connect(null, null)(SendCreditsPage);

ui/js/page/sendCredits/view.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import SubHeader from "component/subHeader";
+import WalletBalance from "component/walletBalance";
+import WalletSend from "component/walletSend";
+
+const SendCreditsPage = props => {
+  return (
+    <main className="main--single-column">
+      <SubHeader />
+      <WalletBalance />
+      <WalletSend />
+    </main>
+  );
+};
+
+export default SendCreditsPage;

ui/js/page/show/view.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import lbryuri from "lbryuri";
 import { BusyMessage } from "component/common";
 import ChannelPage from "page/channel";
-import FilePage from "page/filePage";
+import FilePage from "page/file";
 
 class ShowPage extends React.PureComponent {
   componentWillMount() {

ui/js/page/wallet/index.js

@@ -1,17 +1,5 @@
 import React from "react";
 import { connect } from "react-redux";
-import { doNavigate } from "actions/app";
-import { selectCurrentPage } from "selectors/app";
-import { selectBalance } from "selectors/wallet";
 import WalletPage from "./view";
 
-const select = state => ({
+export default connect(null, null)(WalletPage);
-  currentPage: selectCurrentPage(state),
-  balance: selectBalance(state),
-});
-
-const perform = dispatch => ({
-  navigate: path => dispatch(doNavigate(path)),
-});
-
-export default connect(select, perform)(WalletPage);

ui/js/page/wallet/view.jsx

@@ -1,36 +1,14 @@
 import React from "react";
 import SubHeader from "component/subHeader";
+import WalletBalance from "component/walletBalance";
 import TransactionList from "component/transactionList";
-import WalletAddress from "component/walletAddress";
-import WalletSend from "component/walletSend";
-import Link from "component/link";
-import { CreditAmount } from "component/common";
 
 const WalletPage = props => {
-  const { balance, currentPage, navigate } = props;
-
   return (
     <main className="main--single-column">
       <SubHeader />
-      <section className="card">
+      <WalletBalance />
-        <div className="card__title-primary">
+      <TransactionList />
-          <h3>{__("Balance")}</h3>
-        </div>
-        <div className="card__content">
-          <CreditAmount amount={balance} precision={8} />
-        </div>
-        <div className="card__content">
-          <div className="help">
-            <Link
-              onClick={() => navigate("/backup")}
-              label={__("Backup Your Wallet")}
-            />
-          </div>
-        </div>
-      </section>
-      {currentPage === "wallet" ? <TransactionList {...props} /> : ""}
-      {currentPage === "send" ? <WalletSend {...props} /> : ""}
-      {currentPage === "receive" ? <WalletAddress /> : ""}
     </main>
   );
 };