prepare NFT image creation

src/@utils/nft.ts

@@ -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',
+    name: 'Ocean Asset v4 NFT',
-    symbol: 'OCEAN-V4',
+    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

src/components/@shared/FormFields/Nft/index.tsx

@@ -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>
   )

src/components/Publish/_constants.tsx

@@ -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: '',