fix: replace broken remote logo refs with local assets (#41)

BitHighlander · claude · web-flow · commit 53a4bdccf90c · 2026-04-20T20:26:48.000-05:00
* fix: replace broken remote logo refs with local assets

The client referenced api.keepkey.info/coins/{keepkey,pioneerMan,ethereum}.png
shortnames that never existed on the CDN (all 403). The CDN only serves
CAIP-base64-encoded filenames, which the dynamic asset-icon code already
generates correctly. This change fixes every hardcoded shortname usage:

- KeepKey brand marks across popup + side-panel switch to bundled /kk-logo.png
  (and chrome.runtime.getURL for the EIP-6963 announce icon and manifest
  web_accessible_resources so dapps can load it).
- AddDappModal default icon now uses caipToIcon('eip155:1/slip44:60'), which
  the CDN does serve.
- NetworkDropdown hides the avatar entirely when no network is selected
  instead of rendering Chakra's default silhouette from a 403 fallback.
- headerUtils.getIconUrl last-resort fallback no longer builds
  btoa(chainSymbol) URLs (always 403); returns '' so Chakra Avatar falls
  back to an initial letter.
- wallet.ts serviceImageUrl points at pioneers.dev (chrome-extension:// URLs
  can't load in the vault desktop UI).

Third-party image hosts also replaced with bundled assets:
- Animated kk.gif (5.6MB from i.ibb.co) converted to kk.webp (286KB, 240px,
  15fps) — 95% smaller, same animation.
- MetaMask fox and Keplr logos downloaded from their official repos.
- Xfi src dropped (Coming Soon overlay covers the avatar; letter fallback).

Net: zero remote image hosts remain outside the working CAIP CDN pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;

* fix: move new branded assets to chrome-extension/public root

Absolute src="/kk.webp" and /brand/... paths resolve to the extension
origin root (chrome-extension://&lt;id&gt;/kk.webp). Vite's base:'' does not
rewrite these, so emitting them under pages/side-panel/public/ (→
dist/side-panel/) was a 404. Moving to chrome-extension/public/ lands
them at the dist root and matches the already-working /kk-logo.png
convention.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;

---------

Co-authored-by: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/chrome-extension/manifest.js b/chrome-extension/manifest.js
@@ -46,7 +46,7 @@ const manifest = deepmerge(
     devtools_page: 'devtools/index.html',
     web_accessible_resources: [
       {
-        resources: ['*.js', '*.css', '*.svg', 'icon-128.png', 'icon-34.png'],
+        resources: ['*.js', '*.css', '*.svg', 'icon-128.png', 'icon-34.png', 'kk-logo.png'],
         matches: ['*://*/*'],
       },
     ],
diff --git a/chrome-extension/public/brand/keplr.png b/chrome-extension/public/brand/keplr.png
diff --git a/chrome-extension/public/brand/metamask-fox.svg b/chrome-extension/public/brand/metamask-fox.svg
@@ -0,0 +1,24 @@
+<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.7077 32.7522L25.1688 30.5174L19.4833 33.9008L15.5167 33.8991L9.82793 30.5174L2.29225 32.7522L0 25.0489L2.29225 16.4993L0 9.27094L2.29225 0.312256L14.0674 7.31554H20.9326L32.7077 0.312256L35 9.27094L32.7077 16.4993L35 25.0489L32.7077 32.7522Z" fill="#FF5C16"/>
+<path d="M2.29395 0.312256L14.0691 7.32047L13.6008 12.1301L2.29395 0.312256Z" fill="#FF5C16"/>
+<path d="M9.82959 25.0522L15.0106 28.9811L9.82959 30.5175V25.0522Z" fill="#FF5C16"/>
+<path d="M14.5966 18.5565L13.6009 12.1333L7.22692 16.5009L7.22363 16.4993V16.5025L7.24335 20.9983L9.82809 18.5565H9.82974H14.5966Z" fill="#FF5C16"/>
+<path d="M32.7077 0.312256L20.9326 7.32047L21.3993 12.1301L32.7077 0.312256Z" fill="#FF5C16"/>
+<path d="M25.1722 25.0522L19.9912 28.9811L25.1722 30.5175V25.0522Z" fill="#FF5C16"/>
+<path d="M27.7766 16.5025H27.7783H27.7766V16.4993L27.775 16.5009L21.401 12.1333L20.4053 18.5565H25.1722L27.7586 20.9983L27.7766 16.5025Z" fill="#FF5C16"/>
+<path d="M9.82793 30.5175L2.29225 32.7522L0 25.0522H9.82793V30.5175Z" fill="#E34807"/>
+<path d="M14.5947 18.5549L16.0341 27.8406L14.0393 22.6777L7.23975 20.9984L9.82613 18.5549H14.593H14.5947Z" fill="#E34807"/>
+<path d="M25.1721 30.5175L32.7078 32.7522L35.0001 25.0522H25.1721V30.5175Z" fill="#E34807"/>
+<path d="M20.4053 18.5549L18.9658 27.8406L20.9607 22.6777L27.7602 20.9984L25.1722 18.5549H20.4053Z" fill="#E34807"/>
+<path d="M0 25.0488L2.29225 16.4993H7.22183L7.23991 20.9967L14.0394 22.676L16.0343 27.8389L15.0089 28.976L9.82793 25.0472H0V25.0488Z" fill="#FF8D5D"/>
+<path d="M35.0001 25.0488L32.7078 16.4993H27.7783L27.7602 20.9967L20.9607 22.676L18.9658 27.8389L19.9912 28.976L25.1722 25.0472H35.0001V25.0488Z" fill="#FF8D5D"/>
+<path d="M20.9325 7.31543H17.4999H14.0673L13.6006 12.1251L16.0342 27.834H18.9656L21.4008 12.1251L20.9325 7.31543Z" fill="#FF8D5D"/>
+<path d="M2.29225 0.312256L0 9.27094L2.29225 16.4993H7.22183L13.5991 12.1301L2.29225 0.312256Z" fill="#661800"/>
+<path d="M13.17 20.4199H10.9369L9.72095 21.6062L14.0409 22.6727L13.17 20.4182V20.4199Z" fill="#661800"/>
+<path d="M32.7077 0.312256L34.9999 9.27094L32.7077 16.4993H27.7781L21.4009 12.1301L32.7077 0.312256Z" fill="#661800"/>
+<path d="M21.833 20.4199H24.0694L25.2853 21.6079L20.9604 22.676L21.833 20.4182V20.4199Z" fill="#661800"/>
+<path d="M19.4817 30.8362L19.9911 28.9794L18.9658 27.8423H16.0327L15.0073 28.9794L15.5167 30.8362" fill="#661800"/>
+<path d="M19.4816 30.8359V33.9021H15.5166V30.8359H19.4816Z" fill="#C0C4CD"/>
+<path d="M9.82959 30.5142L15.52 33.9008V30.8346L15.0106 28.9778L9.82959 30.5142Z" fill="#E7EBF6"/>
+<path d="M25.1721 30.5142L19.4817 33.9008V30.8346L19.9911 28.9778L25.1721 30.5142Z" fill="#E7EBF6"/>
+</svg>
diff --git a/chrome-extension/public/kk-logo.png b/chrome-extension/public/kk-logo.png
diff --git a/chrome-extension/public/kk.webp b/chrome-extension/public/kk.webp
diff --git a/chrome-extension/src/background/wallet.ts b/chrome-extension/src/background/wallet.ts
@@ -71,7 +71,7 @@ export async function init(): Promise<WalletState> {
       apiKey: savedApiKey,
       baseUrl: 'http://localhost:1646',
       serviceName: 'KeepKey Browser Extension',
-      serviceImageUrl: 'https://api.keepkey.info/coins/keepkey.png',
+      serviceImageUrl: 'https://pioneers.dev/coins/keepkey.png',
     });
 
     state.sdk = sdk;
diff --git a/pages/popup/src/components/evm/ContractDetailsCard.tsx b/pages/popup/src/components/evm/ContractDetailsCard.tsx
@@ -100,7 +100,7 @@ export default function ContractDetailsCard({ transaction }: ContractDetailsCard
     <Card mt={4} shadow="md" borderWidth="1px">
       <CardHeader>
         <Flex alignItems="center">
-          <Avatar src={'https://api.keepkey.info/coins/pioneerMan.png'} size="md" mr={4} />
+          <Avatar src="/kk-logo.png" name="KeepKey" size="md" mr={4} />
           <Heading as="h5" size="lg">
             Pioneer Summary:
           </Heading>
diff --git a/pages/popup/src/components/evm/ProjectInfoCard.tsx b/pages/popup/src/components/evm/ProjectInfoCard.tsx
@@ -1,8 +1,7 @@
 import { useMemo, useEffect, useState } from 'react';
 import { Avatar, Box, Text, VStack, Stack, Badge, Image } from '@chakra-ui/react';
 
-// KeepKey logo URL with fallback
-const KEEPKEY_LOGO = 'https://api.keepkey.info/coins/keepkey.png';
+const KEEPKEY_LOGO = '/kk-logo.png';
 const KEEPKEY_LOGO_FALLBACK = '/icon-128.png';
 
 interface IProps {
diff --git a/pages/popup/src/components/other/ProjectInfoCard.tsx b/pages/popup/src/components/other/ProjectInfoCard.tsx
@@ -28,7 +28,7 @@ export default function ProjectInfoCard({ transaction }: any) {
   return (
     <Box textAlign="center">
       <Stack align="center">
-        <Avatar src={'https://api.keepkey.info/coins/keepkey.png'} size="xl" bg="gray.700" />
+        <Avatar src="/kk-logo.png" name="KeepKey" size="xl" bg="gray.700" />
       </Stack>
       <Stack align="center">
         <Text fontSize="2xl" data-testid="session-info-card-text">
diff --git a/pages/popup/src/components/tendermint/ProjectInfoCard.tsx b/pages/popup/src/components/tendermint/ProjectInfoCard.tsx
@@ -28,7 +28,7 @@ export default function ProjectInfoCard({ transaction }: any) {
   return (
     <Box textAlign="center">
       <Stack align="center">
-        <Avatar src={'https://api.keepkey.info/coins/keepkey.png'} size="xl" bg="gray.700" />
+        <Avatar src="/kk-logo.png" name="KeepKey" size="xl" bg="gray.700" />
       </Stack>
       <Stack align="center">
         <Text fontSize="2xl" data-testid="session-info-card-text">
diff --git a/pages/popup/src/components/utxo/ProjectInfoCard.tsx b/pages/popup/src/components/utxo/ProjectInfoCard.tsx
@@ -28,7 +28,7 @@ export default function ProjectInfoCard({ transaction }: any) {
   return (
     <Box textAlign="center">
       <Stack align="center">
-        <Avatar src={'https://api.keepkey.info/coins/keepkey.png'} size="xl" bg="gray.700" />
+        <Avatar src="/kk-logo.png" name="KeepKey" size="xl" bg="gray.700" />
       </Stack>
       <Stack align="center">
         <Text fontSize="2xl" data-testid="session-info-card-text">
diff --git a/pages/side-panel/src/SidePanel.tsx b/pages/side-panel/src/SidePanel.tsx
@@ -217,11 +217,7 @@ const SidePanel = () => {
         return (
           <Flex direction="column" justifyContent="center" alignItems="center" height="100%" minH="300px">
             <Box mb={4} borderRadius="2xl" overflow="hidden" boxShadow="0 0 40px rgba(0, 200, 150, 0.15)">
-              <img
-                src="https://i.ibb.co/jR8WcJM/kk.gif"
-                alt="KeepKey"
-                style={{ maxWidth: '160px', borderRadius: '16px' }}
-              />
+              <img src="/kk.webp" alt="KeepKey" style={{ maxWidth: '160px', borderRadius: '16px' }} />
             </Box>
             <Text fontSize="xl" fontWeight="bold" textAlign="center" mb={1} color="white">
               Welcome to KeepKey
diff --git a/pages/side-panel/src/components/AddDappModal.tsx b/pages/side-panel/src/components/AddDappModal.tsx
@@ -16,6 +16,7 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { dappStorage } from '@extension/storage';
+import { caipToIcon } from '@extension/shared';
 
 interface AddDappModalProps {
   isOpen: boolean;
@@ -29,7 +30,7 @@ export function AddDappModal({ networkId, isOpen, onClose, onSave }: AddDappModa
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const toast = useToast();
-  const defaultIcon = 'https://api.keepkey.info/coins/ethereum.png';
+  const defaultIcon = caipToIcon('eip155:1/slip44:60');
 
   const handleSave = async () => {
     if (!url || !name) {
@@ -60,7 +61,7 @@ export function AddDappModal({ networkId, isOpen, onClose, onSave }: AddDappModa
       <ModalContent>
         <ModalHeader>
           <Flex align="center">
-            <Avatar src="https://api.keepkey.info/coins/pioneerMan.png" size="sm" mr={2} />
+            <Avatar src="/kk-logo.png" name="KeepKey" size="sm" mr={2} />
             <Text>Discovery</Text>
           </Flex>
         </ModalHeader>
diff --git a/pages/side-panel/src/components/NetworkAccountHeader.tsx b/pages/side-panel/src/components/NetworkAccountHeader.tsx
@@ -236,7 +236,7 @@ const NetworkAccountHeader: React.FC<NetworkAccountHeaderProps> = ({
           </Flex>
         ) : (
           <Flex flex={1} alignItems="center" justifyContent="center">
-            <Avatar size="xs" src="https://api.keepkey.info/coins/keepkey.png" mr={2} />
+            <Avatar size="xs" src="/kk-logo.png" name="KeepKey" mr={2} />
             <Text fontSize="sm" fontWeight="semibold" color="white">
               KeepKey
             </Text>
diff --git a/pages/side-panel/src/components/Settings.tsx b/pages/side-panel/src/components/Settings.tsx
@@ -131,7 +131,7 @@ const Settings = () => {
         provider: {
           name: 'KeepKey',
           uuid: '350670db-19fa-4704-a166-e52e178b59d4',
-          icon: 'https://api.keepkey.info/coins/keepkey.png',
+          icon: chrome.runtime.getURL('kk-logo.png'),
           rdns: 'com.keepkey',
         },
       },
@@ -164,7 +164,7 @@ const Settings = () => {
         </Button>
       </Link>
 
-      <Image src={'https://i.ibb.co/jR8WcJM/kk.gif'} alt="KeepKey" />
+      <Image src="/kk.webp" alt="KeepKey" />
 
       <VStack spacing={4} align="stretch">
         <Text fontSize="md" fontWeight="bold">
@@ -174,11 +174,7 @@ const Settings = () => {
         {/* MetaMask Masking */}
         <HStack w="100%" justifyContent="space-between">
           <HStack>
-            <Avatar
-              size="md"
-              name="MetaMask"
-              src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/MetaMask_Fox.svg/1200px-MetaMask_Fox.svg.png"
-            />
+            <Avatar size="md" name="MetaMask" src="/brand/metamask-fox.svg" />
             <Text>Enable MetaMask Masking</Text>
           </HStack>
           <Switch size="md" isChecked={maskingSettings.enableMetaMaskMasking} onChange={toggleMetaMaskMasking} />
@@ -188,7 +184,7 @@ const Settings = () => {
         <Box position="relative" w="100%">
           <HStack w="100%" justifyContent="space-between" opacity={isComingSoon('Xfi') ? 0.5 : 1}>
             <HStack>
-              <Avatar size="md" name="Xfi" src="https://cdn.iconscout.com/icon/free/png-512/binance-67-433984.png" />
+              <Avatar size="md" name="Xfi" />
               <Text>Enable Xfi Masking</Text>
             </HStack>
             <Switch
@@ -220,11 +216,7 @@ const Settings = () => {
         <Box position="relative" w="100%">
           <HStack w="100%" justifyContent="space-between" opacity={isComingSoon('Keplr') ? 0.5 : 1}>
             <HStack>
-              <Avatar
-                size="md"
-                name="Keplr"
-                src="https://cdn.dealspotr.com/io-images/logo/keplr.jpg?fit=contain&trim=true&flatten=true&extend=10&width=500&height=500"
-              />
+              <Avatar size="md" name="Keplr" src="/brand/keplr.png" />
               <Text>Enable Keplr Masking</Text>
             </HStack>
             <Switch
diff --git a/pages/side-panel/src/components/header/NetworkDropdown.tsx b/pages/side-panel/src/components/header/NetworkDropdown.tsx
@@ -110,7 +110,7 @@ const NetworkDropdown: React.FC<NetworkDropdownProps> = ({
         _hover={{ bg: 'whiteAlpha.200' }}
         transition="background 0.15s"
         minW={0}>
-        <Avatar size="2xs" src={selected?.icon || 'https://api.keepkey.info/coins/keepkey.png'} mr={1.5} />
+        {selected?.icon && <Avatar size="2xs" src={selected.icon} name={selected.name} mr={1.5} />}
         <Text fontSize="xs" fontWeight="semibold" color="white" isTruncated maxW="90px">
           {selected?.name || 'Network'}
         </Text>
diff --git a/pages/side-panel/src/components/header/headerUtils.ts b/pages/side-panel/src/components/header/headerUtils.ts
@@ -19,7 +19,7 @@ export function getIconUrl(chainSymbol: string, networkId?: string): string {
   if (networkId) return networkIdToIcon(networkId);
   const nid = (ChainToNetworkId as Record<string, string>)[chainSymbol];
   if (nid) return networkIdToIcon(nid);
-  return `https://api.keepkey.info/coins/${btoa(chainSymbol.toLowerCase())}.png`;
+  return '';
 }
 
 export function parseAccountIndex(note?: string, accountIndex?: number): number {

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ const manifest = deepmerge(`
`46`	`46`	`devtools_page: 'devtools/index.html',`
`47`	`47`	`web_accessible_resources: [`
`48`	`48`	`{`
`49`		`- resources: ['.js', '.css', '*.svg', 'icon-128.png', 'icon-34.png'],`
	`49`	`+ resources: ['.js', '.css', '*.svg', 'icon-128.png', 'icon-34.png', 'kk-logo.png'],`
`50`	`50`	`matches: [':///*'],`
`51`	`51`	`},`
`52`	`52`	`],`