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 (
@@ -664,9 +666,7 @@ export function TransferForm({