New DAOcreator UI Embedded

package.json

@@ -78,7 +78,7 @@
     "3box": "1.16.1",
     "@burner-wallet/burner-connect-provider": "^0.1.1",
     "@daostack/client": "0.2.64",
-    "@dorgtech/daocreator-ui-v1": "^1.0.0-beta.1",
+    "@dorgtech/daocreator-ui": "^1.0.5",
     "@fortawesome/fontawesome-svg-core": "^1.2.10",
     "@fortawesome/free-brands-svg-icons": "^5.6.1",
     "@fortawesome/react-fontawesome": "^0.1.3",

src/components/DaoCreator/index.tsx

@@ -1,10 +1,10 @@
 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";
+import { enableWalletProvider, getWeb3Provider } from "arc";
 
-const DAOcreator = React.lazy(() => import("@dorgtech/daocreator-ui-v1"));
+const DAOcreator = React.lazy(() => import("@dorgtech/daocreator-ui"));
 
 interface IDispatchProps {
   showNotification: typeof showNotification;
@@ -47,18 +47,6 @@ class DaoCreator extends React.Component<IProps> {
 
             return await getWeb3Provider();
           }}
-          theme={{
-            palette: {
-              primary: {
-                main: "#122e5b",
-                contrastText: "#fafafa",
-              },
-              secondary: {
-                main: "#0076ff",
-                contrastText: "#fafafa",
-              },
-            },
-          }}
         />
       </React.Suspense>
     );

src/components/Shared/PreTransactionModal.tsx

