Act 3: Creating staging environments

Configure the tenderly package

Go to packages/tenderly create an .env file by copying the .env.example:

cd packages/tenderly
cp .env.example .env

Populate environment variables

Then, populate the placeholders with following values in packages/tenderly/.env:

• TENDERLY_ACCOUNT_ID and TENDERLY_PROJECT_ID (guide)
• TENDERLY_ACCESS_TOKEN (guide).

Create a staging environment

From packages/tenderly run npm run stage:new local 1 34443 8453. This will create 3 virtual testnets (from Mainnet, Mode, and Base).

cd packages/tenderly
 
npm run stage:new local 1 34443 8453
npm run stage:activate local

Then check:

• The file tenderly/environments/local.json
• The file packages/tenderly/tenderly.config.ts
• The list of Virtual TestNets in your project

Deploy contracts

Link hardhat with the active environment and deploy contracts:

cd packages/tenderly
npm run stage:connect:hardhat
cd ../hardhat
rm -rf deployments
npx hardhat deploy --network virtual_mainnet

Check the Explorer.

Run the UI

Link hardhat with the active environment and deploy contracts:

cd packages/tenderly
npm run stage:connect:nextjs
cd ../nextjs
npm run dev

Connect TheGraph

TheGraph is not really integrated, but just suppose it was

cd packages/tenderly
npm run stage:connect:thegraph
echo "Index it!"

Interact

• Grab funds from the faucet
• Send a transaction
• Check the explorer