STEP 1 - The front end

If you need a frontend where end user will protect a Data with DataProtector, you can bootstrap one from our starter page. Next.js, React, or Vue.js, it’s up to you.

The DataProtector tool, which enables builders to protect managed data, is already included. Take some time to explore how it’s implemented and how it works.

• Starter page

OK, your front-end is ready, you wanna now test it on Arbitrum Sepolia? Oh God, you need tokens, check our faucet link here to get some RLC needed for confidential computing tasks. Since you are on Arbitrum, you will need to bridge it from the Arbitrum bridge.

• iExec Faucet
• Arbitrum Bridge

⚠️ Things you need to keep in mind

• You can check the Arbitrum Sepolia explorer HERE
• if you don't want to use a starter, you can just install the Data Protector npm package in your project npm install @iexec/dataprotector. (you can check the code integration in our Code SandBox)
• If your project is not using protected data created by DataProtector, you can go directly to step two.
• Choose and declare the type of your protected data in your protectData function. This type must match the one expected by your iApp when retrieving the protected data for processing. Everything you need to know about dataset types here.

// Simple Example
const dataSimple = {
email: dataToProtect,
};

• Since the Arbitrum deployment is early, you need to activate the experimental true in your DataProtector constructor instance.

 const dataProtector = new IExecDataProtector(provider, {
          allowExperimentalNetworks: true,
        });

STEP 2 - IApp Building with iApp Generator

Okay, you've got a front-end now you need an iApp.

You can quickly bootstrap a privacy-preserving application locally using the IApp Generator.