#头条创作挑战赛#

构建前端 dApp

#设置项目

• 我们使用VueWeb 框架作为教程前端（过程与其他框架类似）。
• 为了专注于zksync-web3SDK，我们提供了一个预构建的模板。
• 设置完成后，我们添加与刚刚部署的智能合约交互的代码。

克隆模板并cd放入文件夹中

git clone https://github.com/matter-labs/greeter-tutorial-starter
cd greeter-tutorial-starter

启动项目

yarnyarn serve

在浏览器中导航以http://localhost:8080/查看正在运行的应用程序。

#将帐户连接到 dApp

#智能账户

启用智能账户允许您加入已经使用 zkSync 第一个版本的 Argent 账户抽象钱包用户。

• 使用此库来验证您的智能帐户兼容性。
• 遵循本指南在新窗口中打开将 Argent 登录添加到您的 dApp。

#外部拥有账户 (EOA)

为了与基于 zkSync 构建的 dApp 进行交互，请将 MetaMask 钱包连接到 zkSync Era 测试网。

• 按照本指南将 Metamask 连接到 zkSync。

#将资金桥接到 L2

• 使用我们的门户网站在新窗口中打开将资金桥接至 zkSync。
• 使用水龙头在新窗口中打开在您的帐户中获取一些测试 ERC20 代币。

笔记

当从主网桥接到 zkSync Era 上的智能账户（例如 Argent）时，您必须通过单击“存款到 zkSync Era 主网”上的另一个地址来指定 L2 钱包的地址。

#项目结构

在./src/App.vue文件的functions:部分中，您将看到存储应用程序的模板代码。

提供了大部分代码。您必须完成 TODO: 部分。

functions: {initializeProviderAndSigner() {// TODO: initialize provider and signer based on `window.ethereum`},async getGreeting() {// TODO: return the current greetingreturn "";},async getFee() {// TODO: return formatted feereturn "";},async getBalance() {// Return formatted balancereturn "";},async getOverrides() {if (this.selectedToken.l1Address != ETH_L1_ADDRESS) {// TODO: Return data for the paymaster}return {};},...

在