ABasicContract_of_YangJiefeng.sol

Workshop_Delivery/Solidity_Basics_Workshop/ABasicContract_of_YangJiefeng.sol

@@ -0,0 +1,20 @@
+//指定solidity编译器版本
+pragma solidity ^0.8.0;
+
+//定义合约，类似于一个类
+contract MyContract {
+
+ //定义一个状态变量
+ uint public myVariable;
+
+ //定义一个函数，用来更新状态变量
+ function updateVariable(uint newValue) public {
+ myVariable = newValue;
+ }
+
+ //定义一个函数，返回状态变量的值
+ function getVariable() public view returns (uint) {
+ return myVariable;
+ }
+}
+

Workshop_Delivery/Solidity_Improvement_Workshop/Solidity_Improvement_Workshop_of_YangJiefeng/MyToken.sol

@@ -0,0 +1,16 @@
+pragma solidity ^0.8.0;
+
+import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
+
+contract MyToken is ERC20 {
+ constructor(uint256 initialSupply) ERC20("My Token", "YJF") {
+ _mint(msg.sender, initialSupply);
+ }
+}
+// 在 BNB Chain 的 testnet 上发布了这个合约，
+// 
+// 部署的合约地址：
+// 0x6Ddc97A3225f4F4F8e8F0C6f8cb153AED9684f86
+// 
+// 初始供应量为 10000000.000000000000000000 个（精度为 18 位小数）。
+// 代币符号 YJF

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https:/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https:/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/components/NFTCard.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+
+//component that takes an nft object and maps it to corresponding elements
+const NFTCard = ({ nft }) => {
+ return (
+ <div className="col pt-4 ">
+ <div className='card shadow-lg p-2'>
+ <img src={nft.metadata.image} alt="NFT" className="card-image-top" />
+ <div className="card-body">
+ <h5 className="card-title text-dark">{nft.metadata.name}</h5>
+ <p className="card-text text-dark">{nft.metadata.description}</p>
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default NFTCard;

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/components/NFTGallery.tsx

@@ -0,0 +1,19 @@
+
+//@ts-nocheck
+import React from 'react';
+import NFTCard from './NFTCard';
+
+const NFTGallery = ({props}) => {
+ const nfts = JSON.parse(props)
+ console.log("NFT objects:")
+ console.log(nfts)
+ return (
+ <div className='container mx-auto pt-1 mb-4'>
+ <div className='row row-cols-lg-4'>
+ {nfts.map(token => <NFTCard key={token.index} nft={token}/>)}
+ </div>
+ </div>
+ );
+}
+
+export default NFTGallery;

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ reactStrictMode: true,
+}
+
+module.exports = nextConfig

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/package.json

@@ -0,0 +1,26 @@
+{
+ "name": "my-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "next lint"
+ },
+ "dependencies": {
+ "@bnb-chain/zkbnb-js-sdk": "^4.4.1",
+ "@types/node": "18.15.11",
+ "@types/react": "18.0.34",
+ "@types/react-dom": "18.0.11",
+ "autoprefixer": "10.4.14",
+ "eslint": "8.38.0",
+ "eslint-config-next": "13.3.0",
+ "next": "13.3.0",
+ "postcss": "8.4.21",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "tailwindcss": "3.3.1",
+ "typescript": "5.0.4"
+ }
+}

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/pages/_app.tsx

@@ -0,0 +1,6 @@
+import '@/styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+ return <Component {...pageProps} />
+}

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/pages/_document.tsx

@@ -0,0 +1,16 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+ return (
+ <Html lang="en">
+ <Head>
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossOrigin="anonymous"></link>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossOrigin="anonymous" async></script>
+ </Head>
+ <body>
+ <Main />
+ <NextScript />
+ </body>
+ </Html>
+ )
+}

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+ name: string
+}
+
+export default function handler(
+ req: NextApiRequest,
+ res: NextApiResponse<Data>
+) {
+ res.status(200).json({ name: 'John Doe' })
+}

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/pages/index.tsx

@@ -0,0 +1,68 @@
+import Image from 'next/image'
+import { Inter } from 'next/font/google'
+import { Client } from '@bnb-chain/zkbnb-js-sdk'
+import Head from 'next/head'
+import NFTGallery from '@/components/NFTGallery'
+
+const inter = Inter({ subsets: ['latin'] })
+
+const client = new Client('https://api-testnet.zkbnbchain.org')
+
+async function fetchNFT() {
+ // first get the account index by address
+ const acct_res = await client.getAccountByL1Address("0x4b0469Dc710690403984369dA374B439fa215378")
+
+ // then get the NFTs by account index
+ const index = acct_res.index
+ const requestParm = {accountIndex: index, offset: 0, limit: 10}
+ const data = await client.getNftsByAccountIndex(requestParm)
+
+ // preload all the metadata
+ for (const nft of data.nfts) {
+ const metadata_url = 'https://ipfs.io/ipfs/' + nft.ipfs_id
+ const resp = await fetch(metadata_url)
+ const resp_json = await resp.json()
+ nft.metadata = JSON.parse(resp_json.meta_data)
+ }
+
+ return data.nfts
+}
+
+export const getStaticProps = async () => {
+ try {
+ console.log("Getting NFTs...")
+
+ const nfts = await fetchNFT()
+ const props = JSON.stringify(nfts)
+
+ return {
+ props: {
+ props
+ },
+ revalidate: 3600
+ };
+ } catch (err) {
+ console.error('page error', err)
+ // we don't want to publish the error version of this page, so
+ // let next.js know explicitly that incremental SSG failed
+ throw err
+ }
+}
+
+
+export default function Home(props) {
+ return (
+ <>
+ <Head>
+ <title>Create Next App</title>
+ <meta name="description" content="Generated by create next app" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon" href="/favicon.ico" />
+ </Head>
+ <main>
+ <h1>Jack&apos;s zkBNB NFT</h1>
+ <NFTGallery {...props} />
+ </main>
+ </>
+ )
+}

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/styles/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+ }
+}
+
+body {
+ color: rgb(var(--foreground-rgb));
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgb(var(--background-end-rgb))
+ )
+ rgb(var(--background-start-rgb));
+}

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx}',
+ './components/**/*.{js,ts,jsx,tsx}',
+ './app/**/*.{js,ts,jsx,tsx}',
+ ],
+ theme: {
+ extend: {
+ backgroundImage: {
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+ 'gradient-conic':
+ 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+ },
+ },
+ },
+ plugins: [],
+}

Workshop_Delivery/zkBNB_Workshop/zkBNB_Workshop_of_YangJiefeng/my-app/tsconfig.json

@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "paths": {
+ "@/*": ["./*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}