feat(dw): show alias for keys

packages/apps/dev-wallet/src/Components/Guard/KeySelector.tsx

@@ -1,7 +1,8 @@
+import { useWallet } from '@/modules/wallet/wallet.hook';
 import { shorten } from '@/utils/helpers';
 import { BuiltInPredicate } from '@kadena/client';
 import { MonoKey } from '@kadena/kode-icons/system';
-import { Checkbox, Stack, Text } from '@kadena/kode-ui';
+import { Badge, Checkbox, Stack, Text } from '@kadena/kode-ui';
 
 export const KeySelector = ({
   guard,
@@ -12,6 +13,11 @@ export const KeySelector = ({
   onSelect: (keys: string[]) => void;
   selectedKeys: string[];
 }) => {
+  const { getKeyAlias } = useWallet();
+  const keysWithAlias = guard.keys.map((key) => ({
+    key,
+    alias: getKeyAlias(key),
+  }));
   return (
     <Stack
       flexWrap="wrap"
@@ -21,11 +27,12 @@ export const KeySelector = ({
       marginBlock={'xs'}
     >
       <Text size="smallest">{guard.pred}:</Text>
-      {guard.keys.map((key) => (
+      {keysWithAlias.map(({ key, alias }) => (
         <Stack key={key} gap="sm" alignItems={'center'}>
           <Text size="smallest">
             <MonoKey />
           </Text>
+          {keysWithAlias.length > 1 && <Badge size="sm">{alias}</Badge>}
           <Text variant="code" size="smallest">
             <Checkbox
               isSelected={selectedKeys.includes(key)}
@@ -39,7 +46,7 @@ export const KeySelector = ({
                 onSelect(updated);
               }}
             >
-              {shorten(key!)}
+              {(<Text size="smallest">{shorten(key!)}</Text>) as any}
             </Checkbox>
           </Text>
         </Stack>

packages/apps/dev-wallet/src/Components/Guard/keyset.tsx

@@ -1,30 +1,40 @@
+import { useWallet } from '@/modules/wallet/wallet.hook';
 import { shorten } from '@/utils/helpers';
 import { BuiltInPredicate } from '@kadena/client';
 import { MonoKey } from '@kadena/kode-icons/system';
-import { Stack, Text } from '@kadena/kode-ui';
+import { Badge, Stack, Text } from '@kadena/kode-ui';
+import { useMemo } from 'react';
 
 export const Keyset = ({
   guard,
 }: {
-  guard: { keys: string[]; pred: BuiltInPredicate };
-}) => (
-  <Stack
-    flexWrap="wrap"
-    flexDirection={'row'}
-    gap="md"
-    paddingInline={'sm'}
-    marginBlock={'xs'}
-  >
-    <Text size="smallest">{guard.pred}:</Text>
-    {guard.keys.map((key) => (
-      <Stack key={key} gap="sm" alignItems={'center'}>
-        <Text size="smallest">
-          <MonoKey />
-        </Text>
-        <Text variant="code" size="smallest">
-          {shorten(key!)}
-        </Text>
-      </Stack>
-    ))}
-  </Stack>
-);
+  guard: { keys: string[]; pred: BuiltInPredicate; principal: string };
+}) => {
+  const { getKeyAlias } = useWallet();
+  const keysWithAlias = useMemo(
+    () => guard.keys.map((key) => ({ key, alias: getKeyAlias(key) })),
+    [getKeyAlias, guard.principal],
+  );
+  return (
+    <Stack
+      flexWrap="wrap"
+      flexDirection={'row'}
+      gap="md"
+      paddingInline={'sm'}
+      marginBlock={'xs'}
+    >
+      <Text size="smallest">{guard.pred}:</Text>
+      {keysWithAlias.map(({ key, alias }) => (
+        <Stack key={key} gap="sm" alignItems={'center'}>
+          <Text size="smallest">
+            <MonoKey />
+          </Text>
+          {keysWithAlias.length > 1 && <Badge size="sm">{alias}</Badge>}
+          <Text variant="code" size="smallest">
+            {shorten(key!)}
+          </Text>
+        </Stack>
+      ))}
+    </Stack>
+  );
+};

packages/apps/dev-wallet/src/modules/wallet/wallet.hook.tsx

@@ -47,6 +47,73 @@ export const useWallet = () => {
     throw new Error('useWallet must be used within a WalletProvider');
   }
 
+  const getKeyAlias = useCallback(
+    (publicKey: string) => {
+      const singleKeyAccount = context.accounts.find(
+        (a) =>
+          isKeysetGuard(a.guard) &&
+          a.guard.keys.length === 1 &&
+          a.guard.keys[0] === publicKey,
+      );
+
+      if (
+        singleKeyAccount &&
+        (singleKeyAccount.alias || singleKeyAccount.address.length < 15)
+      ) {
+        return singleKeyAccount.alias || singleKeyAccount.address;
+      }
+
+      const contactSingleKey = context.contacts.find(
+        (c) =>
+          isKeysetGuard(c.account.guard) &&
+          c.account.guard.keys.length === 1 &&
+          c.account.guard.keys[0] === publicKey,
+      );
+
+      if (
+        contactSingleKey &&
+        (contactSingleKey.name || contactSingleKey.account.address.length < 15)
+      ) {
+        return contactSingleKey.name || contactSingleKey.account.address;
+      }
+
+      const multiKeyAccount = context.accounts.find(
+        (a) =>
+          isKeysetGuard(a.guard) &&
+          a.guard.keys.length > 1 &&
+          a.guard.keys.includes(publicKey),
+      );
+
+      if (
+        multiKeyAccount &&
+        isKeysetGuard(multiKeyAccount.guard) &&
+        (multiKeyAccount.alias || multiKeyAccount.address.length < 15)
+      ) {
+        const name = multiKeyAccount.alias || multiKeyAccount.address;
+        return `${name}-key(${multiKeyAccount.guard.keys.indexOf(publicKey) + 1})`;
+      }
+
+      const contactMultiKey = context.contacts.find(
+        (c) =>
+          isKeysetGuard(c.account.guard) &&
+          c.account.guard.keys.length > 1 &&
+          c.account.guard.keys.includes(publicKey),
+      );
+
+      if (
+        contactMultiKey &&
+        isKeysetGuard(contactMultiKey.account.guard) &&
+        (contactMultiKey.name || contactMultiKey.account.address.length < 15)
+      ) {
+        const name = contactMultiKey.name || contactMultiKey.account.address;
+        return `${name}-key(${contactMultiKey.account.guard.keys.indexOf(publicKey) + 1})`;
+      }
+
+      return '';
+    },
+    [context.accounts, context.contacts],
+  );
+
   const getPublicKeyData = useCallback(
     (publicKey: string) => {
       if (!context.keySources) return null;
@@ -415,5 +482,6 @@ export const useWallet = () => {
     ...context,
     accounts,
     watchAccounts,
+    getKeyAlias,
   };
 };

packages/apps/dev-wallet/src/pages/account/account.tsx

@@ -24,6 +24,7 @@ import {
   MonoWallet,
 } from '@kadena/kode-icons/system';
 import {
+  Badge,
   Button,
   Heading,
   Stack,
@@ -54,6 +55,7 @@ export function AccountPage() {
     watchAccounts,
     client,
     isOwnedAccount,
+    getKeyAlias,
   } = useWallet();
   const [redistributionGroupId, setRedistributionGroupId] = useState<string>();
   const account =
@@ -296,21 +298,28 @@ export function AccountPage() {
                       {account.guard.pred}
                     </Text>
                   </Stack>
-                  <Stack flexDirection={'column'} gap={'sm'}>
+                  <Stack flexDirection={'column'} gap={'md'}>
                     <Text>Keys</Text>
                     {account.guard.keys.map((key) => (
-                      <Stack
-                        key={key}
-                        gap="sm"
-                        alignItems={'center'}
-                        className={addressBreakClass}
-                      >
-                        <Text>
-                          <MonoKey />
-                        </Text>
-                        <Text variant="code" color="emphasize">
-                          {key}
-                        </Text>
+                      <Stack key={key} gap="sm" flexDirection={'column'}>
+                        <Stack key={key} gap="sm" alignItems={'center'}>
+                          {isKeysetGuard(account.guard) &&
+                            account.guard.keys.length > 1 && (
+                              <Badge size="sm">{getKeyAlias(key)}</Badge>
+                            )}
+                        </Stack>
+                        <Stack gap="sm" alignItems={'center'}>
+                          <Text>
+                            <MonoKey />
+                          </Text>
+                          <Text
+                            variant="code"
+                            color="emphasize"
+                            className={addressBreakClass}
+                          >
+                            {key}
+                          </Text>
+                        </Stack>
                       </Stack>
                     ))}
                   </Stack>

packages/apps/dev-wallet/src/pages/transaction/components/Signer.tsx

@@ -5,14 +5,15 @@ import {
   parseAsPactValue,
 } from '@kadena/client';
 import {
+  Badge,
   Button,
   Heading,
   Notification,
   Stack,
   Text,
   TextareaField,
 } from '@kadena/kode-ui';
-import { FC, PropsWithChildren, useState } from 'react';
+import { FC, PropsWithChildren, useMemo, useState } from 'react';
 import {
   breakAllClass,
   codeClass,
@@ -51,12 +52,16 @@ export const RenderSigner = ({
   transactionStatus: ITransaction['status'];
   onSign: (sig: ITransaction['sigs']) => void;
 }) => {
-  const { getPublicKeyData, sign } = useWallet();
+  const { getPublicKeyData, sign, getKeyAlias } = useWallet();
   const signature = transaction.sigs.find(
     (sig) => sig?.pubKey === signer.pubKey && sig.sig,
   )?.sig;
   const info = getPublicKeyData(signer.pubKey);
   const [error, setError] = useState<string>();
+  const keyAlias = useMemo(
+    () => getKeyAlias(signer.pubKey),
+    [signer.pubKey, getKeyAlias],
+  );
   return (
     <>
       <Stack gap={'sm'}>
@@ -65,7 +70,11 @@ export const RenderSigner = ({
         {!signature && info && <Text className={readyToSignClass}>Owned</Text>}
         {<Text className={tagClass}>{info?.source ?? 'External'}</Text>}
       </Stack>
-      <Value className={breakAllClass}>{signer.pubKey}</Value>
+
+      <Stack gap={'sm'} alignItems={'center'}>
+        {keyAlias && <Badge size="sm">{keyAlias}</Badge>}
+        <Value className={breakAllClass}>{signer.pubKey}</Value>
+      </Stack>
       <Stack gap={'sm'} justifyContent={'space-between'}></Stack>
       <Stack gap={'sm'} flexDirection={'column'}>
         <Heading variant="h5">Sign for</Heading>

packages/apps/dev-wallet/src/pages/transfer/Steps/TransferForm.tsx

@@ -431,6 +431,8 @@ export function TransferForm({
 
   const senderChain = watch('chain');
 
+  const isSafeTransfer = watch('type') === 'safeTransfer';
+
   return (
     <form onSubmit={handleSubmit(onSubmitForm)}>
       <Stack flexDirection="column" gap="md" flex={1} width="100%">
@@ -664,9 +666,7 @@ export function TransferForm({
                                     <Stack flexDirection={'column'}>
                                       <AccountSearchBox
                                         accounts={filteredAccounts}
-                                        hideKeySelector={
-                                          getValues('type') !== 'safeTransfer'
-                                        }
+                                        hideKeySelector={!isSafeTransfer}
                                         watchedAccounts={
                                           filteredWatchedAccounts
                                         }