add: various charts

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/account/Balance.stories.tsx

@@ -4,7 +4,7 @@ import { BY_USER } from "@geist/domain/user.fixture";
 import { Balance } from "@geist/ui-react/components/account/balance";
 import { BY_CHAIN_ID, Token } from "@geist/ui-react/lib/token/config";
 import type { Address } from "viem";
-import { base, optimism } from "viem/chains";
+import { base, mainnet, optimism } from "viem/chains";
 import { withWagmiProvider } from "../decorators/wagmi";
 
 const meta = {
@@ -34,10 +34,18 @@ export const BaseETH: Story = {
 	},
 };
 
+export const MainnetUSDC: Story = {
+	args: {
+		address: BY_USER.vitalik.address as Address,
+		tokenAddress: BY_CHAIN_ID[mainnet.id][Token.USDC] as Address,
+		chainId: mainnet.id,
+	},
+};
+
 export const OptimismUSDC: Story = {
 	args: {
 		address: BY_USER.vitalik.address as Address,
+		tokenAddress: BY_CHAIN_ID[optimism.id][Token.USDC] as Address,
 		chainId: optimism.id,
-		token: BY_CHAIN_ID[optimism.id][Token.USDC],
 	},
 };

apps/storybook/src/stories/protocol/RevenueChart.stories.tsx

@@ -0,0 +1,26 @@
+import { RevenueChart } from "@geist/ui-react/components/protocol/revenue-chart";
+import type { Meta, StoryObj } from "@storybook/react";
+import { withWagmiProvider } from "#stories/decorators/wagmi.tsx";
+
+const meta = {
+	title: "Protocol/RevenueChart",
+	component: RevenueChart,
+	parameters: {
+		layout: "centered",
+	},
+	args: {},
+	decorators: [withWagmiProvider()],
+} satisfies Meta<typeof RevenueChart>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Case of multiple tokens->axis is tricky
+// https://github.com/recharts/recharts/issues/2815
+
+export const AaveV3: Story = {
+	args: {
+		protocolSlug: "aave-v3",
+	},
+};

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

@@ -0,0 +1,58 @@
+import { tokenBalanceStore } from "@geist/domain/token/aggregate";
+import {
+	PRICE_DATA_SNAPSHOT,
+	TOKEN_BALANCES_MULTICHAIN_STABLECOINS,
+	createTokenBalanceStoreWithFixture,
+} from "@geist/domain/token/token-balance.fixture";
+import { TokenBalanceChart$ } from "@geist/ui-react/components/token/token-balance-chart";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Token/TokenBalanceChart$",
+	component: TokenBalanceChart$,
+	parameters: {
+		layout: "centered",
+	},
+	args: {},
+	decorators: [],
+} satisfies Meta<typeof TokenBalanceChart$>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// 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
+
+const { $tokenBalances, $priceData } = createTokenBalanceStoreWithFixture();
+const { $tokenBalances: $tokenBalancesStablecoin } =
+	createTokenBalanceStoreWithFixture();
+
+$tokenBalancesStablecoin.set(TOKEN_BALANCES_MULTICHAIN_STABLECOINS);
+
+export const TokenAmountByMultichain: Story = {
+	args: {
+		group: "token",
+		dataKey: "amount",
+		$tokenBalances: $tokenBalancesStablecoin,
+		$priceData,
+	},
+};
+
+export const TokenValueByMultichain: Story = {
+	args: {
+		group: "token",
+		dataKey: "value",
+		$tokenBalances,
+		$priceData,
+	},
+};

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

@@ -0,0 +1,26 @@
+import { createTokenBalanceStoreWithFixture } from "@geist/domain/token/token-balance.fixture";
+import { TokenBalanceTable$ } from "@geist/ui-react/components/token/token-balance-table";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Token/TokenBalanceTable",
+	component: TokenBalanceTable$,
+	parameters: {
+		layout: "centered",
+	},
+	args: {},
+	decorators: [],
+} satisfies Meta<typeof TokenBalanceTable$>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const { $tokenBalances, $priceData } = createTokenBalanceStoreWithFixture();
+
+export const Multichain: Story = {
+	args: {
+		$tokenBalances,
+		$priceData,
+	},
+};

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

@@ -1,4 +1,5 @@
 import { TokenChip } from "@geist/ui-react/components/token/token-chip";
+import { BY_CHAIN_ID, Token } from "@geist/ui-react/lib/token/config";
 import type { Meta, StoryObj } from "@storybook/react";
 import { mainnet, optimismSepolia } from "viem/chains";
 import { withWagmiProvider } from "../decorators/wagmi";
