{"id":5914,"date":"2022-10-08T16:37:32","date_gmt":"2022-10-08T08:37:32","guid":{"rendered":"https:\/\/i007.vip:15443\/wordpress\/?p=5914"},"modified":"2022-10-08T16:37:32","modified_gmt":"2022-10-08T08:37:32","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8%e4%bb%a5%e5%a4%aa%e5%9d%8a%e6%88%96%e4%b9%90%e8%a7%82%e4%b8%8a%e6%9e%84%e5%bb%ba-nft-%e5%b8%82%e5%9c%ba-dapp%c2%b6","status":"publish","type":"post","link":"https:\/\/i007.cc\/wordpress\/archives\/5914","title":{"rendered":"\u5982\u4f55\u5728\u4ee5\u592a\u574a\u6216\u4e50\u89c2\u4e0a\u6784\u5efa NFT \u5e02\u573a DApp\u00b6"},"content":{"rendered":"<p id=\"how-to-build-a-nft-marketplace-dapp-on-ethereum-or-optimism\"><a href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/\">\u539f\u6587\u5730\u5740<\/a><\/p>\n<p>\u00a0<\/p>\n<p><span><a href=\"https:\/\/twitter.com\/_emjlin\">\u7531\u827e\u7c73\u4e3d\u00b7\u6797\uff08 Emily Lin<\/a>\uff09\u64b0\u5199<\/span><\/p>\n<h2 id=\"overview\"><span>\u6982\u8ff0<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#overview\"><span>\u00b6<\/span><\/a><\/h2>\n<p><span>\u4eca\u5929\uff0c\u6211\u4eec\u5c06\u6784\u5efa Bored Pets Marketplace\uff0c\u4e00\u4e2a\u4f7f\u7528<\/span><a href=\"https:\/\/trufflesuite.com\/\"><span>Truffle<\/span><\/a><span>\u3001<\/span><a href=\"https:\/\/infura.io\/\"><span>Infura<\/span><\/a><span>\u3001<\/span><a href=\"https:\/\/metamask.io\/\"><span>MetaMask<\/span><\/a><span>\u548c<\/span><a href=\"https:\/\/web3js.readthedocs.io\/\"><span>Web3.js<\/span><\/a><span>\u7684\u7b80\u5355 NFT \u5e02\u573a\uff01\u6211\u4eec\u5c06\u4ece\u57fa\u7840\u5f00\u59cb\uff0c\u9996\u5148\u5411\u60a8\u5c55\u793a\u5982\u4f55\u5c06\u60a8\u7684\u4ee5\u592a\u574a\u5408\u7ea6\u90e8\u7f72\u5230 Truffle \u7684\u672c\u5730\u533a\u5757\u94fe\u3001Ganache \u548c Goerli \u6d4b\u8bd5\u7f51\u3002\u7136\u540e\uff0c\u6211\u4eec\u5c06\u5411\u60a8\u5c55\u793a\u5982\u4f55\u5c06\u8fd9\u4e9b\u5408\u7ea6\u8f6c\u6362\u4e3a Optimism \u5e76\u90e8\u7f72\u5728 Optimistic Goerli \u6d4b\u8bd5\u7f51\u4e0a\u3002\u8bf7\u6ce8\u610f\uff0c\u672c\u6559\u7a0b\u4e0d\u4f1a\u6559\u60a8 Javascript\uff0c\u53ea\u4f1a\u7b80\u8981\u4ecb\u7ecd\u4e00\u4e9b Solidity \u539f\u5219\u3002<\/span><\/p>\n<p><span>\u6211\u4eec\u7684\u5e02\u573a\u5177\u6709\u4e00\u7ec4\u6838\u5fc3\u529f\u80fd\uff1a 1. \u94f8\u9020\u548c\u5217\u51fa NFT 2. \u4e70\u5356 NFT 3. \u67e5\u770b\u5217\u51fa\u7684 NFT\u3001\u60a8\u62e5\u6709\u7684 NFT \u4ee5\u53ca\u60a8\u6b63\u5728\u51fa\u552e\u7684 NFT<\/span><\/p>\n<p><span>\u672c\u6559\u7a0b\u7684\u7075\u611f\u6765\u81ea Nader Dabit \u7684<\/span><a href=\"https:\/\/dev.to\/edge-and-node\/building-scalable-full-stack-apps-on-ethereum-with-polygon-2cfb\"><span>\u5e02\u573a\u6559\u7a0b<\/span><\/a><span>\u3002\u4ed6\u7684\u6559\u7a0b\u4f7f\u7528<\/span><a href=\"https:\/\/docs.ethers.io\/\"><span>ethers.js<\/span><\/a><span>\u5e76\u90e8\u7f72\u5230 Polygon\uff0c\u60a8\u90fd\u53ef\u4ee5\u4f7f\u7528 Truffle\uff01<\/span><\/p>\n<p><span>\u672c\u6559\u7a0b\u7684\u5b8c\u6574\u4ee3\u7801\u4f4d\u4e8e<\/span><a href=\"https:\/\/github.com\/truffle-box\/nft-marketplace-box\"><span>\u6b64\u5904<\/span><\/a><span>\u3002<\/span><\/p>\n<h2 id=\"prerequisites\"><span>\u5148\u51b3\u6761\u4ef6<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#prerequisites\"><span>\u00b6<\/span><\/a><\/h2>\n<h3 id=\"system-requirements\"><span>\u7cfb\u7edf\u8981\u6c42<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#system-requirements\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u6211\u4eec\u5c06\u4ece Truffle \u7684<\/span><a href=\"https:\/\/github.com\/truffle-box\/optimism-box\"><span>Optimism \u6846<\/span><\/a><span>\u5f00\u59cb\uff0c\u642d\u5efa\u4ee3\u7801\u4ee5\u5e2e\u52a9\u60a8\u914d\u7f6e Truffle \u9879\u76ee\u4ee5\u5c3d\u5feb\u5f00\u59cb\u4f7f\u7528 Optimism\uff01<\/span><a href=\"https:\/\/github.com\/truffle-box\/optimism-box#readme\"><span>\u81ea\u8ff0\u6587\u4ef6<\/span><\/a><span>\u66f4\u8be6\u7ec6\u5730\u89e3\u91ca\u4e86\u9879\u76ee\u7ed3\u6784\u3002<\/span><\/p>\n<p><span>\u81f3\u5c11\uff0c\u60a8\u9700\u8981\u5b89\u88c5\uff1a<\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\"><span>Node.js<\/span><\/a><span>\u00a0, v12 \u6216\u66f4\u9ad8\u7248\u672c<\/span><\/li>\n<li><a href=\"https:\/\/trufflesuite.com\/docs\/truffle\/getting-started\/installation\/?utm_source=blog&#038;utm_medium=post&#038;utm_campaign=2022_May_truffle-blog-nft-marketplace_acquisition_content\"><span>\u677e\u9732<\/span><\/a><\/li>\n<li><a href=\"https:\/\/trufflesuite.com\/ganache\/?utm_source=blog&#038;utm_medium=post&#038;utm_campaign=2022_May_truffle-blog-nft-marketplace_acquisition_content\"><span>\u4f3d\u7eb3\u5f7b<\/span><\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/community.optimism.io\/docs\/developers\/build\/dev-node\/#prerequisites\"><span>\u5982\u679c\u4f60\u60f3\u5728\u672c\u5730\u8fd0\u884cOptimism<\/span><\/a><span>\uff0c\u4f60\u4e5f\u9700\u8981\u8fd9\u4e9b\u5148\u51b3\u6761\u4ef6\u3002<\/span><\/p>\n<h3 id=\"create-an-infura-account-and-project\"><span>\u521b\u5efa Infura \u5e10\u6237\u548c\u9879\u76ee<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#create-an-infura-account-and-project\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8981\u5c06\u60a8\u7684 DApp \u8fde\u63a5\u5230 Ethereum\u3001Optimism \u548c\u5176\u4ed6\u7f51\u7edc\uff0c\u60a8\u9700\u8981\u4e00\u4e2a Infura \u5e10\u6237\u3002<\/span><a href=\"https:\/\/infura.io\/register?utm_source=blog&#038;utm_medium=post&#038;utm_campaign=2022_May_truffle-blog-nft-marketplace_acquisition_content\"><span>\u5728\u8fd9\u91cc<\/span><\/a><span>\u6ce8\u518c\u4e00\u4e2a\u5e10\u6237\u3002<\/span><\/p>\n<p><span>\u767b\u5f55\u540e\uff0c\u521b\u5efa\u4e00\u4e2a\u9879\u76ee\uff01\u8ba9\u6211\u4eec\u79f0\u4e4b\u4e3a<\/span><code>nft-marketplace<\/code><span>\u3002\u7531\u4e8e\u6211\u4eec\u6b63\u5728\u90e8\u7f72\u5230 Optimism\uff0c\u8bf7\u7ee7\u7eed\u6dfb\u52a0 Optimistic Goerli \u7aef\u70b9\u3002\u5b83\u4f1a\u8981\u6c42\u60a8\u6ce8\u518c\u514d\u8d39\u8bd5\u7528\u3002<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/img\/choose_optimistic_goerli.gif\" alt=\"\u6dfb\u52a0\u4e50\u89c2\u6b4c\u5c14\u793c\u7684GIF\" \/><\/p>\n<h3 id=\"register-for-a-metamask-wallet\"><span>\u6ce8\u518c MetaMask \u94b1\u5305<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#register-for-a-metamask-wallet\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8981\u5728\u6d4f\u89c8\u5668\u4e2d\u4e0e\u60a8\u7684 DApp \u4ea4\u4e92\uff0c\u60a8\u9700\u8981\u4e00\u4e2a MetaMask \u94b1\u5305\u3002<\/span><a href=\"https:\/\/metamask.io\/download\/?utm_source=blog&#038;utm_medium=post&#038;utm_campaign=2022_May_truffle-blog-nft-marketplace_acquisition_content\"><span>\u5728\u8fd9\u91cc<\/span><\/a><span>\u6ce8\u518c\u4e00\u4e2a\u5e10\u6237\u3002<\/span><\/p>\n<h3 id=\"add-optimistic-goerli-to-your-wallet\"><span>\u5c06 Optimistic Goerli \u6dfb\u52a0\u5230\u60a8\u7684\u94b1\u5305<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#add-optimistic-goerli-to-your-wallet\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8ba9\u6211\u4eec\u5c06 Optimistic Goerli \u6dfb\u52a0\u5230\u60a8\u7684 MetaMask \u94b1\u5305\u7684\u53ef\u7528\u7f51\u7edc\u5217\u8868\u4e2d\uff01\u4e3a\u6b64\uff0c\u8bf7\u6253\u5f00 MetaMask \u6269\u5c55\uff0c\u5355\u51fb\u7f51\u7edc\uff0c\u7136\u540e\u5355\u51fb\u6dfb\u52a0\u7f51\u7edc\u3002\u7136\u540e\uff0c\u586b\u5199\u7f51\u7edc\u5c5e\u6027\uff08\u60a8\u53ef\u4ee5\u4ece\u60a8\u7684 Infura \u9879\u76ee\u4e2d\u590d\u5236\u60a8\u7684 Infura idf\uff09\uff1a<\/span><\/p>\n<ul>\n<li><span>\u7f51\u7edc\u540d\u79f0\uff1a\u4e50\u89c2\u6b4c\u5c14\u91cc<\/span><\/li>\n<li><span>\u65b0\u7684 RPC URL\uff1ahttps:\/\/optimism-goerli.infura.io\/v3\/INFURA_PROJECT_ID<\/span><\/li>\n<li><span>\u94fe\u53f7\uff1a420<\/span><\/li>\n<li><span>\u8d27\u5e01\u7b26\u53f7\uff1aETH<\/span><\/li>\n<li><span>\u533a\u5757\u6d4f\u89c8\u5668\u7f51\u5740\uff1ahttps:\/\/blockscout.com\/optimism\/goerli\/<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/img\/add_optimistic_goerli.gif\" alt=\"\u6dfb\u52a0\u4e50\u89c2\u6b4c\u5c14\u793c\u7684GIF\" \/><\/p>\n<h3 id=\"get-optimistic-goerli-eth\"><span>\u83b7\u53d6\u4e50\u89c2\u7684 Goerli Eth<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#get-optimistic-goerli-eth\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8981\u4f7f\u7528 Optimistic Goerli \u6d4b\u8bd5\u7f51\uff0c\u60a8\u9700\u8981\u4e00\u4e9b\u6d4b\u8bd5 eth\u3002\u4e3a\u6b64\uff0c\u60a8\u9700\u8981\uff1a<\/span><\/p>\n<p><span>1) \u83b7\u53d6\u4e00\u4e9b Goerli Eth\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e2a<\/span><a href=\"https:\/\/faucet.paradigm.xyz\/\"><span>\u6c34\u9f99\u5934<\/span><\/a><span>2) Optimism \u7684\u7f51\u5173\u4ecd\u7136\u4e0d\u652f\u6301 Goerli\uff0c\u4f46\u662f\u5982\u679c\u4f60\u5c06 Goerli ETH \u8f6c\u79fb\u5230<\/span><a href=\"https:\/\/goerli.etherscan.io\/address\/0x636Af16bf2f682dD3109e60102b8E1A089FedAa8\"><span>0x636Af16bf2f682dD3109e60102b8E1A089FedAa8<\/span><\/a><span>\uff0c\u4f60\u4f1a\u5728 Optimistic Goerli \u4e0a\u5f97\u5230\u5b83\u3002<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/img\/get_optimistic_goerli_eth.gif\" alt=\"\u83b7\u5f97\u4e50\u89c2 Goerli Eth \u7684 GIF\" \/><\/p>\n<h3 id=\"vscode\"><span>VSCode<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#vscode\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u968f\u610f\u4f7f\u7528\u60a8\u60f3\u8981\u7684\u4efb\u4f55 IDE\uff0c\u4f46\u6211\u4eec\u5f3a\u70c8\u5efa\u8bae\u4f7f\u7528 VSCode\uff01\u60a8\u53ef\u4ee5\u4f7f\u7528 Truffle \u6269\u5c55\u6765\u5b8c\u6210\u672c\u6559\u7a0b\u7684\u5927\u90e8\u5206\u5185\u5bb9\uff0c\u4ee5\u521b\u5efa\u3001\u6784\u5efa\u548c\u90e8\u7f72\u60a8\u7684\u667a\u80fd\u5408\u7ea6\uff0c\u800c\u65e0\u9700\u4f7f\u7528 CLI\uff01<\/span><a href=\"https:\/\/trufflesuite.com\/blog\/build-on-web3-with-truffle-vs-code-extension\/\"><span>\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc<\/span><\/a><span>\u9605\u8bfb\u66f4\u591a\u5173\u4e8e\u5b83\u7684\u4fe1\u606f\u3002<\/span><\/p>\n<h2 id=\"set-up-your-project\"><span>\u8bbe\u7f6e\u60a8\u7684\u9879\u76ee<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#set-up-your-project\"><span>\u00b6<\/span><\/a><\/h2>\n<h3 id=\"unbox-optimism\"><span>\u62c6\u7bb1\u4e50\u89c2<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#unbox-optimism\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u9996\u5148\uff0c\u6211\u4eec\u5c06\u6253\u5f00 Truffle \u7684 Optimism \u76d2\u5b50\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u8c03\u7528<\/span><code>truffle unbox optimism [FOLDER_NAME]<\/code><span>\u6216\u901a\u8fc7 VSCode \u6269\u5c55\u547d\u4ee4\u9762\u677f\u6765\u505a\u5230\u8fd9\u4e00\u70b9\uff01\u7ee7\u7eed\u5b89\u88c5\u5fc5\u8981\u7684\u8f6f\u4ef6\u5305\u3002<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_1\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_1 > code\"><\/button><code>truffle unbox optimism nft-marketplace\r\n<span class=\"nb\">cd<\/span> nft-marketplace\r\nnpm install\r\n<\/code><\/pre>\n<\/div>\n<h3 id=\"create-your-client-folders\"><span>\u521b\u5efa\u60a8\u7684\u5ba2\u6237\u6587\u4ef6\u5939<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#create-your-client-folders\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u6211\u4eec\u8fd8\u5c06\u4e3a\u6211\u4eec\u7684\u5ba2\u6237\u7aef\u4f7f\u7528<\/span><a href=\"https:\/\/nextjs.org\/\"><span>Next.js<\/span><\/a><span>\u548c<\/span><a href=\"https:\/\/tailwindcss.com\/\"><span>Tailwind CSS<\/span><\/a><span>\u3002\u56e0\u6b64\uff0c\u4e3a\u4e86\u8fdb\u884c\u8bbe\u7f6e\uff0c\u6211\u4eec\u5c06\u4f7f\u7528 Next \u7684<\/span><a href=\"https:\/\/nextjs.org\/docs\/api-reference\/create-next-app\"><span>create-next-app<\/span><\/a><span>\u5b9e\u7528\u7a0b\u5e8f\u3002<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_2\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_2 > code\"><\/button><code>npx create-next-app@latest client\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u7136\u540e\uff0c\u6211\u4eec\u5c06\u4e0b\u8f7d Tailwind \u4f9d\u8d56\u9879\u5e76\u586b\u5145\u5176\u914d\u7f6e\u3002<\/span><\/p>\n<p>\u00a0<\/p>\n<div class=\"highlight\">\n<pre id=\"__code_3\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_3 > code\"><\/button><code><span class=\"nb\">cd<\/span> client\r\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\r\nnpx tailwindcss init -p\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u7f16\u8f91<\/span><code>tailwind.config.js<\/code><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<div class=\"highlight\">\n<pre id=\"__code_4\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_4 > code\"><\/button><code><span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">content<\/span><span class=\"o\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"s2\">\".\/pages\/**\/*.{js,ts,jsx,tsx}\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"s2\">\".\/components\/**\/*.{js,ts,jsx,tsx}\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">],<\/span>\r\n  <span class=\"nx\">theme<\/span><span class=\"o\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nx\">extend<\/span><span class=\"o\">:<\/span> <span class=\"p\">{},<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"nx\">plugins<\/span><span class=\"o\">:<\/span> <span class=\"p\">[],<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u5e76\u66ff\u6362\u4ee3\u7801<\/span><code>styles\/global.css<\/code><\/p>\n<p>\u00a0<\/p>\n<div class=\"highlight\">\n<pre id=\"__code_5\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_5 > code\"><\/button><code><span class=\"p\">@<\/span><span class=\"k\">tailwind<\/span> <span class=\"nt\">base<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">@<\/span><span class=\"k\">tailwind<\/span> <span class=\"nt\">components<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">@<\/span><span class=\"k\">tailwind<\/span> <span class=\"nt\">utilities<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3 id=\"edit-the-truffle-config-files\"><span>\u7f16\u8f91 Truffle \u914d\u7f6e\u6587\u4ef6<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#edit-the-truffle-config-files\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u7531\u4e8e\u6211\u4eec\u5c06\u5728\u5ba2\u6237\u7aef\u5f15\u7528\u60a8\u7f16\u8bd1\u7684\u5408\u7ea6\uff0c\u8ba9\u6211\u4eec\u66f4\u6539<\/span><code>contracts_build_directory<\/code><span>Truffle \u914d\u7f6e\u6587\u4ef6\uff1a<\/span><\/p>\n<ul>\n<li><span>\u5728<\/span><code>truffle-config.js<\/code><span>\u4e2d\uff0c\u5c06\u503c\u66f4\u6539\u4e3a<\/span><code>'.\/client\/contracts\/ethereum-contracts'<\/code><span>\u3002<\/span><\/li>\n<li><span>\u5728<\/span><code>truffle-config.ovm.js<\/code><span>\u4e2d\uff0c\u5c06\u503c\u66f4\u6539\u4e3a<\/span><code>'.\/client\/contracts\/optimism-contracts'<\/code><span>\u3002<\/span><\/li>\n<\/ul>\n<p><span>\u60a8\u7684\u9876\u7ea7\u6587\u4ef6\u5939\u7ed3\u6784\u5e94\u5982\u4e0b\u6240\u793a\uff01<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_6\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_6 > code\"><\/button><code>nft-marketplace\r\n\u251c\u2500\u2500 LICENSE\r\n\u251c\u2500\u2500 README.md\r\n\u251c\u2500\u2500 box-img-lg.png\r\n\u251c\u2500\u2500 box-img-sm.png\r\n\u251c\u2500\u2500 client\r\n\u251c\u2500\u2500 contracts\r\n\u251c\u2500\u2500 migrations\r\n\u251c\u2500\u2500 node_modules\r\n\u251c\u2500\u2500 package-lock.json\r\n\u251c\u2500\u2500 package.json\r\n\u251c\u2500\u2500 <span class=\"nb\">test<\/span>\r\n\u251c\u2500\u2500 truffle-config.js\r\n\u2514\u2500\u2500 truffle-config.ovm.js\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"build-the-nft-smart-contract\"><span>\u6784\u5efa NFT \u667a\u80fd\u5408\u7ea6<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#build-the-nft-smart-contract\"><span>\u00b6<\/span><\/a><\/h2>\n<p><span>\u7531\u4e8e\u6211\u4eec\u9996\u5148\u5411\u60a8\u5c55\u793a\u5982\u4f55\u5728\u4ee5\u592a\u574a\u4e0a\u8fdb\u884c\u90e8\u7f72\uff0c\u56e0\u6b64\u6211\u4eec\u5c06<\/span><code>SimpleStorage.sol<\/code><span>\u5728<\/span><code>contracts\/ethereum<\/code><span>.\u00a0\u5c06\u6587\u4ef6\u540d\u548c\u5408\u540c\u540d\u79f0\u66f4\u6539\u4e3a<\/span><code>BoredPetsNFT.sol<\/code><span>.<\/span><\/p>\n<p><span>\u6211\u4eec\u9700\u8981\u5b89\u88c5<\/span><a href=\"https:\/\/www.openzeppelin.com\/\"><span>OpenZeppelin<\/span><\/a><span>\u3002\u9996\u5148\uff0c\u5207\u6362\u56de\u60a8\u7684<\/span><code>nft-marketplace<\/code><span>\u76ee\u5f55<\/span><\/p>\n<p>\u00a0<\/p>\n<div class=\"highlight\">\n<pre id=\"__code_7\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_7 > code\"><\/button><code><span class=\"nb\">cd<\/span> ..\r\nnpm install @openzeppelin\/contracts\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u667a\u80fd\u5408\u7ea6\u5982\u4e0b\u6240\u793a\uff1a<\/span><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<div class=\"highlight\">\n<pre id=\"__code_8\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_8 > code\"><\/button><code><span class=\"c1\">\/\/ SPDX-License-Identifier: MIT<\/span>\r\n<span class=\"n\">pragma<\/span> <span class=\"n\">solidity<\/span> <span class=\"o\">^<\/span><span class=\"mf\">0.8.13<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kn\">import<\/span> <span class=\"err\">\"@<\/span><span class=\"nn\">openzeppelin<\/span><span class=\"o\">\/<\/span><span class=\"n\">contracts<\/span><span class=\"o\">\/<\/span><span class=\"n\">token<\/span><span class=\"o\">\/<\/span><span class=\"n\">ERC721<\/span><span class=\"o\">\/<\/span><span class=\"n\">ERC721<\/span><span class=\"p\">.<\/span><span class=\"na\">sol<\/span><span class=\"s\">\";<\/span>\r\n<span class=\"s\">import \"<\/span><span class=\"nd\">@openzeppelin<\/span><span class=\"o\">\/<\/span><span class=\"n\">contracts<\/span><span class=\"o\">\/<\/span><span class=\"n\">token<\/span><span class=\"o\">\/<\/span><span class=\"n\">ERC721<\/span><span class=\"o\">\/<\/span><span class=\"n\">extensions<\/span><span class=\"o\">\/<\/span><span class=\"n\">ERC721URIStorage<\/span><span class=\"p\">.<\/span><span class=\"na\">sol<\/span><span class=\"s\">\";<\/span>\r\n<span class=\"s\">import \"<\/span><span class=\"nd\">@openzeppelin<\/span><span class=\"o\">\/<\/span><span class=\"n\">contracts<\/span><span class=\"o\">\/<\/span><span class=\"n\">utils<\/span><span class=\"o\">\/<\/span><span class=\"n\">Counters<\/span><span class=\"p\">.<\/span><span class=\"na\">sol<\/span><span class=\"s\">\";<\/span>\r\n\r\n<span class=\"s\">contract BoredPetsNFT is ERC721URIStorage {<\/span>\r\n<span class=\"s\">  using Counters for Counters.Counter;<\/span>\r\n<span class=\"s\">  Counters.Counter private _tokenIds;<\/span>\r\n<span class=\"s\">  address marketplaceContract;<\/span>\r\n<span class=\"s\">  event NFTMinted(uint256);<\/span>\r\n\r\n<span class=\"s\">  constructor(address _marketplaceContract) ERC721(\"<\/span><span class=\"n\">Bored<\/span> <span class=\"n\">Pets<\/span> <span class=\"n\">Yacht<\/span> <span class=\"n\">Club<\/span><span class=\"s\">\", \"<\/span><span class=\"n\">BPYC<\/span><span class=\"s\">\") {<\/span>\r\n<span class=\"s\">    marketplaceContract = _marketplaceContract;<\/span>\r\n<span class=\"s\">  }<\/span>\r\n\r\n<span class=\"s\">  function mint(string memory _tokenURI) public {<\/span>\r\n<span class=\"s\">    _tokenIds.increment();<\/span>\r\n<span class=\"s\">    uint256 newTokenId = _tokenIds.current();<\/span>\r\n<span class=\"s\">    _safeMint(msg.sender, newTokenId);<\/span>\r\n<span class=\"s\">    _setTokenURI(newTokenId, _tokenURI);<\/span>\r\n<span class=\"s\">    setApprovalForAll(marketplaceContract, true);<\/span>\r\n<span class=\"s\">    emit NFTMinted(newTokenId);<\/span>\r\n<span class=\"s\">  }<\/span>\r\n<span class=\"s\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u521b\u5efa NFT \u667a\u80fd\u5408\u7ea6\u65e2\u7b80\u77ed\u53c8\u751c\u871c\uff01\u6211\u4eec\u5148\u6765\u770b\u770b\u5bfc\u5165\uff1a<\/span><\/p>\n<p>\u00a0<\/p>\n<ul>\n<li><span>@openzeppelin\/contracts\/token\/ERC721\/ERC721.sol<\/span><\/li>\n<\/ul>\n<p><span>\u8981\u6210\u4e3a\u6709\u6548\u7684 NFT\uff0c\u901a\u8fc7\u7ee7\u627f\u5b9e\u73b0<\/span><code>BoredPetNFT<\/code><span>ERC721<\/span><a href=\"https:\/\/eips.ethereum.org\/EIPS\/eip-721\"><span>\u6807\u51c6<\/span><\/a><code>ERC721URIStorage.sol<\/code><\/p>\n<ul>\n<li><span>@openzeppelin\/contracts\/token\/ERC721\/extensions\/ERC721URIStorage.sol<\/span><\/li>\n<\/ul>\n<p><span>\u4f7f\u7528\u6b64\u5b9e\u73b0\uff0c<\/span><code>ERC721<\/code><span>\u4ee5\u4fbf\u6211\u4eec\u5c06\u94fe\u4e0a\u7684 tokenURI \u5b58\u50a8\u5728 \u4e2d<\/span><code>storage<\/code><span>\uff0c\u8fd9\u4f7f\u6211\u4eec\u80fd\u591f\u5c06\u6211\u4eec\u4e0a\u4f20\u5230\u94fe\u4e0b IPFS \u7684\u5143\u6570\u636e\u5b58\u50a8\u8d77\u6765\u3002<\/span><\/p>\n<ul>\n<li><span>@openzeppelin\/contracts\/utils\/Counters.sol<\/span><\/li>\n<\/ul>\n<p><span>\u6211\u4eec\u4f7f\u7528\u8ba1\u6570\u5668\u6765\u8ddf\u8e2a NFT \u7684\u603b\u6570\uff0c\u5e76\u4e3a\u6bcf\u4e2a NFT \u5206\u914d\u4e00\u4e2a\u552f\u4e00\u7684\u4ee4\u724c ID\u3002<\/span><\/p>\n<p><span>\u5728\u9876\u90e8\uff0c\u6211\u4eec\u5b9a\u4e49\u4e86\u4e00\u4e9b\u53d8\u91cf\uff1a<\/span><\/p>\n<ul>\n<li><code>address marketplaceContract<\/code><span>\u662f\u6211\u4eec\u5c06\u5728\u4e0b\u4e00\u8282\u4e2d\u7f16\u5199\u7684 Marketplace \u5408\u7ea6\u7684\u5730\u5740\u3002<\/span><\/li>\n<li><code>event NFTMinted<\/code><span>\u6bcf\u6b21\u94f8\u9020 NFT \u65f6\u90fd\u4f1a\u53d1\u51fa\u3002\u5f53\u4e8b\u4ef6\u4ee5solidity \u53d1\u51fa\u65f6\uff0c\u53c2\u6570\u5c06\u5b58\u50a8\u5728\u4e8b\u52a1\u7684\u65e5\u5fd7\u4e2d\u3002\u7a0d\u540e\u5728\u6784\u5efa Web \u5e94\u7528\u7a0b\u5e8f\u65f6\uff0c\u6211\u4eec\u5c06\u9700\u8981 tokenId\u3002<\/span><\/li>\n<\/ul>\n<p><span>\u6700\u540e\uff0c\u6211\u4eec\u53ea\u9700\u8981\u5b9a\u4e49<\/span><code>mint<\/code><span>\u51fd\u6570\uff01\u5b83\u53ea\u6709\u4e00\u4e2a\u53c2\u6570\uff1a &#8211;<\/span><code>string memory _tokenURI<\/code><span>\u6307\u5411 IPFS \u4e0a\u5b58\u50a8 NFT \u5143\u6570\u636e\uff08\u5373\u56fe\u50cf\u3001\u540d\u79f0\u3001\u63cf\u8ff0\uff09\u7684 JSON \u5143\u6570\u636e<\/span><\/p>\n<p><code>mint<\/code><span>\u76f8\u5bf9\u7b80\u5355\u2014\u2014\u5b83\u94f8\u9020\u4e86\u4e00\u4e2a\u5177\u6709\u4e0d\u65ad\u589e\u52a0\u7684\u552f\u4e00\u4ee4\u724c ID \u7684 NFT\u3002\u7136\u800c\uff0c\u503c\u5f97\u6ce8\u610f\u7684\u662f<\/span><code>setApprovalForAll<\/code><span>\u3002\u8fd9\u5f88\u91cd\u8981\uff0c\u56e0\u4e3a\u6211\u4eec\u7684\u5e02\u573a\u5408\u7ea6\u9700\u8981\u6279\u51c6\u8005\u8bbf\u95ee\u624d\u80fd\u5728\u4e0d\u540c\u5730\u5740\u4e4b\u95f4\u8f6c\u79fb NFT \u7684\u6240\u6709\u6743\u3002<\/span><\/p>\n<h2 id=\"build-the-marketplace-contract\"><span>\u5efa\u7acb\u5e02\u573a\u5408\u7ea6<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#build-the-marketplace-contract\"><span>\u00b6<\/span><\/a><\/h2>\n<p><code>Marketplace.sol<\/code><span>\u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u5728\u4e0b\u6dfb\u52a0\u4e00\u4e2a\u65b0\u5408\u7ea6<\/span><code>contracts\/ethereum<\/code><span>\uff0c\u5b83\u5c06\u5b58\u50a8\u6240\u6709\u5e02\u573a\u529f\u80fd\u3002\u8fd9\u5c06\u662f\u5b83\u6700\u7ec8\u7684\u6837\u5b50\uff1a<\/span><\/p>\n<p>\u00a0<\/p>\n<div class=\"highlight\">\n<pre id=\"__code_9\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_9 > code\"><\/button><code><span class=\"c1\">\/\/ SPDX-License-Identifier: MIT<\/span>\r\n<span class=\"n\">pragma<\/span> <span class=\"n\">solidity<\/span> <span class=\"o\">^<\/span><span class=\"mf\">0.8.13<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kn\">import<\/span> <span class=\"err\">\"@<\/span><span class=\"nn\">openzeppelin<\/span><span class=\"o\">\/<\/span><span class=\"n\">contracts<\/span><span class=\"o\">\/<\/span><span class=\"n\">utils<\/span><span class=\"o\">\/<\/span><span class=\"n\">Counters<\/span><span class=\"p\">.<\/span><span class=\"na\">sol<\/span><span class=\"s\">\";<\/span>\r\n<span class=\"s\">import \"<\/span><span class=\"nd\">@openzeppelin<\/span><span class=\"o\">\/<\/span><span class=\"n\">contracts<\/span><span class=\"o\">\/<\/span><span class=\"n\">token<\/span><span class=\"o\">\/<\/span><span class=\"n\">ERC721<\/span><span class=\"o\">\/<\/span><span class=\"n\">ERC721<\/span><span class=\"p\">.<\/span><span class=\"na\">sol<\/span><span class=\"s\">\";<\/span>\r\n<span class=\"s\">import \"<\/span><span class=\"nd\">@openzeppelin<\/span><span class=\"o\">\/<\/span><span class=\"n\">contracts<\/span><span class=\"o\">\/<\/span><span class=\"n\">security<\/span><span class=\"o\">\/<\/span><span class=\"n\">ReentrancyGuard<\/span><span class=\"p\">.<\/span><span class=\"na\">sol<\/span><span class=\"s\">\";<\/span>\r\n\r\n<span class=\"s\">contract Marketplace is ReentrancyGuard {<\/span>\r\n<span class=\"s\">  using Counters for Counters.Counter;<\/span>\r\n<span class=\"s\">  Counters.Counter private _nftsSold;<\/span>\r\n<span class=\"s\">  Counters.Counter private _nftCount;<\/span>\r\n<span class=\"s\">  uint256 public LISTING_FEE = 0.0001 ether;<\/span>\r\n<span class=\"s\">  address payable private _marketOwner;<\/span>\r\n<span class=\"s\">  mapping(uint256 => NFT) private _idToNFT;<\/span>\r\n<span class=\"s\">  struct NFT {<\/span>\r\n<span class=\"s\">    address nftContract;<\/span>\r\n<span class=\"s\">    uint256 tokenId;<\/span>\r\n<span class=\"s\">    address payable seller;<\/span>\r\n<span class=\"s\">    address payable owner;<\/span>\r\n<span class=\"s\">    uint256 price;<\/span>\r\n<span class=\"s\">    bool listed;<\/span>\r\n<span class=\"s\">  }<\/span>\r\n<span class=\"s\">  event NFTListed(<\/span>\r\n<span class=\"s\">    address nftContract,<\/span>\r\n<span class=\"s\">    uint256 tokenId,<\/span>\r\n<span class=\"s\">    address seller,<\/span>\r\n<span class=\"s\">    address owner,<\/span>\r\n<span class=\"s\">    uint256 price<\/span>\r\n<span class=\"s\">  );<\/span>\r\n<span class=\"s\">  event NFTSold(<\/span>\r\n<span class=\"s\">    address nftContract,<\/span>\r\n<span class=\"s\">    uint256 tokenId,<\/span>\r\n<span class=\"s\">    address seller,<\/span>\r\n<span class=\"s\">    address owner,<\/span>\r\n<span class=\"s\">    uint256 price<\/span>\r\n<span class=\"s\">  );<\/span>\r\n\r\n<span class=\"s\">  constructor() {<\/span>\r\n<span class=\"s\">    _marketOwner = payable(msg.sender);<\/span>\r\n<span class=\"s\">  }<\/span>\r\n\r\n<span class=\"s\">  \/\/ List the NFT on the marketplace<\/span>\r\n<span class=\"s\">  function listNft(address _nftContract, uint256 _tokenId, uint256 _price) public payable nonReentrant {<\/span>\r\n<span class=\"s\">    require(_price > 0, \"<\/span><span class=\"n\">Price<\/span> <span class=\"n\">must<\/span> <span class=\"n\">be<\/span> <span class=\"n\">at<\/span> <span class=\"n\">least<\/span> <span class=\"mi\">1<\/span> <span class=\"n\">wei<\/span><span class=\"s\">\");<\/span>\r\n<span class=\"s\">    require(msg.value == LISTING_FEE, \"<\/span><span class=\"n\">Not<\/span> <span class=\"n\">enough<\/span> <span class=\"n\">ether<\/span> <span class=\"k\">for<\/span> <span class=\"n\">listing<\/span> <span class=\"n\">fee<\/span><span class=\"s\">\");<\/span>\r\n\r\n<span class=\"s\">    IERC721(_nftContract).transferFrom(msg.sender, address(this), _tokenId);<\/span>\r\n\r\n<span class=\"s\">    _nftCount.increment();<\/span>\r\n\r\n<span class=\"s\">    _idToNFT[_tokenId] = NFT(<\/span>\r\n<span class=\"s\">      _nftContract,<\/span>\r\n<span class=\"s\">      _tokenId, <\/span>\r\n<span class=\"s\">      payable(msg.sender),<\/span>\r\n<span class=\"s\">      payable(address(this)),<\/span>\r\n<span class=\"s\">      _price,<\/span>\r\n<span class=\"s\">      true<\/span>\r\n<span class=\"s\">    );<\/span>\r\n\r\n<span class=\"s\">    emit NFTListed(_nftContract, _tokenId, msg.sender, address(this), _price);<\/span>\r\n<span class=\"s\">  }<\/span>\r\n\r\n<span class=\"s\">  \/\/ Buy an NFT<\/span>\r\n<span class=\"s\">  function buyNft(address _nftContract, uint256 _tokenId) public payable nonReentrant {<\/span>\r\n<span class=\"s\">    NFT storage nft = _idToNFT[_tokenId];<\/span>\r\n<span class=\"s\">    require(msg.value >= nft.price, \"<\/span><span class=\"n\">Not<\/span> <span class=\"n\">enough<\/span> <span class=\"n\">ether<\/span> <span class=\"n\">to<\/span> <span class=\"n\">cover<\/span> <span class=\"n\">asking<\/span> <span class=\"n\">price<\/span><span class=\"s\">\");<\/span>\r\n\r\n<span class=\"s\">    address payable buyer = payable(msg.sender);<\/span>\r\n<span class=\"s\">    payable(nft.seller).transfer(msg.value);<\/span>\r\n<span class=\"s\">    IERC721(_nftContract).transferFrom(address(this), buyer, nft.tokenId);<\/span>\r\n<span class=\"s\">    _marketOwner.transfer(LISTING_FEE);<\/span>\r\n<span class=\"s\">    nft.owner = buyer;<\/span>\r\n<span class=\"s\">    nft.listed = false;<\/span>\r\n\r\n<span class=\"s\">    _nftsSold.increment();<\/span>\r\n<span class=\"s\">    emit NFTSold(_nftContract, nft.tokenId, nft.seller, buyer, msg.value);<\/span>\r\n<span class=\"s\">  }<\/span>\r\n\r\n<span class=\"s\">  \/\/ Resell an NFT purchased from the marketplace<\/span>\r\n<span class=\"s\">  function resellNft(address _nftContract, uint256 _tokenId, uint256 _price) public payable nonReentrant {<\/span>\r\n<span class=\"s\">    require(_price > 0, \"<\/span><span class=\"n\">Price<\/span> <span class=\"n\">must<\/span> <span class=\"n\">be<\/span> <span class=\"n\">at<\/span> <span class=\"n\">least<\/span> <span class=\"mi\">1<\/span> <span class=\"n\">wei<\/span><span class=\"s\">\");<\/span>\r\n<span class=\"s\">    require(msg.value == LISTING_FEE, \"<\/span><span class=\"n\">Not<\/span> <span class=\"n\">enough<\/span> <span class=\"n\">ether<\/span> <span class=\"k\">for<\/span> <span class=\"n\">listing<\/span> <span class=\"n\">fee<\/span><span class=\"s\">\");<\/span>\r\n\r\n<span class=\"s\">    IERC721(_nftContract).transferFrom(msg.sender, address(this), _tokenId);<\/span>\r\n\r\n<span class=\"s\">    NFT storage nft = _idToNFT[_tokenId];<\/span>\r\n<span class=\"s\">    nft.seller = payable(msg.sender);<\/span>\r\n<span class=\"s\">    nft.owner = payable(address(this));<\/span>\r\n<span class=\"s\">    nft.listed = true;<\/span>\r\n<span class=\"s\">    nft.price = _price;<\/span>\r\n\r\n<span class=\"s\">    _nftsSold.decrement();<\/span>\r\n<span class=\"s\">    emit NFTListed(_nftContract, _tokenId, msg.sender, address(this), _price);<\/span>\r\n<span class=\"s\">  }<\/span>\r\n\r\n<span class=\"s\">  function getListingFee() public view returns (uint256) {<\/span>\r\n<span class=\"s\">    return LISTING_FEE;<\/span>\r\n<span class=\"s\">  }<\/span>\r\n\r\n<span class=\"s\">  function getListedNfts() public view returns (NFT[] memory) {<\/span>\r\n<span class=\"s\">    uint256 nftCount = _nftCount.current();<\/span>\r\n<span class=\"s\">    uint256 unsoldNftsCount = nftCount - _nftsSold.current();<\/span>\r\n\r\n<span class=\"s\">    NFT[] memory nfts = new NFT[](unsoldNftsCount);<\/span>\r\n<span class=\"s\">    uint nftsIndex = 0;<\/span>\r\n<span class=\"s\">    for (uint i = 0; i < nftCount; i++) {<\/span>\r\n<span class=\"s\">      if (_idToNFT[i + 1].listed) {<\/span>\r\n<span class=\"s\">        nfts[nftsIndex] = _idToNFT[i + 1];<\/span>\r\n<span class=\"s\">        nftsIndex++;<\/span>\r\n<span class=\"s\">      }<\/span>\r\n<span class=\"s\">    }<\/span>\r\n<span class=\"s\">    return nfts;<\/span>\r\n<span class=\"s\">  }<\/span>\r\n\r\n<span class=\"s\">  function getMyNfts() public view returns (NFT[] memory) {<\/span>\r\n<span class=\"s\">    uint nftCount = _nftCount.current();<\/span>\r\n<span class=\"s\">    uint myNftCount = 0;<\/span>\r\n<span class=\"s\">    for (uint i = 0; i < nftCount; i++) {<\/span>\r\n<span class=\"s\">      if (_idToNFT[i + 1].owner == msg.sender) {<\/span>\r\n<span class=\"s\">        myNftCount++;<\/span>\r\n<span class=\"s\">      }<\/span>\r\n<span class=\"s\">    }<\/span>\r\n\r\n<span class=\"s\">    NFT[] memory nfts = new NFT[](myNftCount);<\/span>\r\n<span class=\"s\">    uint nftsIndex = 0;<\/span>\r\n<span class=\"s\">    for (uint i = 0; i < nftCount; i++) {<\/span>\r\n<span class=\"s\">      if (_idToNFT[i + 1].owner == msg.sender) {<\/span>\r\n<span class=\"s\">        nfts[nftsIndex] = _idToNFT[i + 1];<\/span>\r\n<span class=\"s\">        nftsIndex++;<\/span>\r\n<span class=\"s\">      }<\/span>\r\n<span class=\"s\">    }<\/span>\r\n<span class=\"s\">    return nfts;<\/span>\r\n<span class=\"s\">  }<\/span>\r\n\r\n<span class=\"s\">  function getMyListedNfts() public view returns (NFT[] memory) {<\/span>\r\n<span class=\"s\">    uint nftCount = _nftCount.current();<\/span>\r\n<span class=\"s\">    uint myListedNftCount = 0;<\/span>\r\n<span class=\"s\">    for (uint i = 0; i < nftCount; i++) {<\/span>\r\n<span class=\"s\">      if (_idToNFT[i + 1].seller == msg.sender && _idToNFT[i + 1].listed) {<\/span>\r\n<span class=\"s\">        myListedNftCount++;<\/span>\r\n<span class=\"s\">      }<\/span>\r\n<span class=\"s\">    }<\/span>\r\n\r\n<span class=\"s\">    NFT[] memory nfts = new NFT[](myListedNftCount);<\/span>\r\n<span class=\"s\">    uint nftsIndex = 0;<\/span>\r\n<span class=\"s\">    for (uint i = 0; i < nftCount; i++) {<\/span>\r\n<span class=\"s\">      if (_idToNFT[i + 1].seller == msg.sender && _idToNFT[i + 1].listed) {<\/span>\r\n<span class=\"s\">        nfts[nftsIndex] = _idToNFT[i + 1];<\/span>\r\n<span class=\"s\">        nftsIndex++;<\/span>\r\n<span class=\"s\">      }<\/span>\r\n<span class=\"s\">    }<\/span>\r\n<span class=\"s\">    return nfts;<\/span>\r\n<span class=\"s\">  }<\/span>\r\n<span class=\"s\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u8fd9\u91cc\u6709\u5f88\u591a\u4e1c\u897f\u8981\u89e3\u538b\uff01\u60a8\u53ef\u80fd\u4f1a\u6ce8\u610f\u5230 Marketplace \u5408\u7ea6\u7ee7\u627f\u4e86<\/span><code>ReentrancyGuard<\/code><span>.\u00a0\u6211\u4eec\u8fd9\u6837\u505a\u662f\u4e3a\u4e86\u9632\u5fa1\u91cd\u5165\u653b\u51fb\u3002<\/span><a href=\"https:\/\/medium.com\/coinmonks\/protect-your-solidity-smart-contracts-from-reentrancy-attacks-9972c3af7c21\"><span>\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc<\/span><\/a><span>\u9605\u8bfb\u66f4\u591a\u5173\u4e8e\u5b83\u4eec\u7684\u4fe1\u606f\u3002<\/span><\/p>\n<p>\u00a0<\/p>\n<p><span>\u9996\u5148\uff0c\u8ba9\u6211\u4eec\u6df1\u5165\u4e86\u89e3\u5408\u7ea6\u53d8\u91cf\uff1a &#8211;<\/span><code>Counters.Counter private _nftsSold<\/code><span>\u5f53 NFT \u51fa\u552e\u65f6\u589e\u52a0\uff0c\u5f53 NFT \u91cd\u65b0\u4e0a\u5e02\u65f6\u51cf\u5c11\u3002-<\/span><code>Counters.Counter private _nftCount<\/code><span>\u8ddf\u8e2a\u5217\u51fa\u4e86\u591a\u5c11 NFT\u3002-<\/span><code>uint256 public LISTING_FEE<\/code><span>\u6bcf\u5f53\u51fa\u552e NFT \u65f6\uff0c\u4ece\u5356\u5bb6\u90a3\u91cc\u53d6\u51fa\u5e76\u8f6c\u79fb\u7ed9\u5e02\u573a\u5408\u7ea6\u6240\u6709\u8005\u3002-<\/span><code>address payable private _marketOwner<\/code><span>\u5b58\u50a8 Marketplace \u5408\u540c\u6240\u6709\u8005\uff0c\u4ee5\u4fbf\u6211\u4eec\u77e5\u9053\u5411\u8c01\u652f\u4ed8\u4e0a\u5e02\u8d39\u7528\u3002-<\/span><code>mapping(uint256 => NFT) private _idToNFT<\/code><span>\u5c06\u552f\u4e00\u7684 tokenId \u5173\u8054\u5230 NFT \u7ed3\u6784\u3002-<\/span><code>struct NFT<\/code><span>\u5b58\u50a8\u5e02\u573a\u4e0a\u5217\u51fa\u7684 NFT \u7684\u76f8\u5173\u4fe1\u606f\u3002-<\/span><code>event NFTListed<\/code><span>\u6bcf\u6b21\u5217\u51fa NFT \u65f6\u90fd\u4f1a\u53d1\u51fa\u3002-<\/span><code>event NFTSold<\/code><span>\u6bcf\u6b21\u51fa\u552e NFT \u65f6\u90fd\u4f1a\u53d1\u51fa\u3002<\/span><\/p>\n<p><span>\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u8ba8\u8bba\u4f1a\u6539\u53d8\u72b6\u6001\u7684\u51fd\u6570\uff1a &#8211;<\/span><code>listNft<\/code><span>\u5f53\u7528\u6237\u9996\u6b21\u94f8\u9020\u5e76\u5217\u51fa\u4ed6\u4eec\u7684 NFT \u65f6\u8c03\u7528\u3002\u5b83\u5c06\u6240\u6709\u6743\u4ece\u7528\u6237\u8f6c\u79fb\u5230\u5e02\u573a\u5408\u7ea6\u3002-<\/span><code>resellNft<\/code><span>\u5141\u8bb8\u7528\u6237\u51fa\u552e\u4ed6\u4eec\u5728\u5e02\u573a\u4e0a\u8d2d\u4e70\u7684 NFT\u3002-<\/span><code>buyNft<\/code><span>\u5f53\u7528\u6237\u8d2d\u4e70 NFT \u65f6\u8c03\u7528\u3002\u4e70\u65b9\u6210\u4e3a NFT \u7684\u65b0\u6240\u6709\u8005\uff0c\u4ee3\u5e01\u4ece\u4e70\u65b9\u8f6c\u79fb\u5230\u5356\u65b9\uff0c\u4e0a\u5e01\u8d39\u4ea4\u7ed9\u5e02\u573a\u6240\u6709\u8005\u3002<\/span><\/p>\n<p><span>\u6700\u540e\uff0c\u67e5\u8be2\u529f\u80fd\u76f8\u5bf9\u7b80\u5355\uff1a<\/span><\/p>\n<ul>\n<li><code>getListingFee<\/code><span>\u8fd4\u8fd8\u6302\u724c\u8d39\u3002\u8fd9\u5b8c\u5168\u662f\u53ef\u9009\u7684\u3002\u5f53\u60a8\u90e8\u7f72\u667a\u80fd\u5408\u7ea6\u65f6\uff0c\u5b9e\u9645\u4e0a\u4f1a\u4e3a\u60a8\u521b\u5efa\u4e00\u4e2a LISTING_FEE() \u51fd\u6570\uff0c\u4f46\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a getter \u51fd\u6570\u6765\u6e05\u6d01\u4ee3\u7801\u3002<\/span><\/li>\n<li><code>getListedNfts<\/code><span>\u68c0\u7d22\u5f53\u524d\u6302\u724c\u51fa\u552e\u7684 NFT\u3002<\/span><\/li>\n<li><code>getMyNfts<\/code><span>\u68c0\u7d22\u7528\u6237\u8d2d\u4e70\u7684 NFT\u3002<\/span><\/li>\n<li><code>getMyListedNfts<\/code><span>\u68c0\u7d22\u7528\u6237\u5217\u51fa\u51fa\u552e\u7684 NFT\u3002<\/span><\/li>\n<\/ul>\n<h2 id=\"deploy-the-smart-contracts-locally\"><span>\u5728\u672c\u5730\u90e8\u7f72\u667a\u80fd\u5408\u7ea6<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#deploy-the-smart-contracts-locally\"><span>\u00b6<\/span><\/a><\/h2>\n<p><span>\u4e3a\u4e86\u90e8\u7f72\u6211\u4eec\u7684\u667a\u80fd\u5408\u7ea6\uff0c\u6211\u4eec\u9700\u8981\u4fee\u6539<\/span><code>migrations\/1_deploy_contracts.js<\/code><span>.\u00a0\u56e0\u4e3a<\/span><code>BoredPetsNFT<\/code><span>\u9700\u8981<\/span><code>Marketplace<\/code><span>\u5408\u7ea6\u5730\u5740\uff0c\u6240\u4ee5\u8fd9\u91cc\u4e0b\u5355\u5f88\u91cd\u8981\uff01Truffle \u5141\u8bb8\u60a8\u4f7f\u7528<\/span><code>Promise<\/code><span>\u6216<\/span><code>await<\/code><span>\/\u6765\u6309\u987a\u5e8f\u90e8\u7f72\u5408\u7ea6<\/span><code>async<\/code><span>\u3002<\/span><a href=\"https:\/\/trufflesuite.com\/docs\/truffle\/getting-started\/running-migrations\/#deployer\"><span>\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc<\/span><\/a><span>\u9605\u8bfb\u66f4\u591a\u5173\u4e8e\u5b83\u7684\u4fe1\u606f\u3002\uff08\u8bf7\u6ce8\u610f\uff0c\u4ee5\u524d\uff0cTruffle \u4e5f\u9700\u8981\u5355\u72ec\u7684<\/span><code>Migrations.sol<\/code><span>\u5408\u540c\uff0c\u4f46\u73b0\u5728\u4e0d\u518d\u662f\u8fd9\u6837\u4e86\uff01\uff09<\/span><\/p>\n<p><span>\u60a8\u7684\u90e8\u7f72\u6587\u4ef6\u5e94\u5982\u4e0b\u6240\u793a\uff1a<\/span><\/p>\n<p>\u00a0<\/p>\n<div class=\"highlight\">\n<pre id=\"__code_10\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_10 > code\"><\/button><code><span class=\"kd\">var<\/span> <span class=\"nx\">BoredPetsNFT<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">artifacts<\/span><span class=\"p\">.<\/span><span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"BoredPetsNFT\"<\/span><span class=\"p\">);<\/span>\r\n<span class=\"kd\">var<\/span> <span class=\"nx\">Marketplace<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">artifacts<\/span><span class=\"p\">.<\/span><span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"Marketplace\"<\/span><span class=\"p\">);<\/span>\r\n\r\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">deployer<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">await<\/span> <span class=\"nx\">deployer<\/span><span class=\"p\">.<\/span><span class=\"nx\">deploy<\/span><span class=\"p\">(<\/span><span class=\"nx\">Marketplace<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">marketplace<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">deployed<\/span><span class=\"p\">();<\/span>\r\n  <span class=\"k\">await<\/span> <span class=\"nx\">deployer<\/span><span class=\"p\">.<\/span><span class=\"nx\">deploy<\/span><span class=\"p\">(<\/span><span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">,<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">address<\/span><span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u6709\u591a\u79cd\u65b9\u6cd5\u53ef\u4ee5\u542f\u52a8\u672c\u5730 Ganache \u5b9e\u4f8b\uff1a\u901a\u8fc7 VS Code \u6269\u5c55\u3001Ganache CLI \u548c Ganche \u56fe\u5f62\u7528\u6237\u754c\u9762\u3002\u6bcf\u4e2a\u90fd\u6709\u81ea\u5df1\u7684\u4f18\u52bf\uff0c\u60a8\u53ef\u4ee5<\/span><a href=\"https:\/\/trufflesuite.com\/blog\/introducing-ganache-7\/\"><span>\u5728\u6b64\u5904<\/span><\/a><span>\u67e5\u770b v7 \u6700\u9177\u7684\u529f\u80fd\u3002<\/span><\/p>\n<p>\u00a0<\/p>\n<p><span>\u5728\u672c\u4f8b\u4e2d\uff0c\u6211\u4eec\u5c06\u4f7f\u7528 GUI\u3002\u6253\u5f00\u5b83\uff0c\u521b\u5efa\u4e00\u4e2a\u5de5\u4f5c\u533a\uff0c\u7136\u540e\u70b9\u51fb\u4fdd\u5b58\uff01<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/img\/open_ganache_workspace.gif\" alt=\"\u521b\u5efa Ganache \u5de5\u4f5c\u533a\u7684 GIF\" \/><\/p>\n<p><span>\u8fd9\u4f1a\u5728 HTTP:\/\/127.0.0.1:7545 \u521b\u5efa\u4e00\u4e2a\u6b63\u5728\u8fd0\u884c\u7684 Ganache \u5b9e\u4f8b\u3002\u73b0\u5728\uff0c\u53ea\u9700\u4ece\u6587\u4ef6\u5939<\/span><code>truffle migrate --network development<\/code><span>\u4e2d\u8fd0\u884c CLI \u3002<\/span><code>nft-marketplace<\/code><span>\u8fd9\u5c06\u7f16\u8bd1\u548c\u90e8\u7f72\u4f60\u7684\u5408\u7ea6\u3002\u60a8\u5e94\u8be5\u4f1a\u770b\u5230\u4e0e\u6b64\u7c7b\u4f3c\u7684\u8f93\u51fa\uff1a<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_11\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_11 > code\"><\/button><code>Compiling your contracts...\r\n<span class=\"o\">===========================<\/span>\r\n> Compiling .\/contracts\/ethereum\/BoredPetsNFT.sol.sol\r\n> Compiling .\/contracts\/ethereum\/Marketplace.sol\r\n> Compiling @openzeppelin\/contracts\/security\/ReentrancyGuard.sol\r\n> Compiling @openzeppelin\/contracts\/token\/ERC721\/ERC721.sol\r\n> Compiling @openzeppelin\/contracts\/token\/ERC721\/IERC721.sol\r\n> Compiling @openzeppelin\/contracts\/token\/ERC721\/IERC721Receiver.sol\r\n> Compiling @openzeppelin\/contracts\/token\/ERC721\/extensions\/ERC721URIStorage.sol\r\n> Compiling @openzeppelin\/contracts\/token\/ERC721\/extensions\/IERC721Metadata.sol\r\n> Compiling @openzeppelin\/contracts\/utils\/Address.sol\r\n> Compiling @openzeppelin\/contracts\/utils\/Context.sol\r\n> Compiling @openzeppelin\/contracts\/utils\/Counters.sol\r\n> Compiling @openzeppelin\/contracts\/utils\/Strings.sol\r\n> Compiling @openzeppelin\/contracts\/utils\/introspection\/ERC165.sol\r\n> Compiling @openzeppelin\/contracts\/utils\/introspection\/IERC165.sol\r\n> Artifacts written to \/Users\/emilylin\/truffle\/nft-marketplace\/client\/contracts\/ethereum-contracts\r\n> Compiled successfully using:\r\n   - solc: <span class=\"m\">0<\/span>.8.13+commit.abaa5c0e.Emscripten.clang\r\n\r\n\r\nStarting migrations...\r\n<span class=\"o\">======================<\/span>\r\n> Network name:    <span class=\"s1\">'development'<\/span>\r\n> Network id:      <span class=\"m\">5777<\/span>\r\n> Block gas limit: <span class=\"m\">6721975<\/span> <span class=\"o\">(<\/span>0x6691b7<span class=\"o\">)<\/span>\r\n\r\n\r\n1_deploy_contracts.js\r\n<span class=\"o\">=====================<\/span>\r\n\r\n   Deploying <span class=\"s1\">'Marketplace'<\/span>\r\n   -----------------------\r\n   > transaction hash:    0xca3f5fcc301c700bdfd7bfb58c853e39085335ed0ef249bf57334ad856848383\r\n   > Blocks: <span class=\"m\">0<\/span>            Seconds: <span class=\"m\">0<\/span>\r\n   > contract address:    0x6F1A6D8a5414d1B1E67b69D69D5206498447aceE\r\n   > block number:        <span class=\"m\">1<\/span>\r\n   > block timestamp:     <span class=\"m\">1652487728<\/span>\r\n   > account:             0x24D126143330E7f76753e13FAE39a844cbcEe829\r\n   > balance:             <span class=\"m\">99<\/span>.96632092\r\n   > gas used:            <span class=\"m\">1683954<\/span> <span class=\"o\">(<\/span>0x19b1f2<span class=\"o\">)<\/span>\r\n   > gas price:           <span class=\"m\">20<\/span> gwei\r\n   > value sent:          <span class=\"m\">0<\/span> ETH\r\n   > total cost:          <span class=\"m\">0<\/span>.03367908 ETH\r\n\r\n\r\n   Deploying <span class=\"s1\">'BoredPetsNFT'<\/span>\r\n   ---------------------------\r\n   > transaction hash:    0x077ab3a709addd41229de58f3bb6ad913a5c4646cd5df39272a9db6ad3a04f05\r\n   > Blocks: <span class=\"m\">0<\/span>            Seconds: <span class=\"m\">0<\/span>\r\n   > contract address:    0x2935aBf19126137D47bCa1612Dc4900815A15E92\r\n   > block number:        <span class=\"m\">2<\/span>\r\n   > block timestamp:     <span class=\"m\">1652487729<\/span>\r\n   > account:             0x24D126143330E7f76753e13FAE39a844cbcEe829\r\n   > balance:             <span class=\"m\">99<\/span>.91495866\r\n   > gas used:            <span class=\"m\">2568113<\/span> <span class=\"o\">(<\/span>0x272fb1<span class=\"o\">)<\/span>\r\n   > gas price:           <span class=\"m\">20<\/span> gwei\r\n   > value sent:          <span class=\"m\">0<\/span> ETH\r\n   > total cost:          <span class=\"m\">0<\/span>.05136226 ETH\r\n\r\n   > Saving artifacts\r\n   -------------------------------------\r\n   > Total cost:          <span class=\"m\">0<\/span>.08504134 ETH\r\n\r\n<span class=\"nv\">Summary<\/span>\r\n<span class=\"o\">=======<\/span>\r\n> Total deployments:   <span class=\"m\">2<\/span>\r\n> Final cost:          <span class=\"m\">0<\/span>.08504134 ETH\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u60a8\u5e94\u8be5\u80fd\u591f\u5728\u4e0b\u9762\u627e\u5230\u60a8\u7f16\u8bd1\u7684\u5408\u540c<\/span><code>.\/client\/contracts\/ethereum-contracts<\/code><\/p>\n<h2 id=\"test-your-smart-contracts\"><span>\u6d4b\u8bd5\u4f60\u7684\u667a\u80fd\u5408\u7ea6<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#test-your-smart-contracts\"><span>\u00b6<\/span><\/a><\/h2>\n<p><span>\u4e3a\u4e86\u5feb\u901f\u6d4b\u8bd5\u6211\u4eec\u7684\u667a\u80fd\u5408\u7ea6\uff0c\u6211\u4eec\u5c06\u5229\u7528<\/span><code>truffle exec<\/code><span>\u8fd0\u884c\u811a\u672c\u6765\u81ea\u52a8\u6267\u884c\u5e38\u89c1\u4efb\u52a1\u3002\u8ba9\u6211\u4eec\u7f16\u5199\u4e00\u4e2a\u811a\u672c\u6765\u6267\u884c\u6211\u4eec\u6240\u6709\u7684\u4e0d\u540c\u529f\u80fd\u3002\u9996\u5148\uff0c\u5728\u4e00\u4e2a<\/span><code>scripts<\/code><span>\u540d\u4e3a<\/span><code>run.js<\/code><span>.<\/span><\/p>\n<p>\u00a0<\/p>\n<div class=\"highlight\">\n<pre id=\"__code_12\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_12 > code\"><\/button><code><span class=\"kd\">var<\/span> <span class=\"nx\">BoredPetsNFT<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">artifacts<\/span><span class=\"p\">.<\/span><span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"BoredPetsNFT\"<\/span><span class=\"p\">);<\/span>\r\n<span class=\"kd\">var<\/span> <span class=\"nx\">Marketplace<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">artifacts<\/span><span class=\"p\">.<\/span><span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"Marketplace\"<\/span><span class=\"p\">);<\/span>\r\n\r\n<span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">logNftLists<\/span><span class=\"p\">(<\/span><span class=\"nx\">marketplace<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">listedNfts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">getListedNfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">call<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">accountAddress<\/span> <span class=\"o\">=<\/span> <span class=\"s1\">'FIRST_ACCOUNT_ADDRESS'<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">myNfts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">getMyNfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">call<\/span><span class=\"p\">({<\/span><span class=\"kr\">from<\/span><span class=\"o\">:<\/span> <span class=\"nx\">accountAddress<\/span><span class=\"p\">})<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">myListedNfts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">getMyListedNfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">call<\/span><span class=\"p\">({<\/span><span class=\"kr\">from<\/span><span class=\"o\">:<\/span> <span class=\"nx\">accountAddress<\/span><span class=\"p\">})<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"sb\">`listedNfts: <\/span><span class=\"si\">${<\/span><span class=\"nx\">listedNfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"si\">}<\/span><span class=\"sb\">`<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"sb\">`myNfts: <\/span><span class=\"si\">${<\/span><span class=\"nx\">myNfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"si\">}<\/span><span class=\"sb\">`<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"sb\">`myListedNfts <\/span><span class=\"si\">${<\/span><span class=\"nx\">myListedNfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"si\">}<\/span><span class=\"sb\">n`<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">main<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">cb<\/span><span class=\"p\">)<\/span> <span class=\"p\">=><\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">boredPets<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">deployed<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">marketplace<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">deployed<\/span><span class=\"p\">()<\/span>\r\n\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">'MINT AND LIST 3 NFTs'<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">listingFee<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">getListingFee<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"nx\">listingFee<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">listingFee<\/span><span class=\"p\">.<\/span><span class=\"nx\">toString<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">txn1<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">boredPets<\/span><span class=\"p\">.<\/span><span class=\"nx\">mint<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"URI1\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">tokenId1<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">txn1<\/span><span class=\"p\">.<\/span><span class=\"nx\">logs<\/span><span class=\"p\">[<\/span><span class=\"mf\">2<\/span><span class=\"p\">].<\/span><span class=\"nx\">args<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">toNumber<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">listNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">boredPets<\/span><span class=\"p\">.<\/span><span class=\"nx\">address<\/span><span class=\"p\">,<\/span> <span class=\"nx\">tokenId1<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span><span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"nx\">listingFee<\/span><span class=\"p\">})<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"sb\">`Minted and listed <\/span><span class=\"si\">${<\/span><span class=\"nx\">tokenId1<\/span><span class=\"si\">}<\/span><span class=\"sb\">`<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">txn2<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">boredPets<\/span><span class=\"p\">.<\/span><span class=\"nx\">mint<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"URI1\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">tokenId2<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">txn2<\/span><span class=\"p\">.<\/span><span class=\"nx\">logs<\/span><span class=\"p\">[<\/span><span class=\"mf\">2<\/span><span class=\"p\">].<\/span><span class=\"nx\">args<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">toNumber<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">listNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">boredPets<\/span><span class=\"p\">.<\/span><span class=\"nx\">address<\/span><span class=\"p\">,<\/span> <span class=\"nx\">tokenId2<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span><span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"nx\">listingFee<\/span><span class=\"p\">})<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"sb\">`Minted and listed <\/span><span class=\"si\">${<\/span><span class=\"nx\">tokenId2<\/span><span class=\"si\">}<\/span><span class=\"sb\">`<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">txn3<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">boredPets<\/span><span class=\"p\">.<\/span><span class=\"nx\">mint<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"URI1\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">tokenId3<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">txn3<\/span><span class=\"p\">.<\/span><span class=\"nx\">logs<\/span><span class=\"p\">[<\/span><span class=\"mf\">2<\/span><span class=\"p\">].<\/span><span class=\"nx\">args<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">toNumber<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">listNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">boredPets<\/span><span class=\"p\">.<\/span><span class=\"nx\">address<\/span><span class=\"p\">,<\/span> <span class=\"nx\">tokenId3<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span><span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"nx\">listingFee<\/span><span class=\"p\">})<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"sb\">`Minted and listed <\/span><span class=\"si\">${<\/span><span class=\"nx\">tokenId3<\/span><span class=\"si\">}<\/span><span class=\"sb\">`<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">logNftLists<\/span><span class=\"p\">(<\/span><span class=\"nx\">marketplace<\/span><span class=\"p\">)<\/span>\r\n\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">'BUY 2 NFTs'<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">buyNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">boredPets<\/span><span class=\"p\">.<\/span><span class=\"nx\">address<\/span><span class=\"p\">,<\/span> <span class=\"nx\">tokenId1<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span><span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"mf\">1<\/span><span class=\"p\">})<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">buyNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">boredPets<\/span><span class=\"p\">.<\/span><span class=\"nx\">address<\/span><span class=\"p\">,<\/span> <span class=\"nx\">tokenId2<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span><span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"mf\">1<\/span><span class=\"p\">})<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">logNftLists<\/span><span class=\"p\">(<\/span><span class=\"nx\">marketplace<\/span><span class=\"p\">)<\/span>\r\n\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">'RESELL 1 NFT'<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">resellNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">boredPets<\/span><span class=\"p\">.<\/span><span class=\"nx\">address<\/span><span class=\"p\">,<\/span> <span class=\"nx\">tokenId2<\/span><span class=\"p\">,<\/span> <span class=\"mf\">1<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span><span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"nx\">listingFee<\/span><span class=\"p\">})<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">logNftLists<\/span><span class=\"p\">(<\/span><span class=\"nx\">marketplace<\/span><span class=\"p\">)<\/span>\r\n\r\n  <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">'Doh! '<\/span><span class=\"p\">,<\/span> <span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"nx\">cb<\/span><span class=\"p\">();<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">main<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u5728\u6b64\u811a\u672c\u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528<\/span><a href=\"https:\/\/trufflesuite.com\/docs\/truffle\/getting-started\/running-migrations\/#artifactsrequire\"><code>artifacts.require<\/code><\/a><span>\u6765\u8bbf\u95ee\u5408\u540c\u62bd\u8c61\u3002<\/span><a href=\"https:\/\/github.com\/trufflesuite\/truffle\/blob\/master\/packages\/contract\/README.md\"><code>@truffle\/contracts<\/code><\/a><span>\u7136\u540e\uff0c\u6211\u4eec\u4f7f\u7528\u4fbf\u5229\u5e93\u4e0e\u5408\u7ea6\u8fdb\u884c\u4ea4\u4e92\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528\u6b64\u529f\u80fd\u5728 Truffle \u4e2d\u7528 javasacript \u6216 typescript<\/span><a href=\"https:\/\/trufflesuite.com\/docs\/truffle\/testing\/testing-your-contracts\/\"><span>\u7f16\u5199\u5355\u5143\u6d4b\u8bd5\u3002<\/span><\/a><span>\u8bf7\u6ce8\u610f\uff0c\u5982\u679c\u60a8\u4f7f\u7528 typescript\uff0c\u5219\u9700\u8981\u521b\u5efa\u4e00\u4e2a<\/span><code>tsconfig.json<\/code><span>\u6587\u4ef6\u5e76\u7528\u4e8e<\/span><code>tsc<\/code><span>\u7f16\u8bd1\u4e3a javascript\u3002<\/span><code>tsc<\/code>\u00a0<a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/tsconfig-json.html\"><span>\u60a8\u53ef\u4ee5\u5728\u6b64\u5904<\/span><\/a><span>\u9605\u8bfb\u66f4\u591a\u4fe1\u606f\u3002<\/span><\/p>\n<p>\u00a0<\/p>\n<p><span>\u8981\u8fd0\u884c\u6b64\u811a\u672c\uff0c\u60a8\u9700\u8981\u586b\u5199<\/span><code>FIRST_ACCOUNT_ADDRESS<\/code><span>\u4ee5\u67e5\u8be2\u5217\u51fa\u7684 NFT\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cTruffle \u4f7f\u7528\u7b2c\u4e00\u4e2a\u53ef\u7528\u7684\u5e10\u6237\u6765\u6267\u884c\u51fd\u6570\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u524d\u5f80 Ganache GUI \u5e76\u590d\u5236\/\u7c98\u8d34\u7b2c\u4e00\u4e2a\u5e10\u6237\u5730\u5740\u6765\u83b7\u53d6\u6b64\u5730\u5740\u3002<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/img\/ganache_account_key.png\" alt=\"\u7b2c\u4e00\u4e2a\u5e10\u6237\u5bc6\u94a5\" \/><\/p>\n<p><span>\u8fd0\u884c<\/span><code>truffle exec scripts\/run.js<\/code><span>\uff0c\u60a8\u7684\u8f93\u51fa\u5e94\u5982\u4e0b\u6240\u793a\uff1a<\/span><\/p>\n<p>\u00a0<\/p>\n<div class=\"highlight\">\n<pre id=\"__code_13\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_13 > code\"><\/button><code>MINT AND LIST <span class=\"m\">3<\/span> NFTs\r\nlistedNfts: <span class=\"m\">3<\/span>\r\nmyNfts: <span class=\"m\">0<\/span>\r\nmyListedNfts <span class=\"m\">3<\/span>\r\nBUY <span class=\"m\">2<\/span> NFTs\r\nlistedNfts: <span class=\"m\">1<\/span>\r\nmyNfts: <span class=\"m\">2<\/span>\r\nmyListedNfts <span class=\"m\">1<\/span>\r\nRESELL <span class=\"m\">1<\/span> NFT\r\nlistedNfts: <span class=\"m\">2<\/span>\r\nmyNfts: <span class=\"m\">1<\/span>\r\nmyListedNfts <span class=\"m\">1<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u6210\u529f\uff01\u5982\u679c\u60a8\u60f3\u5728\u5df2\u586b\u5145\u7684\u533a\u5757\u94fe\u4e0a\u90e8\u7f72\u60a8\u7684\u5408\u7ea6\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 Ganache \u4ee5<\/span><a href=\"https:\/\/trufflesuite.com\/blog\/introducing-ganache-7\/#new-ganache-7-features\"><span>\u96f6\u914d\u7f6e\u5206\u53c9\u4e3b\u7f51<\/span><\/a><span>\u3002<\/span><\/p>\n<p>\u00a0<\/p>\n<h2 id=\"other-ways-to-deploy\"><span>\u5176\u4ed6\u90e8\u7f72\u65b9\u5f0f<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#other-ways-to-deploy\"><span>\u00b6<\/span><\/a><\/h2>\n<h3 id=\"deploy-to-truffle-dashboards\"><span>\u90e8\u7f72\u5230 Truffle \u4eea\u8868\u677f<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#deploy-to-truffle-dashboards\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u6211\u4eec\u5c06\u5e26\u60a8\u4e86\u89e3\u5982\u4f55\u4f7f\u7528<\/span><a href=\"https:\/\/trufflesuite.com\/docs\/truffle\/getting-started\/using-the-truffle-dashboard\/\"><span>Truffle \u4eea\u8868\u677f<\/span><\/a><span>\u90e8\u7f72\u5230\u6d4b\u8bd5\u7f51\uff0c\u5b83\u5141\u8bb8\u60a8\u4f7f\u7528 MetaMask \u7b7e\u7f72\u60a8\u7684\u4ea4\u6613\u3002\u8fd9\u4f7f\u60a8\u53ef\u4ee5\u4fdd\u62a4\u60a8\u7684\u79c1\u94a5\u5b89\u5168\uff0c\u56e0\u4e3a\u60a8\u4e0d\u5fc5\u5c06\u5176\u4fdd\u5b58\u5728\u672c\u5730\u3002\u4e3a\u6b64\uff0c\u60a8\u9700\u8981\u4ece<\/span><a href=\"https:\/\/faucet.paradigm.xyz\/\"><span>faucet<\/span><\/a><span>\u83b7\u53d6\u4e00\u4e9b\u6d4b\u8bd5 eth \u3002<\/span><\/p>\n<p><span>\u9996\u5148\uff0c<\/span><code>truffle dashboard<\/code><span>\u5728\u5355\u72ec\u7684\u7ec8\u7aef\u7a97\u53e3\u4e2d\u8fd0\u884c\u3002\u5b83\u5e94\u8be5\u5728 http:\/\/127.0.0.1:24012\/ \u6253\u5f00\u677e\u9732\u4eea\u8868\u677f\u3002\u7136\u540e\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u60a8\u7684 MetaMask \u94b1\u5305\u8fde\u63a5\u5230\u60a8\u9009\u62e9\u7684\u7f51\u7edc\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u5c06\u9009\u62e9 Goerli \u7f51\u7edc\u3002<\/span><\/p>\n<p><span>\u63a5\u4e0b\u6765\uff0c\u4f7f\u7528 . \u5c06\u60a8\u7684\u5408\u540c\u8fc1\u79fb\u5230\u4eea\u8868\u677f<\/span><code>truffle migrate --network dashboard<\/code><span>\u3002\u5982\u679c\u60a8\u8fd4\u56de\u4eea\u8868\u677f\u9009\u9879\u5361\uff0c\u60a8\u5c06\u770b\u5230\u4f7f\u7528 MetaMask \u8fdb\u884c\u7b7e\u540d\u7684\u8bf7\u6c42\u3002\u70b9\u51fb\u63a5\u53d7\uff0c\u77a7\uff01\u56de\u5230\u7ec8\u7aef\uff0c\u60a8\u5e94\u8be5\u4f1a\u770b\u5230\u60a8\u7684\u5408\u7ea6\u5df2\u90e8\u7f72\u3002<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/img\/dashboard.gif\" alt=\"\u4f7f\u7528\u4eea\u8868\u677f\u7684 GIF\" \/><\/p>\n<p><span>\u66f4\u6539\u5e10\u53f7\u540e\uff0c\u53ef\u4ee5\u518d\u6b21\u6267\u884c\u811a\u672c\u8fdb\u884c\u6d4b\u8bd5\uff1a<\/span><code>truffle exec scripts\/run.js<\/code><\/p>\n<h3 id=\"deploy-using-a-env-file\"><span>\u4f7f\u7528<\/span><code>.env<\/code><span>\u6587\u4ef6\u90e8\u7f72<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#deploy-using-a-env-file\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u5982\u679c\u60a8\u4e0d\u60f3\u4f7f\u7528\u4eea\u8868\u677f\uff0c\u53ef\u4ee5\u4fee\u6539 Truffle \u914d\u7f6e\u6587\u4ef6\u4ee5\u4f7f\u7528\u60a8\u8bbe\u7f6e\u7684\u73af\u5883\u53d8\u91cf\u3002<\/span><code>.env<\/code><span>\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u7801\u521b\u5efa\u4e00\u4e2a\u6587\u4ef6\uff1a<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_14\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_14 > code\"><\/button><code><span class=\"nv\">MNEMONIC<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"candy maple cake sugar pudding cream honey rich smooth crumble sweet treat\"<\/span>\r\n<span class=\"nv\">INFURA_KEY<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"<Your Infura project key>\"<\/span>\r\n<span class=\"nv\">GANACHE_MNEMONIC<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"<Your Ganache mnemonic>\"<\/span>\r\n<span class=\"nv\">GOERLI_MNEMONIC<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"<Your Metamask mnemonic>\"<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><code>.gitignore<\/code><span>\u5df2\u7ecf\u5ffd\u7565\u4e86\uff0c\u4f46\u662f\u7531\u4e8e\u60a8\u5728<\/span><code>.env<\/code><span>\u6b64\u5904\u586b\u5145\u52a9\u8bb0\u952e\/\u5bc6\u94a5\uff0c\u56e0\u6b64\u8bf7\u4e0d\u8981\u5728\u4efb\u4f55\u5730\u65b9\u516c\u5f00\u3002<\/span><\/p>\n<p><span>\u7136\u540e\uff0c\u53ea\u9700\u8fd0\u884c<\/span><code>truffle migrate --network [NETWORK NAME]<\/code><span>\u6216<\/span><code>npm run migrate:ovm --network=[NETWORK NAME]<\/code><\/p>\n<h3 id=\"deploy-to-optimistic-goerli\"><span>\u90e8\u7f72\u5230 Optimistic Goerli<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#deploy-to-optimistic-goerli\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u7531\u4e8e Optimism \u4e0e EVM \u7b49\u4ef7\uff0c\u4f46\u6709<\/span><a href=\"https:\/\/community.optimism.io\/docs\/developers\/build\/differences\/\"><span>\u5c11\u91cf\u4f8b\u5916<\/span><\/a><span>\uff0c\u6211\u4eec\u53ea\u9700\u5c06\u5408\u7ea6\u4ece<\/span><code>contracts\/ethereum<\/code><span>over \u590d\u5236\u5230<\/span><code>contracts\/optimism<\/code><span>.<\/span><\/p>\n<p><span>\u8981\u83b7\u5f97 Eth for Optimistic Goerli\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e2a<\/span><a href=\"https:\/\/optimismfaucet.xyz\/\"><span>faucet<\/span><\/a><span>\u3002\u4f60\u9700\u8981\u6ce8\u518c\u4e00\u4e2a\u8d85\u8fc7 1 \u4e2a\u6708\u7684 Github \u5e10\u6237\u5e76\u81f3\u5c11\u5173\u6ce8 5 \u4e2a repos\uff1a &#8211;\u00a0<\/span><a href=\"https:\/\/github.com\/trufflesuite\"><span>trufflesuite<\/span><\/a><span>\u00a0&#8211; truffle\u00a0<\/span><a href=\"https:\/\/github.com\/truffle-box\"><span>-box<\/span><\/a><span>\u00a0&#8211;\u00a0<\/span><a href=\"https:\/\/github.com\/INFURA\"><span>Infura<\/span><\/a><span>\u00a0&#8211;\u00a0<\/span><a href=\"https:\/\/github.com\/metamask\"><span>MetaMask<\/span><\/a><span>\u00a0&#8211;\u00a0<\/span><a href=\"https:\/\/github.com\/ethereum-optimism\"><span>Optimism<\/span><\/a><\/p>\n<p><span>\u6211\u4eec\u7684\u76d2\u5b50\u5df2\u7ecf\u5305\u542b\u4e86 Optimistic Goerli \u914d\u7f6e<\/span><code>truffle-confg.ovm.js<\/code><span>\u3002\u8fd0\u884c<\/span><code>npm run migrate:ovm --network=optimistic_goerli<\/code><span>\u90e8\u7f72\u548c<\/span><code>npm run exec:ovm scripts\/run.js --network=optimistic_goerli<\/code><span>\u6d4b\u8bd5\uff01<\/span><\/p>\n<p><span>\u7531\u4e8e\u6211\u4eec\u4f7f\u7528\u7684\u662f\u6d4b\u8bd5\u7f51\uff0c\u56e0\u6b64\u8fde\u63a5\u53ef\u80fd\u4f1a\u6709\u70b9\u4e0d\u7a33\u5b9a\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 \u8fd0\u884c<\/span><code>migrate<\/code><span>\u547d\u4ee4\u91cd\u8bd5<\/span><code>--reset<\/code><span>\u3002\u6216\u8005\uff0c\u60a8\u53ef\u80fd\u4f1a\u5076\u5c14\u770b\u5230\u5982\u4e0b\u5185\u5bb9\uff1a<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_15\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_15 > code\"><\/button><code>TypeError: Cannot <span class=\"nb\">read<\/span> properties of null <span class=\"o\">(<\/span>reading <span class=\"s1\">'from'<\/span><span class=\"o\">)<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u60a8\u53ef\u4ee5<\/span><code>from<\/code><span>\u5728\u90e8\u7f72\u811a\u672c\u4e2d\u6307\u5b9a\u5730\u5740\uff0c\u5982\u4e0b\u6240\u793a\uff08<\/span><code>ACCOUNT_ADDRESS<\/code><span>\u5c06\u7b7e\u7f72\u4ea4\u6613\u7684\u5730\u5740\uff09\uff1a<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_16\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_16 > code\"><\/button><code><span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">deployer<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">await<\/span> <span class=\"nx\">deployer<\/span><span class=\"p\">.<\/span><span class=\"nx\">deploy<\/span><span class=\"p\">(<\/span><span class=\"nx\">Marketplace<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">marketplace<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">deployed<\/span><span class=\"p\">();<\/span>\r\n  <span class=\"k\">await<\/span> <span class=\"nx\">deployer<\/span><span class=\"p\">.<\/span><span class=\"nx\">deploy<\/span><span class=\"p\">(<\/span><span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">,<\/span> <span class=\"nx\">marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">address<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span><span class=\"kr\">from<\/span><span class=\"o\">:<\/span> <span class=\"s2\">\"ACCOUNT_ADDRESS\"<\/span><span class=\"p\">});<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3 id=\"deploy-to-optimism-locally\"><span>\u5728\u672c\u5730\u90e8\u7f72\u5230 Optimism<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#deploy-to-optimism-locally\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u60a8\u8fd8\u53ef\u4ee5\u90e8\u7f72\u5230\u672c\u5730\u8fd0\u884c\u7684 Optimism \u5b9e\u4f8b\u3002\u60a8\u9700\u8981\u6709\u975e\u5e38<\/span><a href=\"https:\/\/community.optimism.io\/docs\/developers\/build\/dev-node\/#\"><span>\u5177\u4f53\u7684\u7cfb\u7edf\u8981\u6c42<\/span><\/a><span>\u3002\u786e\u4fdd\u7aef\u53e3 9545 \u548c 8545 \u7a7a\u95f2\uff0c\u7136\u540e\u8fd0\u884c\uff1a<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_17\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_17 > code\"><\/button><code>npm run installLocalOptimism\r\nnpm run startLocalOptimism\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"create-your-front-end\"><span>\u521b\u5efa\u4f60\u7684\u524d\u7aef<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#create-your-front-end\"><span>\u00b6<\/span><\/a><\/h2>\n<p><span>\u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u5b89\u88c5\u4e00\u4e9b\u5305\u6765\u8ba9\u6211\u4eec\u7684\u5ba2\u6237\u7aef\u542f\u52a8\u5e76\u8fd0\u884c\uff1a<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_18\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_18 > code\"><\/button><code><span class=\"nb\">cd<\/span> client\r\nnpm install axios\r\nnpm install web3modal\r\nnpm install web3\r\nnpm install ipfs-http-client\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u7136\u540e\uff0c\u6211\u4eec\u9700\u8981\u521b\u5efa\u6216\u7f16\u8f91\u4ee5\u4e0b 6 \u4e2a\u6587\u4ef6<\/span><code>client\/pages<\/code><span>\uff1a<\/span><\/p>\n<h3 id=\"_appjs\"><code>_app.js<\/code><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#_appjs\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8be5\u6587\u4ef6\u7ec4\u7ec7\u94fe\u63a5\u8def\u7531<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_19\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_19 > code\"><\/button><code><span class=\"k\">import<\/span> <span class=\"s1\">'..\/styles\/globals.css'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Link<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'next\/link'<\/span>\r\n\r\n<span class=\"kd\">function<\/span> <span class=\"nx\">MyApp<\/span><span class=\"p\">({<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">pageProps<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n    <span class=\"o\"><<\/span><span class=\"nx\">div<\/span><span class=\"o\">><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"nx\">nav<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"border-b p-6\"<\/span><span class=\"o\">><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"text-4xl font-bold\"<\/span><span class=\"o\">><\/span><span class=\"nx\">Bored<\/span> <span class=\"nx\">Pet<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"o\"><<\/span><span class=\"err\">\/p><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"flex mt-4\"<\/span><span class=\"o\">><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\/\"<\/span><span class=\"o\">><\/span>\r\n            <span class=\"o\"><<\/span><span class=\"nx\">a<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mr-4 text-teal-400\"<\/span><span class=\"o\">><\/span>\r\n              <span class=\"nx\">Home<\/span>\r\n            <span class=\"o\"><<\/span><span class=\"err\">\/a><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"err\">\/Link><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\/create-and-list-nft\"<\/span><span class=\"o\">><\/span>\r\n            <span class=\"o\"><<\/span><span class=\"nx\">a<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mr-6 text-teal-400\"<\/span><span class=\"o\">><\/span>\r\n              <span class=\"nx\">Sell<\/span> <span class=\"nx\">a<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">NFT<\/span>\r\n            <span class=\"o\"><<\/span><span class=\"err\">\/a><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"err\">\/Link><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\/my-nfts\"<\/span><span class=\"o\">><\/span>\r\n            <span class=\"o\"><<\/span><span class=\"nx\">a<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mr-6 text-teal-400\"<\/span><span class=\"o\">><\/span>\r\n              <span class=\"nx\">My<\/span> <span class=\"nx\">NFTs<\/span>\r\n            <span class=\"o\"><<\/span><span class=\"err\">\/a><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"err\">\/Link><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\/my-listed-nfts\"<\/span><span class=\"o\">><\/span>\r\n            <span class=\"o\"><<\/span><span class=\"nx\">a<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mr-6 text-teal-400\"<\/span><span class=\"o\">><\/span>\r\n              <span class=\"nx\">My<\/span> <span class=\"nx\">Listed<\/span> <span class=\"nx\">NFTs<\/span>\r\n            <span class=\"o\"><<\/span><span class=\"err\">\/a><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"err\">\/Link><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"err\">\/nav><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{...<\/span><span class=\"nx\">pageProps<\/span><span class=\"p\">}<\/span> <span class=\"o\">\/><\/span>\r\n    <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n  <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">MyApp<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p>\u00a0<\/p>\n<h3 id=\"indexjs\"><code>index.js<\/code><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#indexjs\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8be5\u6587\u4ef6\u662f\u201c\u4e3b\u9875\u201d\u9009\u9879\u5361\uff0c\u7528\u6237\u53ef\u4ee5\u5728\u5176\u4e2d\u67e5\u770b\u548c\u8d2d\u4e70\u6240\u6709\u5217\u51fa\u7684 NFT\u3002<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_20\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_20 > code\"><\/button><code tabindex=\"0\"><span class=\"k\">import<\/span> <span class=\"nx\">Web3<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Web3Modal<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3modal'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'react'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">axios<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'axios'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Marketplace<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/Marketplace.json'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">BoredPetsNFT<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/BoredPetsNFT.json'<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">nfts<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setNfts<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">([])<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">loadingState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLoadingState<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"s1\">'not-loaded'<\/span><span class=\"p\">)<\/span>\r\n\r\n  <span class=\"nx\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"p\">=><\/span> <span class=\"p\">{<\/span> <span class=\"nx\">loadNFTs<\/span><span class=\"p\">()<\/span> <span class=\"p\">},<\/span> <span class=\"p\">[])<\/span>\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">loadNFTs<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3Modal<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3Modal<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">provider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3Modal<\/span><span class=\"p\">.<\/span><span class=\"nx\">connect<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3<\/span><span class=\"p\">(<\/span><span class=\"nx\">provider<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">networkId<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"p\">.<\/span><span class=\"nx\">getId<\/span><span class=\"p\">()<\/span>\r\n\r\n    <span class=\"c1\">\/\/ Get all listed NFTs<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">marketPlaceContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">listings<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">marketPlaceContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">getListedNfts<\/span><span class=\"p\">().<\/span><span class=\"nx\">call<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"c1\">\/\/ Iterate over the listed NFTs and retrieve their metadata<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">nfts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nb\">Promise<\/span><span class=\"p\">.<\/span><span class=\"nx\">all<\/span><span class=\"p\">(<\/span><span class=\"nx\">listings<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">(<\/span><span class=\"k\">async<\/span> <span class=\"p\">(<\/span><span class=\"nx\">i<\/span><span class=\"p\">)<\/span> <span class=\"p\">=><\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">boredPetsContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">tokenURI<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">boredPetsContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenURI<\/span><span class=\"p\">(<\/span><span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenId<\/span><span class=\"p\">).<\/span><span class=\"nx\">call<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">meta<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">axios<\/span><span class=\"p\">.<\/span><span class=\"nx\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">tokenURI<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">nft<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n          <span class=\"nx\">price<\/span><span class=\"o\">:<\/span> <span class=\"kt\">i.price<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">tokenId<\/span><span class=\"o\">:<\/span> <span class=\"kt\">i.tokenId<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">seller<\/span><span class=\"o\">:<\/span> <span class=\"kt\">i.seller<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">owner<\/span><span class=\"o\">:<\/span> <span class=\"kt\">i.buyer<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">image<\/span><span class=\"o\">:<\/span> <span class=\"kt\">meta.data.image<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">name<\/span><span class=\"o\">:<\/span> <span class=\"kt\">meta.data.name<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">description<\/span><span class=\"o\">:<\/span> <span class=\"kt\">meta.data.description<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"p\">}<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">nft<\/span>\r\n      <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"kc\">null<\/span>\r\n      <span class=\"p\">}<\/span>\r\n    <span class=\"p\">}))<\/span>\r\n    <span class=\"nx\">setNfts<\/span><span class=\"p\">(<\/span><span class=\"nx\">nfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">filter<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">nft<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">))<\/span>\r\n    <span class=\"nx\">setLoadingState<\/span><span class=\"p\">(<\/span><span class=\"s1\">'loaded'<\/span><span class=\"p\">)<\/span> \r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">buyNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3Modal<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3Modal<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">provider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3Modal<\/span><span class=\"p\">.<\/span><span class=\"nx\">connect<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3<\/span><span class=\"p\">(<\/span><span class=\"nx\">provider<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">networkId<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"p\">.<\/span><span class=\"nx\">getId<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">marketPlaceContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">accounts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">getAccounts<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">await<\/span> <span class=\"nx\">marketPlaceContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">buyNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">,<\/span> <span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenId<\/span><span class=\"p\">).<\/span><span class=\"nx\">send<\/span><span class=\"p\">({<\/span> <span class=\"nx\">from<\/span><span class=\"o\">:<\/span> <span class=\"kt\">accounts<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">],<\/span> <span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"kt\">nft.price<\/span> <span class=\"p\">});<\/span>\r\n    <span class=\"nx\">loadNFTs<\/span><span class=\"p\">()<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">loadingState<\/span> <span class=\"o\">===<\/span> <span class=\"s1\">'loaded'<\/span> <span class=\"o\">&&<\/span> <span class=\"o\">!<\/span><span class=\"nx\">nfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span><span class=\"o\"><<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"px-20 py-10 text-3xl\"<\/span><span class=\"o\">><\/span><span class=\"nx\">No<\/span> <span class=\"nx\">pets<\/span> <span class=\"nx\">available<\/span><span class=\"o\">!<<\/span><span class=\"err\">\/h1>)<\/span>\r\n  <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"flex justify-center\"<\/span><span class=\"o\">><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"px-4\"<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">maxWidth<\/span><span class=\"o\">:<\/span> <span class=\"s1\">'1600px'<\/span> <span class=\"p\">}<\/span> <span class=\"p\">}<\/span><span class=\"o\">><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4\"<\/span><span class=\"o\">><\/span>\r\n            <span class=\"p\">{<\/span>\r\n              <span class=\"nx\">nfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">nft<\/span><span class=\"p\">,<\/span> <span class=\"nx\">i<\/span><span class=\"p\">)<\/span> <span class=\"p\">=><\/span> <span class=\"p\">(<\/span>\r\n                <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">i<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"border shadow rounded-xl overflow-hidden\"<\/span><span class=\"o\">><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"nx\">img<\/span> <span class=\"nx\">src<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"p\">}<\/span> <span class=\"o\">\/><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"p-4\"<\/span><span class=\"o\">><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">height<\/span><span class=\"o\">:<\/span> <span class=\"s1\">'64px'<\/span> <span class=\"p\">}<\/span> <span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"text-2xl font-semibold\"<\/span><span class=\"o\">><\/span><span class=\"p\">{<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\"><<\/span><span class=\"err\">\/p><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">height<\/span><span class=\"o\">:<\/span> <span class=\"s1\">'70px'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">overflow<\/span><span class=\"o\">:<\/span> <span class=\"s1\">'hidden'<\/span>  <span class=\"p\">}<\/span> <span class=\"p\">}<\/span><span class=\"o\">><\/span>\r\n                      <span class=\"o\"><<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"text-gray-400\"<\/span><span class=\"o\">><\/span><span class=\"p\">{<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"p\">}<\/span><span class=\"o\"><<\/span><span class=\"err\">\/p><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"p-4 bg-black\"<\/span><span class=\"o\">><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"text-2xl font-bold text-white\"<\/span><span class=\"o\">><\/span><span class=\"p\">{<\/span><span class=\"nx\">Web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">utils<\/span><span class=\"p\">.<\/span><span class=\"nx\">fromWei<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"ether\"<\/span><span class=\"p\">)}<\/span> <span class=\"nx\">ETH<\/span><span class=\"o\"><<\/span><span class=\"err\">\/p><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mt-4 w-full bg-teal-400 text-white font-bold py-2 px-12 rounded\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">buyNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span><span class=\"p\">)}<\/span><span class=\"o\">><\/span><span class=\"nx\">Buy<\/span><span class=\"o\"><<\/span><span class=\"err\">\/button><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n                <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n              <span class=\"p\">))<\/span>\r\n            <span class=\"p\">}<\/span>\r\n          <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n    <span class=\"p\">)<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3 id=\"create-and-list-nftjs\"><code>create-and-list-nft.js<\/code><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#create-and-list-nftjs\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8fd9\u662f Sell \u9009\u9879\u5361\uff0c\u7528\u6237\u53ef\u4ee5\u5728\u5176\u4e2d\u521b\u5efa\u548c\u5217\u51fa NFT\u3002<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_21\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_21 > code\"><\/button><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'react'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Web3<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Web3Modal<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3modal'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">create<\/span> <span class=\"kr\">as<\/span> <span class=\"nx\">ipfsHttpClient<\/span> <span class=\"p\">}<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'ipfs-http-client'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'next\/router'<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">client<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">ipfsHttpClient<\/span><span class=\"p\">(<\/span><span class=\"s1\">'https:\/\/ipfs.infura.io:5001\/api\/v0'<\/span><span class=\"p\">)<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Marketplace<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/Marketplace.json'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">BoredPetsNFT<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/BoredPetsNFT.json'<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">CreateItem<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">fileUrl<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setFileUrl<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">formInput<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateFormInput<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">({<\/span> <span class=\"nx\">price<\/span><span class=\"o\">:<\/span> <span class=\"s1\">''<\/span><span class=\"p\">,<\/span> <span class=\"nx\">name<\/span><span class=\"o\">:<\/span> <span class=\"s1\">''<\/span><span class=\"p\">,<\/span> <span class=\"nx\">description<\/span><span class=\"o\">:<\/span> <span class=\"s1\">''<\/span> <span class=\"p\">})<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRouter<\/span><span class=\"p\">()<\/span>\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">onChange<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"c1\">\/\/ upload image to IPFS<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">file<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">files<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">]<\/span>\r\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"kd\">const<\/span> <span class=\"nx\">added<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span>\r\n        <span class=\"nx\">file<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"p\">{<\/span>\r\n          <span class=\"nx\">progress<\/span><span class=\"o\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">prog<\/span><span class=\"p\">)<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"sb\">`received: <\/span><span class=\"si\">${<\/span><span class=\"nx\">prog<\/span><span class=\"si\">}<\/span><span class=\"sb\">`<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"p\">}<\/span>\r\n      <span class=\"p\">)<\/span>\r\n      <span class=\"kd\">const<\/span> <span class=\"nx\">url<\/span> <span class=\"o\">=<\/span> <span class=\"sb\">`https:\/\/ipfs.infura.io\/ipfs\/<\/span><span class=\"si\">${<\/span><span class=\"nx\">added<\/span><span class=\"p\">.<\/span><span class=\"nx\">path<\/span><span class=\"si\">}<\/span><span class=\"sb\">`<\/span>\r\n      <span class=\"nx\">setFileUrl<\/span><span class=\"p\">(<\/span><span class=\"nx\">url<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">'Error uploading file: '<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>  \r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">uploadToIPFS<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">description<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">formInput<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">name<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">description<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">price<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">fileUrl<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"k\">return<\/span>\r\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"c1\">\/\/ first, upload metadata to IPFS<\/span>\r\n      <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nx\">stringify<\/span><span class=\"p\">({<\/span>\r\n        <span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">description<\/span><span class=\"p\">,<\/span> <span class=\"nx\">image<\/span><span class=\"o\">:<\/span> <span class=\"nx\">fileUrl<\/span>\r\n      <span class=\"p\">})<\/span>\r\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">added<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">url<\/span> <span class=\"o\">=<\/span> <span class=\"sb\">`https:\/\/ipfs.infura.io\/ipfs\/<\/span><span class=\"si\">${<\/span><span class=\"nx\">added<\/span><span class=\"p\">.<\/span><span class=\"nx\">path<\/span><span class=\"si\">}<\/span><span class=\"sb\">`<\/span>\r\n        <span class=\"c1\">\/\/ after metadata is uploaded to IPFS, return the URL to use it in the transaction<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">url<\/span>\r\n      <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">'Error uploading file: '<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\r\n      <span class=\"p\">}<\/span> \r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">listNFTForSale<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3Modal<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3Modal<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">provider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3Modal<\/span><span class=\"p\">.<\/span><span class=\"nx\">connect<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3<\/span><span class=\"p\">(<\/span><span class=\"nx\">provider<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">url<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">uploadToIPFS<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">networkId<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"p\">.<\/span><span class=\"nx\">getId<\/span><span class=\"p\">()<\/span>\r\n\r\n    <span class=\"c1\">\/\/ Mint the NFT<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">boredPetsContractAddress<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">boredPetsContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">boredPetsContractAddress<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">accounts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">getAccounts<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">marketPlaceContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">listingFee<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">marketPlaceContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">getListingFee<\/span><span class=\"p\">().<\/span><span class=\"nx\">call<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"nx\">listingFee<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">listingFee<\/span><span class=\"p\">.<\/span><span class=\"nx\">toString<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"nx\">boredPetsContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">mint<\/span><span class=\"p\">(<\/span><span class=\"nx\">url<\/span><span class=\"p\">).<\/span><span class=\"nx\">send<\/span><span class=\"p\">({<\/span> <span class=\"kr\">from<\/span><span class=\"o\">:<\/span> <span class=\"nx\">accounts<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">]<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">on<\/span><span class=\"p\">(<\/span><span class=\"s1\">'receipt'<\/span><span class=\"p\">,<\/span> <span class=\"kd\">function<\/span> <span class=\"p\">(<\/span><span class=\"nx\">receipt<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">'minted'<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"c1\">\/\/ List the NFT<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">tokenId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">receipt<\/span><span class=\"p\">.<\/span><span class=\"nx\">events<\/span><span class=\"p\">.<\/span><span class=\"nx\">NFTMinted<\/span><span class=\"p\">.<\/span><span class=\"nx\">returnValues<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">];<\/span>\r\n        <span class=\"nx\">marketPlaceContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">listNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">boredPetsContractAddress<\/span><span class=\"p\">,<\/span> <span class=\"nx\">tokenId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">utils<\/span><span class=\"p\">.<\/span><span class=\"nx\">toWei<\/span><span class=\"p\">(<\/span><span class=\"nx\">formInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"ether\"<\/span><span class=\"p\">))<\/span>\r\n            <span class=\"p\">.<\/span><span class=\"nx\">send<\/span><span class=\"p\">({<\/span> <span class=\"kr\">from<\/span><span class=\"o\">:<\/span> <span class=\"nx\">accounts<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">],<\/span> <span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"nx\">listingFee<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">on<\/span><span class=\"p\">(<\/span><span class=\"s1\">'receipt'<\/span><span class=\"p\">,<\/span> <span class=\"kd\">function<\/span> <span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n                <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s1\">'listed'<\/span><span class=\"p\">)<\/span>\r\n                <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"s1\">'\/'<\/span><span class=\"p\">)<\/span>\r\n            <span class=\"p\">});<\/span>\r\n    <span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n    <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"flex justify-center\"<\/span><span class=\"o\">><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"w-1\/2 flex flex-col pb-12\"<\/span><span class=\"o\">><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">input<\/span> \r\n          <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"Asset Name\"<\/span>\r\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mt-8 border rounded p-4\"<\/span>\r\n          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">e<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">updateFormInput<\/span><span class=\"p\">({<\/span> <span class=\"p\">...<\/span><span class=\"nx\">formInput<\/span><span class=\"p\">,<\/span> <span class=\"nx\">name<\/span><span class=\"o\">:<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"p\">})}<\/span>\r\n        <span class=\"o\">\/><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">textarea<\/span>\r\n          <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"Asset Description\"<\/span>\r\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mt-2 border rounded p-4\"<\/span>\r\n          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">e<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">updateFormInput<\/span><span class=\"p\">({<\/span> <span class=\"p\">...<\/span><span class=\"nx\">formInput<\/span><span class=\"p\">,<\/span> <span class=\"nx\">description<\/span><span class=\"o\">:<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"p\">})}<\/span>\r\n        <span class=\"o\">\/><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">input<\/span>\r\n          <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"Asset Price in Eth\"<\/span>\r\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mt-2 border rounded p-4\"<\/span>\r\n          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">e<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">updateFormInput<\/span><span class=\"p\">({<\/span> <span class=\"p\">...<\/span><span class=\"nx\">formInput<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span><span class=\"o\">:<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"p\">})}<\/span>\r\n        <span class=\"o\">\/><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">input<\/span>\r\n          <span class=\"nx\">type<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"file\"<\/span>\r\n          <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"Asset\"<\/span>\r\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"my-4\"<\/span>\r\n          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onChange<\/span><span class=\"p\">}<\/span>\r\n        <span class=\"o\">\/><\/span>\r\n        <span class=\"p\">{<\/span>\r\n          <span class=\"nx\">fileUrl<\/span> <span class=\"o\">&&<\/span> <span class=\"p\">(<\/span>\r\n            <span class=\"o\"><<\/span><span class=\"nx\">img<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"rounded mt-4\"<\/span> <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"350\"<\/span> <span class=\"nx\">src<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">fileUrl<\/span><span class=\"p\">}<\/span> <span class=\"o\">\/><\/span>\r\n          <span class=\"p\">)<\/span>\r\n        <span class=\"p\">}<\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">listNFTForSale<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"font-bold mt-4 bg-teal-400 text-white rounded p-4 shadow-lg\"<\/span><span class=\"o\">><\/span>\r\n          <span class=\"nx\">Mint<\/span> <span class=\"nx\">and<\/span> <span class=\"nx\">list<\/span> <span class=\"nx\">NFT<\/span>\r\n        <span class=\"o\"><<\/span><span class=\"err\">\/button><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n    <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n  <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3 id=\"my-nftsjs\"><code>my-nfts.js<\/code><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#my-nftsjs\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8fd9\u662f\u6211\u7684 NFT \u9009\u9879\u5361\uff0c\u7528\u6237\u53ef\u4ee5\u5728\u5176\u4e2d\u67e5\u770b\u4ed6\u4eec\u62e5\u6709\u7684 NFT \u5e76\u9009\u62e9\u8f6c\u552e\u3002<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_22\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_22 > code\"><\/button><code tabindex=\"0\"><span class=\"k\">import<\/span> <span class=\"nx\">Web3<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'react'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">axios<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'axios'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Web3Modal<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3modal'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'next\/router'<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Marketplace<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/Marketplace.json'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">BoredPetsNFT<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/BoredPetsNFT.json'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">MyAssets<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">nfts<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setNfts<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">([])<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">loadingState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLoadingState<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"s1\">'not-loaded'<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRouter<\/span><span class=\"p\">()<\/span>\r\n\r\n  <span class=\"nx\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"p\">=><\/span> <span class=\"p\">{<\/span> <span class=\"nx\">loadNFTs<\/span><span class=\"p\">()<\/span> <span class=\"p\">},<\/span> <span class=\"p\">[])<\/span>\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">loadNFTs<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3Modal<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3Modal<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">provider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3Modal<\/span><span class=\"p\">.<\/span><span class=\"nx\">connect<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3<\/span><span class=\"p\">(<\/span><span class=\"nx\">provider<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">networkId<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"p\">.<\/span><span class=\"nx\">getId<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">marketPlaceContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">boredPetsContractAddress<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">boredPetsContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">boredPetsContractAddress<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">accounts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">getAccounts<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">marketPlaceContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">getMyNfts<\/span><span class=\"p\">().<\/span><span class=\"nx\">call<\/span><span class=\"p\">({<\/span><span class=\"kr\">from<\/span><span class=\"o\">:<\/span> <span class=\"nx\">accounts<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">]})<\/span>\r\n\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">nfts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nb\">Promise<\/span><span class=\"p\">.<\/span><span class=\"nx\">all<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">(<\/span><span class=\"k\">async<\/span> <span class=\"nx\">i<\/span> <span class=\"p\">=><\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">tokenURI<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">boredPetsContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenURI<\/span><span class=\"p\">(<\/span><span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenId<\/span><span class=\"p\">).<\/span><span class=\"nx\">call<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">meta<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">axios<\/span><span class=\"p\">.<\/span><span class=\"nx\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">tokenURI<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"kd\">let<\/span> <span class=\"nx\">nft<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n          <span class=\"nx\">price<\/span><span class=\"o\">:<\/span> <span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">tokenId<\/span><span class=\"o\">:<\/span> <span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenId<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">seller<\/span><span class=\"o\">:<\/span> <span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">seller<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">owner<\/span><span class=\"o\">:<\/span> <span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">buyer<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">image<\/span><span class=\"o\">:<\/span> <span class=\"nx\">meta<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">name<\/span><span class=\"o\">:<\/span> <span class=\"nx\">meta<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">description<\/span><span class=\"o\">:<\/span> <span class=\"nx\">meta<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">tokenURI<\/span><span class=\"o\">:<\/span> <span class=\"nx\">tokenURI<\/span>\r\n        <span class=\"p\">}<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">nft<\/span>\r\n      <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"kc\">null<\/span>\r\n      <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"p\">}))<\/span>\r\n    <span class=\"nx\">setNfts<\/span><span class=\"p\">(<\/span><span class=\"nx\">nfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">filter<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">nft<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">))<\/span>\r\n    <span class=\"nx\">setLoadingState<\/span><span class=\"p\">(<\/span><span class=\"s1\">'loaded'<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"kd\">function<\/span> <span class=\"nx\">listNFT<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"sb\">`\/resell-nft?id=<\/span><span class=\"si\">${<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenId<\/span><span class=\"si\">}<\/span><span class=\"sb\">&tokenURI=<\/span><span class=\"si\">${<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenURI<\/span><span class=\"si\">}<\/span><span class=\"sb\">`<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">loadingState<\/span> <span class=\"o\">===<\/span> <span class=\"s1\">'loaded'<\/span> <span class=\"o\">&&<\/span> <span class=\"o\">!<\/span><span class=\"nx\">nfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span><span class=\"o\"><<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"py-10 px-20 text-3xl\"<\/span><span class=\"o\">><\/span><span class=\"nx\">No<\/span> <span class=\"nx\">NFTs<\/span> <span class=\"nx\">owned<\/span><span class=\"o\"><<\/span><span class=\"err\">\/h1>);<\/span>\r\n  <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"flex justify-center\"<\/span><span class=\"o\">><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"p-4\"<\/span><span class=\"o\">><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4\"<\/span><span class=\"o\">><\/span>\r\n            <span class=\"p\">{<\/span>\r\n              <span class=\"nx\">nfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">nft<\/span><span class=\"p\">,<\/span> <span class=\"nx\">i<\/span><span class=\"p\">)<\/span> <span class=\"p\">=><\/span> <span class=\"p\">(<\/span>\r\n                <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">i<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"border shadow rounded-xl overflow-hidden\"<\/span><span class=\"o\">><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"nx\">img<\/span> <span class=\"nx\">src<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"rounded\"<\/span> <span class=\"o\">\/><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"p-4\"<\/span><span class=\"o\">><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">height<\/span><span class=\"o\">:<\/span> <span class=\"s1\">'64px'<\/span> <span class=\"p\">}<\/span> <span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"text-2xl font-semibold\"<\/span><span class=\"o\">><\/span><span class=\"p\">{<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\"><<\/span><span class=\"err\">\/p><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">height<\/span><span class=\"o\">:<\/span> <span class=\"s1\">'70px'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">overflow<\/span><span class=\"o\">:<\/span> <span class=\"s1\">'hidden'<\/span> <span class=\"p\">}<\/span> <span class=\"p\">}<\/span><span class=\"o\">><\/span>\r\n                      <span class=\"o\"><<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"text-gray-400\"<\/span><span class=\"o\">><\/span><span class=\"p\">{<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"p\">}<\/span><span class=\"o\"><<\/span><span class=\"err\">\/p><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"p-4 bg-black\"<\/span><span class=\"o\">><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"text-2xl font-bold text-white\"<\/span><span class=\"o\">><\/span><span class=\"nx\">Price<\/span> <span class=\"o\">-<\/span> <span class=\"p\">{<\/span><span class=\"nx\">Web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">utils<\/span><span class=\"p\">.<\/span><span class=\"nx\">fromWei<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"ether\"<\/span><span class=\"p\">)}<\/span> <span class=\"nx\">Eth<\/span><span class=\"o\"><<\/span><span class=\"err\">\/p><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mt-4 w-full bg-teal-400 text-white font-bold py-2 px-12 rounded\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">listNFT<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span><span class=\"p\">)}<\/span><span class=\"o\">><\/span><span class=\"nx\">List<\/span><span class=\"o\"><<\/span><span class=\"err\">\/button><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n                <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n              <span class=\"p\">))<\/span>\r\n            <span class=\"p\">}<\/span>\r\n          <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3 id=\"resell-nftjs\"><code>resell-nft.js<\/code><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#resell-nftjs\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8fd9\u662f\u7528\u6237\u88ab\u5f15\u5bfc\u5230\u8f6c\u552e\u5176 NFT \u7684\u9875\u9762\u3002<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_23\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_23 > code\"><\/button><code tabindex=\"0\"><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'react'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Web3<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'next\/router'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">axios<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'axios'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Web3Modal<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3modal'<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Marketplace<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/Marketplace.json'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">BoredPetsNFT<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/BoredPetsNFT.json'<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">ResellNFT<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">formInput<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateFormInput<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">({<\/span> <span class=\"nx\">price<\/span><span class=\"o\">:<\/span> <span class=\"s1\">''<\/span><span class=\"p\">,<\/span> <span class=\"nx\">image<\/span><span class=\"o\">:<\/span> <span class=\"s1\">''<\/span> <span class=\"p\">})<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRouter<\/span><span class=\"p\">()<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">tokenURI<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">query<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">image<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">formInput<\/span>\r\n\r\n  <span class=\"nx\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"p\">=><\/span> <span class=\"p\">{<\/span> <span class=\"nx\">fetchNFT<\/span><span class=\"p\">()<\/span> <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">])<\/span>\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">fetchNFT<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">tokenURI<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span>\r\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">meta<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">axios<\/span><span class=\"p\">.<\/span><span class=\"nx\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">tokenURI<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"nx\">updateFormInput<\/span><span class=\"p\">(<\/span><span class=\"nx\">state<\/span> <span class=\"p\">=><\/span> <span class=\"p\">({<\/span> <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"nx\">image<\/span><span class=\"o\">:<\/span> <span class=\"nx\">meta<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span> <span class=\"p\">}))<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">listNFTForSale<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">price<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span>\r\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">web3Modal<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3Modal<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">provider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3Modal<\/span><span class=\"p\">.<\/span><span class=\"nx\">connect<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">web3<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3<\/span><span class=\"p\">(<\/span><span class=\"nx\">provider<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">networkId<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"p\">.<\/span><span class=\"nx\">getId<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">marketPlaceContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"kd\">let<\/span> <span class=\"nx\">listingFee<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">marketPlaceContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">getListingFee<\/span><span class=\"p\">().<\/span><span class=\"nx\">call<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nx\">listingFee<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">listingFee<\/span><span class=\"p\">.<\/span><span class=\"nx\">toString<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">accounts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">getAccounts<\/span><span class=\"p\">()<\/span>\r\n        <span class=\"nx\">marketPlaceContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">resellNft<\/span><span class=\"p\">(<\/span><span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">,<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">utils<\/span><span class=\"p\">.<\/span><span class=\"nx\">toWei<\/span><span class=\"p\">(<\/span><span class=\"nx\">formInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"ether\"<\/span><span class=\"p\">))<\/span>\r\n            <span class=\"p\">.<\/span><span class=\"nx\">send<\/span><span class=\"p\">({<\/span> <span class=\"kr\">from<\/span><span class=\"o\">:<\/span> <span class=\"nx\">accounts<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">],<\/span> <span class=\"nx\">value<\/span><span class=\"o\">:<\/span> <span class=\"nx\">listingFee<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">on<\/span><span class=\"p\">(<\/span><span class=\"s1\">'receipt'<\/span><span class=\"p\">,<\/span> <span class=\"kd\">function<\/span> <span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n                <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"s1\">'\/'<\/span><span class=\"p\">)<\/span>\r\n            <span class=\"p\">});<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n    <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"flex justify-center\"<\/span><span class=\"o\">><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"w-1\/2 flex flex-col pb-12\"<\/span><span class=\"o\">><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">input<\/span>\r\n          <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"Asset Price in Eth\"<\/span>\r\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"mt-2 border rounded p-4\"<\/span>\r\n          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">e<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">updateFormInput<\/span><span class=\"p\">({<\/span> <span class=\"p\">...<\/span><span class=\"nx\">formInput<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span><span class=\"o\">:<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"p\">})}<\/span>\r\n        <span class=\"o\">\/><\/span>\r\n        <span class=\"p\">{<\/span>\r\n          <span class=\"nx\">image<\/span> <span class=\"o\">&&<\/span> <span class=\"p\">(<\/span>\r\n            <span class=\"o\"><<\/span><span class=\"nx\">img<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"rounded mt-4\"<\/span> <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"350\"<\/span> <span class=\"nx\">src<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">image<\/span><span class=\"p\">}<\/span> <span class=\"o\">\/><\/span>\r\n          <span class=\"p\">)<\/span>\r\n        <span class=\"p\">}<\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">listNFTForSale<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"font-bold mt-4 bg-teal-400 text-white rounded p-4 shadow-lg\"<\/span><span class=\"o\">><\/span>\r\n          <span class=\"nx\">List<\/span> <span class=\"nx\">NFT<\/span>\r\n        <span class=\"o\"><<\/span><span class=\"err\">\/button><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n    <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n  <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3 id=\"my-listed-nftsjs\"><code>my-listed-nfts.js<\/code><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#my-listed-nftsjs\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8fd9\u662f\u6211\u5217\u51fa\u7684 NFT \u9009\u9879\u5361\uff0c\u7528\u6237\u53ef\u4ee5\u5728\u5176\u4e2d\u67e5\u770b\u4ed6\u4eec\u5217\u51fa\u7684\u5f85\u552e NFT\u3002<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_24\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_24 > code\"><\/button><code><span class=\"k\">import<\/span> <span class=\"nx\">Web3<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'react'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">axios<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'axios'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Web3Modal<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'web3modal'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Marketplace<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/Marketplace.json'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">BoredPetsNFT<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/BoredPetsNFT.json'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">CreatorDashboard<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">nfts<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setNfts<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">([])<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">loadingState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLoadingState<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"s1\">'not-loaded'<\/span><span class=\"p\">)<\/span>\r\n\r\n  <span class=\"nx\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"p\">=><\/span> <span class=\"p\">{<\/span> <span class=\"nx\">loadNFTs<\/span><span class=\"p\">()<\/span> <span class=\"p\">},<\/span> <span class=\"p\">[])<\/span>\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">loadNFTs<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3Modal<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3Modal<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">provider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3Modal<\/span><span class=\"p\">.<\/span><span class=\"nx\">connect<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">web3<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">Web3<\/span><span class=\"p\">(<\/span><span class=\"nx\">provider<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">networkId<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"p\">.<\/span><span class=\"nx\">getId<\/span><span class=\"p\">()<\/span>\r\n\r\n    <span class=\"c1\">\/\/ Get listed NFTs<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">marketPlaceContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Marketplace<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">accounts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">getAccounts<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">listings<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">marketPlaceContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">getMyListedNfts<\/span><span class=\"p\">().<\/span><span class=\"nx\">call<\/span><span class=\"p\">({<\/span><span class=\"kr\">from<\/span><span class=\"o\">:<\/span> <span class=\"nx\">accounts<\/span><span class=\"p\">[<\/span><span class=\"mf\">0<\/span><span class=\"p\">]})<\/span>\r\n    <span class=\"c1\">\/\/ Iterate over my listed NFTs and retrieve their metadata<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">nfts<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nb\">Promise<\/span><span class=\"p\">.<\/span><span class=\"nx\">all<\/span><span class=\"p\">(<\/span><span class=\"nx\">listings<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">(<\/span><span class=\"k\">async<\/span> <span class=\"nx\">i<\/span> <span class=\"p\">=><\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">boredPetsContract<\/span> <span class=\"o\">=<\/span> <span class=\"ow\">new<\/span> <span class=\"nx\">web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">eth<\/span><span class=\"p\">.<\/span><span class=\"nx\">Contract<\/span><span class=\"p\">(<\/span><span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">abi<\/span><span class=\"p\">,<\/span> <span class=\"nx\">BoredPetsNFT<\/span><span class=\"p\">.<\/span><span class=\"nx\">networks<\/span><span class=\"p\">[<\/span><span class=\"nx\">networkId<\/span><span class=\"p\">].<\/span><span class=\"nx\">address<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">tokenURI<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">boredPetsContract<\/span><span class=\"p\">.<\/span><span class=\"nx\">methods<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenURI<\/span><span class=\"p\">(<\/span><span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenId<\/span><span class=\"p\">).<\/span><span class=\"nx\">call<\/span><span class=\"p\">();<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">meta<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">axios<\/span><span class=\"p\">.<\/span><span class=\"nx\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">tokenURI<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"kd\">let<\/span> <span class=\"nx\">item<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n          <span class=\"nx\">price<\/span><span class=\"o\">:<\/span> <span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">tokenId<\/span><span class=\"o\">:<\/span> <span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenId<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">seller<\/span><span class=\"o\">:<\/span> <span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">seller<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">owner<\/span><span class=\"o\">:<\/span> <span class=\"nx\">i<\/span><span class=\"p\">.<\/span><span class=\"nx\">owner<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"nx\">image<\/span><span class=\"o\">:<\/span> <span class=\"nx\">meta<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"p\">}<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">item<\/span>\r\n      <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"kc\">null<\/span>\r\n      <span class=\"p\">}<\/span>\r\n    <span class=\"p\">}))<\/span>\r\n    <span class=\"nx\">setNfts<\/span><span class=\"p\">(<\/span><span class=\"nx\">nfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">filter<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span> <span class=\"p\">=><\/span> <span class=\"nx\">nft<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">))<\/span>\r\n    <span class=\"nx\">setLoadingState<\/span><span class=\"p\">(<\/span><span class=\"s1\">'loaded'<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">loadingState<\/span> <span class=\"o\">===<\/span> <span class=\"s1\">'loaded'<\/span> <span class=\"o\">&&<\/span> <span class=\"o\">!<\/span><span class=\"nx\">nfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span><span class=\"o\"><<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"py-10 px-20 text-3xl\"<\/span><span class=\"o\">><\/span><span class=\"nx\">No<\/span> <span class=\"nx\">NFTs<\/span> <span class=\"nx\">listed<\/span><span class=\"o\"><<\/span><span class=\"err\">\/h1>)<\/span>\r\n  <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"o\"><<\/span><span class=\"nx\">div<\/span><span class=\"o\">><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"p-4\"<\/span><span class=\"o\">><\/span>\r\n          <span class=\"o\"><<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"text-2xl py-2\"<\/span><span class=\"o\">><\/span><span class=\"nx\">Items<\/span> <span class=\"nx\">Listed<\/span><span class=\"o\"><<\/span><span class=\"err\">\/h2><\/span>\r\n            <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4\"<\/span><span class=\"o\">><\/span>\r\n            <span class=\"p\">{<\/span>\r\n              <span class=\"nx\">nfts<\/span><span class=\"p\">.<\/span><span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">nft<\/span><span class=\"p\">,<\/span> <span class=\"nx\">i<\/span><span class=\"p\">)<\/span> <span class=\"p\">=><\/span> <span class=\"p\">(<\/span>\r\n                <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">i<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"border shadow rounded-xl overflow-hidden\"<\/span><span class=\"o\">><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"nx\">img<\/span> <span class=\"nx\">src<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"rounded\"<\/span> <span class=\"o\">\/><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"p-4 bg-black\"<\/span><span class=\"o\">><\/span>\r\n                    <span class=\"o\"><<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"text-2xl font-bold text-white\"<\/span><span class=\"o\">><\/span><span class=\"nx\">Price<\/span> <span class=\"o\">-<\/span> <span class=\"p\">{<\/span><span class=\"nx\">Web3<\/span><span class=\"p\">.<\/span><span class=\"nx\">utils<\/span><span class=\"p\">.<\/span><span class=\"nx\">fromWei<\/span><span class=\"p\">(<\/span><span class=\"nx\">nft<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"ether\"<\/span><span class=\"p\">)}<\/span> <span class=\"nx\">Eth<\/span><span class=\"o\"><<\/span><span class=\"err\">\/p><\/span>\r\n                  <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n                <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n              <span class=\"p\">))<\/span>\r\n            <span class=\"p\">}<\/span>\r\n          <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n        <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n      <span class=\"o\"><<\/span><span class=\"err\">\/div><\/span>\r\n    <span class=\"p\">)<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3 id=\"web3-client-overview\"><span>Web3 \u5ba2\u6237\u7aef\u6982\u8ff0<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#web3-client-overview\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u8ba9\u6211\u4eec\u56de\u987e\u4e00\u4e0b\u6211\u4eec\u7528\u6765\u8fde\u63a5\u524d\u7aef\u7684 Web3 \u6982\u5ff5\u548c\u5b9e\u7528\u7a0b\u5e8f\u3002<\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/Web3Modal\/web3modal\"><code>web3Modal<\/code><\/a><span>\u662f\u6211\u4eec\u7528\u6765\u68c0\u7d22\u7528\u6237\u7f51\u7edc\u63d0\u4f9b\u5546\u7684\u5e93<\/span><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/ipfs-http-client\"><code>ipfs-http-client<\/code><\/a><span>\u662f\u6211\u4eec\u7528\u6765\u5c06 NFT \u5143\u6570\u636e\u4e0a\u4f20\u5230 IPFS \u7684\u5e93<\/span><\/li>\n<li><a href=\"https:\/\/web3js.readthedocs.io\/\"><code>web3<\/code><\/a><span>\u662f\u4e00\u4e2a\u5141\u8bb8\u6211\u4eec\u4f7f\u7528\u667a\u80fd\u5408\u7ea6\u62bd\u8c61\u7684\u5e93<\/span><\/li>\n<\/ul>\n<p><span>\u6839\u636e\u60a8\u662f\u8981\u4f7f\u7528 Optimism \u5408\u7ea6\u8fd8\u662f Ethereum \u5408\u7ea6\uff0c\u60a8\u5c06\u66f4\u6539\u5408\u7ea6\u5bfc\u5165\u8def\u5f84\uff1a<\/span><\/p>\n<div class=\"highlight\">\n<pre id=\"__code_25\"><button class=\"md-clipboard md-icon\" style=\"box-sizing: border-box; transition: color 0.25s ease 0s; -webkit-tap-highlight-color: transparent; background: transparent; border: 0px; font-family: inherit; font-size: inherit; margin: 1em 1em 0px 0px; padding: 0px; border-radius: 0.1rem; line-height: inherit; text-transform: none; appearance: button; color: var(--md-default-fg-color--lightest); cursor: pointer; height: 1.5em; outline: none; outline-offset: 0.1rem; position: absolute; right: 0.5em; top: 0.5em; width: 1.5em; z-index: 1;\" title=\"\u590d\u5236\u5230\u526a\u8d34\u677f\" data-clipboard-target=\"#__code_25 > code\"><\/button><code><span class=\"k\">import<\/span> <span class=\"nx\">Marketplace<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/Marketplace.json'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">BoredPetsNFT<\/span> <span class=\"kr\">from<\/span> <span class=\"s1\">'..\/contracts\/optimism-contracts\/BoredPetsNFT.json'<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><span>\u5f53\u6211\u4eec\u7528 \u8c03\u7528\u6211\u4eec\u7684\u5408\u7ea6\u65b9\u6cd5\u65f6<\/span><code>Web3.js<\/code><span>\uff0c\u6211\u4eec<\/span><code>call<\/code><span>\u4f1a\u5728\u4e0d\u66f4\u6539\u5408\u7ea6\u72b6\u6001\u4ee5\u53ca\u66f4\u6539\u5408\u7ea6\u72b6\u6001<\/span><code>send<\/code><span>\u65f6\u4f7f\u7528\u3002<\/span><a href=\"https:\/\/web3js.readthedocs.io\/en\/v1.2.2\/web3-eth-contract.html#id25\"><span>\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc<\/span><\/a><span>\u9605\u8bfb\u66f4\u591a\u5173\u4e8e\u5b83\u7684\u4fe1\u606f\u3002<\/span><\/p>\n<h2 id=\"deploy-your-front-end\"><span>\u90e8\u7f72\u60a8\u7684\u524d\u7aef<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#deploy-your-front-end\"><span>\u00b6<\/span><\/a><\/h2>\n<p><span>\u8981\u67e5\u770b\u8fd0\u884c\u4e2d\u7684\u524d\u7aef\uff0c\u53ea\u9700\u4f7f\u7528<\/span><code>package.json<\/code><span>.\u00a0<\/span><code>npm run dev<\/code><span>\u4ece\u6587\u4ef6\u5939\u4e2d\u8fd0\u884c<\/span><code>client<\/code><span>\uff0c\u60a8\u7684\u7f51\u7ad9\u5e94\u8be5\u4f1a\u542f\u52a8<\/span><code>http:\/\/localhost:3000\/<\/code><span>\uff01<\/span><\/p>\n<p><span>\u8bf7\u6ce8\u610f\uff0c\u524d\u7aef\u5c06\u4f7f\u7528\u60a8\u7684 MetaMask \u6269\u5c55\u4e0a\u8bbe\u7f6e\u7684\u4efb\u4f55\u7f51\u7edc\u548c\u5e10\u6237\u3002<\/span><\/p>\n<h3 id=\"adding-ganache-to-metamask\"><span>\u5c06 Ganache \u6dfb\u52a0\u5230 MetaMask<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#adding-ganache-to-metamask\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u5982\u679c\u60a8\u60f3\u4f7f\u7528 Ganache \u4f5c\u4e3a\u60a8\u7684\u7f51\u7edc\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u5c5e\u6027\u5c06\u8be5\u7f51\u7edc\u6dfb\u52a0\u5230\u60a8\u7684 MetaMask \u94b1\u5305\uff1a<\/span><\/p>\n<ul>\n<li><span>\u7f51\u7edc\u540d\u79f0\uff1aGanache<\/span><\/li>\n<li><span>\u65b0\u7684 RPC \u7f51\u5740\uff1ahttp:\/\/127.0.0.1:7545<\/span><\/li>\n<li><span>\u94fe\u53f7\uff1a1337<\/span><\/li>\n<li><span>\u8d27\u5e01\u7b26\u53f7\uff1aETH<\/span><\/li>\n<\/ul>\n<p><span>\u7136\u540e\uff0c\u5bfc\u5165\u4e00\u4e2a\u65b0\u5e10\u6237\u3002\u5982\u679c\u60a8\u4f7f\u7528\u7684\u662f Ganache UI\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u5355\u51fb\u94a5\u5319\u56fe\u6807\u6765\u83b7\u53d6\u79c1\u94a5\u4ee5\u663e\u793a\u5e10\u6237\u5bc6\u94a5\u3002<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/img\/get_private_key.gif\" alt=\"\u83b7\u53d6\u79c1\u94a5\u7684 GIF\" \/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/img\/import_account.gif\" alt=\"\u5bfc\u5165\u5e10\u53f7\u7684 GIF\" \/><\/p>\n<h3 id=\"adding-optimistic-ethereum-to-metamask\"><span>\u5c06\u4e50\u89c2\u4ee5\u592a\u574a\u6dfb\u52a0\u5230 MetaMask<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#adding-optimistic-ethereum-to-metamask\"><span>\u00b6<\/span><\/a><\/h3>\n<p><span>\u5982\u679c\u60a8\u60f3\u4f7f\u7528 Optimism \u7684\u672c\u5730\u5b9e\u4f8b\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u5c5e\u6027\u5c06\u7f51\u7edc\u6dfb\u52a0\u5230\u60a8\u7684 MetaMask \u94b1\u5305\uff1a<\/span><\/p>\n<ul>\n<li><span>\u7f51\u7edc\u540d\u79f0\uff1a\u4e50\u89c2\u4ee5\u592a\u574a<\/span><\/li>\n<li><span>\u65b0\u7684 RPC \u7f51\u5740\uff1ahttp:\/\/127.0.0.1:8545<\/span><\/li>\n<li><span>\u94fe\u53f7\uff1a17<\/span><\/li>\n<li><span>\u8d27\u5e01\u7b26\u53f7\uff1aETH<\/span><\/li>\n<\/ul>\n<p><span>\u7136\u540e\uff0c\u5bfc\u5165\u4e00\u4e2a\u65b0\u5e10\u6237\u3002<\/span><a href=\"https:\/\/community.optimism.io\/docs\/developers\/build\/dev-node\/#accessing-the-environment\"><span>\u60a8\u53ef\u4ee5\u5728\u6b64\u5904<\/span><\/a><span>\u83b7\u53d6\u5e10\u6237\u548c\u79c1\u94a5\u5217\u8868\u3002<\/span><\/p>\n<h2 id=\"additional-notes\"><span>\u8865\u5145\u8bf4\u660e<\/span><a class=\"headerlink\" title=\"\u6c38\u4e45\u94fe\u63a5\" href=\"https:\/\/trufflesuite.com\/guides\/nft-marketplace\/#additional-notes\"><span>\u00b6<\/span><\/a><\/h2>\n<p><span>\u4f60\u6709\u5b83 &#8211; \u4e00\u4e2a\u975e\u5e38\u57fa\u672c\u7684\u5e02\u573a\uff01\u60a8\u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u5728\u6b64\u9879\u76ee\u7684\u57fa\u7840\u4e0a\u8fdb\u884c\u6784\u5efa\uff1a &#8211; \u5141\u8bb8\u7528\u6237\u5bf9 NFT \u8fdb\u884c\u6295\u6807 &#8211; \u5141\u8bb8\u7528\u6237\u5c06\u5176 NFT \u4e0b\u67b6 &#8211; \u5c06 Marketplace \u5408\u7ea6\u548c NFT \u5408\u7ea6\u5408\u4e8c\u4e3a\u4e00 &#8211; \u6865\u63a5 Optimism \u5408\u7ea6\uff08Truffle L2 \u6865\u63a5\u76d2\u5373\u5c06\u63a8\u51fa\uff01\uff09<\/span><\/p>\n<p><span>\u5982\u679c\u60a8\u6709\u5174\u8da3\u5728\u4ee5\u592a\u574a\u548c Optimism \u4e4b\u95f4\u5efa\u7acb\u771f\u6b63\u7684\u6865\u6881\uff0c\u8bf7\u67e5\u770b\u6211\u4eec\u7684 Optimism\u00a0<\/span><a href=\"https:\/\/trufflesuite.com\/blog\/introducing-the-optimism-bridge-truffle-box\/\"><span>Bridge Box<\/span><\/a><span>\uff01<\/span><\/p>\n<p><span>\u52a0\u5165<\/span><a href=\"https:\/\/github.com\/orgs\/trufflesuite\/discussions\"><span>Github Discussions<\/span><\/a><span>\u52a0\u5165 Truffle \u793e\u533a\u8ba8\u8bba\u548c\u63d0\u95ee\uff01<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u539f\u6587\u5730\u5740 \u00a0 \u7531\u827e\u7c73\u4e3d\u00b7\u6797\uff08 Emily<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[24],"tags":[121],"class_list":["post-5914","post","type-post","status-publish","format-standard","hentry","category-value_docs","tag-05-"],"_links":{"self":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/posts\/5914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/comments?post=5914"}],"version-history":[{"count":0,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/posts\/5914\/revisions"}],"wp:attachment":[{"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/media?parent=5914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/categories?post=5914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i007.cc\/wordpress\/wp-json\/wp\/v2\/tags?post=5914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}