├── app
    ├── favicon.ico
    ├── components
    │   ├── solari
    │   │   ├── index.ts
    │   │   ├── Presets.ts
    │   │   ├── SolariBoard.tsx
    │   │   ├── FlapStack.tsx
    │   │   ├── FlapDigit.tsx
    │   │   ├── useDisplayLength.ts
    │   │   ├── FlapDisplay.tsx
    │   │   └── Flap.tsx
    │   ├── layout
    │   │   └── footer.tsx
    │   └── icons
    │   │   └── goose.tsx
    ├── assets
    │   └── fonts
    │   │   └── CashSansMono-Regular.woff2
    ├── layout.tsx
    ├── styles
    │   └── main.css
    └── page.tsx
├── next.config.js
├── next.config.ts
├── postcss.config.mjs
├── .gitignore
├── tsconfig.json
├── package.json
├── README.md
├── tailwind.config.ts
├── DISCLAIMER.md
├── .github
    └── workflows
    │   └── nextjs.yml
└── LICENSE


/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/block/bitcoin-treasury/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/app/components/solari/index.ts:
--------------------------------------------------------------------------------
1 | export { FlapDisplay } from './FlapDisplay';
2 | export { Presets } from './Presets';


--------------------------------------------------------------------------------
/app/assets/fonts/CashSansMono-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/block/bitcoin-treasury/HEAD/app/assets/fonts/CashSansMono-Regular.woff2


