-
-
{t('details')}
+
{showSpeedUp && (
)}
-
-
-
-
-
-
{showRetry && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{t('from')}
+
{t('to')}
+
-
+
+
+
+ {transactionGroup.initialTransaction?.txParams?.data ? (
+
+
+
+ ) : null}
diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js
index 88227e7d0..b5f215c15 100644
--- a/ui/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/components/app/transaction-list-item/transaction-list-item.component.js
@@ -212,6 +212,16 @@ export default function TransactionListItem({
isEarliestNonce={isEarliestNonce}
onCancel={cancelTransaction}
showCancel={isPending && !hasCancelled}
+ transactionStatus={() => (
+
+ )}
/>
)}
{showRetryEditGasPopover && (
diff --git a/ui/components/app/transaction-status/index.scss b/ui/components/app/transaction-status/index.scss
index 0896aa7f8..18af1f0df 100644
--- a/ui/components/app/transaction-status/index.scss
+++ b/ui/components/app/transaction-status/index.scss
@@ -1,6 +1,10 @@
.transaction-status {
display: inline;
+ &--confirmed {
+ color: $success-3;
+ }
+
&--unapproved {
color: $Orange-500;
}
diff --git a/ui/components/app/transaction-status/transaction-status.component.js b/ui/components/app/transaction-status/transaction-status.component.js
index f8f5f8018..584989adb 100644
--- a/ui/components/app/transaction-status/transaction-status.component.js
+++ b/ui/components/app/transaction-status/transaction-status.component.js
@@ -43,6 +43,7 @@ export default function TransactionStatus({
error,
isEarliestNonce,
className,
+ statusOnly,
}) {
const t = useI18nContext();
const tooltipText = error?.rpc?.message || error?.message;
@@ -54,7 +55,9 @@ export default function TransactionStatus({
}
const statusText =
- statusKey === TRANSACTION_STATUSES.CONFIRMED ? date : t(statusKey);
+ statusKey === TRANSACTION_STATUSES.CONFIRMED && !statusOnly
+ ? date
+ : t(statusKey);
return (
{
+ const disclosureFooterEl = useRef(null);
+ const [open, setOpen] = useState(false);
+
+ const scrollToBottom = () => {
+ disclosureFooterEl &&
+ disclosureFooterEl.current &&
+ disclosureFooterEl.current.scrollIntoView({ behavior: 'smooth' });
+ };
+
+ useEffect(() => {
+ if (open) {
+ scrollToBottom();
+ }
+ }, [open]);
+
+ return (
+ setOpen((state) => !state)}>
+ {title ? (
+
+
+ {title}:{' '}
+
+
+ {children}
+
+
+
+ ) : (
+ children
+ )}
+
- {shortenAddress(address)}
+ {nickname || shortenAddress(address)}
{address}
-
+
+
+
- {t('viewOnBlockExplorer')}
+
@@ -60,8 +86,10 @@ const NicknamePopover = ({ address, onClose = null, onAdd = null }) => {
NicknamePopover.propTypes = {
address: PropTypes.string,
+ nickname: PropTypes.string,
onClose: PropTypes.func,
onAdd: PropTypes.func,
+ explorerLink: PropTypes.string,
};
export default NicknamePopover;
diff --git a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
index 4f92a3016..ef229d84c 100644
--- a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
@@ -8,6 +8,7 @@ import { shortenAddress } from '../../../helpers/utils/util';
import AccountMismatchWarning from '../account-mismatch-warning/account-mismatch-warning.component';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
+import NicknamePopovers from '../../app/modals/nickname-popovers';
import {
DEFAULT_VARIANT,
CARDS_VARIANT,
@@ -94,7 +95,7 @@ SenderAddress.propTypes = {
warnUserOnAccountMismatch: PropTypes.bool,
};
-function RecipientWithAddress({
+export function RecipientWithAddress({
checksummedRecipientAddress,
onRecipientClick,
addressOnly,
@@ -103,44 +104,22 @@ function RecipientWithAddress({
recipientName,
}) {
const t = useI18nContext();
- const [addressCopied, setAddressCopied] = useState(false);
+ const [showNicknamePopovers, setShowNicknamePopovers] = useState(false);
- let tooltipHtml =
{t('copiedExclamation')}
;
- if (!addressCopied) {
- if (addressOnly && !recipientNickname && !recipientEns) {
- tooltipHtml =
{t('copyAddress')}
;
- } else {
- tooltipHtml = (
-
- {shortenAddress(checksummedRecipientAddress)}
-
- {t('copyAddress')}
-
- );
- }
- }
return (
-
{
- setAddressCopied(true);
- copyToClipboard(checksummedRecipientAddress);
- if (onRecipientClick) {
- onRecipientClick();
- }
- }}
- >
-
-
-
-
setAddressCopied(false)}
+ <>
+ {
+ setShowNicknamePopovers(true);
+ if (onRecipientClick) {
+ onRecipientClick();
+ }
+ }}
>
+
+
+
{addressOnly
? recipientNickname ||
@@ -151,8 +130,14 @@ function RecipientWithAddress({
recipientName ||
t('newContract')}
-
-
+ {showNicknamePopovers ? (
+
setShowNicknamePopovers(false)}
+ address={checksummedRecipientAddress}
+ />
+ ) : null}
+
);
}
diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss
index b31e24e32..34c435acd 100644
--- a/ui/components/ui/ui-components.scss
+++ b/ui/components/ui/ui-components.scss
@@ -55,3 +55,4 @@
@import 'unit-input/index';
@import 'url-icon/index';
@import 'update-nickname-popover/index';
+@import 'disclosure/disclosure';
diff --git a/ui/components/ui/update-nickname-popover/index.scss b/ui/components/ui/update-nickname-popover/index.scss
index 845cff195..650edf11d 100644
--- a/ui/components/ui/update-nickname-popover/index.scss
+++ b/ui/components/ui/update-nickname-popover/index.scss
@@ -3,12 +3,19 @@
&__wrapper {
height: 620px;
width: 360px;
- border-radius: 0;
+ border-radius: 10px;
+ max-height: 100vh;
+ width: auto;
.popover-header {
border-bottom: 1px solid #d2d8dd;
margin-bottom: 16px;
- border-radius: 0;
+ border-radius: 10px;
+ }
+
+ @media screen and (max-width: $break-small) {
+ width: 96%;
+ height: 96%;
}
}
@@ -37,6 +44,7 @@
font-size: 13px;
color: #bbc0c5;
margin-bottom: 16px;
+ overflow-wrap: break-word;
}
&__label,
diff --git a/ui/components/ui/update-nickname-popover/update-nickname-popover.js b/ui/components/ui/update-nickname-popover/update-nickname-popover.js
index 8f81ffe7d..2713d7b70 100644
--- a/ui/components/ui/update-nickname-popover/update-nickname-popover.js
+++ b/ui/components/ui/update-nickname-popover/update-nickname-popover.js
@@ -42,14 +42,9 @@ export default function UpdateNicknamePopover({
onClose();
};
- let title = t('addANickname');
- if (nickname) {
- title = t('editAddressNickname');
- }
-
return (
{t('cancel')}
-