sort users in following tab by WOT

src/views/user/components/user-card.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { Flex, FlexProps } from "@chakra-ui/react";
 
 import UserDnsIdentity from "../../../components/user/user-dns-identity";
@@ -7,7 +8,7 @@ import UserAvatarLink from "../../../components/user/user-avatar-link";
 
 export type UserCardProps = { pubkey: string; relay?: string } & Omit<FlexProps, "children">;
 
-export const UserCard = ({ pubkey, relay, ...props }: UserCardProps) => {
+export const UserCard = memo(({ pubkey, relay, ...props }: UserCardProps) => {
   return (
     <Flex
       borderWidth="1px"
@@ -29,4 +30,4 @@ export const UserCard = ({ pubkey, relay, ...props }: UserCardProps) => {
       <UserFollowButton pubkey={pubkey} size="sm" variant="outline" flexShrink={0} />
     </Flex>
   );
-};
+});

src/views/user/following.tsx

@@ -5,19 +5,22 @@ import { UserCard } from "./components/user-card";
 import { useAdditionalRelayContext } from "../../providers/local/additional-relay-context";
 import useUserContactList from "../../hooks/use-user-contact-list";
 import { getPubkeysFromList } from "../../helpers/nostr/lists";
+import { getWebOfTrust } from "../../services/web-of-trust";
 
 export default function UserFollowingTab() {
   const { pubkey } = useOutletContext() as { pubkey: string };
   const contextRelays = useAdditionalRelayContext();
+
   const contactsList = useUserContactList(pubkey, contextRelays, { alwaysRequest: true });
 
   const people = contactsList ? getPubkeysFromList(contactsList) : [];
+  const sorted = getWebOfTrust().sortByDistanceAndConnections(people, (p) => p.pubkey);
 
   if (!contactsList) return <Spinner />;
 
   return (
     <SimpleGrid columns={{ base: 1, lg: 2, xl: 3 }} spacing="2" p="2">
-      {people.map(({ pubkey, relay }) => (
+      {sorted.map(({ pubkey, relay }) => (
         <UserCard key={pubkey} pubkey={pubkey} relay={relay} />
       ))}
     </SimpleGrid>