fix: value

Author: debuggingfuture

apps/docs/md/dependencies.md

@@ -3,11 +3,12 @@
 This document rational behind opionated dependencies
 
 - `graphql-request` is used with @tanstack query as lightweight fetching. Data are not normalized
-   - it is optional to combine with [client from the graph](https://thegraph.com/docs/en/querying/querying-from-an-application/#graph-client) with block tracking, cross-chain subgraphs handling etc. 
+   - it is optional to combine with [client from the graph](https://thegraph.com/docs/en/querying/querying-from-an-application/#graph-client) with block tracking, multi-chain subgraphs handling etc. 
 - `@graphprotocol/client-cli` is used for artifact generating
 
-- jotai over zustand
-  - Jotai is preferred although zustand is being used in scaffold. Firstly it is used by shadcn, and it [doesn't use a single store as in zustand](https://zustand.docs.pmnd.rs/getting-started/comparison#jotai)
+- nanostore over jotai over zustand
+  - Nanostore is tiny and framework agnostic, recommended by [astro](https://docs.astro.build/en/recipes/sharing-state-islands/), will be used for more basic use cases
+  - Jotai more mature and is preferred to zustand although zustand is being used in scaffold. Firstly it is used by shadcn, and it [doesn't use a single store as in zustand](https://zustand.docs.pmnd.rs/getting-started/comparison#jotai)
 
 - vitest over jest
   - used by shadcn, scaffold and generally author find less issues for typscript setup as in jest.

apps/storybook/src/stories/token/TokenBalanceChart.stories.tsx

@@ -1,7 +1,7 @@
 import {
 	asCaip19Id,
-	groupCrosschainTokens,
-} from "@geist/domain/token/cross-chain";
+	groupMultichainToken,
+} from "@geist/domain/token/multi-chain";
 import { asTokenBalanceEntries } from "@geist/domain/token/token";
 import {
 	PRICE_DATA_SNAPSHOT,
@@ -24,11 +24,33 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const ByCrosschainToken: Story = {
+// separate abstraction
+// similar to how Elasticsearch query handles aggs https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations.html
+// agg by chain, token
+
+// useful:
+// e.g. USDC amount distribution by each chain
+// e.g. value distribution of agg of multiple tokens by each chain
+// e.g. value distribution by each token of a chain
+
+// not useful
+// e.g. multiple non-stable token amount by each chain
+
+export const TokenAmountByMultichain: Story = {
 	args: {
+		group: "chain",
+		// dataByGroup: {}
+
 		tokenBalances: asTokenBalanceEntries(
-			groupCrosschainTokens(TOKEN_BALANCES_MULTIPLE_STABLECOINS),
+			groupMultichainToken(TOKEN_BALANCES_MULTIPLE_STABLECOINS),
 			PRICE_DATA_SNAPSHOT,
 		),
 	},
 };
+
+// export const TokenValueByMultichain: Story = {
+// 	args: {
+// 		...TokenAmountByMultichain.args,
+// 		group: 'chain',
+// 	},
+// };

apps/storybook/src/stories/token/TokenBalanceTable.stories.tsx

@@ -1,7 +1,7 @@
 import {
 	asCaip19Id,
-	groupCrosschainTokens,
-} from "@geist/domain/token/cross-chain";
+	groupMultichainToken,
+} from "@geist/domain/token/multi-chain";
 import { asTokenBalanceEntries } from "@geist/domain/token/token";
 import {
 	PRICE_DATA_SNAPSHOT,
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof meta>;
 export const CrossChain: Story = {
 	args: {
 		tokenBalances: asTokenBalanceEntries(
-			groupCrosschainTokens(TOKEN_BALANCES_MULTIPLE_STABLECOINS),
+			groupMultichainToken(TOKEN_BALANCES_MULTIPLE_STABLECOINS),
 			PRICE_DATA_SNAPSHOT,
 		),
 	},

apps/storybook/src/stories/token/TokenPriceChartWithFeed.stories.tsx

@@ -1,7 +1,7 @@
 import {
 	asCaip19Id,
-	groupCrosschainTokens,
-} from "@geist/domain/token/cross-chain";
+	groupMultichainToken,
+} from "@geist/domain/token/multi-chain";
 import {
 	PRICE_DATA_FEED,
 	PRICE_DATA_SNAPSHOT,

packages/domain/package.json

@@ -26,6 +26,7 @@
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {
+		"nanostores": "0.11.3",
 		"@ethereumjs/rlp": "^5.0.2",
 		"@hookform/resolvers": "^3.9.0",
 		"@ipld/dag-ucan": "^3.4.0",

packages/domain/src/amount.test.ts

@@ -1,9 +1,29 @@
 import { describe, expect, test } from "vitest";
-import { formatUnitsWithLocale } from "./amount";
+import { formatNumberWithLocale, formatUnitsWithLocale } from "./amount";
 
 describe("amount", () => {
+	describe("#formatNumberWithLocale", () => {
+		test("format non currency", () => {
+			const result = formatNumberWithLocale({
+				value: 1234.567,
+				locale: new Intl.Locale("en-US"),
+			});
+			expect(result).toBe("1,234.57");
+		});
+
+		test("format currency", () => {
+			const result = formatNumberWithLocale({
+				value: 1234.567,
+				locale: new Intl.Locale("en-US"),
+				formatOptions: {
+					style: "currency",
+				},
+			});
+			expect(result).toBe("$1,234.57");
+		});
+	});
 	describe("formatUnitsWithLocale", () => {
-		test("formats number with locale options", () => {
+		test("format units with locale options", () => {
 			const result = formatUnitsWithLocale({
 				value: 1234567890000n,
 				exponent: 9,

packages/domain/src/amount.ts

@@ -1,7 +1,12 @@
 import { formatUnits } from "viem";
 
 /**
- * compared to formatUnits from viem
+ *
+ * Prefer passing around explicit bigint, decimals for financial values
+ * which also result in more isomorphic code
+ *
+ *
+ * Compared to `formatUnits` from viem
  * besides expotent handling, also take control of decimals displayed and locale concern
  */
 
@@ -21,14 +26,35 @@ export const formatUnitsWithLocale = ({
 	}
 	const e = Math.pow(10, exponent);
 
+	return formatNumberWithLocale({
+		value: Number(value) / e,
+		locale,
+		formatOptions,
+	});
+};
+
+/**
+ * Reasonable defaults for formatting cryptocurrency values
+ * Could use native number.toLocaleString() otherwise
+ */
+
+export const formatNumberWithLocale = ({
+	value,
+	locale,
+	formatOptions = {},
+}: {
+	value: number;
+	locale?: Intl.Locale;
+	formatOptions?: Intl.NumberFormatOptions;
+}) => {
 	const currency =
 		formatOptions?.style === "currency"
 			? formatOptions?.currency || "USD"
 			: undefined;
 
-	return (Number(value) / e).toLocaleString(locale, {
-		...formatOptions,
+	return value.toLocaleString(locale, {
 		currency,
 		maximumFractionDigits: formatOptions?.maximumFractionDigits ?? 2,
+		...formatOptions,
 	});
 };

packages/domain/src/token/aggregate.test.ts

@@ -0,0 +1,54 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { aggregateBySymbol, tokenBalanceStore } from "./aggregate";
+
+import { atom, cleanStores, keepMount } from "nanostores";
+import {
+	PRICE_DATA_SNAPSHOT,
+	TOKEN_BALANCES_MULTIPLE_STABLECOINS,
+} from "./token-balance.fixture";
+import type { TokenPriceEntry } from "./token-price-entry";
+
+let { $tokenBalances, $priceData } = tokenBalanceStore();
+
+afterEach(() => {
+	cleanStores($tokenBalances);
+	cleanStores($priceData);
+});
+
+describe("aggregate", () => {
+	beforeEach(() => {
+		keepMount($tokenBalances);
+		keepMount($priceData);
+	});
+
+	it("#aggregateBySymbol with no price", () => {
+		$tokenBalances.set([
+			...$tokenBalances.get(),
+			...TOKEN_BALANCES_MULTIPLE_STABLECOINS,
+		]);
+
+		const $aggregate = aggregateBySymbol($tokenBalances);
+
+		expect($aggregate.get().get()["OP"].agg).toEqual({
+			amount: 555555n,
+			value: 0n,
+		});
+	});
+
+	// TODO fix race condition
+	it("#aggregateBySymbol with price", () => {
+		$tokenBalances.set([
+			...$tokenBalances.get(),
+			...TOKEN_BALANCES_MULTIPLE_STABLECOINS,
+		]);
+
+		$priceData.set([...PRICE_DATA_SNAPSHOT]);
+
+		const $aggregate = aggregateBySymbol($tokenBalances, $priceData);
+
+		expect($aggregate.get().get()["OP"].agg).toEqual({
+			amount: 1111110n,
+			value: 2333331000000000000000000n,
+		});
+	});
+});

packages/domain/src/token/aggregate.ts

@@ -0,0 +1,65 @@
+/**
+ * Extract logic from presentation component to store
+ * we want a structure flexible enough to observe for price change
+ * such that value is reactive to price and amount and aggregates reactive its components
+ */
+
+import { groupMultichainToken, withValue } from "./multi-chain";
+import type { TokenBalanceEntry } from "./token-balance-entry";
+
+import { type Atom, atom, computed, deepMap } from "nanostores";
+import type { TokenPriceEntry } from "./token-price-entry";
+
+export const tokenBalanceStore = () => {
+	const $tokenBalances = atom<TokenBalanceEntry[]>([]);
+	const $priceData = atom<TokenPriceEntry[]>([]);
+
+	return {
+		$tokenBalances,
+		$priceData,
+	};
+};
+
+export const aggregateBySymbol = (
+	$tokenBalances: Atom<TokenBalanceEntry[]>,
+	$priceData?: Atom<TokenPriceEntry[]>,
+) => {
+	return computed(
+		[$tokenBalances, $priceData || atom<TokenPriceEntry[]>([])],
+		(
+			tokenBalances: TokenBalanceEntry[],
+			$priceData: TokenPriceEntry[] = [],
+		) => {
+			const bySymbol = groupMultichainToken(tokenBalances);
+
+			return Object.entries(bySymbol).reduce((acc, [symbol, tokenInfo]) => {
+				const { tokenBalances } = tokenInfo;
+
+				const tokenBalancesWithValue = tokenBalances.map((tokenBalance) =>
+					withValue(tokenBalance, $priceData),
+				);
+
+				// TODO if empty price data
+				console.log("tokenBalancesWithValue", tokenBalancesWithValue);
+				const agg = tokenBalancesWithValue.reduce(
+					(acc, tokenBalanceWithValue) => {
+						return {
+							amount: acc.amount + tokenBalanceWithValue.amount,
+							value: acc.value + (tokenBalanceWithValue.value || 0n),
+						};
+					},
+					{
+						amount: 0n,
+						value: 0n,
+					},
+				);
+				console.log("agg", agg);
+				acc.setKey(symbol, {
+					tokenBalances: tokenBalancesWithValue,
+					agg,
+				});
+				return acc;
+			}, deepMap<Record<string, unknown>>({}));
+		},
+	);
+};