Merge pull request #1536 from daostack/dev

release 0.10.3

.eslintrc

@@ -27,6 +27,7 @@
         "@typescript-eslint/no-explicit-any": "off",
         "max-len": "off",
         "react/display-name" : "off",
+        "sort-imports": "off",
         /**
          * convert to error when all have been manually fixed
          */
@@ -59,15 +60,15 @@
         "no-unused-vars": "off", // to not interfere with @typescript just below
         "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "[_].*" }],
         "quotes": ["error", "double"],
-        "import/order": "error",
-        "import/newline-after-import": "error",
+        // "import/order": "error",
+        // "import/newline-after-import": "error",
         "comma-dangle": ["error" ,"always-multiline"],
         "semi": ["error", "always"],
         "eol-last": "error",
         "eqeqeq": "error",
     },
     "parser": "@typescript-eslint/parser",
-    "plugins": ["@typescript-eslint", "react", "import"],
+    "plugins": ["@typescript-eslint", "react"],
     "parserOptions": {
       "project": "./tsconfig.eslint.json"
     }

CHANGELOG.md

@@ -1,10 +1,15 @@
-### template
+## 0.10.3
   - Features Added
+    - Add support for Torus wallet
+    - New embedded UI for creating DAOs
+
   - Bugs Fixed
+    - On the All DAOS page, make sure the filter finds all DAOs even if they have not yet been loaded on the client
+    - Fix error when navigating to the All Redemptions when there exist more than 100 DAOs.
 
 ## 0.10.2
   - Features Added
-    - Fix bug when entering numbers for uint256 data types in the GenericScheme new proposal modal
+    - Fix bug when entering numbers for uint256 data types in the GenericScheme new proposal modal 
     - New busy waiting animation
 
   - Bugs Fixed

app.json

