srph

what

Rotating text for long-running pending buttons

usage

const STOP_TEXTS = [
  "Closing Positions",
  "Canceling Orders",
  "Finalizing Trades",
 "Updating Balances",

srph

what

A super basic boilerplate wrapping Next.js route abort events

usage

useUnsavedChangesWarning(form.isDirty === true && status !== 'pending')

srph

import type { HTMLAttributes } from "react";
import { cn } from "@/lib/cn";

// Example: <LayerCard><LayerCardSecondary>Title</LayerCardSecondary><LayerCardContent>Content</LayerCardContent></LayerCard>
export function LayerCard({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "rounded-lg border border-neutral-200 bg-neutral-100",
        className,

srph

what

An ergonomic wrapper for react-query's useMutationState

usage

export function useCreatePostMutation(...) {
  return useMutation({ mutationKey: ['create-post'], ... })
}

export function useCreatePostMutationState(...) {

srph

what

Latches a boolean flag for a short duration, then resets to false

Useful for when an action succeeds, then you want to reset back to normal after a short while

User completes swapping X to Y: temporarily show "Success" then allow user to interact with the form again

usage

const { mutate, status } = useMutation(...)

srph

what

Wiggle relevant elements when the user does the wrong thing twice (e.g. submitting a form with validation errors twice)

usage

const { scope: wiggleRef, wiggle } = useWiggle();

const handleSubmit = () => {
  if (errors) {
 wiggle();

srph

Usage

Here's an example of using this hook on top of react-query.

When your react-query mutation succeeds, we'll only flash the success state for 3 seconds until it's reverted back to normal

const isSuccess = useEphemeralState(
  mutation.isSuccess,
  3000,
);

srph

Vercel Deploy Script

This takes advantage of deployment hooks on Vercel. This simply removes the deploy file if it exists. Otherwise, it creates it. Then pushes it to the repository.

Usage

Add to your package.json

{

srph

// Bn -> Float multiplication works like this: 150e6 * (0.5 * 100) / 100
// Also does some coercions for readability
const multiplyBnToFloat = (a: string, b: string) => {
  return (BigInt(a) * BigInt(Number(b) * 100)) / BigInt(100)
}

// 75000000
multiplyBnToFloat('150000000', '0.5000000000')

srph

{
	"React Component": {
		"prefix": "0rc",
		"body": [
			"import React from 'react';",
			"",
			"interface ${TM_FILENAME_BASE}Props {",
			"  name: string;",
			"}",
			"",