From 14cd904915edc2c54cc1d3be6bb080357c0f9ddb Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Fri, 22 Oct 2021 17:24:52 +0100 Subject: [PATCH 01/36] Added: placeholder --- packages/components/src/Placeholder.tsx | 37 +++++++++++++++++++++++ packages/components/src/RenderIframe.tsx | 38 +++++++++++++----------- 2 files changed, 58 insertions(+), 17 deletions(-) create mode 100644 packages/components/src/Placeholder.tsx diff --git a/packages/components/src/Placeholder.tsx b/packages/components/src/Placeholder.tsx new file mode 100644 index 00000000..1d53c6c7 --- /dev/null +++ b/packages/components/src/Placeholder.tsx @@ -0,0 +1,37 @@ +// @ts-nocheck +/** @jsxImportSource theme-ui */ + +import { keyframes } from '@emotion/react' + +const animateph = keyframes` +from { + opacity: .7; +} +to { + opacity: 1; +} +` + +export function Placeholder({ + height = 20, + width = 160, + style +}: { + height?: number + width?: number + style?: object +}) { + return ( +
+ ) +} diff --git a/packages/components/src/RenderIframe.tsx b/packages/components/src/RenderIframe.tsx index 3045b134..db7ba799 100644 --- a/packages/components/src/RenderIframe.tsx +++ b/packages/components/src/RenderIframe.tsx @@ -1,6 +1,9 @@ // @ts-nocheck /** @jsxImportSource theme-ui */ +import { useState, useEffect } from 'react' +import { Placeholder } from './Placeholder' + export function RenderIframe({ mediaURI, code, @@ -10,27 +13,28 @@ export function RenderIframe({ code?: string width?: number }) { - if (code) { - return ( - - ) - } + const [isLoading, setIsLoading] = useState(true) - if (mediaURI) { - return ( + return ( + <> + {isLoading && ( + + )} - ) - } - - return null + + ) } From 5fc6a4dfe85c5f352368e8f61bc4ed6e050f70de Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Fri, 22 Oct 2021 17:25:56 +0100 Subject: [PATCH 02/36] updated: metadata component --- packages/components/src/Metadata.tsx | 162 ++++++++++++++---- .../src/stories/Metadata.stories.tsx | 44 ++++- 2 files changed, 165 insertions(+), 41 deletions(-) diff --git a/packages/components/src/Metadata.tsx b/packages/components/src/Metadata.tsx index a9ba5bce..82e4dced 100644 --- a/packages/components/src/Metadata.tsx +++ b/packages/components/src/Metadata.tsx @@ -1,55 +1,145 @@ // @ts-nocheck /** @jsxImportSource theme-ui */ -import { Box, Heading, Text } from 'theme-ui' +import { Box, Link } from 'theme-ui' +import { Placeholder } from './Placeholder' export function Metadata({ title, + description, creator, + owner, + loading = false, + width = 300, }: { title?: string + description?: string creator?: string + owner?: string + loading?: boolean + width?: number }) { return ( - - {title} - - - TITLE - - - {creator} - - - CREATOR - + {loading ? ( + + ) : ( + title && ( +

+ {title} +

