nextjs前端dapp实现可以合成的NFT（中）

最新推荐文章于 2024-07-16 17:18:30 发布

luckys.one

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量232

点赞数

分类专栏：以太坊ERC721全栈开发开NFT合集从入门到项目实战项目文章标签：前端 javascript 开发语言智能合约区块链

本文链接：https://blog.csdn.net/qq_36936892/article/details/130200715

版权

以太坊ERC721全栈开发开NFT合集从入门到项目实战项目专栏收录该内容

15 篇文章 1 订阅

订阅专栏

介绍

一个开源solidity合集仓库
https://github.com/qdwds/smart-contracts
以太坊ERC721全栈开发开NFT合集从入门到项目实战项目
https://learnblockchain.cn/course/31
https://edu.51cto.com/course/33566.html

一起学习吧

我们一起沟通、交流、学习吧！

可合成的NFT

这一章节主要是前端实现NFT的项目架构。

项目目录

.
├── README.md
├── abi
│   └── ComposeNFT.json
├── components
│   ├── Botton
│   │   └── index.tsx
│   ├── Header
│   │   └── index.tsx
│   └── NFT
│       └── index.tsx
├── deploy.sh
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── api
│   │   └── hello.ts
│   └── index.tsx
├── pnpm-lock.yaml
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
├── src
│   └── rainbowkit.ts
├── styles
│   └── globals.css
└── tsconfig.json

@rainbow-me/rainbowkit


import {
    getDefaultWallets
} from '@rainbow-me/rainbowkit';
import { configureChains, createClient } from 'wagmi';
import { hardhat, goerli } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';

export const { chains, provider } = configureChains(
    [hardhat, goerli],
    [
        publicProvider()
    ]
);

const { connectors } = getDefaultWallets({
    appName: 'My RainbowKit App',
    chains
});

export const wagmiClient = createClient({
    autoConnect: true,
    connectors,
    provider
})

_app.tsx

app.tsx为主要文件，里面引入了@rainbow-me/rainbowkit' 作为连接钱包。


import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { WagmiConfig } from 'wagmi';
import '@rainbow-me/rainbowkit/styles.css';
import { wagmiClient, chains } from "../src/rainbowkit";
import Header from "../components/Header";
import { hardhat, goerli } from 'wagmi/chains';

export default function App({ Component, pageProps }: AppProps) {
    return (
        <>
            <WagmiConfig client={wagmiClient}>
                <RainbowKitProvider chains={chains} initialChain={goerli}>
                    <Header></Header>
                    <Component {...pageProps} />
                </RainbowKitProvider>
            </WagmiConfig>
        </>
    )
}

_document.tsx


import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Hardhat.tsx组件

当前组件主要功能就是页面的头部，包括功能有引入钱包连接功能.

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
import Button from '@mui/material/Button';

import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Link from 'next/link';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

import Fade from '@mui/material/Fade';
const menu = [
    {
        path: "/",
        name: "NFT"
    }

]


export default function Header(props: any) {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    return (
        <Box sx={{ display: 'flex' }}>
            <CssBaseline />
            <AppBar position='static'>
                <Toolbar>

                    <Typography
                        variant="h6"
                        component="div"
                        sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
                    >
                        <Link href={"/"}>
                            <span style={{ width: "200px", cursor: "grabbing" }}>
                                NFT全栈开发
                            </span>
                        </Link>
                    </Typography>
                    <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
                        {menu.map(m => (
                            <Link href={m.path} key={m.name}>
                                <Button sx={{ color: '#fff' }}>{m.name}</Button>
                            </Link>
                        ))}
                        <Button sx={{ color: '#fff' }} onClick={() => window.open("https://qdwds.github.io/nftdocs/#/")}>docs</Button>
                        <Button
                            id="fade-button"
                            aria-controls={open ? 'fade-menu' : undefined}
                            aria-haspopup="true"
                            aria-expanded={open ? 'true' : undefined}
                            onClick={handleClick}
                            sx={{ color: "white" }}
                        >
                            课程地址
                        </Button>
                        <Menu
                            id="fade-menu"
                            MenuListProps={{
                                'aria-labelledby': 'fade-button',
                            }}
                            anchorEl={anchorEl}
                            open={open}
                            onClose={handleClose}
                            TransitionComponent={Fade}
                        >
                            <MenuItem onClick={() => window.open("https://learnblockchain.cn/course/31")}>登链社区</MenuItem>
                            <MenuItem onClick={() => window.open("https://edu.51cto.com/course/33566.html")}>51cto（可开发票）</MenuItem>
                            <MenuItem onClick={() => window.open("https://m.qlchat.com/api/gos?target=%2Fwechat%2Fpage%2Fchannel-intro%3FchannelId%3D2000019546152808%26ch_r%3DshareR1%26shareKey%3D32092306e23644dc8f74d65ceaf42031free%26sourceNo%3Dlink&pre=%2Fwechat%2Fpage%2Flive%2F2000019546239707%3FisBackFromShare%3DY%26wcl%3Dmiddlepage")}>千聊</MenuItem>
                        </Menu>
                    </Box>
                    <Box sx={{ marginLeft: 6 }}>
                        <ConnectButton />
                    </Box>
                </Toolbar>
            </AppBar>

        </Box>
    );
}