--------------------------------------------------------------------------------
/app/components/solari/Presets.ts:
--------------------------------------------------------------------------------
1 | export const Presets = {
2 |   NUM: " 0123456789",
3 |   ALPHANUM: " JU↑XSO5QYCENM4↓PIWL$BKZF93,HGA2167D8.VR0T",
4 | };
5 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   basePath: '',
4 |   assetPrefix: '/',
5 | };
6 | 
7 | export default nextConfig;


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   basePath: "",
5 |   assetPrefix: "/",
6 | };
7 | 
8 | export default nextConfig;
9 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 
43 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "baseUrl": ".",
22 |     "paths": {
23 |       "@/*": ["./app/*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bitcoin-solari",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "next dev",
 8 |     "build": "next build",
 9 |     "start": "next start",
10 |     "lint": "next lint"
11 |   },
12 |   "dependencies": {
13 |     "classnames": "^2.5.1",
14 |     "lodash": "^4.17.21",
15 |     "next": "^16.0.7",
16 |     "next-themes": "^0.4.3",
17 |     "prop-types": "^15.8.1",
18 |     "react": "^19.2.1",
19 |     "react-dom": "^19.2.1"
20 |   },
21 |   "devDependencies": {
22 |     "@types/lodash": "^4.17.16",
23 |     "@types/node": "^20",
24 |     "@types/react": "^19.2.7",
25 |     "@types/react-dom": "^19.2.3",
26 |     "@types/react-window": "^1.8.8",
27 |     "postcss": "^8",
28 |     "tailwindcss": "^3.4.1",
29 |     "typescript": "^5"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { ThemeProvider } from "next-themes";
 3 | import "./styles/main.css";
 4 | import Footer from "./components/layout/footer";
 5 | 
 6 | export const metadata: Metadata = {
 7 |   title: "Bitcoin Holdings",
 8 | };
 9 | 
10 | export default function RootLayout({
11 |   children,
12 | }: Readonly<{
13 |   children: React.ReactNode;
14 | }>) {
15 |   return (
16 |     <html lang="en" suppressHydrationWarning className="h-full">
17 |       <body
18 |         className={`h-full font-mono bg-black text-textStandard relative antialiased`}
19 |       >
20 |         <ThemeProvider attribute="data-theme">
21 |           <div className="h-full flex justify-center items-center">
22 |             <main className="h-full">{children}</main>
23 |           </div>
24 |           <Footer />
25 |         </ThemeProvider>
26 |       </body>
27 |     </html>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/app/components/layout/footer.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Goose } from "../icons/goose";
 3 | 
 4 | const Footer = () => {
 5 |   return (
 6 |     <footer className="w-full fixed bottom-0 border-t border-[#1e1e1e] text-white py-2 text-sm sm:text-base">
 7 |       <div className="flex justify-center items-center h-full">
 8 |         <div className="flex flex-rows">
 9 |           Made with{" "}
10 |           <a
11 |             href="https://block.github.io/goose/"
12 |             target="_blank"
13 |             className="flex flex-rows hover:underline"
14 |           >
15 |             <Goose className="mx-1" /> codename goose
16 |           </a>
17 |           <span className="mx-2 sm:mx-4">|</span>
18 |           <a
19 |             href="https://github.com/block/bitcoin-treasury/blob/main/DISCLAIMER.md"
20 |             target="_blank"
21 |             className="hover:underline"
22 |           >
23 |             Disclaimer
24 |           </a>
25 |         </div>
26 |       </div>
27 |     </footer>
28 |   );
29 | };
30 | 
31 | export default Footer;
32 | 


--------------------------------------------------------------------------------
/app/components/solari/SolariBoard.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { memo } from "react";
 4 | import { FlapDisplay, Presets } from "./";
 5 | 
 6 | interface BoardRow {
 7 |   value: string;
 8 |   chars?: string;
 9 |   length?: number;
10 |   hinge?: boolean;
11 |   color?: string; // New color property for each row
12 | }
13 | 
14 | interface SolariBoardProps {
15 |   rows: BoardRow[];
16 |   className?: string;
17 | }
18 | 
19 | // Memoize the individual FlapDisplay rows
20 | const MemoizedFlapDisplay = memo(FlapDisplay);
21 | 
22 | export const SolariBoard: React.FC<SolariBoardProps> = memo(
23 |   ({ rows, className }) => {
24 |     return (
25 |       <div className={`flex flex-col ${className} gap-1`}>
26 |         {rows.map((row, index) => (
27 |           <MemoizedFlapDisplay
28 |             key={`row-${index}`}
29 |             chars={row.chars || Presets.ALPHANUM}
30 |             length={row.length}
31 |             value={row.value}
32 |             hinge={row.hinge ?? true}
33 |             color={row.color} // Pass the color to FlapDisplay
34 |           />
35 |         ))}
36 |       </div>
37 |     );
38 |   }
39 | );
40 | 


--------------------------------------------------------------------------------
/app/components/solari/FlapStack.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect, useState } from 'react';
 4 | import { FlapDigit } from './FlapDigit';
 5 | 
 6 | interface CursorState {
 7 |   current: number;
 8 |   previous: number;
 9 |   target: number;
10 | }
11 | 
12 | interface FlapStackProps {
13 |   stack: string[];
14 |   value: string;
15 |   timing: number;
16 |   [key: string]: any; // For rest props
17 | }
18 | 
19 | // Set these three values as one state var
20 | // to avoid in-between render states
21 | const InitialCursor: CursorState = {
22 |   current: -1,
23 |   previous: -1,
24 |   target: 0,
25 | };
26 | 
27 | export const FlapStack = React.memo<FlapStackProps>(({ stack, value, timing, ...restProps }) => {
28 |   const [cursor, setCursor] = useState<CursorState>(InitialCursor);
29 | 
30 |   useEffect(() => {
31 |     setCursor(InitialCursor);
32 |   }, [stack]);
33 | 
34 |   useEffect(() => {
35 |     const target = Math.max(stack.indexOf(value), 0);
36 |     
37 |     const increment = (prevState: CursorState) => {
38 |       const { current } = prevState;
39 |       const previous = current;
40 |       const nextCurrent = current >= stack.length - 1 ? 0 : current + 1;
41 |       
42 |       return {
43 |         current: nextCurrent,
44 |         previous,
45 |         target,
46 |       };
47 |     };
48 | 
49 |     // Initial increment
50 |     setCursor(prevState => increment(prevState));
51 | 
52 |     const timer = setInterval(() => {
53 |       setCursor(prevState => {
54 |         if (prevState.current === target) {
55 |           clearInterval(timer);
56 |           return prevState;
57 |         }
58 |         return increment(prevState);
59 |       });
60 |     }, timing);
61 | 
62 |     return () => clearInterval(timer);
63 |   }, [stack, value, timing]);
64 | 
65 |   const { current, previous, target } = cursor;
66 |   return (
67 |     <FlapDigit
68 |       value={stack[current]}
69 |       prevValue={stack[previous]}
70 |       final={current === target}
71 |       {...restProps}
72 |     />
73 |   );
74 | });


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Block Bitcoin Treasury
 2 | 
 3 | A visualization of Block's Bitcoin treasury holdings.
 4 | 
 5 | ## Getting Started
 6 | 
 7 | This project is a **Next.js** application. Follow the instructions below to run the application locally.
 8 | 
 9 | ### Prerequisites
10 | 
11 | - [Node.js](https://nodejs.org/) (ensure you have version 16 or later)
12 | - npm (comes with Node.js) or yarn (optional package manager)
13 | 
14 | ### Installation
15 | 
16 | 1. Clone the repository if you haven't already:
17 | 
18 |    ```bash
19 |    git clone <repository-url>
20 |    cd bitcoin-treasury
21 |    ```
22 | 
23 | 2. Install dependencies:
24 |    ```bash
25 |    npm install
26 |    ```
27 |    Or, if you're using Yarn:
28 |    ```bash
29 |    yarn install
30 |    ```
31 | 
32 | ### Running the Development Server
33 | 
34 | To start the development server, run:
35 | 
36 | ```bash
37 | npm run dev
38 | ```
39 | 
40 | Or, for Yarn users:
41 | 
42 | ```bash
43 | yarn dev
44 | ```
45 | 
46 | This will start the Next.js development server on the default port (3000). Open your browser and visit:
47 | 
48 | ```
49 | http://localhost:3000
50 | ```
51 | 
52 | ### Building for Production
53 | 
54 | To build the application for production, run:
55 | 
56 | ```bash
57 | npm run build
58 | ```
59 | 
60 | Or, with Yarn:
61 | 
62 | ```bash
63 | yarn build
64 | ```
65 | 
66 | This will create an optimized production build of the app in the `.next` directory. To serve it, use:
67 | 
68 | ```bash
69 | npm start
70 | ```
71 | 
72 | Or:
73 | 
74 | ```bash
75 | yarn start
76 | ```
77 | 
78 | ### Available Scripts
79 | 
80 | - `npm run dev` - Starts the development server.
81 | - `npm run build` - Builds the app for production.
82 | - `npm start` - Runs the production server after building.
83 | 
84 | ### Stopping the Server
85 | 
86 | To stop either the development or production server, press `Ctrl+C` in the terminal where the server is running.
87 | 
88 | ## Pricing Endpoint
89 | 
90 | Our dashboard fetches BTC/USD price data via Block's public pricing endpoint: `https://pricing.bitcoin.block.xyz/current-price`. This price data is refreshed every 60 seconds and is comprised of a volume weighted average of price data from many cryptocurrency exchanges.
91 | 


--------------------------------------------------------------------------------
/app/components/solari/FlapDigit.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useMemo, useState } from "react";
 4 | import { Flap } from "./Flap";
 5 | 
 6 | interface FlapDigitProps {
 7 |   className?: string;
 8 |   css?: React.CSSProperties;
 9 |   value?: string;
10 |   prevValue?: string;
11 |   final?: boolean;
12 |   mode?: string | null;
13 |   [key: string]: any; // For rest props
14 | }
15 | 
16 | export const FlapDigit = React.memo<FlapDigitProps>(
17 |   ({
18 |     className,
19 |     css,
20 |     value = "",
21 |     prevValue = "",
22 |     final = false,
23 |     mode = null,
24 |     ...restProps
25 |   }) => {
26 |     // Add state to track mouse hover
27 |     const [isHovered, setIsHovered] = useState(false);
28 | 
29 |     // Memoize the container style
30 |     const containerStyle = useMemo(
31 |       () => ({
32 |         ...css,
33 |         boxShadow: "0 1px 2px rgba(0, 0, 0, 0.15)",
34 |       }),
35 |       [css]
36 |     );
37 | 
38 |     return (
39 |       <div
40 |         className={`text-[#e1e1e1] bg-[#1a1a1a] relative inline-block h-[1em] font-mono text-xl xs:text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl border border-black text-center w-[1.3ch] min-w-[1ch] rounded-sm ${
41 |           className || ""
42 |         }`}
43 |         style={containerStyle}
44 |         data-kind="digit"
45 |         data-mode={mode}
46 |         onMouseEnter={() => setIsHovered(true)}
47 |         onMouseLeave={() => setIsHovered(false)}
48 |       >
49 |         <Flap value={value} {...restProps}>
50 |           {value}
51 |         </Flap>
52 |         <Flap bottom value={prevValue} {...restProps}>
53 |           {prevValue}
54 |         </Flap>
55 |         <Flap
56 |           key={`top-${prevValue}`}
57 |           animated
58 |           final={final}
59 |           value={prevValue}
60 |           {...restProps}
61 |         >
62 |           {prevValue}
63 |         </Flap>
64 |         {final && (
65 |           <>
66 |             {/* <Flap
67 |               key={`bottom-${value}`}
68 |               bottom
69 |               animated
70 |               final
71 |               value={value}
72 |               isHovered={isHovered}
73 |               {...restProps}
74 |             >
75 |               {value}
76 |             </Flap> */}
77 |             <Flap
78 |               key={`bottom-${value}`}
79 |               bottom
80 |               half
81 |               animated
82 |               final
83 |               value={value}
84 |               isHovered={isHovered}
85 |               {...restProps}
86 |             >
87 |               {value}
88 |             </Flap>
89 |           </>
90 |         )}
91 |       </div>
92 |     );
93 |   }
94 | );
95 | 


--------------------------------------------------------------------------------
/app/components/solari/useDisplayLength.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useMemo } from "react";
 2 | import _ from "lodash";
 3 | 
 4 | const DIGIT_WIDTH = 1.7; // width in ch units
 5 | const GAP_WIDTH = 1; // gap in pixels
 6 | const MIN_LENGTH = 15;
 7 | 
 8 | // Memoized font size calculation
 9 | const getFontSize = (width: number): number => {
10 |   if (width < 480) return 30; // text-3xl (1.875rem * 16)
11 |   if (width < 640) return 36; // text-4xl (2.25rem * 16)
12 |   if (width < 768) return 48; // text-5xl (3rem * 16)
13 |   if (width < 1024) return 60; // text-6xl (3.75rem * 16)
14 |   return 72; // text-7xl (4.5rem * 16)
15 | };
16 | 
17 | // Calculate display length based on window width
18 | const calculateLength = (windowWidth: number): number => {
19 |   const fontSize = getFontSize(windowWidth);
20 | 
21 |   // Calculate how many digits can fit
22 |   const digitWidthPx = DIGIT_WIDTH * (fontSize * 0.5);
23 |   const totalGapWidth = GAP_WIDTH;
24 | 
25 |   // Calculate max digits that can fit
26 |   const maxDigits = Math.ceil(windowWidth / (digitWidthPx + totalGapWidth)) - 4;
27 | 
28 |   // Ensure we don't go below minimum length
29 |   return Math.max(maxDigits, MIN_LENGTH);
30 | };
31 | 
32 | export function useDisplayLength() {
33 |   // Initialize with minimum length
34 |   const [displayLength, setDisplayLength] = useState(MIN_LENGTH);
35 |   const [isClient, setIsClient] = useState(false);
36 | 
37 |   // Set isClient to true on mount
38 |   useEffect(() => {
39 |     setIsClient(true);
40 |   }, []);
41 | 
42 |   // Memoize the debounced update function
43 |   const debouncedUpdate = useMemo(
44 |     () =>
45 |       _.debounce((width: number) => {
46 |         const newLength = calculateLength(width);
47 |         setDisplayLength(newLength);
48 |       }, 100),
49 |     [] // Empty deps since this function never needs to change
50 |   );
51 | 
52 |   useEffect(() => {
53 |     if (!isClient) return;
54 | 
55 |     // Function to handle resize
56 |     const handleResize = () => {
57 |       const width = window.innerWidth;
58 |       const newLength = calculateLength(width);
59 |       setDisplayLength(newLength);
60 |     };
61 | 
62 |     // Initial calculation
63 |     handleResize();
64 | 
65 |     // Add event listener with debounced updates
66 |     window.addEventListener("resize", () => debouncedUpdate(window.innerWidth));
67 | 
68 |     // Cleanup
69 |     return () => {
70 |       window.removeEventListener("resize", () =>
71 |         debouncedUpdate(window.innerWidth)
72 |       );
73 |       debouncedUpdate.cancel();
74 |     };
75 |   }, [isClient, debouncedUpdate]); // Include isClient and debouncedUpdate in deps array
76 | 
77 |   return displayLength;
78 | }
79 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | import plugin from "tailwindcss/plugin";
 3 | 
 4 | export default {
 5 |   darkMode: ["class", '[data-theme="dark"]'],
 6 |   content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"],
 7 |   theme: {
 8 |     extend: {
 9 |       fontFamily: {
10 |         sans: ["Cash Sans", "sans-serif"],
11 |         mono: ["Cash Sans Mono", "monospace"],
12 |       },
13 |       colors: {
14 |         bgApp: "var(--background-app)",
15 |         bgSubtle: "var(--background-subtle)",
16 |         bgStandard: "var(--background-standard)",
17 |         bgProminent: "var(--background-prominent)",
18 | 
19 |         borderSubtle: "var(--border-subtle)",
20 |         borderStandard: "var(--border-standard)",
21 | 
22 |         textProminent: "var(--text-prominent)",
23 |         textStandard: "var(--text-standard)",
24 |         textSubtle: "var(--text-subtle)",
25 |         textPlaceholder: "var(--text-placeholder)",
26 | 
27 |         iconProminent: "var(--icon-prominent)",
28 |         iconStandard: "var(--icon-standard)",
29 |         iconSubtle: "var(--icon-subtle)",
30 |         iconExtraSubtle: "var(--icon-extra-subtle)",
31 |         slate: "var(--slate)",
32 |         blockTeal: "var(--block-teal)",
33 |         blockOrange: "var(--block-orange)",
34 |       },
35 |       keyframes: {
36 |         appearDown: {
37 |           "0%": { opacity: "0", transform: "translateY(-8px)" },
38 |           "100%": { opacity: "1", transform: "translateY(0px)" },
39 |         },
40 |         fadeIn: {
41 |           "0%": { opacity: "0" },
42 |           "100%": { opacity: "1" },
43 |         },
44 |         flapDownTop: {
45 |           from: { transform: "rotateX(0deg)" },
46 |           "50%, to": { transform: "rotateX(90deg)" },
47 |         },
48 |         flapDownBottom: {
49 |           "from, 50%": { transform: "rotateX(90deg)" },
50 |           "90%": { transform: "rotateX(20deg)" },
51 |           "80%, to": { transform: "rotateX(0deg)" },
52 |         },
53 |       },
54 |       animation: {
55 |         appearDown: "appearDown 250ms ease-in forwards",
56 |         fadeIn: "fadeIn 250ms ease-in forwards 1s",
57 |         flapDownTop: "flapDownTop 300ms ease-in forwards",
58 |         flapDownBottom: "flapDownBottom 300ms ease-out forwards",
59 |       },
60 |     },
61 |   },
62 |   plugins: [
63 |     plugin(function ({ addUtilities }) {
64 |       const newUtilities = {
65 |         ".clip-path-\\[polygon\\(0_50\\%\\,100\\%_50\\%\\,100\\%_0\\,0_0\\)\\]":
66 |           {
67 |             clipPath: "polygon(0 50%, 100% 50%, 100% 0, 0 0)",
68 |           },
69 |         ".clip-path-\\[polygon\\(0_100\\%\\,100\\%_100\\%\\,100\\%_50\\%\\,0_50\\%\\)\\]":
70 |           {
71 |             clipPath: "polygon(0 100%, 100% 100%, 100% 50%, 0 50%)",
72 |           },
73 |         ".rotate-x-50": {
74 |           transform: "rotateX(50deg)",
75 |         },
76 |         ".shadow-inner-top": {
77 |           boxShadow: "inset 0 -3px 5px -4px rgba(0, 0, 0, 0.2)",
78 |         },
79 |         ".shadow-inner-bottom": {
80 |           boxShadow: "inset 0 3px 5px -4px rgba(0, 0, 0, 0.2)",
81 |         },
82 |         ".shadow-outer-bottom": {
83 |           boxShadow: "0px 6px 6px 0px rgba(0, 0, 0, 0.8)",
84 |         },
85 |       };
86 |       addUtilities(newUtilities);
87 |     }),
88 |   ],
89 | } satisfies Config;
90 | 


--------------------------------------------------------------------------------
/DISCLAIMER.md:
--------------------------------------------------------------------------------
 1 | # Block Bitcoin Treasury Balance Dashboard Disclaimers
 2 | 
 3 | The Block Bitcoin Treasury Balance Dashboard (the “Dashboard”) is provided for informational purposes only. By accessing or using the Dashboard or its related materials, you (a “user”) acknowledge and agree to the following disclaimers:
 4 | 
 5 | ## General Disclaimer
 6 | 
 7 | The Dashboard and its related materials are provided “as-is” with no representations or warranties, express or implied.
 8 | 
 9 | The developers, including Block, Inc. its employees, agents and affiliates (collectively, the “the Company,” “we,” “our” or “us”) are not responsible for errors, omissions, or inaccuracies in the displayed data.
10 | 
11 | The Dashboard is provided solely for informational purposes and does not facilitate transactions or custody bitcoin.
12 | 
13 | The Dashboard’s BTC balance is intended to reflect a snapshot of the Company’s proprietary bitcoin balance only. It does not reflect the bitcoin balance(s) the Company holds on behalf of our customers as a custodian.
14 | 
15 | ## Data Accuracy and Reliability
16 | 
17 | The Dashboard’s BTC balance is subject to periodic updates by the Company (e.g. on a quarterly basis). These updates are intended to reflect the Company’s balance of proprietary bitcoin, as stated in the Company’s most recent quarterly earnings reports. The BTC balance is a snapshot and is not intended to accurately reflect the amount of BTC held by the Company on a real-time basis.
18 | 
19 | Bitcoin prices and values are sourced from third-party application programming interfaces (APIs), and the Dashboard does not guarantee their accuracy.
20 | 
21 | Prices and values may be delayed, incorrect, or incomplete. Users should verify data independently.
22 | 
23 | Prices and values may not reflect those used by the Company in other contexts. This includes, but is not limited to, the Company’s valuation of bitcoin for accounting purposes, and the Company’s pricing and valuation offered to customers that buy, sell or hold bitcoin via our Cash App service. Information regarding our Cash App service and its bitcoin pricing and valuation can be found in its terms of service and pricing information FAQ.
24 | 
25 | ## Not Financial Advice
26 | 
27 | The Dashboard and its related materials are for informational purposes only. Users or third parties should not construe any such information as legal, tax, investment, financial, accounting, or other advice.
28 | 
29 | Nothing contained in the Dashboard or its related materials constitutes a recommendation or endorsement by the Company to buy or sell bitcoin, cryptocurrencies, or other financial instruments.
30 | 
31 | ## Limitation of Liability; Assumption of Risk and Responsibility
32 | 
33 | The Company is not liable for any losses, damages, or issues resulting from the access or use of the Dashboard or its related materials by Users or third parties.
34 | 
35 | Users assume all risks associated with using the Dashboard, its related materials and its displayed data.
36 | 
37 | Users are responsible for ensuring their compliance with applicable law when accessing or using the Dashboard and its related materials, including applicable financial and tax regulations.
38 | 
39 | ## Open Source License
40 | 
41 | The Dashboard and its related materials are distributed under an open-source license Apache 2.0.
42 | 
43 | No guarantees of security, maintenance, or support are provided.
44 | 


--------------------------------------------------------------------------------
/.github/workflows/nextjs.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Next.js site to GitHub Pages
 2 | #
 3 | # To get started with Next.js see: https://nextjs.org/docs/getting-started
 4 | #
 5 | name: Deploy Next.js site to Pages
 6 | 
 7 | on:
 8 |   # Runs on pushes targeting the default branch
 9 |   push:
10 |     branches: ["main"]
11 | 
12 |   # Allows you to run this workflow manually from the Actions tab
13 |   workflow_dispatch:
14 | 
15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
16 | permissions:
17 |   contents: read
18 |   pages: write
19 |   id-token: write
20 | 
21 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
22 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
23 | concurrency:
24 |   group: "pages"
25 |   cancel-in-progress: false
26 | 
27 | jobs:
28 |   # Build job
29 |   build:
30 |     runs-on: ubuntu-latest
31 |     steps:
32 |       - name: Checkout
33 |         uses: actions/checkout@v4
34 |       - name: Detect package manager
35 |         id: detect-package-manager
36 |         run: |
37 |           if [ -f "${{ github.workspace }}/yarn.lock" ]; then
38 |             echo "manager=yarn" >> $GITHUB_OUTPUT
39 |             echo "command=install" >> $GITHUB_OUTPUT
40 |             echo "runner=yarn" >> $GITHUB_OUTPUT
41 |             exit 0
42 |           elif [ -f "${{ github.workspace }}/package.json" ]; then
43 |             echo "manager=npm" >> $GITHUB_OUTPUT
44 |             echo "command=ci" >> $GITHUB_OUTPUT
45 |             echo "runner=npx --no-install" >> $GITHUB_OUTPUT
46 |             exit 0
47 |           else
48 |             echo "Unable to determine package manager"
49 |             exit 1
50 |           fi
51 |       - name: Setup Node
52 |         uses: actions/setup-node@v4
53 |         with:
54 |           node-version: "20"
55 |           cache: ${{ steps.detect-package-manager.outputs.manager }}
56 |       - name: Setup Pages
57 |         uses: actions/configure-pages@v5
58 |         with:
59 |           # Automatically inject basePath in your Next.js configuration file and disable
60 |           # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
61 |           #
62 |           # You may remove this line if you want to manage the configuration yourself.
63 |           static_site_generator: next
64 |       - name: Restore cache
65 |         uses: actions/cache@v4
66 |         with:
67 |           path: |
68 |             .next/cache
69 |           # Generate a new cache whenever packages or source files change.
70 |           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
71 |           # If source files changed but packages didn't, rebuild from a prior cache.
72 |           restore-keys: |
73 |             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
74 |       - name: Install dependencies
75 |         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
76 |       - name: Build with Next.js
77 |         run: ${{ steps.detect-package-manager.outputs.runner }} next build
78 |       - name: Upload artifact
79 |         uses: actions/upload-pages-artifact@v3
80 |         with:
81 |           path: ./out
82 | 
83 |   # Deployment job
84 |   deploy:
85 |     environment:
86 |       name: github-pages
87 |       url: ${{ steps.deployment.outputs.page_url }}
88 |     runs-on: ubuntu-latest
89 |     needs: build
90 |     steps:
91 |       - name: Deploy to GitHub Pages
92 |         id: deployment
93 |         uses: actions/deploy-pages@v4
94 | 
95 | 


--------------------------------------------------------------------------------
/app/styles/main.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 |   :root {
  7 |     /* custom slate */
  8 |     --slate: #393838;
  9 | 
 10 |     /* block */
 11 |     --block-teal: #13bbaf;
 12 |     --block-orange: #ff4f00;
 13 | 
 14 |     /* start arcade colors */
 15 |     --constant-white: #ffffff;
 16 |     --constant-black: #000000;
 17 |     --grey-10: #101010;
 18 |     --grey-20: #1e1e1e;
 19 |     --grey-50: #666666;
 20 |     --grey-60: #959595;
 21 |     --grey-80: #cccccc;
 22 |     --grey-85: #dadada;
 23 |     --grey-90: #e8e8e8;
 24 |     --grey-95: #f0f0f0;
 25 |     --dark-grey-15: #1a1a1a;
 26 |     --dark-grey-25: #232323;
 27 |     --dark-grey-30: #2a2a2a;
 28 |     --dark-grey-40: #333333;
 29 |     --dark-grey-45: #595959;
 30 |     --dark-grey-60: #878787;
 31 |     --dark-grey-90: #e1e1e1;
 32 | 
 33 |     --background-app: var(--constant-white);
 34 |     --background-prominent: var(--grey-80);
 35 |     --background-standard: var(--grey-90);
 36 |     --background-subtle: var(--grey-95);
 37 | 
 38 |     --border-divider: var(--grey-90);
 39 |     --border-inverse: var(--constant-white);
 40 |     --border-prominent: var(--grey-10);
 41 |     --border-standard: var(--grey-60);
 42 |     --border-subtle: var(--grey-90);
 43 | 
 44 |     --icon-disabled: var(--grey-60);
 45 |     --icon-extra-subtle: var(--grey-60);
 46 |     --icon-inverse: var(--constant-white);
 47 |     --icon-prominent: var(--grey-10);
 48 |     --icon-standard: var(--grey-20);
 49 |     --icon-subtle: var(--grey-50);
 50 | 
 51 |     --text-placeholder: var(--grey-60);
 52 |     --text-prominent: var(--grey-10);
 53 |     --text-standard: var(--grey-20);
 54 |     --text-subtle: var(--grey-50);
 55 | 
 56 |     &.dark {
 57 |       --background-app: var(--constant-black);
 58 |       --background-prominent: var(--dark-grey-40);
 59 |       --background-standard: var(--dark-grey-25);
 60 |       --background-subtle: var(--dark-grey-15);
 61 | 
 62 |       --border-divider: var(--dark-grey-25);
 63 |       --border-inverse: var(--constant-black);
 64 |       --border-prominent: var(--constant-white);
 65 |       --border-standard: var(--dark-grey-45);
 66 |       --border-subtle: var(--dark-grey-25);
 67 | 
 68 |       --icon-disabled: var(--dark-grey-45);
 69 |       --icon-extra-subtle: var(--dark-grey-45);
 70 |       --icon-inverse: var(--constant-black);
 71 |       --icon-prominent: var(--constant-white);
 72 |       --icon-standard: var(--dark-grey-90);
 73 |       --icon-subtle: var(--dark-grey-60);
 74 | 
 75 |       --text-placeholder: var(--dark-grey-45);
 76 |       --text-prominent: var(--constant-white);
 77 |       --text-standard: var(--dark-grey-90);
 78 |       --text-subtle: var(--dark-grey-60);
 79 |     }
 80 |     /* end arcade colors */
 81 |   }
 82 | }
 83 | 
 84 | @font-face {
 85 |   font-family: "Cash Sans";
 86 |   src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
 87 |     format("woff2");
 88 |   font-weight: 400;
 89 |   font-style: normal;
 90 | }
 91 | 
 92 | @font-face {
 93 |   font-family: "Cash Sans Mono";
 94 |   src: url(../assets/fonts/CashSansMono-Regular.woff2) format("woff2");
 95 |   font-weight: 400;
 96 |   font-style: normal;
 97 | }
 98 | 
 99 | /* flap overrides */
