Dexter Dashboard

Built for EthOnline 2021.

About The Project • Stack • Creating Blocks • Credits

About The Project

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.

Stack

Name	Usage
Alchemy	Primary Web3 API for fetching token metadata and balances.
The Graph	Provides on chain data for analytics and NFT source information.
Protocol Labs	NFT.Storage is used to upload images to IPFS and provide a ipfs url for NFT creation.
ENS	Reverse and forward ENS resolution on the wallet provides readable address information.
Zora	Auction images are displayed on the NFT block
Scaffold Eth	The Next.js and Typescript template provided a great starter for this project.
Chakra UI	For style

Creating Blocks

• 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 🎉

Credits

• Created by Jack Burrus