@@ -3,6 +3,10 @@
   "description": "",
   "scripts": {},
   "env": {
+    "NODE_OPTIONS": {
+      "required": true,
+      "value": "--max_old_space_size=2560"
+    },
     "NODE_ENV": {
       "required": true,
       "value": "staging"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alchemy-client",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "An app for collaborative networks (DAOs), based on the DAO stack.",
   "author": "DAOstack",
   "license": "GPL-3.0",
@@ -78,12 +78,13 @@
     "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",
     "@portis/web3": "^2.0.0-beta.43",
     "@sentry/browser": "^5.0.8",
+    "@toruslabs/torus-embed": "^1.2.3",
     "@walletconnect/web3-provider": "^1.0.0-beta.37",
     "axios": "^0.19.0",
     "bn.js": "^4.11.8",
@@ -140,7 +141,7 @@
     "ts-node": "^5.0.1",
     "utility-types": "^3.7.0",
     "web3": "1.2.4",
-    "web3connect": "^1.0.0-beta.29",
+    "web3modal": "^1.1.0",
     "webpack": "^4.36.1",
     "ws": "^7.1.0"
   },
@@ -197,7 +198,7 @@
     "copy-webpack-plugin": "^5.1.1",
     "cross-env": "^5.1.3",
     "eslint": "^6.4.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-react": "^7.14.3",
     "html-webpack-plugin": "^3.0.6",
     "identity-obj-proxy": "^3.0.0",

src/arc.ts

@@ -1,12 +1,11 @@
 import { NotificationStatus } from "reducers/notifications";
-import { IProviderInfo } from "web3connect/lib/helpers/types";
+import { getNetworkId, getNetworkName } from "./lib/util";
+import { settings, USE_CONTRACTINFOS_CACHE } from "./settings";
+import { IProviderInfo } from "web3modal/lib/helpers/types";
 import { RetryLink } from "apollo-link-retry";
 import { Address, Arc } from "@daostack/client";
-import Web3Connect from "web3connect";
+import Web3Modal, { getProviderInfo } from "web3modal";
 import { Observable } from "rxjs";
-import { getNetworkId, getNetworkName } from "./lib/util";
-import { settings, USE_CONTRACTINFOS_CACHE } from "./settings";
-
 
 const Web3 = require("web3");
 
@@ -17,7 +16,7 @@ const Web3 = require("web3");
 let selectedProvider: any;
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
-let web3ConnectCore: Web3Connect.Core;
+let web3Modal: Web3Modal;
 let initializedAccount: Address;
 
 export type Networks = "main"|"rinkeby"|"ganache"|"xdai"
@@ -113,8 +112,8 @@ async function getProviderNetworkName(provider?: any): Promise<string> {
  * Does not know about the default read-only providers.
  */
 export function getWeb3ProviderInfo(provider?: any): IWeb3ProviderInfo {
-  provider = provider ? provider : selectedProvider;
-  return provider ? Web3Connect.getProviderInfo(provider) : null;
+  provider = provider || selectedProvider;
+  return provider ? getProviderInfo(provider) : null;
 }
 
 /**
@@ -261,8 +260,8 @@ export function uncacheWeb3Info(accountToo = true): void {
   if (accountToo) {
     localStorage.removeItem(ACCOUNT_STORAGEKEY);
   }
-  if (web3ConnectCore) {
-    web3ConnectCore.clearCachedProvider();
+  if (web3Modal) {
+    web3Modal.clearCachedProvider();
   }
   /**
      * close is not yet a standard, but soon will be.
@@ -310,10 +309,10 @@ async function enableWeb3Provider(): Promise<void> {
   let provider: any;
   // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore
-  let web3Connect: Web3Connect.Core;
+  let _web3Modal: Web3ConnectModal;
 
-  if (!web3ConnectCore) {
-    web3Connect = new Web3Connect.Core({
+  if (!web3Modal) {
+    _web3Modal = new Web3Modal({
       cacheProvider: true,
       providerOptions: Object.assign(
         /**
@@ -327,9 +326,9 @@ async function enableWeb3Provider(): Promise<void> {
     });
 
     // eslint-disable-next-line require-atomic-updates
-    web3ConnectCore = web3Connect;
+    web3Modal = _web3Modal;
   } else {
-    web3Connect = web3ConnectCore;
+    _web3Modal = web3Modal;
   }
 
   let resolveOnClosePromise: () => void;
@@ -339,29 +338,29 @@ async function enableWeb3Provider(): Promise<void> {
     (resolve: () => void, reject: (reason?: any) => void): any => {
       resolveOnClosePromise = resolve;
       rejectOnClosePromise = reject;
-      web3Connect.on("close", (): any => {
+      _web3Modal.on("close", (): any => {
         return resolve();
       });
     });
 
-  web3Connect.on("error", (error: Error): any => {
+  _web3Modal.on("error", (error: Error): any => {
     // eslint-disable-next-line no-console
     console.error(`web3Connect closed on error:  ${error ? error.message : "cancelled or unknown error"}`);
     return rejectOnClosePromise(error);
   });
 
-  web3Connect.on("connect", (newProvider: any): any => {
+  _web3Modal.on("connect", (newProvider: any): any => {
     provider = newProvider;
     /**
-         * Because we won't receive the "close" event in this case, even though
-         * the window will have closed
-         */
+     * Because we won't receive the "close" event in this case, even though
+     * the window will have closed
+     */
     return resolveOnClosePromise();
   });
 
   try {
     // note this will load from its cache, if present
-    web3Connect.toggleModal();
+    _web3Modal.toggleModal();
     // assuming reject will result in a throw exception caught below
     await onClosePromise;
 
@@ -588,7 +587,7 @@ export function pollForAccountChanges(currentAccountAddress: Address | null, int
 }
 
 /**
- * extension of the Web3Connect IProviderInfo
+ * extension of the Web3Modal IProviderInfo
  */
 export interface IWeb3ProviderInfo extends IProviderInfo {
 }

src/assets/styles/global.scss

@@ -1,19 +1,19 @@
-@import 'rc-tooltip';
-@import 'toggle';
+@import "rc-tooltip";
+@import "toggle";
 
 :global html {
-	min-height: 100%;
-	position: relative;
-	width: 100%;
+  min-height: 100%;
+  position: relative;
+  width: 100%;
 }
 
 :global body {
-	background-color: rgba(229, 235, 242, 1.000);
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-	color: $black;
+  background-color: rgba(229, 235, 242, 1);
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  color: $black;
 }
 
 :global(.clearfix:after) {
@@ -23,10 +23,10 @@
 }
 
 /**
- * the Web3Connect popup
+ * the Web3Modal popup
  */
 :global div#WEB3_CONNECT_MODAL_ID > div {
-  z-index: 10000000;
+  z-index: 99999;
 }
 
 /**

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 { Prompt } from "react-router-dom";
 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/Daos/DaosPage.tsx

@@ -14,6 +14,7 @@ import { Link } from "react-router-dom";
 import { IRootState } from "reducers";
 import { IProfileState } from "reducers/profilesReducer";
 import { combineLatest, of } from "rxjs";
+import { first } from "rxjs/operators";
 
 import DaoCard from "./DaoCard";
 import * as css from "./Daos.scss";
@@ -36,6 +37,7 @@ type IProps = IStateProps & ISubscriptionProps<SubscriptionData>;
 
 interface IState {
   search: string;
+  searchDaos: DAO[];
 }
 
 const PAGE_SIZE = 50;
@@ -47,6 +49,7 @@ class DaosPage extends React.Component<IProps, IState> {
 
     this.state = {
       search: "",
+      searchDaos: [],
     };
   }
 
@@ -56,15 +59,41 @@ class DaosPage extends React.Component<IProps, IState> {
     });
   }
 
-  onSearchChange = (e: any) => {
-    this.setState({ search: e.target.value });
+  onSearchChange = async (e: any) => {
+    const searchString = e.target.value;
+
+    this.setState({ search: searchString });
+
+    // If search string greater than 2 search on server for any other DAOs not yet loaded that match this search
+    if (searchString.length > 2) {
+      const arc = getArc();
+      const foundDaos = await combineLatest(
+        // eslint-disable-next-line @typescript-eslint/camelcase
+        arc.daos({ orderBy: "name", orderDirection: "asc", where: { name_contains: searchString } }, { fetchAllData: true }),
+        // eslint-disable-next-line @typescript-eslint/camelcase
+        arc.daos({ orderBy: "name", orderDirection: "asc", where: { name_contains: searchString.charAt(0).toUpperCase() + searchString.slice(1) } }, { fetchAllData: true }),
+        (data1, data2) => data1.concat(data2),
+      ).pipe(first()).toPromise();
+      this.setState({ searchDaos: foundDaos });
+    } else {
+      this.setState({ searchDaos: [] });
+    }
   }
 
   public render(): RenderOutput {
     const { currentAccountProfile, data, fetchMore } = this.props;
-    const search = this.state.search.toLowerCase();
+    const search = this.state.search.length > 2 ? this.state.search.toLowerCase() : "";
 
-    const allDAOs = data[0];
+    let allDAOs = data[0];
+
+    // Add any DAOs found from searching the server to the list
+    if (this.state.searchDaos.length > 0) {
+      // make sure we don't add duplicate DAOs to the list
+      const extraFoundDaos = this.state.searchDaos.filter((dao) => {
+        return !allDAOs.find((d) => d.id === dao.id);
+      });
+      allDAOs = allDAOs.concat(extraFoundDaos);
+    }
 
     // Always show Genesis Alpha first
     let finalDAOList = allDAOs.filter((d: DAO) => d.staticState.name === "Genesis Alpha" && d.staticState.name.toLowerCase().includes(search));

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}>