Merge pull request #235 from poap-xyz/release/v1.12.15

Release v1.12.15
poap-xyz · May 11, 2024 · 75f9f5f · 75f9f5f
2 parents fa55255 + 5f07c32
commit 75f9f5f
Show file tree

Hide file tree

Showing 29 changed files with 405 additions and 159 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@poap-xyz/poap-family",
-  "version": "1.12.14",
+  "version": "1.12.15",
   "author": {
     "name": "POAP",
     "url": "https://poap.xyz"

diff --git a/src/components/AddressCollector.js b/src/components/AddressCollector.js
@@ -11,12 +11,21 @@ function AddressCollector({ address, ens, bigEns = false, short = false }) {
       <div className="collector-address">
         <a href={`${POAP_SCAN_URL}/${address}`}>
           {address && (
-            <code className="address short" style={{ display: short ? 'inline' : 'none' }} title={address}>
+            <code
+              className="address short"
+              style={{ display: short ? 'inline' : 'none' }}
+              title={address}
+            >
               {address.substring(0, 10)}…{address.substr(-8)}
             </code>
           )}
           {!short && address && (
-            <code className="address long" style={{ display: short ? 'none' : 'inline' }}>{address}</code>
+            <code
+              className="address long"
+              style={{ display: short ? 'none' : 'inline' }}
+            >
+              {address}
+            </code>
           )}
         </a>
       </div>

diff --git a/src/components/AddressProfile.js b/src/components/AddressProfile.js
@@ -1,12 +1,12 @@
 import { useContext, useEffect, useState } from 'react'
 import { LazyImage } from 'react-lazy-images'
-import { OpenNewWindow } from 'iconoir-react'
 import { formatMonthYear } from '../utils/date'
 import { POAP_SCAN_URL, findInitialPOAPDate } from '../models/poap'
 import { INCOMMON_ADDRESSES_LIMIT, INCOMMON_EVENTS_LIMIT } from '../models/in-common'
 import { PROFILE_EVENTS_LIMIT } from '../models/address'
 import { ResolverEnsContext, ReverseEnsContext } from '../stores/ethereum'
 import { scanAddress } from '../loaders/poap'
+import ExternalLink from './ExternalLink'
 import AddressesList from './AddressesList'
 import TokenImage from './TokenImage'
 import ButtonLink from './ButtonLink'
@@ -112,6 +112,13 @@ function AddressProfile({
     [address, poaps, error]
   )
 
+  const hasAvatarImage = (
+    address in ensNames &&
+    avatars[ensNames[address]] != null &&
+    avatars[ensNames[address]].startsWith('http') &&
+    !avatars[ensNames[address]].endsWith('json')
+  )
+
   return (
     <div className="address-profile">
       {loading > 0 && (
@@ -124,7 +131,7 @@ function AddressProfile({
       )}
       {!loading && !error && (
         <>
-          {address in ensNames && avatars[ensNames[address]] && avatars[ensNames[address]].startsWith('http') && !avatars[ensNames[address]].endsWith('json') && (
+          {hasAvatarImage && (
             <LazyImage
               className="profile-avatar"
               src={avatars[ensNames[address]]}
@@ -147,10 +154,13 @@ function AddressProfile({
               )}
             />
           )}
-          <a className="profile-address" href={`${POAP_SCAN_URL}/${address}`} title={`Scan ${address in ensNames ? ensNames[address] : address}`} target="_blank" rel="noopener noreferrer">
+          <ExternalLink
+            className="profile-address"
+            href={`${POAP_SCAN_URL}/${address}`}
+            title={`Scan ${address in ensNames ? ensNames[address] : address}`}
+          >
             <code>{address}</code>
-            <OpenNewWindow width={11} height={11} />
-          </a>
+          </ExternalLink>
           {address in ensNames && (
             <big className="profile-ens">{ensNames[address]}</big>
           )}

diff --git a/src/components/AddressesList.js b/src/components/AddressesList.js
@@ -12,7 +12,12 @@ function AddressesList({
     <ol className="addresses-list">
       {addresses.map((address) => (
         <li key={address}>
-          <a href={`${POAP_SCAN_URL}/${address}`} title={`Scan ${address in ensNames ? ensNames[address] : address}`} target="_blank" rel="noopener noreferrer">
+          <a
+            href={`${POAP_SCAN_URL}/${address}`}
+            title={`Scan ${address in ensNames ? ensNames[address] : address}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             {address in ensNames
               ? <span className="ens">{ensNames[address]}</span>
               : <code>{address}</code>

diff --git a/src/components/ButtonExpand.js b/src/components/ButtonExpand.js
@@ -6,9 +6,11 @@ import Button from './Button'
 function ButtonExpand({ addresses, eventIds, link = false, ...props }) {
   const navigate = useNavigate()
 
-  const queryString = eventIds && Array.isArray(eventIds) && eventIds.length > 0
-    ? `?events=${eventIds.join(',')}`
-    : ''
+  const queryString = (
+    eventIds && Array.isArray(eventIds) && eventIds.length > 0
+      ? `?events=${eventIds.join(',')}`
+      : ''
+  )
 
   return (
     <div className="button-expand">
@@ -28,7 +30,9 @@ function ButtonExpand({ addresses, eventIds, link = false, ...props }) {
             {...props}
             secondary={true}
             icon={<Expand />}
-            onClick={() => navigate(`/addresses${queryString}#${addresses.join(',')}`)}
+            onClick={() => {
+              navigate(`/addresses${queryString}#${addresses.join(',')}`)
+            }}
           >
             Expand
           </Button>

diff --git a/src/components/CachedEventList.js b/src/components/CachedEventList.js
@@ -26,7 +26,9 @@ function CachedEventList({
             <div className="info">
               <div className="name">
                 <h4 title={cachedEvent.name}>{cachedEvent.name}</h4>
-                {showClear && <ButtonLink onClick={() => onClear(cachedEvent.id)}>clear</ButtonLink>}
+                {showClear && (
+                  <ButtonLink onClick={() => onClear(cachedEvent.id)}>clear</ButtonLink>
+                )}
               </div>
               <div className="sub-info">
                 {showCachedTs &&

diff --git a/src/components/CollectionList.js b/src/components/CollectionList.js
@@ -44,7 +44,10 @@ function CollectionList({
           <div className="collection-banner">
             {collection.banner_image_url && (
               <img
-                src={resizeCollectionImageUrl(collection.banner_image_url, { w: 192, h: 48 })}
+                src={resizeCollectionImageUrl(collection.banner_image_url, {
+                  w: 192,
+                  h: 48,
+                })}
                 onError={(event) => event.target.style.display = 'none'}
                 alt=""
               />
@@ -54,7 +57,10 @@ function CollectionList({
             {showLogo && collection.logo_image_url && (
               <div className="collection-logo">
                 <img
-                  src={resizeCollectionImageUrl(collection.logo_image_url, { w: 32, h: 32 })}
+                  src={resizeCollectionImageUrl(collection.logo_image_url, {
+                    w: 32,
+                    h: 32,
+                  })}
                   alt=""
                 />
               </div>

diff --git a/src/components/EventButtons.js b/src/components/EventButtons.js
@@ -1,13 +1,24 @@
 import LinkButton from './LinkButton'
 import '../styles/event-buttons.css'
 
-function EventButtons({ event, buttons, viewInGallery = true, invert = false }) {
+function EventButtons({
+  event,
+  buttons,
+  viewInGallery = true,
+  invert = false,
+}) {
   return (
     <div className={`event-buttons ${invert ? 'right' : 'left'}`}>
-      {viewInGallery &&
+      {viewInGallery && (
         <div className="view-in-gallery">
-          <LinkButton href={`https://poap.gallery/event/${event.id}`} external={true}>View in Gallery</LinkButton>
-        </div>}
+          <LinkButton
+            href={`https://poap.gallery/event/${event.id}`}
+            external={true}
+          >
+            View in Gallery
+          </LinkButton>
+        </div>
+      )}
       <div className="buttons">
         {buttons}
       </div>

diff --git a/src/components/EventsPageError.js b/src/components/EventsPageError.js
@@ -7,7 +7,9 @@ function EventsPageError() {
   const { eventIds: rawEventIds } = useParams()
 
   const delEvent = (eventId) => {
-    const eventIds = parseEventIds(rawEventIds).filter((paramEventId) => String(paramEventId) !== String(eventId))
+    const eventIds = parseEventIds(rawEventIds).filter(
+      (paramEventId) => String(paramEventId) !== String(eventId)
+    )
     if (eventIds.length === 1) {
       navigate(`/event/${eventIds[0]}`)
     } else if (eventIds.length > 0) {

diff --git a/src/components/ExternalLink.js b/src/components/ExternalLink.js
@@ -1,9 +1,14 @@
 import { OpenNewWindow } from 'iconoir-react'
 import '../styles/external-link.css'
 
-function ExternalLink({ href, children }) {
+function ExternalLink({ href, className, children }) {
   return (
-    <a href={href} target="_blank" rel="noopener noreferrer" className="external-link">
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`external-link${className ? ` ${className}` : ''}`}
+    >
       {children ?? href}
       <OpenNewWindow className="external-link-icon" />
     </a>

diff --git a/src/components/Feedback.js b/src/components/Feedback.js
@@ -69,7 +69,9 @@ function Feedback() {
                   rows={5}
                   placeholder="What do you think?"
                 ></textarea>
-                <Button disabled={message.length < 10} onClick={handleSendFeedback}>Send Feedback</Button>
+                <Button disabled={message.length < 10} onClick={handleSendFeedback}>
+                  Send Feedback
+                </Button>
               </>
             )
           }

diff --git a/src/components/InCommon.js b/src/components/InCommon.js
@@ -16,6 +16,13 @@ import TokenImage from './TokenImage'
 import ButtonClose from './ButtonClose'
 import '../styles/in-common.css'
 
+function getColorForAddress(address) {
+  return new toColor(address, {
+    brightness: 3.25,
+    saturation: .25,
+  }).getColor().hsl.formatted
+}
+
 function InCommon({
   children,
   inCommon = {},
@@ -89,7 +96,10 @@ function InCommon({
         )
       )
       .map(
-        (address) => [address, new toColor(address, { brightness: 3.25, saturation: .25 }).getColor().hsl.formatted]
+        (address) => [
+          address,
+          getColorForAddress(address),
+        ]
       )
     )
 
@@ -120,22 +130,38 @@ function InCommon({
           owner in liRefs[eventId] &&
           liRefs[eventId][owner].current
         ) {
-          liRefs[eventId][owner].current.scrollIntoView({ behavior: 'smooth', block: 'center' })
+          liRefs[eventId][owner].current.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+          })
         }
       }
       if (
         activeEventId in liRefs &&
         owner in liRefs[activeEventId] &&
         liRefs[activeEventId][owner].current
       ) {
-        liRefs[activeEventId][owner].current.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        liRefs[activeEventId][owner].current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        })
       }
     }
-    setOwnerHighlighted((current) => current !== owner && owner in activeAdressesColors ? owner : current)
+    setOwnerHighlighted((current) => (
+      current !== owner &&
+      owner in activeAdressesColors
+        ? owner
+        : current
+    ))
   }
 
   const onOwnerLeave = (activeEventId, owner) => {
-    setOwnerHighlighted((current) => current === owner && owner in activeAdressesColors ? null : current)
+    setOwnerHighlighted((current) => (
+      current === owner &&
+      owner in activeAdressesColors
+        ? null
+        : current
+    ))
   }
 
   return (