diff --git a/src/components/header/sample_events.js b/src/components/header/sample_events.js index 016f8d7ae..6f97f1638 100644 --- a/src/components/header/sample_events.js +++ b/src/components/header/sample_events.js @@ -1,5 +1,13 @@ // DEV SAMPLES export const sample_events = [ + { + title: 'Anaverse Integration', + icon: '🖼️', + link: 'https://blog.teia.art/blog/anaverse-integration-announcement', + subtitle: 'new feature', + content: + 'Teia just received a nice little new feature: 3D previews for your NFTs! This new addition allows you to experience your tokens in a immersive genertive 3D space.', + }, { title: 'Tez4Pal', icon: '🇵🇸', diff --git a/src/components/media-types/container.tsx b/src/components/media-types/container.tsx index 5f21a8d9a..7a1d7f7d2 100644 --- a/src/components/media-types/container.tsx +++ b/src/components/media-types/container.tsx @@ -6,10 +6,11 @@ import classnames from 'classnames' import { iOS } from '@utils/os' import styles from '@style' import './style.css' -import { FullScreenEnterIcon, FullScreenExitIcon } from '@icons' +import { FullScreenEnterIcon, FullScreenExitIcon, EnterAnav } from '@icons' import { NFT } from '@types' import { Button } from '@atoms/button' -import { MIMETYPE } from '@constants' +import { HEN_CONTRACT_FA2, MIMETYPE } from '@constants' +import { useUserStore } from '@context/userStore' /** * Currently fullscreen is disabled on iOS @@ -17,10 +18,37 @@ import { MIMETYPE } from '@constants' */ /** - * This component handles fullscreen mode - * and inView prop for lazy loading -y* + * This component handles + * - fullscreen mode + * - inView prop for lazy loading + * - the Anaverse viewer + * **/ + +/** + * Builds the anaverse URL + */ +const getAnaverseUrl = (tokenId: string, viewer_address?: string) => { + return viewer_address + ? `https://anaver.se/?gallery=1&loadsingle=1&singlecontract=${HEN_CONTRACT_FA2}&singletokenid=${tokenId}&wallet=${viewer_address}&partnerPlatform=teia.art` + : `https://anaver.se/?gallery=1&loadsingle=1&singlecontract=${HEN_CONTRACT_FA2}&singletokenid=${tokenId}&partnerPlatform=teia.art` +} + +/** + * iFrame wrapper of Anaverse + */ +const AnaverseViewer = (tokenId: string, address?: string) => { + const url = getAnaverseUrl(tokenId, address) + return ( + + ) +} + export const Container = ({ nft, children, @@ -32,6 +60,7 @@ export const Container = ({ }) => { const domElement = useRef(null) const [fullscreen, setFullscreen] = useState() + const [inAnaverse, setInAnaverse] = useState() const { ref, inView } = useInView({ threshold: 0, @@ -95,7 +124,8 @@ export const Container = ({ [styles.flex]: displayView, [styles.feed]: !displayView, }) - + const viewer_address = useUserStore((st) => st.address) + const anaverseView = AnaverseViewer(nft.token_id, viewer_address) const childrenWithProps = React.Children.map(children, (child) => { if (React.isValidElement(child)) { return React.cloneElement(child, { inView, displayView }) @@ -103,28 +133,51 @@ export const Container = ({ return child }) + const toggleAnaverse = () => { + const isChromium = !!window.chrome + if (isChromium) { + setInAnaverse(!inAnaverse) + } else { + window.open(getAnaverseUrl(nft.token_id, viewer_address), '_blank') + } + } + return ( - {childrenWithProps} - - {displayView && !iOS && !nofullscreen && ( - - {fullscreen ? ( - - ) : ( - - )} - - )} + {inAnaverse ? anaverseView : childrenWithProps} + + + {displayView && !iOS && !nofullscreen && ( + + {fullscreen ? ( + + ) : ( + + )} + + )} + + {displayView && !iOS && !nofullscreen && ( + + {} + + )} + ) diff --git a/src/components/media-types/index.module.scss b/src/components/media-types/index.module.scss index 1de60825d..f33594307 100644 --- a/src/components/media-types/index.module.scss +++ b/src/components/media-types/index.module.scss @@ -10,6 +10,15 @@ max-height: calc($max-token-height + 20vh); } +.anaverse_view { + min-height: 300px; + max-width: 100%; + width: var(--max-width-internal); + height: $max-token-height; + margin: 0 auto; + border: none; +} + .container { /* FOR DEBUG (keep) */ /*background-color: var(--gray-10);*/ diff --git a/src/icons/index.js b/src/icons/index.js index d30ad9eb7..261a8eded 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -210,6 +210,7 @@ export { ReactComponent as PauseIcon } from './svgs/pause.svg' export { ReactComponent as CloseIcon } from './svgs/close.svg' export { ReactComponent as FullScreenEnterIcon } from './svgs/fullscreen_enter.svg' export { ReactComponent as FullScreenExitIcon } from './svgs/fullscreen_exit.svg' +export { ReactComponent as EnterAnav } from './svgs/enter_anav.svg' // SVGs Extras export { ReactComponent as DAOIcon } from './svgs/teia-dao.svg' diff --git a/src/icons/svgs/enter_anav.svg b/src/icons/svgs/enter_anav.svg new file mode 100644 index 000000000..7d3cb3897 --- /dev/null +++ b/src/icons/svgs/enter_anav.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/objkt-display/tabs/Info.jsx b/src/pages/objkt-display/tabs/Info.jsx index 7074fb153..03567c9af 100644 --- a/src/pages/objkt-display/tabs/Info.jsx +++ b/src/pages/objkt-display/tabs/Info.jsx @@ -3,7 +3,7 @@ import { Tags } from '@components/tags' import styles from '@style' import '../style.css' import { HashToURL } from '@utils' -import { LANGUAGES, LICENSE_TYPES } from '@constants' +import { HEN_CONTRACT_FA2, LANGUAGES, LICENSE_TYPES } from '@constants' import { getWordDate } from '@utils/time' import { Line } from '@atoms/line' import { useObjktDisplayContext } from '..' @@ -26,6 +26,9 @@ export const Info = () => { `/?creator=${nft.artist_address}&viewer=${viewer_address || ''}&objkt=${ nft.token_id }` + const artifact_anaverse_url = viewer_address + ? `https://anaver.se/?gallery=1&loadsingle=1&singlecontract=${HEN_CONTRACT_FA2}&singletokenid=${nft.token_id}&wallet=${viewer_address}&partnerPlatform=teia.art` + : `https://anaver.se/?gallery=1&loadsingle=1&singlecontract=${HEN_CONTRACT_FA2}&singletokenid=${nft.token_id}&partnerPlatform=teia.art` const metadata_ipfs_url = HashToURL(nft.metadata_uri) return ( <> @@ -91,9 +94,17 @@ export const Info = () => { - Metadata + + Metadata + {' // '} - View on ipfs + + View on ipfs + + {' // '} + + View on anaverse +