From c7ae918563c58a6b19dc7772e3ce2e53f084189d Mon Sep 17 00:00:00 2001
From: Anaglyphic <97275120+Anaglyph-ic@users.noreply.github.com>
Date: Wed, 28 Feb 2024 15:21:36 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=92=84=20Anaverse=20integration?=
 =?UTF-8?q?=20(#386)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 src/components/header/sample_events.js       |   8 ++
 src/components/media-types/container.tsx     | 103 ++++++++++++++-----
 src/components/media-types/index.module.scss |   9 ++
 src/icons/index.js                           |   1 +
 src/icons/svgs/enter_anav.svg                |   1 +
 src/pages/objkt-display/tabs/Info.jsx        |  17 ++-
 6 files changed, 111 insertions(+), 28 deletions(-)
 create mode 100644 src/icons/svgs/enter_anav.svg

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 (
+    <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,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 (
     <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
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 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="64"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480h80q0 115 72.5 203T418-166l-58-58 56-56L598-98q-29 10-58.5 14T480-80Zm20-280v-240h120q17 0 28.5 11.5T660-560v160q0 17-11.5 28.5T620-360H500Zm-200 0v-60h100v-40h-60v-40h60v-40H300v-60h120q17 0 28.5 11.5T460-560v160q0 17-11.5 28.5T420-360H300Zm260-60h40v-120h-40v120Zm240-60q0-115-72.5-203T542-794l58 58-56 56-182-182q29-10 58.5-14t59.5-4q83 0 156 31.5T763-763q54 54 85.5 127T880-480h-80Z"/></svg>
\ 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 = () => {
           </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>