License

This project is licensed under the BSD 3-Clause License with Specific Usage Restrictions.

Key Terms

• Permitted Use: This software may only be used to develop applications (frontend or backend) that directly interface with the Merkl incentive distribution solution.
• Prohibited Uses:
  • Developing standalone applications unrelated to the original backend.
  • Creating competitive backend services or applications.
  • Reverse engineering the core backend logic.
  • Developing alternative backend implementations.
• Commercial Use: Commercial use of this software, including incorporating it into paid products or services, is strictly prohibited without prior written approval from Angle Labs, Inc. For inquiries regarding commercial use, contact [email protected]

Full License

For detailed terms and conditions, refer to the LICENSE file in this repository.

Welcome to Merkl's DappKit !

A component library designed to quickly create customizable and accessible user interfaces for EVM decentralized applications.

Built upon React, Tailwind + Variants, Radix Primitives and Wagmi.

Concept

The DappKit theme exposes 3 scales of 12 colors that can be customized using the Radix Colors guidelines:

Tailwind Variables

To be able to define some component styling with abstract colors, we define scales of 12 colors and use them according to the radix color guidelines:

Radix also provides a way to generate appropriates scales from a single color (preview), we can then make the configuration only be one color per scale. Instead of defining tailwind color classes with colors, we map them to css variables (bg-main-2: 'var(--main-2)'), which gives us room to add a variable declaration later on to assign a color to that class.

Tailwind Variants

Once we have access to variables through tailwind classes, for each component we can define variants, and map each one to tailwind classes thanks to the tailwind-variants library.

Thanks to some generic typing and utility functions we can elegantly define components:

import { mergeClass } from 'src/utils/css'
import type { Component, Styled } from 'src/utils/types'
import { tv } from 'tailwind-variants'

export const buttonStyles = tv({
  base:
    'text-main-11 flex items-center   border-1 outline-offset-0 outline-0 text-nowrap',
  variants: {
    look: {
      base:
        'bg-main-4 border-main-7 hover:bg-main-5 active:bg-main-3 text-main-12 focus-visible:border-main-9',
      soft:
        'bg-main-0 border-main-0 hover:bg-main-4 active:bg-main-3 hover:text-main-12  focus-visible:border-main-9',
      bold:
        'bg-accent-4 border-accent-6 hover:bg-accent-5 active:bg-accent-3 text-main-12 focus-visible:border-accent-9',
      hype:
        'bg-accent-9 border-accent-6 hover:bg-accent-10 active:bg-accent-8 text-accent-12 focus-visible:border-accent-10',
    },
    size: {
      xs: 'px-2 py-1 text-xs rounded',
      sm: 'px-3 py-2 text-sm rounded-sm',
      md: 'px-4 py-3 text-md rounded-md',
      lg: 'px-5 py-4 text-lg rounded-lg',
      xl: 'px-6 py-5 text-xl rounded-xl',
    },
  },
  defaultVariants: {
    size: 'md',
    look: 'base',
  },
})

export type ButtonProps = Component<
  Styled<typeof buttonStyles>,
  HTMLButtonElement
>

export default function Button({
  look,
  size,
  className,
  ...props
}: ButtonProps) {
  return (
    <button
      className={mergeClass(buttonStyles({ look, size }), className)}
      {...props}
      type="button"
    />
  )
}

We then use them in the code in an abstract manner, the configuration of the theme and the variables will take care of styling it:

function AnAbstractedButton() {
  return (
    <Button size="lg" look="hype">
      Explore opportunities
    </Button>
  )
}

Sizing

We use a straightforward scale for every sizing variable: xs, sm, md, lg, xl that applies to radius, padding, gaps... The border radius also has a composed scale to be able to create boxes that perfectly wrap their content: xs+sm, xs+md, xs+lg....

Usage

As of now, DappKit can be used as a submodule. It exposes the .ts sources directly from the package. Our preferred way of intergrating the dappkit is through git submodules & workspaces:

Add the submodule into packages/ in your repository:

git submodule add https://github.com/AngleProtocol/dappkit packages/dappkit

Configure workspaces in yout package.json

{
  "workspaces": ["packages/*"]
  //...
}

Update your packages (bun i), you will see + dappkit@workspace:packages/dappkit, the package is now installed as dappkit:

import { Button } from 'dappkit'

To import the tailwind config:

//tailwind.config.ts
import { generateTailwindConfig } from "dappkit/src/utils/tailwind";
import type { Config } from "tailwindcss";

export default {
	content: ["./{app,src,packages}/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
	theme: generateTailwindConfig(),
	plugins: [],
} satisfies Config;

Development

You can preview and develop component using the included Remix app.

npm run dev