ERC20 WAGMI

💾  Installation

npm install @turbo-eth/erc20-wagmi

yarn add @turbo-eth/erc20-wagmi

pnpm add @turbo-eth/erc721-wagmi

git clone https://github.com/turbo-eth/erc20-wagmi

📚Information

The @turbo-eth/erc20-wagmi module exports core ERC20 hooks and components for React application.

Hooks

The WAGMI CLI @wagmi/cli is used to auto-generate hooks and other core frontend application primitives.

Components

The @turbo-eth/erc20-wagmi module also includes ERC20 primitive components.

• ERC20Allowance
• ERC20Balance
• ERC20Decimals
• ERC20Name
• ERC20Symbol
• WalletERC20Balance

Components have no initial styling or design.

⚡️ Quickstart

Use existing ERC20 components or add ERC20 hooks to easily build new components.

import * as React from 'react';
import classNames from 'clsx';
import { ERC20Decimals, ERC20Name, ERC20Symbol, useErc20BalanceOf } from '@turbo-eth/erc20-wagmi'

interface TokenInformationProps {
 className?: string;
 address: `0x${string}`;
}

export const TokenInformation = ({ className, address }: TokenInformationProps) => { 
 const classes = classNames(className, 'TokenInformation'); 
  const { address: accountAddress } = useAccount()

  const { data, isError, isLoading } = useErc20BalanceOf({
    address,
    args: [ accountAddress ],
  });

 return(
  <div className={classes}>
    <ERC20Name address={address} />
    <ERC20Symbol address={address} />
    <ERC20Decimals address={address} />
    {
      isError ? null : (
        <span className={classes}>
          {formatUnits(data as unknown as bigint, (decimals as number) || 18)}
        </span>
      )
    }
  </div>
)}

export default TokenInformation;

💻 Developer Experience

The module uses a combination of DTS and Microbundle to manage the development workflow.

• Husky
• Jest
• Commitlint
• TypeScript
• eslint + prettier

🐕 What is husky

Husky improves your git commits.

You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.

🪝 Hooks

• pre-commit: lint code by applying eslint
• commit-msg: force commintlint rules

📋 What is commitlint

commitlint checks if your commit messages meet the conventional commit format.

In general the pattern mostly looks like this:

type(scope?): subject  #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")

Real world examples can look like this:

chore: run tests on travis ci

fix(server): send cors headers

feat(blog): add comment section

Common types according to commitlint-config-conventional (based on the Angular convention) can be:

• build
• chore
• ci
• docs
• feat
• fix
• perf
• refactor
• revert
• style
• test

Sponsors & Maintainers

The TurboETH Web3 Build System development is (currently) sponsored (and maintained) by District Labs.

Interested in sponsoring the development and maintenance of the TurboETH - Web3 Build System templates, utilities and modules?

Contact us today at District Labs or collect (coming soon) the TurboETH Mirror Collection.

Copyright 2022 Kames Geraghty