Favorites: display identicons for known orgs

src/components/FavoritesMenu/FavoritesMenu.js

@@ -30,7 +30,6 @@ function FavoritesMenu({ items, onActivate, onFavoriteUpdate }) {
             name={item.name}
             onActivate={onActivate}
             onFavoriteUpdate={onFavoriteUpdate}
-            roundedImage={item.roundedImage}
             secondary={item.secondary}
           />
         </li>
@@ -46,7 +45,6 @@ FavoritesMenu.propTypes = {
       id: PropTypes.string,
       image: PropTypes.node,
       name: PropTypes.node,
-      roundedImage: PropTypes.bool,
       secondary: PropTypes.node,
     }).isRequired
   ),

src/components/FavoritesMenu/FavoritesMenuItem.js

@@ -9,7 +9,6 @@ function FavoritesMenuItem({
   image,
   name,
   secondary,
-  roundedImage,
   onActivate,
   onFavoriteUpdate,
 }) {
@@ -53,28 +52,15 @@ function FavoritesMenuItem({
               margin-right: ${1 * GU}px;
             `}
           >
-            <div
-              css={`
-                overflow: hidden;
-                width: ${3 * GU}px;
-                height: ${3 * GU}px;
-                flex-shrink: 0;
-                flex-grow: 0;
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                border-radius: ${roundedImage ? '50%' : '0'};
-              `}
-            >
-              {image}
-            </div>
+            {image}
           </div>
           <div
             css={`
               display: flex;
               flex-direction: column;
               align-items: flex-start;
               min-width: 0;
+              text-align: left;
             `}
           >
             <div
@@ -120,7 +106,6 @@ FavoritesMenuItem.propTypes = {
   name: PropTypes.string.isRequired,
   onActivate: PropTypes.func.isRequired,
   onFavoriteUpdate: PropTypes.func.isRequired,
-  roundedImage: PropTypes.bool,
   secondary: PropTypes.string,
 }
 

src/components/MenuPanel/OrganizationSwitcher/Favorites.js

@@ -1,12 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { EthIdenticon, IconPlus, GU, RADIUS, useTheme } from '@aragon/ui'
+import { IconPlus, GU, RADIUS, useTheme } from '@aragon/ui'
 import { network } from '../../../environment'
 import { getKnownOrganization } from '../../../known-organizations'
 import { FavoriteDaoType, DaoItemType } from '../../../prop-types'
 import { addressesEqual } from '../../../web3-utils'
 import FavoritesMenu from '../../FavoritesMenu/FavoritesMenu'
 import FavoritesMenuItemButton from '../../FavoritesMenu/FavoritesMenuItemButton'
+import OrgIcon from '../../OrgIcon/OrgIcon'
 
 class Favorites extends React.Component {
   static propTypes = {
@@ -106,22 +107,8 @@ class Favorites extends React.Component {
       return {
         ...org,
         id: org.address,
-        roundedImage: true,
         name: knownOrg ? knownOrg.name : org.name || org.address,
-        image: knownOrg ? (
-          <img
-            src={knownOrg.image}
-            width={6 * GU}
-            alt=""
-            css={`
-              object-fit: contain;
-              width: 100%;
-              height: 100%;
-            `}
-          />
-        ) : (
-          <EthIdenticon address={org.address} radius={1.5 * GU} />
-        ),
+        image: <OrgIcon orgAddress={org.address} />,
       }
     })
 

src/components/MenuPanel/OrganizationSwitcher/OrganizationItem.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import styled from 'styled-components'
-import { EthIdenticon, GU, textStyle } from '@aragon/ui'
+import { GU, textStyle } from '@aragon/ui'
 import { DaoItemType } from '../../../prop-types'
 import { getKnownOrganization } from '../../../known-organizations'
 import { network } from '../../../environment'
+import OrgIcon from '../../OrgIcon/OrgIcon'
 
 class OrganizationItem extends React.Component {
   static propTypes = {
@@ -22,22 +22,7 @@ class OrganizationItem extends React.Component {
         `}
         {...props}
       >
-        <OrgIcon rounded={!knownOrg}>
-          {knownOrg ? (
-            <img
-              src={knownOrg.image}
-              width={6 * GU}
-              alt=""
-              css={`
-                object-fit: contain;
-                width: 100%;
-                height: 100%;
-              `}
-            />
-          ) : (
-            <EthIdenticon address={dao.address} radius={1.5 * GU} />
-          )}
-        </OrgIcon>
+        <OrgIcon orgAddress={dao.address} />
         <span
           css={`
             padding-left: ${1 * GU}px;
@@ -54,16 +39,4 @@ class OrganizationItem extends React.Component {
   }
 }
 
-const OrgIcon = styled.div`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  flex-grow: 0;
-  width: ${3 * GU}px;
-  height: ${3 * GU}px;
-  border-radius: ${p => (p.rounded ? '50%' : '0')};
-  overflow: hidden;
-`
-
 export default OrganizationItem

src/components/OrgIcon/OrgIcon.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { GU, EthIdenticon } from '@aragon/ui'
+import { network } from '../../environment'
+import { getKnownOrganization } from '../../known-organizations'
+import { EthereumAddressType } from '../../prop-types'
+
+function OrgIcon({ orgAddress, size }) {
+  const knownOrg = getKnownOrganization(network.type, orgAddress)
+  const knownOrgImage = knownOrg && knownOrg.image
+
+  return (
+    <div
+      css={`
+        overflow: hidden;
+        width: ${size}px;
+        height: ${size}px;
+        flex-shrink: 0;
+        flex-grow: 0;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: ${!knownOrgImage ? '50%' : '0'};
+      `}
+    >
+      {knownOrgImage ? (
+        <img
+          src={knownOrgImage}
+          width={size}
+          height={size}
+          alt=""
+          css="object-fit: contain"
+        />
+      ) : (
+        <EthIdenticon address={orgAddress} />
+      )}
+    </div>
+  )
+}
+OrgIcon.propTypes = {
+  orgAddress: EthereumAddressType.isRequired,
+  size: PropTypes.number,
+}
+OrgIcon.defaultProps = {
+  size: 3 * GU,
+}
+
+export default OrgIcon

src/onboarding/Welcome/Suggestions.js

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
-import { EthIdenticon, Box, GU } from '@aragon/ui'
+import { Box } from '@aragon/ui'
 import FavoritesMenu from '../../components/FavoritesMenu/FavoritesMenu'
+import OrgIcon from '../../components/OrgIcon/OrgIcon'
 import { useFavoriteDaos } from '../../contexts/FavoriteDaosContext'
 import { network } from '../../environment'
 import { getKnownOrganization } from '../../known-organizations'
@@ -56,21 +57,7 @@ function Suggestions({ suggestedOrgs }) {
           return {
             favorited: isAddressFavorited(org.address),
             id: org.address,
-            roundedImage: !knownOrg,
-            image: knownOrg ? (
-              <img
-                src={knownOrg.image}
-                width={3 * GU}
-                alt=""
-                css={`
-                  object-fit: contain;
-                  width: 100%;
-                  height: 100%;
-                `}
-              />
-            ) : (
-              <EthIdenticon address={org.address} />
-            ),
+            image: <OrgIcon orgAddress={org.address} />,
             name: knownOrg ? knownOrg.name : org.name || org.address,
             secondary: knownOrg ? knownOrg.template : '',
           }