New NFTE component and hooks update

.github/workflows/test.yml

@@ -16,3 +16,15 @@ jobs:
               run: |
                   yarn install
                   yarn test
+    test-hooks:
+        runs-on: macos-latest
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v2
+              with:
+                  node-version: '15'
+            - name: 'Test hooks'
+              working-directory: ./packages/hooks
+              run: |
+                  yarn install
+                  yarn test

examples/frontend/package.json

@@ -8,8 +8,8 @@
         "start": "next start"
     },
     "dependencies": {
-        "@cura/components": "0.0.12",
-        "@cura/hooks": "0.0.4",
+        "@cura/components": "0.0.14",
+        "@cura/hooks": "0.0.6",
         "@runwayml/hosted-models": "^0.3.0",
         "@theme-ui/color": "^0.8.4",
         "@theme-ui/match-media": "^0.6.0",

examples/frontend/pages/cc/[project]/[id].tsx

@@ -5,15 +5,14 @@ import { Button, Text } from 'theme-ui'
 import { utils } from 'near-api-js'
 import { useRouter } from 'next/router'
 import Layout from '../../../containers/Layout'
-import { Bidders, RenderIframe, CreatorShare } from '@cura/components'
+import { Bidders, CreatorShare, MediaObject } from '@cura/components'
 import { alertMessageState, indexLoaderState } from '../../../state/recoil'
 import { useSetRecoilState } from 'recoil'
 import { mapPathToProject } from 'utils/path-to-project'
 import { getFrameWidth } from 'utils/frame-width'
 import { useNFTContract, useNFTMethod, useMarketMethod } from '@cura/hooks'
 import { useStatusUpdate } from 'utils/hooks-helpers'
 
-const CONTRACT_VIEW_GAS = utils.format.parseNearAmount('0.00000000010') // 100 Tgas
 const CONTRACT_BURN_GAS = utils.format.parseNearAmount('0.00000000029') // 290 Tgas
 const MARKET_ACCEPT_BID_GAS = utils.format.parseNearAmount('0.00000000025') // 250 Tgas
 const YOCTO_NEAR = utils.format.parseNearAmount('0.000000000000000000000001')
@@ -39,7 +38,7 @@ const CCProjectID = ({}) => {
             token_id: router.query.id,
             limit: 2,
         },
-        CONTRACT_VIEW_GAS,
+        undefined,
         updateStatus
     )
 
@@ -107,9 +106,10 @@ const CCProjectID = ({}) => {
                     }}
                 >
                     {media && (
-                        <RenderIframe
+                        <MediaObject
                             mediaURI={`https://arweave.net/${media.metadata.media}`}
                             width={frameDimension}
+                            height={frameDimension}
                         />
                     )}
                 </div>

examples/frontend/pages/cc/[project]/create.tsx

@@ -6,7 +6,7 @@ import { utils } from 'near-api-js'
 import { useRouter } from 'next/router'
 import Layout from '../../../containers/Layout'
 
-import { CreatorShare, RenderIframe } from '@cura/components'
+import { CreatorShare } from '@cura/components'
 import { alertMessageState, indexLoaderState } from '../../../state/recoil'
 import { useSetRecoilState } from 'recoil'
 import { useNFTContract } from '@cura/hooks'
@@ -136,10 +136,13 @@ const MLProjectCreate = ({}) => {
                     }}
                 >
                     {creativeCode && (
-                        <RenderIframe
-                            code={creativeCode}
+                        <iframe
+                            srcDoc={creativeCode}
                             width={frameDimension}
-                        ></RenderIframe>
+                            height={frameDimension}
+                            frameBorder="0"
+                            scrolling="no"
+                        ></iframe>
                     )}
                 </div>
                 <div

examples/frontend/pages/cc/[project]/explore.tsx

@@ -10,7 +10,7 @@ import {
     BidCreate,
     Metadata,
     CreatorShare,
-    RenderIframe,
+    MediaObject,
 } from '@cura/components'
 import { alertMessageState, indexLoaderState } from '../../../state/recoil'
 import { useSetRecoilState } from 'recoil'
@@ -128,9 +128,10 @@ const Explore = ({}) => {
                     }}
                 >
                     {randomDesign?.metadata?.media && (
-                        <RenderIframe
+                        <MediaObject
                             mediaURI={`https://arweave.net/${randomDesign?.metadata.media}`}
                             width={frameDimension}
+                            height={frameDimension}
                         />
                     )}
                 </div>
@@ -141,10 +142,7 @@ const Explore = ({}) => {
                         alignItems: 'center',
                     }}
                 >
