👋 Hello Venn

Welcome, fellow builder!
This repo serves as a "Hello World" to get you up & running with Venn like a pro in 10m or less! 🏆

Table of Contents

1. Your Demo dApp - A Safe Vault
2. Prerequisits
3. Step By Step
   1. Setup
   2. Add Venn To Your Smart Contracts
   3. Enable Venn
   4. Add Venn SDK To Your Frontend
   5. Bonus Round

Your Demo dApp - A Safe Vault

Our contract is a (very) simple SafeVault.sol with the following interface:

• deposits a mapping between a user's address and how much ETH they have
  
  

• deposit() a method for users to deposit ETH to the vault
  
  

• withdraw() a method for users to withdraw previously deposited ETH
  
  

Prerequisits

1. A wallet with some at Holesky ETH in it

Step 0 / Setup

Let's make sure everything works as-is before we start to tinker with this project:

1. Clone the Repo 🖥️

   git clone https://github.com/ironblocks/hello-venn.git
   cd hello-venn

   
   

2. Install Dependencies 📦

   npm ci

   
   

3. Setup Environment Variables 🔑
   Copy the .env.example file to .env and set the values:

   cp .env.example .env

   Make sure to set the following environment variables:

   • PRIVATE_KEY the key you will use for deploying this contract
     
     

   • HOLESKY_RPC_URL the RPC URL to connect to Holesky
     
     

   • VENN_PRIVATE_KEY used by the venn-cli to send Venn setup transactions. Usually, this would be the same as your PRIVATE_KEY
     
     
     

4. Run Tests 🧪

   npm test

   All tests pass, and we can continue to the next step.
   
   

Step 1 / Add Venn To Your Smart Contracts

We're going to use the venn-cli to integrate Venn into our smart contracts. This will update our smart contracts, making them Venn Ready, without changing their existing behavior until we actually enable Venn in Step 2 / From Venn Ready To Venn Enabled below.

1. Install Venn CLI 📦

   npm i -g @vennbuild/cli

   
   

2. Run the CLI on our contracts 🛠️

   venn fw integ -d contracts

   Note: On the first run, this will also install the @ironblocks/firewall-consumer SDK package

   
   

3. Review Changes to SafeVault.sol 🔎

   • An import for VennFirewallConsumer was added
   • The contract now inherits the VennFirewallConsumer
   • External methods are now firewallProtected
   
   

4. Verify Tests Still Pass 🧪

   npm test

   
   

5. Deploy 🚀

   npm run step:1:deploy

   
   

6. End 2 End Tests ☘️

   npm run step:1:deposit
   npm run step:1:withdraw

   Now that our contracts are Venn Ready, let's move on to making them Venn Enabled.

   
   

Step 2 / Enable Venn

We'll use the venn-cli to enable Venn's security features on our smart contracts:

1. Enable Venn 🛡️

   venn enable --network holesky

   Our SafeVault is now protected by Venn.

   
   

2. Venn Policy Address 📌

   The CLI also prints out the address of our new Venn Policy
   We'll need it in the next step, so go ahead and copy it into the venn.config.json file as follows:

   {
      "networks": {
         "holesky": {
               "contracts": {
                  "SafeVault": "..."
               },
               "policyAddress": "PASTE YOUR POLICY ADDRESS HERE"
         }
      }
   }

   
   

3. But Now Everything's Broken 😱

   If we now try to deposit or withdraw, our transactions will fail

   npm run step:2:deposit
   npm run step:2:withdraw

   This is because Venn only allows approved transactions to go through.
   So, how do we get our transactions approved by Venn?
   

   TIP: See these Firewall Reverted transactions on the Venn Explorer

   
   

Step 3 / Add Venn SDK To Your Frontend

Let's use the Venn DApp SDK so that we can get our transactions approved:

1. Install The SDK 📦

   npm i @vennbuild/venn-dapp-sdk

   
   

2. Review The SDK Code 🖥️

   For the purpose of this guide, we took the liberty of preparing all the code in advance, so you don't have to.
   
   

   Checkout the integration code in the file step-3/deposit.ts:

   const vennClient = new VennClient({
        vennURL: VENN_SIGNER_URL,
        vennPolicyAddress: VENN_POLICY_ADDRESS
   });
   
   ...
   
   const approvedTx = await vennClient.approve({
      from: owner.address,
      to: SAFE_VAULT_ADDRESS,
      value: hre.ethers.parseEther("0.0001").toString(),
      data: safeVault.interface.encodeFunctionData("deposit")
   });

   
   

3. Run Approved Transactions 📦

   With the Venn DApp SDK installed, our updated deposit and withdraw scripts are now working again:
   
   

   npm run step:3:deposit
   npm run step:3:withdraw

   
   

   TIP: See these transactions on the Venn Explorer

   
   

Bonus Round

• Checkout Venn Playground for a live version of the SafeVault Hello Venn DApp
  

• Use the Venn Explorer to ... well, explore :)