Display CIP8 profile info in Transaction Feed

packages/mobile/src/account/selectors.ts

@@ -3,6 +3,7 @@ import * as RNLocalize from 'react-native-localize'
 import { createSelector } from 'reselect'
 import i18n from 'src/i18n'
 import { RootState } from 'src/redux/reducers'
+import { currentAccountSelector } from 'src/web3/selectors'
 
 const inferCountryCode = () => {
   const localizedCountry = new Countries(i18n.language).getCountryByCodeAlpha2(
@@ -27,6 +28,17 @@ export const pincodeTypeSelector = (state: RootState) => state.account.pincodeTy
 export const promptFornoIfNeededSelector = (state: RootState) => state.account.promptFornoIfNeeded
 export const isProfileUploadedSelector = (state: RootState) => state.account.profileUploaded
 export const cUsdDailyLimitSelector = (state: RootState) => state.account.dailyLimitCusd
+
+export const currentUserRecipientSelector = createSelector(
+  [currentAccountSelector, nameSelector, pictureSelector, userContactDetailsSelector],
+  (account, name, picture, contactDetails) => {
+    return {
+      address: account!,
+      name: name ?? undefined,
+      thumbnailPath: picture ?? contactDetails.thumbnailPath ?? undefined,
+    }
+  }
+)
 export const dailyLimitRequestStatusSelector = (state: RootState) =>
   state.account.dailyLimitRequestStatus
 export const recoveringFromStoreWipeSelector = (state: RootState) =>

packages/mobile/src/analytics/Properties.tsx

@@ -32,7 +32,6 @@ import {
 import { PaymentMethod } from 'src/fiatExchanges/FiatExchangeOptions'
 import { NotificationBannerCTATypes, NotificationBannerTypes } from 'src/home/NotificationBox'
 import { LocalCurrencyCode } from 'src/localCurrency/consts'
-import { RecipientKind } from 'src/recipients/recipient'
 
 interface AppEventsProperties {
   [AppEvents.app_launched]: {
@@ -479,7 +478,7 @@ interface EscrowEventsProperties {
 interface SendEventsProperties {
   [SendEvents.send_scan]: undefined
   [SendEvents.send_select_recipient]: {
-    recipientKind: RecipientKind
+    // TODO: decide what recipient info to collect, now that RecipientKind doesn't exist
     usedSearchBar: boolean
   }
   [SendEvents.send_cancel]: undefined
@@ -549,7 +548,7 @@ interface RequestEventsProperties {
   [RequestEvents.request_cancel]: undefined
   [RequestEvents.request_scan]: undefined
   [RequestEvents.request_select_recipient]: {
-    recipientKind: RecipientKind
+    // TODO: decide what recipient info to collect, now that RecipientKind doesn't exist
     usedSearchBar: boolean
   }
   [RequestEvents.request_amount_continue]: {

packages/mobile/src/apollo/types.ts

@@ -272,7 +272,8 @@ export interface TransferItemFragment {
   type: TokenTransactionType
   hash: string
   timestamp: number
-  address: string
+  address: string // wallet address (EOA)
+  account: string // account address (MTW)
   comment: Maybe<string>
   amount: {
     __typename?: 'MoneyAmount'

packages/mobile/src/components/Avatar.test.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { Provider } from 'react-redux'
 import * as renderer from 'react-test-renderer'
 import Avatar from 'src/components/Avatar'
-import { RecipientKind } from 'src/recipients/recipient'
 import { createMockStore } from 'test/utils'
 
 const mockName = 'mockName'
@@ -16,33 +15,34 @@ const store = createMockStore({
 })
 
 describe(Avatar, () => {
-  it('renders correctly with contact but without number', () => {
+  it('renders correctly with number and name', () => {
     const tree = renderer.create(
       <Provider store={store}>
-        <Avatar
-          iconSize={40}
-          recipient={{
-            kind: RecipientKind.Contact,
-            contactId: 'none',
-            displayName: mockName,
-          }}
-        />
+        <Avatar recipient={{ name: mockName, e164PhoneNumber: mockNumber }} iconSize={40} />
       </Provider>
     )
     expect(tree).toMatchSnapshot()
   })
-  it('renders correctly with number but without contact', () => {
+  it('renders correctly with just number', () => {
     const tree = renderer.create(
       <Provider store={store}>
-        <Avatar iconSize={40} e164Number={mockNumber} />
+        <Avatar recipient={{ e164PhoneNumber: mockNumber }} iconSize={40} />
       </Provider>
     )
     expect(tree).toMatchSnapshot()
   })
-  it('renders correctly with address but without contact nor number', () => {
+  it('renders correctly with address and name but no number', () => {
     const tree = renderer.create(
       <Provider store={store}>
-        <Avatar iconSize={40} address={mockAccount} />
+        <Avatar recipient={{ name: mockName, address: mockAccount }} iconSize={40} />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders correctly with address but no name nor number', () => {
+    const tree = renderer.create(
+      <Provider store={store}>
+        <Avatar recipient={{ address: mockAccount }} iconSize={40} />
       </Provider>
     )
     expect(tree).toMatchSnapshot()

packages/mobile/src/components/Avatar.tsx

@@ -8,50 +8,30 @@ import { defaultCountryCodeSelector } from 'src/account/selectors'
 import ContactCircle from 'src/components/ContactCircle'
 import { formatShortenedAddress } from 'src/components/ShortenedAddress'
 import { Namespaces, withTranslation } from 'src/i18n'
-import { getRecipientThumbnail, Recipient } from 'src/recipients/recipient'
+import { getDisplayName, Recipient } from 'src/recipients/recipient'
 
 const DEFAULT_ICON_SIZE = 40
 
 interface OwnProps {
-  recipient?: Recipient
+  recipient: Recipient
   e164Number?: string
-  address?: string
   iconSize?: number
   displayNameStyle?: TextStyle
 }
 
 type Props = OwnProps & WithTranslation
 
-// When redesigning, consider using getDisplayName from recipient.ts
-function getDisplayName({ recipient, e164Number, address, t }: Props) {
-  if (recipient && recipient.displayName) {
-    return recipient.displayName
-  }
-  if (getE164Number(e164Number, recipient)) {
-    return t('mobileNumber')
-  }
-  if (address) {
-    return t('walletAddress')
-  }
-  // Rare but possible, such as when a user skips onboarding flow (in dev mode) and then views their own avatar
-  return t('global:unknown')
-}
-
-export function getE164Number(e164Number?: string, recipient?: Recipient) {
-  return e164Number || (recipient && recipient.e164PhoneNumber)
-}
-
 export function Avatar(props: Props) {
   const defaultCountryCode = useSelector(defaultCountryCodeSelector) ?? undefined
-  const { address, recipient, e164Number, iconSize = DEFAULT_ICON_SIZE, displayNameStyle } = props
+  const { recipient, e164Number, iconSize = DEFAULT_ICON_SIZE, displayNameStyle, t } = props
 
-  const name = getDisplayName(props)
-  const e164NumberToShow = getE164Number(e164Number, recipient)
-  const thumbnailPath = getRecipientThumbnail(recipient)
+  const name = getDisplayName(recipient, t)
+  const address = recipient.address
+  const e164NumberToShow = recipient.e164PhoneNumber || e164Number
 
   return (
     <View style={styles.container}>
-      <ContactCircle thumbnailPath={thumbnailPath} name={name} address={address} size={iconSize} />
+      <ContactCircle recipient={recipient} size={iconSize} />
       <Text
         style={[displayNameStyle || fontStyles.small500, styles.contactName]}
         numberOfLines={1}

packages/mobile/src/components/AvatarSelf.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { TextStyle } from 'react-native'
 import { e164NumberSelector, nameSelector, userContactDetailsSelector } from 'src/account/selectors'
 import Avatar from 'src/components/Avatar'
-import { Recipient, RecipientKind } from 'src/recipients/recipient'
+import { Recipient } from 'src/recipients/recipient'
 import useSelector from 'src/redux/useSelector'
 import { currentAccountSelector } from 'src/web3/selectors'
 
@@ -19,29 +19,21 @@ export function AvatarSelf({ iconSize, displayNameStyle }: Props) {
   const account = useSelector(currentAccountSelector)
 
   // Recipient refering to the wallet user, used for the avatar
-  let recipient: Recipient | undefined
-  if (displayName) {
+  let recipient: Recipient
+  if (displayName && e164PhoneNumber) {
     recipient = {
-      kind: RecipientKind.Contact,
       contactId: contactDetails.contactId || 'none',
       thumbnailPath: contactDetails.thumbnailPath || undefined,
-      displayName,
+      name: displayName,
       e164PhoneNumber,
+      address: account!,
     }
-  } else if (account) {
+  } else {
     recipient = {
-      kind: RecipientKind.Address,
-      address: account,
-      displayName: account,
+      address: account!,
+      name: displayName || undefined,
     }
   }
 
-  return (
-    <Avatar
-      recipient={recipient}
-      iconSize={iconSize}
-      displayNameStyle={displayNameStyle}
-      address={account ?? undefined}
-    />
-  )
+  return <Avatar recipient={recipient} iconSize={iconSize} displayNameStyle={displayNameStyle} />
 }

packages/mobile/src/components/ContactCircle.test.tsx

@@ -5,95 +5,59 @@ import { Provider } from 'react-redux'
 import ContactCircle from 'src/components/ContactCircle'
 import { createMockStore } from 'test/utils'
 
-const testContact = {
-  recordID: '1',
-  displayName: 'Zahara Tests Jorge',
-  phoneNumbers: [],
-  thumbnailPath: '',
-}
-
 const mockAddress = '0x123456'
 const mockName = 'Mock name'
-const mockStore = createMockStore({
-  identity: {
-    addressToDisplayName: {
-      [mockAddress]: {
-        name: mockName,
-      },
-    },
-  },
-})
+
+const mockStore = createMockStore()
 
 describe('ContactCircle', () => {
-  it('renders correctly', () => {
-    const tree = render(
-      <Provider store={mockStore}>
-        <ContactCircle size={30} name={'Jerry'} />
-      </Provider>
-    )
-    expect(tree).toMatchSnapshot()
-  })
-  describe('when given contact', () => {
-    it('uses contact name for initial', () => {
-      const { getByText } = render(
-        <Provider store={mockStore}>
-          <ContactCircle size={30} name={'Jerry'} contact={testContact} />
-        </Provider>
-      )
-      expect(getByText('Z')).toBeTruthy()
-    })
-  })
-  describe('when not given a contact', () => {
-    it('uses name for initial', () => {
-      const { getByText } = render(
+  describe('when given recipient with only address', () => {
+    it('uses DefaultAvatar svg', () => {
+      const wrapper = render(
         <Provider store={mockStore}>
-          <ContactCircle size={30} name={'Jerry'} />
+          <ContactCircle
+            size={30}
+            recipient={{
+              address: mockAddress,
+            }}
+          />
         </Provider>
       )
-      expect(getByText('J')).toBeTruthy()
+      expect(wrapper).toMatchSnapshot()
     })
   })
-  describe('when has a thumbnail', () => {
+  describe('when has a thumbnail and name', () => {
     it('renders image', () => {
       const mockThumbnnailPath = './test.jpg'
       const { getByType } = render(
         <Provider store={mockStore}>
-          <ContactCircle size={30} name={'Jerry'} thumbnailPath={mockThumbnnailPath} />
+          <ContactCircle
+            size={30}
+            recipient={{
+              name: mockName,
+              address: mockAddress,
+              thumbnailPath: mockThumbnnailPath,
+            }}
+          />
         </Provider>
       )
       expect(getByType(Image).props.source).toEqual({ uri: './test.jpg' })
     })
   })
-  describe('when has a saved name but no picture', () => {
+  describe('when has a name but no picture', () => {
     it('renders initial', () => {
       const { getByText } = render(
         <Provider store={mockStore}>
-          <ContactCircle size={30} address={mockAddress} name={null} />
+          <ContactCircle
+            size={30}
+            recipient={{
+              name: mockName,
+              address: mockAddress,
+            }}
+          />
         </Provider>
       )
       expect(getByText(mockName[0])).toBeTruthy()
     })
   })
-  describe('when has a saved name and picture', () => {
-    it('renders picture', () => {
-      const mockImageUrl = 'https://somehost.com/test.jpg'
-      const { getByType } = render(
-        <Provider
-          store={createMockStore({
-            identity: {
-              addressToDisplayName: {
-                [mockAddress]: {
-                  name: mockName,
-                  imageUrl: mockImageUrl,
-                },
-              },
-            },
-          })}
-        >
-          <ContactCircle size={30} address={mockAddress} name={mockName} />
-        </Provider>
-      )
-      expect(getByType(Image).props.source).toEqual({ uri: mockImageUrl })
-    })
-  })
 })