@@ -357,6 +357,7 @@ class PreTransactionModal extends React.Component<IProps, IState> {
                           className={css.predictionAmount}
                           onChange={this.stakeOnChange}
                           placeholder="0"
+                          data-test-id="stake-input"
                         />
                         <span className={css.genLabel + " " + css.genSymbol}>GEN</span>
                         <div className={css.yourBalance}>

test/integration/proposal-genericSchemeEnsPublicResolver.ts

@@ -2,7 +2,7 @@ import * as uuid from "uuid";
 import { first } from "rxjs/operators";
 import { getArc } from "./utils";
 
-describe("Proposals ENS", () => {
+describe("Proposals ENS Resolver", () => {
   let daoAddress: string;
 
   before(async () => {

test/integration/proposal-genericSchemeEnsRegistry.ts

@@ -2,7 +2,7 @@ import * as uuid from "uuid";
 import { first } from "rxjs/operators";
 import { getArc } from "./utils";
 
-describe("Proposals ENS", () => {
+describe("Proposals ENS Registry", () => {
   let daoAddress: string;
 
   before(async () => {

test/integration/proposal-genericSchemeRegistryLookup.ts

@@ -2,19 +2,21 @@ import * as uuid from "uuid";
 import { first } from "rxjs/operators";
 import { getArc, hideCookieAcceptWindow } from "./utils";
 
-describe("Proposals ENS", () => {
+describe("Proposals Registry Lookup", () => {
 
   let url: string;
 
   beforeEach(async () => {
     await browser.url(url);
 
     await hideCookieAcceptWindow();
-    
+
     const ensTitle = await $("h2=RegistryLookup");
     await ensTitle.waitForExist();
     await ensTitle.click();
 
+    await hideCookieAcceptWindow();
+
     const createProposalButton = await $("a[data-test-id=\"createProposal\"]");
     await createProposalButton.waitForExist();
     await createProposalButton.click();

test/integration/proposal-schemeregistrar.ts

@@ -1,5 +1,5 @@
 import * as uuid from "uuid";
-import { getContractAddresses } from "./utils";
+import { getContractAddresses, hideCookieAcceptWindow } from "./utils";
 
 describe("SchemeRegistrar Proposals", () => {
   let daoAddress: string;
@@ -17,6 +17,8 @@ describe("SchemeRegistrar Proposals", () => {
     const schemeCard = await $("[data-test-id=\"schemeCard-SchemeRegistrar\"]");
     await schemeCard.click();
 
+    await hideCookieAcceptWindow();
+
     const createProposalButton = await $("a[data-test-id=\"createProposal\"]");
     await createProposalButton.waitForExist();
     await createProposalButton.click();
@@ -58,6 +60,8 @@ describe("SchemeRegistrar Proposals", () => {
     const schemeCard = await $("[data-test-id=\"schemeCard-SchemeRegistrar\"]");
     await schemeCard.click();
 
+    await hideCookieAcceptWindow();
+
     const createProposalButton = await $("a[data-test-id=\"createProposal\"]");
     await createProposalButton.waitForExist();
     await createProposalButton.click();

test/integration/proposal.ts

@@ -98,6 +98,8 @@ describe("Proposals", () => {
     const stakeButton = await proposal.$("[data-test-id=\"stakePass\"]");
     await stakeButton.waitForDisplayed();
     await stakeButton.click();
+    const stakeInput = await $("[data-test-id=\"stake-input\"]");
+    await stakeInput.setValue("10");
     launchMetaMaskButton = await $("[data-test-id=\"launch-metamask\"]");
     await launchMetaMaskButton.click();
   });

webpack.base.config.js

@@ -1,45 +1,46 @@
-const path = require('path');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
-const ENV = process.env.NODE_ENV || 'development';
-const isProd = ENV === 'production';
-const isDev = ENV === 'development';
+const ENV = process.env.NODE_ENV || "development";
+const isProd = ENV === "production";
+const isDev = ENV === "development";
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const basePath = process.cwd();
 
 module.exports = {
-  devtool: 'eval',
+  devtool: "eval",
 
   resolve: {
     // Add '.ts' and '.tsx' as resolvable extensions.
     extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
 
     alias: {
-      arc: path.resolve(basePath, 'src/arc'),
-      actions: path.resolve(basePath, 'src/actions'),
-      components: path.resolve(basePath, 'src/components'),
-      constants: path.resolve(basePath, 'src/constants'),
-      data: path.resolve(basePath, 'data'),
-      genericSchemeRegistry: path.resolve(basePath, 'src/genericSchemeRegistry'),
-      crxRegistry: path.resolve(basePath, 'src/crxRegistry'),
-      layouts: path.resolve(basePath, 'src/layouts'),
-      lib: path.resolve(basePath, 'src/lib'),
-      pages: path.resolve(basePath, 'src/pages'),
-      reducers: path.resolve(basePath, 'src/reducers'),
-      selectors: path.resolve(basePath, 'src/selectors'),
-      src: path.resolve(basePath, 'src'),
-      'ipfs-api': 'ipfs-api/dist',
-      'bn.js': 'bn.js/lib/bn.js'
-    },
+      arc: path.resolve(basePath, "src/arc"),
+      actions: path.resolve(basePath, "src/actions"),
+      components: path.resolve(basePath, "src/components"),
+      constants: path.resolve(basePath, "src/constants"),
+      data: path.resolve(basePath, "data"),
+      genericSchemeRegistry: path.resolve(basePath, "src/genericSchemeRegistry"),
+      crxRegistry: path.resolve(basePath, "src/crxRegistry"),
+      layouts: path.resolve(basePath, "src/layouts"),
+      lib: path.resolve(basePath, "src/lib"),
+      pages: path.resolve(basePath, "src/pages"),
+      reducers: path.resolve(basePath, "src/reducers"),
+      selectors: path.resolve(basePath, "src/selectors"),
+      src: path.resolve(basePath, "src"),
+      "ipfs-api": "ipfs-api/dist",
+      "bn.js": "bn.js/lib/bn.js"
+    }
   },
 
   module: {
     rules: [
       // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
       {
         test: /\.tsx?$/,
-        loader: ['react-hot-loader/webpack', "awesome-typescript-loader"],
+        loader: ["react-hot-loader/webpack", "awesome-typescript-loader"],
         exclude: [/node_modules/, /\.spec\.ts$/]
       },
 
@@ -63,53 +64,67 @@ module.exports = {
           /node_modules\/subscriptions-transport-ws/,
           /node_modules\/xhr2-cookies/,
           /node_modules\/zen-observable-ts/,
+          /node_modules\/@dorgtech/
         ]
       },
 
+      // This handle the CSS coming from dao creator
+      {
+        test: /\.css$/,
+        include: [
+          /node_modules\/@fortawesome\/fontawesome-free\/css\/all.min.css/,
+          /node_modules\/mdbreact\/dist\/css\/mdb.css/,
+          /node_modules\/@dorgtech\/daocreator-ui\/dist/
+        ],
+        use: [MiniCssExtractPlugin.loader, "css-loader"]
+      },
+
       // CSS handling
       {
         test: /\.css$/,
         include: /client/,
+        exclude: /node_modules/,
         use: [
-          'style-loader',
-          { // translates CSS into CommonJS (css-loader) and automatically generates TypeScript types
-            loader: 'typings-for-css-modules-loader',
+          "style-loader",
+          {
+            // translates CSS into CommonJS (css-loader) and automatically generates TypeScript types
+            loader: "typings-for-css-modules-loader",
             options: {
               camelCase: true,
-              localIdentName: '[name]__[local]___[hash:base64:5]',
+              localIdentName: "[name]__[local]___[hash:base64:5]",
               minimize: isProd,
               modules: true,
               namedExport: true,
               sourceMap: true
             }
-          },
-        ],
+          }
+        ]
       },
 
       // Images & fonts
       {
         test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2|ttf|eot|ico)$/,
-        loader: 'url-loader',
+        loader: "url-loader",
         options: {
           limit: 10000 // For assets smaller than 10k inline them as data urls, otherwise use regular file loader
         }
-      },
-
+      }
     ]
   },
 
   plugins: [
     new HtmlWebpackPlugin({
-      template: 'src/index.html'
+      template: "src/index.html"
     }),
     new webpack.DefinePlugin({
-      'VERSION': JSON.stringify(require('./package.json').version)
+      VERSION: JSON.stringify(require("./package.json").version)
     }),
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new MiniCssExtractPlugin()
   ],
   node: {
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty'
+    fs: "empty",
+    net: "empty",
+    tls: "empty"
   }
 };