feat: add alias to wallet menu

apps/trading/components/vega-wallet/vega-wallet-menu.tsx

@@ -12,6 +12,8 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
+import { usePartyProfilesQuery } from '../vega-wallet-connect-button/__generated__/PartyProfiles';
+import { useProfileDialogStore } from '../../stores/profile-dialog-store';
 
 export const VegaWalletMenu = ({
   setMenu,
@@ -23,6 +25,11 @@ export const VegaWalletMenu = ({
   const currentRouteId = useGetCurrentRouteId();
   const setViews = useSidebar((store) => store.setViews);
 
+  const { data } = usePartyProfilesQuery({
+    variables: { partyIds: pubKeys.map((pk) => pk.publicKey) },
+    skip: pubKeys.length <= 0,
+  });
+
   const activeKey = useMemo(() => {
     return pubKeys?.find((pk) => pk.publicKey === pubKey);
   }, [pubKey, pubKeys]);
@@ -37,14 +44,21 @@ export const VegaWalletMenu = ({
   return (
     <div>
       <div className="grow my-4" role="list">
-        {(pubKeys || []).map((pk) => (
+        {(pubKeys || []).map((pk) => {
+          const profile = data?.partiesProfilesConnection?.edges.find(
+            (e) => e.node.partyId === pk.publicKey
+          );
+          return (
             <KeypairListItem
               key={pk.publicKey}
               pk={pk}
               isActive={activeKey?.publicKey === pk.publicKey}
               onSelectItem={onSelectItem}
+              alias={profile?.node.alias}
+              setMenu={setMenu}
             />
-        ))}
+          );
+        })}
       </div>
 
       <div className="flex flex-col gap-2 m-4">
@@ -72,14 +86,19 @@ export const VegaWalletMenu = ({
 const KeypairListItem = ({
   pk,
   isActive,
+  alias,
   onSelectItem,
+  setMenu,
 }: {
   pk: Key;
   isActive: boolean;
+  alias: string | undefined;
   onSelectItem: (pk: string) => void;
+  setMenu: (open: 'nav' | 'wallet' | null) => void;
 }) => {
   const t = useT();
   const [copied, setCopied] = useCopyTimeout();
+  const setOpen = useProfileDialogStore((store) => store.setOpen);
 
   return (
     <div
@@ -106,6 +125,23 @@ const KeypairListItem = ({
         </CopyToClipboard>
         {copied && <span className="text-xs">{t('Copied')}</span>}
       </span>
+
+      <span
+        className="flex gap-2 items-center"
+        data-testid={`key-${pk.publicKey}`}
+      >
+        <button
+          data-testid="alias"
+          onClick={() => {
+            setOpen(pk.publicKey);
+            setMenu(null);
+          }}
+          className="flex items-center gap-1"
+        >
+          {alias ? alias : t('No alias')}
+          <VegaIcon name={VegaIconNames.EDIT} />
+        </button>
+      </span>
     </div>
   );
 };