Add OpenSats' lifetime statistics to /transparency page (#417)

* npm i public-google-sheets-parser

* Create LifetimeStats.tsx

* Add to MDXComponents

* Render in /transparency

* Extract label & value

...and do an ugly design

* `formatNumber`

* Prettier widget design

(basically copied from Jason's PR)

* Add `$` sign & move ~

components/LifetimeStats.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react'
+import PublicGoogleSheetsParser from 'public-google-sheets-parser'
+
+export function formatNumber(num: number): string {
+  const abbreviations = ['k', 'M', 'B', 'T']
+  let i = 0
+  while (num > 1e3 && i < abbreviations.length) {
+    num /= 1e3
+    if (num < 1e3) {
+      return `${num.toFixed(1)} ${abbreviations[i]}`
+    }
+    i += 1
+  }
+  return num.toString()
+}
+
+const LifetimeStats = () => {
+  const [items, setItems] = useState([])
+
+  useEffect(() => {
+    const parser = new PublicGoogleSheetsParser(
+      '1mLEbHcrJibLN2PKxYq1LHJssq0CGuJRRoaZwot-ncZQ'
+    )
+    parser.parse().then((data) => {
+      setItems(data)
+    })
+  }, [])
+
+  return (
+    <div className="py-4">
+      <div className="mx-auto">
+        <dl className="grid grid-cols-1 gap-x-2 gap-y-4 md:grid-cols-3">
+          {items.map((item, index) => (
+            <div key={index} className="mx-auto grid grid-cols-1">
+              <dt className="text-center text-base/7 text-gray-600 dark:text-gray-300">
+                {item.label}
+              </dt>
+              <dt className="order-first text-center text-4xl font-semibold tracking-tight text-orange-600">
+                {index == 1 ? '$ ' : ''}
+                {index == 2 ? '~' : ''}
+                {formatNumber(item.value)}
+              </dt>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </div>
+  )
+}
+
+export default LifetimeStats

components/MDXComponents.tsx

@@ -17,6 +17,7 @@ import DesignTeam from './DesignTeam'
 import Credits from './Supporters'
 import YouTubeEmbed from './YouTubeEmbed'
 import Members from './Members'
+import LifetimeStats from './LifetimeStats'
 
 export const Wrapper = ({ layout, content, ...rest }: MDXLayout) => {
   const Layout = require(`../layouts/${layout}`).default
@@ -40,4 +41,5 @@ export const MDXComponents: ComponentMap = {
   YouTubeEmbed,
   Credits,
   Members,
+  LifetimeStats,
 }

data/pages/transparency.mdx

@@ -10,6 +10,8 @@ transparency, integrity, and legal compliance standards. As an organization that
 is embedded in the free and open-source movement, we cherish the principles of
 transparency, openness, as well as conversing and working in public.
 
+<LifetimeStats/>
+
 By adhering to these principles, we aim to demonstrate our commitment to
 responsible bitcoin treasury management, good corporate citizenship, and the long-term
 sustainability of our organization.

package.json

@@ -38,6 +38,7 @@
     "next-themes": "^0.2.0",
     "pliny": "0.0.10",
     "postcss": "^8.4.16",
+    "public-google-sheets-parser": "^1.5.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",