Skip to content

Instantly share code, notes, and snippets.

@ibelick
ibelick / truncateEthAddress.ts
Created February 14, 2022 14:29
utility to truncate Ethereum addresses to a more readable format
export const truncateEthAddress = (address: string) => {
const truncateRegex = /^(0x[a-zA-Z0-9]{4})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/;
const match = address.match(truncateRegex);
if (!match) return address;
return `${match[1]}…${match[2]}`;
};
@ibelick
ibelick / ButtonConnectWallet.tsx
Created February 14, 2022 14:56
Simple connect to MetaMask with React + TypeScript
const ButtonConnectWallet: React.FC = () => {
const [address, setAddress] = useState<string | null>(null);
const connectWallet = async () => {
if (!window?.ethereum) {
alert("No wallet found. Please install MetaMask.");
return;
}
try {
@ibelick
ibelick / home.tsx
Created February 15, 2022 14:11
Next.js basic GetStaticProps with TypeScript
import { GetStaticProps, NextPage } from "next";
interface Data {
title: string;
}
interface HomePageProps {
data: Data;
}
@ibelick
ibelick / home.tsx
Created February 16, 2022 14:33
Next.js basic GetStaticProps+GetStaticPaths with TypeScript
import type { GetStaticPaths, GetStaticProps, NextPage } from "next";
import { ParsedUrlQuery } from "querystring";
interface Data {
title: string;
}
interface HomePageProps {
data: Data;
}
@ibelick
ibelick / Dialog.tsx
Created February 16, 2022 15:57
A Dialog component by Radix UI and Tailwind CSS
import { useState, Fragment } from "react";
import { Transition } from "@headlessui/react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import * as Portal from "@radix-ui/react-portal";
interface DialogProps {
trigger: React.ReactNode;
}
const Dialog: React.FC<DialogProps> = ({ trigger }) => {
@ibelick
ibelick / tailwind-spinner.svg
Last active February 17, 2022 16:01
A classic tailwind CSS spinner svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@ibelick
ibelick / Progress
Created February 21, 2022 11:32
Progress Bar with Tailwind CSS + TypeScript
interface ProgressProps {
label?: string;
value: number;
}
const Progress: React.FC<ProgressProps> = ({ label, value }) => {
return (
<>
{label ? (
<div className="mb-1 flex justify-between">
@ibelick
ibelick / IconButton.tsx
Created February 21, 2022 11:04
Circular Button with Icon (Tailwind CSS)
const IconButton = () => {
return (
<button className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 text-black drop-shadow-sm transition-colors duration-150 hover:bg-gray-200">
<svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
<path
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clip-rule="evenodd"
fill-rule="evenodd"
></path>
</svg>
@ibelick
ibelick / usePrice.ts
Created March 9, 2022 15:19
Hook to get the current price of any cryptocurrencies in any other supported currencies that you need. (Coingecko API)
import useSWR from "swr";
import { fetcher } from "lib/fetch";
const usePrice = (fromCurrencies: string, vsCurrencies: string) => {
const { data, error } = useSWR(
`https://api.coingecko.com/api/v3/simple/price?ids=${fromCurrencies}&vs_currencies=${vsCurrencies}`,
fetcher
);
return {
@ibelick
ibelick / SelectDisplayImage.tsx
Created March 15, 2022 16:23
Display an image selected from input type file with React + TypeScript
const SelectDisplayImage = () => {
const [image, setImage] = useState<null | string>(null);
const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const input = event.target;
if (!input.files?.length) {
return;
}