UI enhancements

chrome-extension/src/background/keepkey.ts

@@ -1,7 +1,6 @@
 /*
     KeepKey Wallet
  */
-import { AssetValue } from '@pioneer-platform/helpers';
 import { ChainToNetworkId, getChainEnumValue } from '@pioneer-platform/pioneer-caip';
 import { getPaths } from '@pioneer-platform/pioneer-coins';
 import { keepKeyApiKeyStorage, pioneerKeyStorage } from '@extension/storage'; // Re-import the storage
@@ -166,6 +165,30 @@ export const onStartKeepkey = async function () {
       showDisplay: false, // Not supported by TrezorConnect or Ledger, but KeepKey should do it
     });
 
+    // Ethereum account 1 - m/44'/60'/1'/0/0
+    paths.push({
+      note: 'Ethereum account 1',
+      networks: ['eip155:1'],
+      script_type: 'ethereum',
+      type: 'address',
+      addressNList: [0x80000000 + 44, 0x80000000 + 60, 0x80000000 + 1, 0, 0],
+      addressNListMaster: [0x80000000 + 44, 0x80000000 + 60, 0x80000000 + 1, 0, 0],
+      curve: 'secp256k1',
+      showDisplay: false,
+    });
+
+    // Ethereum account 2 - m/44'/60'/2'/0/0
+    paths.push({
+      note: 'Ethereum account 2',
+      networks: ['eip155:1'],
+      script_type: 'ethereum',
+      type: 'address',
+      addressNList: [0x80000000 + 44, 0x80000000 + 60, 0x80000000 + 2, 0, 0],
+      addressNListMaster: [0x80000000 + 44, 0x80000000 + 60, 0x80000000 + 2, 0, 0],
+      curve: 'secp256k1',
+      showDisplay: false,
+    });
+
     //get username from storage
     const keepkeyApiKey = (await keepKeyApiKeyStorage.getApiKey()) || 'key:123';
     let username = await pioneerKeyStorage.getUsername();

pages/popup/src/components/evm/ProjectInfoCard.tsx

@@ -1,12 +1,18 @@
 import { useMemo, useEffect, useState } from 'react';
