= []
38 |
39 | for await (const chunk of resp) {
40 | content = [...content, ...chunk]
41 | }
42 |
43 | const raw = Buffer.from(content).toString('utf8')
44 |
45 | return JSON.parse(raw)
46 | } catch (error) {
47 | console.log('error', error)
48 | }
49 | }
50 |
51 | const processTokenUris = async () => {
52 | const nftData = await Promise.all(
53 | nftTokenUris.map(async (tokenUri: any = '') => {
54 | if (tokenUri) {
55 | const ipfsHash = tokenUri.replace('https://ipfs.io/ipfs/', '')
56 | const ipfsData = await fetchNftData(ipfsHash)
57 | return ipfsData
58 | }
59 |
60 | return {
61 | image: '',
62 | name: '',
63 | }
64 | })
65 | )
66 |
67 | setNfts(nftData)
68 | }
69 |
70 | processTokenUris()
71 | }, [ipfs, nftTokenUris])
72 |
73 | if (nftTokenUris.length === 0) {
74 | return (
75 |
76 |
77 | No NFTs associated with your address: {address}
78 |
79 | )
80 | }
81 |
82 | return (
83 |
84 |
85 | {nfts.map((nft) => {
86 | return (
87 |
96 |
102 |
103 |
104 | {nft.name}
105 |
106 | {nft.description}
107 |
108 |
109 | )
110 | })}
111 |
112 |
113 | )
114 | }
115 |
--------------------------------------------------------------------------------
/frontend/components/layout/Head.tsx:
--------------------------------------------------------------------------------
1 | import NextHead from 'next/head'
2 | import { useRouter } from 'next/router'
3 |
4 | /**
5 | * Constants & Helpers
6 | */
7 | export const WEBSITE_HOST_URL = 'https://nextjs-ethereum-starter.vercel.app/'
8 |
9 | /**
10 | * Prop Types
11 | */
12 | export interface MetaProps {
13 | description?: string
14 | image?: string
15 | title: string
16 | type?: string
17 | }
18 |
19 | /**
20 | * Component
21 | */
22 | export const Head = ({
23 | customMeta,
24 | }: {
25 | customMeta?: MetaProps
26 | }): JSX.Element => {
27 | const router = useRouter()
28 | const meta: MetaProps = {
29 | title: 'Next.js Ethereum Starter',
30 | description: 'Next.js - RainbowKit - Hardhat',
31 | image: `${WEBSITE_HOST_URL}/images/site-preview.png`,
32 | type: 'website',
33 | ...customMeta,
34 | }
35 |
36 | return (
37 |
38 | {meta.title}
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | )
54 | }
55 |
--------------------------------------------------------------------------------
/frontend/components/layout/Layout.tsx:
--------------------------------------------------------------------------------
1 | import { Container, Flex, Link, SimpleGrid, Text } from '@chakra-ui/react'
2 | import { ConnectButton } from '@rainbow-me/rainbowkit'
3 | import NextLink from 'next/link'
4 | import React from 'react'
5 | import { LocalFaucetButton } from '../LocalFaucetButton'
6 | import { Head, MetaProps } from './Head'
7 |
8 | interface LayoutProps {
9 | children: React.ReactNode
10 | customMeta?: MetaProps
11 | }
12 |
13 | export const Layout = ({ children, customMeta }: LayoutProps): JSX.Element => {
14 | return (
15 | <>
16 |
17 |