pr-comments

packages/commonwealth/client/scripts/views/components/component_kit/cw_truncated_address.scss

@@ -18,4 +18,8 @@
     justify-content: left;
     padding: 4px 0 4px 12px;
   }
+
+  &.no-background {
+    background-color: transparent;
+  }
 }

packages/commonwealth/client/scripts/views/components/component_kit/cw_truncated_address.tsx

@@ -2,26 +2,30 @@ import React from 'react';
 
 import './cw_truncated_address.scss';
 
+import clsx from 'clsx';
 import { formatAddressShort } from '../../../helpers';
 import { CWCommunityAvatar } from './cw_community_avatar';
 
 type TruncatedAddressProps = {
-  address: string;
+  address?: string;
   communityInfo?: {
     iconUrl: string;
     name: string;
   };
+  showCommunityname?: boolean;
 };
 
 export const CWTruncatedAddress = ({
   address,
   communityInfo,
+  showCommunityname,
 }: TruncatedAddressProps) => {
   return (
     <div
-      className={
-        communityInfo ? 'TruncatedAddress with-community' : 'TruncatedAddress'
-      }
+      className={clsx('TruncatedAddress', {
+        'with-community': communityInfo,
+        'no-background': showCommunityname,
+      })}
     >
       {communityInfo && (
         <CWCommunityAvatar
@@ -32,7 +36,8 @@ export const CWTruncatedAddress = ({
           size="small"
         />
       )}
-      {formatAddressShort(address)}
+      {showCommunityname && communityInfo?.name}
+      {address && formatAddressShort(address)}
     </div>
   );
 };

packages/commonwealth/client/scripts/views/components/linked_addresses.tsx

@@ -10,7 +10,6 @@ import type NewProfile from '../../models/NewProfile';
 import { DeleteAddressModal } from '../modals/delete_address_modal';
 import { CWIconButton } from './component_kit/cw_icon_button';
 import { CWTruncatedAddress } from './component_kit/cw_truncated_address';
-import CWCommunityInfo from './component_kit/new_designs/CWCommunityInfo';
 import { CWModal } from './component_kit/new_designs/CWModal';
 import { CWTable } from './component_kit/new_designs/CWTable';
 import { CWTableColumnInfo } from './component_kit/new_designs/CWTable/CWTable';
@@ -57,11 +56,12 @@ const AddressDetails = (props: AddressDetailsProps) => {
 
   return (
     <div className="AddressDetails">
-      <CWCommunityInfo
+      <CWTruncatedAddress
         communityInfo={{
           iconUrl: fetchedCommunity?.icon_url || '',
           name: fetchedCommunity?.name || '',
         }}
+        showCommunityname
       />
       <PopoverMenu
         menuItems={[
@@ -71,7 +71,7 @@ const AddressDetails = (props: AddressDetailsProps) => {
           },
         ]}
         renderTrigger={(onclick) => (
-          <CWIconButton iconName="dotsVertical" onClick={onclick} />
+          <CWIconButton iconName="dotsHorizontal" onClick={onclick} />
         )}
       />
     </div>