100 | 
101 | .perspective-1000 {
102 |   perspective: 1000px;
103 |   transform-style: preserve-3d;
104 | }
105 | 
106 | /* Loading bar animation */
107 | @keyframes loading {
108 |   0% {
109 |     width: 0;
110 |     opacity: 1;
111 |   }
112 |   50% {
113 |     width: 60%;
114 |     opacity: 1;
115 |   }
116 |   90% {
117 |     width: 90%;
118 |     opacity: 1;
119 |   }
120 |   100% {
121 |     width: 100%;
122 |     opacity: 0;
123 |   }
124 | }
125 | 
126 | .loading-bar {
127 |   animation: loading 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
128 |   width: 0;
129 | }
130 | 
131 | /* Fade in animation */
132 | .transition-opacity {
133 |   transition-property: opacity;
134 | }
135 | 
136 | .duration-1000 {
137 |   transition-duration: 1000ms;
138 | }
139 | 
140 | .ease-in-out {
141 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
142 | }
143 | 
144 | .opacity-0 {
145 |   opacity: 0;
146 | }
147 | 
148 | .opacity-100 {
149 |   opacity: 1;
150 | }
151 | 


--------------------------------------------------------------------------------
/app/components/solari/FlapDisplay.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, {
  4 |   useEffect,
  5 |   useState,
  6 |   ReactNode,
  7 |   useCallback,
  8 |   memo,
  9 | } from "react";
 10 | import { FlapStack } from "./FlapStack";
 11 | import { Presets } from "./Presets";
 12 | 
 13 | enum Modes {
 14 |   Numeric = "num",
 15 |   Alphanumeric = "alpha",
 16 |   Words = "words",
 17 | }
 18 | 
 19 | interface RenderProps {
 20 |   id?: string;
 21 |   className?: string;
 22 |   css?: React.CSSProperties;
 23 |   children: ReactNode;
 24 |   [key: string]: any; // For rest props
 25 | }
 26 | 
 27 | interface FlapDisplayProps {
 28 |   id?: string;
 29 |   className?: string;
 30 |   css?: React.CSSProperties;
 31 |   value: string;
 32 |   chars?: string;
 33 |   words?: string[];
 34 |   length?: number;
 35 |   padChar?: string;
 36 |   padMode?: "auto" | "start" | "end";
 37 |   timing?: number;
 38 |   hinge?: boolean;
 39 |   color?: string; // New color property
 40 |   render?: (props: RenderProps) => ReactNode;
 41 |   [key: string]: any; // For rest props
 42 | }
 43 | 
 44 | const splitChars = (v: string | number): string[] =>
 45 |   String(v)
 46 |     .split("")
 47 |     .map((c) => c.toUpperCase());
 48 | 
 49 | const padValue = (
 50 |   v: string,
 51 |   length?: number,
 52 |   padChar: string = " ",
 53 |   padStart: boolean = false
 54 | ): string => {
 55 |   if (!length) return v;
 56 |   const trimmed = v.slice(0, length);
 57 |   return padStart
 58 |     ? String(trimmed).padStart(length, padChar)
 59 |     : String(trimmed).padEnd(length, padChar);
 60 | };
 61 | 
 62 | export const FlapDisplay = memo<FlapDisplayProps>(
 63 |   ({
 64 |     id,
 65 |     className,
 66 |     css,
 67 |     value,
 68 |     chars = Presets.NUM,
 69 |     words,
 70 |     length,
 71 |     padChar = " ",
 72 |     padMode = "auto",
 73 |     timing = 40,
 74 |     hinge = true,
 75 |     color, // Add color to destructured props
 76 |     render,
 77 |     ...restProps
 78 |   }) => {
 79 |     const [stack, setStack] = useState<string[]>([]);
 80 |     const [mode, setMode] = useState<Modes>(Modes.Numeric);
 81 |     const [digits, setDigits] = useState<string[]>([]);
 82 | 
 83 |     useEffect(() => {
 84 |       if (words && words.length) {
 85 |         setStack(words);
 86 |         setMode(Modes.Words);
 87 |       } else {
 88 |         setStack(splitChars(chars));
 89 |         setMode(chars.match(/[a-z]/i) ? Modes.Alphanumeric : Modes.Numeric);
 90 |       }
 91 |     }, [chars, words]);
 92 | 
 93 |     useEffect(() => {
 94 |       if (words && words.length) {
 95 |         setDigits([value]);
 96 |       } else {
 97 |         const padStart =
 98 |           padMode === "auto"
 99 |             ? !!value.match(/^[0-9.,+-]*$/)
100 |             : padMode === "start";
101 |         setDigits(splitChars(padValue(value, length, padChar, padStart)));
102 |       }
103 |     }, [value, chars, words, length, padChar, padMode]);
104 | 
105 |     const renderFlapStack = useCallback(() => {
106 |       return digits.map((digit, i) => (
107 |         <FlapStack
108 |           key={`${i}-${digit}`}
109 |           stack={stack}
110 |           value={digit}
111 |           mode={mode}
112 |           timing={timing}
113 |           hinge={hinge}
114 |           color={color} // Pass color to FlapStack
115 |           {...restProps}
116 |         />
117 |       ));
118 |     }, [digits, stack, mode, timing, hinge, color, restProps]);
119 | 
120 |     const containerClassName = className || "";
121 | 
122 |     if (render) {
123 |       return render({
124 |         id,
125 |         className: containerClassName,
126 |         css,
127 |         ...restProps,
128 |         children: renderFlapStack(),
129 |       }) as React.ReactElement;
130 |     }
131 | 
132 |     return (
133 |       <div
134 |         id={id}
135 |         className={`${containerClassName} flex relative w-full overflow-x-auto overflow-y-hidden justify-start md:justify-center gap-[2px] sm:gap-1 px-2`}
136 |         style={{
137 |           ...css,
138 |           transform: "perspective(1000px)",
139 |           transition: "transform 0.1s ease-out",
140 |         }}
141 |         aria-hidden="true"
142 |         aria-label={value}
143 |       >
144 |         {renderFlapStack()}
145 |       </div>
146 |     );
147 |   }
148 | );
149 | 


