change threshold modal wip

package.json

@@ -34,7 +34,7 @@
     "@gnosis.pm/util-contracts": "2.0.1",
     "@material-ui/core": "4.1.1",
     "@material-ui/icons": "4.2.0",
-    "@welldone-software/why-did-you-render": "3.2.0",
+    "@welldone-software/why-did-you-render": "3.2.1",
     "axios": "0.19.0",
     "bignumber.js": "9.0.0",
     "connected-react-router": "^6.3.1",
@@ -92,7 +92,7 @@
     "@storybook/react": "5.1.8",
     "autoprefixer": "9.6.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "10.0.2",
     "babel-jest": "24.8.0",
     "babel-loader": "8.0.6",
     "babel-plugin-dynamic-import-node": "^2.2.0",
@@ -136,7 +136,7 @@
     "webpack": "4.34.0",
     "webpack-bundle-analyzer": "3.3.2",
     "webpack-cli": "3.3.4",
-    "webpack-dev-server": "3.7.1",
+    "webpack-dev-server": "3.7.2",
     "webpack-manifest-plugin": "^2.0.0-rc.2"
   }
 }

src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.jsx

@@ -4,11 +4,18 @@ import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
+import SelectField from '~/components/forms/SelectField'
+import MenuItem from '@material-ui/core/MenuItem'
+import {
+  composeValidators, minValue, mustBeInteger, required,
+} from '~/components/forms/validator'
+import Field from '~/components/forms/Field'
 import Hairline from '~/components/layout/Hairline'
 import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
 import Block from '~/components/layout/Block'
 import Row from '~/components/layout/Row'
+import Col from '~/components/layout/Col'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import { styles } from './style'
 
@@ -32,9 +39,40 @@ const ChangeThreshold = ({
       </IconButton>
     </Row>
     <Hairline />
-    <Block>
+    <Block className={classes.modalContent}>
       <Row>
-        Wanna change threshold?
+        <Paragraph>
+          Every transaction outside any specified daily limits, needs to be confirmed by all specified owners. If no
+          daily limits are set, all owners will need to sign for transactions.
+        </Paragraph>
+      </Row>
+      <Row>
+        <Paragraph weight="bolder">Any transaction over any daily limit requires the confirmation of:</Paragraph>
+      </Row>
+      <Row margin="xl" align="center">
+        <Col xs={2}>
+          <Field
+            name="threshold"
+            component={SelectField}
+            validate={composeValidators(required, mustBeInteger, minValue(1))}
+            data-testid="threshold-select-input"
+          >
+            {[...Array(Number(owners.size))].map((x, index) => (
+              <MenuItem key={index} value={`${index + 1}`}>
+                {index + 1}
+              </MenuItem>
+            ))}
+          </Field>
+        </Col>
+        <Col xs={10}>
+          <Paragraph size="lg" color="primary" noMargin className={classes.owners}>
+            out of
+            {' '}
+            {owners.size}
+            {' '}
+            owner(s)
+          </Paragraph>
+        </Col>
       </Row>
     </Block>
     <Hairline style={{ position: 'absolute', bottom: 85 }} />

src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.js

@@ -21,7 +21,7 @@ export const styles = () => ({
     height: '35px',
     width: '35px',
   },
-  container: {
+  modalContent: {
     padding: `${md} ${lg}`,
   },
   amount: {

yarn.lock

@@ -2409,10 +2409,10 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
-"@welldone-software/why-did-you-render@3.2.0":
+"@welldone-software/why-did-you-render@3.2.1":
-  version "3.2.0"
+  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@welldone-software/why-did-you-render/-/why-did-you-render-3.2.0.tgz#cce1cdb6c20ba1c5f9e7d34f90e63cdcaa460347"
+  resolved "https://registry.yarnpkg.com/@welldone-software/why-did-you-render/-/why-did-you-render-3.2.1.tgz#9dc6fd8f8cb1640fbd386694290dbf9244a3a354"
-  integrity sha512-88QQs6tmB6DhK3yeLiY3KYWVubIKH3GOhn7YQvzsX30AatZnKH/RTER/oLRlPgWGJmpXLTzcl5zEBetsXqmYUQ==
+  integrity sha512-7rCVpFyE5Pnm0qyO8ByWfiFAKONvq6GAUUFuGjdJiOXnsAokdotu5EJ6VDBraV1I7UiVj9+TQRbwvrfsFKU0sw==
   dependencies:
     lodash "^4"
 
@@ -3061,10 +3061,10 @@ babel-core@^7.0.0-bridge.0:
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
 
-babel-eslint@^10.0.1:
+babel-eslint@10.0.2:
-  version "10.0.1"
+  version "10.0.2"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.1.tgz#919681dc099614cd7d31d45c8908695092a1faed"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.2.tgz#182d5ac204579ff0881684b040560fdcc1558456"
-  integrity sha512-z7OT1iNV+TjOwHNLLyJk+HN+YVWX+CLE6fPD2SymJZOZQBs+QIexFjhm4keGTm8MW9xr4EC9Q0PbaLB24V5GoQ==
+  integrity sha512-UdsurWPtgiPgpJ06ryUnuaSXC2s0WoSZnQmEpbAH65XZSdwowgN5MvyP7e88nW07FYXv72erVtpBkxyDVKhH1Q==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@babel/parser" "^7.0.0"
@@ -10643,16 +10643,11 @@ loglevel-colored-level-prefix@^1.0.0:
     chalk "^1.1.3"
     loglevel "^1.4.1"
 
-loglevel@^1.4.1:
+loglevel@^1.4.1, loglevel@^1.6.3:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.3.tgz#77f2eb64be55a404c9fd04ad16d57c1d6d6b1280"
   integrity sha512-LoEDv5pgpvWgPF4kNYuIp0qqSJVWak/dML0RY74xlzMZiT9w77teNAwKYKWBTYjlokMirg+o3jBwp+vlLrcfAA==
 
-loglevel@^1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.2.tgz#668c77948a03dbd22502a3513ace1f62a80cc372"
-  integrity sha512-Jt2MHrCNdtIe1W6co3tF5KXGRkzF+TYffiQstfXa04mrss9IKXzAAXYWak8LbZseAQY03sH2GzMCMU0ZOUc9bg==
-
 looper@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/looper/-/looper-2.0.0.tgz#66cd0c774af3d4fedac53794f742db56da8f09ec"
@@ -17656,10 +17651,10 @@ webpack-dev-middleware@^3.7.0:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@3.7.1:
+webpack-dev-server@3.7.2:
-  version "3.7.1"
+  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.7.1.tgz#ce10ca0ad6cf28b03e2ce9808684a8616039155d"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.7.2.tgz#f79caa5974b7f8b63268ef5421222a8486d792f5"
-  integrity sha512-GSBjjDMQ+uJI/Rcw/NfXDq5QpfE4HviafCy2SdbJ8Q22MwsnyoHd5TbWRfxgkbklsMx+ZNgWIKK+cB28ynjiDQ==
+  integrity sha512-mjWtrKJW2T9SsjJ4/dxDC2fkFVUw8jlpemDERqV0ZJIkjjjamR2AbQlr3oz+j4JLhYCHImHnXZK5H06P2wvUew==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -17675,7 +17670,7 @@ webpack-dev-server@3.7.1:
     internal-ip "^4.3.0"
     ip "^1.1.5"
     killable "^1.0.1"
-    loglevel "^1.6.2"
+    loglevel "^1.6.3"
     opn "^5.5.0"
     p-retry "^3.0.1"
     portfinder "^1.0.20"