Built for EthOnline 2021.

About The Project • Stack • Creating Blocks • Credits

Dexter is a DeFi dashboard that allows you to create, import and export dashboard layouts to share with your friends. The dashboard aims to combine the customizability of Notion with the detailed data insights of Bloomberg terminal. Users have the ability to open a pull request to easily add their own blocks to the repository. Please see below for more information on creating your own block.

• Step 1: Create your new block folder in the /blocks folder.

src
└── blocks
    └── YourAwesomeBlock.tsx

• Step 2: Write your component and wrap it in the <CustomBlock/> component.

import React from 'react'
import { CustomBox } from '@components/CustomBox'
import {Text} from '@chakra-ui/layout'

export const AwesomeBlock = () => {
  return (
    <CustomBlock>
      <Text>My awesome DeFi block for Dexter</Text>
    </CustomBlock>
  )
}

• Step 3: Add the custom block to the /BlockData folder.

src
└── constants
    └── BlockData

In the BlockData array, add your component.

const BlockData = [
  ...OtherData,
  { index: '12', title: 'AwesomeBlock', protocol: 'Ethereum' },
]

In the getBlockType function, add your component to the switch statement.

export const getBlockType = (block: BlockType, provided): JSX.Element => {
  switch (block.title) {
    case "AwesomeBlock":
      return <AwesomeBlock/>
  }

• Done 🎉

• Created by Jack Burrus