modelviewer comp added

package.json

@@ -13,7 +13,7 @@
   "private": true,
   "scripts": {
     "build": "yarn build:app",
-    "build:all":"yarn build:sdk && yarn build:app",
+    "build:all": "yarn build:sdk && yarn build:app",
     "build:app": "yarn workspace @luxdefi/app build",
     "build:lab": "yarn workspace @luxdefi/lab build",
     "build:sdk": "yarn workspace @luxdefi/sdk build",
@@ -84,5 +84,8 @@
   },
   "resolutions": {
     "node-hid": "./resolutions/node-hid"
+  },
+  "dependencies": {
+    "next": "^12.1.0"
   }
 }

packages/app/package.json

@@ -26,7 +26,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@netlify/plugin-nextjs": "^4.0.0-beta.7",
+    "@google/model-viewer": "^1.10.1",
+    "@netlify/plugin-nextjs": "^4.2.7",
     "@sushiswap/core": "2.0.0-canary.0",
     "@web3-react/walletlink-connector": "^6.2.7",
     "graphql": "^15.6.1",
@@ -71,7 +72,7 @@
     "@popperjs/core": "^2.9.2",
     "@ramp-network/ramp-instant-sdk": "^2.4.6",
     "@reduxjs/toolkit": "^1.6.0",
-    "@sentry/nextjs": "^6.11.0",
+    "@sentry/nextjs": "^6.18.1",
     "@sushiswap/chainlink-whitelist": "0.2.5",
     "@sushiswap/default-token-list": "15.4.0",
     "@sushiswap/limit-order-pair-list": "0.2.2",
@@ -128,7 +129,7 @@
     "polished": "^4.1.3",
     "postcss": "^8.3.6",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-preset-env": "^6.7.0",
+    "postcss-preset-env": "^7.4.2",
     "prettier": "^2.3.2",
     "qs": "^6.10.1",
     "rc-slider": "^9.7.2",

packages/app/src/components/ModelViewer/index.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState, useRef } from 'react'
+import '@google/model-viewer'
+
+const ModelViewer = ({ glb = '/models/tigerteen.glb', usdz = '', zoom = 'auto', multiple = false }) => {
+  useEffect(() => {
+    return () => {}
+  }, [])
+
+  const ModelVie = `
+      <model-viewer
+        src=${glb}
+        loading="eager"
+        alt="A 3D model of an astronaut"
+        shadow-intensity="1"
+        camera-controls
+        auto-rotate
+        autoplay
+        ar
+        ar-modes="webxr scene-viewer quick-look"
+        reveal="auto"
+        max-field-of-view=${zoom}
+        ></model-viewer>`
+
+  return (
+    <>
+      <div className="w-full h-full" dangerouslySetInnerHTML={{ __html: ModelVie }}></div>
+    </>
+  )
+}
+
+export default ModelViewer

packages/app/src/lux/AssetList.tsx

@@ -40,9 +40,14 @@ const GET_ASSETS = gql`
   }
 `
 
