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' && (