DEV Community: Petromir Petrov

iExec DataProtector Core and Web3Mail Tutorial

Petromir Petrov — Thu, 26 Dec 2024 14:20:53 +0000

Prerequisites

Ensure Node.js v18 or later is installed.

Install iExec's SDKs:

yarn add @iexec/dataprotector @iexec/web3mail

We'll use Wagmi to interact with wallets, though you may use any other dApp library:
```
yarn add wagmi
```
An Ethereum wallet that will be used to "send" emails.

Step 1: Save an Email Address and Grant Access

In this step, you will:

Securely store email addresses using iExec's DataProtector Core.
Grant controlled access to a dApp without revealing the email addresses.
Allow users to revoke access at any time.

If you have already completed this step, you can proceed to Step 2.

Add Bellecour Network to Your App

Here's an example for Wagmi:

const bellecourNetwork = defineChain({
  id: 134,
  name: 'iExec Sidechain',
  nativeCurrency: { name: 'xRLC', symbol: 'xRLC', decimals: 18 },
  rpcUrls: { default: { http: ['https://bellecour.iex.ec'] } },
  blockExplorers: { default: { name: 'IXEC Explorer', url: 'https://blockscout.bellecour.iex.ec' } },
})

export const config = createConfig(
  getDefaultConfig({
    chains: [
      // Other chains...
      bellecourNetwork,
    ],
    transports: { 134: http('https://bellecour.iex.ec') },
    // Other settings...
  })
)

Switching Networks

Use the useSwitchChain hook to switch to the Bellecour network:

const { switchChain } = useSwitchChain({ config })

Saving Email as Protected Data

const saveEmailAsProtected = async () => {
  if (!isValidEmail(email)) {
    setError('Please enter a valid email address')
    return
  }

  // Switch to Bellecour
  await switchChain(134)
  if (chainId !== 134) return

  setIsInProgress(true)
  try {
    await dataProtectorCore.protectData({
      // Unique identifier for the dataset
      name: 'uniqueDatasetName',
      data: { email },
    })
    setHasProtectedEmail(true)
  } catch (error) {
    // Handle errors
    console.error(error)
    setError('Failed to save email address')
  } finally {
    setIsInProgress(false)
  }
}

💡 Note: All implementations should be adapted to fit your specific requirements.

Retrieving Protected Data

Retrieve the dataset for the following purposes:

Check if the user has already saved their email.
Fetch the dataset address to grant access to a dApp.

const getProtectedData = async () => {
  if (chainId !== 134) return

  setIsInProgress(true)
  try {
    const result = await dataProtectorCore.getProtectedData({
      owner: address,
      requiredSchema: { email: 'string' },
    })
    // Filter the dataset by name as there may be multiple datasets
    // with the same schema.
    return result.filter(({ name }) => name === 'uniqueDatasetName')
  } catch (error) {
    console.error(error)
    setError('Failed to get email address')
  } finally {
    setIsInProgress(false)
  }
}

Granting Access

Allow dApps to access datasets:

const grantAccess = async () => {
  const protectedData = await getProtectedData()

  if (!protectedData?.length || chainId !== 134) {
    setError('Please switch to iExec\'s sidechain or check your data.')
    return
  }

  setIsInProgress(true)
  try {
    await dataProtectorCore.grantAccess({
      // Get the address of the first dataset
      protectedData: protectedData[0].address,
      // This is iExec's Web3Mail app whitelist address
      // https://tools.docs.iex.ec/tools/web3mail/methods/sendEmail#sendemail
      authorizedApp: '0x781482C39CcE25546583EaC4957Fb7Bf04C277D2',
      // The Ethereum address that will be used to send emails on the backend
      authorizedUser: '0x...',
      numberOfAccess: 100000,
    })
  } catch (error) {
    console.error(error)
    setError('Failed to grant email address access')
  } finally {
    setIsInProgress(false)
  }
}

Revoking Access

Users may want to revoke access to their data. It can be done using revokeAllAccess:

const revokeAccess = async () => {
  const protectedData = await getProtectedData()

  if (!protectedData?.length || chainId !== 134) {
    setError('Please switch to iExec\'s sidechain or check your data.')
    return
  }

  setIsInProgress(true)
  try {
    await dataProtectorCore.revokeAllAccess({
      protectedData: protectedData[0].address,
      authorizedApp: '0x781482C39CcE25546583EaC4957Fb7Bf04C277D2',
      authorizedUser: '0x...',
    })
  } catch (error) {
    console.error(error)
    setError('Failed to revoke access')
  } finally {
    setIsInProgress(false)
  }
}

Step 2: Using Web3Mail SDK

Send emails to recipients who have granted access to your dApp.

Initializing Web3Mail SDK

import { getWeb3Provider, IExecWeb3mail } from '@iexec/web3mail'

// The PRIVATE_KEY of the Ethereum address that users granted access to - 'authorizedUser'
const provider = getWeb3Provider(process.env.PRIVATE_KEY)
const web3mail = new IExecWeb3mail(provider)

Fetching Contacts

Retrieve users who granted access:

// isUserStrict - enables fetching contacts who granted access exclusively to our dApp and no one else.
const contactsList = await web3mail.fetchMyContacts({ isUserStrict: true })