-import { Avatar, Box, Text, VStack, Stack, Badge } from '@chakra-ui/react';
+import { Avatar, Box, Text, VStack, Stack, Badge, Image } from '@chakra-ui/react';
+
+// KeepKey logo URL with fallback
+const KEEPKEY_LOGO = 'https://pioneers.dev/coins/keepkey.png';
+const KEEPKEY_LOGO_FALLBACK = '/icon-128.png';
 
 interface IProps {
   transaction: any;
 }
 
 export default function ProjectInfoCard({ transaction }: IProps) {
   const [faviconUrl, setFaviconUrl] = useState<string | null>(null);
+  const [logoError, setLogoError] = useState(false);
+  const isKeepKeyExtension = transaction?.siteUrl === 'KeepKey Browser Extension';
 
   // Clean the URL to extract the domain
   const cleanUrl = useMemo(() => {
@@ -21,38 +27,68 @@ export default function ProjectInfoCard({ transaction }: IProps) {
 
   // Attempt to fetch the favicon from the cleaned URL or handle the KeepKey Browser Extension case
   useEffect(() => {
-    if (transaction?.siteUrl === 'KeepKey Browser Extension') {
-      setFaviconUrl('https://api.keepkey.info/coins/keepkey.png');
+    setLogoError(false); // Reset error state for new URL
+    if (isKeepKeyExtension) {
+      setFaviconUrl(KEEPKEY_LOGO);
     } else if (cleanUrl) {
       const favicon = `${cleanUrl}/favicon.ico`;
       setFaviconUrl(favicon);
     }
-  }, [cleanUrl, transaction?.siteUrl]);
+  }, [cleanUrl, isKeepKeyExtension]);
+
+  // Get the appropriate logo src
+  const getLogoSrc = () => {
+    if (logoError) return KEEPKEY_LOGO_FALLBACK;
+    return faviconUrl || KEEPKEY_LOGO;
+  };
 
   return (
     <Box textAlign="center">
       <Stack align="center" position="relative">
-        {/* Main Avatar for the dApp's favicon */}
-        <Avatar src={faviconUrl || 'https://via.placeholder.com/150'} size="xl" />
-
-        {/* Sub Avatar for KeepKey logo */}
-        <Avatar
-          src={'https://api.keepkey.info/coins/keepkey.png'}
-          size="sm"
-          position="absolute"
-          bottom={0}
-          right={0}
-          borderWidth="2px"
-          borderColor="white"
-        />
+        {/* Logo - square for KeepKey, round avatar for dApps */}
+        {isKeepKeyExtension ? (
+          <Image
+            src={getLogoSrc()}
+            alt="KeepKey"
+            boxSize="80px"
+            objectFit="contain"
+            onError={() => setLogoError(true)}
+          />
+        ) : (
+          <Avatar src={getLogoSrc()} size="xl" bg="gray.700" onError={() => setLogoError(true)} />
+        )}
+
+        {/* Sub Avatar for KeepKey logo - only show if not already KeepKey */}
+        {!isKeepKeyExtension && (
+          <Image
+            src={KEEPKEY_LOGO}
+            boxSize="24px"
+            position="absolute"
+            bottom={0}
+            right="calc(50% - 40px)"
+            borderWidth="2px"
+            borderColor="gray.800"
+            borderRadius="md"
+          />
+        )}
       </Stack>
       <Stack align="center" mt={4}>
-        <Text fontSize="2xl" data-testid="session-info-card-text">
-          {transaction?.siteUrl === 'KeepKey Browser Extension' ? 'KeepKey Browser Extension' : cleanUrl} <br />
-          <Text fontSize="xl">
-            wants to <Badge>{transaction.type}</Badge>
+        {/* For KeepKey extension, just show "wants to" since logo has the name */}
+        {isKeepKeyExtension ? (
+          <Text fontSize="xl" data-testid="session-info-card-text">
+            wants to{' '}
+            <Badge colorScheme="yellow" fontSize="md" px={2}>
+              {transaction.type}
+            </Badge>
           </Text>
-        </Text>
+        ) : (
+          <VStack spacing={1} data-testid="session-info-card-text">
+            <Text fontSize="2xl">{cleanUrl}</Text>
+            <Text fontSize="xl">
+              wants to <Badge colorScheme="yellow">{transaction.type}</Badge>
+            </Text>
+          </VStack>
+        )}
       </Stack>
     </Box>
   );

pages/popup/src/components/evm/RequestMethodCard.tsx

@@ -15,26 +15,30 @@ const getMethodInfo = (txType: string, hasSmartContractExecution: boolean) => {
       return {
         title: 'Safe Method',
         description: 'Does not move funds',
-        icon: <CheckCircleIcon boxSize={8} color="green.400" />,
+        icon: <CheckCircleIcon boxSize={5} color="green.400" />,
         color: 'green.400',
       };
 
     case 'transfer':
       return {
         title: 'Transaction',
-        description: 'Moves funds only, no smart contract execution',
-        icon: <WarningIcon boxSize={8} color="yellow.400" />,
-        color: 'yellow.400',
+        description: 'Simple transfer - no smart contract interaction',
+        icon: <CheckCircleIcon boxSize={5} color="green.400" />,
+        color: 'green.400',
       };
     case 'eth_sendTransaction':
     case 'eth_signTransaction':
       return {
-        title: 'Transaction',
+        title: hasSmartContractExecution ? 'Smart Contract' : 'Transaction',
         description: hasSmartContractExecution
-          ? 'This transaction has smart contract execution, requires extended validation'
-          : 'Moves funds only, no smart contract execution',
-        icon: <WarningIcon boxSize={8} color="yellow.400" />,
-        color: 'yellow.400',
+          ? 'Interacts with smart contract - review carefully'
+          : 'Simple transfer - no smart contract interaction',
+        icon: hasSmartContractExecution ? (
+          <WarningIcon boxSize={5} color="yellow.400" />
+        ) : (
+          <CheckCircleIcon boxSize={5} color="green.400" />
+        ),
+        color: hasSmartContractExecution ? 'yellow.400' : 'green.400',
       };
 
     case 'eth_signTypedData':

pages/popup/src/components/other/ProjectInfoCard.tsx

@@ -28,13 +28,13 @@ export default function ProjectInfoCard({ transaction }: any) {
   return (
     <Box textAlign="center">
       <Stack align="center">
-        <Avatar src={'https://api.keepkey.info/coins/keepkey.png'} size="xl" />
+        <Avatar src={'https://pioneers.dev/coins/keepkey.png'} size="xl" bg="gray.700" />
       </Stack>
       <Stack align="center">
         <Text fontSize="2xl" data-testid="session-info-card-text">
           <span>{url}</span> <br />
           <Text fontSize="xl">
-            wants to <Badge>{transaction.type}</Badge>
+            wants to <Badge colorScheme="yellow">{transaction?.type}</Badge>
           </Text>
         </Text>
       </Stack>

pages/popup/src/components/tendermint/ProjectInfoCard.tsx

@@ -28,13 +28,13 @@ export default function ProjectInfoCard({ transaction }: any) {
   return (
     <Box textAlign="center">
       <Stack align="center">
-        <Avatar src={'https://api.keepkey.info/coins/keepkey.png'} size="xl" />
+        <Avatar src={'https://pioneers.dev/coins/keepkey.png'} size="xl" bg="gray.700" />
       </Stack>
       <Stack align="center">
         <Text fontSize="2xl" data-testid="session-info-card-text">
           <span>{url}</span> <br />
           <Text fontSize="xl">
-            wants to <Badge>{transaction.type}</Badge>
+            wants to <Badge colorScheme="yellow">{transaction.type}</Badge>
           </Text>
         </Text>
       </Stack>

pages/popup/src/components/utxo/ProjectInfoCard.tsx

@@ -28,13 +28,13 @@ export default function ProjectInfoCard({ transaction }: any) {
   return (
     <Box textAlign="center">
       <Stack align="center">
-        <Avatar src={'https://api.keepkey.info/coins/keepkey.png'} size="xl" />
+        <Avatar src={'https://pioneers.dev/coins/keepkey.png'} size="xl" bg="gray.700" />
       </Stack>
       <Stack align="center">
         <Text fontSize="2xl" data-testid="session-info-card-text">
           <span>{url}</span> <br />
           <Text fontSize="xl">
-            wants to <Badge>{transaction.type}</Badge>
+            wants to <Badge colorScheme="yellow">{transaction.type}</Badge>
           </Text>
         </Text>
       </Stack>