From bde79ef4be2f57fafa4f4899a09df57931526390 Mon Sep 17 00:00:00 2001
From: Salman <muhsalman.neslit@gmail.com>
Date: Wed, 27 Nov 2024 22:59:36 +0500
Subject: [PATCH 1/6] address-management-chart-revamp

---
 .../components/EditProfile/EditProfile.tsx    |  4 +-
 .../CWCommunityInfo/CWCommunityInfo.scss      | 10 ++
 .../CWCommunityInfo/CWCommunityInfo.tsx       | 28 ++++++
 .../new_designs/CWCommunityInfo/index.ts      |  3 +
 .../views/components/linked_addresses.tsx     | 96 +++++++++++++++----
 .../views/modals/delete_address_modal.tsx     | 31 ++----
 .../styles/components/linked_addresses.scss   |  5 +
 7 files changed, 130 insertions(+), 47 deletions(-)
 create mode 100644 packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.scss
 create mode 100644 packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.tsx
 create mode 100644 packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/index.ts

diff --git a/packages/commonwealth/client/scripts/views/components/EditProfile/EditProfile.tsx b/packages/commonwealth/client/scripts/views/components/EditProfile/EditProfile.tsx
index 9ba1784d1e3..bbabf0db4b0 100644
--- a/packages/commonwealth/client/scripts/views/components/EditProfile/EditProfile.tsx
+++ b/packages/commonwealth/client/scripts/views/components/EditProfile/EditProfile.tsx
@@ -353,8 +353,8 @@ const EditProfile = () => {
               />
             </ProfileSection>
             <ProfileSection
-              title="Linked addresses"
-              description="Manage your addresses."
+              title="Manage your addresses"
+              description="Connect or disconnect your addresses and manage your community memberships here."
             >
               <LinkedAddresses
                 // @ts-expect-error <StrictNullChecks/>
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.scss b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.scss
new file mode 100644
index 00000000000..e6a1af46786
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.scss
@@ -0,0 +1,10 @@
+.CommunityInfo {
+  width: 136px;
+  gap: 8px;
+  justify-content: left;
+  padding: 4px 0 4px 12px;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-size: 14px;
+}
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.tsx
new file mode 100644
index 00000000000..781a3a7ec83
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { CWCommunityAvatar } from '../../cw_community_avatar';
+import './CWCommunityInfo.scss';
+
+type CommunityAddressProps = {
+  communityInfo?: {
+    iconUrl: string;
+    name: string;
+  };
+};
+
+export const CWCommunityInfo = ({ communityInfo }: CommunityAddressProps) => {
+  return (
+    <div className="CommunityInfo">
+      {communityInfo && (
+        <CWCommunityAvatar
+          community={{
+            iconUrl: communityInfo.iconUrl,
+            name: communityInfo.name,
+          }}
+          size="small"
+        />
+      )}
+      {communityInfo?.name}
+    </div>
+  );
+};
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/index.ts b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/index.ts
new file mode 100644
index 00000000000..ff9ba079efa
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/index.ts
@@ -0,0 +1,3 @@
+import { CWCommunityInfo } from './CWCommunityInfo';
+
+export default CWCommunityInfo;
diff --git a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
index 184a6603cb3..4e3a5d0a562 100644
--- a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
+++ b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import 'components/linked_addresses.scss';
 
+import { formatAddressShort } from 'client/scripts/helpers';
 import { useGetCommunityByIdQuery } from 'state/api/communities';
 import { PopoverMenu } from 'views/components/component_kit/CWPopoverMenu';
 import type AddressInfo from '../../models/AddressInfo';
@@ -9,10 +10,18 @@ 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';
+
 /* eslint-disable react/no-multi-comp */
 
 type AddressProps = {
+  address: string;
+};
+
+type AddressDetailsProps = {
   profile: NewProfile;
   addressInfo: AddressInfo;
   toggleRemoveModal: (val: boolean, address: AddressInfo) => void;
@@ -25,6 +34,16 @@ type LinkedAddressesProps = {
 };
 
 const Address = (props: AddressProps) => {
+  const { address } = props;
+
+  return (
+    <div className="AddressContainer">
+      <CWTruncatedAddress address={address} />
+    </div>
+  );
+};
+
+const AddressDetails = (props: AddressDetailsProps) => {
   const { addressInfo, toggleRemoveModal } = props;
   const { address, community } = addressInfo;
 
@@ -37,9 +56,8 @@ const Address = (props: AddressProps) => {
   });
 
   return (
-    <div className="AddressContainer">
-      <CWTruncatedAddress
-        address={address}
+    <div className="AddressDetails">
+      <CWCommunityInfo
         communityInfo={{
           iconUrl: fetchedCommunity?.icon_url || '',
           name: fetchedCommunity?.name || '',
@@ -48,8 +66,7 @@ const Address = (props: AddressProps) => {
       <PopoverMenu
         menuItems={[
           {
-            label: 'Remove',
-            iconLeft: 'trash',
+            label: `Disconnect ${formatAddressShort(address)}`,
             onClick: () => toggleRemoveModal(true, addressInfo),
           },
         ]}
@@ -69,21 +86,60 @@ export const LinkedAddresses = (props: LinkedAddressesProps) => {
 
   const { profile, addresses, refreshProfiles } = props;
 
+  const groupedAddresses = useMemo(() => {
+    return addresses.reduce((acc: Record<string, AddressInfo[]>, addr) => {
+      if (!acc[addr.address]) acc[addr.address] = [];
+      acc[addr.address].push(addr);
+      return acc;
+    }, {});
+  }, [addresses]);
+
+  const columnInfo: CWTableColumnInfo[] = [
+    {
+      key: 'address',
+      header: 'Address',
+      numeric: false,
+      sortable: false,
+    },
+    {
+      key: 'communities',
+      header: 'Communities',
+      numeric: false,
+      sortable: false,
+    },
+  ];
+
+  const rowData = Object.entries(groupedAddresses).map(
+    ([address, communities]) => ({
+      address: <Address address={address} />,
+      communities: (
+        <div>
+          {communities.map((addr, index) => {
+            return (
+              <AddressDetails
+                key={index}
+                profile={profile}
+                addressInfo={addr}
+                toggleRemoveModal={(val: boolean, address: AddressInfo) => {
+                  setIsRemoveModalOpen(val);
+                  setCurrentAddress(address);
+                }}
+              />
+            );
+          })}
+        </div>
+      ),
+    }),
+  );
+
+  const TableComponent = useMemo(
+    () => <CWTable columnInfo={columnInfo} rowData={rowData} />,
+    [addresses],
+  );
+
   return (
-    <div className="LinkedAddresses">
-      {addresses?.map((addr, i) => {
-        return (
-          <Address
-            key={i}
-            profile={profile}
-            addressInfo={addr}
-            toggleRemoveModal={(val: boolean, address: AddressInfo) => {
-              setIsRemoveModalOpen(val);
-              setCurrentAddress(address);
-            }}
-          />
-        );
-      })}
+    <div>
+      {TableComponent}
       <CWModal
         size="small"
         content={
diff --git a/packages/commonwealth/client/scripts/views/modals/delete_address_modal.tsx b/packages/commonwealth/client/scripts/views/modals/delete_address_modal.tsx
index 97e38da2973..89bc3c73ab6 100644
--- a/packages/commonwealth/client/scripts/views/modals/delete_address_modal.tsx
+++ b/packages/commonwealth/client/scripts/views/modals/delete_address_modal.tsx
@@ -1,4 +1,3 @@
-import jdenticon from 'jdenticon';
 import React from 'react';
 
 import { SERVER_URL } from 'state/api/config';
@@ -9,7 +8,6 @@ import {
 import AddressInfo from '../../models/AddressInfo';
 import NewProfile from '../../models/NewProfile';
 import { CWText } from '../components/component_kit/cw_text';
-import { CWTruncatedAddress } from '../components/component_kit/cw_truncated_address';
 import { CWButton } from '../components/component_kit/new_designs/CWButton';
 import {
   CWModalBody,
@@ -17,8 +15,8 @@ import {
   CWModalHeader,
 } from '../components/component_kit/new_designs/CWModal';
 
-import { DEFAULT_NAME } from '@hicommonwealth/shared';
 import axios from 'axios';
+import { formatAddressShort } from 'client/scripts/helpers';
 import useUserStore from 'state/ui/user';
 import '../../../styles/modals/delete_address_modal.scss';
 
@@ -89,36 +87,19 @@ export const DeleteAddressModal = ({
       .catch(console.error);
   };
 
-  const { name } = profile;
-  const defaultAvatar = jdenticon.toSvg(profile.userId, 90);
-
   return (
     <div className="DeleteAddressModal">
       <CWModalHeader
-        label="Delete Address"
+        label={`Disconnect ${formatAddressShort(address.address)}`}
         icon="danger"
         onModalClose={closeModal}
       />
       <CWModalBody>
         <CWText>
-          Address will be removed from the following linked profile.
+          By removing this address you will be leaving the{' '}
+          {address.community.id}. Your contributions and commetns will remain.
+          Don't worry, you can rejoin anytime.
         </CWText>
-        <div className="profile">
-          {profile?.avatarUrl ? (
-            <img src={profile.avatarUrl} />
-          ) : (
-            <img
-              src={`data:image/svg+xml;utf8,${encodeURIComponent(
-                defaultAvatar,
-              )}`}
-            />
-          )}
-          <CWText fontWeight="bold">{name || DEFAULT_NAME}</CWText>
-        </div>
-        <div className="confirmation">
-          <CWText>Are you sure you want to remove this address?</CWText>
-          <CWTruncatedAddress address={address.address} />
-        </div>
       </CWModalBody>
       <CWModalFooter>
         <CWButton
@@ -128,7 +109,7 @@ export const DeleteAddressModal = ({
           buttonHeight="sm"
         />
         <CWButton
-          label="Delete"
+          label="Disconnect Address"
           buttonType="destructive"
           onClick={handleDelete}
           buttonHeight="sm"
diff --git a/packages/commonwealth/client/styles/components/linked_addresses.scss b/packages/commonwealth/client/styles/components/linked_addresses.scss
index b4b31c6b60f..be8723eeccc 100644
--- a/packages/commonwealth/client/styles/components/linked_addresses.scss
+++ b/packages/commonwealth/client/styles/components/linked_addresses.scss
@@ -10,3 +10,8 @@
     align-items: center;
   }
 }
+
+.AddressDetails {
+  display: flex;
+  justify-content: space-between;
+}

From 0810cb4e9a3052b680330da785822f414e5a0d27 Mon Sep 17 00:00:00 2001
From: Salman <muhsalman.neslit@gmail.com>
Date: Wed, 27 Nov 2024 23:34:13 +0500
Subject: [PATCH 2/6] es-lint

---
 .../client/scripts/views/components/linked_addresses.tsx   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
index a7dcb2c1d95..158a39db40d 100644
--- a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
+++ b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
@@ -132,10 +132,9 @@ export const LinkedAddresses = (props: LinkedAddressesProps) => {
     }),
   );
 
-  const TableComponent = useMemo(
-    () => <CWTable columnInfo={columnInfo} rowData={rowData} />,
-    [addresses],
-  );
+  const TableComponent = useMemo(() => {
+    return <CWTable columnInfo={columnInfo} rowData={rowData} />;
+  }, [addresses]);
 
   return (
     <div>

From f72f9ab672022dd877990f838e5705a805083d8e Mon Sep 17 00:00:00 2001
From: Salman <muhsalman.neslit@gmail.com>
Date: Thu, 28 Nov 2024 01:26:43 +0500
Subject: [PATCH 3/6] eslint

---
 .../client/scripts/views/components/linked_addresses.tsx | 9 ++++++---
 .../client/scripts/views/modals/delete_address_modal.tsx | 7 ++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
index 158a39db40d..d6cdcb035c4 100644
--- a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
+++ b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
@@ -120,9 +120,12 @@ export const LinkedAddresses = (props: LinkedAddressesProps) => {
                 key={index}
                 profile={profile}
                 addressInfo={addr}
-                toggleRemoveModal={(val: boolean, address: AddressInfo) => {
+                toggleRemoveModal={(
+                  val: boolean,
+                  selectedAddress: AddressInfo,
+                ) => {
                   setIsRemoveModalOpen(val);
-                  setCurrentAddress(address);
+                  setCurrentAddress(selectedAddress);
                 }}
               />
             );
@@ -134,6 +137,7 @@ export const LinkedAddresses = (props: LinkedAddressesProps) => {
 
   const TableComponent = useMemo(() => {
     return <CWTable columnInfo={columnInfo} rowData={rowData} />;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [addresses]);
 
   return (
@@ -144,7 +148,6 @@ export const LinkedAddresses = (props: LinkedAddressesProps) => {
         content={
           currentAddress && (
             <DeleteAddressModal
-              profile={profile}
               addresses={addresses}
               address={currentAddress}
               chain={currentAddress?.community?.id}
diff --git a/packages/commonwealth/client/scripts/views/modals/delete_address_modal.tsx b/packages/commonwealth/client/scripts/views/modals/delete_address_modal.tsx
index 0b4d7935cd5..b33bada3ae8 100644
--- a/packages/commonwealth/client/scripts/views/modals/delete_address_modal.tsx
+++ b/packages/commonwealth/client/scripts/views/modals/delete_address_modal.tsx
@@ -6,7 +6,6 @@ import {
   notifySuccess,
 } from '../../controllers/app/notifications';
 import AddressInfo from '../../models/AddressInfo';
-import NewProfile from '../../models/NewProfile';
 import { CWText } from '../components/component_kit/cw_text';
 import { CWButton } from '../components/component_kit/new_designs/CWButton';
 import {
@@ -21,7 +20,6 @@ import useUserStore from 'state/ui/user';
 import './delete_address_modal.scss';
 
 type DeleteAddressModalAttrs = {
-  profile: NewProfile;
   addresses: AddressInfo[];
   address: AddressInfo;
   chain: string;
@@ -33,7 +31,6 @@ export const DeleteAddressModal = ({
   addresses,
   chain,
   closeModal,
-  profile,
 }: DeleteAddressModalAttrs) => {
   const user = useUserStore();
 
@@ -97,8 +94,8 @@ export const DeleteAddressModal = ({
       <CWModalBody>
         <CWText>
           By removing this address you will be leaving the{' '}
-          {address.community.id}. Your contributions and commetns will remain.
-          Don't worry, you can rejoin anytime.
+          {address.community.id}. Your contributions and comments will remain.
+          Don&apos;t worry, you can rejoin anytime.
         </CWText>
       </CWModalBody>
       <CWModalFooter>

From 85c9e05e990932acf619dfc6ff79157dc7fa4c2b Mon Sep 17 00:00:00 2001
From: Salman <muhsalman.neslit@gmail.com>
Date: Thu, 28 Nov 2024 10:56:11 +0500
Subject: [PATCH 4/6] refactor

---
 .../views/components/linked_addresses.tsx     | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
index d6cdcb035c4..37160d26361 100644
--- a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
+++ b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
@@ -78,6 +78,21 @@ const AddressDetails = (props: AddressDetailsProps) => {
   );
 };
 
+const columnInfo: CWTableColumnInfo[] = [
+  {
+    key: 'address',
+    header: 'Address',
+    numeric: false,
+    sortable: false,
+  },
+  {
+    key: 'communities',
+    header: 'Communities',
+    numeric: false,
+    sortable: false,
+  },
+];
+
 export const LinkedAddresses = (props: LinkedAddressesProps) => {
   const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
   const [currentAddress, setCurrentAddress] = useState<AddressInfo | null>(
@@ -94,21 +109,6 @@ export const LinkedAddresses = (props: LinkedAddressesProps) => {
     }, {});
   }, [addresses]);
 
-  const columnInfo: CWTableColumnInfo[] = [
-    {
-      key: 'address',
-      header: 'Address',
-      numeric: false,
-      sortable: false,
-    },
-    {
-      key: 'communities',
-      header: 'Communities',
-      numeric: false,
-      sortable: false,
-    },
-  ];
-
   const rowData = Object.entries(groupedAddresses).map(
     ([address, communities]) => ({
       address: <Address address={address} />,

From 986f5fd86b5ff6e0039e796d8e3930bdd8df14fc Mon Sep 17 00:00:00 2001
From: Salman <muhsalman.neslit@gmail.com>
Date: Thu, 5 Dec 2024 18:27:50 +0500
Subject: [PATCH 5/6] pr-comments

---
 .../component_kit/cw_truncated_address.scss   |  4 +++
 .../component_kit/cw_truncated_address.tsx    | 15 ++++++----
 .../CWCommunityInfo/CWCommunityInfo.scss      | 10 -------
 .../CWCommunityInfo/CWCommunityInfo.tsx       | 28 -------------------
 .../new_designs/CWCommunityInfo/index.ts      |  3 --
 .../views/components/linked_addresses.tsx     |  6 ++--
 6 files changed, 17 insertions(+), 49 deletions(-)
 delete mode 100644 packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.scss
 delete mode 100644 packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.tsx
 delete mode 100644 packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/index.ts

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_truncated_address.scss b/packages/commonwealth/client/scripts/views/components/component_kit/cw_truncated_address.scss
index c530021eb7c..c55917063ab 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_truncated_address.scss
+++ b/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;
+  }
 }
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_truncated_address.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_truncated_address.tsx
index 61273826628..385f369d192 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_truncated_address.tsx
+++ b/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>
   );
 };
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.scss b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.scss
deleted file mode 100644
index e6a1af46786..00000000000
--- a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.CommunityInfo {
-  width: 136px;
-  gap: 8px;
-  justify-content: left;
-  padding: 4px 0 4px 12px;
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 14px;
-}
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.tsx
deleted file mode 100644
index 781a3a7ec83..00000000000
--- a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/CWCommunityInfo.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { CWCommunityAvatar } from '../../cw_community_avatar';
-import './CWCommunityInfo.scss';
-
-type CommunityAddressProps = {
-  communityInfo?: {
-    iconUrl: string;
-    name: string;
-  };
-};
-
-export const CWCommunityInfo = ({ communityInfo }: CommunityAddressProps) => {
-  return (
-    <div className="CommunityInfo">
-      {communityInfo && (
-        <CWCommunityAvatar
-          community={{
-            iconUrl: communityInfo.iconUrl,
-            name: communityInfo.name,
-          }}
-          size="small"
-        />
-      )}
-      {communityInfo?.name}
-    </div>
-  );
-};
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/index.ts b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/index.ts
deleted file mode 100644
index ff9ba079efa..00000000000
--- a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunityInfo/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CWCommunityInfo } from './CWCommunityInfo';
-
-export default CWCommunityInfo;
diff --git a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
index 37160d26361..18b3c90eee8 100644
--- a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
+++ b/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>

From f4fbc75f9492a1c52355755ca05e254164ec503a Mon Sep 17 00:00:00 2001
From: Salman <muhsalman.neslit@gmail.com>
Date: Sat, 7 Dec 2024 05:42:54 +0500
Subject: [PATCH 6/6] comments-added

---
 .../client/scripts/views/components/linked_addresses.tsx         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
index 18b3c90eee8..ef96c4f0ff7 100644
--- a/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
+++ b/packages/commonwealth/client/scripts/views/components/linked_addresses.tsx
@@ -135,6 +135,7 @@ export const LinkedAddresses = (props: LinkedAddressesProps) => {
     }),
   );
 
+  // Memoize CWTable to prevent unnecessary re-renders.
   const TableComponent = useMemo(() => {
     return <CWTable columnInfo={columnInfo} rowData={rowData} />;
     // eslint-disable-next-line react-hooks/exhaustive-deps