Sending Emails

Loop through contacts to send emails:

for (const { address: protectedDataAddress, owner } of contactsList) {
  const content = `<div><p>Hello ${owner},</p><p>Here’s your update!</p></div>`

  await web3mail.sendEmail({
    protectedData: protectedDataAddress,
    emailSubject: 'Your Update',
    emailContent: content,
    contentType: 'text/html',
    senderName: 'Web3Mail Service',
    workerpoolAddressOrEns: 'prod-v8-learn.main.pools.iexec.eth',
  })
  console.log(`Email sent to ${owner}`)
}

💡 Note: If you are hitting rate limits or get nonce related errors use a setTimeout to add a 1-2sec timeout between emails.

While in Development

For testing purposes, you can use a dev worker pool by setting workerpoolAddressOrEns to prod-v8-learn.main.pools.iexec.eth. This allows you to test email sending without RLC tokens.

Production Considerations

Use a production worker pool for stability.
Follow iExec’s guide for payment.

Validation

Verify protected data on the blockchain using iExec’s Explorer:

Search for the user’s Ethereum address.
View datasets under the DATASETS tab.
Make sure the dataset is stored on the blockchain.

You can find more articles, written by me on my website.

The Simplest Way to Add Sass Themes to Your Next.js Project

Petromir Petrov — Sun, 15 Dec 2024 15:53:03 +0000

Challenges to Overcome

While Sass is powerful for writing cleaner, more modular CSS, it has limitations for runtime theming, as Sass code is compiled before the browser renders it. This means that pure Sass can't dynamically switch themes at runtime. However, by combining CSS variables with Sass, we can achieve runtime theming with minimal extra effort.

Setting Up a Theme Context in Next.js

The context provider will manage the theme state across components. The example code here is written for a Next.js 14 project, but it's adaptable for any React setup.

// ThemeProvider.tsx
'use client'
import React, { createContext, FC, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
import './ThemeProvider.scss';

type Theme = 'dark' | 'light';

type ContextReturnType = {
    theme: Theme;
    toggleTheme: () => void;
};

type Props = {
    children: React.ReactNode;
};

const ThemeContext = createContext<ContextReturnType>({
    theme: 'dark',
    toggleTheme: () => {},
});

const ThemeProvider: FC<Props> = ({ children }) => {
    const [theme, setTheme] = useState<Theme>(() => {
        if (typeof window !== 'undefined') {
            const savedTheme = localStorage.getItem('theme');
            return (savedTheme || 'dark') as Theme;
        }
        return 'dark';
    });

    const [isLoading, setIsLoading] = useState(true);

    const toggleTheme = useCallback(() => {
        setTheme(prevTheme => {
            const nextTheme = prevTheme === 'light' ? 'dark' : 'light';
            localStorage.setItem('theme', nextTheme);
            return nextTheme;
        });
    }, []);

    useLayoutEffect(() => {
        document.documentElement.className = theme;
        setIsLoading(false);
    }, [theme]);

    const contextValue = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

    if (isLoading) {
        return null;
    }

    return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
};

export const useThemeContext = () => useContext(ThemeContext);
export default ThemeProvider;

The theme is stored in the state and saved to localStorage so the user's preference persists across sessions. The toggleTheme function switches between light and dark themes and updates localStorage. We use useLayoutEffect to apply the theme class to the HTML element, enabling us to style based on this class in Sass.

Defining the Theme with Sass

Next, let's define our theme styles using Sass. We'll create two mixins, Text and Background, to handle colors for text and background but you can have as many as you need.

// theme.scss
@mixin Text($primary, $secondary) {
    --text-primary: #{$primary};
    --text-secondary: #{$secondary};
}

@mixin Background($primary, $secondary) {
    --background-primary: #{$primary};
    --background-secondary: #{$secondary};
}

.dark {
    --theme: dark;
    @include Text('#F9F9F9', '#C6C6C6');
    @include Background('#0D0E10', '#1E1F24');
}

.light {
    --theme: light;
    @include Text('#1C1C1C', '#4A4A4A');
    @include Background('#FFFFFF', '#f2f7ff');
}

The Text and Background mixins allow us to easily apply color schemes for each theme. The .dark and .light classes define CSS variables for each theme. The --theme property lets us identify which theme is active within Sass styles. You can use that to apply theme-specific styles.

Using CSS Variables in Sass

To make our theme values available in Sass, let's create a helper function that converts CSS variables into Sass variables.

// mixins.scss
@function theme($color-name) {
    @return var(--#{$color-name});
}

The theme function retrieves CSS variable values by their name, allowing you to use theme('text-primary') in any Sass file where you want to access theme-dependent styles.

Applying Themes to Components

Now, let's apply these theme variables to a component. Here's how to style a button component with theme-dependent colors.

// Button.module.scss
@import 'mixins.scss';

.button {
    color: theme('text-primary');
    background-color: theme('background-primary');
}

The Button component now uses theme-specific colors for its text and background, automatically adapting to the active theme.

Conclusion

Following these steps, you can easily implement dynamic themes in your Next.js project.

You can find more articles, written by me on my website.