-                    <Metadata
-                        title={randomDesign?.id}
-                        creator={randomDesign?.owner_id}
-                    />
+                    <Metadata data={randomDesign} loading={false} />
                 </div>
                 <div
                     sx={{

examples/frontend/pages/cc/[project]/index.tsx

@@ -7,7 +7,7 @@ import Layout from '../../../containers/Layout'
 import { useNFTMethod, useNearHooksContainer } from '@cura/hooks'
 import Link from 'next/link'
 import { mapPathToProject } from 'utils/path-to-project'
-import { RenderIframe } from '@cura/components'
+import { MediaObject } from '@cura/components'
 import { getFrameWidth } from 'utils/frame-width'
 import { useStatusUpdate } from 'utils/hooks-helpers'
 
@@ -77,9 +77,10 @@ const CCProject = ({}) => {
                                             }}
                                         >
                                             {metadata?.media && (
-                                                <RenderIframe
+                                                <MediaObject
                                                     mediaURI={`https://arweave.net/${metadata.media}`}
                                                     width={frameDimension}
+                                                    height={frameDimension}
                                                 />
                                             )}
                                         </div>

examples/frontend/pages/ml/[project]/[id].tsx

@@ -6,15 +6,13 @@ import { Button, Flex, Box, Text } from 'theme-ui'
 import { utils } from 'near-api-js'
 import { useRouter } from 'next/router'
 import Layout from '../../../containers/Layout'
-import { CreatorShare } from '@cura/components'
-import { Bidders } from '@cura/components'
+import { CreatorShare, Bidders, MediaObject } from '@cura/components'
 import { alertMessageState, indexLoaderState } from '../../../state/recoil'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { useNFTContract, useNFTMethod, useMarketMethod } from '@cura/hooks'
 import { accountState } from 'state/account'
 import { getFrameWidth } from 'utils/frame-width'
 import { useStatusUpdate } from 'utils/hooks-helpers'
-const CONTRACT_VIEW_GAS = utils.format.parseNearAmount('0.00000000010') // 100 Tgas
 const CONTRACT_BURN_GAS = utils.format.parseNearAmount('0.00000000029') // 290 Tgas
 const MARKET_ACCEPT_BID_GAS = utils.format.parseNearAmount('0.00000000025') // 250 Tgas
 const YOCTO_NEAR = utils.format.parseNearAmount('0.000000000000000000000001')
@@ -42,7 +40,7 @@ const MLProject = ({}) => {
             token_id: router.query.id,
             limit: 2,
         },
-        CONTRACT_VIEW_GAS,
+        null,
         updateStatus
     )
 
@@ -110,9 +108,10 @@ const MLProject = ({}) => {
                     }}
                 >
                     {media && (
-                        <img
-                            src={`https://arweave.net/${media.metadata.media}`}
+                        <MediaObject
+                            mediaURI={`https://arweave.net/${media.metadata.media}`}
                             width={frameDimension}
+                            height={frameDimension}
                         />
                     )}
                 </div>

examples/frontend/pages/ml/[project]/create.tsx

@@ -6,7 +6,7 @@ import { utils } from 'near-api-js'
 import { useRouter } from 'next/router'
 import Layout from '../../../containers/Layout'
 import { HostedModel } from '@runwayml/hosted-models'
-import { CreatorShare } from '@cura/components'
+import { CreatorShare, MediaObject } from '@cura/components'
 import { alertMessageState, indexLoaderState } from '../../../state/recoil'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { useNFTContract } from '@cura/hooks'
@@ -170,7 +170,7 @@ const MLProjectCreate = ({}) => {
                         width: frameDimension,
                     }}
                 >
