此前我还认为在FTX暴雷后，今年的加密生态即便再发生重大事故我们也都猜得到主角是谁，因此不算再有“黑天鹅”。可无论如何我猜不到这才没过多久，稳定币竟然脱锚了。

那么发生这些“黑天鹅”事件时，我们都有哪些方法可以保护自己呢？

我自己会尽量先在第一时间弄清事件的原委，分析清楚到底这个事件是不可逆转的还是只是意外的一次波动。如果是不可逆转的，那我会毫不犹豫地尽快让自己先离开这些风险。如果只是一次意外的波动，我就会继续观察。

以这次稳定币脱锚的事件为例，当USDC出现问题并牵连DAI时，由于我持有的都是DAI，并且认为DAI的脱锚只是暂时的，因此我没有进行任何操作，只是继续观察。

可假如USDC的价格降到0.8美元甚至以下，并且在这个价位保持了几个小时依旧上不来时，那我就会首先考虑尽快把DAI换成法币。如果没有这个渠道，那我就会把DAI抛掉，分散买入LUSD、以太坊和比特币。

在第一方案中，我之所以会先考虑把DAI换成法币（美元或者人民币）是因为我还是想继续留存“稳定币”，但是想找个更“安全”的稳定币。所以法币就是不二选择-----因为所有的稳定币最终锚定的都是法币。

在这种情况下，等风险散尽，我才会把法币再换回稳定币。

在退而求其次的方案中，我之所以在稳定币中只买LUSD是因为它纯粹是用以太坊作抵押，所以它的风险最小。我买入以太坊和比特币是因为我相信它们的未来。

在这种情况下，等风险散尽，买入的LUSD、以太坊和比特币我就都继续持有不动了。

除此以外，还有另外一种思路。这种思路认为USDC的脱锚只是暂时的，它终究会回去，因此在这个时候甚至大胆买入。

这个做法如果合理，至少要满足下面两个条件中的一个：

一是Circle这家公司有能力最终偿付这笔减记。

二是假如Circle没有钱偿付这笔减记，美国政府最终会施以援手救助硅谷银行让所有的储户安全脱险。

对第一个假设条件，我认为在当时那个情况下，我们是很难判别的。

大家之所以相信Circle还能偿付是因为它存在硅谷银行中的钱只占小部分，而大部分钱都存在其它几家大银行。而对那几家大银行大家默认认为它们是安全的。

可问题是在已经有几家银行都出问题的情况下，我们怎么知道这个风险不会传导、怎么保证那几家所谓的大银行都安全呢？

所以第一个假设条件在我看来有点牵强。

但对第二个假设条件，大家就信心满满了。可以找到一堆理由，其中最有说服力的就是，美国政府不会放纵科技业承受如此打击、还会说在当前美国政府拼命确保其高科技地位的情况下，不会让这样的灾难发生。

其实在我看来，这个说服力也不是那么强。

首先这次受影响的科技业和2008年那次受影响的金融业对整个系统的影响是有差别的。金融完蛋那百业就萧条了，而科技受损虽说也是不可承受之重，但暂时而言它的风险和影响是控制在局部领域和一定范围的。

在这种情况下我们很难确保监管机构就会那么毫不犹豫地施以援手。

其实即便是在2008年美国政府要救助整个金融行业时，当时的财长保尔森在内心都纠结了许久许久。因为对他而言，他即将作出的行为是违背资本主义市场经济规律的：那是一种深深刻在他骨子里的信条--------从青葱稚嫩的学生时代一直到后来久经历练的职业生涯。

当时有一张照片极其生动地体现了他内心的纠结和痛苦：他孤独地站在角落里，不和任何人交流、谈话，只是低头沉思。

而且当时对救不救金融业在全社会都是争论巨大的。

2008年都如此，何况今日。

所以在这种情况下，尽管政府会救助硅谷银行的可能性相当大，但我们也绝对不能忽视另外“不救”的可能。

所以我不会采用这种稍微冒险的做法。

我一向以来的信条就是：风险控制第一、活下来最重要；追逐利润第二、利润只是锦上添花。

该课程是为期10周，只要你在10周完成就可以。

今天我们先来说下第一个任务课程：如何使用 Alchemy 开发 NFT 智能合约（ERC721）

官方提供了一个本课程的大纲：

• 如何使用 OpenZeppelin 和 Remix 编写和修改智能合约

• 使用Goerl网络获得免费的 Rinkeby ETH

