Merge pull request #290 from poap-xyz/release/v1.13.14

Release v1.13.14
poap-xyz · May 21, 2024 · 1a45837 · 1a45837
2 parents 9014aa0 + 4b30bc3
commit 1a45837
Show file tree

Hide file tree

Showing 35 changed files with 762 additions and 586 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@poap-xyz/poap-family",
-  "version": "1.13.13",
+  "version": "1.13.14",
   "author": {
     "name": "POAP",
     "url": "https://poap.xyz"

diff --git a/src/components/AddressProfile.js b/src/components/AddressProfile.js
@@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from 'react'
 import { LazyImage } from 'react-lazy-images'
 import { clsx } from 'clsx'
 import { formatMonthYear } from 'utils/date'
-import { POAP_SCAN_URL, findInitialPOAPDate } from 'models/poap'
+import { findInitialPOAPDate } from 'models/poap'
 import { DropProps } from 'models/drop'
 import {
   INCOMMON_ADDRESSES_LIMIT,
@@ -12,7 +12,7 @@ import {
 import { POAP_PROFILE_LIMIT } from 'models/poap'
 import { ResolverEnsContext, ReverseEnsContext } from 'stores/ethereum'
 import { scanAddress } from 'loaders/poap'
-import ExternalLink from 'components/ExternalLink'
+import LinkToScan from 'components/LinkToScan'
 import AddressesList from 'components/AddressesList'
 import TokenImage from 'components/TokenImage'
 import ButtonLink from 'components/ButtonLink'
@@ -183,13 +183,7 @@ function AddressProfile({
               )}
             />
           )}
-          <ExternalLink
-            className="profile-address"
-            href={`${POAP_SCAN_URL}/${address}`}
-            title={`Scan ${address in ensNames ? ensNames[address] : address}`}
-          >
-            <code>{address}</code>
-          </ExternalLink>
+          <LinkToScan className="profile-address" address={address} />
           {address in ensNames && (
             <big className="profile-ens">{ensNames[address]}</big>
           )}

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -20,6 +20,7 @@ function Button({
       className={clsx('button', {
         active,
         disabled,
+        primary: !secondary,
         secondary,
         borderless,
       })}

diff --git a/src/components/ButtonAddressProfile.js b/src/components/ButtonAddressProfile.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import { useContext, useState } from 'react'
-import ReactModal from 'react-modal'
 import { ReverseEnsContext } from 'stores/ethereum'
 import { DropProps } from 'models/drop'
+import Modal from 'components/Modal'
 import Card from 'components/Card'
 import ButtonClose from 'components/ButtonClose'
 import ButtonLink from 'components/ButtonLink'
@@ -36,15 +36,12 @@ function ButtonAddressProfile({
           : <code>{address}</code>
         }
       </ButtonLink>
-      <ReactModal
-        isOpen={showModal}
-        onRequestClose={() => setShowModal(false)}
-        shouldCloseOnEsc={true}
-        shouldCloseOnOverlayClick={true}
-        contentLabel={address in ensNames ? ensNames[address] : address}
-        className="button-address-profile-modal"
+      <Modal
+        show={showModal}
+        onClose={() => setShowModal(false)}
+        title={address in ensNames ? ensNames[address] : address}
       >
-        <div className="button-address-profile-container">
+        <div className="button-address-profile-modal">
           <Card>
             <ButtonClose onClose={() => setShowModal(false)} />
             <AddressProfile
@@ -55,7 +52,7 @@ function ButtonAddressProfile({
             />
           </Card>
         </div>
-      </ReactModal>
+      </Modal>
     </>
   )
 }

diff --git a/src/components/CachedEventList.js b/src/components/CachedEventList.js
@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { CachedEventProps } from 'models/api'
 import Timestamp from 'components/Timestamp'
-import ButtonLink from 'components/ButtonLink'
-import TokenImage from 'components/TokenImage'
-import 'styles/cached-drops.css'
+import TokenImageZoom from 'components/TokenImageZoom'
+import 'styles/cached-event-list.css'
 
 /**
  * @param {PropTypes.InferProps<CachedEventList.propTypes>} props
@@ -15,48 +14,67 @@ function CachedEventList({
   tokenImageSize = 48,
   showCachedTs = true,
   showInCommonCount = true,
-  showClear = true,
-  onClear =
-    /**
-     * @param {number} eventId
-     */
-    (eventId) => {},
 }) {
+  const navigate = useNavigate()
+
   return (
-    <ul className="cached-drops" style={{ maxHeight: maxHeight ?? undefined }}>
+    <ul className="cached-event-list" style={{ maxHeight: maxHeight ?? undefined }}>
       {cachedEvents.map((cachedEvent, index) =>
-        <li key={`${cachedEvent.id}-${index}`}>
-          <div className="cached-drop">
-            <div className="cached-poap-image">
-              <Link to={`/event/${cachedEvent.id}`}>
-                <TokenImage event={cachedEvent} size={tokenImageSize} />
+        <li
+          key={`${cachedEvent.id}-${index}`}
+          onClick={(event) => {
+            /**
+             * @type {HTMLElement | null}
+             */
+            // @ts-ignore
+            let target = event.target
+            while (
+              target != null &&
+              target.nodeName !== 'A' &&
+              target.nodeName !== 'BUTTON' &&
+              target.nodeName !== 'LI'
+            ) {
+              target = target.parentElement
+            }
+            if (target != null && target.nodeName === 'LI') {
+              navigate(`/event/${cachedEvent.id}`)
+            }
+          }}
+        >
+          <div className="cached-event">
+            <div className="cached-event-card">
+              <TokenImageZoom
+                event={cachedEvent}
+                zoomSize={512}
+                size={tokenImageSize}
+              />
+              <Link
+                to={`/event/${cachedEvent.id}`}
+                className="event-id"
+              >
+                #{cachedEvent.id}
               </Link>
             </div>
-            <div className="info">
-              <div className="name">
-                <h4 title={cachedEvent.name}>{cachedEvent.name}</h4>
-                {showClear && (
-                  <ButtonLink
-                    onClick={() => onClear != null && onClear(cachedEvent.id)}
-                  >
-                    clear
-                  </ButtonLink>
-                )}
-              </div>
-              <div className="sub-info">
-                {showCachedTs &&
-                  <p className="cached right">
-                    Cached <Timestamp ts={cachedEvent.cached_ts} />
-                  </p>}
-                {showInCommonCount &&
-                  <p>
-                    <span className="in-common-count">
-                      {cachedEvent.in_common_count}
-                    </span>
-                    {' '}
-                    <Link to={`/event/${cachedEvent.id}`}>in common</Link>
-                  </p>}
-              </div>
+            <div className="cached-event-info">
+              <h4 title={cachedEvent.name}>{cachedEvent.name}</h4>
+              {(showCachedTs || showInCommonCount) && (
+                <div className="cached-event-data">
+                  {showCachedTs && (
+                    <div className="cached-ts">
+                      Cached <Timestamp ts={cachedEvent.cached_ts} />
+                    </div>
+                  )}
+                  {showInCommonCount && (
+                    <div>
+                      <span className="in-common-count">
+                        {cachedEvent.in_common_count}
+                      </span>
+                      {' '}
+                      in common
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         </li>
@@ -73,8 +91,6 @@ CachedEventList.propTypes = {
   tokenImageSize: PropTypes.number,
   showCachedTs: PropTypes.bool,
   showInCommonCount: PropTypes.bool,
-  showClear: PropTypes.bool,
-  onClear: PropTypes.func,
 }
 
 export default CachedEventList
diff --git a/src/components/EventInfo.js b/src/components/EventInfo.js
@@ -18,7 +18,7 @@ import 'styles/event-info.css'
  */
 function EventInfo({
   event,
-  stats = {},
+  stats,
   highlightStat,
   buttons = [],
   children,

diff --git a/src/components/LastEvents.js b/src/components/LastEvents.js
@@ -174,7 +174,6 @@ function LastEvents({
         {cachedEvents.length > 0 && !loading && (
           <CachedEventList
             cachedEvents={cachedEvents}
-            showClear={false}
           />
         )}
         {error && !loading &&

diff --git a/src/components/Modal.js b/src/components/Modal.js
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import ReactModal from 'react-modal'
+import 'styles/modal.css'
+
+/**
+ * @param {PropTypes.InferProps<Modal.propTypes>} props
+ */
+function Modal({ show, onClose, children, title }) {
+  return (
+    <ReactModal
+      isOpen={show}
+      onRequestClose={() => onClose()}
+      shouldCloseOnEsc={true}
+      shouldCloseOnOverlayClick={true}
+      contentLabel={title}
+      className="modal"
+      overlayClassName="overlay"
+    >
+      {children}
+    </ReactModal>
+  )
+}
+
+Modal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string,
+}
+
+export default Modal