@@ -19,27 +20,28 @@ type Story = StoryObj<typeof meta>;
 
 export const ETHTokenChip: Story = {
 	args: {
-		chain: mainnet,
+		chainId: mainnet.id,
 	},
 };
 
 export const OptimismSepoliaTokenChip: Story = {
 	args: {
-		chain: optimismSepolia,
+		chainId: optimismSepolia.id,
 	},
 };
 
 export const ETHTokenChipWithAmount: Story = {
 	args: {
-		chain: mainnet,
+		chainId: mainnet.id,
 		amount: 300000000000000000n,
 	},
 };
 
 export const USDCTokenChipWithAmount: Story = {
 	args: {
-		chain: mainnet,
-		address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
-		amount: 456000123n,
+		chainId: mainnet.id,
+		address: BY_CHAIN_ID[mainnet.id][Token.USDC],
+		amount: 4567000123n,
+		decimalsDisplayed: 4,
 	},
 };

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

@@ -32,5 +32,19 @@ export const ETHTokenChipWithAmount: Story = {
 		symbol: "ETH",
 		amount: 300000000000000000n,
 		decimals: 18,
+		maximumFractionDigits: 1,
+	},
+};
+
+export const ETHTokenChipWithValue: Story = {
+	args: {
+		imageUrl:
+			"https://ethereum.org/_next/image/?url=%2F_next%2Fstatic%2Fmedia%2Feth-diamond-black.a042df77.png&w=828&q=75",
+		name: "Ether",
+		symbol: "ETH",
+		value: 1234500000000000000000n,
+		decimals: 18,
+		maximumFractionDigits: 1,
+		isShowValue: true,
 	},
 };

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

@@ -0,0 +1,34 @@
+import { TokenPriceChart } from "@geist/ui-react/components/token/token-price-chart";
+import { BY_CHAIN_ID, Token } from "@geist/ui-react/lib/token/config";
+import type { Meta, StoryObj } from "@storybook/react";
+import { mainnet } from "viem/chains";
+import { withWagmiProvider } from "#stories/decorators/wagmi.tsx";
+
+const meta = {
+	title: "Token/TokenPriceChart",
+	component: TokenPriceChart,
+	parameters: {
+		layout: "centered",
+	},
+	args: {},
+	decorators: [withWagmiProvider()],
+} satisfies Meta<typeof TokenPriceChart>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// possible to have multiple tokens but trikcy with multiple axis
+// https://github.com/recharts/recharts/issues/2815
+
+export const StETH: Story = {
+	args: {
+		chainId: mainnet.id,
+		tokens: [
+			{
+				chainId: mainnet.id,
+				address: BY_CHAIN_ID[mainnet.id][Token.StETH]!,
+			},
+		],
+	},
+};

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

@@ -0,0 +1,42 @@
+import { generatePriceDataFeed } from "@geist/domain/token/token-balance.fixture";
+import { TokenPriceChartWithFeed } from "@geist/ui-react/components/token/token-price-chart-with-feed";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const tokenInfoByTokenId = {
+	"eip155:1/erc20:0x6b175474e89094c44da98b954eedeac495271d0f": {
+		symbol: "DAI",
+	},
+	"eip155:1/erc20:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48": {
+		imageUrl: "",
+		symbol: "USDC",
+	},
+};
+
+const meta = {
+	title: "Token/TokenPriceChartWithFeed",
+	component: TokenPriceChartWithFeed,
+	parameters: {
+		layout: "centered",
+	},
+
+	args: {},
+	decorators: [],
+} satisfies Meta<typeof TokenPriceChartWithFeed>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const now = new Date();
+
+export const ByCrosschainToken: Story = {
+	args: {
+		tokenPriceFeedByTokenId: {
+			"eip155:1/erc20:0x6b175474e89094c44da98b954eedeac495271d0f":
+				generatePriceDataFeed(10, now),
+			"eip155:1/erc20:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48":
+				generatePriceDataFeed(10, now),
+		},
+		tokenInfoByTokenId,
+	},
+};

apps/storybook/tailwind.config.js

@@ -3,6 +3,18 @@ const { blackA, violet, mauve } = require("@radix-ui/colors");
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ["./src/**/*.{js,jsx,ts,tsx}", "./@/**/*.{js,jsx,ts,tsx}"],
+	safelist: [
+		{
+			pattern: /(min|max)*-*w-/,
+		},
+		{
+			pattern: /(min|max)*-*h-/,
+		},
+
+		{
+			pattern: /bg-/,
+		},
+	],
 	darkMode: ["class", '[data-mode="dark"]'],
 	theme: {
 		extend: {

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",