-
- Transfer between my accounts
-
-
Address Book Account 1
-
-
+
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/pages/send/send-content/add-recipient/add-recipient.component.js
index 7190c6dc8..90694fe74 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.component.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.component.js
@@ -6,9 +6,13 @@ import Dialog from '../../../../components/ui/dialog';
import ContactList from '../../../../components/app/contact-list';
import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component';
import { ellipsify } from '../../send.utils';
-import Button from '../../../../components/ui/button';
import Confusable from '../../../../components/ui/confusable';
-import { Icon, IconName } from '../../../../components/component-library';
+import { Text } from '../../../../components/component-library';
+import Box from '../../../../components/ui/box';
+import {
+ TextColor,
+ TextVariant,
+} from '../../../../helpers/constants/design-system';
export default class AddRecipient extends Component {
static propTypes = {
@@ -23,9 +27,6 @@ export default class AddRecipient extends Component {
contacts: PropTypes.array,
nonContacts: PropTypes.array,
addHistoryEntry: PropTypes.func,
- useMyAccountsForRecipientSearch: PropTypes.func,
- useContactListForRecipientSearch: PropTypes.func,
- isUsingMyAccountsForRecipientSearch: PropTypes.bool,
recipient: PropTypes.shape({
address: PropTypes.string,
nickname: PropTypes.string,
@@ -106,7 +107,7 @@ export default class AddRecipient extends Component {
recipient,
userInput,
addressBookEntryName,
- isUsingMyAccountsForRecipientSearch,
+ ownedAccounts = [],
} = this.props;
let content;
@@ -123,15 +124,17 @@ export default class AddRecipient extends Component {
addressBookEntryName || userInput,
'ENS resolution',
);
- } else if (isUsingMyAccountsForRecipientSearch) {
- content = this.renderTransfer();
}
return (
-
+
+ {ownedAccounts &&
+ ownedAccounts.length > 1 &&
+ !userInput &&
+ this.renderTransfer()}
{this.renderDialogs()}
{content || this.renderMain()}
-
+
);
}
@@ -158,15 +161,11 @@ export default class AddRecipient extends Component {
}
renderTransfer() {
- let { ownedAccounts } = this.props;
- const {
- userInput,
- useContactListForRecipientSearch,
- isUsingMyAccountsForRecipientSearch,
- } = this.props;
const { t } = this.context;
+ let { ownedAccounts } = this.props;
+ const { userInput } = this.props;
- if (isUsingMyAccountsForRecipientSearch && userInput) {
+ if (userInput) {
ownedAccounts = ownedAccounts.filter(
(item) =>
item.name.toLowerCase().indexOf(userInput.toLowerCase()) > -1 ||
@@ -175,37 +174,42 @@ export default class AddRecipient extends Component {
}
return (
-
-
-
-
- this.selectRecipient(address, name, 'my accounts')
- }
- />
-
+ <>
+
+
+ {t('myAccounts')}
+
+
+
+
+ this.selectRecipient(address, name, 'my accounts')
+ }
+ />
+
+
);
}
renderMain() {
const { t } = this.context;
- const {
- userInput,
- ownedAccounts = [],
- addressBook,
- useMyAccountsForRecipientSearch,
- } = this.props;
-
+ const { addressBook, userInput } = this.props;
return (
+ {addressBook.length && userInput > 0 ? (
+
+
+ {t('contacts')}
+
+
+ ) : null}
- {ownedAccounts && ownedAccounts.length > 1 && !userInput && (
-
- {t('transferBetweenAccounts')}
-
- )}
-
+ />
);
}
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js b/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js
index 0aa31b88f..deaabbc83 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js
@@ -58,71 +58,4 @@ describe('Add Recipient Component', () => {
expect(container).toMatchSnapshot();
});
});
-
- describe('Recent recipient order', () => {
- const recentRecipientState = {
- ...mockState,
- metamask: {
- ...mockState.metamask,
- addressBook: {
- '0x5': {
- '0x0000000000000000000000000000000000000001': {
- address: '0x0000000000000000000000000000000000000001',
- chainId: '0x5',
- isEns: false,
- memo: '',
- name: '',
- },
- '0x0000000000000000000000000000000000000002': {
- address: '0x0000000000000000000000000000000000000002',
- chainId: '0x5',
- isEns: false,
- memo: '',
- name: '',
- },
- '0x0000000000000000000000000000000000000003': {
- address: '0x0000000000000000000000000000000000000003',
- chainId: '0x5',
- isEns: false,
- memo: '',
- name: '',
- },
- },
- },
- currentNetworkTxList: [
- {
- time: 1674425700001,
- txParams: {
- to: '0x0000000000000000000000000000000000000001',
- },
- },
- {
- time: 1674425700002,
- txParams: {
- to: '0x0000000000000000000000000000000000000002',
- },
- },
- {
- time: 1674425700003,
- txParams: {
- to: '0x0000000000000000000000000000000000000003',
- },
- },
- ],
- },
- };
- const mockStore = configureMockStore()(recentRecipientState);
-
- it('should render latest used recipient first', () => {
- const { getAllByTestId } = renderWithProvider(
-
,
- mockStore,
- );
-
- const recipientList = getAllByTestId('recipient');
-
- expect(recipientList[0]).toHaveTextContent('0x0000...0003');
- expect(recipientList[1]).toHaveTextContent('0x0000...0002');
- });
- });
});
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.container.js b/ui/pages/send/send-content/add-recipient/add-recipient.container.js
index 1df1274d9..0b325a19f 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.container.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.container.js
@@ -11,7 +11,6 @@ import {
updateRecipientUserInput,
useMyAccountsForRecipientSearch,
useContactListForRecipientSearch,
- getIsUsingMyAccountForRecipientSearch,
getRecipientUserInput,
getRecipient,
addHistoryEntry,
@@ -63,8 +62,6 @@ function mapStateToProps(state) {
domainWarning: getDomainWarning(state),
nonContacts,
ownedAccounts,
- isUsingMyAccountsForRecipientSearch:
- getIsUsingMyAccountForRecipientSearch(state),
userInput: getRecipientUserInput(state),
recipient: getRecipient(state),
};
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.container.test.js b/ui/pages/send/send-content/add-recipient/add-recipient.container.test.js
index bb836ed3c..512a9d811 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.container.test.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.container.test.js
@@ -35,8 +35,6 @@ jest.mock('../../../../ducks/send', () => ({
`mockUseMyAccountsForRecipientSearch:${s}`,
useContactListForRecipientSearch: (s) =>
`mockUseContactListForRecipientSearch:${s}`,
- getIsUsingMyAccountForRecipientSearch: (s) =>
- `mockGetIsUsingMyAccountForRecipientSearch:${s}`,
getRecipientUserInput: (s) => `mockRecipientUserInput:${s}`,
getRecipient: (s) => `mockRecipient:${s}`,
}));
@@ -58,8 +56,6 @@ describe('add-recipient container', () => {
{ name: 'account1:mockState' },
{ name: 'account2:mockState' },
],
- isUsingMyAccountsForRecipientSearch:
- 'mockGetIsUsingMyAccountForRecipientSearch:mockState',
userInput: 'mockRecipientUserInput:mockState',
recipient: 'mockRecipient:mockState',
});
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.stories.js b/ui/pages/send/send-content/add-recipient/add-recipient.stories.js
index 83a68c54d..31530bb2e 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.stories.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.stories.js
@@ -53,9 +53,7 @@ export default {
useContactListForRecipientSearch: {
action: 'useContactListForRecipientSearch',
},
- isUsingMyAccountsForRecipientSearch: {
- control: 'bool',
- },
+
recipient: {
control: 'object',
},
diff --git a/ui/pages/send/send-content/add-recipient/domain-input.component.js b/ui/pages/send/send-content/add-recipient/domain-input.component.js
index 9573d00db..9e550c1be 100644
--- a/ui/pages/send/send-content/add-recipient/domain-input.component.js
+++ b/ui/pages/send/send-content/add-recipient/domain-input.component.js
@@ -10,7 +10,6 @@ import {
} from '../../../../../shared/modules/hexstring-utils';
import {
ButtonIcon,
- Icon,
IconName,
IconSize,
} from '../../../../components/component-library';
@@ -104,19 +103,6 @@ export default class DomainInput extends Component {
'ens-input__wrapper--valid': hasSelectedAddress,
})}
>
- {hasSelectedAddress ? (
-
- ) : (
-
- )}
{hasSelectedAddress ? (
<>
@@ -160,7 +146,7 @@ export default class DomainInput extends Component {
this.props.scanQrCode();
}
}}
- iconName={userInput ? IconName.Close : IconName.ScanBarcode}
+ iconName={userInput ? IconName.Close : IconName.Scan}
ariaLabel={t(userInput ? 'close' : 'scanQrCode')}
color={
userInput ? IconColor.iconDefault : IconColor.primaryDefault
diff --git a/ui/pages/send/send.scss b/ui/pages/send/send.scss
index b0a57f8eb..8e847e93b 100644
--- a/ui/pages/send/send.scss
+++ b/ui/pages/send/send.scss
@@ -5,7 +5,6 @@
position: relative;
display: flex;
justify-content: center;
- background-color: var(--color-background-alternative);
border-bottom: none;
padding: 14px 0 3px 0;
@@ -48,8 +47,6 @@
margin: 0;
padding: 0.5rem;
flex: 0 0 auto;
- background-color: var(--color-background-alternative);
- border-bottom: 1px solid var(--color-border-muted);
}
&__select-recipient-wrapper {
@@ -59,15 +56,12 @@
height: 0;
&__list {
- overflow-y: auto;
-
&__link {
@include Paragraph;
@extend %row-nowrap;
padding: 1rem;
- border-bottom: 1px solid var(--color-border-muted);
border-radius: 0;
align-items: center;
justify-content: flex-start;
@@ -102,26 +96,11 @@
@extend %col-nowrap;
}
- &__group-label {
- @include H8;
-
- background-color: var(--color-background-alternative);
- color: var(--color-text-alternative);
- padding: 0.5rem 1rem;
- border-bottom: 1px solid var(--color-border-muted);
-
- &:first-of-type {
- border-top: 1px solid var(--color-border-muted);
- }
- }
-
&__group-item,
&__group-item--selected {
@extend %row-nowrap;
- padding: 0.75rem 1rem;
align-items: center;
- border-bottom: 1px solid var(--color-border-muted);
cursor: pointer;
&:hover {
@@ -139,22 +118,6 @@
flex: 1 1 auto;
width: 0;
}
-
- &__title {
- @include H6;
-
- max-width: 20em;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- color: var(--color-text-default);
- }
-
- &__subtitle {
- @include H8;
-
- color: var(--color-text-muted);
- }
}
&__group-item--selected {
diff --git a/ui/pages/send/send.test.js b/ui/pages/send/send.test.js
index 5f73a700b..0713cbe81 100644
--- a/ui/pages/send/send.test.js
+++ b/ui/pages/send/send.test.js
@@ -182,7 +182,7 @@ describe('Send Page', () => {
const store = configureMockStore(middleware)(baseStore);
const { getByPlaceholderText } = renderWithProvider(
, store);
expect(
- getByPlaceholderText('Search, public address (0x), or ENS'),
+ getByPlaceholderText('Enter public address (0x) or ENS name'),
).toBeTruthy();
});
@@ -205,7 +205,7 @@ describe('Send Page', () => {
// Ensure that the send flow renders on the add recipient screen when
// there is no draft transaction.
expect(
- getByPlaceholderText('Search, public address (0x), or ENS'),
+ getByPlaceholderText('Enter public address (0x) or ENS name'),
).toBeTruthy();
// Ensure we start a new draft transaction when its missing.
expect(startNewDraftTransaction).toHaveBeenCalledTimes(1);
@@ -247,7 +247,7 @@ describe('Send Page', () => {
const store = configureMockStore(middleware)(baseStore);
const { getByPlaceholderText } = renderWithProvider(
, store);
expect(
- getByPlaceholderText('Search, public address (0x), or ENS'),
+ getByPlaceholderText('Enter public address (0x) or ENS name'),
).toBeTruthy();
});
diff --git a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
index 02cce6a37..ec758e16d 100644
--- a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
+++ b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
@@ -6,17 +6,17 @@ import {
CONTACT_ADD_ROUTE,
CONTACT_VIEW_ROUTE,
} from '../../../helpers/constants/routes';
-import Button from '../../../components/ui/button';
import {
getNumberOfSettingsInSection,
handleSettingsRefs,
} from '../../../helpers/utils/settings-search';
import {
+ ButtonPrimary,
Icon,
IconName,
IconSize,
} from '../../../components/component-library';
-import { IconColor } from '../../../helpers/constants/design-system';
+import { IconColor, Size } from '../../../helpers/constants/design-system';
import EditContact from './edit-contact';
import AddContact from './add-contact';
import ViewContact from './view-contact';
@@ -33,7 +33,6 @@ export default class ContactListTab extends Component {
viewingContact: PropTypes.bool,
editingContact: PropTypes.bool,
addingContact: PropTypes.bool,
- showContactContent: PropTypes.bool,
hideAddressBook: PropTypes.bool,
};
@@ -105,35 +104,24 @@ export default class ContactListTab extends Component {
const { history, viewingContact, editingContact } = this.props;
return (
-
- {
- history.push(CONTACT_ADD_ROUTE);
- }}
- >
- {this.context.t('addContact')}
-
-
+
{
+ history.push(CONTACT_ADD_ROUTE);
+ }}
+ margin={4}
+ size={Size.LG}
+ >
+ {this.context.t('addContact')}
+
);
}
renderContactContent() {
- const {
- viewingContact,
- editingContact,
- addingContact,
- showContactContent,
- } = this.props;
-
- if (!showContactContent) {
- return null;
- }
+ const { viewingContact, editingContact, addingContact } = this.props;
let ContactContentComponent = null;
if (viewingContact) {
diff --git a/ui/pages/settings/contact-list-tab/contact-list-tab.container.js b/ui/pages/settings/contact-list-tab/contact-list-tab.container.js
index 60e760a11..e4e3bb4b6 100644
--- a/ui/pages/settings/contact-list-tab/contact-list-tab.container.js
+++ b/ui/pages/settings/contact-list-tab/contact-list-tab.container.js
@@ -2,8 +2,6 @@ import { compose } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { getAddressBook } from '../../../selectors';
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
-import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import {
CONTACT_ADD_ROUTE,
@@ -22,10 +20,8 @@ const mapStateToProps = (state, ownProps) => {
const viewingContact = Boolean(pathname.match(CONTACT_VIEW_ROUTE));
const editingContact = Boolean(pathname.match(CONTACT_EDIT_ROUTE));
const addingContact = Boolean(pathname.match(CONTACT_ADD_ROUTE));
- const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
- const hideAddressBook =
- envIsPopup && (viewingContact || editingContact || addingContact);
+ const hideAddressBook = viewingContact || editingContact || addingContact;
return {
viewingContact,
@@ -34,8 +30,6 @@ const mapStateToProps = (state, ownProps) => {
addressBook: getAddressBook(state),
selectedAddress: pathNameTailIsAddress ? pathNameTail : '',
hideAddressBook,
- envIsPopup,
- showContactContent: !envIsPopup || hideAddressBook,
};
};
diff --git a/ui/pages/settings/contact-list-tab/index.scss b/ui/pages/settings/contact-list-tab/index.scss
index e3fb4eb43..077b56fd8 100644
--- a/ui/pages/settings/contact-list-tab/index.scss
+++ b/ui/pages/settings/contact-list-tab/index.scss
@@ -1,6 +1,6 @@
.address-book-wrapper {
display: flex;
- justify-content: space-between;
+ flex-direction: column;
height: 100%;
}
@@ -214,15 +214,7 @@
.address-book-add-button {
&__button {
- position: absolute;
- top: 92px;
- right: 16px;
- width: auto;
-
@include screen-sm-max {
- top: 20px;
- right: 60px;
-
&--hidden {
display: none;
}