Merge pull request #508 from onflow/506-feature-display-the-dapp-imag…

…e-with-the-correct-icon fixed: replace the image when rendering url with a placeholder
onflow · Feb 12, 2025 · 3a0db90 · 3a0db90
2 parents 645d711 + 3166ea1
commit 3a0db90
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 40 deletions.
diff --git a/src/ui/views/Approval/components/EthApproval/EthApprovalComponents/IconWithPlaceholder.tsx b/src/ui/views/Approval/components/EthApproval/EthApprovalComponents/IconWithPlaceholder.tsx
@@ -0,0 +1,39 @@
+import { CardMedia } from '@mui/material';
+import React from 'react';
+
+import flowgrey from 'ui/FRWAssets/svg/flow-grey.svg';
+
+interface IconWithPlaceholderProps {
+  imageUrl: string;
+  width?: string | number;
+  height?: string | number;
+  borderRadius?: string | number;
+  backgroundColor?: string;
+}
+
+const IconWithPlaceholder: React.FC<IconWithPlaceholderProps> = ({
+  imageUrl,
+  width = '60px',
+  height = '60px',
+  borderRadius = '12px',
+  backgroundColor = 'text.secondary',
+}) => {
+  return (
+    <CardMedia
+      component="img"
+      sx={{
+        width,
+        height,
+        borderRadius,
+        backgroundColor,
+      }}
+      image={imageUrl}
+      onError={(e) => {
+        e.currentTarget.onerror = null;
+        e.currentTarget.src = `https://www.google.com/s2/favicons?sz=256&domain_url=${imageUrl}`;
+      }}
+    />
+  );
+};
+
+export default IconWithPlaceholder;
diff --git a/src/ui/views/Approval/components/EthApproval/EthConfirm/DefaultBlock.tsx b/src/ui/views/Approval/components/EthApproval/EthConfirm/DefaultBlock.tsx
@@ -7,11 +7,12 @@ import {
   Accordion,
   AccordionSummary,
   AccordionDetails,
+  CardMedia,
 } from '@mui/material';
 import React from 'react';
 import Highlight from 'react-highlight';
 
