diff --git a/e2e/sendSheetFlow.spec.js b/e2e/sendSheetFlow.spec.js
index cf4cfa83bed..252716c8a25 100644
--- a/e2e/sendSheetFlow.spec.js
+++ b/e2e/sendSheetFlow.spec.js
@@ -81,12 +81,12 @@ describe('Send Sheet Interaction Flow', () => {
await Helpers.checkIfElementByTextIsVisible('Collectibles');
});
- it('Should say "poopcoin.eth" in the Profile Screen header', async () => {
+ it('Should say correct address in the Profile Screen header', async () => {
await Helpers.swipe('wallet-screen', 'right');
if (device.getPlatform() === 'android') {
- await Helpers.checkIfElementByTextToExist('0x3C...D3f608');
+ await Helpers.checkIfElementByTextToExist('0x3C...f608');
} else {
- await Helpers.checkIfElementByTextIsVisible('0x3C...D3f608');
+ await Helpers.checkIfElementByTextIsVisible('0x3C...f608');
}
await Helpers.swipe('profile-screen', 'left');
});
diff --git a/src/components/asset-list/AssetListHeader.js b/src/components/asset-list/AssetListHeader.js
index 2aa0835372b..3b87967d928 100644
--- a/src/components/asset-list/AssetListHeader.js
+++ b/src/components/asset-list/AssetListHeader.js
@@ -1,11 +1,83 @@
-import React from 'react';
-import { magicMemo } from '../../utils';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { IS_TESTING } from 'react-native-dotenv';
+import LinearGradient from 'react-native-linear-gradient';
+import styled from 'styled-components';
+import { abbreviations, magicMemo, measureText } from '../../utils';
import { DividerSize } from '../Divider';
+import { ButtonPressAnimation } from '../animations';
+import { Icon } from '../icons';
+import { Centered, Row } from '../layout';
import { ListHeader, ListHeaderHeight } from '../list';
-import { H1 } from '../text';
+import { H1, TruncatedText } from '../text';
+import { useTheme } from '@rainbow-me/context';
+import { useAccountProfile, useDimensions } from '@rainbow-me/hooks';
+import { useNavigation } from '@rainbow-me/navigation';
+import Routes from '@rainbow-me/routes';
+import { fonts, position } from '@rainbow-me/styles';
export const AssetListHeaderHeight = ListHeaderHeight + DividerSize;
+const dropdownArrowWidth = 30;
+
+const AccountName = styled(TruncatedText).attrs({
+ align: 'left',
+ firstSectionLength: abbreviations.defaultNumCharsPerSection,
+ letterSpacing: 'roundedMedium',
+ size: 'big',
+ truncationLength: 4,
+ weight: 'bold',
+})`
+ height: ${android ? '35' : '30'};
+ margin-top: 2;
+ margin-bottom: ${android ? '8' : '0'};
+ max-width: ${({ deviceWidth, totalValueLength }) =>
+ deviceWidth - dropdownArrowWidth - 32 - totalValueLength * 15};
+ padding-right: 6;
+`;
+
+const DropdownArrow = styled(Centered)`
+ border-radius: 15;
+ height: ${dropdownArrowWidth};
+ margin-top: ${android ? '9' : '2'};
+ width: ${dropdownArrowWidth};
+`;
+
+const WalletSelectButton = ({
+ truncatedAccountName,
+ onChangeWallet,
+ deviceWidth,
+ textWidth,
+ totalValue,
+}) => {
+ const { colors } = useTheme();
+ return (
+
+
+
+ {truncatedAccountName}
+
+ {truncatedAccountName ? (
+
+
+
+
+ ) : null}
+
+
+ );
+};
+
const AssetListHeader = ({
contextMenuOptions,
isCoinListEdited,
@@ -13,22 +85,67 @@ const AssetListHeader = ({
title,
totalValue,
...props
-}) => (
-
- {totalValue ? (
-
- {totalValue}
-
- ) : null}
-
-);
+}) => {
+ const { width: deviceWidth } = useDimensions();
+ const { accountName } = useAccountProfile();
+ const { navigate } = useNavigation();
+
+ const onChangeWallet = useCallback(() => {
+ navigate(Routes.CHANGE_WALLET_SHEET);
+ }, [navigate]);
+
+ const [textWidth, setTextWidth] = useState(deviceWidth);
+
+ const maxWidth =
+ deviceWidth - dropdownArrowWidth - 32 - totalValue?.length * 15;
+
+ useEffect(() => {
+ async function measure() {
+ const { width } = await measureText(accountName, {
+ fontSize: parseFloat(fonts.size.big),
+ fontWeight: fonts.weight.bold,
+ letterSpacing: fonts.letterSpacing.roundedMedium,
+ });
+ setTextWidth(width);
+ }
+ measure();
+ }, [accountName]);
+
+ const truncated = textWidth > maxWidth - 6;
+
+ const truncatedAccountName = useMemo(() => {
+ if (truncated && accountName?.endsWith('.eth')) {
+ return accountName.slice(0, -4);
+ }
+ return accountName;
+ }, [accountName, truncated]);
+
+ return (
+
+ {!title && IS_TESTING !== 'true' && (
+
+ )}
+ {totalValue ? (
+
+ {totalValue}
+
+ ) : null}
+
+ );
+};
export default magicMemo(AssetListHeader, [
'contextMenuOptions',
diff --git a/src/components/coin-divider/CoinDividerButtonLabel.js b/src/components/coin-divider/CoinDividerButtonLabel.js
index 0b7a4e4ae23..8c3fde94446 100644
--- a/src/components/coin-divider/CoinDividerButtonLabel.js
+++ b/src/components/coin-divider/CoinDividerButtonLabel.js
@@ -4,19 +4,23 @@ import { magicMemo } from '../../utils';
import { OpacityToggler } from '../animations';
import { Text } from '../text';
-const LabelText = styled(Text).attrs(({ theme: { colors } }) => ({
+const LabelText = styled(Text).attrs(({ shareButton, theme: { colors } }) => ({
color: colors.alpha(colors.blueGreyDark, 0.6),
letterSpacing: 'roundedTight',
+ lineHeight: 30,
size: 'lmedium',
- weight: 'bold',
+ weight: shareButton ? 'heavy' : 'bold',
}))`
position: absolute;
- top: ${android ? -15.25 : -10.25};
+ top: ${android ? -15 : -16};
+ ${({ shareButton }) => shareButton && `width: 100%;`};
`;
-const CoinDividerButtonLabel = ({ isVisible, label }) => (
+const CoinDividerButtonLabel = ({ align, isVisible, label, shareButton }) => (
- {label}
+
+ {label}
+
);
diff --git a/src/components/icons/Icon.js b/src/components/icons/Icon.js
index 30d89d826db..9dbff8d97c4 100644
--- a/src/components/icons/Icon.js
+++ b/src/components/icons/Icon.js
@@ -64,6 +64,7 @@ import ThreeDotsIcon from './svg/ThreeDotsIcon';
import TouchIdIcon from './svg/TouchIdIcon';
import TwitterIcon from './svg/TwitterIcon';
import WalletConnectIcon from './svg/WalletConnectIcon';
+import WalletSwitcherCaret from './svg/WalletSwitcherCaret';
import WarningCircledIcon from './svg/WarningCircledIcon';
import WarningIcon from './svg/WarningIcon';
@@ -133,6 +134,7 @@ const IconTypes = {
touchid: TouchIdIcon,
twitter: TwitterIcon,
walletConnect: WalletConnectIcon,
+ walletSwitcherCaret: WalletSwitcherCaret,
warning: WarningIcon,
warningCircled: WarningCircledIcon,
};
diff --git a/src/components/icons/svg/WalletSwitcherCaret.js b/src/components/icons/svg/WalletSwitcherCaret.js
new file mode 100644
index 00000000000..7765809aa38
--- /dev/null
+++ b/src/components/icons/svg/WalletSwitcherCaret.js
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Path } from 'react-native-svg';
+import Svg from '../Svg';
+
+const WalletSwitcherCaret = ({ color, colors, ...props }) => {
+ return (
+
+ );
+};
+
+WalletSwitcherCaret.propTypes = {
+ color: PropTypes.string,
+};
+
+export default WalletSwitcherCaret;
diff --git a/src/components/list/ListHeader.js b/src/components/list/ListHeader.js
index 1576114927d..d65cef11bb7 100644
--- a/src/components/list/ListHeader.js
+++ b/src/components/list/ListHeader.js
@@ -19,7 +19,7 @@ import {
import { RAINBOW_PROFILES_BASE_URL } from '@rainbow-me/references';
import { padding, position } from '@rainbow-me/styles';
-export const ListHeaderHeight = 44;
+export const ListHeaderHeight = 50;
const BackgroundGradient = styled(LinearGradient).attrs(
({ theme: { colors } }) => ({
@@ -37,21 +37,20 @@ const BackgroundGradient = styled(LinearGradient).attrs(
`;
const ShareCollectiblesBPA = styled(ButtonPressAnimation)`
- background-color: ${({ theme: { colors } }) => colors.blueGreyDarkLight};
- margin-right: 0;
- width: 90;
- height: 30;
+ background-color: ${({ theme: { colors } }) =>
+ colors.alpha(colors.blueGreyDark, 0.06)};
border-radius: 15;
- padding-left: 12;
- padding-right: 8;
- padding-top: 5;
- padding-bottom: 5;
+ height: 30;
justify-content: center;
+ max-width: 90;
+ padding-bottom: 5;
+ padding-top: 5;
+ width: 90;
`;
const ShareCollectiblesButton = ({ onPress }) => (
-
+
);
@@ -59,7 +58,7 @@ const Content = styled(Row).attrs({
align: 'center',
justify: 'space-between',
})`
- ${padding(0, 19, 2)};
+ ${padding(5, 19)};
background-color: ${({ isSticky, theme: { colors } }) =>
isSticky ? colors.white : colors.transparent};
height: ${ListHeaderHeight};
@@ -84,6 +83,7 @@ export default function ListHeader({
totalValue,
}) {
const deviceDimensions = useDimensions();
+ const { colors } = useTheme();
const { isReadOnlyWallet } = useWallets();
const { accountAddress } = useAccountSettings();
const { accountENS } = useAccountProfile();
@@ -125,20 +125,24 @@ export default function ListHeader({
-
- {createElement(titleRenderer, { children: title })}
- {title === 'Collectibles' && (
-
- handleShare(isReadOnlyWallet, accountAddress)}
- />
-
- )}
-
-
+ {title && (
+
+ {createElement(titleRenderer, { children: title })}
+ {title === 'Collectibles' && (
+
+
+ handleShare(isReadOnlyWallet, accountAddress)
+ }
+ />
+
+ )}
+
+
+ )}
{children}
- {showDivider && }
+ {showDivider && }
{!isSticky && title !== 'Balances' && (