+ ) + )} + + {loading ? ( + + + + + ) : ( + description && ( +

+ {description} +

+ ) + )} + + {(creator || loading) && ( +
+

+ Created by +

+ {loading ? ( + + ) : ( + + {creator} + + )} +
+ )} + + {(owner || loading) && ( +
+

+ Owned by +

+ {loading ? ( + + ) : ( + + {owner} + + )} +
+ )} ) -} +} \ No newline at end of file diff --git a/packages/components/src/stories/Metadata.stories.tsx b/packages/components/src/stories/Metadata.stories.tsx index 0fb91ef5..8d9a92f7 100644 --- a/packages/components/src/stories/Metadata.stories.tsx +++ b/packages/components/src/stories/Metadata.stories.tsx @@ -2,19 +2,53 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react' import { Metadata } from '../Metadata' export default { - title: 'Components/Metadata', - component: Metadata, +title: 'Components/Metadata', +component: Metadata, parameters: { layout: 'centered', }, } as ComponentMeta const Template: ComponentStory = (args) => ( - + ) -export const Zero = Template.bind({}) -Zero.args = { +export const Loading = Template.bind({}) +Loading.args = { + loading: true, title: 'dabuk', creator: 'beast.near', + owner: 'doge.near', + description: + 'Digital ceramic sculpted in VR and glazed procedurally David Porte Beckefeld® 2021', +} + +export const WithDescription = Template.bind({}) +WithDescription.args = { + loading: false, + title: 'dabuk', + creator: 'beast.near', + owner: 'doge.near', + description: + 'Digital ceramic sculpted in VR and glazed procedurally David Porte Beckefeld® 2021', +} + +export const WithoutDescription = Template.bind({}) +WithoutDescription.args = { + loading: false, + title: 'dabuk', + creator: 'beast.near', + owner: 'doge.near', + description: '', +} + +export const CustomWidth = Template.bind({}) +CustomWidth.args = { + loading: false, + width: 500, + title: 'dabuk', + creator: 'beast.near', + owner: 'doge.near', + description: + 'Digital ceramic sculpted in VR and glazed procedurally David Porte Beckefeld® 2021', } From daf09d012b902686557675f5fa32c779e145c344 Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Fri, 22 Oct 2021 18:05:26 +0100 Subject: [PATCH 03/36] New: NFTE component --- packages/components/src/NFTE.tsx | 122 ++++++++++++++++++ .../components/src/stories/NFTE.stories.tsx | 62 +++++++++ 2 files changed, 184 insertions(+) create mode 100644 packages/components/src/NFTE.tsx create mode 100644 packages/components/src/stories/NFTE.stories.tsx diff --git a/packages/components/src/NFTE.tsx b/packages/components/src/NFTE.tsx new file mode 100644 index 00000000..cc7607a9 --- /dev/null +++ b/packages/components/src/NFTE.tsx @@ -0,0 +1,122 @@ +// @ts-nocheck +/** @jsxImportSource theme-ui */ +import { Box } from 'theme-ui' +import { Metadata } from './Metadata' +import { RenderIframe } from './RenderIframe' +import { Placeholder } from './Placeholder' + +import { useEffect, useState } from 'react' +import { connect, Contract } from 'near-api-js' + +async function getNFT( + contractAddress: string, + tokenId: string +) { + const config = { + networkId: 'testnet', + nodeUrl: 'https://rpc.testnet.near.org', + } + + const loadNfts = async () => { + try { + const near = await connect({ ...config, deps: { keyStore: null } }) + const account = await near.account(null) + + const contract = await new Contract(account, contractAddress, { + viewMethods: ['nft_token'], + changeMethods: [''], + }) + + const res = await contract.nft_token({ token_id: tokenId }) + return res + } catch (e) { + throw e + } + } + + const data = await loadNfts() + + return data +} + +const tempNft = { + id: '', + owner_id: '', + creator: '', + prev_owner: '', + metadata: { + title: '', + issued_at: '', + copies: 0, + media: '', + extra: '', + description: '', + media_hash: '', + expires_at: '', + starts_at: '', + updated_at: '', + reference: '', + reference_hash: '', + }, +} + +export function NFTE({ + contract, + tokenId, + isDark = true, +}: { + contract?: string + tokenId?: string + isDark?: boolean +}) { + const [NFTData, setNFTData] = useState(tempNft) + const [loading, setLoading] = useState(true) + + const width = 400 + + useEffect(() => { + getNFT(contract, tokenId).then((data) => { + setNFTData(data) + setLoading(false) + }) + }, []) + + return ( + + {!loading && NFTData?.metadata?.media ? ( + + ) : ( + + )} + + + + ) +} diff --git a/packages/components/src/stories/NFTE.stories.tsx b/packages/components/src/stories/NFTE.stories.tsx new file mode 100644 index 00000000..1a190ba4 --- /dev/null +++ b/packages/components/src/stories/NFTE.stories.tsx @@ -0,0 +1,62 @@ +import type { ComponentStory, ComponentMeta } from '@storybook/react' +import { NFTE } from '../NFTE' + +export default { + title: 'Components/NFTE', + component: NFTE, + parameters: { + layout: 'centered', + }, +} as ComponentMeta + +const Template: ComponentStory = (args) => ( + +) + +export const Light = Template.bind({}) +Light.args = { + contract: '0.share-nft.testnet', + tokenId: 'sekaiking-67849861', + isDark: false, +} + + +export const Dark = Template.bind({}) +Dark.args = { + contract: '0.share-nft.testnet', + tokenId: 'afaithraf-68324557', + isDark: true, +} + +export const Ml1c = Template.bind({}) + +Ml1c.args = { + contract: 'ml1c.ysn-1_0_0.ysn.testnet', + tokenId: 'ysn-63057373', + isDark: false, +} + +export const Ml1w = Template.bind({}) + +Ml1w.args = { + contract: 'ml1w.ysn-1_0_0.ysn.testnet', + tokenId: 'ghostfrnvpr-62641894', + isDark: false, +} + +export const Aprts = Template.bind({}) + +Aprts.args = { + contract: 'apparitions.art-blocks.testnet', + tokenId: 'ysn-58907469', + isDark: false, +} + +export const Sqgl = Template.bind({}) + +Sqgl.args = { + contract: 'squiggle.art-blocks.testnet', + tokenId: 'ysn-62113954', + isDark: false, +} + From 7b39548b045619dbe8c41a1c414482b1cd2edb9f Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Mon, 25 Oct 2021 16:10:03 +0100 Subject: [PATCH 04/36] code cleaning + new useViewNFTMethod hook --- packages/components/src/NFTE.tsx | 81 +++++-------------------- packages/components/src/Placeholder.tsx | 6 +- packages/hooks/src/useNFTContract.ts | 51 +++++++++++++++- 3 files changed, 68 insertions(+), 70 deletions(-) diff --git a/packages/components/src/NFTE.tsx b/packages/components/src/NFTE.tsx index cc7607a9..2024e124 100644 --- a/packages/components/src/NFTE.tsx +++ b/packages/components/src/NFTE.tsx @@ -6,59 +6,7 @@ import { RenderIframe } from './RenderIframe' import { Placeholder } from './Placeholder' import { useEffect, useState } from 'react' -import { connect, Contract } from 'near-api-js' - -async function getNFT( - contractAddress: string, - tokenId: string -) { - const config = { - networkId: 'testnet', - nodeUrl: 'https://rpc.testnet.near.org', - } - - const loadNfts = async () => { - try { - const near = await connect({ ...config, deps: { keyStore: null } }) - const account = await near.account(null) - - const contract = await new Contract(account, contractAddress, { - viewMethods: ['nft_token'], - changeMethods: [''], - }) - - const res = await contract.nft_token({ token_id: tokenId }) - return res - } catch (e) { - throw e - } - } - - const data = await loadNfts() - - return data -} - -const tempNft = { - id: '', - owner_id: '', - creator: '', - prev_owner: '', - metadata: { - title: '', - issued_at: '', - copies: 0, - media: '', - extra: '', - description: '', - media_hash: '', - expires_at: '', - starts_at: '', - updated_at: '', - reference: '', - reference_hash: '', - }, -} +import { useViewNFTMethod } from '@cura/hooks' export function NFTE({ contract, @@ -69,17 +17,18 @@ export function NFTE({ tokenId?: string isDark?: boolean }) { - const [NFTData, setNFTData] = useState(tempNft) - const [loading, setLoading] = useState(true) + const [NFTData, setNFTData] = useState({}) + const [isLoading, setIsLoading] = useState(true) const width = 400 + const { loading, data } = useViewNFTMethod(contract, 'nft_token', { + token_id: tokenId, + }) useEffect(() => { - getNFT(contract, tokenId).then((data) => { - setNFTData(data) - setLoading(false) - }) - }, []) + setNFTData(data) + setIsLoading(loading) + }, [contract, tokenId, data]) return ( )} - diff --git a/packages/components/src/Placeholder.tsx b/packages/components/src/Placeholder.tsx index 1d53c6c7..9fb16220 100644 --- a/packages/components/src/Placeholder.tsx +++ b/packages/components/src/Placeholder.tsx @@ -17,15 +17,15 @@ export function Placeholder({ width = 160, style }: { - height?: number - width?: number + height: number + width: number style?: object }) { return (
{ + const config = { networkId, nodeUrl } + + const fetcher = async (methodName: string, serializedParams: string) => { + const near = await connect({ + networkId, + nodeUrl, + deps: { + keyStore: null, + }, + }) + const account = await near.account(null) + + const contract = await new Contract(account, contractAddress, { + viewMethods: [ + 'nft_token', + 'nft_total_supply', + 'nft_tokens', + 'nft_supply_for_owner', + 'nft_tokens_for_owner', + 'nft_metadata', + ], + changeMethods: [''], + }) + + const params = JSON.parse(serializedParams) + + return await contract[methodName]({ ...params }).then((res) => { + return res + }) + } + + const { data, error } = useSWR( + [methodName, JSON.stringify(params)], + fetcher + ) + + return { + data: data, + loading: !error && !data, + error: error, + } +} From 8064163c3eb51a590a04d15dc377384795eb2894 Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Mon, 25 Oct 2021 18:28:24 +0100 Subject: [PATCH 05/36] new: useNFTContentType hook --- packages/hooks/src/index.ts | 2 ++ packages/hooks/src/useNFTContent.ts | 44 +++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 packages/hooks/src/useNFTContent.ts diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index a6bbb33a..170cdf6e 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -1,4 +1,5 @@ import useNFTContract, { useNFTMethod } from './useNFTContract' +import { useNFTContentType } from './useNFTContent' import useMarketContract, { useMarketMethod } from './useMarketContract' import useFTContract, { useFTMethod } from './useFTContract' import { NearHooksProvider, useNearHooksContainer } from './near' @@ -6,6 +7,7 @@ import { NearHooksProvider, useNearHooksContainer } from './near' export { useNFTContract, useNFTMethod, + useNFTContentType, useMarketContract, useMarketMethod, useFTContract, diff --git a/packages/hooks/src/useNFTContent.ts b/packages/hooks/src/useNFTContent.ts new file mode 100644 index 00000000..5dce2769 --- /dev/null +++ b/packages/hooks/src/useNFTContent.ts @@ -0,0 +1,44 @@ +// @ts-nocheck +import useSWR from 'swr' + +type NFTContentType = 'image' | 'video' | 'audio' | 'text' | 'html' | 'other' + +type useNFTContentType = { + error: string | undefined + loading: boolean | undefined + contentType: NFTContentType | undefined +} + +/** + * Hook to fetch NFT content type from uri + * + * @param {string} mediaURI - URI of the NFT media + * @returns {useNFTContentType} { error, loading, contentType } + */ + +export function useNFTContentType(mediaURI: string): useNFTContentType { + const fetchContentType = async (URI: string) => { + const response = await fetch(URI, { method: 'HEAD' }).then((r) => { + const mimeType = r.headers.get('Content-type') + + let contentType: NFTContentType = 'other' + if (mimeType.includes('image')) contentType = 'image' + if (mimeType.includes('video')) contentType = 'video' + if (mimeType.includes('audio')) contentType = 'audio' + if (mimeType.includes('plain')) contentType = 'text' + if (mimeType.includes('html')) contentType = 'html' + + return contentType + }) + + return response + } + + const { data, error } = useSWR([mediaURI], fetchContentType) + + return { + error: error, + loading: !error && !data, + contentType: data, + } +} From fa97bf9d8c681d6977b1b2e8a1fc5493aa720cba Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Mon, 25 Oct 2021 18:31:22 +0100 Subject: [PATCH 06/36] new: MediaObject component --- packages/components/package.json | 1 + packages/components/src/MediaObject.tsx | 72 +++++++++++++++++++ .../src/stories/MediaObject.stories.tsx | 42 +++++++++++ 3 files changed, 115 insertions(+) create mode 100644 packages/components/src/MediaObject.tsx create mode 100644 packages/components/src/stories/MediaObject.stories.tsx diff --git a/packages/components/package.json b/packages/components/package.json index dad8018a..c19960fd 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -18,6 +18,7 @@ "author": "Yassine", "license": "MIT", "dependencies": { + "@cura/hooks": "0.0.4", "@theme-ui/presets": "^0.6.0", "near-api-js": "^0.42.0", "react": "^17.0.1", diff --git a/packages/components/src/MediaObject.tsx b/packages/components/src/MediaObject.tsx new file mode 100644 index 00000000..15b668e1 --- /dev/null +++ b/packages/components/src/MediaObject.tsx @@ -0,0 +1,72 @@ +// @ts-nocheck + +import { useState, useEffect } from 'react' +import { useNFTContentType } from '@cura/hooks' + +function Text({ media }: { media: string }) { + const [content, setContent] = useState('') + + useEffect(() => { + fetch(media) + .then((r) => r.text()) + .then((r) => setContent(r)) + }, []) + + return
{content}
+} + +function Video({ media, autoPlay }: { media: string; autoPlay: boolean }) { + return ( + + ) +} + +function Audio({ media }: { media: string }) { + return +} + +function Image({ media }: { media: string }) { + return +} + +function Iframe({ media }: { media: string }) { + return +} + +export function MediaObject({ + mediaURI, + autoPlay = false, +}: { + mediaURI?: string + autoPlay: boolean +}) { + + const [contentType, setContentType] = useState() + const { data } = useNFTContentType(mediaURI) + + useEffect(()=>{ + setContentType(data) + }, [mediaURI, something]) + + switch (contentType) { + case 'image': + return + + case 'video': + return
{ }} > {randomDesign?.metadata?.media && ( - diff --git a/examples/frontend/pages/cc/[project]/index.tsx b/examples/frontend/pages/cc/[project]/index.tsx index 01bca118..1f965c8b 100644 --- a/examples/frontend/pages/cc/[project]/index.tsx +++ b/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,7 +77,7 @@ const CCProject = ({}) => { }} > {metadata?.media && ( - diff --git a/examples/frontend/pages/ml/[project]/[id].tsx b/examples/frontend/pages/ml/[project]/[id].tsx index dae9208f..69055196 100644 --- a/examples/frontend/pages/ml/[project]/[id].tsx +++ b/examples/frontend/pages/ml/[project]/[id].tsx @@ -6,8 +6,7 @@ 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' @@ -110,8 +109,8 @@ const MLProject = ({}) => { }} > {media && ( - )} diff --git a/examples/frontend/pages/ml/[project]/create.tsx b/examples/frontend/pages/ml/[project]/create.tsx index 1bc3bbc5..0720ed75 100644 --- a/examples/frontend/pages/ml/[project]/create.tsx +++ b/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, }} > - +
{ }} > {randomDesign?.metadata.media && ( - )} diff --git a/examples/frontend/pages/ml/[project]/index.tsx b/examples/frontend/pages/ml/[project]/index.tsx index 1c499b16..0821c3d4 100644 --- a/examples/frontend/pages/ml/[project]/index.tsx +++ b/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,8 +57,8 @@ const MLProject = ({}) => { }, }} > -
diff --git a/examples/frontend/pages/share/create.tsx b/examples/frontend/pages/share/create.tsx index 6a807921..7eeb520e 100644 --- a/examples/frontend/pages/share/create.tsx +++ b/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 && ( - + height={frameDimension} + frameBorder="0" + scrolling="no" + > )}
{ }} > {randomDesign.metadata.media && ( - diff --git a/examples/frontend/pages/share/index.tsx b/examples/frontend/pages/share/index.tsx index 5c955765..a142d1c1 100644 --- a/examples/frontend/pages/share/index.tsx +++ b/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,7 +102,7 @@ const View = ({}) => { }} > {media?.[0]?.metadata?.media && ( - diff --git a/packages/components/src/NFTE.tsx b/packages/components/src/NFTE.tsx index 2024e124..1c467482 100644 --- a/packages/components/src/NFTE.tsx +++ b/packages/components/src/NFTE.tsx @@ -2,7 +2,7 @@ /** @jsxImportSource theme-ui */ import { Box } from 'theme-ui' import { Metadata } from './Metadata' -import { RenderIframe } from './RenderIframe' +import { MediaObject } from './MediaObject' import { Placeholder } from './Placeholder' import { useEffect, useState } from 'react' @@ -43,16 +43,9 @@ export function NFTE({ }} > {!loading && NFTData?.metadata?.media ? ( - ) : ( From 7ce800014d6afe6989dd4e5c9f7d1388a917fcaa Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Tue, 26 Oct 2021 08:32:11 +0100 Subject: [PATCH 11/36] updated hooks index --- packages/hooks/src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 170cdf6e..c46d0493 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -1,4 +1,4 @@ -import useNFTContract, { useNFTMethod } from './useNFTContract' +import useNFTContract, { useNFTMethod, useViewNFTMethod } from './useNFTContract' import { useNFTContentType } from './useNFTContent' import useMarketContract, { useMarketMethod } from './useMarketContract' import useFTContract, { useFTMethod } from './useFTContract' @@ -7,6 +7,7 @@ import { NearHooksProvider, useNearHooksContainer } from './near' export { useNFTContract, useNFTMethod, + useViewNFTMethod, useNFTContentType, useMarketContract, useMarketMethod, From 1f77753430ea02ea559b5b59a1803f4005b6c1d0 Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Tue, 26 Oct 2021 08:52:48 +0100 Subject: [PATCH 12/36] added height and width prop to MediaObject component --- packages/components/src/MediaObject.tsx | 73 ++++++++++++++++++++----- 1 file changed, 59 insertions(+), 14 deletions(-) diff --git a/packages/components/src/MediaObject.tsx b/packages/components/src/MediaObject.tsx index 70ebc490..8ad92f55 100644 --- a/packages/components/src/MediaObject.tsx +++ b/packages/components/src/MediaObject.tsx @@ -1,9 +1,10 @@ // @ts-nocheck +/** @jsxImportSource theme-ui */ import { useState, useEffect } from 'react' import { useNFTContentType } from '@cura/hooks' -function Text({ media }: { media: string }) { +function Text({ media, width, height }) { const [content, setContent] = useState('') useEffect(() => { @@ -12,34 +13,47 @@ function Text({ media }: { media: string }) { .then((r) => setContent(r)) }, []) - return
{content}
+ return ( +
+ {content} +
+ ) } -function Video({ media, autoPlay }: { media: string; autoPlay: boolean }) { +function Video({ media, width, height, autoPlay }) { return ( -
@@ -141,10 +142,7 @@ const Explore = ({}) => { alignItems: 'center', }} > - +
{ )}
diff --git a/examples/frontend/pages/ml/[project]/[id].tsx b/examples/frontend/pages/ml/[project]/[id].tsx index 69055196..ba9c2938 100644 --- a/examples/frontend/pages/ml/[project]/[id].tsx +++ b/examples/frontend/pages/ml/[project]/[id].tsx @@ -112,6 +112,7 @@ const MLProject = ({}) => { )} diff --git a/examples/frontend/pages/ml/[project]/explore.tsx b/examples/frontend/pages/ml/[project]/explore.tsx index b9a616ca..29aabc75 100644 --- a/examples/frontend/pages/ml/[project]/explore.tsx +++ b/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, MediaObject } from '@cura/components' +import { + BidCreate, + Metadata, + CreatorShare, + MediaObject, +} from '@cura/components' import { alertMessageState, indexLoaderState } from '../../../state/recoil' import { useRecoilValue, useSetRecoilState } from 'recoil' import { @@ -128,6 +133,7 @@ const Explore = ({}) => { )} @@ -138,10 +144,7 @@ const Explore = ({}) => { alignItems: 'center', }} > - +
{
diff --git a/examples/frontend/pages/share/explore.tsx b/examples/frontend/pages/share/explore.tsx index 158dfe04..190a38e1 100644 --- a/examples/frontend/pages/share/explore.tsx +++ b/examples/frontend/pages/share/explore.tsx @@ -124,6 +124,7 @@ const Explore = ({}) => { )} @@ -134,10 +135,7 @@ const Explore = ({}) => { alignItems: 'center', }} > - +
{ )}
From 480a48846bc9fc169eff964e75859e37362a4a52 Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Fri, 29 Oct 2021 19:22:13 +0100 Subject: [PATCH 18/36] quick fixes --- packages/components/package.json | 1 + packages/components/src/MediaObject.tsx | 2 +- packages/components/src/NFTE.tsx | 25 ++++++++++++++++--------- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index c19960fd..5503c4a3 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -19,6 +19,7 @@ "license": "MIT", "dependencies": { "@cura/hooks": "0.0.4", + "@theme-ui/match-media": "^0.12.0", "@theme-ui/presets": "^0.6.0", "near-api-js": "^0.42.0", "react": "^17.0.1", diff --git a/packages/components/src/MediaObject.tsx b/packages/components/src/MediaObject.tsx index d9241390..1dd88e99 100644 --- a/packages/components/src/MediaObject.tsx +++ b/packages/components/src/MediaObject.tsx @@ -49,7 +49,7 @@ function Video({ mediaURI, width, height, autoPlay }: mediaObjectProps) { ) } -function Audio({ mediaURI, width, height }: mediaObjectProps) { +function Audio({ mediaURI }: mediaObjectProps) { return } diff --git a/packages/components/src/NFTE.tsx b/packages/components/src/NFTE.tsx index 27adcb2d..2528ead6 100644 --- a/packages/components/src/NFTE.tsx +++ b/packages/components/src/NFTE.tsx @@ -3,6 +3,7 @@ import { useNFT, useNFTContractMetadata, useNFTReference } from '@cura/hooks' import { Container } from 'theme-ui' +import { useBreakpointIndex } from '@theme-ui/match-media' import { Metadata } from './Metadata' import { MediaObject } from './MediaObject' @@ -15,7 +16,9 @@ export function NFTE({ tokenId: string isDark: boolean }) { - const width = 400 + const canvasSizes = [300, 400] + const BreakpointIndex = useBreakpointIndex() + const canvasSize = canvasSizes[BreakpointIndex] // Get NFT contract metadata const { @@ -40,7 +43,7 @@ export function NFTE({ error: NFTReferenceError, loading: NFTReferenceLoading, data: NFTReference, - } = useNFTReference(referenceURI) + } = referenceURI ? useNFTReference(referenceURI) : {} // replace null values from NFTMetadata with values from the NFTReference const finalNFTMetadata = { @@ -65,25 +68,29 @@ export function NFTE({ let error = NFTContractMetadataError || NFTError || NFTReferenceError || false - if (error) throw new Error(error) + // if (error) throw new Error(error) return ( - + @@ -91,8 +98,8 @@ export function NFTE({ } function validateURI(uri = '', base_uri = '') { - if (!uri) return + if (!uri) return false if (uri?.includes('http')) return uri - return base_uri + '/' + uri.replace(/^\//, '') + return base_uri.replace(/\/$/, '') + '/' + uri.replace(/^\//, '') } From edfd24448dfbf0114f93a63438b96895bae480d7 Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Sat, 30 Oct 2021 14:12:52 +0100 Subject: [PATCH 19/36] Bugs fixes --- packages/components/src/MediaObject.tsx | 9 +- packages/components/src/NFTE.tsx | 51 ++++--- packages/hooks/src/NFT/useNFTReference.ts | 5 +- packages/hooks/src/useNFTContract.ts | 137 ------------------- packages/hooks/tests/useNFTReference.test.ts | 11 +- 5 files changed, 50 insertions(+), 163 deletions(-) delete mode 100644 packages/hooks/src/useNFTContract.ts diff --git a/packages/components/src/MediaObject.tsx b/packages/components/src/MediaObject.tsx index 1dd88e99..8bd69263 100644 --- a/packages/components/src/MediaObject.tsx +++ b/packages/components/src/MediaObject.tsx @@ -56,7 +56,13 @@ function Audio({ mediaURI }: mediaObjectProps) { function Image({ mediaURI, width, height }: mediaObjectProps) { return ( ) @@ -70,7 +76,6 @@ function Iframe({ mediaURI, width, height }: mediaObjectProps) { src={mediaURI} frameBorder="0" scrolling="no" - sx={{ bg: 'gray.3' }} > ) } diff --git a/packages/components/src/NFTE.tsx b/packages/components/src/NFTE.tsx index 2528ead6..32582bdc 100644 --- a/packages/components/src/NFTE.tsx +++ b/packages/components/src/NFTE.tsx @@ -16,9 +16,9 @@ export function NFTE({ tokenId: string isDark: boolean }) { - const canvasSizes = [300, 400] - const BreakpointIndex = useBreakpointIndex() - const canvasSize = canvasSizes[BreakpointIndex] + const canvasSizes = [290, 300, 400, 400, 400] + const breakpointIndex = useBreakpointIndex() + const canvasSize = canvasSizes[breakpointIndex] // Get NFT contract metadata const { @@ -43,7 +43,7 @@ export function NFTE({ error: NFTReferenceError, loading: NFTReferenceLoading, data: NFTReference, - } = referenceURI ? useNFTReference(referenceURI) : {} + } = useNFTReference(referenceURI) // replace null values from NFTMetadata with values from the NFTReference const finalNFTMetadata = { @@ -58,17 +58,22 @@ export function NFTE({ creator_id: NFTMetadata?.creator_id?.Account || NFTMetadata?.creator_id || + NFTMetadata?.creator || NFTReference?.creator_id, } const mediaUri = validateURI(finalNFTMetadata?.metadata?.media, baseURI) + let error = + NFTContractMetadataError || + NFTError || + (!NFTMetadata && { type: 'invalid NFTMetadata' }) + let loading = - NFTContractMetadataLoading || NFTLoading || NFTReferenceLoading || false + NFTContractMetadataLoading || NFTLoading || NFTReferenceLoading + loading = loading && error - let error = - NFTContractMetadataError || NFTError || NFTReferenceError || false - // if (error) throw new Error(error) + error && !loading && console.error(error) return ( - - + {error && !loading ? ( +

❌ Error: {error.type}

+ ) : ( + <> + + + + )} ) } function validateURI(uri = '', base_uri = '') { - if (!uri) return false + if (!uri) return if (uri?.includes('http')) return uri return base_uri.replace(/\/$/, '') + '/' + uri.replace(/^\//, '') diff --git a/packages/hooks/src/NFT/useNFTReference.ts b/packages/hooks/src/NFT/useNFTReference.ts index 6fa1245b..9ba88b39 100644 --- a/packages/hooks/src/NFT/useNFTReference.ts +++ b/packages/hooks/src/NFT/useNFTReference.ts @@ -21,8 +21,9 @@ const fetchNFTReference = async (URI: string) => { */ export function useNFTReference(uri: string): useNFTReferenceType { - const { data, error } = useSWR([uri], fetchNFTReference) - + let { data, error } = useSWR(uri ? [uri] : null, fetchNFTReference) + error = + error || (!uri && 'provided reference URI is not valid') || undefined return { error: error, loading: !error && !data, diff --git a/packages/hooks/src/useNFTContract.ts b/packages/hooks/src/useNFTContract.ts deleted file mode 100644 index bd149004..00000000 --- a/packages/hooks/src/useNFTContract.ts +++ /dev/null @@ -1,137 +0,0 @@ -// @ts-nocheck -import { useEffect, useState } from 'react' -import { useNearHooksContainer } from './near' -import { getContractMethods, networkId, nodeUrl } from './near-utils' -import useSWR from 'swr' -import { connect, Contract } from 'near-api-js' - -/** - * Hook to retrieve an NFT contract - * - * @param {string} contractAddress - contract adress - * @returns {object} { contract } - */ - -export default function useNFTContract( - contractAddress: string = '0.share-nft.testnet' -) { - const [contract, setContract] = useState({ account: null }) - const { getContract, accountId } = useNearHooksContainer() - - const setupContract = () => { - if (contractAddress.includes('undefined')) { - return - } - - const newContract = getContract( - contractAddress, - getContractMethods('nft') - ) - - setContract(newContract) - } - - // If contractName or accountId changes a new contract is setup - useEffect(setupContract, [accountId, contractAddress]) - - return { contract } -} - -/** - * Hook to execute an NFT contract method - * - * @param {string} contractAddress - contract adress - * @param {string} methodName - the view method to execute - * @param {object} params - method parameters - * @param {number} gas - gas limit - * @returns {object} { error, loading, data } - */ - -export const useNFTMethod = ( - contractAddress: string, - methodName: string, - params: {}, - gas: number, - updateStatus: () => void -) => { - const { contract } = useNFTContract(contractAddress) - - const validParams = contract?.account?.accountId - - const fetcher = (methodName: string, serializedParams: string) => { - const params = JSON.parse(serializedParams) - return contract[methodName]({ ...params }, gas).then((res) => { - return res - }) - } - - const { data, error } = useSWR( - validParams ? [methodName, JSON.stringify(params)] : null, - fetcher - ) - - updateStatus && updateStatus(error, data, validParams) - - return { - data: data, - loading: !error && !data, - error: error, - } -} - -/** - * Hook to execute an NFT contract view method without an account - * - * @param {string} contractAddress - contract adress - * @param {string} methodName - the view method to execute - * @param {object} params - method parameters - * @returns {object} { error, loading, data } - */ - -export const useViewNFTMethod = ( - contractAddress: string, - methodName: string, - params: {} -) => { - const config = { networkId, nodeUrl } - - const fetcher = async (methodName: string, serializedParams: string) => { - const near = await connect({ - networkId, - nodeUrl, - deps: { - keyStore: null, - }, - }) - const account = await near.account(null) - - const contract = await new Contract(account, contractAddress, { - viewMethods: [ - 'nft_token', - 'nft_total_supply', - 'nft_tokens', - 'nft_supply_for_owner', - 'nft_tokens_for_owner', - 'nft_metadata', - ], - changeMethods: [''], - }) - - const params = JSON.parse(serializedParams) - - return await contract[methodName]({ ...params }).then((res) => { - return res - }) - } - - const { data, error } = useSWR( - [methodName, JSON.stringify(params)], - fetcher - ) - - return { - data: data, - loading: !error && !data, - error: error, - } -} diff --git a/packages/hooks/tests/useNFTReference.test.ts b/packages/hooks/tests/useNFTReference.test.ts index 0fd35f86..16eba387 100644 --- a/packages/hooks/tests/useNFTReference.test.ts +++ b/packages/hooks/tests/useNFTReference.test.ts @@ -19,16 +19,23 @@ describe('useNFTReference', () => { ) ) - // loading true, no errors, data is undefined + // loading true, errors undefined, data undefined expect(result.current.loading).toBe(true) expect(result.current.error).toBeUndefined() expect(result.current.data).toBeUndefined() await waitForNextUpdate() - // loading complete, no errors, data should be object + // loading false, no errors, data should be object expect(result.current.loading).toBe(false) expect(result.current.error).toBeUndefined() expect(typeof result.current.data).toEqual('object') }) + test('should return an error', async () => { + const { result } = renderHook(() => useNFTReference('')) + // loading false, error exist, data undefined + expect(result.current.loading).toBe(false) + expect(typeof result.current.error).toEqual('string') + expect(result.current.data).toBeUndefined() + }) }) From 72b7f98cb712b87d279631e77352aeb0eae94ccc Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Tue, 2 Nov 2021 13:39:00 +0100 Subject: [PATCH 20/36] Story for Placeholder Component --- .../src/stories/Placeholder.stories.tsx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 packages/components/src/stories/Placeholder.stories.tsx diff --git a/packages/components/src/stories/Placeholder.stories.tsx b/packages/components/src/stories/Placeholder.stories.tsx new file mode 100644 index 00000000..b527aa80 --- /dev/null +++ b/packages/components/src/stories/Placeholder.stories.tsx @@ -0,0 +1,42 @@ +import type { ComponentStory, ComponentMeta } from '@storybook/react' +import { Placeholder } from '../Placeholder' +import { Box } from 'theme-ui' + +export default { + title: 'Elements/Placeholder', + component: Placeholder, + parameters: { + layout: 'centered', + }, +} as ComponentMeta + +const Template: ComponentStory = (args) => ( + +) + +export const Default = Template.bind({}) +Default.args = {} + +export const Image = Template.bind({}) +Image.args = { + width: 300, + height: 300, +} + +export const CustomStyles = Template.bind({}) +CustomStyles.args = { + width: 80, + height: 80, + style: { + bg: 'primary', + borderRadius: '100%', + }, +} + +export const ParagraphTemplate: ComponentStory = (args) => ( + + + + + +) From d397bbc834b12f101b49413694cd2f39fb0e21d7 Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Tue, 2 Nov 2021 17:27:04 +0100 Subject: [PATCH 21/36] Updated useNFTViewMethod to use getContractMethods('nft') --- packages/hooks/src/NFT/useNFTViewMethod.ts | 21 +++++++-------------- packages/hooks/src/near-utils.ts | 4 +--- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/hooks/src/NFT/useNFTViewMethod.ts b/packages/hooks/src/NFT/useNFTViewMethod.ts index 476b0978..68e5f459 100644 --- a/packages/hooks/src/NFT/useNFTViewMethod.ts +++ b/packages/hooks/src/NFT/useNFTViewMethod.ts @@ -1,6 +1,8 @@ +// @ts-nocheck import useSWR from 'swr' import { networkId, nodeUrl } from '../near-utils' import { connect, Contract } from 'near-api-js' +import { getContractMethods } from '../near-utils' export type useNFTViewMethodType = { error?: string @@ -17,27 +19,18 @@ const fetchNFTView = async ( networkId, nodeUrl, deps: { - //@ts-ignore keyStore: undefined, }, }) - //@ts-ignore const account = await near.account(null) - const contract = await new Contract(account, contractAddress, { - viewMethods: [ - 'nft_token', - 'nft_total_supply', - 'nft_tokens', - 'nft_supply_for_owner', - 'nft_tokens_for_owner', - 'nft_metadata', - ], - changeMethods: [''], - }) + const contract = await new Contract( + account, + contractAddress, + getContractMethods('nft') + ) const params = JSON.parse(serializedParams) - //@ts-ignore return await contract[methodName]({ ...params }).then((res) => { return res }) diff --git a/packages/hooks/src/near-utils.ts b/packages/hooks/src/near-utils.ts index 88afe005..df738234 100644 --- a/packages/hooks/src/near-utils.ts +++ b/packages/hooks/src/near-utils.ts @@ -32,12 +32,10 @@ export function getContractMethods(contractName: string) { 'claim_media', 'burn_design', 'view_media', - 'nft_metadata', - 'nft_token', 'nft_tokens', 'nft_tokens_for_owner', ], - viewMethods: ['nft_total_supply'], + viewMethods: ['nft_total_supply', 'nft_metadata', 'nft_token'], } case 'market': return { From ca558cf77c0305829cd001fca5a22b41a6a08925 Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Tue, 2 Nov 2021 17:28:23 +0100 Subject: [PATCH 22/36] Updated frontend to not use gas with nft_token method --- examples/frontend/pages/cc/[project]/[id].tsx | 3 +-- examples/frontend/pages/ml/[project]/[id].tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/frontend/pages/cc/[project]/[id].tsx b/examples/frontend/pages/cc/[project]/[id].tsx index 259f0306..d4df3ce3 100644 --- a/examples/frontend/pages/cc/[project]/[id].tsx +++ b/examples/frontend/pages/cc/[project]/[id].tsx @@ -13,7 +13,6 @@ 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 ) diff --git a/examples/frontend/pages/ml/[project]/[id].tsx b/examples/frontend/pages/ml/[project]/[id].tsx index ba9c2938..3daae80d 100644 --- a/examples/frontend/pages/ml/[project]/[id].tsx +++ b/examples/frontend/pages/ml/[project]/[id].tsx @@ -13,7 +13,6 @@ 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') @@ -41,7 +40,7 @@ const MLProject = ({}) => { token_id: router.query.id, limit: 2, }, - CONTRACT_VIEW_GAS, + undefined, updateStatus ) From 477949fca10554171dcc7d9709f8d59265f1bc20 Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Wed, 3 Nov 2021 09:36:36 +0100 Subject: [PATCH 23/36] useNFTContentType return media content if it's text --- packages/hooks/src/NFT/useNFTContentType.ts | 22 +++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/hooks/src/NFT/useNFTContentType.ts b/packages/hooks/src/NFT/useNFTContentType.ts index 972cc7f4..0e43c9a4 100644 --- a/packages/hooks/src/NFT/useNFTContentType.ts +++ b/packages/hooks/src/NFT/useNFTContentType.ts @@ -12,27 +12,32 @@ export type useNFTContentTypeType = { error?: string loading: boolean data?: ContentType + content?: string } const fetchContentType = async (URI: string) => { - const response = await fetch(URI, { method: 'HEAD' }) - const mimeType = response.headers.get('Content-type') + const response = await fetch(URI) + const mimeType = await response.headers.get('Content-type') + + let contentType: ContentType = 'other', + content: string = '' - let contentType: ContentType = 'other' if (mimeType?.includes('image')) contentType = 'image' if (mimeType?.includes('video')) contentType = 'video' if (mimeType?.includes('audio')) contentType = 'audio' if (mimeType?.includes('plain')) contentType = 'text' if (mimeType?.includes('html')) contentType = 'html' - return contentType + if (contentType == 'text') content = await response.text() + + return { contentType, content } } /** - * Hook to fetch NFT content type from uri - * + * Hook to fetch NFT content type from URI, + * and returns the content if contentType='text' * @param {string} mediaURI - URI of the NFT media - * @returns {useNFTContentTypeType} { error, loading, contentType } + * @returns {useNFTContentTypeType} { error, loading, data, content } */ export function useNFTContentType(mediaURI: string): useNFTContentTypeType { @@ -41,6 +46,7 @@ export function useNFTContentType(mediaURI: string): useNFTContentTypeType { return { error: error, loading: !error && !data, - data: data, + data: data?.contentType, + content: data?.content, } } From 75a19badbb4250eb1056f7571e39ce3bea30fd43 Mon Sep 17 00:00:00 2001 From: achraf elghinoussi Date: Wed, 3 Nov 2021 09:37:22 +0100 Subject: [PATCH 24/36] Replaced fetching func from Text component with useNFTContentType --- packages/components/src/MediaObject.tsx | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/packages/components/src/MediaObject.tsx b/packages/components/src/MediaObject.tsx index 8bd69263..c38e1573 100644 --- a/packages/components/src/MediaObject.tsx +++ b/packages/components/src/MediaObject.tsx @@ -1,6 +1,6 @@ +// @ts-nocheck /** @jsxImportSource theme-ui */ -import { useState, useEffect } from 'react' import { useNFTContentType } from '@cura/hooks' import { Placeholder } from './Placeholder' @@ -12,24 +12,16 @@ type mediaObjectProps = { autoPlay?: boolean } -function Text({ mediaURI, width, height }: mediaObjectProps) { - const [content, setContent] = useState('') - - useEffect(() => { - fetch(mediaURI) - .then((r) => r.text()) - .then((r) => setContent(r)) - }, []) - +function Text({ width, height, content }) { return ( -
{content} -
+ ) } @@ -81,13 +73,13 @@ function Iframe({ mediaURI, width, height }: mediaObjectProps) { } export function MediaObject(props: mediaObjectProps) { - const { loading, data } = useNFTContentType(props.mediaURI) + const { loading, data, content } = useNFTContentType(props.mediaURI) if (props.loading || loading) { return ( ) @@ -103,7 +95,7 @@ export function MediaObject(props: mediaObjectProps) { return