Skip to content

Commit

Permalink
feat: add code-import plugin, start importing code in hardhat tooling…
Browse files Browse the repository at this point in the history 
… section (#257)

- adds a plugin to support using a `code-import` component inside
markdown files to import code snippets
- started replacing hard-coded code snippets in the tooling/hardhat
section
  • Loading branch information
@sarahschwartz
sarahschwartz authored Nov 18, 2024
1 parent c7ad824 commit 6f3ac70
Show file tree
Hide file tree
Showing 38 changed files with 1,158 additions and 253 deletions.
199 changes: 64 additions & 135 deletions content/00.build/40.tooling/20.hardhat/20.guides/10.getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,58 +56,37 @@ The ZKsync Era deployment and compiler plugin imports:
#### Solidity project

```ts
import "@matterlabs/hardhat-zksync";
:code-import{filePath="hardhat-sol-template/hardhat.config.ts:zksync-import"}
```
The `zksolc` block contains the minimal configuration for the compiler.
```ts
zksolc: {
version: "latest", // Uses latest available in %%zk_git_repo_zksolc-bin%%
settings: {},
},
:code-import{filePath="hardhat-sol-template/hardhat.config.ts:zksolc"}
```
#### Vyper project
```ts
import "@nomiclabs/hardhat-vyper";
import "@matterlabs/hardhat-zksync-deploy";
import "@matterlabs/hardhat-zksync-vyper";
:code-import{filePath="hardhat-vyper-template/hardhat.config.ts:zksync-vyper-import"}
```
The `zkvyper` block contains the minimal configuration for the compiler.
```ts
zkvyper: {
version: "latest", // Uses latest available in %%zk_git_repo_zkvyper-bin%%
settings: {},
},
:code-import{filePath="hardhat-vyper-template/hardhat.config.ts:zkvyper"}
```
#### Network
The network endpoints of the `zkSyncTestnet` network change dynamically for local tests.
The default network is set to `zkSyncSepoliaTestnet`, but mainnet and local test node networks are also configured.
```ts
// dynamically changes endpoints for local tests
const zkSyncTestnet =
process.env.NODE_ENV == "test"
? {
url: "http://localhost:3050",
ethNetwork: "http://localhost:8545",
zksync: true,
}
: {
url: "%%zk_testnet_rpc_url%%",
ethNetwork: "%%zk_testnet_identifier%%",
zksync: true,
};
:code-import{filePath="hardhat-sol-template/hardhat.config.ts:networks"}
```
::callout{icon="i-heroicons-information-circle" color="blue"}
For local ZKsync testing, modify `url` and `ethNetwork` in `hardhat.config.ts`
to align with your local ZKsync and Ethereum node's L2 and L1 RPC URLs, respectively.
For local ZKsync testing, modify the default network name.
::
::callout{icon="i-heroicons-information-circle" color="blue"}
Expand All @@ -130,10 +109,26 @@ Smart contracts belong in the `contracts` folder.
#### 1. To compile the contract, run
```sh
yarn hardhat compile
::code-group
```bash [npm]
npm run compile
```
```bash [yarn]
yarn compile
```
```bash [pnpm]
pnpm compile
```
```bash [bun]
bun compile
```
::
You'll see the following output:
```text
Expand All @@ -150,70 +145,34 @@ These folders contain the compilation artifacts (including contract's ABIs) and
The `artifacts-zk` and `cache-zk` folders are included in the `.gitignore` file.
::
The `deploy-greeter.ts` script is in the `deploy` folder.
This script uses the `Deployer` class from the `hardhat-zksync-deploy` package to deploy the `Greeter.sol`/`Greeter.vy` contract.
In the `deploy` folder, the `deploy.ts` script shows an example of how to deploy the `Greeter.sol`/`Greeter.vy` contract.
```ts
import { Wallet, utils } from "zksync-ethers";
import * as ethers from "ethers";
import { HardhatRuntimeEnvironment } from "hardhat/types";
import { Deployer } from "@matterlabs/hardhat-zksync-deploy";

// load env file
import dotenv from "dotenv";
dotenv.config();

// load wallet private key from env file
const PRIVATE_KEY = process.env.WALLET_PRIVATE_KEY || "";

if (!PRIVATE_KEY) throw "⛔️ Private key not detected! Add it to the .env file!";

// An example of a deploy script that will deploy and call a simple contract.
export default async function (hre: HardhatRuntimeEnvironment) {
console.log(`Running deploy script for the Greeter contract`);

// Initialize the wallet.
const wallet = new Wallet(PRIVATE_KEY);

// Create deployer object and load the artifact of the contract you want to deploy.
const deployer = new Deployer(hre, wallet);
const artifact = await deployer.loadArtifact("Greeter");

// Estimate contract deployment fee
const greeting = "Hi there!";
const deploymentFee = await deployer.estimateDeployFee(artifact, [greeting]);

// ⚠️ OPTIONAL: You can skip this block if your account already has funds in L2
// const depositHandle = await deployer.zkWallet.deposit({
// to: deployer.zkWallet.address,
// token: utils.ETH_ADDRESS,
// amount: deploymentFee.mul(2),
// });
// // Wait until the deposit is processed on ZKsync
// await depositHandle.wait();

// Deploy this contract. The returned object will be of a `Contract` type, similar to ones in `ethers`.
// `greeting` is an argument for contract constructor.
const parsedFee = ethers.formatEther(deploymentFee);
console.log(`The deployment is estimated to cost ${parsedFee} ETH`);

const greeterContract = await deployer.deploy(artifact, [greeting]);

// obtain the Constructor Arguments
console.log("constructor args:" + greeterContract.interface.encodeDeploy([greeting]));

// Show the contract info.
const contractAddress = await greeterContract.getAddress();
console.log(`${artifact.contractName} was deployed to ${contractAddress}`);
}
:code-import{filePath="hardhat-sol-template/deploy/deploy.ts"}
```
#### 2. To execute the deployment script run
```sh
yarn hardhat deploy-zksync --script deploy-greeter.ts
::code-group
```bash [npm]
npm run deploy
```
```bash [yarn]
yarn deploy
```
```bash [pnpm]
pnpm deploy
```
```bash [bun]
bun run deploy
```
::
This script deploys the `Greeting` contract with the message "Hi there!" to %%zk_testnet_name%%.
You should see something like this:
Expand Down Expand Up @@ -241,64 +200,34 @@ Congratulations! You have deployed a smart contract project to %%zk_testnet_name
The template project contains another script to interact with the contract.
1. Enter the address of the deployed Greeter contract in the `CONTRACT_ADDRESS` variable of the `use-greeter.ts` script:

```ts [use-greeter.ts]
import { Provider } from "zksync-ethers";
import * as ethers from "ethers";
import { HardhatRuntimeEnvironment } from "hardhat/types";

// load env file
import dotenv from "dotenv";
dotenv.config();

// load contract artifact. Make sure to compile first! - Solidity Project
import * as ContractArtifact from "../artifacts-zk/contracts/Greeter.sol/Greeter.json";
// load contract artifact. Make sure to compile first! - Vyper Project
//import * as ContractArtifact from "../artifacts-zk/contracts/Greeter.vy/Greeter.json";

const PRIVATE_KEY = process.env.WALLET_PRIVATE_KEY || "";

if (!PRIVATE_KEY) throw "⛔️ Private key not detected! Add it to the .env file!";

// Address of the contract on ZKsync testnet
const CONTRACT_ADDRESS = "";

if (!CONTRACT_ADDRESS) throw "⛔️ Contract address not provided";
1. Enter the address of the deployed Greeter contract in the `CONTRACT_ADDRESS` variable of the `interact.ts` script:
// An example of a deploy script that will deploy and call a simple contract.
export default async function (hre: HardhatRuntimeEnvironment) {
console.log(`Running script to interact with contract ${CONTRACT_ADDRESS}`);

// Initialize the provider.
// @ts-ignore
const provider = new Provider(hre.userConfig.networks?.zkSyncTestnet?.url);
const signer = new ethers.Wallet(PRIVATE_KEY, provider);

// Initialise contract instance
const contract = new ethers.Contract(CONTRACT_ADDRESS, ContractArtifact.abi, signer);
```ts [interact.ts]
:code-import{filePath="hardhat-sol-template/deploy/interact.ts"}
```
// Read message from contract
console.log(`The message is ${await contract.greet()}`);
1. To execute the script, run:
// send transaction to update the message
const newMessage = "Hello people!";
const tx = await contract.setGreeting(newMessage);
::code-group
console.log(`Transaction to change the message is ${tx.hash}`);
await tx.wait();
```bash [npm]
npm run interact
```
// Read message after transaction
console.log(`The message now is ${await contract.greet()}`);
}
```bash [yarn]
yarn interact
```
1. To execute the script, run:
```bash [pnpm]
pnpm interact
```
```sh
yarn hardhat deploy-zksync --script use-greeter.ts
```bash [bun]
bun interact
```
::
The script will:
- Retrieve the message from the contract by calling the `greet()` method.
Expand All @@ -320,7 +249,7 @@ The template project contains another script to interact with the contract.
- To learn more about the ZKsync Hardhat plugins check out the [plugins documentation](/build/tooling/hardhat/guides/getting-started).
- If you want to know more about how to interact with ZKsync using Javascript,
check out the [zksync-ethers Javascript SDK documentation](https://sdk.zksync.io/js/ethers).
check out the [`zksync-ethers` Javascript SDK documentation](https://sdk.zksync.io/js/ethers).
::callout{icon="i-heroicons-light-bulb"}
Check the [installation guide](/build/tooling/hardhat/installation) for instructions!
Expand Down
Loading

0 comments on commit 6f3ac70

Please sign in to comment.