From 1a50b59404e03952f8e0dc6c03eee2336667729e Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Wed, 13 Jan 2021 17:28:10 +0400 Subject: [PATCH 1/5] Bug: Use link tag instead of javascript navigation in apps list (#1770) * Use list instead of programmable navigation * move color style to appcard * use color from theme * add declaration for styled-components theme --- .../Apps/components/AppCard/index.tsx | 1 + .../components/Apps/components/AppsList.tsx | 23 ++++----- src/types/definitions.d.ts | 9 ++++ yarn.lock | 47 ------------------- 4 files changed, 18 insertions(+), 62 deletions(-) diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx index a28053d098..234e6116d3 100644 --- a/src/routes/safe/components/Apps/components/AppCard/index.tsx +++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx @@ -15,6 +15,7 @@ const StyledAppCard = styled(Card)` height: 232px !important; box-sizing: border-box; cursor: pointer; + color: ${({ theme }) => theme.colors.secondary}; :hover { box-shadow: 1px 2px 16px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.35)}; diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx index 89933d2b2c..378e47806f 100644 --- a/src/routes/safe/components/Apps/components/AppsList.tsx +++ b/src/routes/safe/components/Apps/components/AppsList.tsx @@ -6,7 +6,7 @@ import { GenericModal, IconText, Loader, Menu } from '@gnosis.pm/safe-react-comp import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors' import AppCard from 'src/routes/safe/components/Apps/components/AppCard' import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg' -import { useRouteMatch, useHistory } from 'react-router-dom' +import { useRouteMatch, Link } from 'react-router-dom' import { SAFELIST_ADDRESS } from 'src/routes/routes' import { useAppList } from '../hooks/useAppList' @@ -19,6 +19,10 @@ const Wrapper = styled.div` flex-direction: column; ` +const StyledLink = styled(Link)` + text-decoration: none; +` + const centerCSS = css` display: flex; align-items: center; @@ -53,17 +57,11 @@ const Breadcrumb = styled.div` ` const AppsList = (): React.ReactElement => { - const history = useHistory() const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` }) const safeAddress = useSelector(safeParamAddressFromStateSelector) const { appList } = useAppList() const [isAddAppModalOpen, setIsAddAppModalOpen] = useState(false) - const onAddAppHandler = (url: string) => () => { - const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(url)}` - history.push(goToApp) - } - const openAddAppModal = () => setIsAddAppModalOpen(true) const closeAddAppModal = () => setIsAddAppModalOpen(false) @@ -92,14 +90,9 @@ const AppsList = (): React.ReactElement => { {appList .filter((a) => a.fetchStatus !== SAFE_APP_FETCH_STATUS.ERROR) .map((a) => ( - + + + ))} diff --git a/src/types/definitions.d.ts b/src/types/definitions.d.ts index e153daf512..c4022c69a6 100644 --- a/src/types/definitions.d.ts +++ b/src/types/definitions.d.ts @@ -1,3 +1,8 @@ +import 'styled-components' +import { theme } from '@gnosis.pm/safe-react-components' + +type Theme = typeof theme + export {} declare global { interface Window { @@ -10,3 +15,7 @@ declare global { } declare module '@openzeppelin/contracts/build/contracts/ERC721' declare module 'currency-flags/dist/currency-flags.min.css' + +declare module 'styled-components' { + export interface DefaultTheme extends Theme {} // eslint-disable-line +} diff --git a/yarn.lock b/yarn.lock index 74f066ad6a..86b9265f8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3558,18 +3558,6 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/experimental-utils@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.12.0.tgz#372838e76db76c9a56959217b768a19f7129546b" - integrity sha512-MpXZXUAvHt99c9ScXijx7i061o5HEjXltO+sbYfZAAHxv3XankQkPaNi5myy0Yh0Tyea3Hdq1pi7Vsh0GJb0fA== - dependencies: - "@types/json-schema" "^7.0.3" - "@typescript-eslint/scope-manager" "4.12.0" - "@typescript-eslint/types" "4.12.0" - "@typescript-eslint/typescript-estree" "4.12.0" - eslint-scope "^5.0.0" - eslint-utils "^2.0.0" - "@typescript-eslint/experimental-utils@4.13.0", "@typescript-eslint/experimental-utils@^4.0.1": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.13.0.tgz#9dc9ab375d65603b43d938a0786190a0c72be44e" @@ -3603,14 +3591,6 @@ "@typescript-eslint/typescript-estree" "4.13.0" debug "^4.1.1" -"@typescript-eslint/scope-manager@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.12.0.tgz#beeb8beca895a07b10c593185a5612f1085ef279" - integrity sha512-QVf9oCSVLte/8jvOsxmgBdOaoe2J0wtEmBr13Yz0rkBNkl5D8bfnf6G4Vhox9qqMIoG7QQoVwd2eG9DM/ge4Qg== - dependencies: - "@typescript-eslint/types" "4.12.0" - "@typescript-eslint/visitor-keys" "4.12.0" - "@typescript-eslint/scope-manager@4.13.0": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.13.0.tgz#5b45912a9aa26b29603d8fa28f5e09088b947141" @@ -3624,11 +3604,6 @@ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727" integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ== -"@typescript-eslint/types@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.12.0.tgz#fb891fe7ccc9ea8b2bbd2780e36da45d0dc055e5" - integrity sha512-N2RhGeheVLGtyy+CxRmxdsniB7sMSCfsnbh8K/+RUIXYYq3Ub5+sukRCjVE80QerrUBvuEvs4fDhz5AW/pcL6g== - "@typescript-eslint/types@4.13.0": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.13.0.tgz#6a7c6015a59a08fbd70daa8c83dfff86250502f8" @@ -3648,20 +3623,6 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/typescript-estree@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.12.0.tgz#3963418c850f564bdab3882ae23795d115d6d32e" - integrity sha512-gZkFcmmp/CnzqD2RKMich2/FjBTsYopjiwJCroxqHZIY11IIoN0l5lKqcgoAPKHt33H2mAkSfvzj8i44Jm7F4w== - dependencies: - "@typescript-eslint/types" "4.12.0" - "@typescript-eslint/visitor-keys" "4.12.0" - debug "^4.1.1" - globby "^11.0.1" - is-glob "^4.0.1" - lodash "^4.17.15" - semver "^7.3.2" - tsutils "^3.17.1" - "@typescript-eslint/typescript-estree@4.13.0": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.13.0.tgz#cf6e2207c7d760f5dfd8d18051428fadfc37b45e" @@ -3683,14 +3644,6 @@ dependencies: eslint-visitor-keys "^1.1.0" -"@typescript-eslint/visitor-keys@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.12.0.tgz#a470a79be6958075fa91c725371a83baf428a67a" - integrity sha512-hVpsLARbDh4B9TKYz5cLbcdMIOAoBYgFPCSP9FFS/liSF+b33gVNq8JHY3QGhHNVz85hObvL7BEYLlgx553WCw== - dependencies: - "@typescript-eslint/types" "4.12.0" - eslint-visitor-keys "^2.0.0" - "@typescript-eslint/visitor-keys@4.13.0": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.13.0.tgz#9acb1772d3b3183182b6540d3734143dce9476fe" From f09cf6596badb8d1021dbe498ace4a32e4b7fdf6 Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Wed, 13 Jan 2021 14:38:08 -0300 Subject: [PATCH 2/5] Calculates gas for spendingLimit transactions --- src/logic/hooks/useEstimateTransactionGas.tsx | 26 +++++++++++++------ .../SendModal/screens/ReviewTx/index.tsx | 1 + 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx index 0acb86d8f7..ba53f61027 100644 --- a/src/logic/hooks/useEstimateTransactionGas.tsx +++ b/src/logic/hooks/useEstimateTransactionGas.tsx @@ -21,6 +21,7 @@ import { List } from 'immutable' import { Confirmation } from 'src/logic/safe/store/models/types/confirmation' import { checkIfOffChainSignatureIsPossible } from 'src/logic/safe/safeTxSigner' import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses' +import { sameString } from 'src/utils/strings' export enum EstimationStatus { LOADING = 'LOADING', @@ -28,13 +29,19 @@ export enum EstimationStatus { SUCCESS = 'SUCCESS', } -const checkIfTxIsExecution = (threshold: number, preApprovingOwner?: string, txConfirmations?: number): boolean => - txConfirmations === threshold || !!preApprovingOwner || threshold === 1 +const checkIfTxIsExecution = ( + threshold: number, + preApprovingOwner?: string, + txConfirmations?: number, + txType?: string, +): boolean => + txConfirmations === threshold || !!preApprovingOwner || threshold === 1 || sameString(txType, 'spendingLimit') -const checkIfTxIsApproveAndExecution = (threshold: number, txConfirmations: number): boolean => - txConfirmations + 1 === threshold +const checkIfTxIsApproveAndExecution = (threshold: number, txConfirmations: number, txType?: string): boolean => + txConfirmations + 1 === threshold || sameString(txType, 'spendingLimit') -const checkIfTxIsCreation = (txConfirmations: number): boolean => txConfirmations === 0 +const checkIfTxIsCreation = (txConfirmations: number, txType?: string): boolean => + txConfirmations === 0 && !sameString(txType, 'spendingLimit') type TransactionEstimationProps = { txData: string @@ -115,6 +122,7 @@ type UseEstimateTransactionGasProps = { preApprovingOwner?: string operation?: number safeTxGas?: number + txType?: string } type TransactionGasEstimationResult = { @@ -136,6 +144,7 @@ export const useEstimateTransactionGas = ({ preApprovingOwner, operation, safeTxGas, + txType, }: UseEstimateTransactionGasProps): TransactionGasEstimationResult => { const [gasEstimation, setGasEstimation] = useState({ txEstimationExecutionStatus: EstimationStatus.LOADING, @@ -159,9 +168,9 @@ export const useEstimateTransactionGas = ({ return } - const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations?.size) - const isCreation = checkIfTxIsCreation(txConfirmations?.size || 0) - const approvalAndExecution = checkIfTxIsApproveAndExecution(Number(threshold), txConfirmations?.size || 0) + const isExecution = checkIfTxIsExecution(Number(threshold), preApprovingOwner, txConfirmations?.size, txType) + const isCreation = checkIfTxIsCreation(txConfirmations?.size || 0, txType) + const approvalAndExecution = checkIfTxIsApproveAndExecution(Number(threshold), txConfirmations?.size || 0, txType) try { const isOffChainSignature = checkIfOffChainSignatureIsPossible(isExecution, smartContractWallet, safeVersion) @@ -235,6 +244,7 @@ export const useEstimateTransactionGas = ({ safeVersion, smartContractWallet, safeTxGas, + txType, ]) return gasEstimation diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx index 8dbb6b3cf2..f6895a9ebd 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.tsx @@ -120,6 +120,7 @@ const ReviewTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactElement => } = useEstimateTransactionGas({ txData: data, txRecipient, + txType: tx.txType, }) const submitTx = async () => { From 62a1be341a86480d524f2d5f79fd68c73fc57ae3 Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Wed, 13 Jan 2021 14:41:31 -0300 Subject: [PATCH 3/5] Merge with release branch --- .../Apps/components/AppCard/index.tsx | 1 - .../components/Apps/components/AppsList.tsx | 23 +++++---- src/types/definitions.d.ts | 9 ---- yarn.lock | 47 +++++++++++++++++++ 4 files changed, 62 insertions(+), 18 deletions(-) diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx index 234e6116d3..a28053d098 100644 --- a/src/routes/safe/components/Apps/components/AppCard/index.tsx +++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx @@ -15,7 +15,6 @@ const StyledAppCard = styled(Card)` height: 232px !important; box-sizing: border-box; cursor: pointer; - color: ${({ theme }) => theme.colors.secondary}; :hover { box-shadow: 1px 2px 16px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.35)}; diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx index 378e47806f..89933d2b2c 100644 --- a/src/routes/safe/components/Apps/components/AppsList.tsx +++ b/src/routes/safe/components/Apps/components/AppsList.tsx @@ -6,7 +6,7 @@ import { GenericModal, IconText, Loader, Menu } from '@gnosis.pm/safe-react-comp import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors' import AppCard from 'src/routes/safe/components/Apps/components/AppCard' import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg' -import { useRouteMatch, Link } from 'react-router-dom' +import { useRouteMatch, useHistory } from 'react-router-dom' import { SAFELIST_ADDRESS } from 'src/routes/routes' import { useAppList } from '../hooks/useAppList' @@ -19,10 +19,6 @@ const Wrapper = styled.div` flex-direction: column; ` -const StyledLink = styled(Link)` - text-decoration: none; -` - const centerCSS = css` display: flex; align-items: center; @@ -57,11 +53,17 @@ const Breadcrumb = styled.div` ` const AppsList = (): React.ReactElement => { + const history = useHistory() const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` }) const safeAddress = useSelector(safeParamAddressFromStateSelector) const { appList } = useAppList() const [isAddAppModalOpen, setIsAddAppModalOpen] = useState(false) + const onAddAppHandler = (url: string) => () => { + const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(url)}` + history.push(goToApp) + } + const openAddAppModal = () => setIsAddAppModalOpen(true) const closeAddAppModal = () => setIsAddAppModalOpen(false) @@ -90,9 +92,14 @@ const AppsList = (): React.ReactElement => { {appList .filter((a) => a.fetchStatus !== SAFE_APP_FETCH_STATUS.ERROR) .map((a) => ( - - - + ))} diff --git a/src/types/definitions.d.ts b/src/types/definitions.d.ts index c4022c69a6..e153daf512 100644 --- a/src/types/definitions.d.ts +++ b/src/types/definitions.d.ts @@ -1,8 +1,3 @@ -import 'styled-components' -import { theme } from '@gnosis.pm/safe-react-components' - -type Theme = typeof theme - export {} declare global { interface Window { @@ -15,7 +10,3 @@ declare global { } declare module '@openzeppelin/contracts/build/contracts/ERC721' declare module 'currency-flags/dist/currency-flags.min.css' - -declare module 'styled-components' { - export interface DefaultTheme extends Theme {} // eslint-disable-line -} diff --git a/yarn.lock b/yarn.lock index 86b9265f8e..74f066ad6a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3558,6 +3558,18 @@ semver "^7.3.2" tsutils "^3.17.1" +"@typescript-eslint/experimental-utils@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.12.0.tgz#372838e76db76c9a56959217b768a19f7129546b" + integrity sha512-MpXZXUAvHt99c9ScXijx7i061o5HEjXltO+sbYfZAAHxv3XankQkPaNi5myy0Yh0Tyea3Hdq1pi7Vsh0GJb0fA== + dependencies: + "@types/json-schema" "^7.0.3" + "@typescript-eslint/scope-manager" "4.12.0" + "@typescript-eslint/types" "4.12.0" + "@typescript-eslint/typescript-estree" "4.12.0" + eslint-scope "^5.0.0" + eslint-utils "^2.0.0" + "@typescript-eslint/experimental-utils@4.13.0", "@typescript-eslint/experimental-utils@^4.0.1": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.13.0.tgz#9dc9ab375d65603b43d938a0786190a0c72be44e" @@ -3591,6 +3603,14 @@ "@typescript-eslint/typescript-estree" "4.13.0" debug "^4.1.1" +"@typescript-eslint/scope-manager@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.12.0.tgz#beeb8beca895a07b10c593185a5612f1085ef279" + integrity sha512-QVf9oCSVLte/8jvOsxmgBdOaoe2J0wtEmBr13Yz0rkBNkl5D8bfnf6G4Vhox9qqMIoG7QQoVwd2eG9DM/ge4Qg== + dependencies: + "@typescript-eslint/types" "4.12.0" + "@typescript-eslint/visitor-keys" "4.12.0" + "@typescript-eslint/scope-manager@4.13.0": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.13.0.tgz#5b45912a9aa26b29603d8fa28f5e09088b947141" @@ -3604,6 +3624,11 @@ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727" integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ== +"@typescript-eslint/types@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.12.0.tgz#fb891fe7ccc9ea8b2bbd2780e36da45d0dc055e5" + integrity sha512-N2RhGeheVLGtyy+CxRmxdsniB7sMSCfsnbh8K/+RUIXYYq3Ub5+sukRCjVE80QerrUBvuEvs4fDhz5AW/pcL6g== + "@typescript-eslint/types@4.13.0": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.13.0.tgz#6a7c6015a59a08fbd70daa8c83dfff86250502f8" @@ -3623,6 +3648,20 @@ semver "^7.3.2" tsutils "^3.17.1" +"@typescript-eslint/typescript-estree@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.12.0.tgz#3963418c850f564bdab3882ae23795d115d6d32e" + integrity sha512-gZkFcmmp/CnzqD2RKMich2/FjBTsYopjiwJCroxqHZIY11IIoN0l5lKqcgoAPKHt33H2mAkSfvzj8i44Jm7F4w== + dependencies: + "@typescript-eslint/types" "4.12.0" + "@typescript-eslint/visitor-keys" "4.12.0" + debug "^4.1.1" + globby "^11.0.1" + is-glob "^4.0.1" + lodash "^4.17.15" + semver "^7.3.2" + tsutils "^3.17.1" + "@typescript-eslint/typescript-estree@4.13.0": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.13.0.tgz#cf6e2207c7d760f5dfd8d18051428fadfc37b45e" @@ -3644,6 +3683,14 @@ dependencies: eslint-visitor-keys "^1.1.0" +"@typescript-eslint/visitor-keys@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.12.0.tgz#a470a79be6958075fa91c725371a83baf428a67a" + integrity sha512-hVpsLARbDh4B9TKYz5cLbcdMIOAoBYgFPCSP9FFS/liSF+b33gVNq8JHY3QGhHNVz85hObvL7BEYLlgx553WCw== + dependencies: + "@typescript-eslint/types" "4.12.0" + eslint-visitor-keys "^2.0.0" + "@typescript-eslint/visitor-keys@4.13.0": version "4.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.13.0.tgz#9acb1772d3b3183182b6540d3734143dce9476fe" From 48c8aad9593c0add87988ce0fa6332923889055c Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Wed, 13 Jan 2021 15:46:24 -0300 Subject: [PATCH 4/5] Adds TransactionFees component inside UpdateSafeModal --- src/logic/safe/utils/upgradeSafe.ts | 17 +---- .../components/Settings/SafeDetails/index.tsx | 2 +- .../Settings/UpdateSafeModal/index.tsx | 65 ++++++++++++++++--- .../Settings/UpdateSafeModal/style.ts | 3 +- 4 files changed, 62 insertions(+), 25 deletions(-) diff --git a/src/logic/safe/utils/upgradeSafe.ts b/src/logic/safe/utils/upgradeSafe.ts index 4f3dea1860..53caa747ee 100644 --- a/src/logic/safe/utils/upgradeSafe.ts +++ b/src/logic/safe/utils/upgradeSafe.ts @@ -6,7 +6,6 @@ import { SAFE_MASTER_COPY_ADDRESS, getGnosisSafeInstanceAt, } from 'src/logic/contracts/safeContracts' -import { DELEGATE_CALL } from 'src/logic/safe/transactions' import { getWeb3 } from 'src/logic/wallets/getWeb3' import { MultiSend } from 'src/types/contracts/MultiSend.d' @@ -49,7 +48,7 @@ export const getEncodedMultiSendCallData = (txs: MultiSendTx[], web3: Web3): str return encodedMultiSendCallData } -export const upgradeSafeToLatestVersion = async (safeAddress: string, createTransaction): Promise => { +export const getUpgradeSafeTransactionHash = async (safeAddress: string): Promise => { const safeInstance = await getGnosisSafeInstanceAt(safeAddress) const fallbackHandlerTxData = safeInstance.methods.setFallbackHandler(DEFAULT_FALLBACK_HANDLER_ADDRESS).encodeABI() const updateSafeTxData = safeInstance.methods.changeMasterCopy(SAFE_MASTER_COPY_ADDRESS).encodeABI() @@ -69,17 +68,5 @@ export const upgradeSafeToLatestVersion = async (safeAddress: string, createTran ] const web3 = getWeb3() - const encodeMultiSendCallData = getEncodedMultiSendCallData(txs, web3) - createTransaction({ - safeAddress, - to: MULTI_SEND_ADDRESS, - valueInWei: 0, - txData: encodeMultiSendCallData, - notifiedTransaction: 'STANDARD_TX', - enqueueSnackbar: () => {}, - closeSnackbar: () => {}, - operation: DELEGATE_CALL, - }) - - return + return getEncodedMultiSendCallData(txs, web3) } diff --git a/src/routes/safe/components/Settings/SafeDetails/index.tsx b/src/routes/safe/components/Settings/SafeDetails/index.tsx index d071c122ab..cb74ce8681 100644 --- a/src/routes/safe/components/Settings/SafeDetails/index.tsx +++ b/src/routes/safe/components/Settings/SafeDetails/index.tsx @@ -19,7 +19,7 @@ import enqueueSnackbar from 'src/logic/notifications/store/actions/enqueueSnackb import { getNotificationsFromTxType, enhanceSnackbarForAction } from 'src/logic/notifications' import { sameAddress } from 'src/logic/wallets/ethAddresses' import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions' -import UpdateSafeModal from 'src/routes/safe/components/Settings/UpdateSafeModal' +import { UpdateSafeModal } from 'src/routes/safe/components/Settings/UpdateSafeModal' import { grantedSelector } from 'src/routes/safe/container/selector' import updateSafe from 'src/logic/safe/store/actions/updateSafe' import Link from 'src/components/layout/Link' diff --git a/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx b/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx index 3d370047f4..d002316685 100644 --- a/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx +++ b/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx @@ -1,9 +1,7 @@ import IconButton from '@material-ui/core/IconButton' import Close from '@material-ui/icons/Close' -import { withStyles } from '@material-ui/styles' -import React from 'react' +import React, { useEffect, useState } from 'react' import { useDispatch } from 'react-redux' -import { bindActionCreators } from 'redux' import { styles } from './style' @@ -13,17 +11,61 @@ import Button from 'src/components/layout/Button' import Hairline from 'src/components/layout/Hairline' import Paragraph from 'src/components/layout/Paragraph' import Row from 'src/components/layout/Row' -import { upgradeSafeToLatestVersion } from 'src/logic/safe/utils/upgradeSafe' +import { getUpgradeSafeTransactionHash } from 'src/logic/safe/utils/upgradeSafe' import createTransaction from 'src/logic/safe/store/actions/createTransaction' +import { makeStyles } from '@material-ui/core' +import { TransactionFees } from 'src/components/TransactionsFees' +import { useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas' +import { MULTI_SEND_ADDRESS } from 'src/logic/contracts/safeContracts' +import { DELEGATE_CALL } from 'src/logic/safe/transactions' +import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions' -const UpdateSafeModal = ({ classes, onClose, safeAddress }) => { +const useStyles = makeStyles(styles) + +type Props = { + onClose: () => void + safeAddress: string +} + +export const UpdateSafeModal = ({ onClose, safeAddress }: Props): React.ReactElement => { + const classes = useStyles() const dispatch = useDispatch() + const [multiSendCallData, setMultiSendCallData] = useState(EMPTY_DATA) + + useEffect(() => { + const calculateUpgradeSafeModal = async () => { + const encodeMultiSendCallData = await getUpgradeSafeTransactionHash(safeAddress) + setMultiSendCallData(encodeMultiSendCallData) + } + calculateUpgradeSafeModal() + }, [safeAddress]) + const handleSubmit = async () => { // Call the update safe method - await upgradeSafeToLatestVersion(safeAddress, bindActionCreators(createTransaction, dispatch)) + dispatch( + createTransaction({ + safeAddress, + to: MULTI_SEND_ADDRESS, + valueInWei: '0', + txData: multiSendCallData, + notifiedTransaction: 'STANDARD_TX', + operation: DELEGATE_CALL, + }), + ) onClose() } + const { + gasCostFormatted, + txEstimationExecutionStatus, + isExecution, + isCreation, + isOffChainSignature, + } = useEstimateTransactionGas({ + txData: multiSendCallData, + txRecipient: safeAddress, + }) + return ( <> @@ -56,6 +98,15 @@ const UpdateSafeModal = ({ classes, onClose, safeAddress }) => { have to confirm the update in case more than one confirmation is required for this Safe. + + + @@ -72,5 +123,3 @@ const UpdateSafeModal = ({ classes, onClose, safeAddress }) => { ) } - -export default withStyles(styles as any)(UpdateSafeModal) diff --git a/src/routes/safe/components/Settings/UpdateSafeModal/style.ts b/src/routes/safe/components/Settings/UpdateSafeModal/style.ts index e0f9c000a1..e3f31c05ac 100644 --- a/src/routes/safe/components/Settings/UpdateSafeModal/style.ts +++ b/src/routes/safe/components/Settings/UpdateSafeModal/style.ts @@ -1,6 +1,7 @@ import { lg, md, secondaryText, sm } from 'src/theme/variables' +import { createStyles } from '@material-ui/core' -export const styles = () => ({ +export const styles = createStyles({ heading: { padding: `${sm} ${lg}`, justifyContent: 'space-between', From eac4e6966aef00fc9b30fa471f04687dfbeaa934 Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Wed, 13 Jan 2021 16:22:55 -0300 Subject: [PATCH 5/5] Fix send collectible gas calculation --- .../Balances/SendModal/screens/ReviewCollectible/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx index 63d4c942de..a5cf3a00f6 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx @@ -64,7 +64,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement = isCreation, } = useEstimateTransactionGas({ txData: data, - txRecipient: tx.recipientAddress, + txRecipient: tx.assetAddress, }) useEffect(() => {