--------------------------------------------------------------------------------
/app/components/icons/goose.tsx:
--------------------------------------------------------------------------------
 1 | export const Goose = ({ className = "" }) => {
 2 |   return (
 3 |     <svg
 4 |       width="24"
 5 |       height="24"
 6 |       viewBox="0 0 24 24"
 7 |       fill="none"
 8 |       xmlns="http://www.w3.org/2000/svg"
 9 |       className={className}
10 |     >
11 |       <g clipPath="url(#clip0_2096_5193)">
12 |         <path
13 |           d="M20.9093 19.3861L19.5185 18.2413C18.7624 17.619 18.1189 16.8713 17.6157 16.0313C16.9205 14.8706 15.9599 13.8912 14.8133 13.1735L14.2533 12.8475C14.0614 12.7141 13.9276 12.5062 13.9086 12.2716C13.8963 12.1204 13.9326 11.9852 14.0171 11.8662C14.3087 11.4553 15.896 9.74698 16.1722 9.51845C16.528 9.22442 16.9243 8.97987 17.2921 8.69986C17.3443 8.66 17.3968 8.62035 17.4485 8.57989C17.4503 8.57808 17.4529 8.57668 17.4545 8.57508C17.5725 8.48195 17.6838 8.383 17.7724 8.26563C18.2036 7.76631 18.195 7.3443 18.195 7.3443C18.195 7.3443 18.1954 7.3439 18.1956 7.3437C18.1497 7.23133 17.9847 6.88163 17.6492 6.71759C17.9458 6.71178 18.2805 6.82294 18.4323 6.97156C18.6148 6.68534 18.7328 6.49967 18.9162 6.18762C18.9599 6.11352 18.9831 5.97652 18.8996 5.89981C18.8996 5.89981 18.8992 5.89981 18.8988 5.89981C18.8988 5.89981 18.8988 5.8994 18.8988 5.899C18.8972 5.8974 18.8952 5.8962 18.8936 5.8946C18.892 5.893 18.891 5.89119 18.8892 5.88939C18.8892 5.88939 18.8888 5.88939 18.8884 5.88939C18.8884 5.88939 18.8884 5.88899 18.8884 5.88859C18.885 5.88518 18.8812 5.88258 18.8776 5.87938C18.8754 5.87717 18.8736 5.87457 18.8716 5.87217C18.8692 5.87016 18.8665 5.86836 18.8643 5.86616C18.8609 5.86275 18.8587 5.85855 18.8551 5.85534C18.8551 5.85534 18.8545 5.85514 18.8543 5.85534C18.8543 5.85534 18.8543 5.85494 18.8543 5.85454C18.8527 5.85294 18.8507 5.85174 18.8491 5.85013C18.8475 5.84853 18.8463 5.84653 18.8447 5.84493C18.8447 5.84493 18.8441 5.84473 18.8439 5.84493C18.8439 5.84493 18.8439 5.84453 18.8439 5.84413C18.7672 5.7606 18.6302 5.78384 18.5561 5.8275C18.1503 6.06625 17.7555 6.32322 17.3996 6.54855C17.3996 6.54855 16.9778 6.53973 16.4783 6.97116C16.3607 7.05989 16.2618 7.17125 16.1688 7.28902C16.167 7.29082 16.1654 7.29322 16.164 7.29503C16.1234 7.3465 16.0837 7.39898 16.0441 7.45145C15.7639 7.81939 15.5195 8.21556 15.2255 8.57128C14.9971 8.84768 13.2887 10.4348 12.8777 10.7264C12.7587 10.8109 12.6237 10.8474 12.4723 10.835C12.2379 10.8161 12.0298 10.6821 11.8965 10.4903L11.5704 9.93024C10.8527 8.78318 9.87332 7.82299 8.71264 7.12778C7.87262 6.62466 7.12514 5.98092 6.50264 5.22503L5.35778 3.83421C5.3013 3.76571 5.19314 3.77693 5.15268 3.85585C5.02249 4.10941 4.77393 4.64479 4.58346 5.36483C4.57885 5.38186 4.58286 5.39988 4.59407 5.4135C4.83082 5.69952 5.37901 6.32983 6.03196 6.863C6.07742 6.90005 6.04017 6.97336 5.98369 6.95774C5.42047 6.80432 4.87288 6.55796 4.46308 6.34805C4.42964 6.33103 4.38918 6.35226 4.38437 6.38951C4.32068 6.89985 4.30425 7.46027 4.37155 8.05112C4.37355 8.07035 4.38577 8.08697 4.4036 8.09479C4.87088 8.29808 5.61816 8.59311 6.40269 8.78078C6.45958 8.7944 6.45777 8.87632 6.40029 8.88733C5.78941 9.0023 5.14968 9.02794 4.62973 9.02113C4.59327 9.02073 4.56643 9.05518 4.57625 9.09023C4.6806 9.45896 4.822 9.8339 5.00847 10.2115C5.08559 10.3811 5.16951 10.5475 5.25944 10.7104C5.27486 10.7382 5.3047 10.7548 5.33655 10.7534C5.76577 10.7324 6.28452 10.6871 6.80608 10.595C6.89501 10.5794 6.94268 10.6964 6.86757 10.7466C6.51345 10.9834 6.13571 11.1873 5.7844 11.3551C5.73733 11.3777 5.72211 11.4378 5.75315 11.4797C5.96186 11.7625 6.19139 12.0301 6.44075 12.2794C6.44075 12.2794 7.66853 13.5441 7.70198 13.6432C8.41841 12.9096 9.59612 12.0964 10.8966 11.3864C9.15488 12.8036 8.18387 13.8499 7.69517 14.4444L7.35447 14.9225C7.17742 15.1708 7.02379 15.4346 6.89541 15.7112C6.46579 16.6356 5.75756 18.5051 5.75756 18.5051C5.70328 18.6515 5.74754 18.7959 5.84168 18.89C5.84388 18.8922 5.84609 18.8944 5.84849 18.8964C5.85069 18.8986 5.8527 18.901 5.8549 18.9032C5.94924 18.9976 6.09345 19.0416 6.23986 18.9874C6.23986 18.9874 8.10897 18.2791 9.03371 17.8495C9.31031 17.7211 9.57429 17.5673 9.82245 17.3905L10.349 17.0153C10.6278 16.8166 11.0096 16.8483 11.2517 17.0904L12.4655 18.3042C12.7148 18.5535 12.9824 18.7831 13.2652 18.9918C13.3073 19.0226 13.3672 19.0076 13.3898 18.9605C13.5579 18.6094 13.7618 18.2313 13.9983 17.8774C14.0486 17.8022 14.1657 17.8501 14.1499 17.9388C14.0576 18.4606 14.0127 18.9794 13.9915 19.4084C13.9899 19.44 14.0067 19.4701 14.0345 19.4855C14.1972 19.5756 14.3636 19.6595 14.5335 19.7364C14.911 19.9229 15.2862 20.0645 15.6547 20.1687C15.6897 20.1785 15.7242 20.1516 15.7238 20.1152C15.7168 19.595 15.7424 18.9553 15.8576 18.3446C15.8684 18.2869 15.9503 18.2851 15.9641 18.3422C16.1516 19.127 16.4466 19.8742 16.6501 20.3413C16.6579 20.3591 16.6744 20.3712 16.6938 20.3734C17.2847 20.4407 17.8451 20.4242 18.3554 20.3606C18.3929 20.3559 18.4141 20.3155 18.3969 20.2818C18.187 19.872 17.9406 19.3241 17.7872 18.7612C17.7718 18.7046 17.8449 18.6675 17.8819 18.713C18.4151 19.3659 19.0454 19.9141 19.3314 20.1508C19.345 20.1621 19.3633 20.1659 19.3801 20.1615C20.1003 19.9712 20.6357 19.7226 20.8891 19.5922C20.968 19.5518 20.9792 19.4436 20.9107 19.3871L20.9093 19.3861Z"
14 |           fill="currentColor"
15 |         />
16 |       </g>
17 |       <defs>
18 |         <clipPath id="clip0_2096_5193">
19 |           <rect width="24" height="24" fill="white" />
20 |         </clipPath>
21 |       </defs>
22 |     </svg>
23 |   );
24 | };
25 | 