• 将其部署在以太坊 Goerl测试网区块链上以节省汽油费

• 使用 Filebase 在 IPFS 上托管 NFT 令牌元数据。

• 铸造 NFT 并在 OpenSea 上可视化

1.编写合约

首先我们来到合约编写页面

合约编写页面

合约编写页面

2.将合约使用Remix修改和部署

导入Remix后合约的结构如下：

我们需要修改如下几点：

1.该NFT是任何人都可以mint的，所以修改如下

  function safeMint(address to, string memory uri) public {
        require(_tokenIdCounter.current() <= MAX_SUPPLY, "I'm sorry we reached the cap");
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(to, tokenId);
        _setTokenURI(tokenId, uri);
    }

2.修改NFT的供应总量

 uint256 MAX_SUPPLY = 100000; //将该代码添加在Counters.Counter private _tokenIdCounter下一行

3.获取测试token

我们去到下面的网站获取测试Token，同时需要大家去Alchemy注册一个账号

4.创建一个Alchemy的app

1.首先我们去到Alchemy注册一个账户，同时新建一个app（需要选择以太坊生态和Rikney）

查看我们的Key

5.将 Alchemy Rinkeby 添加到 Metamask 钱包，信息如下

• Network name: Alchemy Rinkeby

• New RPC URL: 你申请的app的地址，去上面的viewkey获取即可

• Chain ID: 4

• Currency Symbol: ETH

• Block Explorer: https://rinkeby.etherscan.io/

6.部署发布我们的合约

部署合约

部署合约

将出现一个 Metamask 弹出窗口，点击“签名”，然后继续支付 gas 费用。如果一切都按预期工作，10 秒后，应该会在 Deployed Contracts 下看到该合约：

已经部署完成的合约

已经部署完成的合约

7.上传我们的NFT元数据

Pinata网站可以管理我们的元数据，一定要去学会怎么使用，我们只需要申请一个账号，会免费给1g的存储空间。

mint我们的NFT，在safeMint输入我们的钱包地址和刚才编写的uri（ipfs://\<your\_metadata\_cid>）使用json的。

8.查看我们的NFT

我们去到OpenSea测试网站查看我们做的NFT

我们找到对应合约的NFT，现在我们看到的合约地址和我们刚才部署的合约地址是否对应上，现在还是盲盒，需要我们自己去操作下

9.开盲盒

在tokenUri 插入“0”作为 id 参数，点击call，它应该显示你的 tokenURI。

需要等待一段时间，大家可以先试试。

1.先决条件

• npm (npx) version 8.5.5

• node version 16.13.1

• 如果你会js代码更好

2.创建项目

#创建一个项目目录并且初始化package.json
mkdir BuyMeACoffee-contracts
cd BuyMeACoffee-contracts
npm init -y

创建目录

# 使用hardhat生成项目框架
npx hardhat
# 该命令建议执行，因为依赖可能有问题
npm install --save-dev hardhat@^2.9.3 @nomiclabs/hardhat-waffle@^2.0.0 ethereum-waffle@^3.0.0 chai@^4.2.0 @nomiclabs/hardhat-ethers@^2.0.0 ethers@^5.0.0

# 当你创建成功后目录如下所示：
.
├── README.md
├── contracts
├── hardhat.config.js
├── node_modules
├── package-lock.json
├── package.json
├── scripts
└── test

contracts- 您的智能合约所在的文件夹
  在这个项目中，我们将只创建一个，来组织我们的逻辑BuyMeACoffee
scripts- 您的安全帽 javscript 脚本所在的文件夹
  我们将编写逻辑deploy
  示例脚本buy-coffee
  和一个兑现我们小费的脚本withdraw
hardhat.config.js- 带有solidity版本和部署设置的配置文件

3.开始开发项目

我们可以使用任意的vim方式打开上面创建的项目，这里就用VScode了，如果有需要的可以去官网下载

我们可以看到生成的目录已经有了一个合约，我们只需要去替换即可，首先将合约文件名替换为 BuyMeACoffee.sol 同时将合约内容替换成下面的。

//SPDX-License-Identifier: Unlicense

// contracts/BuyMeACoffee.sol
pragma solidity ^0.8.0;

// Switch this to your own contract address once deployed, for bookkeeping!

