Skip to content

Instantly share code, notes, and snippets.

Monolithic Components, Composable Components

Introduction

Building reusable UI components is a non trivial task, as we need to anticipate a number of things when planing for reuseability. On the one end of the spectrum we want to enable customization and on the other side we want to avoid developers doing the wrong thing, like breaking the component or displaying invalid states.

To get a better understanding of what we need to think about and consider upfront, we will build a non-trivial UI component, that displays tags. Our Tags component will take care of managing and displaying tags.

The following examples are all built with Tachyons and React, but these ideas apply to any UI component and any general styling approach.

const UniswapV2FactoryArtifact = require('@uniswap/v2-core/build/UniswapV2Factory.json');
const UniswapV2PairArtifact = require('@uniswap/v2-core/build/UniswapV2Pair.json');
const UniswapV2Router02Artifact = require('@uniswap/v2-periphery/build/UniswapV2Router02.json');
const WETH9Artifact = require('@uniswap/v2-periphery/build/WETH9.json');
async function createMockWETH() {
// deploy mock WETH
const WETH9 = await ethers.getContractFactory(
@phortuin
phortuin / signing-git-commits.md
Last active May 16, 2025 13:50
Set up a GPG key for signing Git commits on MacOS (M1)

Based on this blogpost.

To sign Git commits, you need a gpg key. GPG stands for GNU Privacy Guard and is the de facto implementation of the OpenPGP message format. PGP stands for ‘Pretty Good Privacy’ and is a standard to sign and encrypt messages.

Setting up

Install with Homebrew:

$ brew install gpg