DAOcreator Embed (#1264)

package.json

@@ -75,6 +75,7 @@
   "dependencies": {
     "3box": "^1.16.1",
     "@daostack/client": "0.2.59",
+    "@dorgtech/daocreator-ui-v1": "^0.2.0-rc.20",
     "@fortawesome/fontawesome-svg-core": "^1.2.10",
     "@fortawesome/free-brands-svg-icons": "^5.6.1",
     "@fortawesome/react-fontawesome": "^0.1.3",

src/App.tsx

@@ -97,6 +97,7 @@ export class App extends React.Component<{}, {
                 <Route path="/daos" component={AppContainer}/>
                 <Route path="/profile" component={AppContainer}/>
                 <Route path="/redemptions" component={AppContainer}/>
+                <Route path="/daos/create" component={AppContainer} />
                 <Route component={Error404} />
                 <Redirect from="/*" to="/Error404" />
               </Switch>

src/components/DaoCreator/index.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { Prompt } from "react-router";
+import { enableWalletProvider, getWeb3Provider } from "arc";
+import { showNotification } from "reducers/notifications";
+
+const DAOcreator = React.lazy(() => import("@dorgtech/daocreator-ui-v1"));
+
+interface IDispatchProps {
+  showNotification: typeof showNotification;
+}
+
+type IProps = IDispatchProps;
+
+const mapDispatchToProps = {
+  showNotification,
+};
+
+class DaoCreator extends React.Component<IProps> {
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  componentDidMount() {
+    // Block page refesh & closing
+    window.onbeforeunload = () => true;
+  }
+
+  componentWillUnmount() {
+    // Unblock page refresh & closing
+    window.onbeforeunload = undefined;
+  }
+
+  render() {
+    return (
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <Prompt
+          when
+          message={"Are you sure you want to leave?"}
+        />
+        <DAOcreator
+          setWeb3Provider={async (): Promise<any> => {
+            if (!await enableWalletProvider({ showNotification: this.props.showNotification })) {
+              return undefined;
+            }
+
+            return await getWeb3Provider();
+          }}
+          theme={{
+            palette: {
+              primary: {
+                main: "#122e5b",
+                contrastText: "#fafafa",
+              },
+              secondary: {
+                main: "#0076ff",
+                contrastText: "#fafafa",
+              },
+            },
+          }}
+        />
+      </React.Suspense>
+    );
+  }
+}
+
+export default connect(null, mapDispatchToProps)(DaoCreator);

src/components/Daos/Daos.scss

@@ -155,6 +155,23 @@ table.daoInfoContainer {
   }
 }
 
+.createDaoWrapper {
+  border-radius: 15px;
+  background-color: rgba(3, 118, 255, 1.000);
+  color: $white;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 30px;
+  line-height: 30px;
+  font-family: $body-font;
+  font-weight: $bold;
+  font-size: 13px;
+  margin-right: 55px;
+  margin-top: 16px;
+  float: right;
+  position: relative;
+}
+
 @media only screen and (max-width: 550px) {
 	.wrapper {
 		width: auto;

src/components/Daos/DaosPage.tsx

@@ -7,6 +7,7 @@ import { Page } from "pages";
 import { BreadcrumbsItem } from "react-breadcrumbs-dynamic";
 import * as React from "react";
 import * as Sticky from "react-stickynode";
+import { Link } from "react-router-dom";
 import DaoCard from "./DaoCard";
 import * as css from "./Daos.scss";
 
@@ -51,6 +52,11 @@ class DaosPage extends React.Component<IProps, null> {
           <div className={css.daoListHeader + " clearfix"}>
             <h2 data-test-id="header-all-daos">All DAOs</h2>
           </div>
+          <Link to={"/daos/create"}>
+            <div className={css.createDaoWrapper}>
+              Create A DAO
+            </div>
+          </Link>
         </Sticky>
         <div className={css.daoList}>
           {daoNodes ? daoNodes : "None"}

src/layouts/AppContainer.tsx

@@ -7,6 +7,7 @@ import AccountProfilePage from "components/Account/AccountProfilePage";
 import DaosPage from "components/Daos/DaosPage";
 import MinimizedNotifications from "components/Notification/MinimizedNotifications";
 import Notification, { NotificationViewStatus } from "components/Notification/Notification";
+import DaoCreator from "components/DaoCreator";
 import DaoContainer from "components/Dao/DaoContainer";
 import FeedPage from "components/Feed/FeedPage";
 import RedemptionsPage from "components/Redemptions/RedemptionsPage";
@@ -211,6 +212,7 @@ class AppContainer extends React.Component<IProps, IState> {
 
             <div className={css.contentWrapper}>
               <Switch>
+                <Route path="/daos/create" component={DaoCreator} />
                 <Route path="/dao/:daoAvatarAddress" component={DaoContainer} />
                 <Route path="/profile/:accountAddress" component={AccountProfilePage} />
                 <Route path="/redemptions" component={RedemptionsPage} />

src/layouts/SidebarMenu.tsx

@@ -245,6 +245,7 @@ class SidebarMenu extends React.Component<IProps, IStateProps> {
               </li>
               <li><a className="externalLink" href="https://daostack.zendesk.com/hc" target="_blank" rel="noopener noreferrer">Help Center</a></li>
               <li><a className="externalLink" href="https://hub.gendao.org/" target="_blank" rel="noopener noreferrer">Get Involved</a></li>
+              <li><Link to="/daos/create" onClick={this.handleCloseMenu}>Create A DAO</Link></li>
               <li><Link to="/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</Link></li>
               <li className={css.daoStack}>
                 <a className="externalLink" href="http://daostack.io" target="_blank" rel="noopener noreferrer">