-
17 | {sats.map((sat) => (
18 |
- 19 | 25 | Sat #{sat} 26 | 27 | 28 | ))} 29 |
17 | {/* eslint-disable-next-line @next/next/no-img-element */}
18 | 
25 |
26 | );
27 | };
28 |
29 | export default InscriptionRenderImage;
30 |
--------------------------------------------------------------------------------
/components/HoverCard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
5 |
6 | import { cn } from "../lib/utils";
7 |
8 | const HoverCard = HoverCardPrimitive.Root;
9 |
10 | const HoverCardTrigger = HoverCardPrimitive.Trigger;
11 |
12 | const HoverCardContent = React.forwardRef<
13 | React.ElementRef
21 | Halving Period {params.pid}
22 |
23 |
18 |
28 | );
29 | };
30 |
31 | function recommendAction(message?: string) {
32 | if (message == "Load failed") {
33 | return "Try refreshing the page in a bit.";
34 | }
35 | }
36 |
37 | export default Error;
38 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: 'Bug'
6 |
7 | ---
8 |
9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 |
12 | Transaction ID
13 | Address
14 | Block#
15 | Time stamp
16 |
17 | **To Reproduce**
18 | Steps to reproduce the behavior:
19 | 1. Go to '...'
20 | 2. Click on '....'
21 | 3. Scroll down to '....'
22 | 4. See error
23 |
24 | **Expected behavior**
25 | A clear and concise description of what you expected to happen.
26 |
27 | **Screenshots**
28 | If applicable, add screenshots or consol.log to help explain your problem.
29 |
30 | **Desktop (please complete the following information):**
31 | - OS: [e.g. iOS]
32 | - Browser [e.g. chrome, safari]
33 | - Version [e.g. 22]
34 |
35 | **Smartphone (please complete the following information):**
36 | - Device: [e.g. iPhone6]
37 | - OS: [e.g. iOS8.1]
38 | - Browser [e.g. stock browser, safari]
39 | - Version [e.g. 22]
40 |
41 | **Additional context**
42 | Add any other context about the problem here:
43 |
--------------------------------------------------------------------------------
/components/icons/IconImage.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 |
3 | const IconImage = (params: { className?: string; style?: CSSProperties }) => {
4 | return (
5 |
30 | );
31 | };
32 |
33 | export default IconImage;
34 |
--------------------------------------------------------------------------------
/components/Sort.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectContent,
4 | SelectItem,
5 | SelectTrigger,
6 | SelectValue,
7 | } from "./Select";
8 |
9 | export const inscriptionSortOptions = {
10 | // todo: sat ordinal
11 | "genesis_block_height-desc": "Newest First",
12 | "genesis_block_height-asc": "Oldest First",
13 | "rarity-desc": "Most Rare First",
14 | "rarity-asc": "Most Common First",
15 | };
16 |
17 | const Sort = ({ sortKey, updateSort }: any) => {
18 | return (
19 |
36 | );
37 | };
38 |
39 | export default Sort;
40 |
--------------------------------------------------------------------------------
/public/b-illustration.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/Intro.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useAtomValue } from "jotai";
4 | import { lastInscriptionDataAtom } from "../lib/store";
5 | import AnimatedText from "./AnimatedText";
6 |
7 | const Intro = () => {
8 | const lastInscriptionData = useAtomValue(lastInscriptionDataAtom);
9 |
10 | return (
11 | Something went wrong ʕ•̠͡•ʔ
19 | {/* todo: hide additional info in dropdown/details element */} 20 | {action &&{action}
} 21 | {message && ( 22 |
23 | {message}
24 |
25 | )}
26 | {status && Response Status: {status}
} 27 |
12 |
31 | );
32 | };
33 |
34 | export default Intro;
35 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | experimental: {
4 | appDir: true,
5 | },
6 |
7 | images: {
8 | remotePatterns: [
9 | {
10 | protocol: "https",
11 | hostname: "api.hiro.so",
12 | },
13 | ],
14 | },
15 |
16 | headers: async () => {
17 | return [
18 | {
19 | source: "/:path*",
20 | headers: [
21 | { key: "Access-Control-Allow-Origin", value: "*" },
22 | { key: "Cross-Origin-Opener-Policy", value: "same-origin" }
23 | ],
24 | },
25 | ];
26 | },
27 |
28 | redirects: async () => {
29 | return [
30 | {
31 | source: "/content/:iid",
32 | destination: `${process.env.NEXT_PUBLIC_API_URL}/inscriptions/:iid/content`,
33 | permanent: false,
34 | },
35 | {
36 | source: "/-/content/:iid",
37 | destination: `${process.env.NEXT_PUBLIC_API_URL}/inscriptions/:iid/content`,
38 | permanent: false,
39 | },
40 | {
41 | source: "/explore",
42 | destination: `/inscriptions`,
43 | permanent: false,
44 | },
45 | ];
46 | },
47 | };
48 |
49 | module.exports = nextConfig;
50 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Thank you for considering contributing to this product! We welcome any contributions, whether it's bug fixes, new features, or improvements to the existing codebase.
4 |
5 | ### Your First Pull Request
6 |
7 | Working on your first Pull Request? You can learn how from this free video series:
8 |
9 | [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
10 |
11 | To help you get familiar with our contribution process, we have a list of [good first issues](../../issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) that contain bugs that have a relatively limited scope. This is a great place to get started.
12 |
13 | If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don’t accidentally duplicate your effort.
14 |
15 | If somebody claims an issue but doesn’t follow up for more than two weeks, it’s fine to take it over but you should still leave a comment. **Issues won't be assigned to anyone outside the core team**.
16 |
17 | ### Contribution Prerequisites
18 |
19 | ... 🚧 Work in progress 🚧 ...
20 |
--------------------------------------------------------------------------------
/components/icons/IconExpand.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 |
3 | const IconExpand = (params: { className?: string; style?: CSSProperties }) => {
4 | return (
5 |
39 | );
40 | };
41 |
42 | export default IconExpand;
43 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
4 | theme: {
5 | extend: {
6 | screens: {
7 | "3xl": "1792px",
8 | "4xl": "2048px",
9 | },
10 | colors: {
11 | orange: "#FF5500",
12 | peach: "#FFC3A6",
13 | mint: "#C2EBC4",
14 | sky: {
15 | 50: "#eff7ff",
16 | 100: "#daecff",
17 | 200: "#b3d9ff", // palette generated with https://uicolors.app/create from #B3D9FF
18 | 300: "#91cbff",
19 | 400: "#5eaefc",
20 | 500: "#388cf9",
21 | 600: "#226dee",
22 | 700: "#1a58db",
23 | 800: "#1c47b1",
24 | 900: "#1c3f8c",
25 | 950: "#162755",
26 | },
27 | pink: "#FF9ECF",
28 | gold: "#BC812E",
29 | black: "#0D0C0C", // todo: really? everywhere?
30 | neutral: {
31 | 0: "#F2F0ED",
32 | 50: "#EBE8E5",
33 | 100: "#E4E0DC",
34 | 200: "#CFC9C2",
35 | 300: "#8C877D",
36 | 400: "#595650",
37 | 500: "#383432",
38 | 600: "#2A2726",
39 | 700: "#1E1C1B",
40 | 800: "#181717",
41 | 900: "#141312",
42 | },
43 | },
44 | },
45 | },
46 | plugins: [require("tailwindcss-animate")],
47 | };
48 |
--------------------------------------------------------------------------------
/components/SatsListWrapper.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import useSWR from "swr";
4 |
5 | import { API_URL } from "../lib/constants";
6 | import { fetcher } from "../lib/utils";
7 | import { InscriptionResponse, ListResponse } from "../lib/types";
8 | import CtaLink from "./CtaLink";
9 | import InscriptionCard from "./inscriptions/InscriptionCard";
10 | import Loading from "./Loading";
11 |
12 | const SatsListWrapper = ({ bid }: { bid: string }) => {
13 | const { data, error, isLoading } = useSWR
13 | {lastInscriptionData ? (
14 |
15 | Last Inscription #{lastInscriptionData.number}{" "}
16 | {new Intl.DateTimeFormat("default", {
17 | dateStyle: "medium",
18 | timeStyle: "short",
19 | }).format(lastInscriptionData.date)}
20 |
21 | ) : (
22 | placeholder
23 | )}
24 |
25 |
26 | Explore Ordinals inscriptions.
27 | Search, filter, and sort by address, inscription ID, sat number, or
28 | block.
29 |
30 |
26 |
37 | );
38 | };
39 |
40 | export default SatsListWrapper;
41 |
--------------------------------------------------------------------------------
/components/CopyButton.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { CopyIcon } from "@radix-ui/react-icons";
4 | import { motion } from "framer-motion";
5 | import { toast } from "react-hot-toast";
6 | import { cn } from "../lib/utils";
7 |
8 | const CopyButton = (
9 | props: (
10 | | {
11 | children: string;
12 | }
13 | | {
14 | children: React.ReactElement | React.ReactElement[] | string | string[];
15 | text: string;
16 | }
17 | ) & { className?: string }
18 | ) => {
19 | async function onClick() {
20 | try {
21 | await navigator.clipboard.writeText(
22 | "text" in props ? props.text : props.children
23 | );
24 | toast.success("Copied to clipboard");
25 | } catch (e) {
26 | toast.error("Failed to copy to clipboard");
27 | }
28 | }
29 |
30 | return (
31 | // todo: add tooltip
32 | // todo: abstract and re-use as RoundIconButton component
33 |
34 | {props.children}
35 |
27 | {data.results.map((i, index) => (
28 |
31 |
32 |
33 | Explore inscriptions from block #{bid} →
34 |
35 |
36 |
6 |
7 |
19 |
20 |
21 | );
22 | };
23 |
24 | export default Loading;
25 |
26 | // import { Loader, Loader2 } from "lucide-react";
27 |
28 | // const Loading = () => {
29 | // return (
30 | //
31 | //
38 | // );
39 | // };
40 |
41 | // export default Loading;
42 |
--------------------------------------------------------------------------------
/app/(explorer)/inscription/[iid]/page.tsx:
--------------------------------------------------------------------------------
1 | import InscriptionDetails from "../../../../components/inscriptions/InscriptionDetails";
2 | import { API_URL } from "../../../../lib/constants";
3 | import { InscriptionResponse } from "../../../../lib/types";
4 |
5 | export async function generateMetadata({
6 | params,
7 | }: {
8 | params: { iid: string };
9 | }) {
10 | const inscription = await getInscription(params.iid);
11 | const titleAbsolute = `Inscription #${inscription.number} | Hiro Ordinals Explorer`;
12 |
13 | return {
14 | title: { absolute: titleAbsolute },
15 | twitter: {
16 | card: "summary_large_image",
17 | creator: "@hirosystems",
18 | title: titleAbsolute,
19 | images: [
20 | `https://ordinals-ogimage.vercel.app/api/ogimage/${params.iid}?h=600`,
21 | ],
22 | },
23 | openGraph: {
24 | title: titleAbsolute,
25 | images: [
26 | {
27 | url: `https://ordinals-ogimage.vercel.app/api/ogimage/${params.iid}`,
28 | width: 1200,
29 | height: 630,
30 | },
31 | ],
32 | },
33 | };
34 | }
35 |
36 | const InscriptionById = ({ params }: { params: { iid: string } }) => {
37 | return (
38 |
37 | {previews.slice(0, 12).map((i, index) => (
38 |
41 | {/* todo: re-add figma link to full feed */}
42 | {/*
43 | More
44 |
*/}
45 |
46 | );
47 | };
48 |
49 | export default GalleryPreview;
50 |
--------------------------------------------------------------------------------
/components/icons/IconEye.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 |
3 | const IconEye = (params: { className?: string; style?: CSSProperties }) => {
4 | return (
5 |
22 | );
23 | };
24 |
25 | export default IconEye;
26 |
--------------------------------------------------------------------------------
/components/inscriptions/InscriptionRender.tsx:
--------------------------------------------------------------------------------
1 | import { InscriptionResponse } from "../../lib/types";
2 | import Iframe from "./Iframe";
3 | import InscriptionRenderImage from "./InscriptionRenderImage";
4 | import InscriptionRenderJson, {
5 | WithContentJson,
6 | } from "./InscriptionRenderJson";
7 | import InscriptionRenderText from "./InscriptionRenderText";
8 |
9 | const InscriptionRender = (props: {
10 | inscription: InscriptionResponse;
11 | className?: string;
12 | }) => {
13 | if (props.inscription.content_type.startsWith("image/")) {
14 | return This page is under construction 🚧
27 |
28 |
34 |
40 |
44 | 35 | Number of Ordinal Inscriptions 36 |
37 | {/* todo: enable touch on charts (currently not possible to scroll or zoom while touching chart area) */} 38 |41 | The numbers shown in these charts are not up-to-date currently. 42 |
43 |
47 |
61 | );
62 | };
63 |
64 | export default Charts;
65 |
--------------------------------------------------------------------------------
/components/RarityTag.tsx:
--------------------------------------------------------------------------------
1 | import IconEye from "./icons/IconEye";
2 | import IconFlame from "./icons/IconFlame";
3 | import IconSparkle from "./icons/IconSparkle";
4 | import IconUnicorn from "./icons/IconUnicorn";
5 |
6 | const satRarityMap = {
7 | common: [1, "bg-neutral-0"],
8 | uncommon: [2, "bg-neutral-0"],
9 | rare: [3, "bg-gold", IconSparkle],
10 | epic: [4, "bg-pink", IconFlame],
11 | legendary: [5, "bg-mint", IconEye],
12 | mythic: [6, "bg-sky-200", IconUnicorn],
13 | } as Record<
14 | string,
15 | [number, string] | [number, string, React.FC<{ className?: string }>]
16 | >;
17 |
18 | const RarityTag = (props: { rarity: string }) => {
19 | const [dots, bgColor, Icon] = satRarityMap[props.rarity];
20 | // todo: maybe add tooltip with all descriptions, or current description, or link to more information
21 | return (
22 | Number of Inscriptions by Block Height
48 |49 | The number of new inscribed sats per block by block height 50 |
51 | 52 |Total Number Inscriptions over Time
53 |54 | The cumulative number of inscribed sats by block height 55 |
56 | 60 |
23 | {Icon && (
24 |
37 | );
38 | };
39 |
40 | const RarityDots = ({ dots }: { dots: number }) => {
41 | return (
42 |
27 |
29 | )}
30 |
31 |
36 |
32 | {props.rarity}
33 |
35 |
43 | {Array.from({ length: dots }, (_, i) => (
44 |
45 | ))}
46 | {Array.from({ length: 6 - dots }, (_, i) => (
47 |
51 | ))}
52 |
53 | );
54 | };
55 |
56 | export default RarityTag;
57 |
--------------------------------------------------------------------------------
/components/inscriptions/InscriptionCard.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import Link from "next/link";
3 | import { cn } from "../../lib/utils";
4 |
5 | import { InscriptionResponse } from "../../lib/types";
6 | import InscriptionRender from "./InscriptionRender";
7 |
8 | const InscriptionCard = ({
9 | inscription,
10 | light = false,
11 | }: {
12 | inscription?: InscriptionResponse;
13 | light?: boolean;
14 | }) => {
15 | if (!inscription?.id)
16 | return (
17 | // make the grid take up the maximal space, even when a grid item is empty
18 | // todo: double-check skeleton styles are the same as the real ones
19 |
20 |
21 |
31 | );
32 |
33 | return (
34 |
38 |
27 | {/* placeholder */}
28 | #123
29 |
30 |
39 |
44 | 404
;
21 | if (!data) return
26 |
52 | );
53 | };
54 |
55 | export default BlockDetails;
56 |
--------------------------------------------------------------------------------
/components/Thumbnail.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 |
3 | import { cn } from "../lib/utils";
4 | import IconAudio from "./icons/IconAudio";
5 | import IconFile from "./icons/IconFile";
6 | import IconImage from "./icons/IconImage";
7 | import IconText from "./icons/IconText";
8 | import IconVideo from "./icons/IconVideo";
9 | import Iframe from "./inscriptions/Iframe";
10 |
11 | // todo: add more types
12 | const safeTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
13 |
14 | export const ThumbnailIcon = ({
15 | inscription,
16 | showImage = true,
17 | className,
18 | style,
19 | }: {
20 | inscription: { id: string; content_type: string };
21 | showImage?: boolean;
22 | className?: string;
23 | style?: CSSProperties;
24 | }) => {
25 | const type = inscription.content_type.toLowerCase();
26 |
27 | if (type.startsWith("audio/"))
28 | return Block #{params.bid}
27 | {data.results.length ? ( 28 | <> 29 |30 | Block Hash: {data.results[0].genesis_block_hash} 31 |
32 |33 | Inscriptions ({data.total}) 34 |
35 | 36 | ) : ( 37 |No inscriptions from transactions in this block
38 | )} 39 | 40 |
41 | {data.results.map((i, index) => (
42 |
45 |
46 |
47 |
48 | Explore inscriptions from block #{params.bid} →
49 |
50 |
51 |
65 |
71 | );
72 | };
73 |
74 | export default Thumbnail;
75 |
--------------------------------------------------------------------------------
/components/TextFilter.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronDown } from "lucide-react";
2 | import { useState } from "react";
3 |
4 | import { cn } from "../lib/utils";
5 | import {
6 | Collapsible,
7 | CollapsibleContent,
8 | CollapsibleTrigger,
9 | } from "./Collapsible";
10 |
11 | const TextFilter = ({
12 | name,
13 | onApply,
14 | text = "",
15 | placeholder,
16 | defaultOpen = false,
17 | className,
18 | }: {
19 | name: string;
20 | onApply: (text: string) => void;
21 | text?: string;
22 | placeholder?: string;
23 | defaultOpen?: boolean;
24 | className?: string;
25 | }) => {
26 | const [currentText, setCurrentText] = useState(text);
27 | const isAppliable = text !== currentText;
28 |
29 | return (
30 |
31 |
32 |
33 |
38 |
39 |
67 |
68 |
69 |
70 | );
71 | };
72 |
73 | export default TextFilter;
74 |
--------------------------------------------------------------------------------
/components/AddressDetails.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import useSWR from "swr";
4 |
5 | import { API_URL } from "../lib/constants";
6 | import { fetcher } from "../lib/utils";
7 | import { InscriptionResponse, ListResponse } from "../lib/types";
8 | import Ellipsis from "./Ellipsis";
9 | import InscriptionCard from "./inscriptions/InscriptionCard";
10 | import Loading from "./Loading";
11 | import Brc20BalancesTable from "./Brc20BalancesTable";
12 | import { TooltipProvider } from "./Tooltip";
13 | import CtaLink from "./CtaLink";
14 |
15 | const AddressDetails = (params: { aid: string }) => {
16 | const { data, error, isLoading } = useSWR{name}
34 | {/* todo: better/thinner ChevronDown icon alternative */}
35 | 404
;
24 | if (!data) return
29 |
30 | Address{" "}
31 |
32 |
35 | {data.results.length ? (
36 |
61 | );
62 | };
63 |
64 | export default AddressDetails;
65 |
--------------------------------------------------------------------------------
/components/Filter.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronDown, HelpCircle } from "lucide-react";
2 | import { cn } from "../lib/utils";
3 | import {
4 | Collapsible,
5 | CollapsibleContent,
6 | CollapsibleTrigger,
7 | } from "./Collapsible";
8 | import {
9 | Tooltip,
10 | TooltipContent,
11 | TooltipProvider,
12 | TooltipTrigger,
13 | } from "./Tooltip";
14 |
15 | const Filter = ({
16 | name,
17 | options,
18 | onClick,
19 | selected,
20 | defaultOpen = false,
21 | className,
22 | }: {
23 | name: string;
24 | options: string[] | string[][];
25 | onClick: (v: string) => void;
26 | selected: Set
30 | Address{" "}
31 |
32 |
35 | {data.results.length ? (
36 | Inscriptions ({data.total})
37 | ) : ( 38 |No inscriptions currently owned by this address
39 | // todo: maybe add ownership history of address? 40 | )} 41 |
42 | {data.results.map((i, index) => (
43 |
46 |
47 | {data.total > 8 && (
48 |
49 |
50 | Explore more from
52 |
53 | )}
54 |
55 |
56 |
57 |
59 |
60 |
32 |
33 |
34 |
38 |
39 |
69 |
70 |
71 | );
72 | };
73 |
74 | export default Filter;
75 |
--------------------------------------------------------------------------------
/lib/types.ts:
--------------------------------------------------------------------------------
1 | export type SatResponse = {
2 | coinbase_height: number;
3 | cycle: number;
4 | decimal: string;
5 | degree: string;
6 | inscription_id?: string;
7 | epoch: number;
8 | name: string;
9 | offset: number;
10 | percentile: string;
11 | period: number;
12 | rarity: string;
13 | };
14 |
15 | export type InscriptionResponse = {
16 | id: string;
17 | number: number;
18 | address: string;
19 | genesis_address: string;
20 | genesis_block_height: number;
21 | genesis_block_hash: string;
22 | genesis_tx_id: string;
23 | genesis_fee: string;
24 | genesis_timestamp: number;
25 | tx_id: string;
26 | location: string;
27 | output: string;
28 | offset: string;
29 | sat_ordinal: string;
30 | sat_rarity: string;
31 | sat_coinbase_height: number;
32 | mime_type: string;
33 | content_type: string;
34 | content_length: number;
35 | timestamp: number;
36 | };
37 |
38 | export type ListResponse{name}
35 |
40 | {options.map((v, i) => {
41 | const [value, label] = typeof v === "string" ? [v, null] : v;
42 | return (
43 |
68 |
44 |
54 | {label && (
55 |
56 |
57 |
58 |
60 | {label}
61 |
62 |
63 | )}
64 |
65 | );
66 | })}
67 | Error loading inscription content. {error?.message}
;
21 | if (!data || isLoading) return <>;
22 |
23 | return pipe(
24 | data,
25 | tryCatchK(jsonParseLoose),
26 | match(
27 | () =>
49 |
67 | );
68 | };
69 |
70 | export default InscriptionRenderText;
71 |
72 | export function contentLengthClassName(contentLength: number) {
73 | if (contentLength < 10) return "text-[1.375em] text-center self-center";
74 | if (contentLength < 50) return "text-[20px] text-center self-center";
75 | return "text-sm tracking-tight";
76 | }
77 |
78 | function jsonParseLoose(jsonLike: string) {
79 | // remove trailing comma before closing bracket
80 | jsonLike = jsonLike.replace(/,\s*(\})/g, "$1");
81 | return JSON.parse(jsonLike);
82 | }
83 |
--------------------------------------------------------------------------------
/components/AnimatedText.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 | import { easeCircleIn } from "d3";
3 |
4 | type AnimatedTextProps = {
5 | children: string | string[];
6 | };
7 |
8 | /*
9 | This component displays characters of a string 1 by 1,
10 | followed by a certain number of a random characters
11 | */
12 |
13 | const ALPHABET = "ABCDEFGHIJKLMNPKRSTUVWXYZ".split("");
14 | const ALLOWED_CHARS = "0123456789&Ӿ₿".split("").concat(ALPHABET);
15 | function getRandomChar() {
16 | return ALLOWED_CHARS[Math.floor(Math.random() * ALLOWED_CHARS.length)];
17 | }
18 | // to be displayed after the original string
19 | const NB_OF_EXTRA_RANDOM_CHARS = 6;
20 | // nb of times we display and random char before showing the expected on
21 | const NB_OF_ITERATIONS = 8;
22 |
23 | const AnimatedText = ({ children }: AnimatedTextProps) => {
24 | const originalText = useRef(
25 | ([] as string[]).concat(children).join("").split("")
26 | );
27 | const [text, setText] = useState55 | {props.text} 56 |
57 | {showGradient(props.inscription.content_length) && ( 58 | 65 | )} 66 |
33 |
34 |
35 |
40 |
41 |
74 |
75 |
76 | );
77 | };
78 |
79 | export default RangeFilter;
80 |
--------------------------------------------------------------------------------
/app/(misc)/ogimage/[iid]/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import useSWR from "swr";
3 |
4 | import InscriptionRender from "../../../../components/inscriptions/InscriptionRender";
5 | import { API_URL } from "../../../../lib/constants";
6 | import { InscriptionResponse } from "../../../../lib/types";
7 | import { fetcher } from "../../../../lib/utils";
8 | import { useSearchParams } from "next/navigation";
9 |
10 | const OgImagePage = ({ params }: { params: { iid: string } }) => {
11 | const { data, error, isLoading } = useSWR<
12 | | InscriptionResponse
13 | | {
14 | // todo: add more generic api error response type
15 | error: string;
16 | message: string;
17 | statusCode: number;
18 | }
19 | >(`${API_URL}/inscriptions/${params.iid}`, fetcher);
20 |
21 | const searchParams = useSearchParams();
22 | const width = searchParams.get("w") ?? 1200;
23 | const height = searchParams.get("h") ?? 630;
24 |
25 | if (!data || error || isLoading || "error" in data) {
26 | // todo: add loading state
27 | return {name}
36 | {/* todo: better/thinner ChevronDown icon alternative */}
37 |
42 |
73 |
43 | {/* todo: hidden labels for accessibility with name prefix */}
44 | setCurrentStart(e.target.value)}
51 | />
52 |
62 |
72 | to
53 | setCurrentEnd(e.target.value)} 60 | /> 61 |loading...
;
28 | }
29 |
30 | return (
31 |
38 |
72 | );
73 | };
74 |
75 | export default OgImagePage;
76 |
--------------------------------------------------------------------------------
/components/DateFilter.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronDown } from "lucide-react";
2 | import { useState } from "react";
3 |
4 | import { cn } from "../lib/utils";
5 | import {
6 | Collapsible,
7 | CollapsibleContent,
8 | CollapsibleTrigger,
9 | } from "./Collapsible";
10 |
11 | const DateFilter = ({
12 | name,
13 | onApply,
14 | start,
15 | end,
16 | defaultOpen = false,
17 | className,
18 | }: {
19 | name: string;
20 | onApply: (start: string | null, end: string | null) => void;
21 | start: string | null;
22 | end: string | null;
23 | defaultOpen?: boolean;
24 | className?: string;
25 | }) => {
26 | const [currentStart, setCurrentStart] = useState(start);
27 | const [currentEnd, setCurrentEnd] = useState(end);
28 |
29 | const isAppliable = start !== currentStart || end !== currentEnd;
30 |
31 | return (
32 |
39 |
65 |
40 |
45 |
46 |
64 | 47 | Inscription 48 |
49 | #{data.number} 50 | {/* todo: add table to be more correct */} 51 |
52 |
63 |
53 | Type
54 | Id
55 |
56 |
57 | {data.mime_type}
58 |
59 | {data.id.slice(0, 8)}…{data.id.slice(-8)}
60 |
61 |
62 |
66 | 
70 |
71 | 67 | ordinals.hiro.so 68 |
69 |
70 |
33 |
34 |
35 |
40 |
41 |
72 |
73 |
74 | );
75 | };
76 |
77 | export default DateFilter;
78 |
--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { GitHubLogoIcon } from "@radix-ui/react-icons";
4 | import { motion } from "framer-motion";
5 | import Link from "next/link";
6 | import IconTwitter from "./icons/IconTwitter";
7 |
8 | const Footer = () => {
9 | return (
10 | {name}
36 | {/* todo: better/thinner ChevronDown icon alternative */}
37 |
42 |
71 |
43 | {/* todo: hidden labels for accessibility with name prefix */}
44 | e.currentTarget.showPicker()} // todo: is this still accessible?
49 | onChange={(e) => setCurrentStart(e.target.value)}
50 | />
51 |
60 |
70 | to
52 | e.currentTarget.showPicker()} // todo: is this still accessible? 57 | onChange={(e) => setCurrentEnd(e.target.value)} 58 | /> 59 |
17 |
66 |
18 |
65 |
19 |
40 |
20 |
21 |
22 |
23 | {/* todo: link chainhooks */}
24 |
39 | 25 | This Ordinals Explorer is using the{" "} 26 | 27 | Hiro Ordinals API 28 | {" "} 29 | powered by{" "} 30 | 34 | Ordhook 35 | 36 | . 37 |
38 |
41 |
64 |
42 | {/* todo: links */}
43 | Patent Pledge{" "}
44 | —{" "}
45 | Terms & Privacy
46 |
47 |
48 |
49 | {/* todo: find filled twitter icon */}
50 |
63 | Halving Periods
33 | 34 |
35 | {data &&
36 | Object.entries(data.periods).map(([p, v]) => (
37 |
45 |
50 | ))}
51 |
57 |
63 |
64 | Period {p}
46 | 47 | {v} Inscribed sats 48 | 49 |Period 4
58 |59 | Estimated to start{" "} 60 | March 18, 2024 61 |
62 |
65 |
76 | 66 | Bitcoin is partitioned into periods in which the block reward is 67 | adjusted. These periods are referred to as "Halving 68 | Periods". Every 210,000 blocks the block reward is halved. 69 |
70 |71 | Currently, the reward per block is 6.25 BTC. This means 72 | 62,500,000,000 satoshis are added to the total supply of Bitcoin, 73 | for every block that is mined to the canonical chain. 74 |
75 |
13 | {/* todo: wrap in motion */}
14 |
25 |
26 | {/* Gallery Section */}
27 |
16 |
24 |
28 |
40 |
41 | 29 | Latest Inscriptions 30 |
31 | 32 |
35 |
36 | Explore all, sort, and filter →
37 |
38 |
39 |
42 |
43 |
44 |
45 | 43 |
46 |
90 |
47 |
72 |
48 |
49 | #8030
50 |
51 |
52 | Looking to make an inscription?
53 |54 | Download{" "} 55 | 60 | Leather 61 | {" "} 62 | and try{" "} 63 | 68 | Gamma.io 69 | 70 |
71 |
73 |
89 |
74 | 
75 |
76 |
75 | What are Ordinals?
77 |78 | Ordinal Inscriptions, similar to NFTs, are digital assets inscribed 79 | on a satoshi, the lowest denomination of a Bitcoin (BTC).{" "} 80 | 85 | Learn more. 86 | 87 |
88 |
17 | {children}
18 |
19 |
111 |
114 |
115 |
119 |
120 |
121 |
122 | );
123 | }
124 |
125 | export default SatsGrid;
126 |
--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
8 | export function periodIdToBlockHeight(periodId: number): number {
9 | return periodId * 210_000;
10 | }
11 |
12 | export function blockHeightToPeriodId(blockHeight: number): number {
13 | return Math.floor(blockHeight / 210_000);
14 | }
15 |
16 | export function blockHeightToMinedSats(blockHeight: number): bigint {
17 | const period = blockHeightToPeriodId(blockHeight);
18 |
19 | let reward = 50n * 100_000_000n;
20 | let sum = 0n;
21 |
22 | for (let c = 0; c < period; c++, reward /= 2n) {
23 | sum += reward * 210_000n;
24 | }
25 |
26 | const remaining = BigInt(blockHeight - periodIdToBlockHeight(period));
27 | return sum + remaining * reward;
28 | }
29 |
30 | export function blockHeightToRewardSats(blockHeight: number) {
31 | return (
32 | (210_000n * 100_000_000n) / 2n ** BigInt(blockHeightToPeriodId(blockHeight))
33 | );
34 | }
35 |
36 | export function scrollIntoView(
37 | element: HTMLElement | SVGElement | null,
38 | offset: number = 0
39 | ) {
40 | if (!element) return;
41 | const y = element.getBoundingClientRect().top + window.pageYOffset + offset;
42 | window.scrollTo({ top: y, behavior: "smooth" });
43 | }
44 |
45 | // https://swr.vercel.app/docs/getting-started
46 | export const fetcher = (...args: any[]) => {
47 | // if first arg is array, consider the second arg as options
48 | if (Array.isArray(args[0]))
49 | return fetch(args[0][0], args[0][1]).then((res) => res.json());
50 | // @ts-ignore
51 | return fetch(...args).then((res) => res.json());
52 | };
53 |
54 | export const textFetcher = (...args: any[]) => {
55 | // if first arg is array, consider the second arg as options
56 | if (Array.isArray(args[0]))
57 | return fetch(args[0][0], args[0][1]).then((res) => res.text());
58 | // @ts-ignore
59 | return fetch(...args).then((res) => res.text());
60 | };
61 |
62 | // helper for textual inscription previews/renders
63 | export function getFontSize(contentLength: number) {
64 | if (contentLength < 10) return 22;
65 | if (contentLength < 50) return 20;
66 | return 14;
67 | }
68 |
69 | export function formatDateTime(timestamp: number) {
70 | return new Intl.DateTimeFormat("default", {
71 | dateStyle: "long",
72 | timeStyle: "medium",
73 | }).format(new Date(timestamp));
74 | }
75 |
76 | export function formatDate(timestamp: number) {
77 | return new Intl.DateTimeFormat("default", {
78 | dateStyle: "long",
79 | }).format(new Date(timestamp));
80 | }
81 |
82 | const suffixes = {
83 | thousand: "K",
84 | million: "M",
85 | billion: "B",
86 | };
87 |
88 | function getSuffixAndDivisor(number: number) {
89 | if (number >= 1e9) return { suffix: suffixes.billion, divisor: 1e9 };
90 | if (number >= 1e6) return { suffix: suffixes.million, divisor: 1e6 };
91 | if (number >= 1e3) return { suffix: suffixes.thousand, divisor: 1e3 };
92 | return { suffix: "", divisor: 1 };
93 | }
94 |
95 | export function humanReadableCount(number: number, precision: number): string {
96 | const { suffix, divisor } = getSuffixAndDivisor(Math.abs(number));
97 | let value = (number / divisor).toFixed(precision);
98 | value = parseFloat(value).toString(); // Remove trailing zeros
99 | return Number(value) * divisor === number
100 | ? `${value}${suffix}`
101 | : `~${value}${suffix}`;
102 | }
103 |
104 | export function truncateAmount(num: string, maxDecimals = 2) {
105 | const [whole, decimals] = num.split(".");
106 |
107 | if (decimals && !decimals.replace(/0/g, "")) return whole; // return only `whole` if `decimals` is all zeroes
108 |
109 | if (!decimals || decimals.length <= maxDecimals) return num;
110 | return `${whole}.${decimals.substring(0, maxDecimals)}`;
111 | }
112 |
--------------------------------------------------------------------------------
/components/Brc20Homepage.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import Brc20TokensTable, { Brc20EarliestTokensTable } from "./Brc20TokensTable";
3 |
4 | const Brc20Homepage = () => {
5 | return (
6 | <>
7 | {/* todo: stats? */}
8 | {/*
9 |
*/}
13 |
14 | x
10 | y
11 | z
12 |
15 |
46 |
47 | {/* todo: add balance lookup */}
48 | {/* What is BRC-20?
16 |17 | BRC-20 is a new token standard ( 18 | 23 | and experiment by @domodata 24 | 25 | ) on the Ordinals and the Bitcoin network. It allows users to create, 26 | mint, and transfer fungibe tokens — similar to ERC-20 on 27 | Ethereum. The{" "} 28 | 33 | protocol 34 | {" "} 35 | is built on top of Ordinals and uses the JSON content of inscriptions 36 | to store interaction information. 37 |
38 | 43 | Read more 44 | 45 |
49 |
*/}
69 |
70 | {/* todo: border-b-0 is an ugly fix */}
71 |
50 |
68 | BRC-20 Balance Lookup
51 |
52 |
67 |
53 |
59 |
63 |
66 |
60 |
62 |
72 |
81 |
82 |
73 |
78 |
79 | Earliest BRC-20 Tokens
74 |75 | Displaying the first deployed BRC-20 tokens 76 |
77 |
83 |
92 |
93 | );
94 | };
95 |
96 | export default Brc20Homepage;
97 |
--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AnimatePresence, motion } from "framer-motion";
4 | import { ArrowUpRight } from "lucide-react";
5 | import Link from "next/link";
6 | import { usePathname } from "next/navigation";
7 | import SearchBar from "./SearchBar";
8 |
9 | const Header = ({ children }: { children?: React.ReactNode }) => {
10 | const pathname = usePathname();
11 |
12 | return (
13 |
84 |
89 |
90 | Latest Active BRC-20 Tokens
85 |86 | Displaying the most recently used BRC-20 tokens 87 |
88 |
16 |
17 |
35 |
39 | Inscriptions
40 |
41 |
45 | BRC-20
46 |
47 | {/* todo: re-enable different explore modes */}
48 | {/*
49 |
50 | Explore
51 |
52 |
53 |
57 | All inscriptions
58 |
59 |
63 | By halving period
64 |
65 |
66 | */}
67 | {/* todo: re-enable stats nav */}
68 | {/*
69 |
70 |
75 | Stats
76 |
77 |
78 |
79 | Under Construction 🚧
80 |
81 | */}
82 |
87 | hiro.so
88 |
91 | {process.env.NODE_ENV !== "production" && (
92 | // breakpoint debugging during development
93 |
94 | xs
95 | sm
96 | md
97 | lg
98 | xl
99 |
100 | )}
101 |
20 | {children}
21 |
22 |
121 | {renderEmpty?.() ?? "No results"}
122 |
123 | );
124 | }
125 |
126 | // todo: use number of previous results as limit value, so when results only show few elements the loading skeleton doesn't interfere / flash around
127 | const items = data?.results ?? Array(limit).fill(null); // skeleton values
128 |
129 | return (
130 | <>
131 |
132 | {items.map((i, index) => (
133 |
136 | {children}
137 |
138 | );
139 | };
140 |
141 | export default GalleryFull;
142 |
--------------------------------------------------------------------------------
/components/SatDetails.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import useSWR from "swr";
4 | import { API_URL } from "../lib/constants";
5 | import { InscriptionResponse, ListResponse, SatResponse } from "../lib/types";
6 | import { fetcher } from "../lib/utils";
7 | import Loading from "./Loading";
8 | import RarityTag from "./RarityTag";
9 | import WithInscription from "./WithInscription";
10 | import InscriptionCard from "./inscriptions/InscriptionCard";
11 |
12 | const Inscription = ({ id }: { id: string }) =>
13 | WithInscription(id, InscriptionCard);
14 |
15 | const SatDetails = ({ sid }: { sid: string }) => {
16 | const { data: satData, error: satError } = useSWR404
;
29 | if (satError || inscriptionError)
30 | return Something went wrong ʕ•̠͡•ʔ;
31 | if (!satData || !inscriptionData) return
35 |
60 |
61 |
118 |
119 | );
120 | };
121 |
122 | export default SatDetails;
123 |
--------------------------------------------------------------------------------
/components/LineChart.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | // todo: remove this no-check!
3 |
4 | import * as d3 from "d3";
5 |
6 | // Based on https://observablehq.com/@d3/line-with-tooltip
7 | // Copyright 2021 Observable, Inc.
8 | // Released under the ISC license.
9 | // https://observablehq.com/@d3/line-with-tooltip
10 | export function addLineChart(
11 | element,
12 | data,
13 | {
14 | x = ([x]) => x, // given d in data, returns the (temporal) x-value
15 | y = ([, y]) => y, // given d in data, returns the (quantitative) y-value
16 | title, // given d in data, returns the title text
17 | defined, // for gaps in data
18 | curve = d3.curveLinear, // method of interpolation between points
19 | marginTop = 20, // top margin, in pixels
20 | marginRight = 30, // right margin, in pixels
21 | marginBottom = 30, // bottom margin, in pixels
22 | marginLeft = 50, // left margin, in pixels
23 | width = 640, // outer width, in pixels
24 | height = 360, // outer height, in pixels
25 | xType = d3.scaleLinear, // type of x-scale
26 | xDomain, // [xmin, xmax]
27 | xRange = [marginLeft, width - marginRight], // [left, right]
28 | yType = d3.scaleLinear, // type of y-scale
29 | yDomain, // [ymin, ymax]
30 | yRange = [height - marginBottom, marginTop], // [bottom, top]
31 | color = "currentColor", // stroke color of line
32 | strokeWidth = 1.5, // stroke width of line, in pixels
33 | strokeLinejoin = "round", // stroke line join of line
34 | strokeLinecap = "round", // stroke line cap of line
35 | yFormat, // a format specifier string for the y-axis
36 | yLabel, // a label for the y-axis
37 | fontFamily,
38 | } = {}
39 | ) {
40 | const container = d3.select(element);
41 |
42 | // Compute values.
43 | const X = d3.map(data, x);
44 | const Y = d3.map(data, y);
45 | const O = d3.map(data, (d) => d);
46 | const I = d3.map(data, (_, i) => i);
47 |
48 | // Compute which data points are considered defined.
49 | if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]);
50 | const D = d3.map(data, defined);
51 |
52 | // Compute default domains.
53 | if (xDomain === undefined) xDomain = d3.extent(X);
54 | if (yDomain === undefined) yDomain = [0, d3.max(Y)];
55 |
56 | // Construct scales and axes.
57 | const xScale = xType(xDomain, xRange);
58 | const yScale = yType(yDomain, yRange);
59 | const xAxis = d3
60 | .axisBottom(xScale)
61 | .ticks(width / 80)
62 | .tickSizeOuter(0);
63 | const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat);
64 |
65 | // Compute titles.
66 | if (title === undefined) {
67 | const formatDate = xScale.tickFormat();
68 | const formatValue = yScale.tickFormat();
69 | title = (i) => `${formatDate(X[i])}\n${formatValue(Y[i])}`;
70 | } else {
71 | const O = d3.map(data, (d) => d);
72 | const T = title;
73 | title = (i) => T(O[i], i, data);
74 | }
75 |
76 | // Construct a line generator.
77 | const line = d3
78 | .line()
79 | .defined((i) => D[i])
80 | .curve(curve)
81 | .x((i) => xScale(X[i]))
82 | .y((i) => yScale(Y[i]));
83 |
84 | const svg = container
85 | .append("svg")
86 | .attr("viewBox", [0, 0, width, height])
87 | .attr("preserveAspectRatio", "xMinYMin meet")
88 | .style("-webkit-tap-highlight-color", "transparent")
89 | .on("pointerenter pointermove", pointermoved)
90 | .on("pointerleave", pointerleft)
91 | .on("touchstart", (event) => event.preventDefault());
92 |
93 | svg
94 | .append("g")
95 | .attr("transform", `translate(0,${height - marginBottom})`)
96 | .call(xAxis)
97 | .selectAll("text")
98 | .attr("font-family", fontFamily);
99 |
100 | const yA = svg
101 | .append("g")
102 | .attr("transform", `translate(${marginLeft},0)`)
103 | .call(yAxis);
104 |
105 | yA.selectAll("text").attr("font-family", fontFamily);
106 |
107 | yA.call((g) => g.select(".domain").remove())
108 | .call((g) =>
109 | g
110 | .selectAll(".tick line")
111 | .clone()
112 | .attr("x2", width - marginLeft - marginRight)
113 | .attr("stroke-opacity", 0.1)
114 | )
115 | .call((g) =>
116 | g
117 | .append("text")
118 | .attr("x", -marginLeft)
119 | .attr("y", 10)
120 | .attr("fill", "currentColor")
121 | .attr("text-anchor", "start")
122 | .text(yLabel)
123 | );
124 |
125 | svg
126 | .append("path")
127 | .attr("fill", "none")
128 | .attr("stroke", color)
129 | .attr("stroke-width", strokeWidth)
130 | .attr("stroke-linejoin", strokeLinejoin)
131 | .attr("stroke-linecap", strokeLinecap)
132 | .attr("d", line(I));
133 |
134 | const tooltip = d3
135 | .select(element)
136 | .append("div")
137 | .style("display", "none")
138 | .style("position", "absolute")
139 | .style("pointer-events", "none")
140 | .classed("tip", true);
141 |
142 | function pointermoved(event) {
143 | const i = d3.bisectCenter(X, xScale.invert(d3.pointer(event)[0]));
144 |
145 | tooltip
146 | .style("display", null)
147 | .style("left", `${xScale(X[i])}px`)
148 | .style("top", `${yScale(Y[i]) - 24}px`)
149 | .html(() => `Block ${X[i]}, Inscriptions ${Y[i]}`);
150 | }
151 |
152 | function pointerleft() {
153 | tooltip.style("display", "none");
154 | svg.node().value = null;
155 | svg.dispatch("input", { bubbles: true });
156 | }
157 |
158 | return Object.assign(svg.node(), { value: null });
159 | }
160 |
--------------------------------------------------------------------------------
/components/Brc20Details.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import useSWR from "swr";
4 | import { Brc20TokenDetailsResponse } from "../lib/types";
5 | import { fetcher, formatDate, humanReadableCount } from "../lib/utils";
6 | import Brc20HoldersTable from "./Brc20HoldersTable";
7 | import Error from "./Error";
8 | import Loading from "./Loading";
9 | import {
10 | Tooltip,
11 | TooltipContent,
12 | TooltipProvider,
13 | TooltipTrigger,
14 | } from "./Tooltip";
15 | import TruncatingTooltip from "./TruncatingTooltip";
16 | import { API_BETA_URL } from "../lib/constants";
17 |
18 | const BrcDetails = (params: { ticker: string }) => {
19 | const { data, error, isLoading } = useSWRSat {sid}
36 | 37 |38 | Inscription{inscriptionData?.results.length > 1 && "s"} 39 |
40 | 41 | {/* todo: add pagination for sats with many inscriptions, or link to explore page */} 42 | {satData.inscription_id && inscriptionData?.results.length == 1 ? ( 43 |
44 |
46 | ) : (
47 |
48 | {inscriptionData?.results.map((inscription) => (
49 |
57 | )}
58 |
59 |
53 |
55 | ))}
56 | | 63 | Sat Rarity 64 | | 65 |
66 | |
68 |
| 72 | Name 73 | | 74 |{satData.name} | 75 |
| 78 | Coinbase Height 79 | | 80 |81 | {satData.coinbase_height} 82 | | 83 |
| 86 | Decimal 87 | | 88 |{satData.decimal} | 89 |
| 92 | Degree 93 | | 94 |{satData.degree} | 95 |
| 98 | Percentile 99 | | 100 | {/* todo: something looks wrong here */} 101 |{satData.percentile} | 102 |
| 105 | Cycle 106 | | 107 |{satData.cycle} | 108 |
| 111 | Offset 112 | | 113 |{satData.offset} | 114 |
404
;
26 | if (!data) return
35 |
137 |
36 |
134 |
135 |
37 |
87 |
38 |
45 | 39 | {decodeURIComponent(params.ticker)} 40 |
41 |
42 | BRC-20
43 |
44 |
46 | {/* todo: componetize progress, with classname for width */}
47 | {progress}% Minted
48 |
86 |
49 |
50 |
57 |
51 |
55 |
56 |
58 | {progress < 100 && (
59 | <>
60 |
61 |
62 | {humanReadableCount(
63 | Number(data.token.minted_supply),
64 | 1
65 | )}
66 |
67 |
68 | {data.token.minted_supply}
69 |
70 |
71 | /
72 |
73 | )}
74 |
75 |
76 |
77 | {humanReadableCount(Number(data.token.max_supply), 1)}
78 |
79 |
80 |
81 | {data.token.max_supply}
82 |
83 |
84 |
85 |
88 |
133 |
89 |
113 |
90 |
97 | deployment date
91 |
96 |
98 |
107 | {/* todo: add holders count & add tx count */}
108 | {/* limit per mint
99 |
100 | {data.token.mint_limit ? (
101 |
106 |
109 |
*/}
112 | deployment date
110 | {data.token.deploy_timestamp}
111 |
114 |
132 |
115 |
120 | max supply
116 |
117 |
119 |
121 |
126 | {/* todo: add holders */}
127 | {/* minted supply
122 |
123 |
125 |
128 |
*/}
131 | deployment date
129 | {data.token.deploy_timestamp}
130 | 51 | {/* {data.error}: {data.message} */} 52 | 53 | ); 54 | 55 | const isLastPage = (page + 1) * limit >= data.total; 56 | const isOnlyPage = page === 0 && isLastPage; 57 | 58 | return ( 59 |
60 |
157 | );
158 | };
159 |
160 | const Brc20BalanceRow = ({
161 | ticker,
162 | balance,
163 | transferrable,
164 | available,
165 | }: {
166 | ticker: string;
167 | balance: string;
168 | transferrable: string;
169 | available: string;
170 | }) => {
171 | return (
172 |
61 |
64 |
65 | BRC-20 Balances
62 | ({data.total}) 63 |
66 |
69 |
70 |
87 |
88 | | address | 72 |balance | 73 |
|---|
89 |
156 |
90 | {/* Page size selector */}
91 |
109 |
155 |
110 | {/* {page * limit + 1}-
111 | {isLastPage ? data.total : (page + 1) * limit} of {data.total} */}
112 |
113 | {/* Pagination */}
114 |
115 | {page > 0 ? (
116 | updatePage(-1)}
122 | title="Previous page"
123 | >
124 |
126 | ) : (
127 |
133 | )}
134 | {isLastPage ? (
135 |
141 | ) : (
142 | updatePage(+1)}
148 | title="Next page"
149 | >
150 |
152 | )}
153 |
154 | 53 | {/* {data.error}: {data.message} */} 54 | 55 | ); 56 | 57 | // const isLastPage = (page + 1) * limit >= data.total; 58 | const isLastPage = (page + 1) * limit >= 1000; // todo: remove this line when pagination is fixed 59 | const isOnlyPage = page === 0 && isLastPage; 60 | 61 | return ( 62 |
63 |
169 | );
170 | };
171 |
172 | const Brc20HolderRow = ({
173 | address,
174 | balance,
175 | }: {
176 | address: string;
177 | balance: string;
178 | }) => {
179 | return (
180 |
64 |
67 |
68 | Holders
65 | ({data.total}) 66 |
69 |
72 |
73 |
88 |
89 | {data.results.length > 0 ? (
90 | | address | 75 |balance | 76 |
|---|
91 |
161 | ) : (
162 |
92 | {/* Page size selector */}
93 |
114 |
160 |
115 | {/* {page * limit + 1}-
116 | {isLastPage ? data.total : (page + 1) * limit} of {data.total} */}
117 |
118 | {/* Pagination */}
119 |
120 | {page > 0 ? (
121 | updatePage(-1)}
127 | title="Previous page"
128 | >
129 |
131 | ) : (
132 |
138 | )}
139 | {isLastPage ? (
140 |
146 | ) : (
147 | updatePage(+1)}
153 | title="Next page"
154 | >
155 |
157 | )}
158 |
159 |
163 |
164 | No holders
165 |
166 |
167 | )}
168 |
73 | {isJsonViewEnabled ? (
74 |
123 | );
124 | };
125 |
126 | export default InscriptionRenderJson;
127 |
128 | function cleanJsonString(content: any) {
129 | const json = JSON.stringify(content, null, 1)
130 | .replace(/^[\{\}]/gm, "")
131 | .replace(/[\{\}]*,*$/gm, "")
132 | .replace(/\n\s*\n/gm, "\n");
133 |
134 | try {
135 | return json
136 | .replace(/(?
174 | e.preventDefault()} // prevent click through (e.g. when used in links)
77 | >
78 |
80 | ) : (
81 | <>
82 |
83 | {typeof props.children === "string" ? (
84 | {props.children}
85 | ) : (
86 | props.children
87 | )}
88 |
89 |
96 |
97 | )}
98 |
99 | {props.protocol && (
100 |
122 |
101 | {props.protocol}
102 |
103 | )}
104 |
121 | {json.op}
175 |{json.tick}
176 |{json.max}
177 | {json.lim && ( 178 |179 | {json.lim} 180 | lim 181 |
182 | )} 183 | {json.dec && ( 184 |185 | {json.dec} 186 | dec 187 |
188 | )} 189 | 190 | ); 191 | } 192 | 193 | if (json.op === "mint") { 194 | return ( 195 |
196 |
200 | );
201 | }
202 |
203 | if (json.op === "transfer") {
204 | return (
205 | {json.op}
197 |{json.tick}
198 |{json.amt}
199 |
206 |
216 | );
217 | }
218 |
219 | // todo: add better invalid/fallback view of content
220 | throw "Invalid BRC-20 content";
221 | }
222 |
--------------------------------------------------------------------------------
/components/Blocks.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, {
4 | useCallback,
5 | useEffect,
6 | useLayoutEffect,
7 | useRef,
8 | useState,
9 | } from "react";
10 | import * as d3 from "d3";
11 | // @ts-ignore
12 | import d3Tip from "d3-tip";
13 | import {
14 | Dialog,
15 | DialogContent,
16 | DialogDescription,
17 | DialogHeader,
18 | DialogTitle,
19 | } from "@/components/Dialog";
20 | import * as DialogPrimitive from "@radix-ui/react-dialog";
21 | import { X } from "lucide-react";
22 |
23 | import { scrollIntoView } from "../lib/utils";
24 | import SatsListWrapper from "./SatsListWrapper";
25 |
26 | const size = 17;
27 | const amount = 210_000;
28 |
29 | function Blocks({ blocks }: { blocks: [string, number][] }) {
30 | const [selectedBlock, setSelectedBlock] = useState{json.op}
207 |{json.tick}
208 |{json.amt}
209 | {json.fee && ( 210 |211 | {json.fee} 212 | * 213 |
214 | )} 215 |")[0] 50 | .replace("#", ""); 51 | setSelectedBlock(block ?? null); 52 | 53 | this.classList.add("selected"); 54 | selectedRef.current = this; 55 | }, 56 | [unselectSat] 57 | ); 58 | 59 | return ( 60 | <> 61 | {/*
62 |
68 |
*/}
69 |
70 |
81 |
82 | Legend
71 |
72 |
73 |
75 | Blocks without inscribed sats
74 |
76 |
77 |
80 | Blocks with inscribed sats
78 | {/* todo: tooltip with gradient number of inscriptions */}
79 | ${v} inscribed sat${v > 1 ? "s" : ""}` 213 | ); 214 | 215 | if (!firstRef.current) { 216 | firstRef.current = rect.node(); 217 | } 218 | 219 | last = { i, j }; // todo: this should be the last mined block, not the last block with inscriptions 220 | } 221 | 222 | // todo: add dark mode for react drawing below 223 | // draw a rect from last block to the end of the svg 224 | if (last && last.i < w - 1) { 225 | svg 226 | .append("rect") 227 | .attr("x", (last.i + 1) * size) 228 | .attr("y", last.j * size) 229 | .attr("height", size - 1) 230 | .attr("width", (w - last.i - 1) * size) 231 | .attr("rx", 2) 232 | .attr("ry", 2) 233 | .attr("fill", "white") 234 | .attr("fill-opacity", 0.7); 235 | } 236 | 237 | // draw a rect from the line after the last block to the end of the svg 238 | if (last && last.j < h - 1) { 239 | svg 240 | .append("rect") 241 | .attr("x", 0) 242 | .attr("y", (last.j + 1) * size) 243 | .attr("height", (h - last.j - 1) * size) 244 | .attr("width", w * size) 245 | .attr("rx", 2) 246 | .attr("ry", 2) 247 | .attr("fill", "white") 248 | .attr("fill-opacity", 0.7); 249 | } 250 | }, [blocks, width, w, h, selectSat, tip]); 251 | 252 | return ( 253 |
254 |
258 | );
259 | },
260 | (prev, next) => prev.blocks.length == next.blocks.length
261 | );
262 |
263 | export default Blocks;
264 |
--------------------------------------------------------------------------------
/components/TransferHistory.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
4 | import { motion } from "framer-motion";
5 | import Link from "next/link";
6 | import { usePathname } from "next/navigation";
7 | import { useState } from "react";
8 | import { useUpdate } from "react-use";
9 | import useSWR from "swr";
10 | import { API_URL } from "../lib/constants";
11 | import {
12 | InscriptionResponse,
13 | InscriptionTransferResponse,
14 | ListResponse,
15 | } from "../lib/types";
16 | import { cn, fetcher, formatDateTime } from "../lib/utils";
17 | import CopyButton from "./CopyButton";
18 | import {
19 | Select,
20 | SelectContent,
21 | SelectItem,
22 | SelectTrigger,
23 | SelectValue,
24 | } from "./Select";
25 | import {
26 | Tooltip,
27 | TooltipContent,
28 | TooltipProvider,
29 | TooltipTrigger,
30 | } from "./Tooltip";
31 | import { TimeAgo } from "./TimeAgo";
32 |
33 | const TransferHistory = (props: { inscription: InscriptionResponse }) => {
34 | const update = useUpdate();
35 |
36 | const [rowsPerPage, setRowsPerPage] = useState("10");
37 | const limit = parseInt(rowsPerPage);
38 |
39 | const pathname = usePathname();
40 | const url = new URL(window.location.href);
41 | const searchParams = new URLSearchParams(url.search);
42 |
43 | const page = parseInt(searchParams.get("p") ?? "0");
44 | const offset = page * limit;
45 |
46 | function updatePage(offset: number) {
47 | searchParams.set("p", `${page + offset}`);
48 | window.history.pushState({}, "", `${pathname}?${searchParams.toString()}`);
49 | update(); // force re-render
50 | }
51 |
52 | const params = new URLSearchParams({
53 | limit: rowsPerPage,
54 | offset: offset.toString(),
55 | });
56 | const { data, error, isLoading } = useSWR<
57 | | ListResponse
255 |
256 |
257 | 80 | {data.error}: {data.message} 81 | 82 | ); 83 | 84 | const isLastPage = (page + 1) * limit >= data.total; 85 | const isOnlyPage = page === 0 && isLastPage; 86 | 87 | return ( 88 |
Transfer History
95 |
96 |
213 |
97 |
98 |
99 |
128 |
129 | {/* Spacer */}
130 |
131 | | 101 | Date 102 | | 103 |104 | Transferred To 105 | | 106 |107 | TxId 108 | | 109 | {/* todo: add loading dot component */} 110 | {/* {isLoading && ( 111 | 112 |
|---|
132 | {/* Responsive legend */}
133 |
208 | {/* Responsive legend */}
209 |
134 |
135 | + Inscription genesis
136 |
137 |
138 |
139 | {/* Page size selector */}
140 |
161 |
207 |
162 | {page * limit + 1}-{isLastPage ? data.total : (page + 1) * limit}{" "}
163 | of {data.total}
164 |
165 | {/* Pagination */}
166 |
167 | {page > 0 ? (
168 | updatePage(-1)}
174 | title="Previous page"
175 | >
176 |
178 | ) : (
179 |
185 | )}
186 | {isLastPage ? (
187 |
193 | ) : (
194 | updatePage(+1)}
200 | title="Next page"
201 | >
202 |
204 | )}
205 |
206 |
210 | + Inscription genesis
211 |
212 |
285 |
290 |
291 | {transfer.tx_id}
292 |
293 |
294 |
295 | ↗
296 |