feat: 💄 Anaverse integration (#386)

* Update container.tsx Add anav button * Update index.js add link to anav svg * Add files via upload * Update container.tsx var -> let * fix: 🔀 reactify * fix: 🎨 use fullname for anaverse * feat: 💄 add open in anaverse button * fix: 🚑 use absolute units * feat: 💄 passdown the viewer address to anaverse * fix: 🦊 on FF navigate instead of iframe * fix: 🦊 use window.chrome for the check also reorder the condition (it was the opposite) * refactor: 💄 not not * fix 🐛: typo remove extra & char * feat ⚡: add event linking to blogpost --------- Co-authored-by: melMass <mel@melmassadian.com> Co-authored-by: Mel Massadian <melmassadian@gmail.com>
teia-community · Feb 28, 2024 · c7ae918 · c7ae918
1 parent 1dbff3e
commit c7ae918
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 28 deletions.
diff --git 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
@@ -6,21 +6,49 @@ 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
  * this is mainly because Safari iOS doesn't support fullscreen api.
  */
 
 /**
- * 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 (
+    <iframe
+      className={styles.anaverse_view}
+      title={`#${tokenId} inside Anaverse`}
+      id="anavIframe"
+      src={url}
+    />
+  )
+}
+
 export const Container = ({
   nft,
   children,
@@ -32,6 +60,7 @@ export const Container = ({
 }) => {
   const domElement = useRef<HTMLDivElement>(null)
   const [fullscreen, setFullscreen] = useState<boolean>()
+  const [inAnaverse, setInAnaverse] = useState<boolean>()
 
   const { ref, inView } = useInView({
     threshold: 0,
@@ -95,36 +124,60 @@ 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 })
     }
     return child
   })
 
+  const toggleAnaverse = () => {
+    const isChromium = !!window.chrome
+    if (isChromium) {
+      setInAnaverse(!inAnaverse)
+    } else {
+      window.open(getAnaverseUrl(nft.token_id, viewer_address), '_blank')
+    }
+  }
+
   return (
     <div ref={ref}>
       <div ref={domElement} className={classes}>
-        {childrenWithProps}
-
-        {displayView && !iOS && !nofullscreen && (
-          <Button
-            alt={'Fullscreen Button'}
-            className={
-              styles.icon +
-              ' svg-icon ' +
-              (fullscreen ? styles.icon_fullscreen : '')
-            }
-            onClick={toggleFullScreen}
-          >
-            {fullscreen ? (
-              <FullScreenEnterIcon width={32} />
-            ) : (
-              <FullScreenExitIcon width={32} />
-            )}
-          </Button>
-        )}
+        {inAnaverse ? anaverseView : childrenWithProps}
+
+        <div style={{ display: 'flex' }}>
+          {displayView && !iOS && !nofullscreen && (
+            <Button
+              alt={'Fullscreen Button'}
+              className={
+                styles.icon +
+                ' svg-icon ' +
+                (fullscreen ? styles.icon_fullscreen : '')
+              }
+              onClick={toggleFullScreen}
+            >
+              {fullscreen ? (
+                <FullScreenEnterIcon width={32} />
+              ) : (
+                <FullScreenExitIcon width={32} />
+              )}
+            </Button>
+          )}
+
+          {displayView && !iOS && !nofullscreen && (
+            <Button
+              // TODO: Add a proper "tooltip" for buttons
+              title={'Show in Anaverse'}
+              alt={'Anaverse Button'}
+              className={styles.icon + ' svg-icon '}
+              onClick={toggleAnaverse}
+            >
+              {<EnterAnav width={32} />}
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   )

diff --git 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
@@ -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
diff --git 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 = () => {
           </div>
 
           <div className={styles.info_ipfs}>
-            <a href={metadata_ipfs_url}>Metadata</a>
+            <a target="_blank" rel="noreferrer" href={metadata_ipfs_url}>
+              Metadata
+            </a>
             {' // '}
-            <a href={artifact_ipfs_url}>View on ipfs</a>
+            <a target="_blank" rel="noreferrer" href={artifact_ipfs_url}>
+              View on ipfs
+            </a>
+            {' // '}
+            <a target="_blank" rel="noreferrer" href={artifact_anaverse_url}>
+              View on anaverse
+            </a>
           </div>
         </div>
       </Container>