Config

This page goes over the `blocked.config.ts` file in detail. The app regularly references the rules inside the config, so understanding this part is important.

Creating config

The file's name and location can be altered.

Begin by creating a block3d.config.ts file at your project's root. Next, create a block3dConfig object and make sure to export it.

export const block3dConfig = {}

Configuring page restriction

Now that we have our block3dConfig object, we need to populate it with 3 things:

1. publicRoutes is an array of strings representing page routes that are marked as public, meaning that any configured rules don't apply to the pages listed inside it.

2. strict is a boolean. When marked true, all existing rule criteria must be met. When marked false, the user may view restricted pages as long as they meet the criteria for at least one rule.

3. rules is an array of Rule objects. This is where you can control exactly which users may view your app.

export const block3dConfig = {
publicRoutes: ["/", "/my-public-route"],
strict: false,
rules: [
    {
      title: "my-title",
      type: "simple",
      addresses: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045"],
    },
  ],
};

Creating rules

The Rule type is defined like so:

export type Rule = {
  type: string;
  title: string;
  addresses?: string[];
  minimumBal?: string; 
  contracts?: Contract[];
  strict?: boolean;
};

type Contract = {
  address: string;
  chainId: number;
  minimumBal?: string;
};

type

There are three different types of rules:

1. simple rules are the most basic type and allow you to essentially whitelist any set of addresses that can then view your restricted pages. These rules consist of a title, type, and addresses field.

2. token rules allow you to restrict pages based on addresses that hold a minimumBal of any specified token. These rules consist of a title, type, contracts, and at least one global minimumBal OR at least one minimumBal for each Contract object.

3. nft rules are identical to token rules except that they pertain to ERC-721 instead of ERC-20.

title

This can be any arbitrary string but should be short and describe its corresponding rule since it may be exposed to users on the front end.

addresses

This is an array of Ethereum addresses in string form and is only used in simple rules.

minimumBal

This is a string representation of the minimum number of tokens/nfts that must be held by users to meet the rule criteria. Used only in token and nft rules. Remember to account for decimals.

contracts

Used only in token and nft rules, this is an array of Contract objects that includes details about the token/nft smart contract.

• address is the smart contract address in string form. If using a chain's native currency, set this to the 0 address.

• chainId is the blockchain chain ID that the smart contract exists on as type number.

• minimumBal is the same as the minimumBal that lives outside of the Contract object. This field exists solely to allow developers to have different minimum balances depending on the chain and isn't necessary if the other exists.

strict

Used only in token and nft rules, this behaves similarly to the strict field that lives directly inside the block3dConfig object. It is a boolean that when set to true, means every Contract inside the contracts array is included when deciding if a user can view the page. If set to false, a minimum of one contract must meet the rule criteria. Defaults to false.

For example, a developer using token rule type with strict set to false, could have 3 separate Contract objects in the contracts array all representing the same token but on different chains. This way users can still view your app as long as they hold the minimumBal on one of the chains.

Examples

Here are predefined config files for each rule type.

Simple

This file is configured to block users that aren't listed in the "Original Gangsters" (everyone except Vitalik).

export const block3dConfig= {
  publicRoutes: ["/"],
  strict: false,
  rules: [
    {
      title: "Original Gangsters",
      type: "simple",
      addresses: ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045"],
    },
  ],
};

Token

This file is configured to block users that don't own 1 ETH and 500 USDC on mainnet

export const block3dConfig= {
  publicRoutes: [],
  strict: true,
  rules: [
    {
      title: "Holds 1 ETH",
      type: "token",
      contracts: [
        {
          address: "0x0000000000000000000000000000000000000000",
          chainId: 1, 
          minimumBal: "1000000000000000000", 
        },
      ],
    },
    {
      title: "Holds 500 USDC",
      type: "token",
      contracts: [
        {
          address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", 
          chainId: 1,
          minimumBal: "500000000",
        },
      ],
    },
  ],
};

Nft

This file is configured to block users that don't own at least 1 of these NFTs: Milady, Remelio, Bonkler.

const block3dConfig= {
  publicRoutes: ["/", "/myPublicRoute"],
  strict: false,
  rules: [
    {
      title: "Own a Milady",
      type: "nft",
      contracts: [
        {
          address: "0x5Af0D9827E0c53E4799BB226655A1de152A425a5",
          chainId: 1, 
          minimumBal: "1", 
        },
      ],
    },
    {
      title: "Own a Remilio",
      type: "nft",
      contracts: [
        {
          address: "0xD3D9ddd0CF0A5F0BFB8f7fcEAe075DF687eAEBaB", 
          chainId: 1,
          minimumBal: "1",
        },
      ],
    },
    {
      title: "Own a Bonkler",
      type: "nft",
      contracts: [
        {
          address: "0xABFaE8A54e6817F57F9De7796044E9a60e61ad67", 
          chainId: 1,
          minimumBal: "1",
        },
      ],
    },
  ],
};

export default block3dConfig