-                    <img src={media} width={frameDimension} />
+                    <MediaObject mediaURI={media} width={frameDimension} />
                 </div>
                 <div
                     sx={{

examples/frontend/pages/ml/[project]/explore.tsx

@@ -6,7 +6,12 @@ import { Button, Divider } from 'theme-ui'
 import { utils } from 'near-api-js'
 import { useRouter } from 'next/router'
 import Layout from '../../../containers/Layout'
-import { BidCreate, Metadata, CreatorShare } from '@cura/components'
+import {
+    BidCreate,
+    Metadata,
+    CreatorShare,
+    MediaObject,
+} from '@cura/components'
 import { alertMessageState, indexLoaderState } from '../../../state/recoil'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import {
@@ -125,9 +130,10 @@ const Explore = ({}) => {
                     }}
                 >
                     {randomDesign?.metadata.media && (
-                        <img
-                            src={`https://arweave.net/${randomDesign?.metadata.media}`}
+                        <MediaObject
+                            mediaURI={`https://arweave.net/${randomDesign?.metadata.media}`}
                             width={frameDimension}
+                            height={frameDimension}
                         />
                     )}
                 </div>
@@ -138,10 +144,7 @@ const Explore = ({}) => {
                         alignItems: 'center',
                     }}
                 >
-                    <Metadata
-                        title={randomDesign?.id}
-                        creator={randomDesign?.owner_id}
-                    />
+                    <Metadata data={randomDesign} loading={false} />
                 </div>
                 <div
                     sx={{

examples/frontend/pages/ml/[project]/index.tsx

@@ -8,6 +8,7 @@ import { useNFTMethod, useNearHooksContainer } from '@cura/hooks'
 import Link from 'next/link'
 import { getFrameWidth } from 'utils/frame-width'
 import { useStatusUpdate } from 'utils/hooks-helpers'
+import { MediaObject } from '@cura/components'
 
 const CONTRACT_VIEW_GAS = utils.format.parseNearAmount('0.00000000010') // 100 Tgas
 
@@ -56,9 +57,10 @@ const MLProject = ({}) => {
                                         },
                                     }}
                                 >
-                                    <img
-                                        src={`https://arweave.net/${metadata.media}`}
+                                    <MediaObject
+                                        mediaURI={`https://arweave.net/${metadata.media}`}
                                         width={frameDimension}
+                                        height={frameDimension}
                                     />
                                 </div>
                             </Link>

examples/frontend/pages/share/create.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react'
 import { Button, Text } from 'theme-ui'
 import { utils } from 'near-api-js'
 import Layout from '../../containers/Layout'
-import { CreatorShare, RenderIframe } from '@cura/components'
+import { CreatorShare } from '@cura/components'
 import { alertMessageState, indexLoaderState } from '../../state/recoil'
 import { useSetRecoilState } from 'recoil'
 import { useNFTContract } from '@cura/hooks'
@@ -128,10 +128,13 @@ const Create = ({}) => {
                     }}
                 >
                     {creativeCode && (
-                        <RenderIframe
-                            code={creativeCode}
+                        <iframe
+                            srcDoc={creativeCode}
                             width={frameDimension}
-                        ></RenderIframe>
+                            height={frameDimension}
+                            frameBorder="0"
+                            scrolling="no"
+                        ></iframe>
                     )}
                 </div>
                 <div

examples/frontend/pages/share/explore.tsx

@@ -8,8 +8,8 @@ import Layout from '../../containers/Layout'
 import {
     BidCreate,
     Metadata,
-    RenderIframe,
     CreatorShare,
+    MediaObject,
 } from '@cura/components'
 import { alertMessageState, indexLoaderState } from '../../state/recoil'
 import { useSetRecoilState } from 'recoil'
@@ -121,9 +121,10 @@ const Explore = ({}) => {
                     }}
                 >
                     {randomDesign.metadata.media && (
-                        <RenderIframe
+                        <MediaObject
                             mediaURI={`https://arweave.net/${randomDesign.metadata.media}`}
                             width={designDimension}
+                            height={designDimension}
                         />
                     )}
                 </div>
@@ -134,10 +135,7 @@ const Explore = ({}) => {
                         alignItems: 'center',
                     }}
                 >
-                    <Metadata
-                        title={randomDesign?.metadata.title}
-                        creator={randomDesign?.owner_id}
-                    />
+                    <Metadata data={randomDesign} loading={false} />
                 </div>
                 <div
                     sx={{

examples/frontend/pages/share/index.tsx

@@ -4,12 +4,10 @@
 import { Button } from 'theme-ui'
 import { utils } from 'near-api-js'
 import Layout from '../../containers/Layout'
-import { CreatorShare } from '@cura/components'
-import { Bidders } from '@cura/components'
+import { CreatorShare, Bidders, MediaObject } from '@cura/components'
 import { alertMessageState, indexLoaderState } from '../../state/recoil'
 import { useSetRecoilState } from 'recoil'
 import { useNFTMethod, useNFTContract } from '@cura/hooks'
-import { RenderIframe } from '@cura/components'
 import { getFrameWidth } from 'utils/frame-width'
 import { useNearHooksContainer, useMarketMethod } from '@cura/hooks'
 import { useStatusUpdate } from 'utils/hooks-helpers'
@@ -104,9 +102,10 @@ const View = ({}) => {
                     }}
                 >
                     {media?.[0]?.metadata?.media && (
-                        <RenderIframe
+                        <MediaObject
                             mediaURI={`https://arweave.net/${media[0].metadata.media}`}
                             width={mediaDimension}
+                            height={mediaDimension}
                         />
                     )}
                 </div>

packages/components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cura/components",
-    "version": "0.0.12",
+    "version": "0.0.14",
     "description": "Components for front-ends on NEAR blockchain",
     "source": "src/index.ts",
     "main": "dist/index.js",
@@ -18,6 +18,8 @@
     "author": "Yassine",
     "license": "MIT",
     "dependencies": {
+        "@cura/hooks": "0.0.6",
+        "@theme-ui/match-media": "^0.12.0",
         "@theme-ui/presets": "^0.6.0",
         "near-api-js": "^0.42.0",
         "react": "^17.0.1",