From ecd00554599c0d187a253a2eae6e7849b655c7e4 Mon Sep 17 00:00:00 2001
From: Oleg Silkin <o.silkin98@gmail.com>
Date: Sat, 30 Nov 2019 14:36:46 -0500
Subject: [PATCH] Implements `ChannelCreatePage`

---
 ui/page/channelCreate/index.js |  9 ++++++
 ui/page/channelCreate/view.jsx | 59 ++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 ui/page/channelCreate/index.js
 create mode 100644 ui/page/channelCreate/view.jsx

diff --git a/ui/page/channelCreate/index.js b/ui/page/channelCreate/index.js
new file mode 100644
index 000000000..9770f416f
--- /dev/null
+++ b/ui/page/channelCreate/index.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { selectBalance } from 'lbry-redux';
+import ChannelCreatePage from './view';
+
+const select = state => ({
+  balance: selectBalance(state),
+});
+
+export default connect(select, null)(ChannelCreatePage);
diff --git a/ui/page/channelCreate/view.jsx b/ui/page/channelCreate/view.jsx
new file mode 100644
index 000000000..62b6446b2
--- /dev/null
+++ b/ui/page/channelCreate/view.jsx
@@ -0,0 +1,59 @@
+// @flow
+import React, { Fragment } from 'react';
+import ChannelForm from 'component/channelForm';
+import * as PAGES from 'constants/pages';
+import Page from 'component/page';
+import Yrbl from 'component/yrbl';
+import LbcSymbol from 'component/common/lbc-symbol';
+import { useHistory } from 'react-router-dom';
+
+type Props = {
+  balance: number,
+};
+
+function ChannelCreatePage(props: Props) {
+  const { balance } = props;
+
+  function scrollToTop() {
+    const mainContent = document.querySelector('main');
+    if (mainContent) {
+      mainContent.scrollTop = 0; // It would be nice to animate this
+    }
+  }
+  let history = useHistory();
+  const returnToChannelList = () => history.push(`/$/${PAGES.CHANNELS}`);
+  return (
+    <Page>
+      {balance === 0 && (
+        <Fragment>
+          <Yrbl
+            title={__("You can't publish things quite yet")}
+            subtitle={
+              <Fragment>
+                <p>
+                  {__(
+                    'LBRY uses a blockchain, which is a fancy way of saying that users (you) are in control of your data.'
+                  )}
+                </p>
+                <p>
+                  {__('Because of the blockchain, some actions require LBRY credits')} (
+                  <LbcSymbol />
+                  ).
+                </p>
+                <p>
+                  <LbcSymbol />{' '}
+                  {__(
+                    'allows you to do some neat things, like paying your favorite creators for their content. And no company can stop you.'
+                  )}
+                </p>
+              </Fragment>
+            }
+          />
+        </Fragment>
+      )}
+      <ChannelForm scrollToTop={scrollToTop} disabled={balance === 0} onSuccess={returnToChannelList} />
+    </Page>
+  );
+}
+
+export default ChannelCreatePage;