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 ( +