+
{connected ? (
-
+ {ensName}
+
+ ) : (
+
Connection Error
diff --git a/src/components/AppLayout/Header/index.tsx b/src/components/AppLayout/Header/index.tsx
index b1782813cc..75aad66807 100644
--- a/src/components/AppLayout/Header/index.tsx
+++ b/src/components/AppLayout/Header/index.tsx
@@ -12,6 +12,7 @@ import {
loadedSelector,
providerNameSelector,
userAccountSelector,
+ userEnsSelector,
} from 'src/logic/wallets/store/selectors'
import { removeProvider } from 'src/logic/wallets/store/actions'
import onboard from 'src/logic/wallets/onboard'
@@ -21,6 +22,7 @@ const HeaderComponent = (): React.ReactElement => {
const provider = useSelector(providerNameSelector)
const chainId = useSelector(currentChainId)
const userAddress = useSelector(userAccountSelector)
+ const ensName = useSelector(userEnsSelector)
const loaded = useSelector(loadedSelector)
const available = useSelector(availableSelector)
const dispatch = useDispatch()
@@ -65,6 +67,7 @@ const HeaderComponent = (): React.ReactElement => {
openDashboard={openDashboard()}
provider={provider}
userAddress={userAddress}
+ ensName={ensName}
/>
)
}
diff --git a/src/components/AppLayout/Sidebar/DevTools/index.tsx b/src/components/AppLayout/Sidebar/DevTools/index.tsx
index 9a97c9ba75..fb146bfc7b 100644
--- a/src/components/AppLayout/Sidebar/DevTools/index.tsx
+++ b/src/components/AppLayout/Sidebar/DevTools/index.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
import { useSelector } from 'react-redux'
import styled from 'styled-components'
import { fireEvent, screen, waitForElementToBeRemoved } from '@testing-library/react'
@@ -6,6 +6,7 @@ import { Button } from '@gnosis.pm/safe-react-components'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
+import throttle from 'lodash/throttle'
import { currentSafe, currentSafeEthBalance } from 'src/logic/safe/store/selectors'
import { extractSafeAddress } from 'src/routes/routes'
@@ -80,6 +81,8 @@ const DevTools = (): ReactElement => {
return hasFunds
}
+ const throttledCreatedQueuedTx = useMemo(() => throttle(createQueuedTx, 1000), [])
+
return (
<>
createQueuedTx(safeAddress, threshold)}
+ onClick={() => throttledCreatedQueuedTx(safeAddress, threshold)}
size="md"
variant="bordered"
disabled={!isGranted || !hasSufficientFunds()}
diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
index 400622990c..a24bb19396 100644
--- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
+++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
@@ -9,6 +9,7 @@ import {
CopyToClipboardBtn,
ExplorerButton,
} from '@gnosis.pm/safe-react-components'
+import { useRouteMatch } from 'react-router-dom'
import ButtonHelper from 'src/components/ButtonHelper'
import FlexSpacer from 'src/components/FlexSpacer'
@@ -17,7 +18,7 @@ import { border, fontColor } from 'src/theme/variables'
import { ChainInfo } from '@gnosis.pm/safe-react-gateway-sdk'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
import { copyShortNameSelector } from 'src/logic/appearance/selectors'
-import { extractShortChainName } from 'src/routes/routes'
+import { ADDRESSED_ROUTE, extractShortChainName } from 'src/routes/routes'
export const TOGGLE_SIDEBAR_BTN_TESTID = 'TOGGLE_SIDEBAR_BTN'
@@ -129,7 +130,9 @@ const SafeHeader = ({
const copyChainPrefix = useSelector(copyShortNameSelector)
const shortName = extractShortChainName()
- if (!address) {
+ const hasSafeOpen = useRouteMatch(ADDRESSED_ROUTE)
+
+ if (!address || !hasSafeOpen) {
return (
diff --git a/src/components/AppLayout/Sidebar/index.tsx b/src/components/AppLayout/Sidebar/index.tsx
index ab1887d1a3..f99269c858 100644
--- a/src/components/AppLayout/Sidebar/index.tsx
+++ b/src/components/AppLayout/Sidebar/index.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react'
+import { lazy, useMemo } from 'react'
import styled from 'styled-components'
import { Divider, IconText } from '@gnosis.pm/safe-react-components'
@@ -66,41 +66,43 @@ const Sidebar = ({
onToggleSafeList,
onReceiveClick,
onNewTransactionClick,
-}: Props): React.ReactElement => (
- <>
-
- {!IS_PRODUCTION && safeAddress && (
+ {items.length ? (
<>
+ {!IS_PRODUCTION && safeAddress && (
+ <>
+
-
-
-
-)
+
+
+
+
+ )
+}
export default Sidebar
diff --git a/src/components/ChainIndicator/index.tsx b/src/components/ChainIndicator/index.tsx
index 65ebe7b170..5b954610c8 100644
--- a/src/components/ChainIndicator/index.tsx
+++ b/src/components/ChainIndicator/index.tsx
@@ -7,7 +7,7 @@ import { ChainId } from 'src/config/chain.d'
interface Props {
chainId: ChainId
- noLabel?: boolean
+ hideCircle?: boolean
}
const Wrapper = styled.span`
@@ -16,14 +16,13 @@ const Wrapper = styled.span`
vertical-align: text-bottom;
margin-right: 0.15em;
}
-}
`
-const ChainIndicator = ({ chainId, noLabel }: Props): React.ReactElement => {
+const ChainIndicator = ({ chainId, hideCircle }: Props): React.ReactElement => {
return (
-
)
}
diff --git a/src/components/DecodeTxs/__tests__/index.ts b/src/components/DecodeTxs/__tests__/index.ts
index f7d67b8d9b..cef4ee3347 100644
--- a/src/components/DecodeTxs/__tests__/index.ts
+++ b/src/components/DecodeTxs/__tests__/index.ts
@@ -1,4 +1,4 @@
-import { getByteLength } from '..'
+import { getByteLength } from '../../../utils/getByteLength'
describe('DecodeTxs tests', () => {
it('should calculate the byte length of a single hex string', () => {
diff --git a/src/components/DecodeTxs/index.tsx b/src/components/DecodeTxs/index.tsx
index b5cdbec2ed..5b3100d994 100644
--- a/src/components/DecodeTxs/index.tsx
+++ b/src/components/DecodeTxs/index.tsx
@@ -1,19 +1,28 @@
-import { ReactElement } from 'react'
+import { ReactElement, useState } from 'react'
import styled from 'styled-components'
import { Transaction } from '@gnosis.pm/safe-apps-sdk-v1'
-import {
- DecodedDataResponse,
- DecodedDataBasicParameter,
- DecodedDataParameterValue,
-} from '@gnosis.pm/safe-react-gateway-sdk'
+import { DecodedDataBasicParameter, DecodedDataParameterValue } from '@gnosis.pm/safe-react-gateway-sdk'
import get from 'lodash/get'
-import { Text, CopyToClipboardBtn, IconText, FixedIcon } from '@gnosis.pm/safe-react-components'
-import { hexToBytes } from 'web3-utils'
-
+import {
+ Text,
+ CopyToClipboardBtn,
+ IconText,
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+} from '@gnosis.pm/safe-react-components'
+
+import Paragraph from 'src/components/layout/Paragraph'
+import Row from 'src/components/layout/Row'
import { getExplorerInfo } from 'src/config'
-import { DecodedTxDetail } from 'src/routes/safe/components/Apps/components/ConfirmTxModal'
+import { DecodedTxDetailType } from 'src/routes/safe/components/Apps/components/ConfirmTxModal'
import PrefixedEthHashInfo from '../PrefixedEthHashInfo'
+import { getByteLength } from 'src/utils/getByteLength'
import { getInteractionTitle } from 'src/routes/safe/components/Transactions/helpers/utils'
+import {
+ DecodedTxDetail,
+ isDataDecodedParameterValue,
+} from 'src/routes/safe/components/Apps/components/ConfirmTxModal/DecodedTxDetail'
const FlexWrapper = styled.div<{ margin: number }>`
display: flex;
@@ -24,6 +33,12 @@ const FlexWrapper = styled.div<{ margin: number }>`
}
`
+const StyledAccordionSummary = styled(AccordionSummary)`
+ & .MuiAccordionSummary-content {
+ justify-content: space-between;
+ }
+`
+
const BasicTxInfoWrapper = styled.div`
margin-bottom: 15px;
@@ -32,44 +47,10 @@ const BasicTxInfoWrapper = styled.div`
}
`
-const TxList = styled.div`
- width: 100%;
- max-height: 260px;
- overflow-y: auto;
- border-top: 2px solid ${({ theme }) => theme.colors.separator};
-`
-
-const TxListItem = styled.div`
- display: flex;
- justify-content: space-between;
-
- padding: 0 24px;
- height: 50px;
- border-bottom: 2px solid ${({ theme }) => theme.colors.separator};
-
- :hover {
- cursor: pointer;
- }
-`
const ElementWrapper = styled.div`
margin-bottom: 15px;
`
-export const getByteLength = (data: string | string[]): number => {
- try {
- if (!Array.isArray(data)) {
- data = data.split(',')
- }
- // Return the sum of the byte sizes of each hex string
- return data.reduce((result, hex) => {
- const bytes = hexToBytes(hex)
- return result + bytes.length
- }, 0)
- } catch (err) {
- return 0
- }
-}
-
export const BasicTxInfo = ({
txRecipient,
txData,
@@ -85,9 +66,11 @@ export const BasicTxInfo = ({
{/* TO */}
<>
-
- {getInteractionTitle(txValue)}
-
+
+
+ {getInteractionTitle(txValue)}
+
+
- Data (hex encoded):
-
+
+
+ Data (hex encoded):
+
+
- {txData ? getByteLength(txData) : 0} bytes
+
+ {txData ? getByteLength(txData) : 0} bytes
+
@@ -155,38 +142,33 @@ export const getParameterElement = (parameter: DecodedDataBasicParameter, index:
)
}
-const SingleTx = ({
- decodedData,
- onTxItemClick,
-}: {
- decodedData: DecodedDataResponse | null
- onTxItemClick: (decodedTxDetails: DecodedDataResponse) => void
-}): ReactElement | null => {
+const SingleTx = ({ decodedData }: { decodedData: DecodedTxDetailType }): ReactElement | null => {
+ const [isAccordionExpanded, setIsAccordionExpanded] = useState(false)
+
+ const onChangeExpand = () => {
+ setIsAccordionExpanded((prev) => !prev)
+ }
+
if (!decodedData) {
return null
}
+ const method = isDataDecodedParameterValue(decodedData) ? decodedData.dataDecoded?.method : decodedData.method
+
return (
-
- onTxItemClick(decodedData)}>
+
+
- {decodedData.method}
-
-
-
+ {method}
+
+
+
+
)
}
-const MultiSendTx = ({
- decodedData,
- onTxItemClick,
-}: {
- decodedData: DecodedDataResponse | null
- onTxItemClick: (decodedTxDetails: DecodedDataParameterValue) => void
-}): ReactElement | null => {
+const MultiSendTx = ({ decodedData }: { decodedData: DecodedTxDetailType }): ReactElement | null => {
const txs: DecodedDataParameterValue[] | undefined = get(decodedData, 'parameters[0].valueDecoded')
if (!txs) {
@@ -194,31 +176,19 @@ const MultiSendTx = ({
}
return (
-
+ <>
{txs.map((tx, index) => (
- onTxItemClick(tx)}>
-
- {tx.dataDecoded && {tx.dataDecoded.method} }
-
-
+
+
)
}
type Props = {
txs: Transaction[]
- decodedData: DecodedDataResponse | null
- onTxItemClick: (decodedTxDetails: DecodedTxDetail) => void
+ decodedData: DecodedTxDetailType
}
-export const DecodeTxs = ({ txs, decodedData, onTxItemClick }: Props): ReactElement => {
- return txs.length > 1 ? (
-
- {withArrow &&
)
diff --git a/src/components/ExecuteCheckbox/index.tsx b/src/components/ExecuteCheckbox/index.tsx
index 3cdedee961..cb120e219d 100644
--- a/src/components/ExecuteCheckbox/index.tsx
+++ b/src/components/ExecuteCheckbox/index.tsx
@@ -1,7 +1,26 @@
import { ReactElement } from 'react'
+import { Tooltip } from '@gnosis.pm/safe-react-components'
import { Checkbox, FormControlLabel } from '@material-ui/core'
+import styled from 'styled-components'
+
+import { sm } from 'src/theme/variables'
import Row from 'src/components/layout/Row'
-import Paragraph from '../layout/Paragraph'
+import Img from 'src/components/layout/Img'
+import InfoIcon from 'src/assets/icons/info.svg'
+
+const StyledRow = styled(Row)`
+ align-items: center;
+ margin-bottom: ${sm};
+`
+
+const StyledFormControlLabel = styled(FormControlLabel)`
+ margin-right: ${sm};
+
+ & .MuiFormControlLabel-label {
+ font-size: 16px;
+ letter-spacing: 0;
+ }
+`
interface ExecuteCheckboxProps {
onChange: (val: boolean) => unknown
@@ -12,16 +31,21 @@ const ExecuteCheckbox = ({ onChange }: ExecuteCheckboxProps): ReactElement => {
onChange(e.target.checked)
}
return (
-
-
- If you want to sign the transaction now but manually execute it later, click on the checkbox below.
-
-
+
+
+
+ 
+
+
+
)
}
diff --git a/src/components/ReviewInfoText/index.tsx b/src/components/ReviewInfoText/index.tsx
index c041b2a34b..e7a4f63891 100644
--- a/src/components/ReviewInfoText/index.tsx
+++ b/src/components/ReviewInfoText/index.tsx
@@ -5,26 +5,26 @@ import { useSelector } from 'react-redux'
import Paragraph from 'src/components/layout/Paragraph'
import { currentSafe } from 'src/logic/safe/store/selectors'
import { getLastTxNonce } from 'src/logic/safe/store/selectors/gatewayTransactions'
-import { lg, sm } from 'src/theme/variables'
-import { TransactionFees } from '../TransactionsFees'
+import { lg } from 'src/theme/variables'
import { getRecommendedNonce } from 'src/logic/safe/api/fetchSafeTxGasEstimation'
import { extractSafeAddress } from 'src/routes/routes'
-import { ComponentProps, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import { TransactionFailText } from '../TransactionFailText'
+import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
-type CustomReviewInfoTextProps = {
+const ReviewInfoTextWrapper = styled.div`
+ padding: 0 ${lg};
+`
+
+type ReviewInfoTextProps = {
+ txEstimationExecutionStatus: EstimationStatus
+ isExecution: boolean
+ isCreation: boolean
safeNonce?: string
testId?: string
}
-type ReviewInfoTextProps = ComponentProps & CustomReviewInfoTextProps
-
-const ReviewInfoTextWrapper = styled.div`
- background-color: ${({ theme }) => theme.colors.background};
- padding: ${sm} ${lg};
-`
-
export const ReviewInfoText = ({
- gasCostFormatted,
isCreation,
isExecution,
safeNonce: txParamsSafeNonce = '',
@@ -37,6 +37,7 @@ export const ReviewInfoText = ({
const storeNextNonce = `${lastTxNonce && lastTxNonce + 1}`
const safeAddress = extractSafeAddress()
const [recommendedNonce, setRecommendedNonce] = useState(storeNextNonce)
+ const transactionAction = isCreation ? 'create' : isExecution ? 'execute' : 'approve'
useEffect(() => {
const fetchRecommendedNonce = async () => {
@@ -62,7 +63,7 @@ export const ReviewInfoText = ({
const transactionsToGo = safeNonceNumber - nonce
return (
-
+
{transactionsToGo < 0 ? (
`Nonce ${txParamsSafeNonce} has already been used. Your transaction will fail. Please use nonce ${recommendedNonce}.`
) : (
@@ -83,13 +84,18 @@ export const ReviewInfoText = ({
return (
{warningMessage() || (
-
+ You're about to {transactionAction} a transaction and will have to confirm it with your currently
+ connected wallet.
+
+
)}
+
)
}
diff --git a/src/components/SafeListSidebar/SafeList/SafeListItem.tsx b/src/components/SafeListSidebar/SafeList/SafeListItem.tsx
index 11db73e6b1..10e043165e 100644
--- a/src/components/SafeListSidebar/SafeList/SafeListItem.tsx
+++ b/src/components/SafeListSidebar/SafeList/SafeListItem.tsx
@@ -85,7 +85,7 @@ const SafeListItem = ({
useEffect(() => {
if (isCurrentSafe && shouldScrollToSafe) {
- safeRef?.current?.scrollIntoView({ behavior: 'smooth' })
+ safeRef?.current?.scrollIntoView({ block: 'center' })
}
}, [isCurrentSafe, shouldScrollToSafe])
diff --git a/src/components/TransactionFailText/index.test.tsx b/src/components/TransactionFailText/index.test.tsx
new file mode 100644
index 0000000000..102b84f288
--- /dev/null
+++ b/src/components/TransactionFailText/index.test.tsx
@@ -0,0 +1,83 @@
+import { render, screen, act } from 'src/utils/test-utils'
+import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
+import { TransactionFailText, _ErrorMessage } from '.'
+
+jest.mock('src/logic/wallets/store/selectors', () => {
+ const original = jest.requireActual('src/logic/wallets/store/selectors')
+ return {
+ ...original,
+ shouldSwitchWalletChain: () => false,
+ }
+})
+
+jest.mock('src/routes/safe/container/selector', () => {
+ const original = jest.requireActual('src/routes/safe/container/selector')
+ return {
+ ...original,
+ grantedSelector: () => true,
+ }
+})
+
+describe('TransactionFailText', () => {
+ beforeEach(() => {
+ jest.resetAllMocks()
+ })
+
+ it('shows the create & execute error', async () => {
+ await act(async () => {
+ render() = jest.fn(() => true)
+
+ await act(async () => {
+ render() = jest.fn(() => false)
+
+ await act(async () => {
+ render(
@@ -64,3 +63,6 @@ export const TransactionFailText = ({
)
}
+
+// For tests
+export const _ErrorMessage = ErrorMessage
diff --git a/src/components/TransactionsFees/index.tsx b/src/components/TransactionsFees/index.tsx
deleted file mode 100644
index 79ca5aef3b..0000000000
--- a/src/components/TransactionsFees/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
-import Paragraph from 'src/components/layout/Paragraph'
-import { getNativeCurrency } from 'src/config'
-import { TransactionFailText } from 'src/components/TransactionFailText'
-import { Text } from '@gnosis.pm/safe-react-components'
-import useCanTxExecute from 'src/logic/hooks/useCanTxExecute'
-import { providerSelector } from 'src/logic/wallets/store/selectors'
-import { useSelector } from 'react-redux'
-import { currentSafe } from 'src/logic/safe/store/selectors'
-import { checkIfOffChainSignatureIsPossible } from 'src/logic/safe/safeTxSigner'
-
-type TransactionFailTextProps = {
- txEstimationExecutionStatus: EstimationStatus
- gasCostFormatted?: string
- isExecution: boolean
- isCreation: boolean
-}
-
-export const TransactionFees = ({
- gasCostFormatted,
- isExecution,
- isCreation,
- txEstimationExecutionStatus,
-}: TransactionFailTextProps): React.ReactElement | null => {
- const { currentVersion: safeVersion } = useSelector(currentSafe)
- const { smartContractWallet } = useSelector(providerSelector)
- const canTxExecute = useCanTxExecute(isExecution)
- const isOffChainSignature = checkIfOffChainSignatureIsPossible(canTxExecute, smartContractWallet, safeVersion)
-
- const nativeCurrency = getNativeCurrency()
- let transactionAction
- if (txEstimationExecutionStatus === EstimationStatus.LOADING) {
- return null
- }
- if (isCreation) {
- transactionAction = 'create'
- } else if (isExecution) {
- transactionAction = 'execute'
- } else {
- transactionAction = 'approve'
- }
-
- return (
- <>
- {gasCostFormatted != null && (
-
- You're about to {transactionAction} a transaction and will have to confirm it with your currently
- connected wallet.{' '}
- {!isOffChainSignature && (
- <>
- Make sure you have
-
- {' '}
- {gasCostFormatted} {nativeCurrency.symbol}{' '}
-
- in this wallet to fund the associated transaction fee.
-
- )}
-
- )}
- & { useSelector: any }
+
+jest.mock('react-redux', () => {
+ const original = jest.requireActual('react-redux')
+ return {
+ ...original,
+ useSelector: () => ({ threshold: 2 }),
+ }
+})
describe('useCanTxExecute tests', () => {
- describe('calculateCanTxExecute tests', () => {
- beforeEach(() => {
- threshold = 1
- isExecution = false
- currentSafeNonce = 8
- recommendedNonce = 8
- txConfirmations = 0
- preApprovingOwner = ''
- manualSafeNonce = recommendedNonce
- })
- // to be overriden as necessary
- let threshold
- let preApprovingOwner
- let txConfirmations
- let currentSafeNonce
- let recommendedNonce
- let isExecution
- let manualSafeNonce
- it(`should return true if isExecution`, () => {
- // given
- isExecution = true
-
- // when
- const result = calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- isExecution,
- )
-
- // then
- expect(result).toBe(true)
- })
- it(`should return true if single owner and edited nonce is same as safeNonce`, () => {
- // given
- threshold = 1
- currentSafeNonce = 8
- recommendedNonce = 12
- manualSafeNonce = 8
-
- // when
- const result = calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- undefined,
- manualSafeNonce,
- )
-
- // then
- expect(result).toBe(true)
- })
- it(`should return false if single owner and edited nonce is different than safeNonce`, () => {
- // given
- threshold = 1
- currentSafeNonce = 8
- recommendedNonce = 8
- manualSafeNonce = 20
-
- // when
- const result = calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- undefined,
- manualSafeNonce,
- )
-
- // then
- expect(result).toBe(false)
- })
- it(`should return true if single owner and recommendedNonce is same as safeNonce`, () => {
- // given
- threshold = 1
- currentSafeNonce = 8
- recommendedNonce = 8
-
- // when
- const result = calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- )
-
- // then
- expect(result).toBe(true)
- })
- it(`should return false if single owner and recommendedNonce is greater than safeNonce and no edited nonce`, () => {
- // given
- threshold = 1
- currentSafeNonce = 8
- recommendedNonce = 11
- manualSafeNonce = undefined
-
- // when
- const result = calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- undefined,
- manualSafeNonce,
- )
-
- // then
- expect(result).toBe(false)
- })
- it(`should return false if single owner and recommendedNonce is different than safeNonce`, () => {
- // given
- threshold = 1
- currentSafeNonce = 8
- recommendedNonce = 12
-
- // when
- const result = calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- )
-
- // then
- expect(result).toBe(false)
- })
- it(`should return true if the safe threshold is reached for the transaction`, () => {
- // given
- threshold = 3
- txConfirmations = 3
-
- // when
- const result = calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- )
-
- // then
- expect(result).toBe(true)
- })
- it(`should return false if the number of confirmations does not meet the threshold and there is no preApprovingOwner`, () => {
- // given
- threshold = 5
- txConfirmations = 4
-
- // when
- const result = calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- )
-
- // then
- expect(result).toBe(false)
- })
- it(`should return true if the number of confirmations is one bellow the threshold but there is a preApprovingOwner`, () => {
- // given
- threshold = 5
- preApprovingOwner = '0x29B1b813b6e84654Ca698ef5d7808E154364900B'
- txConfirmations = 4
-
- // when
- const result = calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- )
-
- // then
- expect(result).toBe(true)
- })
+ it(`should return true if owner of a 1/1 Safe`, () => {
+ mockedRedux.useSelector = jest.fn(() => ({ threshold: 1 }))
+
+ const result = useCanTxExecute('0x000', 0)
+ expect(result).toBe(true)
+ })
+
+ it(`should return false if not an owner and not enough sigs`, () => {
+ mockedRedux.useSelector = jest.fn(() => ({ threshold: 1 }))
+
+ const result = useCanTxExecute('', 0)
+ expect(result).toBe(false)
+ })
+
+ it(`should return true if 2/2 sigs`, () => {
+ mockedRedux.useSelector = jest.fn(() => ({ threshold: 2 }))
+
+ const result = useCanTxExecute('', 2)
+ expect(result).toBe(true)
+ })
+
+ it(`should return true if 1/2 sigs and an owner`, () => {
+ mockedRedux.useSelector = jest.fn(() => ({ threshold: 2 }))
+
+ const result = useCanTxExecute('0x000', 1)
+ expect(result).toBe(true)
+ })
+
+ it(`should return false if 1/3 sigs and an owner`, () => {
+ mockedRedux.useSelector = jest.fn(() => ({ threshold: 3 }))
+
+ const result = useCanTxExecute('0x000', 1)
+ expect(result).toBe(false)
+ })
+
+ it(`should return false if 2/3 sigs and not an owner`, () => {
+ mockedRedux.useSelector = jest.fn(() => ({ threshold: 3 }))
+
+ const result = useCanTxExecute('', 2)
+ expect(result).toBe(false)
+ })
+
+ it(`should return true if 3/10 sigs and threshold 3 passed from an arg`, () => {
+ mockedRedux.useSelector = jest.fn(() => ({ threshold: 10 }))
+
+ const result = useCanTxExecute('', 3, 3)
+ expect(result).toBe(true)
+ })
+
+ it(`should return false if 3/3 sigs and threshold 10 passed from an arg`, () => {
+ mockedRedux.useSelector = jest.fn(() => ({ threshold: 3 }))
+
+ const result = useCanTxExecute('', 3, 10)
+ expect(result).toBe(false)
})
})
diff --git a/src/logic/hooks/useCanTxExecute.tsx b/src/logic/hooks/useCanTxExecute.tsx
index 602ad044ca..f5cae74c7f 100644
--- a/src/logic/hooks/useCanTxExecute.tsx
+++ b/src/logic/hooks/useCanTxExecute.tsx
@@ -1,69 +1,39 @@
import { useSelector } from 'react-redux'
-import { extractSafeAddress } from 'src/routes/routes'
import { currentSafe } from '../safe/store/selectors'
-import useGetRecommendedNonce from './useGetRecommendedNonce'
-export const calculateCanTxExecute = (
- currentSafeNonce: number,
- preApprovingOwner: string,
- threshold: number,
- txConfirmations: number,
- recommendedNonce?: number,
- isExecution?: boolean, // when executing from the TxList
- manualSafeNonce?: number,
-): boolean => {
- if (isExecution) return true
+type UseCanTxExecuteType = (
+ preApprovingOwner?: string,
+ txConfirmations?: number,
+ existingTxThreshold?: number,
+ txNonce?: string,
+) => boolean
+
+const useCanTxExecute: UseCanTxExecuteType = (
+ preApprovingOwner = '',
+ txConfirmations = 0,
+ existingTxThreshold,
+ txNonce,
+) => {
+ const safeInfo = useSelector(currentSafe)
- // Single owner
- if (threshold === 1) {
- // nonce was changed manually to be executed
- if (manualSafeNonce) {
- return manualSafeNonce === currentSafeNonce
- }
- // is next tx
- return recommendedNonce === currentSafeNonce
+ if (txNonce && parseInt(txNonce, 10) !== safeInfo.nonce) {
+ return false
}
+ // A tx might have been created with a threshold that is different than the current policy
+ // If an existing tx threshold isn't passed, take the current safe threshold
+ const threshold = existingTxThreshold ?? safeInfo.threshold
+
if (txConfirmations >= threshold) {
return true
}
// When having a preApprovingOwner it is needed one less confirmation to execute the tx
- if (preApprovingOwner && txConfirmations) {
+ if (preApprovingOwner) {
return txConfirmations + 1 === threshold
}
return false
}
-type UseCanTxExecuteType = (
- isExecution?: boolean,
- manualSafeNonce?: number,
- preApprovingOwner?: string,
- txConfirmations?: number,
-) => boolean
-
-const useCanTxExecute: UseCanTxExecuteType = (
- isExecution = false,
- manualSafeNonce,
- preApprovingOwner = '',
- txConfirmations = 0,
-) => {
- const { threshold } = useSelector(currentSafe)
-
- const safeAddress = extractSafeAddress()
- const recommendedNonce = useGetRecommendedNonce(safeAddress)
- const { nonce: currentSafeNonce } = useSelector(currentSafe)
-
- return calculateCanTxExecute(
- currentSafeNonce,
- preApprovingOwner,
- threshold,
- txConfirmations,
- recommendedNonce,
- isExecution,
- manualSafeNonce,
- )
-}
-
export default useCanTxExecute
diff --git a/src/logic/hooks/useEstimateSafeCreationGas.tsx b/src/logic/hooks/useEstimateSafeCreationGas.tsx
index d39e4031b7..5088c774bd 100644
--- a/src/logic/hooks/useEstimateSafeCreationGas.tsx
+++ b/src/logic/hooks/useEstimateSafeCreationGas.tsx
@@ -4,7 +4,7 @@ import { estimateGasForDeployingSafe } from 'src/logic/contracts/safeContracts'
import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
-import { calculateGasPrice } from 'src/logic/wallets/ethTransactions'
+import { calculateGasPrice, getFeesPerGas, setMaxPrioFeePerGas } from 'src/logic/wallets/ethTransactions'
import { userAccountSelector } from '../wallets/store/selectors'
import { getNativeCurrency } from 'src/config'
@@ -19,6 +19,8 @@ type SafeCreationEstimationResult = {
gasCostFormatted: string // Cost of gas in format '< | > 100'
gasLimit: number // Minimum gas requited to execute the Tx
gasPrice: string
+ gasMaxPrioFee: number
+ gasMaxPrioFeeFormatted: string
}
const estimateGas = async (
@@ -27,11 +29,14 @@ const estimateGas = async (
safeCreationSalt: number,
addresses: string[],
): Promise => {
- const [gasEstimation, gasPrice] = await Promise.all([
+ const [gasEstimation, gasPrice, feesPerGas] = await Promise.all([
estimateGasForDeployingSafe(addresses, numOwners, userAccount, safeCreationSalt),
calculateGasPrice(),
+ getFeesPerGas(),
])
+
const estimatedGasCosts = gasEstimation * parseInt(gasPrice, 10)
+ const maxPrioFeePerGas = setMaxPrioFeePerGas(feesPerGas.maxPriorityFeePerGas, parseInt(gasPrice, 10))
const nativeCurrency = getNativeCurrency()
const gasCost = fromTokenUnit(estimatedGasCosts, nativeCurrency.decimals)
const gasCostFormatted = formatAmount(gasCost)
@@ -41,6 +46,8 @@ const estimateGas = async (
gasEstimation,
gasCostFormatted,
gasLimit: gasEstimation,
+ gasMaxPrioFee: maxPrioFeePerGas,
+ gasMaxPrioFeeFormatted: formatAmount(maxPrioFeePerGas.toString()),
}
}
@@ -54,6 +61,8 @@ export const useEstimateSafeCreationGas = ({
gasCostFormatted: '< 0.001',
gasLimit: 0,
gasPrice: '0',
+ gasMaxPrioFee: 0,
+ gasMaxPrioFeeFormatted: '0',
})
const userAccount = useSelector(userAccountSelector)
// Serialize the addresses array so that it doesn't trigger the effect due to the dependencies
diff --git a/src/logic/hooks/useEstimateTransactionGas.tsx b/src/logic/hooks/useEstimateTransactionGas.tsx
index b10a73294d..e4777883c3 100644
--- a/src/logic/hooks/useEstimateTransactionGas.tsx
+++ b/src/logic/hooks/useEstimateTransactionGas.tsx
@@ -13,7 +13,7 @@ import {
} from 'src/logic/safe/transactions/gas'
import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
-import { calculateGasPrice } from 'src/logic/wallets/ethTransactions'
+import { calculateGasPrice, setMaxPrioFeePerGas, getFeesPerGas } from 'src/logic/wallets/ethTransactions'
import { currentSafe } from 'src/logic/safe/store/selectors'
import { providerSelector } from 'src/logic/wallets/store/selectors'
import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
@@ -28,20 +28,15 @@ export enum EstimationStatus {
SUCCESS = 'SUCCESS',
}
-const DEFAULT_MAX_GAS_FEE = String(3.5e9) // 3.5 GWEI
-const DEFAULT_MAX_PRIO_FEE = String(2.5e9) // 2.5 GWEI
-
export const checkIfTxIsApproveAndExecution = (
threshold: number,
txConfirmations: number,
txType?: string,
preApprovingOwner?: string,
): boolean => {
- if (preApprovingOwner) {
- return txConfirmations + 1 === threshold || isSpendingLimit(txType)
- }
-
- return threshold === 1
+ if (txConfirmations === threshold) return false
+ if (!preApprovingOwner) return false
+ return txConfirmations + 1 === threshold || isSpendingLimit(txType)
}
export const checkIfTxIsCreation = (txConfirmations: number, txType?: string): boolean =>
@@ -60,7 +55,6 @@ type UseEstimateTransactionGasProps = {
manualMaxPrioFee?: string
manualGasLimit?: string
manualSafeNonce?: number // Edited nonce
- isExecution?: boolean // If called from the TransactionList "next transaction"
}
export type TransactionGasEstimationResult = {
@@ -116,7 +110,7 @@ export const calculateTotalGasCost = (
gasMaxPrioFee: string,
decimals: number,
): [string, string] => {
- const totalPricePerGas = parseFloat(gasPrice) + parseFloat(gasMaxPrioFee || '0')
+ const totalPricePerGas = parseInt(gasPrice, 10) + parseInt(gasMaxPrioFee || '0', 10)
const estimatedGasCosts = parseInt(gasLimit, 10) * totalPricePerGas
const gasCost = fromTokenUnit(estimatedGasCosts, decimals)
const formattedGasCost = formatAmount(gasCost)
@@ -136,7 +130,6 @@ export const useEstimateTransactionGas = ({
manualMaxPrioFee,
manualGasLimit,
manualSafeNonce,
- isExecution,
}: UseEstimateTransactionGasProps): TransactionGasEstimationResult => {
const [gasEstimation, setGasEstimation] = useState(
getDefaultGasEstimation({
@@ -151,7 +144,7 @@ export const useEstimateTransactionGas = ({
const { address: safeAddress = '', threshold = 1, currentVersion: safeVersion = '' } = useSelector(currentSafe) ?? {}
const { account: from, smartContractWallet, name: providerName } = useSelector(providerSelector)
- const canTxExecute = useCanTxExecute(isExecution, manualSafeNonce, preApprovingOwner, txConfirmations?.size)
+ const canTxExecute = useCanTxExecute(preApprovingOwner, txConfirmations?.size)
useEffect(() => {
const estimateGas = async () => {
@@ -161,14 +154,17 @@ export const useEstimateTransactionGas = ({
const isOffChainSignature = checkIfOffChainSignatureIsPossible(canTxExecute, smartContractWallet, safeVersion)
const isCreation = checkIfTxIsCreation(txConfirmations?.size || 0, txType)
+ const { maxPriorityFeePerGas, maxFeePerGas } = await getFeesPerGas()
+ const maxPrioFeePerGas = setMaxPrioFeePerGas(maxPriorityFeePerGas, maxFeePerGas)
+
if (isOffChainSignature && !isCreation) {
setGasEstimation(
getDefaultGasEstimation({
txEstimationExecutionStatus: EstimationStatus.SUCCESS,
- gasPrice: fromWei(DEFAULT_MAX_GAS_FEE, 'gwei'),
- gasPriceFormatted: DEFAULT_MAX_GAS_FEE,
- gasMaxPrioFee: fromWei(DEFAULT_MAX_PRIO_FEE, 'gwei'),
- gasMaxPrioFeeFormatted: DEFAULT_MAX_PRIO_FEE,
+ gasPrice: fromWei(maxFeePerGas.toString(), 'gwei'),
+ gasPriceFormatted: maxFeePerGas.toString(),
+ gasMaxPrioFee: fromWei(maxPrioFeePerGas.toString(), 'gwei'),
+ gasMaxPrioFeeFormatted: maxPrioFeePerGas.toString(),
isCreation,
isOffChainSignature,
}),
@@ -222,9 +218,9 @@ export const useEstimateTransactionGas = ({
const gasMaxPrioFee = isMaxFeeParam()
? manualMaxPrioFee
? toWei(manualMaxPrioFee, 'gwei')
- : DEFAULT_MAX_PRIO_FEE
+ : setMaxPrioFeePerGas(maxPriorityFeePerGas, parseInt(gasPrice)).toString()
: '0'
- const gasMaxPrioFeeFormatted = fromWei(gasMaxPrioFee, 'gwei')
+ const gasMaxPrioFeeFormatted = fromWei(gasMaxPrioFee.toString(), 'gwei')
const gasLimit = manualGasLimit || ethGasLimitEstimation.toString()
const [gasCost, gasCostFormatted] = calculateTotalGasCost(
gasLimit,
@@ -273,10 +269,10 @@ export const useEstimateTransactionGas = ({
setGasEstimation(
getDefaultGasEstimation({
txEstimationExecutionStatus: EstimationStatus.FAILURE,
- gasPrice: DEFAULT_MAX_GAS_FEE,
- gasPriceFormatted: fromWei(DEFAULT_MAX_GAS_FEE, 'gwei'),
- gasMaxPrioFee: DEFAULT_MAX_PRIO_FEE,
- gasMaxPrioFeeFormatted: fromWei(DEFAULT_MAX_PRIO_FEE, 'gwei'),
+ gasPrice: maxFeePerGas.toString(),
+ gasPriceFormatted: fromWei(maxFeePerGas.toString(), 'gwei'),
+ gasMaxPrioFee: maxPrioFeePerGas.toString(),
+ gasMaxPrioFeeFormatted: fromWei(maxPrioFeePerGas.toString(), 'gwei'),
}),
)
}
diff --git a/src/logic/hooks/useGaEvents.ts b/src/logic/hooks/useGaEvents.ts
new file mode 100644
index 0000000000..afc22d5582
--- /dev/null
+++ b/src/logic/hooks/useGaEvents.ts
@@ -0,0 +1,35 @@
+import { useEffect } from 'react'
+import { matchPath, useLocation } from 'react-router-dom'
+
+import { useAnalytics } from 'src/utils/googleAnalytics'
+import { isDeeplinkedTx } from 'src/routes/safe/components/Transactions/TxList/utils'
+import { extractSafeAddress, getPrefixedSafeAddressSlug, SAFE_ROUTES, TRANSACTION_ID_SLUG } from 'src/routes/routes'
+
+const useGaEvents = (): void => {
+ const { trackPage } = useAnalytics()
+ const location = useLocation()
+ const { pathname, search } = location
+ // Google Analytics
+ useEffect(() => {
+ let trackedPath = pathname
+ const address = extractSafeAddress()
+
+ // Anonymize safe address
+ if (address) {
+ trackedPath = trackedPath.replace(getPrefixedSafeAddressSlug(), 'SAFE_ADDRESS')
+ }
+
+ // Anonymize deeplinked transaction
+ if (isDeeplinkedTx()) {
+ const match = matchPath(pathname, {
+ path: SAFE_ROUTES.TRANSACTIONS_SINGULAR,
+ })
+
+ trackedPath = trackedPath.replace(match?.params[TRANSACTION_ID_SLUG], 'TRANSACTION_ID')
+ }
+
+ trackPage(trackedPath + search)
+ }, [pathname, search, trackPage])
+}
+
+export default useGaEvents
diff --git a/src/logic/safe/store/actions/__tests__/fetchSafe.test.ts b/src/logic/safe/store/actions/__tests__/fetchSafe.test.ts
index 5f3ea3faa9..eb40e5b457 100644
--- a/src/logic/safe/store/actions/__tests__/fetchSafe.test.ts
+++ b/src/logic/safe/store/actions/__tests__/fetchSafe.test.ts
@@ -153,12 +153,21 @@ describe('fetchSafe', () => {
expect(store.getActions()).toEqual(expectedActions)
})
- it('should not dispatch updateSafe if `remoteSafeInfo` is not present', async () => {
+ it('should dispatch updateSafe if `remoteSafeInfo` is not present', async () => {
jest.spyOn(global.console, 'error').mockImplementationOnce(() => {})
mockedGateway.getSafeInfo.mockImplementationOnce(async () => {
throw new Error('-- test -- no resource available')
})
- const expectedActions = []
+
+ const expectedActions = [
+ {
+ type: 'UPDATE_SAFE',
+ payload: {
+ address: '0xe414604Ad49602C0b9c0b08D0781ECF96740786a',
+ owners: [],
+ },
+ },
+ ]
const store = mockStore(
Map({
diff --git a/src/logic/safe/store/actions/__tests__/utils.test.ts b/src/logic/safe/store/actions/__tests__/utils.test.ts
index 1123574621..8666f2c0c7 100644
--- a/src/logic/safe/store/actions/__tests__/utils.test.ts
+++ b/src/logic/safe/store/actions/__tests__/utils.test.ts
@@ -1,7 +1,7 @@
import { FEATURES } from '@gnosis.pm/safe-react-gateway-sdk'
import { ChainId } from 'src/config/chain.d'
-import { buildSafeOwners, extractRemoteSafeInfo, shouldExecuteTransaction } from 'src/logic/safe/store/actions/utils'
+import { buildSafeOwners, extractRemoteSafeInfo, canExecuteCreatedTx } from 'src/logic/safe/store/actions/utils'
import { SafeRecordProps } from 'src/logic/safe/store/models/safe'
import { getMockedSafeInstance, getMockedStoredTServiceModel } from 'src/test/utils/safeHelper'
import { LocalTransactionStatus } from '../../models/types/gateway.d'
@@ -14,7 +14,7 @@ import {
const lastTxFromStore = getMockedStoredTServiceModel()
-describe('shouldExecuteTransaction', () => {
+describe('canExecuteCreatedTx', () => {
it('It should return false if given a safe with a threshold > 1', async () => {
// given
const nonce = '0'
@@ -22,7 +22,7 @@ describe('shouldExecuteTransaction', () => {
const safeInstance = getMockedSafeInstance({ threshold })
// when
- const result = await shouldExecuteTransaction(safeInstance, nonce, lastTxFromStore)
+ const result = await canExecuteCreatedTx(safeInstance, nonce, lastTxFromStore)
// then
expect(result).toBe(false)
@@ -35,7 +35,7 @@ describe('shouldExecuteTransaction', () => {
const lastTxFromStoreExecuted = { ...lastTxFromStore, txStatus: LocalTransactionStatus.SUCCESS }
// when
- const result = await shouldExecuteTransaction(safeInstance, nonce, lastTxFromStoreExecuted)
+ const result = await canExecuteCreatedTx(safeInstance, nonce, lastTxFromStoreExecuted)
// then
expect(result).toBe(true)
@@ -48,7 +48,7 @@ describe('shouldExecuteTransaction', () => {
const lastTxFromStoreExecuted = { ...lastTxFromStore, txStatus: LocalTransactionStatus.SUCCESS }
// when
- const result = await shouldExecuteTransaction(safeInstance, nonce, lastTxFromStoreExecuted)
+ const result = await canExecuteCreatedTx(safeInstance, nonce, lastTxFromStoreExecuted)
// then
expect(result).toBe(true)
@@ -61,7 +61,7 @@ describe('shouldExecuteTransaction', () => {
const lastTxFromStoreExecuted = { ...lastTxFromStore, txStatus: LocalTransactionStatus.FAILED }
// when
- const result = await shouldExecuteTransaction(safeInstance, nonce, lastTxFromStoreExecuted)
+ const result = await canExecuteCreatedTx(safeInstance, nonce, lastTxFromStoreExecuted)
// then
expect(result).toBe(false)
diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index edaa2ec63c..448b209be6 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -17,7 +17,7 @@ import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
import { providerSelector } from 'src/logic/wallets/store/selectors'
import { generateSafeTxHash } from 'src/logic/safe/store/actions/transactions/utils/transactionHelpers'
-import { getNonce, shouldExecuteTransaction } from 'src/logic/safe/store/actions/utils'
+import { getNonce, canExecuteCreatedTx } from 'src/logic/safe/store/actions/utils'
import fetchTransactions from './transactions/fetchTransactions'
import { AppReduxState } from 'src/store'
import { Dispatch, DispatchReturn } from './types'
@@ -102,24 +102,17 @@ export class TxSender {
dispatch: Dispatch
safeInstance: GnosisSafe
safeVersion: string
- approveAndExecute: boolean
+ txId: string
// On transaction completion (either confirming or executing)
async onComplete(signature?: string, confirmCallback?: ConfirmEventHandler): Promise {
- const { txArgs, safeTxHash, txProps, dispatch, notifications, isFinalization, approveAndExecute = false } = this
+ const { txArgs, safeTxHash, txProps, dispatch, notifications, isFinalization } = this
+ // Propose the tx to the backend
+ // 1) If signing
+ // 2) If creating a new tx (no txId yet)
let txDetails: TransactionDetails | null = null
-
- const isOffChainSigning = !isFinalization && signature
- const isOnChainSigning = isFinalization && !signature
-
- // If 1/? threshold and owner chooses to execute created tx immediately
- const isImmediateExecution = isOnChainSigning && !approveAndExecute
-
- // Propose the tx to the backend if an owner and
- // 1) It's a confirmation w/o exection
- // 2) It's a creation + execution w/o pre-approved signatures
- if (isOffChainSigning || isImmediateExecution) {
+ if (!isFinalization || !this.txId) {
try {
txDetails = await saveTxToHistory({ ...txArgs, signature, origin })
} catch (err) {
@@ -128,6 +121,12 @@ export class TxSender {
}
}
+ // If threshold reached except for last sig, and owner chooses to execute the created tx immediately
+ // we retrieve txId of newly created tx from the proposal response
+ if (isFinalization && txDetails) {
+ dispatch(addPendingTransaction({ id: txDetails.txId }))
+ }
+
notifications.closePending()
// This is used to communicate the safeTxHash to a Safe App caller
@@ -142,7 +141,7 @@ export class TxSender {
}
async onError(err: Error & { code: number }, errorCallback?: ErrorEventHandler): Promise {
- const { txArgs, isFinalization, from, safeTxHash, txProps, dispatch, notifications, safeInstance } = this
+ const { txArgs, isFinalization, from, txProps, dispatch, notifications, safeInstance, txId } = this
logError(Errors._803, err.message)
@@ -150,8 +149,9 @@ export class TxSender {
notifications.closePending()
- if (isFinalization && safeTxHash) {
- dispatch(removePendingTransaction({ safeTxHash }))
+ // Existing transaction was being finalised (txId exists)
+ if (isFinalization && txId) {
+ dispatch(removePendingTransaction({ id: txId }))
}
const executeDataUsedSignatures = safeInstance.methods
@@ -185,14 +185,18 @@ export class TxSender {
}
async sendTx(): Promise {
- const { txArgs, isFinalization, from, safeTxHash, txProps, dispatch } = this
+ const { txArgs, isFinalization, from, safeTxHash, txProps, dispatch, txId } = this
const tx = isFinalization ? getExecutionTransaction(txArgs) : getApprovalTransaction(this.safeInstance, safeTxHash)
const sendParams = createSendParams(from, txProps.ethParameters || {})
const promiEvent = tx.send(sendParams)
+
// When signing on-chain don't mark as pending as it is never removed
if (isFinalization) {
- dispatch(addPendingTransaction({ safeTxHash }))
+ // Finalising existing transaction (txId exists)
+ if (txId) {
+ dispatch(addPendingTransaction({ id: txId }))
+ }
aboutToExecuteTx.setNonce(txArgs.nonce)
}
@@ -286,8 +290,7 @@ export const createTransaction = (
// Execute right away?
sender.isFinalization =
- !props.delayExecution &&
- (await shouldExecuteTransaction(sender.safeInstance, sender.nonce, getLastTransaction(state)))
+ !props.delayExecution && (await canExecuteCreatedTx(sender.safeInstance, sender.nonce, getLastTransaction(state)))
// Prepare a TxArgs object
sender.txArgs = {
diff --git a/src/logic/safe/store/actions/fetchSafe.ts b/src/logic/safe/store/actions/fetchSafe.ts
index 0c3fc1a43c..1fa6c069f1 100644
--- a/src/logic/safe/store/actions/fetchSafe.ts
+++ b/src/logic/safe/store/actions/fetchSafe.ts
@@ -78,7 +78,7 @@ export const fetchSafe =
// If the network has changed while the safe was being loaded,
// ignore the result
- if (remoteSafeInfo?.chainId !== chainId) {
+ if (remoteSafeInfo && remoteSafeInfo?.chainId !== chainId) {
return
}
@@ -102,7 +102,7 @@ export const fetchSafe =
}
}
- const owners = buildSafeOwners(remoteSafeInfo?.owners)
+ const owners = buildSafeOwners(remoteSafeInfo?.owners || [])
return dispatch(updateSafe({ address, ...safeInfo, owners }))
}
diff --git a/src/logic/safe/store/actions/processTransaction.ts b/src/logic/safe/store/actions/processTransaction.ts
index d3a6f852d6..8050283f3e 100644
--- a/src/logic/safe/store/actions/processTransaction.ts
+++ b/src/logic/safe/store/actions/processTransaction.ts
@@ -3,7 +3,7 @@ import { AnyAction } from 'redux'
import { ThunkAction } from 'redux-thunk'
import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
-import { generateSignaturesFromTxConfirmations, getPreValidatedSignatures } from 'src/logic/safe/safeTxSigner'
+import { generateSignaturesFromTxConfirmations } from 'src/logic/safe/safeTxSigner'
import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
import { AppReduxState } from 'src/store'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
@@ -11,8 +11,6 @@ import { Dispatch, DispatchReturn } from './types'
import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
import { TxSender } from './createTransaction'
import { logError, Errors } from 'src/logic/exceptions/CodedException'
-import { getLastTransaction } from '../selectors/gatewayTransactions'
-import { shouldExecuteTransaction } from './utils'
interface ProcessTransactionArgs {
approveAndExecute: boolean
@@ -34,8 +32,8 @@ interface ProcessTransactionArgs {
gasToken: string
refundReceiver: string
}
- userAddress: string
ethParameters?: Pick
+ preApprovingOwner?: string
thresholdReached: boolean
}
@@ -50,6 +48,9 @@ export const processTransaction = (props: ProcessTransactionArgs): ProcessTransa
const { tx, approveAndExecute } = props
+ // Set specific transaction being finalised
+ sender.txId = tx.id
+
const txProps = {
navigateToTransactionsTab: false,
notifiedTransaction: props.notifiedTransaction,
@@ -72,14 +73,7 @@ export const processTransaction = (props: ProcessTransactionArgs): ProcessTransa
return
}
- // Execute right away?
- sender.isFinalization =
- approveAndExecute ||
- (await shouldExecuteTransaction(sender.safeInstance, sender.nonce, getLastTransaction(state)))
-
- sender.approveAndExecute = approveAndExecute
-
- const preApprovingOwner = approveAndExecute && !props.thresholdReached ? props.userAddress : undefined
+ sender.isFinalization = approveAndExecute && !!(props.thresholdReached || props.preApprovingOwner)
sender.txArgs = {
...tx, // Merge previous tx with new data
@@ -88,9 +82,10 @@ export const processTransaction = (props: ProcessTransactionArgs): ProcessTransa
data: txProps.txData,
gasPrice: tx.gasPrice || '0',
sender: sender.from,
- sigs:
- generateSignaturesFromTxConfirmations(tx.confirmations, preApprovingOwner) ||
- getPreValidatedSignatures(sender.from),
+ sigs: generateSignaturesFromTxConfirmations(
+ tx.confirmations,
+ approveAndExecute ? props.preApprovingOwner : undefined,
+ ),
}
sender.safeTxHash = tx.safeTxHash
diff --git a/src/logic/safe/store/actions/utils.ts b/src/logic/safe/store/actions/utils.ts
index b98c7b88bf..e17be2a92a 100644
--- a/src/logic/safe/store/actions/utils.ts
+++ b/src/logic/safe/store/actions/utils.ts
@@ -17,7 +17,7 @@ import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
import { logError, Errors } from 'src/logic/exceptions/CodedException'
import { getRecommendedNonce } from '../../api/fetchSafeTxGasEstimation'
-export const shouldExecuteTransaction = async (
+export const canExecuteCreatedTx = async (
safeInstance: GnosisSafe,
nonce: string,
lastTx: Transaction | null,
diff --git a/src/logic/safe/store/middleware/gatewayTransactionsMiddleware.ts b/src/logic/safe/store/middleware/gatewayTransactionsMiddleware.ts
index ab1a869f11..a188d3c25f 100644
--- a/src/logic/safe/store/middleware/gatewayTransactionsMiddleware.ts
+++ b/src/logic/safe/store/middleware/gatewayTransactionsMiddleware.ts
@@ -5,7 +5,7 @@ import { ADD_HISTORY_TRANSACTIONS } from 'src/logic/safe/store/actions/transacti
import { isTransactionSummary } from 'src/logic/safe/store/models/types/gateway.d'
import { removePendingTransaction } from 'src/logic/safe/store/actions/pendingTransactions'
import { Dispatch } from 'src/logic/safe/store/actions/types'
-import { getSafeTxHashFromId, isTxPending } from 'src/logic/safe/store/selectors/pendingTransactions'
+import { isTxPending } from 'src/logic/safe/store/selectors/pendingTransactions'
import { HistoryPayload } from 'src/logic/safe/store/reducer/gatewayTransactions'
export const gatewayTransactionsMiddleware =
@@ -22,10 +22,10 @@ export const gatewayTransactionsMiddleware =
continue
}
- const safeTxHash = getSafeTxHashFromId(value.transaction.id)
+ const { id } = value.transaction
- if (isTxPending(store.getState(), safeTxHash)) {
- store.dispatch(removePendingTransaction({ safeTxHash }))
+ if (isTxPending(store.getState(), id)) {
+ store.dispatch(removePendingTransaction({ id }))
}
}
diff --git a/src/logic/safe/store/middleware/notificationsMiddleware.ts b/src/logic/safe/store/middleware/notificationsMiddleware.ts
index 71d8fb0df1..31aa6ad030 100644
--- a/src/logic/safe/store/middleware/notificationsMiddleware.ts
+++ b/src/logic/safe/store/middleware/notificationsMiddleware.ts
@@ -23,7 +23,7 @@ import { store as reduxStore } from 'src/store/index'
import { HistoryPayload } from 'src/logic/safe/store/reducer/gatewayTransactions'
import { history, extractSafeAddress, generateSafeRoute, ADDRESSED_ROUTE, SAFE_ROUTES } from 'src/routes/routes'
import { getShortName } from 'src/config'
-import { getSafeTxHashFromId, isTxPending } from 'src/logic/safe/store/selectors/pendingTransactions'
+import { isTxPending } from 'src/logic/safe/store/selectors/pendingTransactions'
const watchedActions = [ADD_OR_UPDATE_SAFE, ADD_QUEUED_TRANSACTIONS, ADD_HISTORY_TRANSACTIONS]
@@ -106,10 +106,7 @@ const notificationsMiddleware =
const safesMap = safesAsMap(state)
const currentSafe = safesMap.get(safeAddress)
- const hasPendingTx = transactions.some((tx) => {
- const safeTxHash = getSafeTxHashFromId(tx.id)
- return isTxPending(state, safeTxHash)
- })
+ const hasPendingTx = transactions.some(({ id }) => isTxPending(state, id))
if (
hasPendingTx ||
diff --git a/src/logic/safe/store/middleware/pendingTransactionsMiddleware.ts b/src/logic/safe/store/middleware/pendingTransactionsMiddleware.ts
index f050d23307..f070d1456b 100644
--- a/src/logic/safe/store/middleware/pendingTransactionsMiddleware.ts
+++ b/src/logic/safe/store/middleware/pendingTransactionsMiddleware.ts
@@ -9,7 +9,7 @@ import {
} from 'src/logic/safe/store/actions/pendingTransactions'
import { PENDING_TRANSACTIONS_ID, PendingTransactionPayload } from 'src/logic/safe/store/reducer/pendingTransactions'
import { Dispatch } from 'src/logic/safe/store/actions/types'
-import { allPendingTxs } from 'src/logic/safe/store/selectors/pendingTransactions'
+import { allPendingTxIds } from 'src/logic/safe/store/selectors/pendingTransactions'
// Share updated statuses between tabs/windows
// Test env and Safari don't support BroadcastChannel
@@ -57,7 +57,7 @@ export const pendingTransactionsMiddleware =
}
const state = getState()
- session.setItem(PENDING_TRANSACTIONS_ID, allPendingTxs(state))
+ session.setItem(PENDING_TRANSACTIONS_ID, allPendingTxIds(state))
break
}
default:
diff --git a/src/logic/safe/store/models/types/transaction.ts b/src/logic/safe/store/models/types/transaction.ts
index 264a8322bd..598f95d4c9 100644
--- a/src/logic/safe/store/models/types/transaction.ts
+++ b/src/logic/safe/store/models/types/transaction.ts
@@ -17,7 +17,7 @@ export type TxArgs = {
refundReceiver: string
safeInstance: GnosisSafe
safeTxGas: string
- sender?: string
+ sender: string
sigs: string
to: string
valueInWei: string
diff --git a/src/logic/safe/store/reducer/pendingTransactions.ts b/src/logic/safe/store/reducer/pendingTransactions.ts
index 6705fd5405..eaaa804e7d 100644
--- a/src/logic/safe/store/reducer/pendingTransactions.ts
+++ b/src/logic/safe/store/reducer/pendingTransactions.ts
@@ -7,13 +7,12 @@ import { _getChainId } from 'src/config'
export const PENDING_TRANSACTIONS_ID = 'pendingTransactions'
-type SafeTxHash = string
-export type PendingTransactionsState = Record>
+export type PendingTransactionsState = Record>
const initialPendingTxsState = session.getItem(PENDING_TRANSACTIONS_ID) || {}
export type PendingTransactionPayload = {
- safeTxHash: string
+ id: string
isBroadcast?: boolean
}
@@ -24,11 +23,11 @@ export const pendingTransactionsReducer = handleActions,
) => {
const chainId = _getChainId()
- const { safeTxHash } = action.payload
+ const { id } = action.payload
return {
...state,
- [chainId]: { ...state[chainId], [safeTxHash]: true },
+ [chainId]: { ...state[chainId], [id]: true },
}
},
[PENDING_TRANSACTIONS_ACTIONS.REMOVE]: (
@@ -36,10 +35,10 @@ export const pendingTransactionsReducer = handleActions,
) => {
const chainId = _getChainId()
- const { safeTxHash } = action.payload
+ const { id } = action.payload
- // Omit safeTxHash from the pending transactions on current chain
- const { [safeTxHash]: _, ...newChainState } = state[chainId] || {}
+ // Omit id from the pending transactions on current chain
+ const { [id]: _, ...newChainState } = state[chainId] || {}
return {
...state,
diff --git a/src/logic/safe/store/selectors/pendingTransactions.ts b/src/logic/safe/store/selectors/pendingTransactions.ts
index aa65f2bcfe..95124c28c2 100644
--- a/src/logic/safe/store/selectors/pendingTransactions.ts
+++ b/src/logic/safe/store/selectors/pendingTransactions.ts
@@ -2,52 +2,49 @@ import { TransactionStatus } from '@gnosis.pm/safe-react-gateway-sdk'
import { createSelector } from 'reselect'
import { AppReduxState } from 'src/store'
-import {
- isMultiSigExecutionDetails,
- LocalTransactionStatus,
- Transaction,
-} from 'src/logic/safe/store/models/types/gateway.d'
+import { LocalTransactionStatus, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
import { PendingTransactionsState, PENDING_TRANSACTIONS_ID } from 'src/logic/safe/store/reducer/pendingTransactions'
import { currentChainId } from 'src/logic/config/store/selectors'
import { ChainId } from 'src/config/chain'
+import { getTransactionByAttribute } from 'src/logic/safe/store/selectors/gatewayTransactions'
-export const allPendingTxs = (state: AppReduxState): PendingTransactionsState => {
+export const allPendingTxIds = (state: AppReduxState): PendingTransactionsState => {
return state[PENDING_TRANSACTIONS_ID]
}
-const pendingTxsByChain = createSelector(
- allPendingTxs,
+export const pendingTxIdsByChain = createSelector(
+ allPendingTxIds,
currentChainId,
(statuses, chainId): PendingTransactionsState[ChainId] => {
return statuses[chainId]
},
)
-export const isTxPending = createSelector(
- pendingTxsByChain,
- (_: AppReduxState, safeTxHash: string) => safeTxHash,
- (pendingTxs: PendingTransactionsState[ChainId], safeTxHash: string): boolean => {
- return pendingTxs ? !!pendingTxs?.[safeTxHash] : false
+export const pendingTxByChain = createSelector(
+ (state: AppReduxState) => state,
+ pendingTxIdsByChain,
+ (state: AppReduxState, pendingTxIds: PendingTransactionsState[ChainId]): Transaction | undefined => {
+ if (!pendingTxIds) {
+ return
+ }
+
+ const pendingTxId = Object.keys(pendingTxIds)[0]
+ return getTransactionByAttribute(state, { attributeValue: pendingTxId, attributeName: 'id' })
},
)
-// @FIXME: this is a dirty hack.
-// Ask backend to add safeTxHash in tx list items.
-export const getSafeTxHashFromId = (id: string): string => {
- return id.split('_').pop() || ''
-}
+export const isTxPending = createSelector(
+ pendingTxIdsByChain,
+ (_: AppReduxState, id: string) => id,
+ (pendingTxs: PendingTransactionsState[ChainId], id: string): boolean => {
+ return pendingTxs ? !!pendingTxs?.[id] : false
+ },
+)
export const selectTxStatus = createSelector(
- pendingTxsByChain,
+ pendingTxIdsByChain,
(_: AppReduxState, tx: Transaction) => tx,
(pendingTxs: PendingTransactionsState[ChainId], tx: Transaction): TransactionStatus => {
- const { detailedExecutionInfo } = tx.txDetails || {}
-
- const safeTxHash =
- detailedExecutionInfo && isMultiSigExecutionDetails(detailedExecutionInfo)
- ? detailedExecutionInfo.safeTxHash
- : getSafeTxHashFromId(tx.id)
-
- return !!pendingTxs?.[safeTxHash] ? LocalTransactionStatus.PENDING : tx.txStatus
+ return !!pendingTxs?.[tx.id] ? LocalTransactionStatus.PENDING : tx.txStatus
},
)
diff --git a/src/logic/safe/transactions/offchainSigner/index.ts b/src/logic/safe/transactions/offchainSigner/index.ts
index 46c1c7a36d..b7cbcbde57 100644
--- a/src/logic/safe/transactions/offchainSigner/index.ts
+++ b/src/logic/safe/transactions/offchainSigner/index.ts
@@ -33,8 +33,12 @@ const getSupportedSigners = (isHW: boolean, safeVersion: string) => {
return signers
}
-const isKeystoneError = (err: Error): boolean => {
- return err.message.startsWith('#ktek_error')
+const isKeystoneError = (err: unknown): boolean => {
+ if (err instanceof Error) {
+ return err.message?.startsWith('#ktek_error')
+ }
+
+ return false
}
export const tryOffChainSigning = async (
diff --git a/src/logic/safe/transactions/txHistory.ts b/src/logic/safe/transactions/txHistory.ts
index fb96c98a3f..67b7e98aa4 100644
--- a/src/logic/safe/transactions/txHistory.ts
+++ b/src/logic/safe/transactions/txHistory.ts
@@ -1,14 +1,21 @@
+import { MultisigTransactionRequest, proposeTransaction, TransactionDetails } from '@gnosis.pm/safe-react-gateway-sdk'
+
import { GnosisSafe } from 'src/types/contracts/gnosis_safe.d'
import { _getChainId } from 'src/config'
import { checksumAddress } from 'src/utils/checksumAddress'
-import { proposeTransaction, TransactionDetails } from '@gnosis.pm/safe-react-gateway-sdk'
import { GATEWAY_URL } from 'src/utils/constants'
+import { TxArgs } from '../store/models/types/transaction'
+
+type ProposeTxBody = Omit & {
+ safeInstance: GnosisSafe
+ data: string | number[]
+}
-const calculateBodyFrom = async (
- safeInstance: GnosisSafe,
+const calculateBodyFrom = async ({
+ safeInstance,
to,
- valueInWei,
+ value,
data,
operation,
nonce,
@@ -20,14 +27,14 @@ const calculateBodyFrom = async (
sender,
origin,
signature,
-) => {
+}: ProposeTxBody): Promise => {
const safeTxHash = await safeInstance.methods
- .getTransactionHash(to, valueInWei, data, operation, safeTxGas, baseGas, gasPrice, gasToken, refundReceiver, nonce)
+ .getTransactionHash(to, value, data, operation, safeTxGas, baseGas, gasPrice, gasToken, refundReceiver || '', nonce)
.call()
return {
to: checksumAddress(to),
- value: valueInWei,
+ value,
data,
operation,
nonce: nonce.toString(),
@@ -43,10 +50,7 @@ const calculateBodyFrom = async (
}
}
-interface SaveTxToHistoryArgs {
- safeInstance: GnosisSafe
- [key: string]: any
-}
+type SaveTxToHistoryTypes = TxArgs & { origin?: string | null; signature?: string }
export const saveTxToHistory = async ({
baseGas,
@@ -63,24 +67,24 @@ export const saveTxToHistory = async ({
signature,
to,
valueInWei,
-}: SaveTxToHistoryArgs): Promise => {
+}: SaveTxToHistoryTypes): Promise => {
const address = checksumAddress(safeInstance.options.address)
- const body = await calculateBodyFrom(
+ const body = await calculateBodyFrom({
safeInstance,
to,
- valueInWei,
+ value: valueInWei,
data,
operation,
- nonce,
+ nonce: nonce.toString(),
safeTxGas,
baseGas,
gasPrice,
gasToken,
refundReceiver,
sender,
- origin || null,
+ origin: origin ? origin : null,
signature,
- )
+ })
const txDetails = await proposeTransaction(GATEWAY_URL, _getChainId(), address, body)
return txDetails
}
diff --git a/src/logic/wallets/__tests__/ethTransactions.test.ts b/src/logic/wallets/__tests__/ethTransactions.test.ts
new file mode 100644
index 0000000000..c44223417e
--- /dev/null
+++ b/src/logic/wallets/__tests__/ethTransactions.test.ts
@@ -0,0 +1,102 @@
+import { setMaxPrioFeePerGas, getFeesPerGas } from 'src/logic/wallets/ethTransactions'
+
+describe('setMaxPrioFeePerGas', () => {
+ it('should return maxPriorityFeePerGas input if less than/equal to maxFeePerGas', () => {
+ expect(setMaxPrioFeePerGas(10, 20)).toEqual(10)
+ expect(setMaxPrioFeePerGas(20, 20)).toEqual(20)
+ })
+ it('should return maxFeePerGas input if maxPriorityFeePerGas is greater', () => {
+ expect(setMaxPrioFeePerGas(30, 20)).toEqual(20)
+ })
+})
+
+describe('getFeeHistory', () => {
+ const web3 = require('src/logic/wallets/getWeb3')
+ const web3Utils = require('web3-utils')
+
+ beforeEach(() => {
+ jest.restoreAllMocks()
+ })
+
+ it('should return the default maxFeePerGas/maxPriorityFeeGas if getFeeHistory threw', async () => {
+ jest.spyOn(web3, 'getWeb3ReadOnly').mockImplementationOnce(() => ({
+ eth: {
+ getFeeHistory: jest.fn(() => {
+ throw new Error()
+ }),
+ },
+ }))
+
+ expect(await getFeesPerGas()).toStrictEqual({
+ maxFeePerGas: 3.5e9,
+ maxPriorityFeePerGas: 2.5e9,
+ })
+ })
+ it('should return the default maxFeePerGas/maxPriorityFeeGas if hexToNumber threw', async () => {
+ jest.spyOn(web3Utils, 'hexToNumber').mockImplementationOnce(() => {
+ throw new Error()
+ })
+
+ expect(await getFeesPerGas()).toStrictEqual({
+ maxFeePerGas: 3.5e9,
+ maxPriorityFeePerGas: 2.5e9,
+ })
+ })
+ it('should return the default maxFeePerGas/maxPriorityFeeGas if maxPriorityFeePerGas is not a number', async () => {
+ jest.spyOn(web3, 'getWeb3ReadOnly').mockImplementationOnce(() => ({
+ eth: {
+ getFeeHistory: jest.fn(() => {
+ return {
+ baseFeePerGas: ['0xc86b1ba', '0xc35e3b0'],
+ gasUsedRatio: [0.39920479014424254],
+ oldestBlock: '0x9a9e7a',
+ reward: [['not a hex value']],
+ }
+ }),
+ },
+ }))
+
+ expect(await getFeesPerGas()).toStrictEqual({
+ maxFeePerGas: 3.5e9,
+ maxPriorityFeePerGas: 2.5e9,
+ })
+ })
+ it('should return the default maxFeePerGas/maxPriorityFeeGas if baseFeePerGas is not a number', async () => {
+ jest.spyOn(web3, 'getWeb3ReadOnly').mockImplementationOnce(() => ({
+ eth: {
+ getFeeHistory: jest.fn(() => {
+ return {
+ baseFeePerGas: ['not a hex value'],
+ gasUsedRatio: [0.39920479014424254],
+ oldestBlock: '0x9a9e7a',
+ reward: [['0x28ef440e']],
+ }
+ }),
+ },
+ }))
+
+ expect(await getFeesPerGas()).toStrictEqual({
+ maxFeePerGas: 3.5e9,
+ maxPriorityFeePerGas: 2.5e9,
+ })
+ })
+ it('should return maxFeePerGas (baseFeePerGas + maxPriorityFeePerGas)/maxPriorityFeePerGas if getFeeHistory returns a result and it was parsed correctly', async () => {
+ jest.spyOn(web3, 'getWeb3ReadOnly').mockImplementationOnce(() => ({
+ eth: {
+ getFeeHistory: jest.fn(() => {
+ return {
+ baseFeePerGas: ['0x28ef440e'],
+ gasUsedRatio: [0.39920479014424254],
+ oldestBlock: '0x9a9e7a',
+ reward: [['0x28ef440e']],
+ }
+ }),
+ },
+ }))
+
+ expect(await getFeesPerGas()).toStrictEqual({
+ maxFeePerGas: 1373538332,
+ maxPriorityFeePerGas: 686769166,
+ })
+ })
+})
diff --git a/src/logic/wallets/__tests__/getWeb3.test.ts b/src/logic/wallets/__tests__/getWeb3.test.ts
index cbf7b40228..bb9e6c0d7f 100644
--- a/src/logic/wallets/__tests__/getWeb3.test.ts
+++ b/src/logic/wallets/__tests__/getWeb3.test.ts
@@ -1,5 +1,5 @@
import Web3 from 'web3'
-import { isTxPendingError, isSmartContractWallet } from 'src/logic/wallets/getWeb3'
+import { isTxPendingError, isSmartContractWallet, getWeb3ReadOnly } from 'src/logic/wallets/getWeb3'
describe('src/logic/wallets/getWeb3', () => {
describe('isTxPendingError', () => {
@@ -14,51 +14,44 @@ describe('src/logic/wallets/getWeb3', () => {
})
})
+ jest.mock('src/logic/wallets/getWeb3', () => ({
+ getWeb3ReadOnly: jest.fn(),
+ }))
+
describe('isSmartContractWallet', () => {
+ const web3ReadOnly = getWeb3ReadOnly()
const address = '0x66fb75feC6b40119e023564dF954c8794Cd876F0'
it('checks if an address is a contract', async () => {
- const web3Provider = {
- eth: {
- getCode: jest.fn(() => Promise.resolve('Solidity code')),
- },
- } as unknown as Web3
- const result = await isSmartContractWallet(web3Provider, address)
- expect(web3Provider.eth.getCode).toHaveBeenCalledWith(address)
+ web3ReadOnly.eth.getCode = jest.fn(() => Promise.resolve('Solidity code'))
+
+ const result = await isSmartContractWallet(address)
+ expect(web3ReadOnly.eth.getCode).toHaveBeenCalledWith(address)
expect(result).toBe(true)
})
it('returns false for EoA addresses', async () => {
- const web3Provider = {
- eth: {
- getCode: jest.fn(() => Promise.resolve('0x00000000000000000000')),
- },
- } as unknown as Web3
- const result = await isSmartContractWallet(web3Provider, address)
- expect(web3Provider.eth.getCode).toHaveBeenCalledWith(address)
+ web3ReadOnly.eth.getCode = jest.fn(() => Promise.resolve('0x00000000000000000000'))
+
+ const result = await isSmartContractWallet(address)
+ expect(web3ReadOnly.eth.getCode).toHaveBeenCalledWith(address)
expect(result).toBe(false)
})
it('returns false for empty addresses', async () => {
- const web3Provider = {
- eth: {
- getCode: jest.fn(() => Promise.resolve('Solidity code')),
- },
- } as unknown as Web3
+ web3ReadOnly.eth.getCode = jest.fn(() => Promise.resolve('Solidity code'))
+
const emptyAddress = ''
- const result = await isSmartContractWallet(web3Provider, emptyAddress)
- expect(web3Provider.eth.getCode).not.toHaveBeenCalled()
+ const result = await isSmartContractWallet(emptyAddress)
+ expect(web3ReadOnly.eth.getCode).not.toHaveBeenCalled()
expect(result).toBe(false)
})
it('returns false if contract code cannot be fetched', async () => {
- const web3Provider = {
- eth: {
- getCode: jest.fn(() => Promise.reject('No code')),
- },
- } as unknown as Web3
- const result = await isSmartContractWallet(web3Provider, address)
- expect(web3Provider.eth.getCode).toHaveBeenCalledWith(address)
+ web3ReadOnly.eth.getCode = jest.fn(() => Promise.reject('No code'))
+
+ const result = await isSmartContractWallet(address)
+ expect(web3ReadOnly.eth.getCode).toHaveBeenCalledWith(address)
expect(result).toBe(false)
})
})
diff --git a/src/logic/wallets/ethTransactions.ts b/src/logic/wallets/ethTransactions.ts
index 7d8112b5be..ddd5aed00e 100644
--- a/src/logic/wallets/ethTransactions.ts
+++ b/src/logic/wallets/ethTransactions.ts
@@ -1,18 +1,67 @@
import { EthAdapterTransaction } from '@gnosis.pm/safe-core-sdk'
+import { GasPriceOracle } from '@gnosis.pm/safe-react-gateway-sdk'
import axios from 'axios'
import { BigNumber } from 'bignumber.js'
+import { FeeHistoryResult } from 'web3-eth'
+import { hexToNumber } from 'web3-utils'
+
import { getSDKWeb3ReadOnly, getWeb3, getWeb3ReadOnly } from 'src/logic/wallets/getWeb3'
import { getFixedGasPrice, getGasPriceOracles } from 'src/config'
-import { CodedException, Errors } from '../exceptions/CodedException'
-import { GasPriceOracle } from '@gnosis.pm/safe-react-gateway-sdk'
+import { CodedException, Errors, logError } from 'src/logic/exceptions/CodedException'
export const EMPTY_DATA = '0x'
+const DEFAULT_MAX_GAS_FEE = 3.5e9 // 3.5 GWEI
+const DEFAULT_MAX_PRIO_FEE = 2.5e9 // 2.5 GWEI
+
const fetchGasPrice = async (gasPriceOracle: GasPriceOracle): Promise => {
const { uri, gasParameter, gweiFactor } = gasPriceOracle
const { data: response } = await axios.get(uri)
const data = response.data || response.result || response // Sometimes the data comes with a data parameter
- return new BigNumber(data[gasParameter]).multipliedBy(gweiFactor).toString()
+
+ const gasPrice = new BigNumber(data[gasParameter]).multipliedBy(gweiFactor)
+ if (gasPrice.isNaN()) {
+ throw new Error('Fetched gas price is NaN')
+ }
+ return gasPrice.toString()
+}
+
+export const setMaxPrioFeePerGas = (maxPriorityFeePerGas: number, maxFeePerGas: number): number => {
+ return maxPriorityFeePerGas > maxFeePerGas ? maxFeePerGas : maxPriorityFeePerGas
+}
+
+export const getFeesPerGas = async (): Promise<{
+ maxFeePerGas: number
+ maxPriorityFeePerGas: number
+}> => {
+ let blocks: FeeHistoryResult | undefined
+ let maxPriorityFeePerGas: number | undefined
+ let baseFeePerGas: number | undefined
+
+ const web3 = getWeb3ReadOnly()
+
+ try {
+ // Lastest block, 50th reward percentile
+ blocks = await web3.eth.getFeeHistory(1, 'latest', [50])
+
+ // hexToNumber can throw if not parsing a valid hex string
+ baseFeePerGas = hexToNumber(blocks.baseFeePerGas[0])
+ maxPriorityFeePerGas = hexToNumber(blocks.reward[0][0])
+ } catch (err) {
+ logError(Errors._618, err.message)
+ }
+
+ if (!blocks || !maxPriorityFeePerGas || isNaN(maxPriorityFeePerGas) || !baseFeePerGas || isNaN(baseFeePerGas)) {
+ return {
+ maxFeePerGas: DEFAULT_MAX_GAS_FEE,
+ maxPriorityFeePerGas: DEFAULT_MAX_PRIO_FEE,
+ }
+ }
+
+ return {
+ maxFeePerGas: baseFeePerGas + maxPriorityFeePerGas,
+ maxPriorityFeePerGas,
+ }
}
export const calculateGasPrice = async (): Promise => {
diff --git a/src/logic/wallets/getWeb3.ts b/src/logic/wallets/getWeb3.ts
index 499af40042..0f6d2f4fa3 100644
--- a/src/logic/wallets/getWeb3.ts
+++ b/src/logic/wallets/getWeb3.ts
@@ -79,13 +79,13 @@ export const getChainIdFrom = (web3Provider: Web3): Promise => {
const isHardwareWallet = (walletName: string) =>
sameAddress(WALLET_PROVIDER.LEDGER, walletName) || sameAddress(WALLET_PROVIDER.TREZOR, walletName)
-export const isSmartContractWallet = async (web3Provider: Web3, account: string): Promise => {
+export const isSmartContractWallet = async (account: string): Promise => {
if (!account) {
return false
}
let contractCode = ''
try {
- contractCode = await web3Provider.eth.getCode(account)
+ contractCode = await getWeb3ReadOnly().eth.getCode(account)
} catch (e) {
// ignore
}
@@ -96,7 +96,7 @@ export const getProviderInfo = async (web3Instance: Web3, providerName = 'Wallet
const account = (await getAccountFrom(web3Instance)) || ''
const ensDomain = account ? await reverseENSLookup(account) : ''
const network = await getChainIdFrom(web3Instance)
- const smartContractWallet = await isSmartContractWallet(web3Instance, account)
+ const smartContractWallet = await isSmartContractWallet(account)
const hardwareWallet = isHardwareWallet(providerName)
const available = Boolean(account)
@@ -147,8 +147,6 @@ export const reverseENSLookup = async (address: string): Promise => {
return verifiedAddress === address ? name : ''
}
-export const removeTld = (name: string): string => name.replace(/\.[^.]+$/, '')
-
export const getContentFromENS = (name: string): Promise => web3.eth.ens.getContenthash(name)
export const isTxPendingError = (err: Error): boolean => {
diff --git a/src/logic/wallets/store/selectors/index.ts b/src/logic/wallets/store/selectors/index.ts
index b412337e10..80946bc79e 100644
--- a/src/logic/wallets/store/selectors/index.ts
+++ b/src/logic/wallets/store/selectors/index.ts
@@ -12,6 +12,11 @@ export const userAccountSelector = createSelector(providerSelector, (provider: P
return account || ''
})
+export const userEnsSelector = createSelector(providerSelector, (provider: ProviderState): string => {
+ const ensName = provider.get('ensDomain')
+ return ensName || ''
+})
+
export const providerNameSelector = createSelector(providerSelector, (provider: ProviderState): string | undefined => {
const name = provider.get('name')
return name ? name.toLowerCase() : undefined
diff --git a/src/routes/CreateSafePage/components/SafeCreationProcess.tsx b/src/routes/CreateSafePage/components/SafeCreationProcess.tsx
index 7ab96ad22e..d2b51a74d2 100644
--- a/src/routes/CreateSafePage/components/SafeCreationProcess.tsx
+++ b/src/routes/CreateSafePage/components/SafeCreationProcess.tsx
@@ -24,6 +24,7 @@ import {
FIELD_NEW_SAFE_PROXY_SALT,
FIELD_NEW_SAFE_GAS_PRICE,
FIELD_SAFE_OWNER_ENS_LIST,
+ FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE,
} from '../fields/createSafeFields'
import { getSafeInfo } from 'src/logic/safe/utils/safeInformation'
import { buildSafe } from 'src/logic/safe/store/actions/fetchSafe'
@@ -109,11 +110,13 @@ function SafeCreationProcess(): ReactElement {
const safeCreationSalt = safeCreationFormValues[FIELD_NEW_SAFE_PROXY_SALT]
const gasLimit = safeCreationFormValues[FIELD_NEW_SAFE_GAS_LIMIT]
const gasPrice = safeCreationFormValues[FIELD_NEW_SAFE_GAS_PRICE]
+ const gasMaxPrioFee = safeCreationFormValues[FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE]
const deploymentTx = getSafeDeploymentTransaction(ownerAddresses, confirmations, safeCreationSalt)
const sendParams = createSendParams(userAddressAccount, {
ethGasLimit: gasLimit.toString(),
ethGasPriceInGWei: gasPrice,
+ ethMaxPrioFeeInGWei: gasMaxPrioFee.toString(),
})
deploymentTx
diff --git a/src/routes/CreateSafePage/fields/createSafeFields.tsx b/src/routes/CreateSafePage/fields/createSafeFields.tsx
index c7157b983d..e3d7603376 100644
--- a/src/routes/CreateSafePage/fields/createSafeFields.tsx
+++ b/src/routes/CreateSafePage/fields/createSafeFields.tsx
@@ -7,6 +7,7 @@ export const FIELD_MAX_OWNER_NUMBER = 'maxOwnerNumber'
export const FIELD_NEW_SAFE_PROXY_SALT = 'safeCreationSalt'
export const FIELD_NEW_SAFE_GAS_LIMIT = 'gasLimit'
export const FIELD_NEW_SAFE_GAS_PRICE = 'gasPrice'
+export const FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE = 'gasMaxPrioFee'
export const FIELD_NEW_SAFE_CREATION_TX_HASH = 'safeCreationTxHash'
export type OwnerFieldItem = {
@@ -24,6 +25,7 @@ export type CreateSafeFormValues = {
[FIELD_NEW_SAFE_PROXY_SALT]: number
[FIELD_NEW_SAFE_GAS_LIMIT]: number
[FIELD_NEW_SAFE_GAS_PRICE]: string
+ [FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE]: number
[FIELD_NEW_SAFE_CREATION_TX_HASH]?: string
}
diff --git a/src/routes/CreateSafePage/steps/NameNewSafeStep.tsx b/src/routes/CreateSafePage/steps/NameNewSafeStep.tsx
index c221f7d061..6a1c6443a8 100644
--- a/src/routes/CreateSafePage/steps/NameNewSafeStep.tsx
+++ b/src/routes/CreateSafePage/steps/NameNewSafeStep.tsx
@@ -18,7 +18,7 @@ import {
} from '../fields/createSafeFields'
import { useStepper } from 'src/components/Stepper/stepperContext'
import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
-import { removeTld, reverseENSLookup } from 'src/logic/wallets/getWeb3'
+import { reverseENSLookup } from 'src/logic/wallets/getWeb3'
export const nameNewSafeStepLabel = 'Name'
@@ -45,10 +45,9 @@ function NameNewSafeStep(): ReactElement {
owners.map(async ({ addressFieldName }) => {
const address = formValues[addressFieldName]
const ensName = await reverseENSLookup(address)
- const ensDomain = removeTld(ensName)
return {
address,
- name: ensDomain,
+ name: ensName,
}
}),
)
diff --git a/src/routes/CreateSafePage/steps/OwnersAndConfirmationsNewSafeStep.tsx b/src/routes/CreateSafePage/steps/OwnersAndConfirmationsNewSafeStep.tsx
index ed47105989..e29d0e2c0a 100644
--- a/src/routes/CreateSafePage/steps/OwnersAndConfirmationsNewSafeStep.tsx
+++ b/src/routes/CreateSafePage/steps/OwnersAndConfirmationsNewSafeStep.tsx
@@ -38,7 +38,7 @@ import {
import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper'
import { currentNetworkAddressBookAsMap } from 'src/logic/addressBook/store/selectors'
import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
-import { removeTld, reverseENSLookup } from 'src/logic/wallets/getWeb3'
+import { reverseENSLookup } from 'src/logic/wallets/getWeb3'
export const ownersAndConfirmationsNewSafeStepLabel = 'Owners and Confirmations'
@@ -89,9 +89,8 @@ function OwnersAndConfirmationsNewSafeStep(): ReactElement {
const getENSName = async (address: string): Promise => {
const ensName = await reverseENSLookup(address)
- const ensDomain = removeTld(ensName)
const newOwnersWithENSName: Record = Object.assign(ownersWithENSName, {
- [address]: ensDomain,
+ [address]: ensName,
})
createSafeForm.change(FIELD_SAFE_OWNER_ENS_LIST, newOwnersWithENSName)
}
diff --git a/src/routes/CreateSafePage/steps/ReviewNewSafeStep.tsx b/src/routes/CreateSafePage/steps/ReviewNewSafeStep.tsx
index 0a988c7525..1495694e73 100644
--- a/src/routes/CreateSafePage/steps/ReviewNewSafeStep.tsx
+++ b/src/routes/CreateSafePage/steps/ReviewNewSafeStep.tsx
@@ -19,6 +19,7 @@ import {
FIELD_NEW_SAFE_THRESHOLD,
FIELD_SAFE_OWNER_ENS_LIST,
FIELD_SAFE_OWNERS_LIST,
+ FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE,
} from '../fields/createSafeFields'
import { getExplorerInfo, getNativeCurrency } from 'src/config'
import { useEstimateSafeCreationGas } from 'src/logic/hooks/useEstimateSafeCreationGas'
@@ -52,7 +53,7 @@ function ReviewNewSafeStep(): ReactElement | null {
const safeCreationSalt = createSafeFormValues[FIELD_NEW_SAFE_PROXY_SALT]
const ownerAddresses = owners.map(({ addressFieldName }) => createSafeFormValues[addressFieldName])
- const { gasCostFormatted, gasLimit, gasPrice } = useEstimateSafeCreationGas({
+ const { gasCostFormatted, gasLimit, gasPrice, gasMaxPrioFee } = useEstimateSafeCreationGas({
addresses: ownerAddresses,
numOwners: numberOfOwners,
safeCreationSalt,
@@ -62,7 +63,8 @@ function ReviewNewSafeStep(): ReactElement | null {
useEffect(() => {
createSafeForm.change(FIELD_NEW_SAFE_GAS_LIMIT, gasLimit)
createSafeForm.change(FIELD_NEW_SAFE_GAS_PRICE, gasPrice)
- }, [gasLimit, gasPrice, createSafeForm])
+ createSafeForm.change(FIELD_NEW_SAFE_GAS_MAX_PRIO_FEE, gasMaxPrioFee)
+ }, [gasLimit, gasPrice, createSafeForm, gasMaxPrioFee])
return (
diff --git a/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx b/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx
index a80dabd6e8..30e34f04c9 100644
--- a/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx
+++ b/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx
@@ -30,7 +30,7 @@ import {
import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
import { getLoadSafeName } from '../fields/utils'
import { currentChainId } from 'src/logic/config/store/selectors'
-import { removeTld, reverseENSLookup } from 'src/logic/wallets/getWeb3'
+import { reverseENSLookup } from 'src/logic/wallets/getWeb3'
export const loadSafeAddressStepLabel = 'Name and address'
@@ -74,8 +74,7 @@ function LoadSafeAddressStep(): ReactElement {
const ownersWithENSName = await Promise.all(
owners.map(async ({ value: address }) => {
const ensName = await reverseENSLookup(address)
- const ensDomain = removeTld(ensName)
- return makeAddressBookEntry({ address, name: ensDomain, chainId })
+ return makeAddressBookEntry({ address, name: ensName, chainId })
}),
)
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index cd0df60745..5082c1cbb5 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,31 +1,26 @@
import React from 'react'
import { Loader } from '@gnosis.pm/safe-react-components'
-import { useEffect } from 'react'
import { useSelector } from 'react-redux'
-import { matchPath, Redirect, Route, Switch, useLocation } from 'react-router-dom'
+import { Redirect, Route, Switch, useLocation } from 'react-router-dom'
import { LoadingContainer } from 'src/components/LoaderContainer'
-import { useAnalytics } from 'src/utils/googleAnalytics'
import { lastViewedSafe } from 'src/logic/currentSession/store/selectors'
import {
generateSafeRoute,
- getPrefixedSafeAddressSlug,
LOAD_SPECIFIC_SAFE_ROUTE,
OPEN_SAFE_ROUTE,
ADDRESSED_ROUTE,
SAFE_ROUTES,
WELCOME_ROUTE,
- hasPrefixedSafeAddressInUrl,
ROOT_ROUTE,
LOAD_SAFE_ROUTE,
getNetworkRootRoutes,
- TRANSACTION_ID_SLUG,
+ extractSafeAddress,
} from './routes'
import { getShortName } from 'src/config'
import { setChainId } from 'src/logic/config/utils'
-import { isDeeplinkedTx } from './safe/components/Transactions/TxList/utils'
-import { useAddressedRouteKey } from './safe/container/hooks/useAddressedRouteKey'
import { setChainIdFromUrl } from 'src/utils/history'
+import useGaEvents from 'src/logic/hooks/useGaEvents'
const Welcome = React.lazy(() => import('./welcome/Welcome'))
const CreateSafePage = React.lazy(() => import('./CreateSafePage/CreateSafePage'))
@@ -34,33 +29,11 @@ const SafeContainer = React.lazy(() => import('./safe/container'))
const Routes = (): React.ReactElement => {
const location = useLocation()
- const { pathname, search } = location
+ const { pathname } = location
const defaultSafe = useSelector(lastViewedSafe)
- const { trackPage } = useAnalytics()
- // Component key that changes when addressed route slug changes
- const { key } = useAddressedRouteKey()
-
- // Google Analytics
- useEffect(() => {
- let trackedPath = pathname
-
- // Anonymize safe address
- if (hasPrefixedSafeAddressInUrl()) {
- trackedPath = trackedPath.replace(getPrefixedSafeAddressSlug(), 'SAFE_ADDRESS')
- }
-
- // Anonymize deeplinked transaction
- if (isDeeplinkedTx()) {
- const match = matchPath(pathname, {
- path: SAFE_ROUTES.TRANSACTIONS_SINGULAR,
- })
-
- trackedPath = trackedPath.replace(match?.params[TRANSACTION_ID_SLUG], 'TRANSACTION_ID')
- }
-
- trackPage(trackedPath + search)
- }, [pathname, search, trackPage])
+ // Anonymize and track page views
+ useGaEvents()
return (
@@ -132,7 +105,9 @@ const Routes = (): React.ReactElement => {
render={() => {
// Routes with a shortName prefix
const validShortName = setChainIdFromUrl(pathname)
- return validShortName ? (history.location.pathname, {
- // Routes that have addresses in URL
- path: [ADDRESSED_ROUTE, LOAD_SPECIFIC_SAFE_ROUTE],
- })
- return !!match?.params?.[SAFE_ADDRESS_SLUG]
-}
-
export const extractShortChainName = (): ShortName => extractPrefixedSafeAddress().shortName
export const extractSafeAddress = (): string => extractPrefixedSafeAddress().safeAddress
diff --git a/src/routes/safe/components/Apps/communicator.ts b/src/routes/safe/components/Apps/communicator.ts
index d4a4c4a747..f4dd43e1b7 100644
--- a/src/routes/safe/components/Apps/communicator.ts
+++ b/src/routes/safe/components/Apps/communicator.ts
@@ -8,7 +8,7 @@ import {
MessageFormatter,
RequestId,
} from '@gnosis.pm/safe-apps-sdk'
-import { trackError, Errors } from 'src/logic/exceptions/CodedException'
+import { Errors, logError } from 'src/logic/exceptions/CodedException'
import { SafeApp } from './types'
type MessageHandler = (
@@ -35,6 +35,10 @@ class AppCommunicator {
}
private isValidMessage = (msg: SDKMessageEvent): boolean => {
+ if (msg.data.hasOwnProperty('isCookieEnabled')) {
+ return true
+ }
+
// @ts-expect-error .parent doesn't exist on some possible types
const sentFromIframe = msg.source.parent === window.parent
const knownMethod = Object.values(Methods).includes(msg.data.method)
@@ -71,7 +75,7 @@ class AppCommunicator {
}
} catch (err) {
this.send(err.message, msg.data.id, true)
- trackError(Errors._901, err.message, {
+ logError(Errors._901, err.message, {
contexts: {
safeApp: this.app,
request: msg.data,
diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index d9b93abc78..7128c773fd 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -32,6 +32,8 @@ import { logError, Errors } from 'src/logic/exceptions/CodedException'
import { addressBookEntryName } from 'src/logic/addressBook/store/selectors'
import { useSignMessageModal } from '../hooks/useSignMessageModal'
import { SignMessageModal } from './SignMessageModal'
+import { useThirdPartyCookies } from '../hooks/useThirdPartyCookies'
+import { ThirdPartyCookiesWarning } from './ThirdPartyCookiesWarning'
const AppWrapper = styled.div`
display: flex;
@@ -100,6 +102,7 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
const [isLoadingSlow, setIsLoadingSlow] = useState(false)
const errorTimer = useRef()
const [, setAppLoadError] = useState(false)
+ const { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled } = useThirdPartyCookies()
useEffect(() => {
const clearTimeouts = () => {
@@ -307,6 +310,7 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
return (
+ {thirdPartyCookiesDisabled && setThirdPartyCookiesDisabled(false)} />}
{appIsLoading && (
diff --git a/src/routes/safe/components/Apps/components/ConfirmTxModal/DecodedTxDetail.tsx b/src/routes/safe/components/Apps/components/ConfirmTxModal/DecodedTxDetail.tsx
index f7e5e1a69e..0b3a797954 100644
--- a/src/routes/safe/components/Apps/components/ConfirmTxModal/DecodedTxDetail.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTxModal/DecodedTxDetail.tsx
@@ -4,28 +4,26 @@ import { DecodedDataParameterValue, DecodedDataResponse } from '@gnosis.pm/safe-
import { getNativeCurrency } from 'src/config'
import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { md, lg } from 'src/theme/variables'
-import ModalTitle from 'src/components/ModalTitle'
-import Hairline from 'src/components/layout/Hairline'
import { BasicTxInfo, getParameterElement } from 'src/components/DecodeTxs'
+import { DecodedTxDetailType } from 'src/routes/safe/components/Apps/components/ConfirmTxModal/index'
const Container = styled.div`
- max-width: 480px;
- padding: ${md} ${lg};
word-break: break-word;
+
+ & > div:last-child {
+ margin: 0;
+ }
`
-function isDataDecodedParameterValue(arg: any): arg is DecodedDataParameterValue {
- return arg.operation !== undefined
+export function isDataDecodedParameterValue(arg: DecodedTxDetailType): arg is DecodedDataParameterValue {
+ return arg ? arg.hasOwnProperty('operation') : false
}
type Props = {
- hideDecodedTxData: () => void
- onClose: () => void
decodedTxData: DecodedDataParameterValue | DecodedDataResponse
}
-export const DecodedTxDetail = ({ hideDecodedTxData, onClose, decodedTxData: tx }: Props): ReactElement => {
+export const DecodedTxDetail = ({ decodedTxData: tx }: Props): ReactElement => {
const nativeCurrency = getNativeCurrency()
let body
// If we are dealing with a multiSend
@@ -45,17 +43,5 @@ export const DecodedTxDetail = ({ hideDecodedTxData, onClose, decodedTxData: tx
body = <>{tx.parameters.map((p, index) => getParameterElement(p, index))}
}
- return (
- <>
- {body}
-
- )
+ return {body}
}
diff --git a/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx b/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
index b8f7d7b0d4..83a8689d51 100644
--- a/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
@@ -4,7 +4,6 @@ import { ReactElement, useEffect, useMemo, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import styled from 'styled-components'
import { toBN } from 'web3-utils'
-import { DecodedDataResponse } from '@gnosis.pm/safe-react-gateway-sdk'
import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
import { getMultisendContractAddress } from 'src/logic/contracts/safeContracts'
@@ -22,9 +21,11 @@ import Hairline from 'src/components/layout/Hairline'
import Divider from 'src/components/Divider'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
-import { ConfirmTxModalProps, DecodedTxDetail } from '.'
+import { ConfirmTxModalProps, DecodedTxDetailType } from '.'
import { grantedSelector } from 'src/routes/safe/container/selector'
import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/TxModalWrapper'
+import Paragraph from 'src/components/layout/Paragraph'
+import Row from 'src/components/layout/Row'
const Container = styled.div`
max-width: 480px;
@@ -32,7 +33,7 @@ const Container = styled.div`
`
const DecodeTxsWrapper = styled.div`
- margin: 24px -24px;
+ margin: 0;
`
const StyledBlock = styled(Block)`
@@ -51,8 +52,6 @@ const StyledBlock = styled(Block)`
type Props = ConfirmTxModalProps & {
onReject: () => void
- showDecodedTxData: (decodedTxDetails: DecodedTxDetail) => void
- hidden: boolean // used to prevent re-rendering the modal each time a tx is inspected
}
const parseTxValue = (value: string | number): string => {
@@ -65,15 +64,13 @@ export const ReviewConfirm = ({
safeAddress,
ethBalance,
safeName,
- hidden,
onUserConfirm,
onClose,
onReject,
requestId,
- showDecodedTxData,
}: Props): ReactElement => {
const isMultiSend = txs.length > 1
- const [decodedData, setDecodedData] = useState(null)
+ const [decodedData, setDecodedData] = useState()
const dispatch = useDispatch()
const nativeCurrency = getNativeCurrency()
const explorerUrl = getExplorerInfo(safeAddress)
@@ -95,12 +92,18 @@ export const ReviewConfirm = ({
// Decode tx data.
useEffect(() => {
+ let isCurrent = true
const decodeTxData = async () => {
const res = await fetchTxDecoder(txData)
- setDecodedData(res)
+ if (res && isCurrent) {
+ setDecodedData(res)
+ }
}
decodeTxData()
+ return () => {
+ isCurrent = false
+ }
}, [txData])
const handleUserConfirmation = (safeTxHash: string): void => {
@@ -133,21 +136,34 @@ export const ReviewConfirm = ({
return (
-
-
@@ -98,7 +101,7 @@ const DevTools = (): ReactElement => {
+
{/* Safe */}
-
+
+ Sending from
+
+
+
Balance:
{`${ethBalance} ${nativeCurrency.symbol}`}
@@ -162,11 +178,11 @@ export const ReviewConfirm = ({
txValue={fromTokenUnit(txValue, nativeCurrency.decimals)}
/>
-
-
-
- {!isMultiSend &&
+
+ )}
diff --git a/src/routes/safe/components/Apps/components/ConfirmTxModal/index.tsx b/src/routes/safe/components/Apps/components/ConfirmTxModal/index.tsx
index 88b35c8358..79c5ac9650 100644
--- a/src/routes/safe/components/Apps/components/ConfirmTxModal/index.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTxModal/index.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react'
+import { ReactElement } from 'react'
import { Transaction } from '@gnosis.pm/safe-apps-sdk-v1'
import { RequestId } from '@gnosis.pm/safe-apps-sdk'
import { DecodedDataParameterValue, DecodedDataResponse } from '@gnosis.pm/safe-react-gateway-sdk'
@@ -9,7 +9,6 @@ import { TransactionParams } from 'src/routes/safe/components/Apps/components/Ap
import { mustBeEthereumAddress } from 'src/components/forms/validator'
import { SafeAppLoadError } from './SafeAppLoadError'
import { ReviewConfirm } from './ReviewConfirm'
-import { DecodedTxDetail } from './DecodedTxDetail'
export type ConfirmTxModalProps = {
isOpen: boolean
@@ -38,25 +37,16 @@ const isTxValid = (t: Transaction): boolean => {
return isAddressValid && !!t.data && typeof t.data === 'string'
}
-export type DecodedTxDetail = DecodedDataParameterValue | DecodedDataResponse | undefined
+export type DecodedTxDetailType = DecodedDataParameterValue | DecodedDataResponse | undefined
export const ConfirmTxModal = (props: ConfirmTxModalProps): ReactElement => {
- const [decodedTxDetails, setDecodedTxDetails] = useState()
const invalidTransactions = !props.txs.length || props.txs.some((t) => !isTxValid(t))
- const showDecodedTxData = setDecodedTxDetails
- const hideDecodedTxData = () => setDecodedTxDetails(undefined)
-
const rejectTransaction = () => {
props.onClose()
props.onTxReject(props.requestId)
}
- const closeDecodedTxDetail = () => {
- hideDecodedTxData()
- rejectTransaction()
- }
-
if (invalidTransactions) {
return (
@@ -67,20 +57,7 @@ export const ConfirmTxModal = (props: ConfirmTxModalProps): ReactElement => {
return (
- {decodedTxDetails && (
-
)
}
diff --git a/src/routes/safe/components/Apps/components/SignMessageModal/ReviewMessage.tsx b/src/routes/safe/components/Apps/components/SignMessageModal/ReviewMessage.tsx
index 150f4c57ed..799cb892cf 100644
--- a/src/routes/safe/components/Apps/components/SignMessageModal/ReviewMessage.tsx
+++ b/src/routes/safe/components/Apps/components/SignMessageModal/ReviewMessage.tsx
@@ -117,9 +117,9 @@ export const ReviewMessage = ({
txData={txData}
txTo={txRecipient}
onSubmit={confirmTransactions}
- onBack={handleTxRejection}
+ onClose={handleTxRejection}
operation={Operation.DELEGATE}
- isConfirmDisabled={!isOwner}
+ isSubmitDisabled={!isOwner}
>
{/* Safe */}
-
Balance:
{`${ethBalance} ${nativeCurrency.symbol}`}
diff --git a/src/routes/safe/components/Apps/components/ThirdPartyCookiesWarning.tsx b/src/routes/safe/components/Apps/components/ThirdPartyCookiesWarning.tsx
new file mode 100644
index 0000000000..003abcee82
--- /dev/null
+++ b/src/routes/safe/components/Apps/components/ThirdPartyCookiesWarning.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import MuiAlert from '@material-ui/lab/Alert'
+import MuiAlertTitle from '@material-ui/lab/AlertTitle'
+import { Link } from '@gnosis.pm/safe-react-components'
+
+type Props = {
+ onClose: () => void
+}
+
+const HELP_LINK =
+ 'https://help.gnosis-safe.io/en/articles/5955031-why-do-i-need-to-enable-third-party-cookies-for-safe-apps'
+
+export const ThirdPartyCookiesWarning = ({ onClose }: Props): React.ReactElement => {
+ return (
+
+
+ Third party cookies are disabled. Safe Apps may therefore not work properly. You can find out more information
+ about this{' '}
+
+ here
+
+
+
+ )
+}
diff --git a/src/routes/safe/components/Apps/hooks/useThirdPartyCookies.ts b/src/routes/safe/components/Apps/hooks/useThirdPartyCookies.ts
new file mode 100644
index 0000000000..6fa592a6cc
--- /dev/null
+++ b/src/routes/safe/components/Apps/hooks/useThirdPartyCookies.ts
@@ -0,0 +1,71 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+
+const THIRD_PARTY_COOKIES_CHECK_URL = 'https://third-party-cookies-check.gnosis-safe.com'
+const SHOW_ALERT_TIMEOUT = 10000
+
+const isSafari = (): boolean => {
+ return navigator.userAgent.indexOf('Safari') > -1 && navigator.userAgent.indexOf('Chrome') <= -1
+}
+
+const createIframe = (uri: string, onload: () => void): HTMLIFrameElement => {
+ const iframeElement: HTMLIFrameElement = document.createElement('iframe')
+
+ iframeElement.src = uri
+ iframeElement.setAttribute('style', 'display:none')
+ iframeElement.onload = onload
+
+ return iframeElement
+}
+
+type ThirdPartyCookiesType = {
+ thirdPartyCookiesDisabled: boolean
+ setThirdPartyCookiesDisabled: (value: boolean) => void
+}
+
+const useThirdPartyCookies = (): ThirdPartyCookiesType => {
+ const iframeRef = useRef()
+ const [thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled] = useState(false)
+
+ const messageHandler = useCallback((event: MessageEvent) => {
+ const data = event.data
+
+ try {
+ if (data.hasOwnProperty('isCookieEnabled')) {
+ setThirdPartyCookiesDisabled(!data.isCookieEnabled)
+ window.removeEventListener('message', messageHandler)
+ document.body.removeChild(iframeRef.current as Node)
+ }
+ } catch (e) {
+ console.error(e)
+ }
+ }, [])
+
+ useEffect(() => {
+ if (isSafari()) {
+ return
+ }
+
+ window.addEventListener('message', messageHandler)
+
+ const iframeElement: HTMLIFrameElement = createIframe(THIRD_PARTY_COOKIES_CHECK_URL, () =>
+ iframeElement?.contentWindow?.postMessage({ test: 'cookie' }, '*'),
+ )
+
+ iframeRef.current = iframeElement
+ document.body.appendChild(iframeElement)
+ }, [messageHandler])
+
+ useEffect(() => {
+ let id: ReturnType
+
+ if (thirdPartyCookiesDisabled) {
+ id = setTimeout(() => setThirdPartyCookiesDisabled(false), SHOW_ALERT_TIMEOUT)
+ }
+
+ return () => clearTimeout(id)
+ }, [thirdPartyCookiesDisabled])
+
+ return { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled }
+}
+
+export { useThirdPartyCookies }
diff --git a/src/routes/safe/components/Balances/SendModal/SafeInfo/index.tsx b/src/routes/safe/components/Balances/SendModal/SafeInfo/index.tsx
index d944d8e7e5..9f588ebc17 100644
--- a/src/routes/safe/components/Balances/SendModal/SafeInfo/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/SafeInfo/index.tsx
@@ -7,6 +7,7 @@ import Paragraph from 'src/components/layout/Paragraph'
import Bold from 'src/components/layout/Bold'
import { border, xs } from 'src/theme/variables'
import Block from 'src/components/layout/Block'
+import Row from 'src/components/layout/Row'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
const StyledBlock = styled(Block)`
@@ -21,15 +22,27 @@ const StyledBlock = styled(Block)`
border-radius: 3px;
`
-const SafeInfo = (): React.ReactElement => {
+type SafeInfoProps = {
+ text?: string
+}
+
+const SafeInfo = ({ text }: SafeInfoProps): React.ReactElement => {
const { address: safeAddress, ethBalance, name: safeName } = useSelector(currentSafeWithNames)
const nativeCurrency = getNativeCurrency()
return (
<>
+ {text && (
+
+
+ {text}
+
+
+ )}
{
+ return (
+
+
+ 
+
+
+ {text}
+
+
+ )
+}
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 bb1617e97d..c9b5138656 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx
@@ -78,6 +78,7 @@ const ChooseTxType = ({
-
+
Value
{
return (
<>
-
+
Call result:
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
index 6de5e80a1a..fcbe0b2df4 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@@ -7,7 +7,6 @@ import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import Block from 'src/components/layout/Block'
import Col from 'src/components/layout/Col'
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 PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
@@ -15,7 +14,6 @@ import { AbiItemExtended } from 'src/logic/contractInteraction/sources/ABIServic
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style'
-import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
import {
@@ -26,6 +24,8 @@ import { addressBookEntryName } from 'src/logic/addressBook/store/selectors'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
import { extractSafeAddress } from 'src/routes/routes'
import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/TxModalWrapper'
+import { TransferAmount } from 'src/routes/safe/components/Balances/SendModal/TransferAmount'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
const useStyles = makeStyles(styles)
@@ -96,11 +96,14 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
onSubmit={submitTx}
onBack={onPrev}
>
-
+
+
-
+
Contract Address
@@ -108,36 +111,19 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
-
- Value
-
-
-
- .logoUri)
-
-
-
- {tx.value || 0}
- {' ' + nativeCurrency.symbol}
-
-
-
-
-
-
+
Method
-
-
+
+
{tx.selectedMethod?.name}
@@ -148,12 +134,12 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
return (
-
+
{name} ({type})
-
+
{value}
@@ -161,13 +147,13 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
)
})}
-
+
Data (hex encoded)
-
+
+
{tx.data}
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 071eb6b14a..832070eba2 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -8,7 +8,6 @@ import Divider from 'src/components/Divider'
import Block from 'src/components/layout/Block'
import Col from 'src/components/layout/Col'
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 PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
@@ -16,12 +15,13 @@ import { createTransaction } from 'src/logic/safe/store/actions/createTransactio
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
-import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
import { styles } from './style'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
import { extractSafeAddress } from 'src/routes/routes'
import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/TxModalWrapper'
+import { TransferAmount } from 'src/routes/safe/components/Balances/SendModal/TransferAmount'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
export type ReviewCustomTxProps = {
contractAddress: string
@@ -71,13 +71,16 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): ReactElement => {
return (
-
-
+
+
-
+
Recipient
@@ -87,6 +90,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): ReactElement => {
{
-
- Value
-
-
-
-
-
- {tx.value || 0}
- {' ' + nativeCurrency.symbol}
-
-
-
-
+
Data (hex encoded)
-
+
{tx.data}
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
index 44a5c9b7bf..b987384cae 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts
@@ -1,4 +1,4 @@
-import { border, lg, md, sm } from 'src/theme/variables'
+import { lg, md, sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
@@ -10,14 +10,12 @@ export const styles = createStyles({
},
outerData: {
borderRadius: '5px',
- border: `1px solid ${border}`,
- padding: '11px',
minHeight: '21px',
},
data: {
wordBreak: 'break-all',
overflow: 'auto',
- fontSize: '14px',
+ fontSize: '16px',
fontFamily: 'Averta',
maxHeight: '100px',
letterSpacing: 'normal',
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
index 49c7d13d93..485d1d956f 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
@@ -26,6 +26,7 @@ import { getNativeCurrency } from 'src/config'
import { EthAddressInput } from '../EthAddressInput'
import { ensResolver, formMutators } from '../utils'
import Buttons from '../Buttons'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
export interface CreatedTx {
contractAddress: string
@@ -69,7 +70,7 @@ const SendCustomTx = ({ initialValues, isABI, onClose, onNext, switchMethod }: P
Contract interaction
- 1 of 2
+ {getStepTitle(1, 2)}
@@ -97,7 +98,7 @@ const SendCustomTx = ({ initialValues, isABI, onClose, onNext, switchMethod }: P
/>
+
Value
@@ -131,7 +132,7 @@ const SendCustomTx = ({ initialValues, isABI, onClose, onNext, switchMethod }: P
/>
-
+
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
index 89ac7da3d5..7896eb677b 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
@@ -21,6 +21,7 @@ import { TransactionReviewType } from './Review'
import { NativeCoinValue } from './NativeCoinValue'
import { ModalHeader } from '../ModalHeader'
import { extractSafeAddress } from 'src/routes/routes'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
const useStyles = makeStyles(styles)
@@ -93,7 +94,7 @@ const ContractInteraction: React.FC = ({
return (
<>
- = ({
+
saveForm(rest.values)} />
Use custom data (hex encoded)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
index d77f68104e..24dbce537c 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/style.ts
@@ -1,4 +1,4 @@
-import { lg, md, sm, border } from 'src/theme/variables'
+import { lg, md, sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
@@ -13,15 +13,12 @@ export const styles = createStyles({
marginLeft: sm,
},
outerData: {
- borderRadius: '5px',
- border: `1px solid ${border}`,
- padding: '11px',
minHeight: '21px',
},
data: {
wordBreak: 'break-all',
overflow: 'auto',
- fontSize: '14px',
+ fontSize: '16px',
fontFamily: 'Averta',
maxHeight: '100px',
letterSpacing: 'normal',
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/index.tsx
index 4147adad88..0432b1b667 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/index.tsx
@@ -1,16 +1,31 @@
+import { ReactElement, ReactNode } from 'react'
import IconButton from '@material-ui/core/IconButton'
import { makeStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close'
-import { ReactElement, ReactNode } from 'react'
+import { Theme } from '@gnosis.pm/safe-react-gateway-sdk'
import ChainIndicator from 'src/components/ChainIndicator'
import Paragraph from 'src/components/layout/Paragraph'
import Row from 'src/components/layout/Row'
-import { getChainInfo } from 'src/config'
+import { getChainById, getChainInfo } from 'src/config'
import { styles } from './style'
+import styled from 'styled-components'
+import { smallFontSize, xs, sm, border, primary } from 'src/theme/variables'
const useStyles = makeStyles(styles)
+const ChainIndicatorWrapper = styled(Row)<{ $chainTheme: Theme }>`
+ font-size: ${smallFontSize};
+ padding: ${xs} ${sm};
+ background-color: ${({ $chainTheme }) => $chainTheme.backgroundColor ?? border};
+ color: ${({ $chainTheme }) => $chainTheme.textColor ?? primary};
+ border-radius: 4px;
+ align-items: center;
+ white-space: nowrap;
+ overflow: hidden;
+ margin-right: 20px;
+`
+
interface HeaderProps {
onClose: () => unknown
subTitle?: string
@@ -21,17 +36,20 @@ interface HeaderProps {
export const ModalHeader = ({ onClose, subTitle, title, iconUrl }: HeaderProps): ReactElement => {
const classes = useStyles()
const connectedNetwork = getChainInfo()
+ const { theme } = getChainById(connectedNetwork.chainId)
return (
{iconUrl && 
}
-
+
{title}
- {subTitle}
-
- {connectedNetwork.chainId &&
+
+ {subTitle}
+
+
+ {connectedNetwork.chainId &&
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/style.ts
index d303b67c0c..1c35b87eb4 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/style.ts
@@ -10,27 +10,18 @@ export const styles = createStyles({
flexWrap: 'nowrap',
},
annotation: {
- letterSpacing: '-1px',
color: secondaryText,
marginRight: 'auto',
- marginLeft: '20px',
+ marginLeft: '8px',
whiteSpace: 'nowrap',
flex: 1,
},
headingText: {
- fontSize: lg,
whiteSpace: 'nowrap',
},
closeIcon: {
- height: '35px',
- width: '35px',
- },
- chainIndicator: {
- padding: `0 ${md}`,
- height: '20px',
- alignItems: 'center',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
+ height: '24px',
+ width: '24px',
},
icon: {
width: '20px',
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 b9a4f9733d..5bdf34e413 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -24,6 +24,7 @@ import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionPara
import { extractSafeAddress } from 'src/routes/routes'
import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/TxModalWrapper'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
const useStyles = makeStyles(styles)
@@ -101,13 +102,13 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
return (
-
-
-
+
Recipient
@@ -116,6 +117,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
-
+
{textShortener({ charsStart: 40, charsEnd: 0 })(tx.assetName)}
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx
index 1b73996f67..07440abd93 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx
@@ -9,7 +9,6 @@ import Divider from 'src/components/Divider'
import Block from 'src/components/layout/Block'
import Col from 'src/components/layout/Col'
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 PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
@@ -20,7 +19,6 @@ import { getERC20TokenContract } from 'src/logic/tokens/store/actions/fetchToken
import { sameAddress, ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
-import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
import { extendedSafeTokensSelector } from 'src/routes/safe/container/selector'
import { SpendingLimit } from 'src/logic/safe/store/models/safe'
import { TokenProps } from 'src/logic/tokens/store/model/token'
@@ -33,6 +31,8 @@ import { extractSafeAddress } from 'src/routes/routes'
import { getNativeCurrencyAddress } from 'src/config/utils'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
import { isSpendingLimit } from 'src/routes/safe/components/Transactions/helpers/utils'
+import { TransferAmount } from 'src/routes/safe/components/Balances/SendModal/TransferAmount'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
const useStyles = makeStyles(styles)
@@ -86,7 +86,7 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
const dispatch = useDispatch()
const safeAddress = extractSafeAddress()
const nativeCurrency = getNativeCurrency()
- const tokens: any = useSelector(extendedSafeTokensSelector)
+ const tokens = useSelector(extendedSafeTokensSelector)
const txToken = useMemo(() => tokens.find((token) => sameAddress(token.address, tx.token)), [tokens, tx.token])
const isSendingNativeToken = useMemo(() => sameAddress(txToken?.address, getNativeCurrencyAddress()), [txToken])
const txRecipient = isSendingNativeToken ? tx.recipientAddress : txToken?.address || ''
@@ -144,18 +144,25 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
onBack={onPrev}
>
{/* Header */}
-
+ {/* Amount */}
+ {txToken && (
+
+
+ )}
+
{/* SafeInfo */}
-
-
+
Recipient
@@ -164,30 +171,13 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
-
- {/* Amount */}
-
-
- Amount
-
-
-
- 
-
- {tx.amount} {txToken?.symbol}
-
-
)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
index 7a6ddf804a..1b1dbd6898 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
@@ -28,6 +28,7 @@ import TokenSelectField from './TokenSelectField'
import { Erc721Transfer } from '@gnosis.pm/safe-react-gateway-sdk'
import { ModalHeader } from '../ModalHeader'
import { mustBeEthereumAddress } from 'src/components/forms/validator'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
const formMutators = {
setMax: (args, state, utils) => {
@@ -115,7 +116,7 @@ const SendCollectible = ({
return (
<>
-
{(...args) => {
@@ -156,7 +157,7 @@ const SendCollectible = ({
<>
-
-
+
Recipient
@@ -182,6 +183,7 @@ const SendCollectible = ({
+
Collectible
@@ -226,7 +228,7 @@ const SendCollectible = ({
+
Token ID
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
index 993dd5571a..dd4430092f 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
@@ -46,6 +46,7 @@ import Divider from 'src/components/Divider'
import { Modal } from 'src/components/Modal'
import { ModalHeader } from '../ModalHeader'
import { isSpendingLimit } from 'src/routes/safe/components/Transactions/helpers/utils'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
const formMutators = {
setMax: (args, state, utils) => {
@@ -174,7 +175,7 @@ const SendFunds = ({
return (
<>
-
-
-
-
+
+
Recipient
@@ -269,6 +270,7 @@ const SendFunds = ({
+
Amount
diff --git a/src/routes/safe/components/Balances/SendModal/utils.tsx b/src/routes/safe/components/Balances/SendModal/utils.tsx
new file mode 100644
index 0000000000..1f02a91844
--- /dev/null
+++ b/src/routes/safe/components/Balances/SendModal/utils.tsx
@@ -0,0 +1 @@
+export const getStepTitle = (currentStep: number, totalSteps: number): string => `Step ${currentStep} of ${totalSteps}`
diff --git a/src/routes/safe/components/FetchError.tsx b/src/routes/safe/components/FetchError.tsx
new file mode 100644
index 0000000000..56a50c765f
--- /dev/null
+++ b/src/routes/safe/components/FetchError.tsx
@@ -0,0 +1,44 @@
+import { ReactElement } from 'react'
+import { Link } from 'react-router-dom'
+import { Title } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
+import Button from 'src/components/layout/Button'
+
+interface FetchErrorProps {
+ text: string
+ buttonText: string
+ redirectRoute: string
+}
+
+const StyledLink = styled(Link)`
+ text-decoration: none;
+`
+
+const ErrorContainer = styled.div`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ // Offset so that it is centered relative to the header
+ margin-top: -30px;
+`
+
+const FetchError = ({ text, buttonText, redirectRoute }: FetchErrorProps): ReactElement => {
+ return (
+
+ 
+
+ {text}
+
+
+
+
+
+ )
+}
+
+export default FetchError
diff --git a/src/routes/safe/components/SafeLoadError.tsx b/src/routes/safe/components/SafeLoadError.tsx
index 9ce0f64de6..424cea421e 100644
--- a/src/routes/safe/components/SafeLoadError.tsx
+++ b/src/routes/safe/components/SafeLoadError.tsx
@@ -1,16 +1,11 @@
import { ReactElement, useEffect } from 'react'
-import { useHistory } from 'react-router-dom'
-import { Title } from '@gnosis.pm/safe-react-components'
-import styled from 'styled-components'
-
-import Button from 'src/components/layout/Button'
import { extractSafeAddress, WELCOME_ROUTE } from 'src/routes/routes'
import { useDispatch } from 'react-redux'
import removeViewedSafe from 'src/logic/currentSession/store/actions/removeViewedSafe'
+import FetchError from './FetchError'
const SafeLoadError = (): ReactElement => {
const dispatch = useDispatch()
- const history = useHistory()
useEffect(() => {
// Remove the errorneous Safe from the list of viewed safes on unmount
@@ -19,30 +14,7 @@ const SafeLoadError = (): ReactElement => {
}
}, [dispatch])
- const handleClick = () => {
- history.push(WELCOME_ROUTE)
- }
-
- return (
-
-
- This Safe couldn't be loaded
-
-
- )
+ return
+
diff --git a/src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx b/src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx
index 6dcf7d46d9..1a1d03854d 100644
--- a/src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx
+++ b/src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx
@@ -88,7 +88,7 @@ export const RemoveModuleModal = ({ onClose, selectedModuleAddress }: RemoveModu
title="Remove Module"
open
>
-
+
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.tsx
index 634da9e8ec..5b6c942dd8 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.tsx
@@ -30,6 +30,7 @@ import { isValidAddress } from 'src/utils/isValidAddress'
import { OwnerValues } from '../..'
import { Modal } from 'src/components/Modal'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
export const ADD_OWNER_NAME_INPUT_TEST_ID = 'add-owner-name-input'
export const ADD_OWNER_ADDRESS_INPUT_TEST_ID = 'add-owner-address-testid'
@@ -67,7 +68,7 @@ export const OwnerForm = ({ onClose, onSubmit, initialValues }: OwnerFormProps):
return (
<>
-
-
@@ -121,9 +123,7 @@ export const ReviewAddOwner = ({ onClickBack, onClose, onSubmit, values }: Revie
))}
-
- ADDING NEW OWNER ↓
-
+ ADDING NEW OWNER ↓
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
index 5de73e1839..183a2f6ba6 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.ts
@@ -27,10 +27,10 @@ export const styles = createStyles({
height: '100%',
},
ownersTitle: {
- padding: lg,
+ padding: `${sm} ${lg}`,
},
owner: {
- padding: sm,
+ padding: `${sm} ${lg}`,
alignItems: 'center',
},
name: {
@@ -38,9 +38,8 @@ export const styles = createStyles({
overflow: 'hidden',
},
selectedOwner: {
- padding: sm,
+ padding: `${sm} ${lg}`,
alignItems: 'center',
- backgroundColor: '#f7f5f5',
},
open: {
paddingLeft: sm,
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.tsx
index 616544662d..b7f3c30866 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.tsx
@@ -17,6 +17,7 @@ import Row from 'src/components/layout/Row'
import { currentSafe } from 'src/logic/safe/store/selectors'
import { Modal } from 'src/components/Modal'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
export const ADD_OWNER_THRESHOLD_NEXT_BTN_TEST_ID = 'add-owner-threshold-next-btn'
@@ -48,7 +49,7 @@ export const ThresholdForm = ({ onClickBack, onClose, onSubmit, initialValues }:
return (
<>
-
{() => (
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.tsx
index f393dda742..c001b6c2cf 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.tsx
@@ -12,6 +12,7 @@ import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/scree
import { OwnerData } from 'src/routes/safe/components/Settings/ManageOwners/dataFetcher'
import { useStyles } from './style'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
export const REMOVE_OWNER_MODAL_NEXT_BTN_TEST_ID = 'remove-owner-next-btn'
@@ -26,7 +27,7 @@ export const CheckOwner = ({ onClose, onSubmit, owner }: CheckOwnerProps): React
return (
<>
-
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
index b5118077f4..6e6ceb4fd9 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.tsx
@@ -20,6 +20,8 @@ import { getSafeSDK } from 'src/logic/wallets/getWeb3'
import { logError } from 'src/logic/exceptions/CodedException'
import ErrorCodes from 'src/logic/exceptions/registry'
import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/TxModalWrapper'
+import { Overline } from 'src/components/layout/Typography'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
type ReviewRemoveOwnerProps = {
onClickBack: () => void
@@ -80,7 +82,7 @@ export const ReviewRemoveOwnerModal = ({
return (
-
@@ -138,9 +140,7 @@ export const ReviewRemoveOwnerModal = ({
),
)}
-
- REMOVING OWNER ↓
-
+ REMOVING OWNER ↓
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
index e3eaa9f254..e468db2e63 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.ts
@@ -24,10 +24,10 @@ export const useStyles = makeStyles(
height: '100%',
},
ownersTitle: {
- padding: lg,
+ padding: `${sm} ${lg}`,
},
owner: {
- padding: sm,
+ padding: `${sm} ${lg}`,
alignItems: 'center',
},
name: {
@@ -35,7 +35,7 @@ export const useStyles = makeStyles(
overflow: 'hidden',
},
selectedOwner: {
- padding: sm,
+ padding: `${sm} ${lg}`,
alignItems: 'center',
backgroundColor: '#ffe6ea',
},
diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.tsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.tsx
index dd2843c7ff..2b6f34516b 100644
--- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.tsx
@@ -17,6 +17,7 @@ import { Modal } from 'src/components/Modal'
import { currentSafe } from 'src/logic/safe/store/selectors'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
export const REMOVE_OWNER_THRESHOLD_NEXT_BTN_TEST_ID = 'remove-owner-threshold-next-btn'
@@ -42,7 +43,7 @@ export const ThresholdForm = ({ onClickBack, onClose, onSubmit, initialValues }:
return (
<>
-
-
-
@@ -135,9 +137,7 @@ export const ReviewReplaceOwnerModal = ({
),
)}
-
- REMOVING OWNER ↓
-
+ REMOVING OWNER ↓
@@ -152,9 +152,7 @@ export const ReviewReplaceOwnerModal = ({
-
- ADDING NEW OWNER ↓
-
+ ADDING NEW OWNER ↓
diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
index c8feaa893d..500653f10b 100644
--- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
+++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.ts
@@ -23,10 +23,10 @@ export const useStyles = makeStyles(
height: '100%',
},
ownersTitle: {
- padding: lg,
+ padding: `${sm} ${lg}`,
},
owner: {
- padding: sm,
+ padding: `${sm} ${lg}`,
alignItems: 'center',
},
name: {
@@ -34,14 +34,13 @@ export const useStyles = makeStyles(
overflow: 'hidden',
},
selectedOwnerRemoved: {
- padding: sm,
+ padding: `${sm} ${lg}`,
alignItems: 'center',
backgroundColor: '#ffe6ea',
},
selectedOwnerAdded: {
- padding: sm,
+ padding: `${sm} ${lg}`,
alignItems: 'center',
- backgroundColor: '#f7f5f5',
},
}),
)
diff --git a/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/AddressInfo.tsx b/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/AddressInfo.tsx
index 13bc50e4ae..65b0121cda 100644
--- a/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/AddressInfo.tsx
+++ b/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/AddressInfo.tsx
@@ -1,4 +1,5 @@
import { Text } from '@gnosis.pm/safe-react-components'
+import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
import { ReactElement } from 'react'
import { useSelector } from 'react-redux'
@@ -13,15 +14,16 @@ interface AddressInfoProps {
title?: string
name?: string
logoUri?: string
+ color?: ThemeColors
}
-const AddressInfo = ({ address, title, name, logoUri }: AddressInfoProps): ReactElement => {
+const AddressInfo = ({ address, title, name, logoUri, color }: AddressInfoProps): ReactElement => {
const addessBookName = useSelector((state) => addressBookEntryName(state, { address }))
return (
<>
{title && (
-
+
{title}
)}
diff --git a/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/ResetTimeInfo.tsx b/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/ResetTimeInfo.tsx
index dc672298ea..3118a545bf 100644
--- a/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/ResetTimeInfo.tsx
+++ b/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/ResetTimeInfo.tsx
@@ -1,4 +1,5 @@
import { IconText, Text } from '@gnosis.pm/safe-react-components'
+import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
import { ReactElement } from 'react'
import Row from 'src/components/layout/Row'
@@ -6,11 +7,12 @@ import Row from 'src/components/layout/Row'
interface ResetTimeInfoProps {
title?: string
label?: string
+ color?: ThemeColors
}
-const ResetTimeInfo = ({ title, label }: ResetTimeInfoProps): ReactElement => (
+const ResetTimeInfo = ({ title, label, color }: ResetTimeInfoProps): ReactElement => (
<>
-
+
{title}
{label ? (
@@ -18,8 +20,8 @@ const ResetTimeInfo = ({ title, label }: ResetTimeInfoProps): ReactElement => (
) : (
-
- One-time spending limit
+
+ One-time spending limit
)}
diff --git a/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/TokenInfo.tsx b/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/TokenInfo.tsx
index 37089862cc..c56ae936cc 100644
--- a/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/TokenInfo.tsx
+++ b/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/TokenInfo.tsx
@@ -1,4 +1,5 @@
import { Text } from '@gnosis.pm/safe-react-components'
+import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
import { ReactElement } from 'react'
import styled from 'styled-components'
@@ -20,11 +21,12 @@ interface TokenInfoProps {
amount: string
title?: string
token: Token
+ color?: ThemeColors
}
-const TokenInfo = ({ amount, title, token }: TokenInfoProps): ReactElement => (
+const TokenInfo = ({ amount, title, token, color }: TokenInfoProps): ReactElement => (
<>
-
+
{title}
diff --git a/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Create.tsx b/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Create.tsx
index a159fcf67a..135527b48b 100644
--- a/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Create.tsx
+++ b/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Create.tsx
@@ -7,6 +7,7 @@ import { Modal } from 'src/components/Modal'
import { Amount, Beneficiary, ResetTime, Token } from 'src/routes/safe/components/Settings/SpendingLimit/FormFields'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
import Hairline from 'src/components/layout/Hairline'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
const FormContainer = styled.div`
padding: 24px 8px 24px 24px;
@@ -47,7 +48,7 @@ const canReview = ({
const Create = ({ initialValues, onCancel, onReview }: NewSpendingLimitProps): ReactElement => {
return (
<>
-
{(...args) => {
diff --git a/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Review.tsx b/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Review.tsx
index a4e4a063f8..375de88537 100644
--- a/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Review.tsx
+++ b/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Review.tsx
@@ -23,7 +23,7 @@ import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadable
import { sameAddress } from 'src/logic/wallets/ethAddresses'
import { userAccountSelector } from 'src/logic/wallets/store/selectors'
import { getResetTimeOptions } from 'src/routes/safe/components/Settings/SpendingLimit/FormFields/ResetTime'
-import { AddressInfo, ResetTimeInfo, TokenInfo } from 'src/routes/safe/components/Settings/SpendingLimit/InfoDisplay'
+import { AddressInfo, ResetTimeInfo } from 'src/routes/safe/components/Settings/SpendingLimit/InfoDisplay'
import { currentSafe } from 'src/logic/safe/store/selectors'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
import Hairline from 'src/components/layout/Hairline'
@@ -32,6 +32,8 @@ import { SPENDING_LIMIT_MODULE_ADDRESS } from 'src/utils/constants'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/TxModalWrapper'
import { ActionCallback, CREATE } from 'src/routes/safe/components/Settings/SpendingLimit/NewLimitModal'
+import { TransferAmount } from 'src/routes/safe/components/Balances/SendModal/TransferAmount'
+import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils'
const useExistentSpendingLimit = ({
spendingLimits,
@@ -241,29 +243,28 @@ export const ReviewSpendingLimits = ({ onBack, onClose, txToken, values }: Revie
onSubmit={handleSubmit}
onBack={() => onBack({ values: {}, txToken: makeToken(), step: CREATE })}
submitText="Submit"
- isConfirmDisabled={existentSpendingLimit === undefined}
+ isSubmitDisabled={existentSpendingLimit === undefined}
>
-
-
+
+
Previous Amount: {existentSpendingLimit.amount}
)}
-
@@ -274,7 +275,7 @@ export const ReviewSpendingLimits = ({ onBack, onClose, txToken, values }: Revie
{existentSpendingLimit && (
-
You are about to replace an existent spending limit
diff --git a/src/routes/safe/components/Settings/SpendingLimit/RemoveLimitModal.tsx b/src/routes/safe/components/Settings/SpendingLimit/RemoveLimitModal.tsx
index a91061b6f3..a5e46a1725 100644
--- a/src/routes/safe/components/Settings/SpendingLimit/RemoveLimitModal.tsx
+++ b/src/routes/safe/components/Settings/SpendingLimit/RemoveLimitModal.tsx
@@ -13,10 +13,11 @@ import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
import { SPENDING_LIMIT_MODULE_ADDRESS } from 'src/utils/constants'
import { getResetTimeOptions } from './FormFields/ResetTime'
-import { AddressInfo, ResetTimeInfo, TokenInfo } from './InfoDisplay'
+import { AddressInfo, ResetTimeInfo } from './InfoDisplay'
import { SpendingLimitTable } from './LimitsTable/dataFetcher'
import { extractSafeAddress } from 'src/routes/routes'
import { TxModalWrapper } from 'src/routes/safe/components/Transactions/helpers/TxModalWrapper'
+import { TransferAmount } from 'src/routes/safe/components/Balances/SendModal/TransferAmount'
interface RemoveSpendingLimitModalProps {
onClose: () => void
@@ -76,26 +77,26 @@ export const RemoveLimitModal = ({ onClose, spendingLimit, open }: RemoveSpendin
txData={txData}
txTo={SPENDING_LIMIT_MODULE_ADDRESS}
onSubmit={removeSelectedSpendingLimit}
+ onClose={onClose}
submitText="Remove"
>
-
diff --git a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
index 17c1bfda1b..05b34d130b 100644
--- a/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
+++ b/src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.tsx
@@ -83,7 +83,7 @@ export const ChangeThresholdModal = ({
}
return (
-
+
diff --git a/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx b/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx
index 73cbaafce1..421529ee42 100644
--- a/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx
+++ b/src/routes/safe/components/Settings/UpdateSafeModal/index.tsx
@@ -58,7 +58,7 @@ export const UpdateSafeModal = ({ onClose, safeAddress, safeCurrentVersion }: Pr
txTo={getMultisendContractAddress()}
operation={Operation.DELEGATE}
onSubmit={handleSubmit}
- onBack={onClose}
+ onClose={onClose}
submitText="Update Safe"
>
}
- txParameters={txParameters}
- />
- )
-
- case 'execute':
- return (
- }
- txParameters={txParameters}
- />
- )
-
- case 'none':
- return null
- }
+ return (
+ }
+ />
+ )
}
diff --git a/src/routes/safe/components/Transactions/TxList/DelegateCallWarning.tsx b/src/routes/safe/components/Transactions/TxList/DelegateCallWarning.tsx
index 34e33d7d91..853c09865f 100644
--- a/src/routes/safe/components/Transactions/TxList/DelegateCallWarning.tsx
+++ b/src/routes/safe/components/Transactions/TxList/DelegateCallWarning.tsx
@@ -1,18 +1,24 @@
import { Text } from '@gnosis.pm/safe-react-components'
import { ReactElement } from 'react'
+import { md } from 'src/theme/variables'
+import styled from 'styled-components'
+
+const StyledText = styled(Text)`
+ margin-bottom: ${md};
+`
const DelegateCallWarning = ({ showWarning }: { showWarning: boolean }): ReactElement => {
if (showWarning) {
return (
-
+
â ī¸ Unexpected Delegate Call
-
+
)
}
return (
-
+
Delegate Call
-
+
)
}
diff --git a/src/routes/safe/components/Transactions/TxList/InfoDetails.tsx b/src/routes/safe/components/Transactions/TxList/InfoDetails.tsx
index 7681641308..719b3e724a 100644
--- a/src/routes/safe/components/Transactions/TxList/InfoDetails.tsx
+++ b/src/routes/safe/components/Transactions/TxList/InfoDetails.tsx
@@ -1,16 +1,18 @@
-import { Text } from '@gnosis.pm/safe-react-components'
import { ReactElement, ReactNode } from 'react'
+import { Text } from '@gnosis.pm/safe-react-components'
+
+import { StyledTxInfoDetails } from 'src/routes/safe/components/Transactions/TxList/styled'
type InfoDetailsProps = {
children: ReactNode
- title: string
+ title: string | ReactElement
}
export const InfoDetails = ({ children, title }: InfoDetailsProps): ReactElement => (
- <>
-
+
+
{title}
{children}
-
+
)
diff --git a/src/routes/safe/components/Transactions/TxList/MethodDetails.tsx b/src/routes/safe/components/Transactions/TxList/MethodDetails.tsx
index 3723f18c6c..542b829ea8 100644
--- a/src/routes/safe/components/Transactions/TxList/MethodDetails.tsx
+++ b/src/routes/safe/components/Transactions/TxList/MethodDetails.tsx
@@ -1,49 +1,42 @@
-import { Text } from '@gnosis.pm/safe-react-components'
-
import styled from 'styled-components'
-
-import { isArrayParameter } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
-import Value from 'src/routes/safe/components/Transactions/TxList/MethodValue'
import { DataDecoded } from '@gnosis.pm/safe-react-gateway-sdk'
-const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
- padding-left: 24px;
- display: ${({ isArrayParameter }) => (isArrayParameter ? 'block' : 'flex')};
- align-items: center;
- flex-wrap: wrap;
-
- p:first-of-type {
- margin-right: ${({ isArrayParameter }) => (isArrayParameter ? '0' : '4px')};
- }
-`
+import { StyledDetailsTitle } from 'src/routes/safe/components/Transactions/TxList/styled'
+import { TxDataRow } from 'src/routes/safe/components/Transactions/TxList/TxDataRow'
+import { camelCaseToSpaces } from 'src/utils/camelCaseToSpaces'
+import {
+ isAddress,
+ isArrayParameter,
+} from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
const TxInfo = styled.div`
padding: 8px 0;
overflow-x: auto;
`
-const ValueWrapper = styled.div`
- min-width: 50%;
- flex-shrink: 0;
-`
-
export const MethodDetails = ({ data }: { data: DataDecoded }): React.ReactElement => {
+ const methodName = camelCaseToSpaces(data.method)
return (
-
- {data.method}
-
-
- {data.parameters?.map((param, index) => (
-
-
- {param.name}({param.type}):
-
-
-
-
- ))}
+
+ {methodName}
+
+
+ {data.parameters?.map((param, index) => {
+ const isArrayValueParam = isArrayParameter(param.type) || Array.isArray(param.value)
+ const inlineType = !isArrayValueParam && isAddress(param.type) ? 'address' : undefined
+ return (
+
)
}
diff --git a/src/routes/safe/components/Transactions/TxList/MethodValue.tsx b/src/routes/safe/components/Transactions/TxList/MethodValue.tsx
index ee77751402..f712a9d16d 100644
--- a/src/routes/safe/components/Transactions/TxList/MethodValue.tsx
+++ b/src/routes/safe/components/Transactions/TxList/MethodValue.tsx
@@ -10,17 +10,18 @@ import { getExplorerInfo } from 'src/config'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
const NestedWrapper = styled.div`
- padding-left: 4px;
+ padding-left: 12px;
`
interface RenderValueProps {
method: string
type: string
value: string | string[]
+ key?: string
}
const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactElement => {
- const getTextValue = (value: string) =>
+
{getArrayValue(key, currentValue)}
) : (
- getTextValue(currentValue)
+ getTextValue(currentValue, key)
)
})}
@@ -54,10 +55,26 @@ const Value = ({ type, ...props }: RenderValueProps): React.ReactElement => {
<>
[
- {(props.value as string[]).map((address) => {
+ {(props.value as string[]).map((address, index) => {
+ const key = `${props.key || props.method}-${index}`
+ if (Array.isArray(address)) {
+ const newProps = {
+ type,
+ ...props,
+ value: address,
+ key,
+ }
+ return
diff --git a/src/routes/safe/components/Transactions/TxList/MultiSendDetails.tsx b/src/routes/safe/components/Transactions/TxList/MultiSendDetails.tsx
index 53f944681a..4a376a3f28 100644
--- a/src/routes/safe/components/Transactions/TxList/MultiSendDetails.tsx
+++ b/src/routes/safe/components/Transactions/TxList/MultiSendDetails.tsx
@@ -1,6 +1,7 @@
-import { AccordionSummary, IconText } from '@gnosis.pm/safe-react-components'
+import { AccordionSummary, IconText, Text } from '@gnosis.pm/safe-react-components'
import { DataDecoded, Operation, TransactionData } from '@gnosis.pm/safe-react-gateway-sdk'
import { ReactElement, ReactNode } from 'react'
+import styled from 'styled-components'
import { getNativeCurrency } from 'src/config'
import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
@@ -11,9 +12,15 @@ import { MethodDetails } from './MethodDetails'
import { isSpendingLimitMethod } from './SpendingLimitDetails'
import { ColumnDisplayAccordionDetails, ActionAccordion } from './styled'
import { TxInfoDetails } from './TxInfoDetails'
+import { sm } from 'src/theme/variables'
+
+const StyledText = styled(Text)`
+ margin-left: ${sm};
+`
type MultiSendTxGroupProps = {
actionTitle: string
+ method: string
children: ReactNode
txDetails: {
title: string
@@ -25,12 +32,15 @@ type MultiSendTxGroupProps = {
}
}
-const MultiSendTxGroup = ({ actionTitle, children, txDetails }: MultiSendTxGroupProps): ReactElement => {
+const MultiSendTxGroup = ({ actionTitle, method, children, txDetails }: MultiSendTxGroupProps): ReactElement => {
const isDelegateCall = txDetails.operation === Operation.DELEGATE
return (
+ {method}
+
{/* We always warn of nested delegate calls */}
@@ -68,7 +78,8 @@ export const MultiSendDetails = ({ txData }: { txData: TransactionData }): React
let details
const { data, value, to, operation } = valuesDecoded[index]
- const actionTitle = `Action ${index + 1} ${dataDecoded ? `(${dataDecoded.method})` : ''}`
+ const actionTitle = `Action ${index + 1}`
+ const method = `${dataDecoded ? `${dataDecoded.method}` : ''}`
const amount = value ? fromTokenUnit(value, nativeCurrency.decimals) : 0
const title = getInteractionTitle(amount)
@@ -88,6 +99,7 @@ export const MultiSendDetails = ({ txData }: { txData: TransactionData }): React
{details}
diff --git a/src/routes/safe/components/Transactions/TxList/SpendingLimitDetails.tsx b/src/routes/safe/components/Transactions/TxList/SpendingLimitDetails.tsx
index 4df7eb7b7c..9fd4f6f572 100644
--- a/src/routes/safe/components/Transactions/TxList/SpendingLimitDetails.tsx
+++ b/src/routes/safe/components/Transactions/TxList/SpendingLimitDetails.tsx
@@ -1,4 +1,3 @@
-import { Text } from '@gnosis.pm/safe-react-components'
import { useMemo } from 'react'
import styled from 'styled-components'
@@ -8,7 +7,8 @@ import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import { getResetTimeOptions } from 'src/routes/safe/components/Settings/SpendingLimit/FormFields/ResetTime'
import { AddressInfo, ResetTimeInfo, TokenInfo } from 'src/routes/safe/components/Settings/SpendingLimit/InfoDisplay'
import { TransactionData, TransactionInfo } from '@gnosis.pm/safe-react-gateway-sdk'
-import { getTxTo } from './utils'
+import { getTxTo } from 'src/routes/safe/components/Transactions/TxList/utils'
+import { StyledDetailsTitle, StyledTxInfoDetails } from 'src/routes/safe/components/Transactions/TxList/styled'
const SET_ALLOWANCE = 'setAllowance'
const DELETE_ALLOWANCE = 'deleteAllowance'
@@ -25,8 +25,10 @@ export const isSpendingLimitMethod = (method?: string): boolean => {
return isSetAllowance(method) || isDeleteAllowance(method)
}
-const SpendingLimitRow = styled.div`
- margin-bottom: 16px;
+const StyledInfoBlock = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
`
type SpendingLimitProps = {
@@ -50,29 +52,33 @@ export const ModifySpendingLimitDetails = ({ txData, txInfo }: SpendingLimitProp
const txTo = getTxTo({ txInfo })
return (
- <>
-
-
- Modify spending limit:
-
-
-
+
+
+ Modify spending limit:
+
+
-
- {tokenInfo && (
-
-
-
-
+
+ {tokenInfo && (
+
+
+ )}
+
+
+
)
}
@@ -86,21 +92,23 @@ export const DeleteSpendingLimitDetails = ({ txData, txInfo }: SpendingLimitProp
const txTo = getTxTo({ txInfo })
return (
- <>
-
-
- Delete spending limit:
-
-
-
+
+
+ Delete spending limit:
+
+
- {tokenInfo &&
-
+
+ {tokenInfo && (
+
+
+ )}
+
)
}
diff --git a/src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx b/src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx
index 14eebcd45f..ad5db945a6 100644
--- a/src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx
@@ -24,7 +24,7 @@ import { TokenTransferAmount } from './TokenTransferAmount'
import { TxsInfiniteScrollContext } from './TxsInfiniteScroll'
import { TxLocationContext } from './TxLocationProvider'
import { CalculatedVotes } from './TxQueueCollapsed'
-import { getTxTo, isAwaitingExecution, isCancelTxDetails } from './utils'
+import { getTxTo, isAwaitingExecution } from './utils'
import { userAccountSelector } from 'src/logic/wallets/store/selectors'
import { useKnownAddress } from './hooks/useKnownAddress'
import useTxStatus from 'src/logic/hooks/useTxStatus'
@@ -123,9 +123,6 @@ export const TxCollapsed = ({
const isPending = txStatus === LocalTransactionStatus.PENDING
const willBeReplaced = txStatus === LocalTransactionStatus.WILL_BE_REPLACED ? ' will-be-replaced' : ''
- const onChainRejection =
- isCancelTxDetails(transaction.txInfo) && txLocation !== 'history' ? ' on-chain-rejection' : ''
-
const txCollapsedNonce = (
{nonce}
@@ -133,7 +130,7 @@ export const TxCollapsed = ({
)
const txCollapsedType = (
-
+
+
-
+
{
+ handleOnMouseLeave()
+ handleConfirmButtonClick(event)
+ }
+
const getTitle = () => {
if (isAwaitingEx) {
return (transaction.executionInfo as MultisigExecutionInfo)?.nonce === nonce
@@ -53,7 +58,7 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
`
+ display: flex;
+ align-items: center;
+
+ > :nth-child(2) {
+ margin-left: ${({ margin }) => margin}px;
+ }
+`
+
+const ValueWrapper = styled.div`
+ min-width: 50%;
+ flex-shrink: 0;
+`
+
+type TxDataRowType = {
+ children?: ReactNode
+ inlineType?: 'hash' | 'rawData' | 'address'
+ hasExplorer?: boolean
+ title: string
+ value?: string | null
+ isArray?: boolean
+ method?: string
+ paramType?: string
+}
+
+const generateInlineTypeValue = (
+ type: TxDataRowType['inlineType'],
+ value?: string,
+ hasExplorer?: boolean,
+): ReactElement | null => {
+ if (!value) return null
+ switch (type) {
+ case 'address':
+ return (
+
+ {value ? getByteLength(value) : 0} bytes
+
+ )
+ }
+ return null
+}
+
+export const TxDataRow = ({
+ children,
+ inlineType,
+ hasExplorer = true,
+ title,
+ value,
+ isArray,
+ method,
+ paramType,
+}: TxDataRowType): ReactElement | null => {
+ if (value == undefined) return null
+ return (
+
+
+ {title}
+
+ {isArray && value && method && paramType && (
+
+
+ )}
+ {generateInlineTypeValue(inlineType, value, hasExplorer)}
+ {!inlineType && !isArray && value && (
+
+ {value}
+
+ )}
+ {children}
+
+ )
+}
diff --git a/src/routes/safe/components/Transactions/TxList/TxDetails.tsx b/src/routes/safe/components/Transactions/TxList/TxDetails.tsx
index 419359fdfb..a8cc3c7b7b 100644
--- a/src/routes/safe/components/Transactions/TxList/TxDetails.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxDetails.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
import {
ExpandedTxDetails,
+ isCustomTxInfo,
isModuleExecutionInfo,
isMultiSendTxInfo,
isMultiSigExecutionDetails,
@@ -34,7 +35,7 @@ const NormalBreakingText = styled(Text)`
const TxDataGroup = ({ txDetails }: { txDetails: ExpandedTxDetails }): ReactElement | null => {
if (isTransferTxInfo(txDetails.txInfo) || isSettingsChangeTxInfo(txDetails.txInfo)) {
- return
-
+
+ {getModuleDetails()}
+
+
+
+ ) : (
+ <>
+
+
+ {getModuleDetails()}
+
+
+
+ )
+
return (
-
-
- {isMultiSend && getModuleDetails()}
-
-
- {!isMultiSend && getModuleDetails()}
-
-
- {!isPending && !data.executedAt && txLocation !== 'history' && !!currentUser && (
-
-
+
diff --git a/src/routes/safe/components/Transactions/TxList/TxExpandedActions.tsx b/src/routes/safe/components/Transactions/TxList/TxExpandedActions.tsx
index f8b29f3300..b845ecd7fe 100644
--- a/src/routes/safe/components/Transactions/TxList/TxExpandedActions.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxExpandedActions.tsx
@@ -61,9 +61,13 @@ export const TxExpandedActions = ({ transaction }: TxExpandedActionsProps): Reac
{canCancel && (
-
+
+
+
+
+
)}
)
diff --git a/src/routes/safe/components/Transactions/TxList/TxInfo.tsx b/src/routes/safe/components/Transactions/TxList/TxInfo.tsx
index e53cb9e7af..82ca9c8442 100644
--- a/src/routes/safe/components/Transactions/TxList/TxInfo.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxInfo.tsx
@@ -1,17 +1,23 @@
-import { SettingsChange, TransactionInfo } from '@gnosis.pm/safe-react-gateway-sdk'
+import { SettingsChange, TransactionInfo, TransactionStatus } from '@gnosis.pm/safe-react-gateway-sdk'
import { ReactElement } from 'react'
import { isSettingsChangeTxInfo, isTransferTxInfo } from 'src/logic/safe/store/models/types/gateway.d'
import { TxInfoSettings } from './TxInfoSettings'
import { TxInfoTransfer } from './TxInfoTransfer'
-export const TxInfo = ({ txInfo }: { txInfo: TransactionInfo }): ReactElement | null => {
+export const TxInfo = ({
+ txInfo,
+ txStatus,
+}: {
+ txInfo: TransactionInfo
+ txStatus: TransactionStatus
+}): ReactElement | null => {
if (isSettingsChangeTxInfo(txInfo)) {
return
+
+ {title}:
+
+ {creationEntity ? (
+
+ {NOT_AVAILABLE}
+
+ )}
+
+ )
return (
-
{txData()}
+ {shouldShowStepper && (
+
+
)}
+
+ {!isPending && !data.executedAt && txLocation !== 'history' && !!currentUser && (
+
+
+ )}
-
-
-
- Transaction hash:{' '}
-
-
-
-
- Created:{' '}
-
-
- {formatDateTime(timestamp)}
-
-
-
-
-
- Creator:{' '}
-
-
-
-
- Factory:{' '}
-
- {txInfo.factory ? (
-
- {NOT_AVAILABLE}
-
- )}
+
+ + )} + +
+ Advanced Details
+
+
+ {txData?.operation !== undefined && (
+
+
+ )}
)
}
diff --git a/src/routes/safe/components/Transactions/TxList/assets/transactions-list-active.svg b/src/routes/safe/components/Transactions/TxList/assets/transactions-list-active.svg
deleted file mode 100644
index e2e3c6f470..0000000000
--- a/src/routes/safe/components/Transactions/TxList/assets/transactions-list-active.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/src/routes/safe/components/Transactions/TxList/assets/transactions-list-inactive.svg b/src/routes/safe/components/Transactions/TxList/assets/transactions-list-inactive.svg
deleted file mode 100644
index 3e429f5512..0000000000
--- a/src/routes/safe/components/Transactions/TxList/assets/transactions-list-inactive.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/src/routes/safe/components/Transactions/TxList/hooks/useKnownAddress.ts b/src/routes/safe/components/Transactions/TxList/hooks/useKnownAddress.ts
index 4e1e4fc091..1e4402203d 100644
--- a/src/routes/safe/components/Transactions/TxList/hooks/useKnownAddress.ts
+++ b/src/routes/safe/components/Transactions/TxList/hooks/useKnownAddress.ts
@@ -10,7 +10,9 @@ const DEFAULT_PROPS: AddressEx = {
name: null,
logoUri: null,
}
-export const useKnownAddress = (props: AddressEx | null = DEFAULT_PROPS): AddressEx & { isInAddressBook: boolean } => {
+
+export type KnownAddressType = AddressEx & { isInAddressBook: boolean }
+export const useKnownAddress = (props: AddressEx | null = DEFAULT_PROPS): KnownAddressType => {
const recipientName = useSelector((state) => addressBookEntryName(state, { address: props?.value || '' }))
// Undefined known address
diff --git a/src/routes/safe/components/Transactions/TxList/hooks/useTransactionActions.ts b/src/routes/safe/components/Transactions/TxList/hooks/useTransactionActions.ts
index e5de6a9c18..05405d05f6 100644
--- a/src/routes/safe/components/Transactions/TxList/hooks/useTransactionActions.ts
+++ b/src/routes/safe/components/Transactions/TxList/hooks/useTransactionActions.ts
@@ -11,11 +11,6 @@ import { grantedSelector } from 'src/routes/safe/container/selector'
import { AppReduxState } from 'src/store'
import { TxLocationContext } from '../TxLocationProvider'
-export const isThresholdReached = (executionInfo: MultisigExecutionInfo): boolean => {
- const { confirmationsSubmitted, confirmationsRequired } = executionInfo
- return confirmationsSubmitted >= confirmationsRequired
-}
-
export type TransactionActions = {
canConfirm: boolean
canConfirmThenExecute: boolean
diff --git a/src/routes/safe/components/Transactions/TxList/hooks/useTransactionType.ts b/src/routes/safe/components/Transactions/TxList/hooks/useTransactionType.ts
index d279a6a9c2..c26a9e4592 100644
--- a/src/routes/safe/components/Transactions/TxList/hooks/useTransactionType.ts
+++ b/src/routes/safe/components/Transactions/TxList/hooks/useTransactionType.ts
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'
-import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
+import { isTxQueued, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
import CustomTxIcon from 'src/routes/safe/components/Transactions/TxList/assets/custom.svg'
import CircleCrossRed from 'src/routes/safe/components/Transactions/TxList/assets/circle-cross-red.svg'
import IncomingTxIcon from 'src/routes/safe/components/Transactions/TxList/assets/incoming.svg'
@@ -32,7 +32,7 @@ export const useTransactionType = (tx: Transaction): TxTypeProps => {
setType({
icon: isSendTx ? OutgoingTxIcon : IncomingTxIcon,
- text: isSendTx ? 'Send' : 'Receive',
+ text: isSendTx ? (isTxQueued(tx.txStatus) ? 'Send' : 'Sent') : 'Received',
})
break
}
diff --git a/src/routes/safe/components/Transactions/TxList/modals/ApproveTxModal.tsx b/src/routes/safe/components/Transactions/TxList/modals/ApproveTxModal.tsx
index 315f93d8a3..ec7e4d65e4 100644
--- a/src/routes/safe/components/Transactions/TxList/modals/ApproveTxModal.tsx
+++ b/src/routes/safe/components/Transactions/TxList/modals/ApproveTxModal.tsx
@@ -6,13 +6,12 @@ import {
Operation,
TokenType,
} from '@gnosis.pm/safe-react-gateway-sdk'
-import { useMemo, useRef, useState } from 'react'
+import { useMemo, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useStyles } from './style'
-import Modal, { ButtonStatus, Modal as GenericModal } from 'src/components/Modal'
-import { ReviewInfoText } from 'src/components/ReviewInfoText'
+import Modal from 'src/components/Modal'
import Block from 'src/components/layout/Block'
import Bold from 'src/components/layout/Bold'
import Hairline from 'src/components/layout/Hairline'
@@ -20,40 +19,31 @@ import Paragraph from 'src/components/layout/Paragraph'
import Row from 'src/components/layout/Row'
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
import { processTransaction } from 'src/logic/safe/store/actions/processTransaction'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { useEstimationStatus } from 'src/logic/hooks/useEstimationStatus'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
-import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
-import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
import { userAccountSelector } from 'src/logic/wallets/store/selectors'
-import { isThresholdReached } from 'src/routes/safe/components/Transactions/TxList/hooks/useTransactionActions'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
import { Overwrite } from 'src/types/helpers'
import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
import { makeConfirmation } from 'src/logic/safe/store/models/confirmation'
-import { NOTIFICATIONS } from 'src/logic/notifications'
-import enqueueSnackbar from 'src/logic/notifications/store/actions/enqueueSnackbar'
-import { ExpandedTxDetails, isMultiSigExecutionDetails, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
+import {
+ ExpandedTxDetails,
+ isMultiSigExecutionDetails,
+ isMultisigExecutionInfo,
+ Transaction,
+} from 'src/logic/safe/store/models/types/gateway.d'
import { extractSafeAddress } from 'src/routes/routes'
-import ExecuteCheckbox from 'src/components/ExecuteCheckbox'
+import { TxModalWrapper } from '../../helpers/TxModalWrapper'
+import { grantedSelector } from 'src/routes/safe/container/selector'
-export const APPROVE_TX_MODAL_SUBMIT_BTN_TEST_ID = 'approve-tx-modal-submit-btn'
export const REJECT_TX_MODAL_SUBMIT_BTN_TEST_ID = 'reject-tx-modal-submit-btn'
-const getModalTitleAndDescription = (
- thresholdReached: boolean,
- isCancelTx: boolean,
-): { title: string; description: string } => {
+const getModalTitleAndDescription = (thresholdReached: boolean): { title: string; description: string } => {
const modalInfo = {
title: 'Execute transaction rejection',
description: 'This action will execute this transaction.',
}
- if (isCancelTx) {
- return modalInfo
- }
-
if (thresholdReached) {
modalInfo.title = 'Execute transaction'
modalInfo.description = 'This action will execute this transaction.'
@@ -198,212 +188,75 @@ const useTxInfo = (transaction: Props['transaction']) => {
type Props = {
onClose: () => void
- isExecution?: boolean
- isCancelTx?: boolean
isOpen: boolean
transaction: Overwrite
- txParameters: TxParameters
}
-export const ApproveTxModal = ({
- onClose,
- isExecution = false,
- isCancelTx = false,
- isOpen,
- transaction,
-}: Props): React.ReactElement => {
+export const ApproveTxModal = ({ onClose, isOpen, transaction }: Props): React.ReactElement => {
const dispatch = useDispatch()
const userAddress = useSelector(userAccountSelector)
+ const isOwner = useSelector(grantedSelector)
const classes = useStyles()
const safeAddress = extractSafeAddress()
- const [shouldExecute, setShouldExecute] = useState(isExecution)
- const executionInfo = transaction.executionInfo as MultisigExecutionInfo
- const thresholdReached = !!(transaction.executionInfo && isThresholdReached(executionInfo))
- const _threshold = executionInfo?.confirmationsRequired ?? 0
- const _countingCurrentConfirmation = (executionInfo?.confirmationsSubmitted ?? 0) + 1
- const { description, title } = getModalTitleAndDescription(thresholdReached, isCancelTx)
- const oneConfirmationLeft = !thresholdReached && _countingCurrentConfirmation === _threshold
- const isTheTxReadyToBeExecuted = oneConfirmationLeft ? true : thresholdReached
- const [manualGasPrice, setManualGasPrice] = useState()
- const [manualMaxPrioFee, setManualMaxPrioFee] = useState()
- const [manualGasLimit, setManualGasLimit] = useState()
- const willExecute = isExecution && shouldExecute
-
- const {
- confirmations,
- data,
- baseGas,
- gasPrice,
- safeTxGas,
- gasToken,
- nonce,
- refundReceiver,
- safeTxHash,
- value,
- to,
- operation,
- origin,
- id,
- } = useTxInfo(transaction)
- const {
- gasLimit,
- gasPriceFormatted,
- gasCostFormatted,
- gasMaxPrioFeeFormatted,
- txEstimationExecutionStatus,
- isOffChainSignature,
- isCreation,
- } = useEstimateTransactionGas({
- txRecipient: to,
- txData: data,
- txConfirmations: confirmations,
- txAmount: value,
- preApprovingOwner: shouldExecute ? userAddress : undefined,
- safeTxGas,
- operation,
- manualGasPrice,
- manualMaxPrioFee,
- manualGasLimit,
- isExecution: willExecute,
- })
- const [buttonStatus] = useEstimationStatus(txEstimationExecutionStatus)
-
- const approveTx = (txParameters: TxParameters) => {
- if (thresholdReached && confirmations.size < _threshold) {
- dispatch(enqueueSnackbar(NOTIFICATIONS.TX_FETCH_SIGNATURES_ERROR_MSG))
- } else {
- dispatch(
- processTransaction({
- safeAddress,
- tx: {
- id,
- baseGas,
- confirmations,
- data,
- gasPrice,
- gasToken,
- nonce,
- operation,
- origin,
- refundReceiver,
- safeTxGas,
- safeTxHash,
- to,
- value,
- },
- userAddress,
- notifiedTransaction: TX_NOTIFICATION_TYPES.CONFIRMATION_TX,
- approveAndExecute: isExecution && shouldExecute && isTheTxReadyToBeExecuted,
- ethParameters: txParameters,
- thresholdReached,
- }),
- )
- }
- onClose()
- }
-
- const getParametersStatus = () => {
- if (isExecution || shouldExecute) {
- return 'SAFE_DISABLED'
- }
-
- return 'DISABLED'
+ const txInfo = useTxInfo(transaction)
+
+ const { executionInfo } = transaction
+ const { confirmationsSubmitted = 0, confirmationsRequired = 0 } = isMultisigExecutionInfo(executionInfo)
+ ? executionInfo
+ : {}
+ const thresholdReached = confirmationsSubmitted >= confirmationsRequired
+ const { description, title } = getModalTitleAndDescription(thresholdReached)
+
+ let preApprovingOwner: string | undefined = undefined
+ if (!thresholdReached && isOwner && confirmationsSubmitted === confirmationsRequired - 1) {
+ preApprovingOwner = userAddress
}
- const closeEditModalCallback = (txParameters: TxParameters) => {
- const oldGasPrice = gasPriceFormatted
- const newGasPrice = txParameters.ethGasPrice
- const oldGasLimit = gasLimit
- const newGasLimit = txParameters.ethGasLimit
- const oldMaxPrioFee = gasMaxPrioFeeFormatted
- const newMaxPrioFee = txParameters.ethMaxPrioFee
-
- if (oldGasPrice !== newGasPrice) {
- setManualGasPrice(newGasPrice)
- }
-
- if (oldMaxPrioFee !== newMaxPrioFee) {
- setManualMaxPrioFee(newMaxPrioFee)
- }
-
- if (oldGasLimit !== newGasLimit) {
- setManualGasLimit(newGasLimit)
- }
+ const approveTx = (txParameters: TxParameters, delayExecution: boolean) => {
+ dispatch(
+ processTransaction({
+ safeAddress,
+ tx: txInfo,
+ preApprovingOwner,
+ notifiedTransaction: TX_NOTIFICATION_TYPES.CONFIRMATION_TX,
+ approveAndExecute: !delayExecution,
+ ethParameters: txParameters,
+ thresholdReached,
+ }),
+ )
+ onClose()
}
return (
-
- {(txParameters, toggleEditMode) => {
- return (
- <>
-
-
- {description}
-
- Transaction nonce:
-
-{nonce}
-
-
- {oneConfirmationLeft && isExecution && !isCancelTx &&
-
-
- {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
-
- approveTx(txParameters),
- type: 'submit',
- status: buttonStatus,
- text: txEstimationExecutionStatus === EstimationStatus.LOADING ? 'Estimating' : undefined,
- testId: isCancelTx ? REJECT_TX_MODAL_SUBMIT_BTN_TEST_ID : APPROVE_TX_MODAL_SUBMIT_BTN_TEST_ID,
- }}
- />
-
-
- )
- }}
-
+
+
+ {description}
+
+ Transaction nonce:
+
+{txInfo.nonce}
+
+
+
+
)
}
diff --git a/src/routes/safe/components/Transactions/TxList/modals/RejectTxModal.tsx b/src/routes/safe/components/Transactions/TxList/modals/RejectTxModal.tsx
index 23aa607818..9f8daddbcc 100644
--- a/src/routes/safe/components/Transactions/TxList/modals/RejectTxModal.tsx
+++ b/src/routes/safe/components/Transactions/TxList/modals/RejectTxModal.tsx
@@ -1,58 +1,40 @@
-import { MultisigExecutionInfo } from '@gnosis.pm/safe-react-gateway-sdk'
-
import { useDispatch } from 'react-redux'
import { useStyles } from './style'
-import Modal, { ButtonStatus, Modal as GenericModal } from 'src/components/Modal'
-import { ReviewInfoText } from 'src/components/ReviewInfoText'
+import Modal from 'src/components/Modal'
import Block from 'src/components/layout/Block'
import Bold from 'src/components/layout/Bold'
import Hairline from 'src/components/layout/Hairline'
import Paragraph from 'src/components/layout/Paragraph'
import Row from 'src/components/layout/Row'
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
-import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
-import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
-import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
-import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
-import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
+import { ExpandedTxDetails, isMultisigExecutionInfo, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
-import { ParametersStatus } from 'src/routes/safe/components/Transactions/helpers/utils'
import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
import { extractSafeAddress } from 'src/routes/routes'
-import useCanTxExecute from 'src/logic/hooks/useCanTxExecute'
+import { Overwrite } from 'src/types/helpers'
+import { TxModalWrapper } from '../../helpers/TxModalWrapper'
+import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
type Props = {
isOpen: boolean
onClose: () => void
- gwTransaction: Transaction
+ transaction: Overwrite
}
-export const RejectTxModal = ({ isOpen, onClose, gwTransaction }: Props): React.ReactElement => {
+export const RejectTxModal = ({ isOpen, onClose, transaction }: Props): React.ReactElement => {
const dispatch = useDispatch()
const safeAddress = extractSafeAddress()
const classes = useStyles()
+ const executionInfo = isMultisigExecutionInfo(transaction.executionInfo) ? transaction.executionInfo : undefined
- const {
- gasCostFormatted,
- txEstimationExecutionStatus,
- isOffChainSignature,
- isCreation,
- gasLimit,
- gasPriceFormatted,
- } = useEstimateTransactionGas({
- txData: EMPTY_DATA,
- txRecipient: safeAddress,
- })
- const canTxExecute = useCanTxExecute()
-
- const origin = gwTransaction.safeAppInfo
- ? JSON.stringify({ name: gwTransaction.safeAppInfo.name, url: gwTransaction.safeAppInfo.url })
+ const origin = transaction.safeAppInfo
+ ? JSON.stringify({ name: transaction.safeAppInfo.name, url: transaction.safeAppInfo.url })
: ''
- const nonce = (gwTransaction.executionInfo as MultisigExecutionInfo)?.nonce ?? 0
+ const nonce = isMultisigExecutionInfo(transaction.executionInfo) ? transaction.executionInfo.nonce : 0
- const sendReplacementTransaction = (txParameters: TxParameters) => {
+ const sendReplacementTransaction = (txParameters: TxParameters, delayExecution: boolean) => {
dispatch(
createTransaction({
safeAddress,
@@ -63,86 +45,39 @@ export const RejectTxModal = ({ isOpen, onClose, gwTransaction }: Props): React.
safeTxGas: txParameters.safeTxGas,
ethParameters: txParameters,
notifiedTransaction: TX_NOTIFICATION_TYPES.CANCELLATION_TX,
+ delayExecution,
}),
)
onClose()
}
- const getParametersStatus = (): ParametersStatus => {
- return 'CANCEL_TRANSACTION'
- }
-
- let confirmButtonStatus: ButtonStatus = ButtonStatus.READY
- let confirmButtonText = 'Reject transaction'
- if (txEstimationExecutionStatus === EstimationStatus.LOADING) {
- confirmButtonStatus = ButtonStatus.LOADING
- confirmButtonText = 'Estimating'
- }
-
return (
-
- {(txParameters, toggleEditMode) => {
- return (
- <>
-
-
-
- This action will reject this transaction. A separate transaction will be performed to submit the
- rejection.
-
-
- Transaction nonce:
-
-{nonce}
-
-
- {/* Tx Parameters */}
-
-
- {txEstimationExecutionStatus === EstimationStatus.LOADING ? null : (
-
- sendReplacementTransaction(txParameters),
- color: 'error',
- type: 'submit',
- status: confirmButtonStatus,
- text: confirmButtonText,
- }}
- />
-
-
- )
- }}
-
+
+
+
+ This action will reject this transaction. A separate transaction will be performed to submit the
+ rejection.
+
+
+ Transaction nonce:
+
+{nonce}
+
+
+
+
)
}
diff --git a/src/routes/safe/components/Transactions/TxList/styled.tsx b/src/routes/safe/components/Transactions/TxList/styled.tsx
index e5c93dc268..4b9abcf2a1 100644
--- a/src/routes/safe/components/Transactions/TxList/styled.tsx
+++ b/src/routes/safe/components/Transactions/TxList/styled.tsx
@@ -1,4 +1,7 @@
import { Text, Accordion, AccordionDetails, AccordionSummary, EthHashInfo } from '@gnosis.pm/safe-react-components'
+
+import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
+import { lg, md, sm } from 'src/theme/variables'
import styled, { css } from 'styled-components'
import { isDeeplinkedTx } from './utils'
@@ -37,6 +40,10 @@ export const ActionAccordion = styled(Accordion)`
border-top: none;
}
+ &:last-child {
+ border-bottom: none;
+ }
+
&.Mui-expanded {
&:last-child {
border-bottom: none;
@@ -44,7 +51,7 @@ export const ActionAccordion = styled(Accordion)`
}
.MuiAccordionDetails-root {
- padding: 16px;
+ padding: ${lg};
}
}
`
@@ -89,12 +96,6 @@ export const StyledTransactions = styled.div`
&:last-child {
border-bottom: none;
}
-
- &:last-of-type {
- div {
- row-gap: 0px;
- }
- }
}
`
@@ -134,7 +135,7 @@ export const GroupedTransactionsCard = styled(StyledTransactions)`
}
`
const gridColumns = {
- nonce: '0.5fr',
+ nonce: '1fr',
type: '3fr',
info: '3fr',
time: '2.5fr',
@@ -144,10 +145,14 @@ const gridColumns = {
}
const willBeReplaced = css`
+ .will-be-replaced {
+ pointer-events: none;
+ filter: grayscale(1) opacity(0.8) !important;
+ }
.will-be-replaced * {
+ pointer-events: none;
color: gray !important;
text-decoration: line-through !important;
- filter: grayscale(1) opacity(0.8) !important;
}
`
@@ -159,32 +164,6 @@ const failedTransaction = css`
}
`
-const onChainRejection = css`
- &.on-chain-rejection {
- background-color: ${({ theme }) => theme.colors.errorTooltip};
- border-left: 4px solid ${({ theme }) => theme.colors.error};
- border-radius: 4px;
- padding-left: 7px;
- height: 22px;
- max-width: 165px;
-
- > div {
- height: 17px;
- align-items: center;
- padding-top: 3px;
- }
-
- p {
- font-size: 11px;
- line-height: 16px;
- letter-spacing: 1px;
- font-weight: bold;
- text-transform: uppercase;
- margin-left: -2px;
- }
- }
-`
-
export const StyledTransaction = styled.div`
${willBeReplaced};
${failedTransaction};
@@ -197,10 +176,6 @@ export const StyledTransaction = styled.div`
align-self: center;
}
- .tx-type {
- ${onChainRejection};
- }
-
.tx-votes {
justify-self: center;
}
@@ -343,27 +318,67 @@ export const TxDetailsContainer = styled.div<{ ownerRows?: number }>`
${willBeReplaced};
background-color: ${({ theme }) => theme.colors.separator} !important;
- column-gap: 2px;
display: grid;
- grid-template-columns: 1fr 1fr;
- grid-auto-rows: minmax(min-content, max-content);
- grid-template-rows: [tx-summary] minmax(min-content, max-content) [tx-details] minmax(min-content, 1fr);
- row-gap: 2px;
+ gap: 2px;
+ grid-template-columns: 2fr 1fr;
width: 100%;
& > div {
- background-color: ${({ theme }) => theme.colors.white};
+ display: grid;
+ grid-auto-rows: minmax(min-content, max-content);
+ grid-template-rows: [tx-summary] minmax(min-content, max-content) [tx-details] minmax(min-content, 1fr);
line-break: anywhere;
overflow: hidden;
- padding: 20px 24px;
word-break: break-all;
+
+ & > div {
+ padding: 20px 24px;
+ background-color: ${({ theme }) => theme.colors.white};
+ }
}
.tx-summary {
+ background-color: ${({ theme }) => theme.colors.white};
+ // grows to the height of tx-owner column
+ flex-grow: 1;
+ position: relative;
+
+ &.no-data {
+ row-span: 2;
+ }
+ }
+
+ .tx-creation {
+ // to occupy the unexistant "owners" column
+ grid-column: span 2;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
}
.tx-share {
- float: right;
+ position: absolute;
+ top: 20px;
+ right: 24px;
+ }
+
+ .tx-data {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ height: 100%;
+
+ & > div:last-of-type {
+ flex: 1;
+ }
+
+ &.no-owners {
+ grid-column: span 2;
+ }
+
+ &.no-data {
+ gap: 0;
+ }
}
.tx-details {
@@ -378,20 +393,18 @@ export const TxDetailsContainer = styled.div<{ ownerRows?: number }>`
.tx-owners {
padding: 24px;
- grid-column-start: 2;
- grid-row-end: span ${({ ownerRows }) => ownerRows || 2};
- grid-row-start: 1;
+ grid-row-end: span 2;
}
.tx-details-actions {
- align-items: center;
+ align-items: flex-end;
+ padding-bottom: 24px;
display: flex;
- height: 60px;
+ gap: 8px;
justify-content: center;
button {
color: ${({ theme }) => theme.colors.white};
- margin: 0 8px;
&:hover {
color: ${({ theme }) => theme.colors.white};
@@ -416,64 +429,19 @@ export const TxDetailsContainer = styled.div<{ ownerRows?: number }>`
}
`
-export const OwnerList = styled.ul`
- list-style: none;
- margin: 0;
- padding-left: 6px;
-
- .legend {
- left: 15px;
- padding-bottom: 0.86em;
- position: relative;
- top: -3px;
-
- .owner-info {
- margin: 5px;
- }
-
- span::first-of-type {
- color: #008c73;
- font-weight: bold;
- }
- }
-
- ul {
- margin-top: 0;
- }
-
- .icon {
- left: -7px;
- position: absolute;
- width: 16px;
- z-index: 2;
- }
-`
-
-export const OwnerListItem = styled.li`
- display: flex;
- position: relative;
-
- &::before {
- border-left: 2px ${({ theme }) => theme.colors.icon} solid;
- border-radius: 1px;
- content: '';
- height: calc(100% - 16px);
- top: 16px;
- left: 0;
- position: absolute;
- z-index: 1;
- }
+export const InlineEthHashInfo = styled(EthHashInfo)`
+ display: inline-flex;
- &:last-child::before {
- border-left: none;
+ span {
+ font-weight: bold;
}
`
-export const InlineEthHashInfo = styled(EthHashInfo)`
+export const InlinePrefixedEthHashInfo = styled(PrefixedEthHashInfo)`
display: inline-flex;
span {
- font-weight: normal;
+ font-weight: bold;
}
`
@@ -540,3 +508,30 @@ export const NoTransactions = styled.div`
flex-direction: column;
margin-top: 60px;
`
+export const StyledGridRow = styled.div`
+ display: grid;
+ grid-template-columns: 1fr 2.5fr;
+ gap: ${md};
+ justify-content: flex-start;
+ max-width: 800px;
+
+ & > * {
+ flex-shrink: 0;
+ }
+`
+
+export const StyledTxInfoDetails = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${sm};
+ margin-bottom: ${md};
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+`
+
+export const StyledDetailsTitle = styled(Text)<{ uppercase?: boolean }>`
+ text-transform: ${({ uppercase }) => (uppercase ? 'uppercase' : null)};
+ letter-spacing: ${({ uppercase }) => (uppercase ? '1px' : null)};
+`
diff --git a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
index 641bba26ba..6d2f4c67db 100644
--- a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
+++ b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from 'react'
import IconButton from '@material-ui/core/IconButton'
import Close from '@material-ui/icons/Close'
import { makeStyles } from '@material-ui/core/styles'
-import { Title, Text, Divider, Link, Icon } from '@gnosis.pm/safe-react-components'
+import { Text, Divider, Link, Icon } from '@gnosis.pm/safe-react-components'
import styled from 'styled-components'
import Field from 'src/components/forms/Field'
@@ -12,7 +12,7 @@ import Row from 'src/components/layout/Row'
import { styles } from './style'
import GnoForm from 'src/components/forms/GnoForm'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
-import { minValue } from 'src/components/forms/validator'
+import { composeValidators, maxValue, minValue } from 'src/components/forms/validator'
import { Modal } from 'src/components/Modal'
import {
ParametersStatus,
@@ -24,9 +24,10 @@ import useSafeTxGas from 'src/routes/safe/components/Transactions/helpers/useSaf
import { isMaxFeeParam } from 'src/logic/safe/transactions/gas'
import { extractSafeAddress } from 'src/routes/routes'
import useGetRecommendedNonce from 'src/logic/hooks/useGetRecommendedNonce'
+import Paragraph from 'src/components/layout/Paragraph'
const StyledDivider = styled(Divider)`
- margin: 0px;
+ margin: 0;
`
const StyledDividerFooter = styled(Divider)`
margin: 16px -24px;
@@ -39,14 +40,9 @@ const SafeOptions = styled.div`
`
const EthereumOptions = styled.div`
- display: flex;
- /* justify-content: space-between; */
- flex-wrap: wrap;
- gap: 10px 20px;
-
- div {
- width: 216px !important;
- }
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
`
const StyledLink = styled(Link)`
margin: 16px 0 0 0;
@@ -79,7 +75,7 @@ const formValidation = (values: Record): Record
{/* Header */}
-
- Advanced options
-
+
+ Advanced parameters
+
@@ -198,7 +194,7 @@ export const EditTxParametersForm = ({
text="Gas limit"
type="number"
component={TextField}
- disabled={parametersStatus === 'CANCEL_TRANSACTION'}
+ disabled={!areEthereumParamsVisible(parametersStatus)}
/>
{((gasPriceText) => (
void) => any
- isOffChainSignature: boolean
isExecution: boolean
parametersStatus?: ParametersStatus
ethGasLimit?: TxParameters['ethGasLimit']
@@ -21,7 +17,6 @@ type Props = {
export const EditableTxParameters = ({
children,
- isOffChainSignature,
isExecution,
parametersStatus,
ethGasLimit,
@@ -33,10 +28,9 @@ export const EditableTxParameters = ({
}: Props): React.ReactElement => {
const [isEditMode, toggleEditMode] = useState(false)
const [useManualValues, setUseManualValues] = useState(false)
- const threshold = useSelector(currentSafeThreshold) || 1
- const defaultParameterStatus = isOffChainSignature && threshold > 1 ? 'ETH_HIDDEN' : 'ENABLED'
+ const defaultParameterStatus = isExecution ? 'ENABLED' : 'ETH_HIDDEN'
const txParameters = useTransactionParameters({
- parameterStatus: parametersStatus || defaultParameterStatus,
+ parametersStatus: parametersStatus || defaultParameterStatus,
initialEthGasLimit: ethGasLimit,
initialEthGasPrice: ethGasPrice,
initialEthMaxPrioFee: ethMaxPrioFee,
@@ -88,7 +82,7 @@ export const EditableTxParameters = ({
isExecution={isExecution}
txParameters={txParameters}
onClose={closeEditFormHandler}
- parametersStatus={parametersStatus ? parametersStatus : defaultParameterStatus}
+ parametersStatus={parametersStatus ?? defaultParameterStatus}
/>
) : (
children(txParameters, toggleStatus)
diff --git a/src/routes/safe/components/Transactions/helpers/TxEstimatedFeesDetail/index.tsx b/src/routes/safe/components/Transactions/helpers/TxEstimatedFeesDetail/index.tsx
new file mode 100644
index 0000000000..1208199f6e
--- /dev/null
+++ b/src/routes/safe/components/Transactions/helpers/TxEstimatedFeesDetail/index.tsx
@@ -0,0 +1,113 @@
+import { ReactElement, useState } from 'react'
+import { useSelector } from 'react-redux'
+import styled from 'styled-components'
+import { Text, ButtonLink, Accordion, AccordionSummary, AccordionDetails } from '@gnosis.pm/safe-react-components'
+
+import { currentSafeThreshold } from 'src/logic/safe/store/selectors'
+import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
+import { ParametersStatus, areEthereumParamsVisible } from '../utils'
+import Bold from 'src/components/layout/Bold'
+import { isMaxFeeParam } from 'src/logic/safe/transactions/gas'
+
+const TxParameterWrapper = styled.div`
+ display: flex;
+ justify-content: space-between;
+`
+
+const AccordionDetailsWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+`
+
+const StyledButtonLink = styled(ButtonLink)`
+ padding-left: 0;
+ margin: 8px 0 0 0;
+
+ > p {
+ margin-left: 0;
+ }
+`
+
+const StyledAccordionSummary = styled(AccordionSummary)`
+ & .MuiAccordionSummary-content {
+ justify-content: space-between;
+ }
+`
+
+type Props = {
+ txParameters: TxParameters
+ gasCost: string
+ onEdit: () => void
+ compact?: boolean
+ parametersStatus?: ParametersStatus
+ isTransactionCreation: boolean
+ isTransactionExecution: boolean
+ isOffChainSignature: boolean
+}
+
+export const TxEstimatedFeesDetail = ({
+ onEdit,
+ txParameters,
+ gasCost,
+ compact = true,
+ parametersStatus,
+ isTransactionCreation,
+ isTransactionExecution,
+ isOffChainSignature,
+}: Props): ReactElement | null => {
+ const [isAccordionExpanded, setIsAccordionExpanded] = useState(false)
+ const threshold = useSelector(currentSafeThreshold) || 1
+ const defaultParameterStatus = isOffChainSignature && threshold > 1 ? 'ETH_HIDDEN' : 'ENABLED'
+
+ if (!isTransactionExecution && !isTransactionCreation && isOffChainSignature) {
+ return null
+ }
+
+ const onChangeExpand = () => {
+ setIsAccordionExpanded(!isAccordionExpanded)
+ }
+
+ return (
+
+
+ Estimated fee price
+
+ {gasCost}
+
+
+
+
+ {areEthereumParamsVisible(parametersStatus || defaultParameterStatus) && (
+ <>
+
+ Nonce
+ {txParameters.ethNonce}
+
+
+
+ Gas limit
+ {txParameters.ethGasLimit}
+
+
+
+ {isMaxFeeParam() ? 'Max fee per gas' : 'Gas price'}
+ {txParameters.ethGasPrice}
+
+
+ {isMaxFeeParam() && (
+
+ Max priority fee
+ {txParameters.ethMaxPrioFee}
+
+ )}
+
+ )}
+
+ Edit
+
+
+
+
+ )
+}
diff --git a/src/routes/safe/components/Transactions/helpers/TxModalWrapper/index.tsx b/src/routes/safe/components/Transactions/helpers/TxModalWrapper/index.tsx
index bb66979550..bb1a819854 100644
--- a/src/routes/safe/components/Transactions/helpers/TxModalWrapper/index.tsx
+++ b/src/routes/safe/components/Transactions/helpers/TxModalWrapper/index.tsx
@@ -6,43 +6,76 @@ import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionPara
import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
import { extractSafeAddress } from 'src/routes/routes'
import { ReviewInfoText } from 'src/components/ReviewInfoText'
+import { TxEstimatedFeesDetail } from 'src/routes/safe/components/Transactions/helpers/TxEstimatedFeesDetail'
import ExecuteCheckbox from 'src/components/ExecuteCheckbox'
import { useEstimationStatus } from 'src/logic/hooks/useEstimationStatus'
import { Errors, logError } from 'src/logic/exceptions/CodedException'
import { ButtonStatus, Modal } from 'src/components/Modal'
import { lg, md } from 'src/theme/variables'
import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
-import { isSpendingLimit } from 'src/routes/safe/components/Transactions/helpers/utils'
+import { isSpendingLimit, ParametersStatus } from 'src/routes/safe/components/Transactions/helpers/utils'
import useCanTxExecute from 'src/logic/hooks/useCanTxExecute'
+import { useSelector } from 'react-redux'
+import { grantedSelector } from 'src/routes/safe/container/selector'
+import { List } from 'immutable'
+import { userAccountSelector } from 'src/logic/wallets/store/selectors'
+import { Confirmation } from 'src/logic/safe/store/models/types/confirmation'
+import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
+import { getNativeCurrency } from 'src/config'
type Props = {
children: ReactNode
- operation?: number
+ operation?: Operation
+ txNonce?: string
txData: string
txValue?: string
txTo?: string
txType?: string
+ txConfirmations?: List
+ txThreshold?: number
+ safeTxGas?: string
onSubmit: (txParams: TxParameters, delayExecution?: boolean) => void
+ onClose?: () => void
onBack?: (...rest: any) => void
submitText?: string
- isConfirmDisabled?: boolean
+ isSubmitDisabled?: boolean
+ isRejectTx?: boolean
}
const Container = styled.div`
padding: 0 ${lg} ${md};
`
+/**
+ * Determines which fields are displayed in the TxEditableParameters
+ */
+const getParametersStatus = (isCreation: boolean, doExecute: boolean, isRejectTx = false): ParametersStatus => {
+ return isCreation && !isRejectTx
+ ? doExecute
+ ? 'ENABLED'
+ : 'ETH_HIDDEN' // allow editing nonce when creating
+ : doExecute
+ ? 'SAFE_DISABLED'
+ : 'DISABLED' // when not creating, nonce cannot be edited
+}
+
export const TxModalWrapper = ({
children,
operation,
+ txNonce,
txData,
txValue = '0',
txTo,
txType,
+ txConfirmations,
+ txThreshold,
+ safeTxGas,
onSubmit,
onBack,
+ onClose,
submitText,
- isConfirmDisabled,
+ isSubmitDisabled,
+ isRejectTx,
}: Props): React.ReactElement => {
const [manualSafeTxGas, setManualSafeTxGas] = useState('0')
const [manualGasPrice, setManualGasPrice] = useState()
@@ -50,8 +83,15 @@ export const TxModalWrapper = ({
const [manualGasLimit, setManualGasLimit] = useState()
const [manualSafeNonce, setManualSafeNonce] = useState()
const [executionApproved, setExecutionApproved] = useState(true)
+ const isOwner = useSelector(grantedSelector)
+ const userAddress = useSelector(userAccountSelector)
const safeAddress = extractSafeAddress()
const isSpendingLimitTx = isSpendingLimit(txType)
+ const preApprovingOwner = isOwner ? userAddress : undefined
+ const confirmationsLen = Array.from(txConfirmations || []).length
+ const canTxExecute = useCanTxExecute(preApprovingOwner, confirmationsLen, txThreshold, txNonce)
+ const doExecute = executionApproved && canTxExecute
+ const nativeCurrency = getNativeCurrency()
const {
gasCostFormatted,
@@ -66,8 +106,10 @@ export const TxModalWrapper = ({
txData,
txRecipient: txTo || safeAddress,
txType,
+ txConfirmations,
txAmount: txValue,
- safeTxGas: manualSafeTxGas,
+ preApprovingOwner,
+ safeTxGas: safeTxGas || manualSafeTxGas,
manualGasPrice,
manualMaxPrioFee,
manualGasLimit,
@@ -76,11 +118,9 @@ export const TxModalWrapper = ({
})
const [submitStatus, setSubmitStatus] = useEstimationStatus(txEstimationExecutionStatus)
+ const showCheckbox = !isSpendingLimitTx && canTxExecute && (!txThreshold || txThreshold > confirmationsLen)
- const canTxExecute = useCanTxExecute(undefined, manualSafeNonce)
- const doExecute = executionApproved && canTxExecute
-
- const onClose = (txParameters: TxParameters) => {
+ const onEditClose = (txParameters: TxParameters) => {
const oldGasPrice = gasPriceFormatted
const newGasPrice = txParameters.ethGasPrice
const oldGasLimit = gasLimit
@@ -125,39 +165,54 @@ export const TxModalWrapper = ({
onSubmit(txParameters, !doExecute)
}
+ const parametersStatus = getParametersStatus(isCreation, doExecute, isRejectTx)
+
+ const gasCost = `${gasCostFormatted} ${nativeCurrency.symbol}`
+
return (
- {(txParameters: TxParameters, toggleEditMode: () => unknown) => (
+ {(txParameters: TxParameters, toggleEditMode: () => void) => (
<>
{children}
- {!isSpendingLimitTx && canTxExecute &&
{!isSpendingLimitTx && (
+
onSubmitClick(txParameters),
status: submitStatus,
- disabled: isConfirmDisabled,
+ disabled: isSubmitDisabled,
+ color: isRejectTx ? 'error' : undefined,
text: txEstimationExecutionStatus === EstimationStatus.LOADING ? 'Estimating' : submitText,
testId: 'submit-tx-btn',
}}
diff --git a/src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx b/src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx
index e47e12821c..255e11fa3d 100644
--- a/src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx
+++ b/src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx
@@ -1,20 +1,42 @@
-import { ReactElement, useEffect, useState } from 'react'
+import { ReactElement, useEffect, useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
import styled from 'styled-components'
-import { Text, ButtonLink, Accordion, AccordionSummary, AccordionDetails } from '@gnosis.pm/safe-react-components'
-
-import { currentSafe, currentSafeThreshold } from 'src/logic/safe/store/selectors'
-import { getLastTxNonce } from 'src/logic/safe/store/selectors/gatewayTransactions'
+import {
+ Text,
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+ ButtonLink,
+ Divider,
+ EthHashInfo,
+ CopyToClipboardBtn,
+} from '@gnosis.pm/safe-react-components'
+import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
+import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
+
+import { currentSafe } from 'src/logic/safe/store/selectors'
+import { getLastTxNonce, getTransactionsByNonce } from 'src/logic/safe/store/selectors/gatewayTransactions'
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
-import { ParametersStatus, areEthereumParamsVisible, areSafeParamsEnabled, ethereumTxParametersTitle } from '../utils'
+import { ParametersStatus, areSafeParamsEnabled } from 'src/routes/safe/components/Transactions/helpers/utils'
import useSafeTxGas from 'src/routes/safe/components/Transactions/helpers/useSafeTxGas'
-import { isMaxFeeParam } from 'src/logic/safe/transactions/gas'
+import { AppReduxState } from 'src/store'
+import { isMultiSigExecutionDetails, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
+import { getExplorerInfo } from 'src/config'
+import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
+import { getByteLength } from 'src/utils/getByteLength'
+import { md } from 'src/theme/variables'
const TxParameterWrapper = styled.div`
display: flex;
justify-content: space-between;
`
+const TxParameterEndWrapper = styled.span`
+ display: flex;
+ justify-content: flex-end;
+ gap: 4px; // EthHashInfo uses a gap between the address and copy button
+`
+
const AccordionDetailsWrapper = styled.div`
width: 100%;
display: flex;
@@ -24,8 +46,9 @@ const StyledText = styled(Text)`
margin: 8px 0 0 0;
`
-const ColoredText = styled(Text)<{ isOutOfOrder: boolean }>`
- color: ${(props) => (props.isOutOfOrder ? props.theme.colors.error : props.color)};
+type ColoredTextProps = { isError?: boolean }
+const ColoredText = styled(Text)`
+ color: ${(props) => (props.isError ? props.theme.colors.error : props.color)};
`
const StyledButtonLink = styled(ButtonLink)`
@@ -37,13 +60,42 @@ const StyledButtonLink = styled(ButtonLink)`
}
`
+const StyledDivider = styled(Divider)`
+ margin-right: -${md};
+ margin-left: -${md};
+`
+
+type TxParam = string | ReactElement
+type TxParameterProps = { name: TxParam; value?: TxParam | null; color?: ThemeColors } & ColoredTextProps
+const TxParameter = ({ name, value, ...rest }: TxParameterProps): ReactElement | null => {
+ if (value == null || value === '') {
+ return null
+ }
+
+ const getEl = (prop?: TxParam) => {
+ return typeof prop === 'string' ? (
+
+ {prop}
+
+ ) : (
+ prop
+ )
+ }
+
+ return (
+
+ {getEl(name)}
+ {getEl(value)}
+
+ )
+}
+
type Props = {
txParameters: TxParameters
- onEdit: () => void
compact?: boolean
- parametersStatus?: ParametersStatus
+ parametersStatus: ParametersStatus
+ onEdit: () => void
isTransactionCreation: boolean
- isTransactionExecution: boolean
isOffChainSignature: boolean
}
@@ -52,13 +104,8 @@ export const TxParametersDetail = ({
txParameters,
compact = true,
parametersStatus,
- isTransactionCreation,
- isTransactionExecution,
- isOffChainSignature,
}: Props): ReactElement | null => {
const { nonce } = useSelector(currentSafe)
- const threshold = useSelector(currentSafeThreshold) || 1
- const defaultParameterStatus = isOffChainSignature && threshold > 1 ? 'ETH_HIDDEN' : 'ENABLED'
const [isTxNonceOutOfOrder, setIsTxNonceOutOfOrder] = useState(false)
const [isAccordionExpanded, setIsAccordionExpanded] = useState(false)
@@ -67,10 +114,12 @@ export const TxParametersDetail = ({
const safeNonceNumber = parseInt(safeNonce, 10)
const lastQueuedTxNonce = useSelector(getLastTxNonce)
const showSafeTxGas = useSafeTxGas()
+ const storedTx = useSelector((state: AppReduxState) => getTransactionsByNonce(state, safeNonceNumber))
useEffect(() => {
- if (Number.isNaN(safeNonceNumber)) return
- if (safeNonceNumber === nonce) return
+ if (Number.isNaN(safeNonceNumber) || safeNonceNumber === nonce) {
+ return
+ }
if (lastQueuedTxNonce === undefined && safeNonceNumber !== nonce) {
setIsAccordionExpanded(true)
setIsTxNonceOutOfOrder(true)
@@ -81,95 +130,119 @@ export const TxParametersDetail = ({
}
}, [lastQueuedTxNonce, nonce, safeNonceNumber])
- if (!isTransactionExecution && !isTransactionCreation && isOffChainSignature) {
- return null
- }
+ const color = useMemo(() => (areSafeParamsEnabled(parametersStatus) ? 'text' : 'secondaryLight'), [parametersStatus])
const onChangeExpand = () => {
setIsAccordionExpanded(!isAccordionExpanded)
}
+ if (parametersStatus === 'DISABLED') {
+ return null
+ }
+
return (
- Advanced options
+ Advanced parameters
- Safe transaction
+ Safe transaction parameters
-
-
-
- Safe nonce
-
-
- {txParameters.safeNonce}
-
-
-
- {showSafeTxGas && (
-
-
- SafeTxGas
-
-
- {txParameters.safeTxGas}
-
-
- )}
-
- {areEthereumParamsVisible(parametersStatus || defaultParameterStatus) && (
- <>
-
-
- {ethereumTxParametersTitle(isTransactionExecution)}
-
-
-
-
- Nonce
- {txParameters.ethNonce}
-
-
-
- Gas limit
- {txParameters.ethGasLimit}
-
-
-
- {isMaxFeeParam() ? 'Max fee per gas' : 'Gas price'}
- {txParameters.ethGasPrice}
-
-
- {isMaxFeeParam() && (
-
- Max priority fee
- {txParameters.ethMaxPrioFee}
-
- )}
-
- )}
+
Edit
+ {storedTx?.length > 0 &&
)
}
+
+const TxAdvancedParametersDetail = ({ tx }: { tx: Transaction }) => {
+ const { txData, detailedExecutionInfo } = tx?.txDetails || {}
+
+ if (!txData || !detailedExecutionInfo) {
+ return null
+ }
+
+ const { value, to, operation, hexData } = txData
+ const { safeTxHash, baseGas, gasPrice, gasToken, refundReceiver, confirmations } =
+ (isMultiSigExecutionDetails(detailedExecutionInfo) && detailedExecutionInfo) || {}
+
+ return (
+ <>
+
+
+ {signature ? getByteLength(signature) : 0} bytes
+
+ {signature &&
+
+ {hexData ? getByteLength(hexData) : 0} bytes
+
+ {hexData && (Date.now())
- const history = useHistory()
-
- const match = matchPath(history.location.pathname, {
- path: ADDRESSED_ROUTE,
- })
- const prefixedSafeAddress = match?.params?.[SAFE_ADDRESS_SLUG]
-
- useEffect(() => {
- setKey(Date.now())
- }, [prefixedSafeAddress])
-
- return { key }
-}
diff --git a/src/routes/safe/container/hooks/useTransactionParameters.ts b/src/routes/safe/container/hooks/useTransactionParameters.ts
index dfe1d1378b..0145b19ce6 100644
--- a/src/routes/safe/container/hooks/useTransactionParameters.ts
+++ b/src/routes/safe/container/hooks/useTransactionParameters.ts
@@ -6,7 +6,6 @@ import { getUserNonce } from 'src/logic/wallets/ethTransactions'
import { userAccountSelector } from 'src/logic/wallets/store/selectors'
import { currentSafeCurrentVersion } from 'src/logic/safe/store/selectors'
import { ParametersStatus } from 'src/routes/safe/components/Transactions/helpers/utils'
-import { sameString } from 'src/utils/strings'
import { extractSafeAddress } from 'src/routes/routes'
import { AppReduxState } from 'src/store'
import { getRecommendedNonce } from 'src/logic/safe/api/fetchSafeTxGasEstimation'
@@ -30,7 +29,7 @@ export type TxParameters = {
}
type Props = {
- parameterStatus?: ParametersStatus
+ parametersStatus?: ParametersStatus
initialSafeNonce?: string
initialSafeTxGas?: string
initialEthGasLimit?: string
@@ -43,7 +42,6 @@ type Props = {
* It needs to be initialized calling setGasEstimation.
*/
export const useTransactionParameters = (props?: Props): TxParameters => {
- const isCancelTransaction = sameString(props?.parameterStatus || 'ENABLED', 'CANCEL_TRANSACTION')
const connectedWalletAddress = useSelector(userAccountSelector)
const safeAddress = extractSafeAddress()
const safeVersion = useSelector(currentSafeCurrentVersion) as string
@@ -52,7 +50,7 @@ export const useTransactionParameters = (props?: Props): TxParameters => {
// Safe Params
const [safeNonce, setSafeNonce] = useState(props?.initialSafeNonce)
// SafeTxGas: for a new Tx call requiredTxGas, for an existing tx get it from the backend.
- const [safeTxGas, setSafeTxGas] = useState(isCancelTransaction ? '0' : props?.initialSafeTxGas)
+ const [safeTxGas, setSafeTxGas] = useState(props?.initialSafeTxGas)
// ETH Params
const [ethNonce, setEthNonce] = useState() // we delegate it to the wallet
@@ -80,12 +78,8 @@ export const useTransactionParameters = (props?: Props): TxParameters => {
setEthGasPriceInGWei(undefined)
return
}
- if (isCancelTransaction) {
- setEthGasPrice('0')
- return
- }
setEthGasPriceInGWei(toWei(ethGasPrice, 'Gwei'))
- }, [ethGasPrice, isCancelTransaction])
+ }, [ethGasPrice])
// Get max prio fee
useEffect(() => {
@@ -93,12 +87,8 @@ export const useTransactionParameters = (props?: Props): TxParameters => {
setEthMaxPrioFee(undefined)
return
}
- if (isCancelTransaction) {
- setEthMaxPrioFee('0')
- return
- }
setEthMaxPrioFeeInGWei(toWei(ethMaxPrioFee, 'Gwei'))
- }, [ethMaxPrioFee, isCancelTransaction])
+ }, [ethMaxPrioFee])
// Calc safe nonce
useEffect(() => {
diff --git a/src/routes/safe/container/index.tsx b/src/routes/safe/container/index.tsx
index 629db26a5b..2b23768343 100644
--- a/src/routes/safe/container/index.tsx
+++ b/src/routes/safe/container/index.tsx
@@ -6,10 +6,12 @@ import { Redirect, Route, Switch } from 'react-router-dom'
import { currentSafeFeaturesEnabled, currentSafeOwners } from 'src/logic/safe/store/selectors'
import { wrapInSuspense } from 'src/utils/wrapInSuspense'
import { LoadingContainer } from 'src/components/LoaderContainer'
-import { generateSafeRoute, extractPrefixedSafeAddress, SAFE_ROUTES } from 'src/routes/routes'
+import { generateSafeRoute, extractPrefixedSafeAddress, SAFE_ROUTES, extractSafeAddress } from 'src/routes/routes'
import { FEATURES } from '@gnosis.pm/safe-react-gateway-sdk'
import { SAFE_POLLING_INTERVAL } from 'src/utils/constants'
import SafeLoadError from '../components/SafeLoadError'
+import { useLoadSafe } from 'src/logic/safe/hooks/useLoadSafe'
+import { useSafeScheduledUpdates } from 'src/logic/safe/hooks/useSafeScheduledUpdates'
export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
@@ -31,6 +33,10 @@ const Container = (): React.ReactElement => {
const isSafeLoaded = owners.length > 0
const [hasLoadFailed, setHasLoadFailed] = useState(false)
+ const addressFromUrl = extractSafeAddress()
+ useLoadSafe(addressFromUrl) // load initially
+ useSafeScheduledUpdates(addressFromUrl) // load every X seconds
+
useEffect(() => {
if (isSafeLoaded) {
return
diff --git a/src/theme/mui.ts b/src/theme/mui.ts
index 7518e8e7f5..d64e4a05d0 100644
--- a/src/theme/mui.ts
+++ b/src/theme/mui.ts
@@ -24,6 +24,7 @@ import {
sm,
smallFontSize,
xs,
+ alertWarning,
} from './variables'
const palette = {
@@ -431,6 +432,29 @@ const theme = createTheme({
},
},
},
+ MuiAlert: {
+ root: {
+ color: fontColor,
+ height: '48px',
+ alignItems: 'center',
+ },
+ standardWarning: {
+ backgroundColor: alertWarning,
+ },
+ icon: {
+ '& > svg': {
+ width: md,
+ height: md,
+ },
+ },
+ },
+ MuiAlertTitle: {
+ root: {
+ color: fontColor,
+ fontSize: md,
+ margin: 0,
+ },
+ },
},
palette,
} as any)
diff --git a/src/theme/variables.js b/src/theme/variables.js
index 66811e2abc..378f9227f2 100644
--- a/src/theme/variables.js
+++ b/src/theme/variables.js
@@ -15,12 +15,18 @@ const secondaryTextOrSvg = '#B2B5B2'
const secondaryBackground = '#f0efee'
const sm = '8px'
const warningColor = '#ffc05f'
+const alertWarningColor = '#FBE5C5'
const xl = '32px'
const xs = '4px'
const xxl = '40px'
+const grey500 = '#E2E3E3'
+const black400 = '#566976'
+const black600 = '#111B22'
+
module.exports = {
background,
+ black300: '#B2BBC0',
boldFont: 700,
bolderFont: 500,
border,
@@ -37,6 +43,7 @@ module.exports = {
fontSizeHeadingMd: 20,
fontSizeHeadingSm: 16,
fontSizeHeadingXs: 13,
+ gray500: '#e2e3e3',
headerHeight,
largeFontSize: '16px',
lg,
@@ -45,8 +52,11 @@ module.exports = {
marginButtonImg,
md,
mediumFontSize: '14px',
+ orange500: '#e8663d',
primary,
+ primary400: '#008C73',
regularFont: 400,
+ red400: '#C31717',
screenLg: 1200,
screenMd: 992,
screenMdMax: 1199,
@@ -61,8 +71,12 @@ module.exports = {
sm,
smallFontSize: '12px',
warning: warningColor,
+ alertWarning: alertWarningColor,
xl,
xs,
xxl,
xxlFontSize: '32px',
+ grey500,
+ black400,
+ black600,
}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index f94de36c66..9e5ac62c17 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -13,6 +13,10 @@ $warning: #ffc05f;
$fancy: #f02525;
$secondary: #008C73;
+$grey500: #E2E3E3;
+$black400: #566976;
+$black600: #111B22;
+
$headerHeight: 52px;
$marginButtonImg: 12px;
diff --git a/src/utils/camelCaseToSpaces.ts b/src/utils/camelCaseToSpaces.ts
new file mode 100644
index 0000000000..8c7bae96da
--- /dev/null
+++ b/src/utils/camelCaseToSpaces.ts
@@ -0,0 +1,6 @@
+export const camelCaseToSpaces = (str: string): string => {
+ return str
+ .replace(/([A-Z][a-z0-9]+)/g, ' $1 ')
+ .replace(/\s{2}/g, ' ')
+ .trim()
+}
diff --git a/src/utils/getByteLength.ts b/src/utils/getByteLength.ts
new file mode 100644
index 0000000000..6a5c4091c8
--- /dev/null
+++ b/src/utils/getByteLength.ts
@@ -0,0 +1,16 @@
+import { hexToBytes } from 'web3-utils'
+
+export const getByteLength = (data: string | string[]): number => {
+ try {
+ if (!Array.isArray(data)) {
+ data = data.split(',')
+ }
+ // Return the sum of the byte sizes of each hex string
+ return data.reduce((result, hex) => {
+ const bytes = hexToBytes(hex)
+ return result + bytes.length
+ }, 0)
+ } catch (err) {
+ return 0
+ }
+}
diff --git a/src/utils/history.ts b/src/utils/history.ts
index 55dbbda433..c7592c18ec 100644
--- a/src/utils/history.ts
+++ b/src/utils/history.ts
@@ -1,12 +1,13 @@
import { _getChainId } from 'src/config'
import { getChains } from 'src/config/cache/chains'
import { setChainId } from 'src/logic/config/utils'
-import { hasPrefixedSafeAddressInUrl, extractPrefixedSafeAddress } from 'src/routes/routes'
+import { extractPrefixedSafeAddress } from 'src/routes/routes'
export const setChainIdFromUrl = (pathname: string): boolean => {
- if (!hasPrefixedSafeAddressInUrl()) return false
+ const { shortName, safeAddress } = extractPrefixedSafeAddress(pathname)
+
+ if (!safeAddress) return false
- const { shortName } = extractPrefixedSafeAddress(pathname)
const chainId = getChains().find((chain) => chain.shortName === shortName)?.chainId
if (chainId) {
diff --git a/yarn.lock b/yarn.lock
index a8e03435f9..8aca16a4c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1936,10 +1936,10 @@
resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-deployments/-/safe-deployments-1.8.0.tgz#856c15517274f924539ea4df40fffe6f009249a7"
integrity sha512-xK2ZZXxCEGOw+6UZAeUmvqE/4C/XTpYmv1a8KzKUgSOxcGkHsIDqcjdKjqif7gOdnwHl4+XXJUtDQEuSLT4Scg==
-"@gnosis.pm/safe-react-components@^0.9.0":
- version "0.9.0"
- resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-components/-/safe-react-components-0.9.0.tgz#c5169cab41cde96c9a375005f380cd37bd909fe0"
- integrity sha512-+SAJEuK4Zf1eBCtMpe1uQlJBN73zttIQwevEch7PDUBhJysc/oyEHuhmhpZpMYryoFgVVGYz7FZtwv2NxmUsJQ==
+"@gnosis.pm/safe-react-components@^0.9.7":
+ version "0.9.7"
+ resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-components/-/safe-react-components-0.9.7.tgz#6f1a9815ddf9b0fe3c3b158bd8b8e357ba5e5979"
+ integrity sha512-3f1ZvIVzjtrUZ9A1FnmHZDZBurQHc2AGssPPkIkWYDGDEy0YGANNwhUWtIzFebpWKYBgaXZnzcn9HjlSEs8/sQ==
dependencies:
react-media "^1.10.0"
web3-utils "^1.6.0"
@@ -17902,9 +17902,9 @@ simple-concat@^1.0.0:
integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
simple-get@^2.7.0:
- version "2.8.1"
- resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-2.8.1.tgz#0e22e91d4575d87620620bc91308d57a77f44b5d"
- integrity sha512-lSSHRSw3mQNUGPAYRqo7xy9dhKmxFXIjLjp4KHpf99GEH2VH7C3AM+Qfx6du6jhfUi6Vm7XnbEVEf7Wb6N8jRw==
+ version "2.8.2"
+ resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-2.8.2.tgz#5708fb0919d440657326cd5fe7d2599d07705019"
+ integrity sha512-Ijd/rV5o+mSBBs4F/x9oDPtTx9Zb6X9brmnXvMW4J7IR15ngi9q5xxqWBKU744jTZiaXtxaPL7uHG6vtN8kUkw==
dependencies:
decompress-response "^3.3.0"
once "^1.3.1"
+
{
showCopyBtn
explorerUrl={getExplorerInfo(hash)}
/>
+
)
}
diff --git a/src/routes/safe/components/Transactions/TxList/TxInfoTransfer.tsx b/src/routes/safe/components/Transactions/TxList/TxInfoTransfer.tsx
index 6f9083312b..e93519f5de 100644
--- a/src/routes/safe/components/Transactions/TxList/TxInfoTransfer.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxInfoTransfer.tsx
@@ -1,36 +1,51 @@
-import { Transfer } from '@gnosis.pm/safe-react-gateway-sdk'
+import { TransactionStatus, Transfer, TransferDirection } from '@gnosis.pm/safe-react-gateway-sdk'
import { ReactElement, useEffect, useState } from 'react'
+import { Text } from '@gnosis.pm/safe-react-components'
-import { useAssetInfo } from './hooks/useAssetInfo'
+import { AssetInfo, TokenTransferAsset, useAssetInfo } from './hooks/useAssetInfo'
import { TxInfoDetails } from './TxInfoDetails'
+import { isTxQueued } from 'src/logic/safe/store/models/types/gateway.d'
+
+export const isTransferAssetInfo = (value?: AssetInfo): value is TokenTransferAsset => {
+ return value?.type === 'Transfer'
+}
+
+const makeTitle = (txDirection: string, amountWithSymbol: string, txStatus: TransactionStatus) => (
+
+ {txDirection === TransferDirection.INCOMING ? 'Received' : isTxQueued(txStatus) ? 'Send' : 'Sent'}{' '}
+
+ {amountWithSymbol}
+
+ {txDirection === TransferDirection.INCOMING ? ' from:' : ' to:'}
+
+)
type Details = {
- title: string
+ title: string | ReactElement
address: string
name: string | undefined // AddressEx returns null if unknown
}
-export const TxInfoTransfer = ({ txInfo }: { txInfo: Transfer }): ReactElement | null => {
+export const TxInfoTransfer = ({
+ txInfo,
+ txStatus,
+}: {
+ txInfo: Transfer
+ txStatus: TransactionStatus
+}): ReactElement | null => {
const assetInfo = useAssetInfo(txInfo)
const [details, setDetails] = useState
)}
-
+ {generateCreatorTxData('Creator', txInfo.creator, useKnownAddress(txInfo.creator))}
+ {generateCreatorTxData('Factory', txInfo.factory, useKnownAddress(txInfo.factory))}
+ {generateCreatorTxData('Mastercopy', txInfo.implementation, useKnownAddress(txInfo.implementation))}
-
-
- Mastercopy:{' '}
-
- {txInfo.implementation ? (
-
- {NOT_AVAILABLE}
-
- )}
+
-
)
}
diff --git a/src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx b/src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx
index be79bdadfe..52c8f25667 100644
--- a/src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx
@@ -17,7 +17,7 @@ const SingleRow = styled.div`
`
type TxInfoDetailsProps = {
- title: string
+ title: string | ReactElement
address: string
name?: string | undefined
avatarUrl?: string | undefined
diff --git a/src/routes/safe/components/Transactions/TxList/TxInfoMultiSend.tsx b/src/routes/safe/components/Transactions/TxList/TxInfoMultiSend.tsx
index 68972d5fbe..2913122da6 100644
--- a/src/routes/safe/components/Transactions/TxList/TxInfoMultiSend.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxInfoMultiSend.tsx
@@ -3,6 +3,7 @@ import { MultiSend } from '@gnosis.pm/safe-react-gateway-sdk'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
import { getExplorerInfo } from 'src/config'
import { InfoDetails } from './InfoDetails'
+import { TxDataRow } from './TxDataRow'
// Does not use AddressInfo as to not allow address book data display
// as we use backend data to verify the deligate call
@@ -10,6 +11,7 @@ const TxInfoMultiSend = ({ txInfo }: { txInfo: MultiSend }): ReactElement => {
const hash = txInfo?.to.value
const name = txInfo.to?.name || undefined
const customAvatar = txInfo.to?.logoUri || undefined
+ const value = txInfo?.value
return (
+
()
useEffect(() => {
- if (assetInfo && assetInfo.type === 'Transfer') {
- if (txInfo.direction.toUpperCase() === 'INCOMING') {
- setDetails({
- title: `Received ${assetInfo.amountWithSymbol} from:`,
- address: txInfo.sender.value,
- name: txInfo.sender.name || undefined,
- })
- } else {
- setDetails({
- title: `Send ${assetInfo.amountWithSymbol} to:`,
- address: txInfo.recipient.value,
- name: txInfo.recipient.name || undefined,
- })
- }
+ if (isTransferAssetInfo(assetInfo)) {
+ const txDirection = txInfo.direction.toUpperCase()
+ setDetails({
+ title: makeTitle(txDirection, assetInfo.amountWithSymbol, txStatus),
+ address: txDirection === TransferDirection.INCOMING ? txInfo.sender.value : txInfo.recipient.value,
+ name: (txDirection === TransferDirection.INCOMING ? txInfo.sender.name : txInfo.recipient.name) || undefined,
+ })
}
- }, [assetInfo, txInfo.direction, txInfo.recipient, txInfo.sender])
+ }, [assetInfo, txInfo.direction, txInfo.recipient, txInfo.sender, txStatus])
return details ? `
+ .MuiStepLabel-label {
+ font-weight: ${({ $bold = false }) => ($bold ? 'bold' : 'normal')};
+ font-size: 16px;
+ color: ${({ state }) => getStepColor(state)};
+ }
+
+ .MuiStepLabel-iconContainer {
+ color: ${({ state }) => getStepColor(state)};
+ align-items: center;
+ }
+`
+
+const StyledStepContent = styled(StepContent)`
+ color: ${black300};
`
+// Simple memoized styles
+const pointerStyle: CSSProperties = {
+ cursor: 'pointer',
+}
+
+const confirmationsStyle: CSSProperties = {
+ color: black300,
+ fontWeight: 'normal',
+}
+
+const shouldHideConfirmations = (detailedExecutionInfo: DetailedExecutionInfo | null): boolean => {
+ if (!detailedExecutionInfo || !isMultiSigExecutionDetails(detailedExecutionInfo)) {
+ return true
+ }
+
+ const confirmationsNeeded = detailedExecutionInfo.confirmationsRequired - detailedExecutionInfo.confirmations.length
+ const isConfirmed = confirmationsNeeded <= 0
+
+ // Threshold reached or more than 3 confirmations
+ return isConfirmed || detailedExecutionInfo.confirmations.length > 3
+}
+
+const getConfirmationStep = (
+ { value, name, logoUri }: AddressEx,
+ key: string | undefined = undefined,
+): ReactElement => (
+
+
+)
+
export const TxOwners = ({
txDetails,
isPending,
@@ -24,92 +140,79 @@ export const TxOwners = ({
}): ReactElement | null => {
const { txInfo, detailedExecutionInfo } = txDetails
- if (!detailedExecutionInfo || isModuleExecutionInfo(detailedExecutionInfo)) {
+ const [hideConfirmations, setHideConfirmations] = useState(shouldHideConfirmations(detailedExecutionInfo))
+
+ const { threshold } = useSelector(currentSafe)
+ const account = useSelector(userAccountSelector)
+ const chainId = useSelector(currentChainId)
+ const name = useSelector((state) => addressBookName(state, { address: account, chainId }))
+
+ const toggleHide = () => {
+ setHideConfirmations((prev) => !prev)
+ }
+
+ if (!detailedExecutionInfo || !isMultiSigExecutionDetails(detailedExecutionInfo)) {
return null
}
const confirmationsNeeded = detailedExecutionInfo.confirmationsRequired - detailedExecutionInfo.confirmations.length
- const CreationNode = isCancelTxDetails(txInfo) ? (
-
-
-
- ) : (
-
-
-
- )
+ const isImmediateExecution = isPending && threshold === 1
+ const isConfirmed = confirmationsNeeded <= 0 || isImmediateExecution
+ const isExecuted = !!detailedExecutionInfo.executor
+ const numberOfConfirmations = isImmediateExecution ? 1 : detailedExecutionInfo.confirmations.length
return (
-
- {CreationNode}
- {detailedExecutionInfo.confirmations.map(({ signer }) => (
-
-
-
- ))}
- {isPending || confirmationsNeeded <= 0 ? (
-
-
- {detailedExecutionInfo.executor ? (
-
+
+ ) : (
+
+
+ )}
+
+
- ) : (
-
-
-
- )}
-
+
+ ) : (
+ !isConfirmed &&
+ !isPending && Can be executed once the threshold is reached
+ )
+ }
+
+
)
}
diff --git a/src/routes/safe/components/Transactions/TxList/TxQueueRow.tsx b/src/routes/safe/components/Transactions/TxList/TxQueueRow.tsx
index 59d46858e2..16a6a21d30 100644
--- a/src/routes/safe/components/Transactions/TxList/TxQueueRow.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxQueueRow.tsx
@@ -1,11 +1,18 @@
import { AccordionDetails } from '@gnosis.pm/safe-react-components'
import { ReactElement, useContext, useEffect, useState } from 'react'
-import { LocalTransactionStatus, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
+import {
+ isMultisigExecutionInfo,
+ LocalTransactionStatus,
+ Transaction,
+} from 'src/logic/safe/store/models/types/gateway.d'
import { NoPaddingAccordion, StyledAccordionSummary } from './styled'
import { TxDetails } from './TxDetails'
import { TxHoverContext } from './TxHoverProvider'
import { TxQueueCollapsed } from './TxQueueCollapsed'
+import { useSelector } from 'react-redux'
+import { AppReduxState } from 'src/store'
+import { isTxPending, pendingTxByChain } from 'src/logic/safe/store/selectors/pendingTransactions'
type TxQueueRowProps = {
isGrouped?: boolean
@@ -15,15 +22,21 @@ type TxQueueRowProps = {
export const TxQueueRow = ({ isGrouped = false, transaction }: TxQueueRowProps): ReactElement => {
const { activeHover } = useContext(TxHoverContext)
const [tx, setTx] = useState(transaction)
+ const willBeReplaced = tx.txStatus === LocalTransactionStatus.WILL_BE_REPLACED ? ' will-be-replaced' : ''
+ const isPending = useSelector((state: AppReduxState) => isTxPending(state, transaction.id))
+ const pendingTx = useSelector(pendingTxByChain)
+ const pendingTxNonce = isMultisigExecutionInfo(pendingTx?.executionInfo) ? pendingTx?.executionInfo.nonce : undefined
+ const nonce = isMultisigExecutionInfo(transaction.executionInfo) ? transaction.executionInfo.nonce : undefined
+ const isReplacementTxPending = !isPending && nonce && pendingTxNonce && nonce === pendingTxNonce
useEffect(() => {
- if (activeHover && activeHover !== transaction.id) {
+ if ((activeHover && activeHover !== transaction.id) || isReplacementTxPending) {
setTx((currTx) => ({ ...currTx, txStatus: LocalTransactionStatus.WILL_BE_REPLACED }))
return
}
setTx(transaction)
- }, [activeHover, transaction])
+ }, [activeHover, transaction, isReplacementTxPending])
return (
()
const [fetchedTx, setFetchedTx] = useState()
const [liveTx, setLiveTx] = useState<{ txLocation: TxLocation; transaction: Transaction }>()
+ const [error, setError] = useState()
const dispatch = useDispatch()
+ const history = useHistory()
const chainId = useSelector(currentChainId)
// We must use the tx from the store as the queue actions alter the tx
@@ -76,6 +78,7 @@ const TxSingularDetails = (): ReactElement => {
txDetails = await fetchSafeTransaction(safeTxHash)
} catch (e) {
logError(Errors._614, e.message)
+ setError(e)
return
}
@@ -89,7 +92,7 @@ const TxSingularDetails = (): ReactElement => {
return () => {
isCurrent = false
}
- }, [safeTxHash, setFetchedTx, setLiveTx])
+ }, [history, safeTxHash, setFetchedTx, setLiveTx])
// Add the tx to the store
useEffect(() => {
@@ -112,6 +115,17 @@ const TxSingularDetails = (): ReactElement => {
dispatch(isTxQueued(listItemTx.txStatus) ? addQueuedTransactions(payload) : addHistoryTransactions(payload))
}, [fetchedTx, chainId, dispatch])
+ if (!liveTx && error) {
+ const safeParams = extractPrefixedSafeAddress()
+ return (
+
diff --git a/src/routes/safe/components/Transactions/TxList/TxSummary.tsx b/src/routes/safe/components/Transactions/TxList/TxSummary.tsx
index f5af44f53c..bad3e61469 100644
--- a/src/routes/safe/components/Transactions/TxList/TxSummary.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxSummary.tsx
@@ -1,28 +1,60 @@
-import { Text } from '@gnosis.pm/safe-react-components'
+import { ReactElement, useState } from 'react'
import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
-import { ReactElement } from 'react'
+import { ButtonLink } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
-import { getExplorerInfo } from 'src/config'
import { formatDateTime } from 'src/utils/date'
import {
ExpandedTxDetails,
isMultiSendTxInfo,
isMultiSigExecutionDetails,
} from 'src/logic/safe/store/models/types/gateway.d'
-import { InlineEthHashInfo } from './styled'
import { NOT_AVAILABLE } from './utils'
import TxShareButton from './TxShareButton'
import TxInfoMultiSend from './TxInfoMultiSend'
import DelegateCallWarning from './DelegateCallWarning'
+import { TxDataRow } from 'src/routes/safe/components/Transactions/TxList/TxDataRow'
+import { sm } from 'src/theme/variables'
+
+const StyledButtonLink = styled(ButtonLink)`
+ margin-top: ${sm};
+ padding-left: 0;
+
+ & > p {
+ margin-left: 0;
+ }
+`
+
+const CollapsibleSection = styled.div<{ show: boolean }>`
+ max-height: ${({ show }) => (show ? '500px' : '0px')}; // We need to set a fixed height for the animation to work
+ overflow: hidden;
+ transition: ${({ show }) => (show ? 'max-height 0.4s ease-in-out' : 'max-height 0.2s cubic-bezier(0, 1, 0, 1)')};
+`
type Props = { txDetails: ExpandedTxDetails }
export const TxSummary = ({ txDetails }: Props): ReactElement => {
const { txHash, detailedExecutionInfo, executedAt, txData, txInfo } = txDetails
- const explorerUrl = txHash ? getExplorerInfo(txHash) : undefined
- const nonce = isMultiSigExecutionDetails(detailedExecutionInfo) ? detailedExecutionInfo.nonce : undefined
- const created = isMultiSigExecutionDetails(detailedExecutionInfo) ? detailedExecutionInfo.submittedAt : undefined
- const safeTxHash = isMultiSigExecutionDetails(detailedExecutionInfo) ? detailedExecutionInfo.safeTxHash : undefined
+ const [expanded, setExpanded] = useState(false)
+
+ const toggleExpanded = () => {
+ setExpanded((val) => !val)
+ }
+
+ let created, confirmations, safeTxHash, baseGas, gasPrice, gasToken, refundReceiver, safeTxGas
+ if (isMultiSigExecutionDetails(detailedExecutionInfo)) {
+ // prettier-ignore
+ ({
+ submittedAt: created,
+ confirmations,
+ safeTxHash,
+ baseGas,
+ gasPrice,
+ gasToken,
+ safeTxGas,
+ } = detailedExecutionInfo)
+ refundReceiver = detailedExecutionInfo.refundReceiver?.value
+ }
return (
<>
@@ -31,60 +63,53 @@ export const TxSummary = ({ txDetails }: Props): ReactElement => {
-
- On-chain rejection created
-
-
-
-
- Created
-
-
-
-
- Confirmed
-
-
-
-
- {detailedExecutionInfo.executor ? 'Executed' : isPending ? 'Executing' : 'Execute'}
-
- {detailedExecutionInfo.executor && (
+
+
+ {!hideConfirmations &&
+ (isImmediateExecution
+ ? getConfirmationStep({ value: account, name, logoUri: null })
+ : detailedExecutionInfo.confirmations.map(({ signer }) => getConfirmationStep(signer, signer.value)))}
+ {detailedExecutionInfo.confirmations.length > 0 && (
+
+
+ )}
+
+
-
-
- Execute ({confirmationsNeeded} more {confirmationsNeeded === 1 ? 'confirmation' : 'confirmations'} needed)
-
-
-
-
- Transaction hash:{' '}
-
- {txHash ? (
-
- {NOT_AVAILABLE}
-
- )}
-
- {safeTxHash !== undefined && (
-
-
- SafeTxHash:{' '}
-
-
- )}
- {nonce !== undefined && (
-
-
- Nonce:{' '}
-
-
- {nonce}
-
-
- )}
- {created && (
-
-
- Created:{' '}
-
-
- {formatDateTime(created)}
-
-
- )}
-
-
- Executed:{' '}
-
-
- {executedAt ? formatDateTime(executedAt) : NOT_AVAILABLE}
-
-
{txData?.operation === Operation.DELEGATE && (
+ + )} + +
-
+
-
+