From f4997ac0086d8978e450fccdf5b47310a82c652c Mon Sep 17 00:00:00 2001
From: Florian Bouron <bouron.florian@yahoo.fr>
Date: Mon, 14 Aug 2023 18:58:06 +0200
Subject: [PATCH] Edit default NFT image

---
 .../src/components/atoms/NFTImage/NFTImage.tsx  | 17 ++++++++++++++---
 .../atoms/Tokens/GemWallet/GemWallet.tsx        |  4 ++--
 .../organisms/NFTDetails/NFTDetails.tsx         |  2 +-
 .../pages/AddNewTrustline/StepConfirm.tsx       |  2 +-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/extension/src/components/atoms/NFTImage/NFTImage.tsx b/packages/extension/src/components/atoms/NFTImage/NFTImage.tsx
index 6e7cd5d8d..65b571c69 100644
--- a/packages/extension/src/components/atoms/NFTImage/NFTImage.tsx
+++ b/packages/extension/src/components/atoms/NFTImage/NFTImage.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { CircularProgress } from '@mui/material';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
@@ -25,8 +25,19 @@ export const NFTImage: FC<NFTImageProps> = ({ imageURL, height = 250, width = 25
       />
     </div>
   ) : (
-    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <GemWallet />
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height,
+        width,
+        backgroundColor: '#1e1e1e',
+        borderRadius: '4px',
+        boxShadow: '4px 4px 0px black'
+      }}
+    >
+      <GemWallet style={{ transform: 'scale(2)' }} />
     </div>
   );
 };
diff --git a/packages/extension/src/components/atoms/Tokens/GemWallet/GemWallet.tsx b/packages/extension/src/components/atoms/Tokens/GemWallet/GemWallet.tsx
index 9492f81ec..86e06520e 100644
--- a/packages/extension/src/components/atoms/Tokens/GemWallet/GemWallet.tsx
+++ b/packages/extension/src/components/atoms/Tokens/GemWallet/GemWallet.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC, SVGProps } from 'react';
 
-export const GemWallet: FC = (props) => (
+export const GemWallet: FC<SVGProps<SVGSVGElement>> = (props) => (
   <svg width={45} height={45} xmlns="http://www.w3.org/2000/svg" {...props} data-testid="gem-icon">
     <circle cx="22.492" cy="22.51" r="22.363" fill="#1e1e1e" stroke="null" />
     <g fill="none" stroke="null">
diff --git a/packages/extension/src/components/organisms/NFTDetails/NFTDetails.tsx b/packages/extension/src/components/organisms/NFTDetails/NFTDetails.tsx
index b2521f7cb..bc493a890 100644
--- a/packages/extension/src/components/organisms/NFTDetails/NFTDetails.tsx
+++ b/packages/extension/src/components/organisms/NFTDetails/NFTDetails.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import CloseIcon from '@mui/icons-material/Close';
 import {
diff --git a/packages/extension/src/components/pages/AddNewTrustline/StepConfirm.tsx b/packages/extension/src/components/pages/AddNewTrustline/StepConfirm.tsx
index 7ec6f2ce4..3c283a356 100644
--- a/packages/extension/src/components/pages/AddNewTrustline/StepConfirm.tsx
+++ b/packages/extension/src/components/pages/AddNewTrustline/StepConfirm.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import ErrorIcon from '@mui/icons-material/Error';
 import { Button, Container, IconButton, Paper, Tooltip, Typography } from '@mui/material';