diff --git a/src/ui/views/GnosisTransactionQueue/GnosisTransactionQueueList.tsx b/src/ui/views/GnosisTransactionQueue/GnosisTransactionQueueList.tsx index 90bf776ced8..5e5da556bb9 100644 --- a/src/ui/views/GnosisTransactionQueue/GnosisTransactionQueueList.tsx +++ b/src/ui/views/GnosisTransactionQueue/GnosisTransactionQueueList.tsx @@ -3,7 +3,6 @@ import { SafeTransactionItem } from '@rabby-wallet/gnosis-sdk/dist/api'; import { Button, Skeleton, Tooltip, message } from 'antd'; import { ApproveAction, - ExplainTxResponse, ParseTxResponse, RevokeTokenApproveAction, SendAction, @@ -11,23 +10,22 @@ import { import { Account } from 'background/service/preference'; import clsx from 'clsx'; import dayjs from 'dayjs'; -import { get, groupBy } from 'lodash'; -import React, { useEffect, useState } from 'react'; +import { groupBy } from 'lodash'; +import React, { useEffect, useMemo, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { numberToHex, toChecksumAddress } from 'web3-utils'; import { useGnosisSafeInfo } from '@/ui/hooks/useGnosisSafeInfo'; import { useAccount } from '@/ui/store-hooks'; +import { getTokenSymbol } from '@/ui/utils/token'; +import { findChain, findChainByID } from '@/utils/chain'; import { LoadingOutlined } from '@ant-design/icons'; import { SafeTransactionDataPartial } from '@gnosis.pm/safe-core-sdk-types'; -import { - CHAINS, - CHAINS_ENUM, - INTERNAL_REQUEST_ORIGIN, - KEYRING_CLASS, -} from 'consts'; +import { useRequest } from 'ahooks'; +import { CHAINS_ENUM, INTERNAL_REQUEST_ORIGIN, KEYRING_CLASS } from 'consts'; import { intToHex } from 'ethereumjs-util'; import { useHistory } from 'react-router-dom'; +import { Virtuoso } from 'react-virtuoso'; import IconUser from 'ui/assets/address-management.svg'; import IconChecked from 'ui/assets/checked.svg'; import IconUnknown from 'ui/assets/icon-unknown.svg'; @@ -39,12 +37,9 @@ import AccountSelectDrawer from 'ui/component/AccountSelectDrawer'; import { isSameAddress, timeago, useWallet } from 'ui/utils'; import { validateEOASign, validateETHSign } from 'ui/utils/gnosis'; import { splitNumberByStep } from 'ui/utils/number'; +import { getProtocol } from '../Approval/components/Actions/utils'; import { ReplacePopup } from './components/ReplacePopup'; import './style.less'; -import { findChain, findChainByID } from '@/utils/chain'; -import { getTokenSymbol } from '@/ui/utils/token'; -import { useRequest } from 'ahooks'; -import { getProtocol } from '../Approval/components/Actions/utils'; interface TransactionConfirmationsProps { confirmations: SafeTransactionItem['confirmations']; @@ -670,38 +665,54 @@ export const GnosisTransactionQueueList = (props: { } }, [pendingTxs, safeInfo]); + const list = useMemo(() => { + return Object.entries(transactionsGroup); + }, [transactionsGroup]); + return ( -
- {safeInfo && Object.keys(transactionsGroup).length > 0 ? ( - Object.keys(transactionsGroup).map((nonce) => - transactionsGroup[nonce].length > 1 ? ( -
-
- - {t('page.safeQueue.sameNonceWarning')} +
+ {safeInfo && list.length ? ( + { + return items.length > 1 ? ( +
+
+
+ + {t('page.safeQueue.sameNonceWarning')} +
+ {items.map((transaction) => ( + + ))} +
- {transactionsGroup[nonce].map((transaction) => ( - - ))} -
- ) : ( - transactionsGroup[nonce].map((transaction) => ( - - )) - ) - ) + ) : ( + items.map((transaction) => ( +
+ +
+ )) + ); + }} + > ) : (
{isLoading || loading || isSafeInfoLoading ? ( diff --git a/src/ui/views/GnosisTransactionQueue/style.less b/src/ui/views/GnosisTransactionQueue/style.less index 0d05f87ac4e..5e481099e01 100644 --- a/src/ui/views/GnosisTransactionQueue/style.less +++ b/src/ui/views/GnosisTransactionQueue/style.less @@ -51,7 +51,6 @@ background-color: var(--r-neutral-card-1); border-radius: 6px; padding: 12px; - margin-bottom: 20px; padding-bottom: 20px; &__time { font-size: 12px; @@ -203,7 +202,6 @@ background-color: var(--r-neutral-card-1); border: 1px solid var(--r-blue-default, #7084ff); border-radius: 6px; - margin-bottom: 20px; &__header { display: flex; font-weight: 500;