load images

src/components/Hero.jsx

@@ -342,11 +342,14 @@ export function Hero(props) {
                     <>
                         <h1>Your Unaboomers</h1>
                         <div className="ownedTokens">
-                            {JSON.parse(tokensMinted).map((id, idx) => (
-                                <div className="ownedToken" key={idx}>
-                                    <img src={Unaboomer} width="80px" />
-                                </div>
-                            ))}
+                            {JSON.parse(tokensMinted).filter((item, index) => JSON.parse(tokensMinted).indexOf(item) === index).map((id, idx) => (
+                                    <div className="ownedToken" key={idx}>
+                                        <a href={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} target='_blank'>
+                                            <img src={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} width="80px" />
+                                        </a>
+                                    </div>
+                                )
+                            )}
                         </div>
                     </>
                 )}