contract BuyMeACoffee {
    // Event to emit when a Memo is created.
    event NewMemo(
        address indexed from,
        uint256 timestamp,
        string name,
        string message
    );
    
    // Memo struct.
    struct Memo {
        address from;
        uint256 timestamp;
        string name;
        string message;
    }
    
    // Address of contract deployer. Marked payable so that
    // we can withdraw to this address later.
    address payable owner;

    // List of all memos received from coffee purchases.
    Memo[] memos;

    constructor() {
        // Store the address of the deployer as a payable address.
        // When we withdraw funds, we'll withdraw here.
        owner = payable(msg.sender);
    }

    /**
     * @dev fetches all stored memos
     */
    function getMemos() public view returns (Memo[] memory) {
        return memos;
    }

    /**
     * @dev buy a coffee for owner (sends an ETH tip and leaves a memo)
     * @param _name name of the coffee purchaser
     * @param _message a nice message from the purchaser
     */
    function buyCoffee(string memory _name, string memory _message) public payable {
        // Must accept more than 0 ETH for a coffee.
        require(msg.value > 0, "can't buy coffee for free!");

        // Add the memo to storage!
        memos.push(Memo(
            msg.sender,
            block.timestamp,
            _name,
            _message
        ));

        // Emit a NewMemo event with details about the memo.
        emit NewMemo(
            msg.sender,
            block.timestamp,
            _name,
            _message
        );
    }

    /**
     * @dev send the entire balance stored in this contract to the owner
     */
    function withdrawTips() public {
        require(owner.send(address(this).balance));
    }
}

替换后的合约

4.测试部署合约

将scripts下面的deploy.js的内容替换为下面的

const hre = require("hardhat");

// Returns the Ether balance of a given address.
async function getBalance(address) {
  const balanceBigInt = await hre.ethers.provider.getBalance(address);
  return hre.ethers.utils.formatEther(balanceBigInt);
}

// Logs the Ether balances for a list of addresses.
async function printBalances(addresses) {
  let idx = 0;
  for (const address of addresses) {
    console.log(`Address ${idx} balance: `, await getBalance(address));
    idx ++;
  }
}

// Logs the memos stored on-chain from coffee purchases.
async function printMemos(memos) {
  for (const memo of memos) {
    const timestamp = memo.timestamp;
    const tipper = memo.name;
    const tipperAddress = memo.from;
    const message = memo.message;
    console.log(`At ${timestamp}, ${tipper} (${tipperAddress}) said: "${message}"`);
  }
}

