diff --git a/packages/apps/dev-wallet/src/Components/Guard/KeySelector.tsx b/packages/apps/dev-wallet/src/Components/Guard/KeySelector.tsx
index 16811b1933..6cc91d537b 100644
--- a/packages/apps/dev-wallet/src/Components/Guard/KeySelector.tsx
+++ b/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 (
{guard.pred}:
- {guard.keys.map((key) => (
+ {keysWithAlias.map(({ key, alias }) => (
+ {keysWithAlias.length > 1 && {alias}}
- {shorten(key!)}
+ {({shorten(key!)}) as any}
diff --git a/packages/apps/dev-wallet/src/Components/Guard/keyset.tsx b/packages/apps/dev-wallet/src/Components/Guard/keyset.tsx
index ab459ddb60..0243f069a7 100644
--- a/packages/apps/dev-wallet/src/Components/Guard/keyset.tsx
+++ b/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 };
-}) => (
-
- {guard.pred}:
- {guard.keys.map((key) => (
-
-
-
-
-
- {shorten(key!)}
-
-
- ))}
-
-);
+ 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 (
+
+ {guard.pred}:
+ {keysWithAlias.map(({ key, alias }) => (
+
+
+
+
+ {keysWithAlias.length > 1 && {alias}}
+
+ {shorten(key!)}
+
+
+ ))}
+
+ );
+};
diff --git a/packages/apps/dev-wallet/src/modules/wallet/wallet.hook.tsx b/packages/apps/dev-wallet/src/modules/wallet/wallet.hook.tsx
index 611b8e6281..5cb395bdaf 100644
--- a/packages/apps/dev-wallet/src/modules/wallet/wallet.hook.tsx
+++ b/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,
};
};
diff --git a/packages/apps/dev-wallet/src/pages/account/account.tsx b/packages/apps/dev-wallet/src/pages/account/account.tsx
index 84be318871..0a76ca6a4a 100644
--- a/packages/apps/dev-wallet/src/pages/account/account.tsx
+++ b/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();
const account =
@@ -296,21 +298,28 @@ export function AccountPage() {
{account.guard.pred}
-
+
Keys
{account.guard.keys.map((key) => (
-
-
-
-
-
- {key}
-
+
+
+ {isKeysetGuard(account.guard) &&
+ account.guard.keys.length > 1 && (
+ {getKeyAlias(key)}
+ )}
+
+
+
+
+
+
+ {key}
+
+
))}
diff --git a/packages/apps/dev-wallet/src/pages/transaction/components/Signer.tsx b/packages/apps/dev-wallet/src/pages/transaction/components/Signer.tsx
index 13b0ebac0e..6399278f63 100644
--- a/packages/apps/dev-wallet/src/pages/transaction/components/Signer.tsx
+++ b/packages/apps/dev-wallet/src/pages/transaction/components/Signer.tsx
@@ -5,6 +5,7 @@ import {
parseAsPactValue,
} from '@kadena/client';
import {
+ Badge,
Button,
Heading,
Notification,
@@ -12,7 +13,7 @@ import {
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();
+ const keyAlias = useMemo(
+ () => getKeyAlias(signer.pubKey),
+ [signer.pubKey, getKeyAlias],
+ );
return (
<>
@@ -65,7 +70,11 @@ export const RenderSigner = ({
{!signature && info && Owned}
{{info?.source ?? 'External'}}
- {signer.pubKey}
+
+
+ {keyAlias && {keyAlias}}
+ {signer.pubKey}
+
Sign for
diff --git a/packages/apps/dev-wallet/src/pages/transfer/Steps/TransferForm.tsx b/packages/apps/dev-wallet/src/pages/transfer/Steps/TransferForm.tsx
index 424eb39e31..c577a8e10b 100644
--- a/packages/apps/dev-wallet/src/pages/transfer/Steps/TransferForm.tsx
+++ b/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 (