Name on assets screen (#2068)

Co-authored-by: Christian Baroni <[email protected]>
Co-authored-by: Skylar Barrera <[email protected]>

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');
   });

src/components/asset-list/AssetListHeader.js

@@ -1,34 +1,151 @@
-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 (
+    <ButtonPressAnimation onPress={onChangeWallet} scaleTo={0.9}>
+      <Row>
+        <AccountName
+          deviceWidth={deviceWidth}
+          textWidth={textWidth}
+          totalValueLength={totalValue.length}
+        >
+          {truncatedAccountName}
+        </AccountName>
+        {truncatedAccountName ? (
+          <DropdownArrow>
+            <LinearGradient
+              borderRadius={15}
+              colors={colors.gradients.lightestGrey}
+              end={{ x: 0.5, y: 1 }}
+              pointerEvents="none"
+              start={{ x: 0.5, y: 0 }}
+              style={[position.coverAsObject, { borderRadius: 15 }]}
+            />
+            <Icon name="walletSwitcherCaret" />
+          </DropdownArrow>
+        ) : null}
+      </Row>
+    </ButtonPressAnimation>
+  );
+};
+
 const AssetListHeader = ({
   contextMenuOptions,
   isCoinListEdited,
   isSticky,
   title,
   totalValue,
   ...props
-}) => (
-  <ListHeader
-    contextMenuOptions={contextMenuOptions}
-    isCoinListEdited={isCoinListEdited}
-    isSticky={isSticky}
-    title={title}
-    totalValue={totalValue}
-    {...props}
-  >
-    {totalValue ? (
-      <H1 align="right" letterSpacing="roundedTight" weight="semibold">
-        {totalValue}
-      </H1>
-    ) : null}
-  </ListHeader>
-);
+}) => {
+  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 (
+    <ListHeader
+      contextMenuOptions={contextMenuOptions}
+      isCoinListEdited={isCoinListEdited}
+      isSticky={isSticky}
+      title={title}
+      totalValue={totalValue}
+      {...props}
+    >
+      {!title && IS_TESTING !== 'true' && (
+        <WalletSelectButton
+          deviceWidth={deviceWidth}
+          onChangeWallet={onChangeWallet}
+          textWidth={textWidth}
+          totalValue={totalValue}
+          truncatedAccountName={truncatedAccountName}
+        />
+      )}
+      {totalValue ? (
+        <H1 align="right" letterSpacing="roundedTight" weight="semibold">
+          {totalValue}
+        </H1>
+      ) : null}
+    </ListHeader>
+  );
+};
 
 export default magicMemo(AssetListHeader, [
   'contextMenuOptions',

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 }) => (
   <OpacityToggler isVisible={isVisible}>
-    <LabelText>{label}</LabelText>
+    <LabelText align={align} shareButton={shareButton}>
+      {label}
+    </LabelText>
   </OpacityToggler>
 );
 

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,
 };

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 (
+    <Svg height="30" viewBox="0 0 30 30" width="30" {...props}>
+      <Path
+        clip-rule="evenodd"
+        d="M21.888 12.7593C21.5065 12.2689 20.7997 12.1805 20.3093 12.562L15.5371 16.2736C15.2212 16.5194 14.7787 16.5194 14.4628 16.2736L9.69063 12.562C9.20019 12.1805 8.49338 12.2689 8.11193 12.7593C7.73047 13.2498 7.81882 13.9566 8.30926 14.338L13.0814 18.0497C14.2099 18.9274 15.79 18.9274 16.9185 18.0497L21.6906 14.338C22.1811 13.9566 22.2694 13.2498 21.888 12.7593Z"
+        fill={color || colors.alpha(colors.blueGreyDark, 0.6)}
+        fill-rule="evenodd"
+      />
+    </Svg>
+  );
+};
+
+WalletSwitcherCaret.propTypes = {
+  color: PropTypes.string,
+};
+
+export default WalletSwitcherCaret;

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,29 +37,28 @@ 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 }) => (
   <ShareCollectiblesBPA onPress={onPress} scale={0.9}>
-    <CoinDividerButtonLabel label="􀈂 Share" />
+    <CoinDividerButtonLabel align="center" label="􀈂 Share" shareButton />
   </ShareCollectiblesBPA>
 );
 
 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({
       <Fragment>
         <BackgroundGradient />
         <Content isSticky={isSticky}>
-          <Row align="center">
-            {createElement(titleRenderer, { children: title })}
-            {title === 'Collectibles' && (
-              <Column align="flex-end" flex={1}>
-                <ShareCollectiblesButton
-                  onPress={() => handleShare(isReadOnlyWallet, accountAddress)}
-                />
-              </Column>
-            )}
-            <ContextMenu marginTop={3} {...contextMenuOptions} />
-          </Row>
+          {title && (
+            <Row align="center">
+              {createElement(titleRenderer, { children: title })}
+              {title === 'Collectibles' && (
+                <Column align="flex-end" flex={1}>
+                  <ShareCollectiblesButton
+                    onPress={() =>
+                      handleShare(isReadOnlyWallet, accountAddress)
+                    }
+                  />
+                </Column>
+              )}
+              <ContextMenu marginTop={3} {...contextMenuOptions} />
+            </Row>
+          )}
           {children}
         </Content>
-        {showDivider && <Divider />}
+        {showDivider && <Divider color={colors.rowDividerLight} />}
         {!isSticky && title !== 'Balances' && (
           <StickyBackgroundBlocker
             deviceDimensions={deviceDimensions}

src/helpers/buildWalletSections.js

@@ -234,7 +234,7 @@ const coinEditContextMenu = (
             },
           }
         : undefined,
-    title: lang.t('account.tab_balances'),
+    title: null,
     totalItems: isLoadingAssets ? 1 : allAssetsCount,
     totalValue: totalValue,
   };

src/hooks/useAccountProfile.js

@@ -50,10 +50,10 @@ export function getAccountProfileInfo(
 
   const accountName = removeFirstEmojiFromString(
     network === networkTypes.mainnet
-      ? label || accountENS || address(accountAddress, 6, 4)
+      ? label || accountENS || address(accountAddress, 4, 4)
       : label === accountENS
-      ? address(accountAddress, 6, 4)
-      : label || address(accountAddress, 6, 4)
+      ? address(accountAddress, 4, 4)
+      : label || address(accountAddress, 4, 4)
   ).join('');
 
   const labelOrAccountName =