diff --git a/src/assets/images/prysm.svg b/src/assets/images/prysm.svg new file mode 100644 index 0000000..d4df7b9 --- /dev/null +++ b/src/assets/images/prysm.svg @@ -0,0 +1,326 @@ + + + + diff --git a/src/pages/event.js b/src/pages/event.js index d111759..4450d5d 100644 --- a/src/pages/event.js +++ b/src/pages/event.js @@ -18,7 +18,7 @@ import { EventCard } from '../components/eventCard'; import { Foliage } from '../components/foliage'; import {dateCell, shrinkAddress, utcDateFormatted, utcDateFull} from '../utilities/utilities'; import { useWindowWidth } from '@react-hook/window-size/throttled'; -import OpenLink from '../assets/images/openLink.svg' +import Prysm from '../assets/images/prysm.svg'; import {POAP_APP_URL, PRYSM_APP_URL} from "../store/api"; import {Spinner} from "../components/spinner"; @@ -249,6 +249,51 @@ export function Event() { ) } +function ExternalIconCell({url, tooltipText = null, content}) { + const [isHovering, setIsHovering] = useState(false) + const [isHoveringLink, setIsHoveringLink] = useState(false) + + let hoverDeactivateTimeout = null; + let hoverLinkDeactivateTimeout = null; + useEffect(()=>{ + return () => { + // Clear timeouts on unmount + clearTimeout(hoverDeactivateTimeout) + clearTimeout(hoverLinkDeactivateTimeout) + } + }) + return ( + {setIsHovering(true)}} + onMouseLeave={() => {hoverDeactivateTimeout = setTimeout(() => { + if (!isHoveringLink) setIsHovering(false) + }, 500)}} + style={{position: 'relative', width: 27}} + > + + {'Open + + + { + isHovering && + <>
{clearTimeout(hoverDeactivateTimeout); clearTimeout(hoverLinkDeactivateTimeout); setIsHoveringLink(true)}} + onMouseLeave={() => {hoverLinkDeactivateTimeout = setTimeout(() => { + setIsHoveringLink(false) + setIsHovering(false) + }, 500)}} + > +
} + + ); +} + function ExternalLinkCell({url, tooltipText = null, content}) { const [isHovering, setIsHovering] = useState(false) const [isHoveringLink, setIsHoveringLink] = useState(false) @@ -284,7 +329,6 @@ function ExternalLinkCell({url, tooltipText = null, content}) { setIsHovering(false) }, 500)}} > - {'Open } ); @@ -294,15 +338,19 @@ function TableContainer({tokens, ensNames, pageCount: pc, loading}) { const [data, setData] = useState([]); const [mobileData, setMobileData] = useState([]); - const ScanLink = (token) => { + const PrysmScanLink = (token) => { return (`${PRYSM_APP_URL}/profile/${token.owner.id}/achievements`); }; + const PoapScanLink = (token) => { + return (`${POAP_APP_URL}/scan/${token.owner.id}`); + }; + const MobileRow = ({token, address}) => (
POAP ID#{token.id} Address - {shrinkAddress(address, 15)} + {shrinkAddress(address, 15)} Claim Date{utcDateFormatted(token.created * 1000)} Transaction Count{token.transferCount} Power{token.owner.tokensOwned} @@ -350,7 +398,7 @@ function TableContainer({tokens, ensNames, pageCount: pc, loading}) { for (let i = 0; i < tokens.length; i++) { _data.push({ col1: () , - col2: (), + col2: (
), col3: tokens[i].created * 1000, col4: tokens[i].transferCount, col5: tokens[i].owner.tokensOwned, @@ -373,7 +421,7 @@ function TableContainer({tokens, ensNames, pageCount: pc, loading}) { let validName = ensNames[i] if (validName) { if (data[i]) { - _data[i].col2 = ( {validName}) + _data[i].col2 = (
{validName}
) _mobileData[i].col1 = } }