--------------------------------------------------------------------------------
/app/components/solari/Flap.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useState, useEffect, useRef } from "react";
  4 | import classNames from "classnames";
  5 | 
  6 | interface FlapProps {
  7 |   value: string;
  8 |   animated?: boolean;
  9 |   final?: boolean;
 10 |   hinge?: boolean;
 11 |   children?: string;
 12 |   bottom?: boolean;
 13 |   half?: boolean;
 14 |   isHovered?: boolean;
 15 |   color?: string; // New color prop
 16 |   hoverDuration?: number; // Duration of hover animation in ms
 17 | }
 18 | 
 19 | export const Flap = React.memo<FlapProps>(
 20 |   ({
 21 |     value,
 22 |     animated,
 23 |     final,
 24 |     hinge,
 25 |     children,
 26 |     bottom,
 27 |     half,
 28 |     isHovered,
 29 |     color,
 30 |     hoverDuration = 300, // Default animation duration
 31 |   }) => {
 32 |     const displayValue = children || value;
 33 |     const [animating, setAnimating] = useState(false);
 34 |     const animationTimer = useRef<NodeJS.Timeout | null>(null);
 35 | 
 36 |     // Handle hover animation completion
 37 |     useEffect(() => {
 38 |       // Start animation when hovered
 39 |       if (isHovered && !animating && bottom && half) {
 40 |         setAnimating(true);
 41 |       }
 42 | 
 43 |       // If animation is in progress and mouse leaves, let it complete
 44 |       if (animating && !isHovered) {
 45 |         if (animationTimer.current) {
 46 |           clearTimeout(animationTimer.current);
 47 |         }
 48 | 
 49 |         // Set a timer to complete the animation cycle
 50 |         animationTimer.current = setTimeout(() => {
 51 |           setAnimating(false);
 52 |         }, hoverDuration);
 53 |       }
 54 | 
 55 |       // If mouse is still hovering after animation completes, keep animating
 56 |       if (animating && isHovered) {
 57 |         if (animationTimer.current) {
 58 |           clearTimeout(animationTimer.current);
 59 |           animationTimer.current = null;
 60 |         }
 61 |       }
 62 | 
 63 |       // Cleanup
 64 |       return () => {
 65 |         if (animationTimer.current) {
 66 |           clearTimeout(animationTimer.current);
 67 |         }
 68 |       };
 69 |     }, [isHovered, animating, bottom, half, hoverDuration]);
 70 | 
 71 |     // Base flap classes
 72 |     const flapBaseClasses = `absolute h-full w-full origin-center z-20 rounded-sm leading-[0.9]`;
 73 | 
 74 |     // Top flap classes
 75 |     const topClasses = classNames(
 76 |       flapBaseClasses,
 77 |       "clip-path-[polygon(0_50%,100%_50%,100%_0,0_0)]", // clip-path for top
 78 |       "shadow-inner-top bg-gradient-to-b from-[rgba(255,255,255,0.03)] from-0% to-transparent to-60%", // 3D effect for top
 79 |       {
 80 |         "animate-flapDownTop z-20": animated && final,
 81 |         "rotate-x-50 opacity-40 z-20": animated && !final,
 82 |       }
 83 |     );
 84 | 
 85 |     // Bottom flap classes
 86 |     const bottomClasses = classNames(
 87 |       flapBaseClasses,
 88 |       "clip-path-[polygon(0_100%,100%_100%,100%_50%,0_50%)]", // clip-path for bottom
 89 |       "shadow-inner-bottom bg-gradient-to-t from-[rgba(0,0,0,0.07)] from-0% to-transparent to-30%", // 3D effect for bottom
 90 |       "transition-transform duration-200", // Add smooth transition for all states
 91 |       {
 92 |         "animate-flapDownBottom z-20": animated && final,
 93 |       }
 94 |     );
 95 | 
 96 |     const bottomHalfClasses = classNames(
 97 |       flapBaseClasses,
 98 |       "clip-path-[polygon(0_120%,100%_120%,100%_50%,0_50%)]", // clip-path for bottom
 99 |       "bg-gradient-to-t from-[rgba(0,0,0,0.07)] from-0% to-transparent to-30%", // 3D effect for bottom
100 |       "shadow-outer-bottom"
101 |     );
102 | 
103 |     // Hinge classes
104 |     const hingeClasses = classNames(
105 |       "w-full absolute left-0 top-1/2 -translate-y-1/2 z-30 h-[0.02em] bg-black",
106 |       "before:content-[''] before:absolute before:left-[20%] before:bg-black",
107 |       "after:content-[''] after:absolute after:left-[80%] after:bg-black",
108 |       {
109 |         "sm:before:w-[2px] sm:before:h-[16px] sm:after:w-[2px] sm:after:h-[16px] sm:before:top-[-6px] sm:after:top-[-6px]":
110 |           true, // Default size for larger screens
111 |         "before:w-[0.5px] before:h-[4px] after:w-[0.5px] after:h-[4px] after:top-[-1.5px] before:top-[-1.5px] before:shadow-none after:shadow-none":
112 |           true, // Smaller size for mobile view
113 |       }
114 |     );
115 | 
116 |     // Base style including color
117 |     const baseStyle = {
118 |       backgroundColor: color || "#1a1a1a", // Use provided color or default
119 |       color: color ? "#ffffff" : "#e1e1e1", // Use white text for colored backgrounds
120 |     };
121 | 
122 |     return (
123 |       <>
124 |         {!bottom && (
125 |           <div style={{ ...baseStyle, zIndex: 30 }} className={topClasses}>
126 |             {displayValue}
127 |           </div>
128 |         )}
129 |         {hinge && <div className={hingeClasses} />}
130 |         {bottom && !half ? (
131 |           <div
132 |             style={{ perspective: "300px" }}
133 |             className={
134 |               flapBaseClasses +
135 |               " z-10 clip-path-[polygon(0_100%,100%_100%,100%_50%,0_50%)]"
136 |             }
137 |           >
138 |             <div style={baseStyle} className={bottomClasses}>
139 |               {displayValue}
140 |             </div>
141 |           </div>
142 |         ) : null}
143 |         {bottom && half ? (
144 |           <div
145 |             style={{ perspective: "300px" }}
146 |             className={
147 |               flapBaseClasses +
148 |               " z-10 clip-path-[polygon(-20%_120%,120%_120%,100%_50%,0_50%)]"
149 |             }
150 |           >
151 |             <div
152 |               style={{
153 |                 ...baseStyle,
154 |                 animationDirection: "alternate",
155 |                 transform:
156 |                   bottom && half && (isHovered || animating)
157 |                     ? "rotateX(65deg)"
158 |                     : "initial",
159 |                 transition: `transform ${hoverDuration / 1000}s ease-in-out`,
160 |               }}
161 |               className={bottomHalfClasses}
162 |             >
163 |               {displayValue}
164 |             </div>
165 |           </div>
166 |         ) : null}
167 |       </>
168 |     );
169 |   }
170 | );
171 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useRouter, useSearchParams } from "next/navigation";
  4 | import { Suspense, useEffect, useMemo, useRef, useState } from "react";
  5 | import { SolariBoard } from "./components/solari/SolariBoard";
  6 | // import { useDisplayLength } from "./components/useDisplayLength";
  7 | 
  8 | function formatCurrency(number: number, locale = "en-US", currency = "USD") {
  9 |   const formatter = new Intl.NumberFormat(locale, {
 10 |     style: "currency",
 11 |     currency: currency,
 12 |     maximumFractionDigits: 2,
 13 |     notation: "standard",
 14 |   });
 15 |   return formatter.format(number).replace("$", "USD ");
 16 | }
 17 | 
 18 | // Initial loading rows - defined outside component to avoid recreation
 19 | const getLoadingRows = (displayLength: number) => [
 20 |   { value: "", length: displayLength },
 21 |   { value: "", length: displayLength },
 22 |   { value: "", length: displayLength },
 23 |   { value: "", length: displayLength },
 24 |   { value: " Loading...", length: displayLength },
 25 |   { value: "", length: displayLength },
 26 |   { value: "", length: displayLength },
 27 |   { value: "", length: displayLength },
 28 |   { value: "", length: displayLength },
 29 |   { value: "", length: displayLength },
 30 | ];
 31 | 
 32 | function HomeContent() {
 33 |   const searchParams = useSearchParams();
 34 |   const router = useRouter();
 35 |   // const displayLength = useDisplayLength();
 36 |   const [bitcoinPrice, setBitcoinPrice] = useState(0);
 37 |   const previousPriceRef = useRef(0);
 38 |   const [priceDirection, setPriceDirection] = useState<string | null>(null);
 39 |   const [holding] = useState(8780);
 40 |   const [holdingValue, setHoldingValue] = useState(0);
 41 |   
 42 |   // Calculate display length based on holding value
 43 |   const getDisplayLength = (holdingValue: number) => {
 44 |     return holdingValue >= 1000000000 ? 22 : 20; // 22 for 1B+, 20 for under
 45 |   };
 46 |   
 47 |   const displayLength = getDisplayLength(holdingValue);
 48 |   const [currentRowIndex, setCurrentRowIndex] = useState(-1);
 49 |   const [ticker, setTicker] = useState(searchParams.get("ticker") || "XYZ");
 50 |   const [inputError, setInputError] = useState<string | null>(null);
 51 |   const [error, setError] = useState<string | null>(null);
 52 |   const [countdown, setCountdown] = useState(20);
 53 |   const [isFetching, setIsFetching] = useState(false);
 54 | 
 55 |   // Initialize loading rows immediately
 56 |   const loadingBoardRows = useMemo(
 57 |     () => getLoadingRows(displayLength),
 58 |     [displayLength]
 59 |   );
 60 | 
 61 |   // Update holding value when Bitcoin price changes
 62 |   useEffect(() => {
 63 |     setHoldingValue(bitcoinPrice * holding);
 64 |   }, [bitcoinPrice, holding]);
 65 | 
 66 |   // Format the display values
 67 |   const displayValue = error
 68 |     ? "Error"
 69 |     : `${formatCurrency(bitcoinPrice).toString()}${
 70 |         priceDirection ? ` ${priceDirection}` : ""
 71 |       }`;
 72 | 
 73 |   const holdingDisplay = error ? "Error" : `${holding.toLocaleString("en-US")}`;
 74 |   const holdingValueDisplay = error ? "Error" : formatCurrency(holdingValue);
 75 | 
 76 |   // Define the final board rows
 77 |   const finalBoardRows = useMemo(
 78 |     () => [
 79 |       { value: "", length: displayLength },
 80 |       { value: ` ${ticker}`, length: displayLength },
 81 |       { value: "", length: displayLength },
 82 |       { value: " TOTAL HOLDINGS", length: displayLength },
 83 |       { value: ` BTC ${holdingDisplay}`, length: displayLength },
 84 |       { value: ` ${holdingValueDisplay}`, length: displayLength },
 85 |       { value: "", length: displayLength },
 86 |       { value: " BTC PRICE", length: displayLength },
 87 |       { value: ` ${displayValue}`, length: displayLength },
 88 |       { value: "", length: displayLength },
 89 |     ],
 90 |     [ticker, holdingValueDisplay, holdingDisplay, displayValue, displayLength]
 91 |   );
 92 | 
 93 |   // Current board rows based on loading state and animation progress
 94 |   const currentBoardRows = useMemo(() => {
 95 |     if (currentRowIndex === -1) {
 96 |       return loadingBoardRows;
 97 |     }
 98 | 
 99 |     return loadingBoardRows.map((row, index) => {
100 |       if (index <= currentRowIndex) {
101 |         return finalBoardRows[index];
102 |       }
103 |       return row;
104 |     });
105 |   }, [loadingBoardRows, finalBoardRows, currentRowIndex]);
106 | 
107 |   // Handle the row-by-row animation
108 |   useEffect(() => {
109 |     if (!isFetching && currentRowIndex === -1) {
110 |       // Start the row animation after data is loaded
111 |       const animateRows = () => {
112 |         const interval = setInterval(() => {
113 |           setCurrentRowIndex((prev) => {
114 |             if (prev >= finalBoardRows.length - 1) {
115 |               clearInterval(interval);
116 |               return prev;
117 |             }
118 |             return prev + 1;
119 |           });
120 |         }, 300); // Adjust timing between each row update
121 | 
122 |         return () => clearInterval(interval);
123 |       };
124 | 
125 |       // Small delay before starting the animation
126 |       setTimeout(animateRows, 1000);
127 |     }
128 |   }, [isFetching, currentRowIndex, finalBoardRows.length]);
129 | 
130 |   // Fetch Bitcoin price and manage countdown
131 |   useEffect(() => {
132 |     const fetchBitcoinPrice = async () => {
133 |       setIsFetching(true);
134 |       try {
135 |         const response = await fetch(
136 |           "https://pricing.bitcoin.block.xyz/current-price",
137 |           { cache: "no-store" }
138 |         );
139 | 
140 |         if (!response.ok) {
141 |           throw new Error(`API error: ${response.status}`);
142 |         }
143 | 
144 |         const data = await response.json();
145 |         const newPrice = parseFloat(data["amount"]);
146 | 
147 |         // Check if this is not the first fetch
148 |         if (!isFetching) {
149 |           // Compare with previous price to determine direction
150 |           if (newPrice > previousPriceRef.current) {
151 |             setPriceDirection("↑");
152 |           } else if (newPrice < previousPriceRef.current) {
153 |             setPriceDirection("↓");
154 |           } else {
155 |             setPriceDirection(null);
156 |           }
157 | 
158 |           // Remove the direction indicator after 5 seconds (increased from 2 seconds)
159 |           if (newPrice !== previousPriceRef.current) {
160 |             setTimeout(() => {
161 |               setPriceDirection(null);
162 |             }, 2000);
163 |           }
164 |         } else {
165 |           // Set initial price without showing direction
166 |           setPriceDirection(null);
167 |         }
168 | 
169 |         // Update prices
170 |         const oldPrice = previousPriceRef.current;
171 |         previousPriceRef.current = newPrice;
172 |         setBitcoinPrice(newPrice);
173 |       } catch (err) {
174 |         console.error("Failed to fetch Bitcoin price:", err);
175 |         setError("Failed to fetch Bitcoin price");
176 |       }
177 |       setIsFetching(false);
178 |       setCountdown(20);
179 |     };
180 | 
181 |     // Fetch immediately on load
182 |     fetchBitcoinPrice();
183 | 
184 |     // Set up countdown interval
185 |     const countdownInterval = setInterval(() => {
186 |       setCountdown((prev) => {
187 |         if (prev <= 1) {
188 |           fetchBitcoinPrice(); // Fetch when countdown reaches 0
189 |           return 20; // Reset to 20 seconds
190 |         }
191 |         return prev - 1;
192 |       });
193 |     }, 1000);
194 | 
195 |     // Clean up intervals on component unmount
196 |     return () => {
197 |       clearInterval(countdownInterval);
198 |     };
199 |   }, []);
200 | 
201 |   return (
202 |     <div className="w-full h-full font-mono flex flex-col justify-center items-center">
203 |       <div className="relative p-4 rounded-lg bg-[#0e0d0d]">
204 |         <SolariBoard rows={currentBoardRows} className="relative" />
205 |       </div>
206 | 
207 |       <div className="flex flex-rows w-full justify-center opacity-0 transition-opacity duration-300 animate-fadeIn">
208 |         {/* Status indicator */}
209 |         <div className="flex items-center justify-center gap-2 text-zinc-400 mt-2 sm:mt-4">
210 |           <div
211 |             className={`w-1.5 sm:w-2 h-1.5 sm:h-2 rounded-full ${
212 |               isFetching
213 |                 ? "animate-pulse bg-yellow-500"
214 |                 : "animate-pulse bg-green-500"
215 |             }`}
216 |           ></div>
217 |           <div className="text-xs sm:text-sm">
218 |             {isFetching
219 |               ? "Fetching..."
220 |               : `Fetching latest in ${countdown} second${
221 |                   countdown > 1 ? "s" : ""
222 |                 }`}
223 |           </div>
224 |         </div>
225 |       </div>
226 |     </div>
227 |   );
228 | }
229 | 
230 | export default function Home() {
231 |   return (
232 |     <Suspense fallback={<div>Loading...</div>}>
233 |       <HomeContent />
234 |     </Suspense>
235 |   );
236 | }
237 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------