async function main() {
  // Get the example accounts we'll be working with.
  const [owner, tipper, tipper2, tipper3] = await hre.ethers.getSigners();

  // We get the contract to deploy.
  const BuyMeACoffee = await hre.ethers.getContractFactory("BuyMeACoffee");
  const buyMeACoffee = await BuyMeACoffee.deploy();

  // Deploy the contract.
  await buyMeACoffee.deployed();
  console.log("BuyMeACoffee deployed to:", buyMeACoffee.address);

  // Check balances before the coffee purchase.
  const addresses = [owner.address, tipper.address, buyMeACoffee.address];
  console.log("== start ==");
  await printBalances(addresses);

  // Buy the owner a few coffees.
  const tip = {value: hre.ethers.utils.parseEther("1")};
  await buyMeACoffee.connect(tipper).buyCoffee("Carolina", "You're the best!", tip);
  await buyMeACoffee.connect(tipper2).buyCoffee("Vitto", "Amazing teacher", tip);
  await buyMeACoffee.connect(tipper3).buyCoffee("Kay", "I love my Proof of Knowledge", tip);

  // Check balances after the coffee purchase.
  console.log("== bought coffee ==");
  await printBalances(addresses);

  // Withdraw.
  await buyMeACoffee.connect(owner).withdrawTips();

  // Check balances after withdrawal.
  console.log("== withdrawTips ==");
  await printBalances(addresses);

  // Check out the memos.
  console.log("== memos ==");
  const memos = await buyMeACoffee.getMemos();
  printMemos(memos);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

当我们将上面的替换完毕后，通过命令行运行JS

npx hardhat run scripts/deploy.js

测试我们的合约，当你执行成功会有下面的现实

BuyMeACoffee deployed to: 0xCDD46957E7F3d28693e5e379A246d478e8939319
== start ==
Address 0 balance:  9999.998754619375
Address 1 balance:  10000.0
Address 2 balance:  0.0
== bought coffee ==
Address 0 balance:  9999.998754619375
Address 1 balance:  9998.999752893990255063
Address 2 balance:  3.0
== withdrawTips ==
Address 0 balance:  10002.998708719732606388
Address 1 balance:  9998.999752893990255063
Address 2 balance:  0.0
== memos ==
At 1660268820, Carolina (0x70997970C51812dc3A010C7d01b50e0d17dc79C8) said: "You're the best!"
At 1660268821, Vitto (0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC) said: "Amazing teacher"
At 1660268822, Kay (0x90F79bf6EB2c4f870365E785982E1f101E93b906) said: "I love my Proof of Knowledge"

5.使用 Alchemy 和 MetaMask 将 BuyMeACoffe.sol 智能合约部署到以太坊 Goerli 测试网

新建一个deploy01.js，内容如下：

// scripts/deploy01.js

const hre = require("hardhat");

async function main() {
  // We get the contract to deploy.
  const BuyMeACoffee = await hre.ethers.getContractFactory("BuyMeACoffee");
  const buyMeACoffee = await BuyMeACoffee.deploy();

  await buyMeACoffee.deployed();

  console.log("BuyMeACoffee deployed to:", buyMeACoffee.address);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

现在我们的项目整体结构就如下了：

新的项目结构

运行我们刚才脚本：

npx hardhat run scripts/deploy01.js

如果成功的话，你会看到下面这样的提示：

BuyMeACoffee deployed to: 0xCDD46957E7F3d28693e5e379A246d478e8939319

这里需要注意哦，当我们多次运行的话，你每次都会看到完全相同的部署地址，这是因为当你运行脚本时，Hardhat 工具使用的默认设置是本地开发网络，就在您的计算机上。它快速且具有确定性，非常适合进行一些快速的健全性检查。

但是，为了实际部署到在 Internet 上运行且节点遍布世界各地的测试网络，我们需要更改我们的 Hardhat 配置文件以提供选项。

6.修改hardhat.config.js 进行配置部署

首先我们将hardhat.config.js先行修改如下：

// hardhat.config.js

require("@nomiclabs/hardhat-ethers");
require("@nomiclabs/hardhat-waffle");
require("dotenv").config()

// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more

const GOERLI_URL = process.env.GOERLI_URL;
const PRIVATE_KEY = process.env.PRIVATE_KEY;

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.8.4",
  networks: {
    goerli: {
      url: GOERLI_URL,
      accounts: [PRIVATE_KEY]
    }
  }
};

# 安装dotenv
npm install dotenv
# 创建一个.env文件
touch .env
# 将下面内容写入env中
GOERLI_URL=https://eth-goerli.alchemyapi.io/v2/<your api key>
GOERLI_API_KEY=<your api key>
PRIVATE_KEY=<your metamask api key>

此外，为了获得所需的环境变量，可以使用以下资源：

• GOERLI_URL- 注册一个帐户炼金术，创建一个 Ethereum -> Goerli 应用程序，并使用 HTTP URL

• GOERLI_API_KEY- 从您的同一个 Alchemy Ethereum Goerli 应用程序中，您可以获得 URL 的最后一部分，这将是您的 API KEY

• PRIVATE_KEY- 遵循这些来自 MetaMask 的说明导出您的私钥。

项目新的结构

项目新的结构

项目新的结构

项目新的结构

获取Goerli测试币，去下面网址获取测试币

运行脚本发布到测试网络

npx hardhat run scripts/deploy01.js --network goerli

当你成功部署页面会显示：

:BuyMeACoffee-contracts paul$ npx hardhat run scripts/deploy01.js --network goerli
Compiled 1 Solidity file successfully
BuyMeACoffee deployed to: 0xCDD46957E7F3d28693e5e379A246d478e8939319

验证下合约是否部署上测试网成功。

7.实现一个脚本withdraw

我们在刚才的脚本下面新建一个withdraw.js的脚本，内容如下：

// scripts/withdraw.js

const hre = require("hardhat");
const abi = require("../artifacts/contracts/BuyMeACoffee.sol/BuyMeACoffee.json");

async function getBalance(provider, address) {
  const balanceBigInt = await provider.getBalance(address);
  return hre.ethers.utils.formatEther(balanceBigInt);
}

async function main() {
  // Get the contract that has been deployed to Goerli.
  const contractAddress="你的合约地址";
  const contractABI = abi.abi;

  // Get the node connection and wallet connection.
  const provider = new hre.ethers.providers.AlchemyProvider("goerli", process.env.GOERLI_API_KEY);

  // Ensure that signer is the SAME address as the original contract deployer,
  // or else this script will fail with an error.
  const signer = new hre.ethers.Wallet(process.env.PRIVATE_KEY, provider);

  // Instantiate connected contract.
  const buyMeACoffee = new hre.ethers.Contract(contractAddress, contractABI, signer);

  // Check starting balances.
  console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");
  const contractBalance = await getBalance(provider, buyMeACoffee.address);
  console.log("current balance of contract: ", await getBalance(provider, buyMeACoffee.address), "ETH");

  // Withdraw funds if there are funds to withdraw.
  if (contractBalance !== "0.0") {
    console.log("withdrawing funds..")
    const withdrawTxn = await buyMeACoffee.withdrawTips();
    await withdrawTxn.wait();
  } else {
    console.log("no funds to withdraw!");
  }

  // Check ending balance.
  console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

在本地测试

# 运行该命令在本地测试
npx hardhat run scripts/withdraw.js

如果没有报错你会有下面的提示：

current balance of owner:  0.14511094798885063 ETH
current balance of contract:  0.0 ETH
no funds to withdraw!
current balance of owner:  0.14511094798885063 ETH

8.使用 Replit 和 Ethers.js 构建前端 Buy Me A Coffee 网站 dapp

首先在Replit IDE将下面的仓库进行fork

fork

在fork之后我们会来到自己的工作台，如下所示：

将文件中写好的变量进行修改

• 更新输入contractAddresspages/index.js

• 将名称字符串更新为您自己的名字pages/index.js

• 确保合同 ABI 与您的合同相匹配utils/BuyMeACoffee.json

可以看到 contractAddress 变量已经填充了地址。修改成你自己部署的合约

将复制过来的仓库的Albert修改成你想要的任意名字都可以

将刚才在编译器生成的ABI复制到Replit中的utils/BuyMeACoffee.json

运行项目

但这有一个问题：

不将元数据存储在区块链上将使您无法通过智能合约与之交互，因为区块无法与“外部世界”通信。**如果我们想直接从我们的智能合约更新我们的元数据，我们需要将其存储在链上，但是汽油费呢？幸运的是，像 Polygon 这样的 L2 链可以提供帮助，大大降低了 Gas 成本，并引入了许多优势，使开发人员能够扩展其应用程序的功能。

在本教程中，学习如何创建区块链游戏的基础知识，开发一个完全动态的 NFT，其链上元数据会根据您与它的交互而变化，并将其部署在Polygon Mumbai上以降低汽油费。

更准确地说，您将学习：

• 如何在链上存储 NFT 元数据

• 什么是 Polygon 以及为什么降低 Gas 费用很重要。

• 如何在 Polygon Mumbai 上部署

• 如何处理和存储链上 SVG 图像和 JSON 对象

• 如何根据您与 NFT 的交互来修改元数据

1.Polygon PoS - 更低的 Gas 费用和更快的交易

Polygon 是一个去中心化的 EVM 兼容扩展平台，使开发人员能够在不牺牲安全性的情况下以低交易费用构建可扩展的用户友好型 DApp。

它属于被描述为**第 2 层链 (L2)**的一组链，这意味着它建立在以太坊之上，以解决一些表征它的问题 - 同时依赖它来运行。

众所周知，以太坊既不快也不便宜，在其上部署智能合约可能会迅速变得非常昂贵，这就是Polygon或Optimism等 L2 解决方案发挥作用的地方。

例如，多边形有两个主要优点：

• 更快的交易（65,000 tx/秒 vs ~14）

• 每笔交易的gas 成本比以太坊低约 10,000 倍

第二个正是我们在 Polygon 上部署带有链上元数据的 NFT 智能合约的原因。一方面，如果在以太坊上存储我们的元数据时，我们可以预期每笔交易花费数百美元，那么在 Polygon 上它的成本不会超过几美分。

1.1将 Polygon Mumbai 添加到您的 Metamask 钱包

首先，让我们将 Polygon Mumbai 添加到我们的 Metamask 钱包中。

导航测试polygon网络并向下滚动到页面底部。您将看到**“添加多边形网络”按钮**，单击它并确认您要将其添加到 Metamask：

1.2获取免费的 Matic 以部署NFT 智能合约

我们去到mumbaifaucet.com获取测试币，输入我们的地址获取测试币即可

10-20 秒后，会看到 MATIC 出现在 Metamask 钱包中。

2.1项目设置

# 新建一个文件夹用于此次项目的搭建
mkdir ChainBattled
cd ChainBattled
# 安装yarn并查看版本
npm install -g yarn
yarn --version
yarn add hardhat
# 初始化项目
npx hardhat init

现在我们需要安装OpenZeppelin包来访问ERC721 智能合约我们将使用该标准作为模板来构建我们的 NFT 智能合约。

yarn add @openzeppelin/contracts

2.2修改 hardhat.config.js 文件

将我们的hardhat.config.js 文件修改如下：

require("dotenv").config();
require("@nomiclabs/hardhat-waffle");
require("@nomiclabs/hardhat-etherscan");

module.exports = {
  solidity: "0.8.10",
  networks: {
    mumbai: {
      url: process.env.TESTNET_RPC,
      accounts: [process.env.PRIVATE_KEY]
    },
  },
  etherscan: {
    apiKey: process.env.POLYGONSCAN_API_KEY
  }
};

2.3开发智能合约

在 contracts 文件夹中，创建一个新文件并将其命名为“ChainBattles.sol”。

与往常一样，我们需要指定SPDX-Licence-Identifier、pragma ，并从OpenZeppelin导入几个库，我们将用作智能合约的基础，合约内容如下：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/utils/Strings.sol";
import "@openzeppelin/contracts/utils/Base64.sol";

contract ChainBattles is ERC721URIStorage  {
    using Strings for uint256;
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    mapping(uint256 => uint256) public tokenIdToLevels;

    constructor() ERC721 ("Chain Battles", "CBTLS"){
    }

    function generateCharacter(uint256 tokenId) public returns(string memory){

    bytes memory svg = abi.encodePacked(
        '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 350 350">',
        '<style>.base { fill: white; font-family: serif; font-size: 14px; }</style>',
        '<rect width="100%" height="100%" fill="black" />',
        '<text x="50%" y="40%" class="base" dominant-baseline="middle" text-anchor="middle">',"Warrior",'</text>',
        '<text x="50%" y="50%" class="base" dominant-baseline="middle" text-anchor="middle">', "Levels: ",getLevels(tokenId),'</text>',
        '</svg>'
    );
    return string(
        abi.encodePacked(
            "data:image/svg+xml;base64,",
            Base64.encode(svg)
        )    
    );
  }
function getLevels(uint256 tokenId) public view returns (string memory) {
    uint256 levels = tokenIdToLevels[tokenId];
    return levels.toString();
}
 function getTokenURI(uint256 tokenId) public returns (string memory){
    bytes memory dataURI = abi.encodePacked(
        '{',
            '"name": "Chain Battles #', tokenId.toString(), '",',
            '"description": "Battles on chain",',
            '"image": "', generateCharacter(tokenId), '"',
        '}'
    );
    return string(
        abi.encodePacked(
            "data:application/json;base64,",
            Base64.encode(dataURI)
        )
    );
}
function mint() public {
    _tokenIds.increment();
    uint256 newItemId = _tokenIds.current();
    _safeMint(msg.sender, newItemId);
    tokenIdToLevels[newItemId] = 0;
    _setTokenURI(newItemId, getTokenURI(newItemId));
}

function train(uint256 tokenId) public{
  require(_exists(tokenId),"The tokenId does not exist");
  require(_isApprovedOrOwner(msg.sender, tokenId),"You are not the owner of the NFT"); 
  tokenIdToLevels[tokenId] += 1;
  _setTokenURI(tokenId, getTokenURI(tokenId));
}
}

我们在上面将合约全部完善了，也新增了 4 个不同的功能：

• **generateCharacter：**生成和更新我们 NFT 的 SVG 图像

• **getLevels：**获取 NFT 的当前级别

• **getTokenURI ：**获取 NFT 的 TokenURI

• **mint:**到 mint - 当然

• **train：**训练 NFT 并提高其等级

首先，让我们在项目的根文件夹中新建一个 .env 文件，并添加以下变量：

TESTNET_RPC=""
PRIVATE_KEY=""
POLYGONSCAN_API_KEY=""

然后，导航到alchemy.com并创建一个新的 Polygon Mumbai 应用程序：

单击新创建的应用程序，复制 API HTTP URL，并将 API 作为“ TESTNET_RPC ”值粘贴到我们在上面创建的 .env 文件中。

打开您的Metamask钱包，点击三个点菜单 > 帐户详细信息 > 并将您的私钥复制粘贴为..env

最后，继续Polygon,并创建一个新帐户，登录后，进入个人资料菜单并单击 API Keys，如果没有则需要新建一个：

现在将 Api-Key 令牌复制粘贴为 .env 中的“ POLYGONSCAN API_KEY ”值。最终结果如下：

在部署我们的智能合约之前的最后一步，我们需要创建部署脚本。

3.1创建部署脚本

首先安装依赖

npm install dotenv
npm install @nomiclabs/hardhat-waffle

我们将deploy.js的脚本替换如下：

const main = async () => {
  try {
    const nftContractFactory = await hre.ethers.getContractFactory(
      "ChainBattles"
    );
    const nftContract = await nftContractFactory.deploy();
    await nftContract.deployed();

    console.log("Contract deployed to:", nftContract.address);
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};
  
main();

3.2编译和部署智能合约

当我们把脚本写好后，编译智能合约，只需在项目内的终端中运行以下命令：

npx hardhat compile

如果一切按预期进行，你将在 artifacts 文件夹中看到已编译的智能合约。

现在，让我们在运行的 Polygon Mumbai 链上部署智能合约

npx hardhat run scripts/deploy.js --network mumbai

如果一切正常你将在页面看到合约的地址

3.3在 Polygon Scan 上检查智能合约

复制刚刚部署的智能合约的地址，去测试polygon网络，然后**在搜索栏中粘贴智能合约的地址。**进入智能合约页面后，单击“合约”选项卡。你会注意到合约代码不可读：

这是因为我们还没有验证我们的代码。

为了验证我们的智能合约，我们需要回到我们的项目，并在终端中运行以下代码：

# npx hardhat verify --network mumbai 合约地址
npx hardhat verify --network mumbai 0x33C61D75B3C5471Cc921Bc6005F3449750f0aDCb

报错信息：

Error in plugin @nomiclabs/hardhat-etherscan: Failed to send contract verification request.
Endpoint URL: https://api-testnet.polygonscan.com/api
Reason: read ECONNRESET

通过网站添加方法，点击立即验证即可：

3.4通过多边形扫描与您的智能合约交互

现在智能合约已经通过验证，mumbai.polygonscan.com 将在其附近显示一个绿色小勾：

然后寻找“min​​t”函数并点击Write：

这将打开一个 Metamask 弹出窗口，要求支付 gas 费用，单击签名按钮。恭喜！您刚刚铸造了您的第一个动态 NFT - 让我们转移到 OpenSea 测试网来现场查看它。

4.在 OpenSea 上查看您的动态 NFT

复制智能合约地址，前往testnet.opensea.com，并将其粘贴到搜索栏中：

如果一切正常，现在应该会看到您的 NFT 显示在 OpenSea 上，其中包含动态图像、标题和描述。

4.1更新动态 NFT 图像训练 NFT

导航回测试.polygons网络，点击合约标签 > 写合约并寻找“train”功能。

插入您的 NFT 的 ID - 在这种情况下为“1”，因为我们只铸造了一个，然后单击写入：

然后回到testnets.opensea.com并刷新页面：

step1 创建项目设置

1.打开控制台并输入以下代码，从而创建 Next JS 项目样板并安装 TailwindCSS。

npx create-next-app -e with-tailwindcss nameoftheproject ，如图。

2.输入cd nameoftheproject && code . （最后那个点别掉了，掉了打开的就是之前的项目）

3.在控制台输入npm run dev ，如果电脑弹出防火墙，就点允许访问，不弹出也没关系。

4.回到vscode，将index.tsx和_app.tsx的后缀改成.jsx，删除_app.jsx中报错的部分，如图。

或者直接粘贴下面的代码替换。

import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

step2 修改index.jsx代码

1.这一步具体每行代码的意义可以到官方看，我这里放最终的代码，方便大家完成任务，但是这对于学习web3是毫无作用的。将index.jsx的代码更改成如下代码。如图。

import { NFTCard } from "./nftCard"
import { useState } from 'react'

const Home = () => {
 const [wallet, setWalletAddress] = useState("");
 const [collection, setCollectionAddress] = useState("");
 const [NFTs, setNFTs] = useState([])
 const [fetchForCollection, setFetchForCollection]=useState(false)


  const fetchNFTs = async() => {
    let nfts; 
    console.log("fetching nfts");
    const api_key = "75dGSnZXuLyiwz-TRVYrJAhhZthlG9Tj"
    const baseURL = `https://eth-mainnet.alchemyapi.io/v2/${api_key}/getNFTs/`;
    var requestOptions = {
        method: 'GET'
      };
     
    if (!collection.length) {
    
      const fetchURL = `${baseURL}?owner=${wallet}`;
  
      nfts = await fetch(fetchURL, requestOptions).then(data => data.json())
    } else {
      console.log("fetching nfts for collection owned by address")
      const fetchURL = `${baseURL}?owner=${wallet}&contractAddresses%5B%5D=${collection}`;
      nfts= await fetch(fetchURL, requestOptions).then(data => data.json())
    }
  
    if (nfts) {
      console.log("nfts:", nfts)
      setNFTs(nfts.ownedNfts)
    }
  }
  
  const fetchNFTsForCollection = async () => {
    if (collection.length) {
      var requestOptions = {
        method: 'GET'
      };
      const api_key = "75dGSnZXuLyiwz-TRVYrJAhhZthlG9Tj"
      const baseURL = `https://eth-mainnet.alchemyapi.io/v2/${api_key}/getNFTsForCollection/`;
      const fetchURL = `${baseURL}?contractAddress=${collection}&withMetadata=${"true"}`;
      const nfts = await fetch(fetchURL, requestOptions).then(data => data.json())
      if (nfts) {
        console.log("NFTs in collection:", nfts)
        setNFTs(nfts.nfts)
      }
    }
  }

 return (
   <div className="flex flex-col items-center justify-center py-8 gap-y-3">
     <div className="flex flex-col w-full justify-center items-center gap-y-2">
     <input disabled={fetchForCollection} type={"text"} placeholder="Add your wallet address" onChange={e => setWalletAddress(e.target.value)} value={wallet}></input>
       <input type={"text"} placeholder="Add the collection address"></input>
       <label className="text-gray-600 "><input onChange={(e)=>{setFetchForCollection(e.target.checked)}} type={"checkbox"} className="mr-2"></input>Fetch for collection</label>
       <button className={"disabled:bg-slate-500 text-white bg-blue-400 px-4 py-2 mt-3 rounded-sm w-1/5"} onClick={
          () => {
           if (fetchForCollection) {
             fetchNFTsForCollection()
           }else fetchNFTs()
         }
       }>Let's go! </button>
     </div>
     <div className='flex flex-wrap gap-y-12 mt-4 w-5/6 gap-x-2 justify-center'>
       {
         NFTs.length && NFTs.map(nft => {
           return (
             <NFTCard nft={nft}></NFTCard>
           )
         })
       }
     </div>
   </div>
 )
}

export default Home

step3 创建一个新的炼金术应用程序

1.进入alchemy.com ，点击create app。

2.输入信息，点击create app。

3.点击view key，将红框内的API KEY复制下来。

4.回到vscode，在index.jsx中ctrl+f搜索const api_key，应该会搜索到2处，全部改成上一步复制的代码，然后保存。

step4 创建 NFT Card 组件

1.在pages下面新建一个名为nftCard.jsx的文件，并将下面的代码粘贴进去。

export const NFTCard = ({ nft }) => {

    return (
        <div className="w-1/4 flex flex-col ">
        <div className="rounded-md">
            <img className="object-cover h-128 w-full rounded-t-md" src={nft.media[0].gateway} ></img>
        </div>
        <div className="flex flex-col y-gap-2 px-2 py-3 bg-slate-100 rounded-b-md h-110 ">
            <div className="">
                <h2 className="text-xl text-gray-800">{nft.title}</h2>
                <p className="text-gray-600">Id: {nft.id.tokenId}</p>
                <p className="text-gray-600" >{nft.contract.address}</p>
            </div>

            <div className="flex-grow mt-2">
                <p className="text-gray-600">{nft.description}</p>
            </div>
        </div>

    </div>
    )
}

step5 运行测试

1.在控制台输入cd nameoftheproject，按回车，然后输入npm run dev，如图所示即可。

2.然后将http://localhost:3000 （我这里是这个链接，我看官方视频是3001，可能会不一样啊，我也不知道哈哈），就是上面那个图的第一行的链接，复制到浏览器。出现下图即可。

3.输入你自己的地址，点击let‘s go，下面出现图片即可。

step6 上传至github

step7 项目提交

直接填写上传的项目的github网址即可。