oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

prepare NFT image creation

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-11-15 20:47:59 +00:00
parent abfe920150
commit 08c42e8fa6
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/@utils/nft.ts
View File

@ -24,12 +24,20 @@ function encodeSvg(svgString: string): string {
}
export function generateNftOptions(): NftOptions {
const image = '<svg></svg>'
// TODO: generate new SVG image here
// @images/arrow.svg test
const image = `<svg><path d="M0 10.4304L16.3396 10.4304L8.88727 17.6833L10.2401 19L20 9.5L10.2401 0L8.88727 1.31491L16.3396 8.56959L0 8.56959V10.4304Z" /></svg>`
const newNft: NftOptions = {
name: 'Ocean Asset v4',
symbol: 'OCEAN-V4',
name: 'Ocean Asset v4 NFT',
symbol: 'OCEAN-V4-NFT',
description: `This NFT represents an asset in the Ocean Protocol v4 ecosystem.`,
image: `data:image/svg+xml,${encodeSvg(image)}` // generated SVG embedded as 'data:image/svg+xml;base64'
// TODO: figure out if also image URI needs base64 encoding
// generated SVG embedded as 'data:image/svg+xml' and encoded characters
image: `data:image/svg+xml,${encodeSvg(image)}`
// generated SVG embedded as 'data:image/svg+xml;base64'
// image: `data:image/svg+xml;base64,${window?.btoa(image)}`
// image: `data:image/svg+xml;base64,${Buffer.from(image).toString('base64')}`
}
return newNft
@ -40,7 +48,9 @@ export function generateNftCreateData(nftOptions: NftOptions): any {
name: nftOptions.name,
symbol: nftOptions.symbol,
templateIndex: 1,
tokenURI: Buffer.from(JSON.stringify(nftOptions)).toString('base64') // data:application/json;base64
// TODO: figure out if Buffer.from method is working in browser in final build
tokenURI: window?.btoa(JSON.stringify(nftOptions))
// tokenURI: Buffer.from(JSON.stringify(nftOptions)).toString('base64') // should end up as data:application/json;base64
}
return nftCreateData

4
src/components/@shared/FormFields/Nft/index.tsx
View File

@ -18,12 +18,14 @@ export default function Nft(props: InputProps): ReactElement {
return (
<div className={styles.nft}>
<figure className={styles.image}>
<img src="//placekitten.com/g/128/128" width="128" height="128" />
<img src={field?.value?.image} width="128" height="128" />
</figure>
<div className={styles.token}>
<strong>{field?.value?.name}</strong> —{' '}
<strong>{field?.value?.symbol}</strong>
<br />
{field?.value?.description}
</div>
</div>
)

2
src/components/Publish/_constants.tsx
View File

@ -36,7 +36,7 @@ export const initialValues: FormPublishData = {
chainId: 1,
accountId: '',
metadata: {
nft: { name: '', symbol: '', tokenURI: '' },
nft: { name: '', symbol: '', description: '', image: '' },
type: 'dataset',
name: '',
author: '',