Middleware for Subscribe

Middlewares enable dynamic rules for when an action is performed. Middlewares are essentially smart contracts that execute a piece of logic before that action is executed. In this section the action we are looking at is to Subscribe to Profile.

Middleware for Subscribe can be used for two different purposes:

1. To set the rules on what should happen when someone subscribes to the user's profile (e.g. allow other users to subscribe only once or users should pay a specific ERC-20 token amount);
2. To set the tokenURI of the Subscribe NFT that get minted and transferred to the subscriber's wallet address.

GraphQL mutations

If you haven't already set the ApolloClient please go Apollo Client section to do so.

By now this process should be really familiar. Set middleware for subscribe follows the same two step process that requires two GraphQL mutations: CreateSetSubscribeDataTypedData and Relay.

1. CreateSetSubscribeDataTypedData is used to present data to the user in a readable format:

graphql/CreateSetSubscribeDataTypedData.ts

import { gql } from "@apollo/client";

export const CREATE_SET_SUBSCRIBE_DATA_TYPED_DATA = gql`
    mutation CreateSetSubscribeDataTypedData(
        $input: CreateSetSubscribeDataTypedDataInput!
    ) {
        createSetSubscribeDataTypedData(input: $input) {
            typedData {
                id
                chainID
                sender
                data
                nonce
            }
        }
    }
`;

2. Relay is responsible for broadcasting the transaction, minting and transferring the NFT:

graphql/Relay.ts

import { gql } from "@apollo/client";

export const RELAY = gql`
    mutation Relay($input: RelayInput!) {
        relay(input: $input) {
            relayTransaction {
                id
                txHash
                typedData {
                    id
                    chainID
                    sender
                    data
                    nonce
                }
            }
        }
    }
`;

Middleware for Subscribe

tip

There are multiple available middlewares that can be implemented. Visit the Middleware section to view the full list.

Let's get to the implementation! The approach is almost exactly the same as it was for Subscribe to Profile. In this example you will set both the tokenURI so that subscribers receive a cute NFT when they subscribe and enable a rule so that when others want to subscribe to the user's profile they will have to pay 1 LINK to do so. The steps are similar but what matters in the end are the parameters that get passed:

1. Construct the metadata object for the Subscribe NFT;
2. Upload the metadata to IPFS to get the hash;
3. Get data in a readable format and the typedDataID for it;
4. Get the user to sign the message data and get its signature;
5. Call the relay and pass it the typedDataID and signature;

components/SetSubscribeBtn.tsx

/* Construct the metadata object for the Subscribe NFT */
const metadata = {
    image_data: getSubscriberSVGData(),
    name: `@${handle}'s subscriber`,
    description: `@${handle}'s subscriber on CyberConnect Content app`,
};

/* Upload metadata to IPFS */
const ipfsHash = await pinJSONToIPFS(metadata);

/* Create typed data in a readable format */
const typedDataResult = await createSetSubscribeDataTypedData({
    variables: {
        input: {
            options: {
                /* The chain id on which the Subscribe NFT will be minted on */
                chainID: chainID,
            },
            /* The user's profile id for which the rules are enabled */
            profileId: profileID,
            /* URL for the json object containing data about the Subscribe NFT */
            tokenURI: `https://cyberconnect.mypinata.cloud/ipfs/${ipfsHash}`,
            middleware: {
                subscribePaid: {
                    /* Address that will receive the amount */
                    recipient: account,
                    /* Amount that needs to be paid to subscribe */
                    amount: 1,
                    /* The currency for the  amount. Chainlink token contract on Goerli */
                    currency: "0x326C977E6efc84E512bB9C30f76E30c160eD06FB",
                    /* If it require the subscriber to hold a NFT */
                    nftRequired: false,
                    /* The contract of the NFT that the subscriber needs to hold */
                    nftAddress: "0x0000000000000000000000000000000000000000",
                },
            },
        },
    },
});
const typedData =
    typedDataResult.data?.createSetSubscribeDataTypedData?.typedData;
const message = typedData.data;
const typedDataID = typedData.id;

/* Get the signature for the message signed with the wallet */
const fromAddress = await signer.getAddress();
const params = [fromAddress, message];
const method = "eth_signTypedData_v4";
const signature = await signer.provider.send(method, params);

/* Call the relay to broadcast the transaction */
const relayResult = await relay({
    variables: {
        input: {
            typedDataID: typedDataID,
            signature: signature,
        },
    },
});
const txHash = relayResult.data?.relay?.relayTransaction?.txHash;

If the middleware was set successfully, you can verify the transaction hash on goerli.etherscan.io.

Now that the middleware is set, whenever someone wants to subscribe to the user's profile they will have to pay 1 LINK to subscribe and will receive a Subscribe NFT that looks like this:

Next up you will dive deep into the Middleware for Post and learn how when to you use it and how to set one.