From d5d9d414fcb679e38758fc121a4cbbe91a9de952 Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Mon, 6 Mar 2023 22:14:24 +0300
Subject: [PATCH] Add image preview for existing image URL

---
 components/badges/creation/BadgeDetails.tsx       |  1 +
 components/badges/creation/ImageUploadDetails.tsx | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/badges/creation/BadgeDetails.tsx b/components/badges/creation/BadgeDetails.tsx
index 46a25b3..7805dcc 100644
--- a/components/badges/creation/BadgeDetails.tsx
+++ b/components/badges/creation/BadgeDetails.tsx
@@ -278,6 +278,7 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
         }
       } catch (error) {
         toast.error('Error retrieving metadata fee rate.')
+        setMetadataFeeRate(0)
         console.log('Error retrieving fee rate: ', error)
       }
     }
diff --git a/components/badges/creation/ImageUploadDetails.tsx b/components/badges/creation/ImageUploadDetails.tsx
index 0bd58b4..397f541 100644
--- a/components/badges/creation/ImageUploadDetails.tsx
+++ b/components/badges/creation/ImageUploadDetails.tsx
@@ -172,7 +172,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
         </div>
       </div>
 
-      <div className="p-3 py-5 pb-8">
+      <div className="p-3 py-5 pb-4">
         <Conditional test={uploadMethod === 'existing'}>
           <div className="ml-3 flex-column">
             <p className="mb-5 ml-5">
@@ -187,8 +187,17 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
               </Anchor>{' '}
               and upload your image manually to get an image URL for your badge.
             </p>
-            <div>
-              <TextInput {...imageUrlState} className="mt-2 ml-4 w-1/2" />
+            <div className="flex flex-row w-full">
+              <TextInput {...imageUrlState} className="mt-2 ml-6 w-full max-w-2xl" />
+              <Conditional test={imageUrlState.value !== ''}>
+                <div className="mt-2 ml-4 w-1/4 border-2 border-dashed">
+                  <img
+                    alt="badge-preview"
+                    className="w-full"
+                    src={imageUrlState.value.replace('IPFS://', 'ipfs://').replace(/,/g, '').replace(/"/g, '').trim()}
+                  />
+                </div>
+              </Conditional>
             </div>
           </div>
         </Conditional>