LaconicNetwork/stargaze-studio
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add image preview for existing image URL

Browse Source
This commit is contained in:
Serkan Reis 2023-03-06 22:14:24 +03:00
parent 4f1a37654e
commit d5d9d414fc
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/badges/creation/BadgeDetails.tsx
View File

@ -278,6 +278,7 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
} }
} catch (error) { } catch (error) {
toast.error('Error retrieving metadata fee rate.') toast.error('Error retrieving metadata fee rate.')
setMetadataFeeRate(0)
console.log('Error retrieving fee rate: ', error) console.log('Error retrieving fee rate: ', error)
} }
} }

15
components/badges/creation/ImageUploadDetails.tsx
View File

@ -172,7 +172,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
</div> </div>
</div> </div>
<div className="p-3 py-5 pb-8"> <div className="p-3 py-5 pb-4">
<Conditional test={uploadMethod === 'existing'}> <Conditional test={uploadMethod === 'existing'}>
<div className="ml-3 flex-column"> <div className="ml-3 flex-column">
<p className="mb-5 ml-5"> <p className="mb-5 ml-5">
@ -187,8 +187,17 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
</Anchor>{' '} </Anchor>{' '}
and upload your image manually to get an image URL for your badge. and upload your image manually to get an image URL for your badge.
</p> </p>
<div> <div className="flex flex-row w-full">
<TextInput {...imageUrlState} className="mt-2 ml-4 w-1/2" /> <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>
</div> </div>
</Conditional> </Conditional>