From 70c5c48337e9906ae78b6f410c0638c8d1005ec1 Mon Sep 17 00:00:00 2001 From: fernandomg Date: Thu, 17 Sep 2020 19:36:19 -0300 Subject: [PATCH 1/5] use `safeFeaturesEnabled` selector also organized a bit the code (styles) and added Types for the `ChooseTxType` component --- .../SendModal/screens/ChooseTxType/index.tsx | 62 +++++-------------- .../SendModal/screens/ChooseTxType/style.ts | 45 ++++++++++++++ 2 files changed, 59 insertions(+), 48 deletions(-) create mode 100644 src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/style.ts diff --git a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx index 19d4ff9055..371dfb7a0f 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx @@ -1,13 +1,9 @@ import IconButton from '@material-ui/core/IconButton' -import { makeStyles } from '@material-ui/core/styles' import Close from '@material-ui/icons/Close' import classNames from 'classnames/bind' import * as React from 'react' import { useSelector } from 'react-redux' -import Collectible from '../assets/collectibles.svg' -import Token from '../assets/token.svg' - import { mustBeEthereumContractAddress } from 'src/components/forms/validator' import Button from 'src/components/layout/Button' import Col from 'src/components/layout/Col' @@ -15,54 +11,24 @@ import Hairline from 'src/components/layout/Hairline' import Img from 'src/components/layout/Img' import Paragraph from 'src/components/layout/Paragraph' import Row from 'src/components/layout/Row' +import { safeFeaturesEnabledSelector } from 'src/logic/safe/store/selectors' +import { useStyles } from 'src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/style' import ContractInteractionIcon from 'src/routes/safe/components/Transactions/TxsTable/TxType/assets/custom.svg' -import { safeSelector } from 'src/logic/safe/store/selectors' -import { lg, md, sm } from 'src/theme/variables' -const useStyles = makeStyles({ - heading: { - padding: `${md} ${lg}`, - justifyContent: 'space-between', - boxSizing: 'border-box', - maxHeight: '75px', - }, - manage: { - fontSize: lg, - }, - disclaimer: { - marginBottom: `-${md}`, - paddingTop: md, - textAlign: 'center', - }, - disclaimerText: { - fontSize: md, - }, - closeIcon: { - height: '35px', - width: '35px', - }, - buttonColumn: { - padding: '52px 0', - '& > button': { - fontSize: md, - fontFamily: 'Averta', - }, - }, - firstButton: { - boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)', - marginBottom: 15, - }, - iconSmall: { - fontSize: 16, - }, - leftIcon: { - marginRight: sm, - }, -}) +import Collectible from '../assets/collectibles.svg' +import Token from '../assets/token.svg' + +type ActiveScreen = 'sendFunds' | 'sendCollectible' | 'contractInteraction' + +interface ChooseTxTypeProps { + onClose: () => void + recipientAddress: string + setActiveScreen: React.Dispatch> +} -const ChooseTxType = ({ onClose, recipientAddress, setActiveScreen }) => { +const ChooseTxType = ({ onClose, recipientAddress, setActiveScreen }: ChooseTxTypeProps): React.ReactElement => { const classes = useStyles() - const { featuresEnabled } = useSelector(safeSelector) || {} + const featuresEnabled = useSelector(safeFeaturesEnabledSelector) const erc721Enabled = featuresEnabled?.includes('ERC721') const [disableContractInteraction, setDisableContractInteraction] = React.useState(!!recipientAddress) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/style.ts new file mode 100644 index 0000000000..490db3ccf1 --- /dev/null +++ b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/style.ts @@ -0,0 +1,45 @@ +import { createStyles, makeStyles } from '@material-ui/core/styles' +import { lg, md, sm } from 'src/theme/variables' + +export const useStyles = makeStyles( + createStyles({ + heading: { + padding: `${md} ${lg}`, + justifyContent: 'space-between', + boxSizing: 'border-box', + maxHeight: '75px', + }, + manage: { + fontSize: lg, + }, + disclaimer: { + marginBottom: `-${md}`, + paddingTop: md, + textAlign: 'center', + }, + disclaimerText: { + fontSize: md, + }, + closeIcon: { + height: '35px', + width: '35px', + }, + buttonColumn: { + padding: '52px 0', + '& > button': { + fontSize: md, + fontFamily: 'Averta', + }, + }, + firstButton: { + boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)', + marginBottom: 15, + }, + iconSmall: { + fontSize: 16, + }, + leftIcon: { + marginRight: sm, + }, + }), +) From 41655ac0af81e147de278aedc0efbf10ae621158 Mon Sep 17 00:00:00 2001 From: fernandomg Date: Thu, 17 Sep 2020 19:49:54 -0300 Subject: [PATCH 2/5] fix `getGnosisSafeInstanceAt` return type --- src/logic/contracts/safeContracts.ts | 6 ++---- src/routes/load/container/Load.tsx | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/logic/contracts/safeContracts.ts b/src/logic/contracts/safeContracts.ts index d2992add06..68d971f92b 100644 --- a/src/logic/contracts/safeContracts.ts +++ b/src/logic/contracts/safeContracts.ts @@ -98,11 +98,9 @@ export const estimateGasForDeployingSafe = async ( return gas * parseInt(gasPrice, 10) } -export const getGnosisSafeInstanceAt = async (safeAddress: string): Promise => { +export const getGnosisSafeInstanceAt = (safeAddress: string): GnosisSafe => { const web3 = getWeb3() - const gnosisSafe = await new web3.eth.Contract(GnosisSafeSol.abi as AbiItem[], safeAddress) as unknown as GnosisSafe - - return gnosisSafe + return new web3.eth.Contract(GnosisSafeSol.abi as AbiItem[], safeAddress) as unknown as GnosisSafe } const cleanByteCodeMetadata = (bytecode: string): string => { diff --git a/src/routes/load/container/Load.tsx b/src/routes/load/container/Load.tsx index 49809c26d9..d32b51f8f9 100644 --- a/src/routes/load/container/Load.tsx +++ b/src/routes/load/container/Load.tsx @@ -62,7 +62,7 @@ const Load = (): React.ReactElement => { safeAddress = checksumAddress(safeAddress) const ownerNames = getNamesFrom(values) - const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress) + const gnosisSafe = getGnosisSafeInstanceAt(safeAddress) const ownerAddresses = await gnosisSafe.methods.getOwners().call() const owners = getOwnersFrom(ownerNames, ownerAddresses.slice().sort()) From 11ada292bc22211ec985ae9f84a7457cf98f8d64 Mon Sep 17 00:00:00 2001 From: fernandomg Date: Thu, 17 Sep 2020 20:03:49 -0300 Subject: [PATCH 3/5] add types to `safeStorage` refactor `getSafeName` --- src/logic/safe/utils/safeStorage.ts | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/logic/safe/utils/safeStorage.ts b/src/logic/safe/utils/safeStorage.ts index 3ef09f7c77..d2fccea0ec 100644 --- a/src/logic/safe/utils/safeStorage.ts +++ b/src/logic/safe/utils/safeStorage.ts @@ -6,23 +6,16 @@ export const DEFAULT_SAFE_KEY = 'DEFAULT_SAFE' type StoredSafes = Record -export const loadStoredSafes = async (): Promise => { - const safes = await loadFromStorage(SAFES_KEY) - - return safes +export const loadStoredSafes = (): Promise => { + return loadFromStorage(SAFES_KEY) } export const getSafeName = async (safeAddress: string): Promise => { const safes = await loadStoredSafes() - if (!safes) { - return undefined - } - const safe = safes[safeAddress] - - return safe ? safe.name : undefined + return safes?.[safeAddress]?.name } -export const saveSafes = async (safes) => { +export const saveSafes = async (safes: StoredSafes): Promise => { try { await saveToStorage(SAFES_KEY, safes) } catch (err) { From 57f32b0cf0fb845800da8ce22e8b50df5090a527 Mon Sep 17 00:00:00 2001 From: fernandomg Date: Thu, 17 Sep 2020 20:04:14 -0300 Subject: [PATCH 4/5] use redux selector to obtain master contract version --- src/logic/safe/store/actions/fetchSafe.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/logic/safe/store/actions/fetchSafe.ts b/src/logic/safe/store/actions/fetchSafe.ts index 6821a9974a..80ca31a59d 100644 --- a/src/logic/safe/store/actions/fetchSafe.ts +++ b/src/logic/safe/store/actions/fetchSafe.ts @@ -17,6 +17,7 @@ import { ModulePair, SafeOwner, SafeRecordProps } from 'src/logic/safe/store/mod import { Action, Dispatch } from 'redux' import { SENTINEL_ADDRESS } from 'src/logic/contracts/safeContracts' import { AppReduxState } from 'src/store' +import { latestMasterContractVersionSelector } from '../selectors' const buildOwnersFrom = (safeOwners: string[], localSafe?: SafeRecordProps): List => { const ownersList = safeOwners.map((ownerAddress) => { @@ -157,7 +158,7 @@ export default (safeAdd: string) => async ( try { const safeAddress = checksumAddress(safeAdd) const safeName = (await getSafeName(safeAddress)) || 'LOADED SAFE' - const latestMasterContractVersion = getState().safes.get('latestMasterContractVersion') + const latestMasterContractVersion = latestMasterContractVersionSelector(getState()) const safeProps = await buildSafe(safeAddress, safeName, latestMasterContractVersion) dispatch(addSafe(safeProps)) From 1be24998a47dcb3d9c8bc79c4f1c56182699f738 Mon Sep 17 00:00:00 2001 From: fernandomg Date: Thu, 17 Sep 2020 20:41:40 -0300 Subject: [PATCH 5/5] fix return type --- src/logic/safe/utils/safeVersion.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/logic/safe/utils/safeVersion.ts b/src/logic/safe/utils/safeVersion.ts index 38c47e69a5..5fe5ee3460 100644 --- a/src/logic/safe/utils/safeVersion.ts +++ b/src/logic/safe/utils/safeVersion.ts @@ -71,7 +71,7 @@ export const getCurrentMasterContractLastVersion = async (): Promise => export const getSafeVersionInfo = async (safeAddress: string): Promise => { try { - const safeMaster = await getGnosisSafeInstanceAt(safeAddress) + const safeMaster = getGnosisSafeInstanceAt(safeAddress) const lastSafeVersion = await getCurrentMasterContractLastVersion() return checkIfSafeNeedsUpdate(safeMaster, lastSafeVersion) } catch (err) {