diff --git a/package.json b/package.json index 4862c2c7..78993247 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "material-ui-search-bar": "^1.0.0-beta.13", "notistack": "https://github.com/gnosis/notistack.git#v0.9.4", "optimize-css-assets-webpack-plugin": "5.0.3", + "polish": "^0.2.3", "qrcode.react": "1.0.0", "react": "16.12.0", "react-dom": "16.12.0", diff --git a/src/components/CookiesBanner/index.jsx b/src/components/CookiesBanner/index.jsx index 3ba1fb81..6c76a3cc 100644 --- a/src/components/CookiesBanner/index.jsx +++ b/src/components/CookiesBanner/index.jsx @@ -126,6 +126,7 @@ We use cookies to give you the best
setLocalNecessary((prev) => !prev)} diff --git a/src/components/Root/index.js b/src/components/Root/index.js index 8cfba635..cf91fb57 100644 --- a/src/components/Root/index.js +++ b/src/components/Root/index.js @@ -11,7 +11,6 @@ import Loader from '../Loader' import { history, store } from '~/store' import theme from '~/theme/mui' import AppRoutes from '~/routes' - import './index.scss' const Root = () => ( diff --git a/src/components/Root/index.scss b/src/components/Root/index.scss index 2bf39fde..ecc20309 100644 --- a/src/components/Root/index.scss +++ b/src/components/Root/index.scss @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + html, body { height: 100%; @@ -9,32 +13,34 @@ body { font-style: normal; font-weight: 400; font-display: swap; - src: local("Averta-Regular"), url(../../assets/fonts/Averta-normal.woff2) format('woff2'); + src: local("Averta-Regular"), + url(../../assets/fonts/Averta-normal.woff2) format("woff2"); } @font-face { - font-family: 'Averta'; + font-family: "Averta"; font-style: normal; font-weight: 800; font-display: swap; - src: local("Averta-Extrabold"), url(../../assets/fonts/Averta-ExtraBold.woff2) format('woff2'); + src: local("Averta-Extrabold"), + url(../../assets/fonts/Averta-ExtraBold.woff2) format("woff2"); } body { - position: absolute; - bottom: 0; - top: 0; - left: 0; - right: 0; - overflow-x: hidden; - color: $fontColor; - font-family: 'Averta', monospace; - font-size: $mediumFontSize; - margin: 0; - background-color: $background; - text-rendering: geometricPrecision; - -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background-color: $background; + bottom: 0; + color: $fontColor; + font-family: "Averta", monospace; + font-size: $mediumFontSize; + left: 0; + margin: 0; + overflow-x: hidden; + position: absolute; + right: 0; + text-rendering: geometricPrecision; + top: 0; } body > div:first-child { diff --git a/src/index.js b/src/index.js index 7759063b..92373cbc 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,13 @@ // @flow import 'babel-polyfill' - import React from 'react' import ReactDOM from 'react-dom' import Root from '~/components/Root' -import { store } from '~/store' -import loadSafesFromStorage from '~/routes/safe/store/actions/loadSafesFromStorage' import loadActiveTokens from '~/logic/tokens/store/actions/loadActiveTokens' -import loadDefaultSafe from '~/routes/safe/store/actions/loadDefaultSafe' import loadCookiesFromStorage from '~/logic/cookies/store/actions/loadCookiesFromStorage' +import loadDefaultSafe from '~/routes/safe/store/actions/loadDefaultSafe' +import loadSafesFromStorage from '~/routes/safe/store/actions/loadSafesFromStorage' +import { store } from '~/store' if (process.env.NODE_ENV !== 'production') { // eslint-disable-next-line diff --git a/src/logic/safe/transactions/send.js b/src/logic/safe/transactions/send.js index a82fc6e3..96c93279 100644 --- a/src/logic/safe/transactions/send.js +++ b/src/logic/safe/transactions/send.js @@ -68,7 +68,18 @@ export const getExecutionTransaction = async ( const web3 = getWeb3() const contract = new web3.eth.Contract(GnosisSafeSol.abi, safeInstance.address) - return contract.methods.execTransaction(to, valueInWei, data, operation, safeTxGas, baseGas, gasPrice, gasToken, refundReceiver, sigs) + return contract.methods.execTransaction( + to, + valueInWei, + data, + operation, + safeTxGas, + baseGas, + gasPrice, + gasToken, + refundReceiver, + sigs, + ) } catch (err) { console.error(`Error while creating transaction: ${err}`) diff --git a/src/routes/safe/store/actions/createTransaction.js b/src/routes/safe/store/actions/createTransaction.js index 201f2587..4edf117f 100644 --- a/src/routes/safe/store/actions/createTransaction.js +++ b/src/routes/safe/store/actions/createTransaction.js @@ -55,13 +55,35 @@ const createTransaction = ( try { if (isExecution) { tx = await getExecutionTransaction( - safeInstance, to, valueInWei, txData, CALL, nonce, - 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, from, sigs + safeInstance, + to, + valueInWei, + txData, + CALL, + nonce, + 0, + 0, + 0, + ZERO_ADDRESS, + ZERO_ADDRESS, + from, + sigs, ) } else { tx = await getApprovalTransaction( - safeInstance, to, valueInWei, txData, CALL, nonce, - 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, from, sigs + safeInstance, + to, + valueInWei, + txData, + CALL, + nonce, + 0, + 0, + 0, + ZERO_ADDRESS, + ZERO_ADDRESS, + from, + sigs, ) } diff --git a/src/routes/safe/store/actions/fetchSafe.js b/src/routes/safe/store/actions/fetchSafe.js index bf54d7c8..6d9da670 100644 --- a/src/routes/safe/store/actions/fetchSafe.js +++ b/src/routes/safe/store/actions/fetchSafe.js @@ -43,9 +43,7 @@ const getLocalSafe = async (safeAddress: string) => { return storedSafes[safeAddress] } -export const checkAndUpdateSafeOwners = (safeAddress: string) => async ( - dispatch: ReduxDispatch, -) => { +export const checkAndUpdateSafeOwners = (safeAddress: string) => async (dispatch: ReduxDispatch) => { // Check if the owner's safe did change and update them const [gnosisSafe, localSafe] = await Promise.all([getGnosisSafeInstanceAt(safeAddress), getLocalSafe(safeAddress)]) const remoteOwners = await gnosisSafe.getOwners() diff --git a/src/routes/safe/store/actions/processTransaction.js b/src/routes/safe/store/actions/processTransaction.js index 0fa9f1a7..26878600 100644 --- a/src/routes/safe/store/actions/processTransaction.js +++ b/src/routes/safe/store/actions/processTransaction.js @@ -36,18 +36,20 @@ export const generateSignaturesFromTxConfirmations = ( } let sigs = '0x' - Object.keys(confirmationsMap).sort().forEach((addr) => { - const conf = confirmationsMap[addr] - if (conf.signature) { - sigs += conf.signature.slice(2) - } else { - // https://gnosis-safe.readthedocs.io/en/latest/contracts/signatures.html#pre-validated-signatures - sigs += `000000000000000000000000${addr.replace( - '0x', - '', - )}000000000000000000000000000000000000000000000000000000000000000001` - } - }) + Object.keys(confirmationsMap) + .sort() + .forEach((addr) => { + const conf = confirmationsMap[addr] + if (conf.signature) { + sigs += conf.signature.slice(2) + } else { + // https://gnosis-safe.readthedocs.io/en/latest/contracts/signatures.html#pre-validated-signatures + sigs += `000000000000000000000000${addr.replace( + '0x', + '', + )}000000000000000000000000000000000000000000000000000000000000000001` + } + }) return sigs } diff --git a/src/theme/mui.js b/src/theme/mui.js index 44188038..1ab43df6 100644 --- a/src/theme/mui.js +++ b/src/theme/mui.js @@ -1,23 +1,26 @@ // @flow import { createMuiTheme } from '@material-ui/core/styles' +import { rgba } from 'polished' import { - extraSmallFontSize, - mediumFontSize, - smallFontSize, - disabled, - primary, - secondary, - error, - sm, - md, - lg, - bolderFont, - regularFont, boldFont, + bolderFont, buttonLargeFontSize, + disabled, + error, + extraSmallFontSize, largeFontSize, - xs, + lg, + mainFontFamily, + md, + mediumFontSize, + primary, + regularFont, + secondary, + secondaryFontFamily, secondaryText, + sm, + smallFontSize, + xs, } from './variables' export type WithStyles = { @@ -42,7 +45,7 @@ const palette = { // see https://github.com/mui-org/material-ui/blob/v1-beta/src/styles/createMuiTheme.js export default createMuiTheme({ typography: { - fontFamily: 'Averta,sans-serif', + fontFamily: mainFontFamily, useNextVariants: true, }, overrides: { @@ -53,7 +56,7 @@ export default createMuiTheme({ fontWeight: regularFont, }, root: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, letterSpacing: '0.9px', '&$disabled': { color: disabled, @@ -109,7 +112,7 @@ export default createMuiTheme({ }, MuiChip: { root: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, }, }, MuiStepIcon: { @@ -132,30 +135,30 @@ export default createMuiTheme({ }, MuiTypography: { body1: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, letterSpacing: '-0.5px', fontSize: mediumFontSize, }, body2: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, }, }, MuiFormHelperText: { root: { - fontFamily: 'Averta, monospace', + color: secondary, + fontFamily: secondaryFontFamily, fontSize: '12px', + marginTop: '0px', + order: 0, padding: `0 0 0 ${md}`, position: 'absolute', top: '5px', - color: secondary, - order: 0, - marginTop: '0px', zIndex: 1, // for firefox }, }, MuiInput: { root: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, color: primary, fontSize: mediumFontSize, lineHeight: '56px', @@ -222,7 +225,7 @@ export default createMuiTheme({ }, MuiTab: { root: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, fontWeight: 'normal', fontSize: extraSmallFontSize, '&$selected': { @@ -244,7 +247,7 @@ export default createMuiTheme({ top: '0px', }, caption: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, fontSize: mediumFontSize, order: 2, color: disabled, @@ -270,7 +273,7 @@ export default createMuiTheme({ }, MuiTableCell: { root: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, fontSize: mediumFontSize, borderBottomWidth: '2px', }, @@ -298,7 +301,7 @@ export default createMuiTheme({ }, MuiMenuItem: { root: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, }, }, MuiListItemIcon: { @@ -308,17 +311,31 @@ export default createMuiTheme({ }, MuiListItemText: { primary: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, fontSize: mediumFontSize, fontWeight: bolderFont, color: primary, }, secondary: { - fontFamily: 'Averta, monospace', + fontFamily: secondaryFontFamily, fontSize: smallFontSize, color: disabled, }, }, + MuiCheckbox: { + colorSecondary: { + '&$disabled': { + color: rgba(secondary, 0.5), + }, + }, + }, + MuiFormControlLabel: { + label: { + '&$disabled': { + color: primary, + }, + }, + }, }, palette, }) diff --git a/src/theme/variables.js b/src/theme/variables.js index f39ffbd7..8dc7a2db 100644 --- a/src/theme/variables.js +++ b/src/theme/variables.js @@ -8,7 +8,6 @@ const fancyColor = '#f02525' const fontColor = '#001428' const headerHeight = '53px' const lg = '24px' -const mainFontFamily = 'Averta, sans-serif' const marginButtonImg = '12px' const md = '16px' const primary = '#001428' @@ -42,7 +41,7 @@ module.exports = { largeFontSize: '16px', lg, lightFont: 300, - mainFontFamily, + mainFontFamily: 'Averta, sans-serif', marginButtonImg, md, mediumFontSize: '14px', @@ -56,6 +55,7 @@ module.exports = { screenXs: 480, screenXsMax: 767, secondary, + secondaryFontFamily: 'Averta, monospace', secondaryText: secondaryTextOrSvg, sm, smallFontSize: '12px', diff --git a/yarn.lock b/yarn.lock index d5da1ee0..14694202 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13881,6 +13881,11 @@ pocket-js-core@0.0.3: dependencies: axios "^0.18.0" +polish@^0.2.3: + version "0.2.3" + resolved "https://registry.yarnpkg.com/polish/-/polish-0.2.3.tgz#4a95296b5501dd10d3b25b8e6ed8339ef4deb147" + integrity sha1-SpUpa1UB3RDTsluObtgznvTesUc= + polished@^3.3.1: version "3.4.2" resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.2.tgz#b4780dad81d64df55615fbfc77acb52fd17d88cd" @@ -19731,7 +19736,6 @@ websocket@1.0.29, "websocket@github:web3-js/WebSocket-Node#polyfill/globalThis": dependencies: debug "^2.2.0" es5-ext "^0.10.50" - gulp "^4.0.2" nan "^2.14.0" typedarray-to-buffer "^3.1.5" yaeti "^0.0.6"