This step gives you a working front-end where users can connect their wallet, sign in with Google, and contribute data to your DataDAO — securely and privately.

The UI handles:

• Client-side encryption of user data
• Google Drive integration for file selection
• Proof-of-Contribution validation through your PoC job
• Schema-compatible refinement through your Refiner
• Onchain submission to the Vana network

Steps

1. Clone the Template UI Repository

git clone https://github.com/vana-com/dlp-ui-template
cd dlp-ui-template
yarn install
cp .env.example .env

2. Configure.env

Update the following values in your .env:

• REFINER_ID — saved from 4. Create Data Refiner.
• NEXT_PUBLIC_PROOF_URL — saved from 3. Create Proof-of-Contribution Job.
• PINATA_API_KEY / PINATA_API_SECRET — saved from 3. Create Proof-of-Contribution Job.
• NEXT_PUBLIC_DLP_CONTRACT_ADDRESS — DataLiquidityPoolProxy saved from 1. Deploy Smart Contracts .

3. Set Up Google OAuth
   1. Go to Google Cloud Console
   2. Click Select a project → New Project to create a new project
   3. Navigate to the created project → search for Google Drive API and click Enable
   4. Search for APIs & Services → OAuth consent screen
   5. Click Get Started, select External as a type, fill required fields
   6. Go to APIs & Services → Credentials → Click Create Credentials → OAuth Client ID
   7. Choose Web Application
   8. Add the following:
      • Authorized JavaScript origins: http://localhost:3000
      • Redirect URIs: http://localhost:3000/api/auth/callback/google
   9. Click Create
   10. Finally, copy your Client ID and Client Secret, and add to .env:
       • GOOGLE_CLIENT_ID=...
       • GOOGLE_CLIENT_SECRET=...

🚧

Tip

These settings restrict OAuth access to localhost only.

When you deploy your UI to the web, make sure to update these values to match your production domain (e.g. https://your-datadao-ui.com).

4. Run the UI

npm run dev

Then open localhost:3000. You now have a working Contributor UI connected to:

• Your DataDAO onchain
• Your Proof-of-Contribution
• Your Refiner schema
• Google Drive and wallet login