-import placeholder from 'ui/FRWAssets/image/placeholder.png';
+import IconWithPlaceholder from '../EthApprovalComponents/IconWithPlaceholder';
 
 export const DefaultBlock = ({ title, host, data, logo }) => {
   const hexToString = (hex) => {
@@ -38,15 +39,7 @@ export const DefaultBlock = ({ title, host, data, logo }) => {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
       <Box sx={{ display: 'flex', gap: '18px', marginBottom: '0px' }}>
-        <img
-          style={{
-            height: '60px',
-            width: '60px',
-            borderRadius: '12px',
-            backgroundColor: 'text.secondary',
-          }}
-          src={logo ? logo : placeholder}
-        />
+        <IconWithPlaceholder imageUrl={logo} />
         <Stack direction="column" spacing={1} sx={{ justifyContent: 'space-between' }}>
           <Typography>{title}</Typography>
           <Typography color="secondary.main" variant="overline">

diff --git a/src/ui/views/Approval/components/EthApproval/EthConfirm/TransactionBlock.tsx b/src/ui/views/Approval/components/EthApproval/EthConfirm/TransactionBlock.tsx
@@ -9,7 +9,7 @@ import { CopyButton } from 'ui/FRWComponent';
 import { formatAddress, HexToDecimalConverter } from 'ui/utils';
 
 import IconFlow from '../../../../../../components/iconfont/IconFlow';
-
+import IconWithPlaceholder from '../EthApprovalComponents/IconWithPlaceholder';
 const convertToFlow = (value) => {
   return Number(HexToDecimalConverter(value)) / 1_000_000_000_000_000_000;
 };
@@ -18,15 +18,7 @@ export const TransactionBlock = ({ title, data, logo, lilicoEnabled, decodedCall
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
       <Box sx={{ display: 'flex', gap: '18px', marginBottom: '0px' }}>
-        <img
-          style={{
-            height: '60px',
-            width: '60px',
-            borderRadius: '12px',
-            backgroundColor: 'text.secondary',
-          }}
-          src={logo ? logo : placeholder}
-        />
+        <IconWithPlaceholder imageUrl={logo} />
         <Stack direction="column" spacing={1} sx={{ justifyContent: 'space-between' }}>
           <Typography color="text.secondary" sx={{ fontSize: '12px' }}>
             Sign Transaction from

diff --git a/src/ui/views/Approval/components/EthApproval/EthConnect/index.tsx b/src/ui/views/Approval/components/EthApproval/EthConnect/index.tsx
@@ -11,6 +11,7 @@ import { LLPrimaryButton, LLSecondaryButton, LLSpinner, LLConnectLoading } from
 import { useApproval, useWallet, formatAddress } from 'ui/utils';
 
 import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark';
+import IconWithPlaceholder from '../EthApprovalComponents/IconWithPlaceholder';
 
 // import EthMove from '../EthMove';
 
@@ -153,16 +154,7 @@ const EthConnect = ({ params: { icon, name, origin } }: ConnectProps) => {
           {isEvm && (
             <Box sx={{ display: 'flex', flexDirection: 'column', margin: '18px', gap: '18px' }}>
               <Box sx={{ display: 'flex', gap: '18px', marginBottom: '0px' }}>
-                <CardMedia
-                  component="img"
-                  sx={{
-                    height: '60px',
-                    width: '60px',
-                    borderRadius: '12px',
-                    backgroundColor: 'text.secondary',
-                  }}
-                  image={icon}
-                />
+                <IconWithPlaceholder imageUrl={icon} />
                 <Stack direction="column" sx={{ justifyContent: 'space-between' }}>
                   <Typography
                     sx={{

diff --git a/src/ui/views/Approval/components/EthApproval/EthSignType/index.tsx b/src/ui/views/Approval/components/EthApproval/EthSignType/index.tsx
@@ -10,6 +10,7 @@ import { LLConnectLoading, LLLinkingLoading } from '@/ui/FRWComponent';
 import { LLPrimaryButton, LLSecondaryButton } from 'ui/FRWComponent';
 import { useApproval, useWallet, formatAddress } from 'ui/utils';
 
+import IconWithPlaceholder from '../EthApprovalComponents/IconWithPlaceholder';
 interface ConnectProps {
   params: any;
 }
@@ -276,11 +277,8 @@ const EthSignType = ({ params }: ConnectProps) => {
           >
             {params.session && (
               <Box sx={{ marginBottom: '2px', display: 'flex' }}>
-                <CardMedia
-                  image={params.session.icon}
-                  sx={{ width: '64px', height: '64px', marginRight: '16px' }}
-                />
-                <Box>
+                <IconWithPlaceholder imageUrl={params.session.icon} />
+                <Box sx={{ marginLeft: '16px' }}>
                   <Typography sx={{ fontSize: '12px', color: '#737373' }}>
                     Sign Type Message from
                   </Typography>

diff --git a/src/ui/views/Approval/components/EthApproval/EthSignV1/index.tsx b/src/ui/views/Approval/components/EthApproval/EthSignV1/index.tsx
@@ -10,6 +10,8 @@ import { LLConnectLoading, LLLinkingLoading } from '@/ui/FRWComponent';
 import { LLPrimaryButton, LLSecondaryButton } from 'ui/FRWComponent';
 import { useApproval, useWallet } from 'ui/utils';
 
+import IconWithPlaceholder from '../EthApprovalComponents/IconWithPlaceholder';
+
 interface ConnectProps {
   params: any;
 }
@@ -177,11 +179,8 @@ const EthSignV1 = ({ params }: ConnectProps) => {
           >
             {params.session && (
               <Box sx={{ marginBottom: '2px', display: 'flex' }}>
-                <CardMedia
-                  image={params.session.icon}
-                  sx={{ width: '64px', height: '64px', marginRight: '16px' }}
-                />
-                <Box>
+                <IconWithPlaceholder imageUrl={params.session.icon} />
+                <Box sx={{ marginLeft: '16px' }}>
                   <Typography sx={{ fontSize: '12px', color: '#737373' }}>
                     Sign Type Message from
                   </Typography>