-const Empty = ({ empty }) => (
-  empty ? empty : <div className="py-3"><Link href="/mint">Mint and list the first.</Link></div>
-)
+const Empty = ({ empty }) =>
+  empty ? (
+    empty
+  ) : (
+    <div className="py-3">
+      <Link href="/mint">Mint and list the first.</Link>
+    </div>
+  )
 
 export type AssetListProps = {
   title: string
@@ -137,25 +142,31 @@ const AssetList = ({
     <div className={`AssetList pb-10 mb-10 border-b-gray-900 border-b-2`}>
       <div className="grid grid-cols-2 gap-5">
         <div className="text-2xl text-indigo-600">{title}</div>
-        {totalPages > 1 && <div className="flex justify-end">
-          <div
-            onClick={previousPage}
-            className={`p-2 mr-3 rounded-full cursor-pointer ${page > 1 ? 'bg-gray-700' : 'bg-gray-900 text-gray-600'}`}
-          >
-            <HiOutlineChevronLeft size={16} />
-          </div>
-          {showPageNumbers && <div className="pt-1 text-lg">
-            Page {page} of {totalPages}
-          </div>}
-          <div
-            onClick={nextPage}
-            className={`p-2 ml-3 rounded-full cursor-pointer ${
-              page < totalPages ? 'bg-gray-700' : 'bg-gray-900 text-gray-600'
-            }`}
-          >
-            <HiOutlineChevronRight size={16} />
+        {totalPages > 1 && (
+          <div className="flex justify-end">
+            <div
+              onClick={previousPage}
+              className={`p-2 mr-3 rounded-full cursor-pointer ${
+                page > 1 ? 'bg-gray-700' : 'bg-gray-900 text-gray-600'
+              }`}
+            >
+              <HiOutlineChevronLeft size={16} />
+            </div>
+            {showPageNumbers && (
+              <div className="pt-1 text-lg">
+                Page {page} of {totalPages}
+              </div>
+            )}
+            <div
+              onClick={nextPage}
+              className={`p-2 ml-3 rounded-full cursor-pointer ${
+                page < totalPages ? 'bg-gray-700' : 'bg-gray-900 text-gray-600'
+              }`}
+            >
+              <HiOutlineChevronRight size={16} />
+            </div>
           </div>
-        </div>}
+        )}
       </div>
       {assets.length > 0 ? (
         <div className={`grid grid-cols-1 gap-5 md:grid-cols-${cols || 6}`}>

packages/app/src/lux/AssetSale.tsx

@@ -7,10 +7,14 @@ import { useActiveWeb3React, useContract } from '../hooks'
 import { EyeIcon } from '@heroicons/react/solid'
 import { shortenAddress } from '../functions'
 import TimeAgo from 'react-timeago'
-
+import dynamic from 'next/dynamic'
+const ModelViewer = dynamic(() => import('../components/ModelViewer'), {
+  ssr: false,
+})
 export type AssetSaleProps = {
   dropId: number | string
   name: string
+  glb: string
   contentURI: string
   metadataURI: string
   ask?: Ask
@@ -28,12 +32,13 @@ export type AssetSaleProps = {
   large?: boolean
   getUsdAmount?: (tokenAddress: string, tokenAmount: BigintIsh) => string
   onClickBid?: (bid: GraphBid) => void
-  onClickTokenType?: (name: string) => void
+  onClickTokenType?: (name: string, glb: string) => void
 } & React.HTMLAttributes<HTMLDivElement>
 
 const AssetSale = (props: AssetSaleProps) => {
   const { account } = useActiveWeb3React()
-  const { ask, highest, dropId, name, showPrice, formattedAmount, usdAmount, symbol, getUsdAmount, isOwner } = props
+  const { ask, highest, dropId, name, showPrice, formattedAmount, usdAmount, symbol, getUsdAmount, isOwner, glb } =
+    props
 
   const { minted, supply } = useTokenType(dropId, name)
   const [bid, setBid] = useState(null)
@@ -51,30 +56,27 @@ const AssetSale = (props: AssetSaleProps) => {
     props.onClickBid && props.onClickBid(bid as any)
   }
 
-  // useEffect(() => {
-
-  //   console.log('props.name', props.name)
-
-  //   const getTokenType = async () => {
-  //     if (props.name) {
-  //       setTokenType(await drop?.getTokenType(props.name))
-  //     } else {
-  //       setTokenType(null)
-  //     }
-  //   }
-  //   getTokenType()
-  // }, [props.name])
+  useEffect(() => {
+    // console.log('props.name', props.name)
+    // const getTokenType = async () => {
+    //   if (props.name) {
+    //     setTokenType(await drop?.getTokenType(props.name))
+    //   } else {
+    //     setTokenType(null)
+    //   }
+    // }
+    // getTokenType()
+  }, [])
 
   return (
     <div
       className={`AssetSale ${props.className || ''} ${props.onClickTokenType ? 'cursor-pointer' : ''}`}
-      onClick={() => props.onClickTokenType && props.onClickTokenType(props.name)}
+      onClick={() => props.onClickTokenType && props.onClickTokenType(props.name, props.glb)}
     >
-      {props.large && video ? (
-        <Player url={video} playing={true} loop width={'auto'} height={'auto'} style={{ height: 'auto' }} />
-      ) : (
-        image && <img src={image} alt={`${type} ${dropId}-${name}`} />
-      )}
+      <div className={props.large ? 'h-[300px] w-full' : 'h-[300px] w-[300px]'}>
+        <ModelViewer glb={glb}></ModelViewer>
+      </div>
+
       <div className={`w-full pb-5 text-center backdrop-filter backdrop-opacity video-overlay`}>
         <div>
           <span className="text-lg text-gray-300">{given_name || name}</span>

packages/app/src/lux/AssetSaleModal.tsx

@@ -53,7 +53,16 @@ const AssetModal = (props: any) => {
 
   useEffect(() => {
     setTokenTypeName(tokenTypeName)
+
+    console.log('token name', tokenTypeName)
+
+    console.log('router.pathname', router.pathname)
+    console.log('router.query', router.query)
+    console.log('router.aspath', router.asPath)
+
     if (tokenTypeName) {
+      console.log('token name', tokenTypeName)
+
       props.openModal && props.openModal(assetModalRef, { id: tokenTypeName })
     }
   }, [tokenTypeName])
@@ -77,13 +86,14 @@ const AssetModal = (props: any) => {
           <div className="">
             <div
               onClick={onClose}
-              className="flex items-center justify-center mt-5 ml-5 bg-gray-800 rounded-full shadow-2xl cursor-pointer md:absolute h-14 w-14"
+              className="flex items-center justify-center mt-5 ml-5 rounded-full shadow-2xl cursor-pointer md:absolute h-14 w-14"
             >
               <HiOutlineChevronLeft />
             </div>
-            <div className="flex items-stretch md:h-screen">
+            <div className="flex items-stretch md:h-screen ">
               <div className="self-center m-auto w-96">
                 <AssetSale
+                  glb={router.asPath}
                   ask={ask}
                   dropId={DROP_ID}
                   name={tokenTypeName as string}