From 665cbfa77ab79a37e9b471f134b2b692a0cb2481 Mon Sep 17 00:00:00 2001 From: jinoosss Date: Wed, 8 Nov 2023 11:56:12 +0900 Subject: [PATCH] [GSW-464] feat: Implement a Liquidity Selection Graph --- .../PoolSelectionGraph.stories.tsx | 1908 +++++++++++++++++ .../PoolSelectionGraph.styles.ts | 104 + .../PoolSelectionGraph.tsx | 508 +++++ packages/web/src/constants/option.constant.ts | 6 + 4 files changed, 2526 insertions(+) create mode 100644 packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.stories.tsx create mode 100644 packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.styles.ts create mode 100644 packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx diff --git a/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.stories.tsx b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.stories.tsx new file mode 100644 index 000000000..32e9f8d01 --- /dev/null +++ b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.stories.tsx @@ -0,0 +1,1908 @@ +import React, { useEffect, useState, useRef } from "react"; +import PoolSelectionGraph, { type PoolSelectionGraphProps } from "./PoolSelectionGraph"; +import { ComponentStory, Meta, StoryObj } from "@storybook/react"; +import POOLS from "@repositories/pool/mock/pools.json"; +import { tickToPrice } from "@utils/swap-utils"; + + +const test = [ + { + "binId": 1, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 3, + "lowerTick": 4, + "originalLowerTick": 4, + "reserveA": 706712.8892504529, + "reserveB": 1193758.2264479052, + "cumulativeTokenAPerShare": 1070.708822547057, + "cumulativeTokenBPerShare": 1071.4874367179784, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 1846025.1041936176, + "timestamp": 1699233815, + "annualizedFeeGrowth": 0.08498393581540704 + }, + { + "binId": 5, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -4, + "originalLowerTick": -4, + "reserveA": 13945.262023390807, + "reserveB": 0, + "cumulativeTokenAPerShare": 716.7770059394281, + "cumulativeTokenBPerShare": 717.2639011401274, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 13556.583223601854, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925925926 + }, + { + "binId": 6, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -3, + "originalLowerTick": -3, + "reserveA": 22813.866943515444, + "reserveB": 0, + "cumulativeTokenAPerShare": 721.8200760136953, + "cumulativeTokenBPerShare": 722.1670784083564, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 22173.655247320337, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925925926 + }, + { + "binId": 7, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -2, + "originalLowerTick": -2, + "reserveA": 37464.65069303584, + "reserveB": 0, + "cumulativeTokenAPerShare": 729.5159123282365, + "cumulativeTokenBPerShare": 729.7203527466146, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 36402.41107788155, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925925926 + }, + { + "binId": 8, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -1, + "originalLowerTick": -1, + "reserveA": 89771.95482678543, + "reserveB": 0, + "cumulativeTokenAPerShare": 798.4596815088286, + "cumulativeTokenBPerShare": 797.521715775281, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 85532.87699987474, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.010934668216306585 + }, + { + "binId": 9, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 0, + "originalLowerTick": 0, + "reserveA": 155838.53563751673, + "reserveB": 0, + "cumulativeTokenAPerShare": 913.2714900355272, + "cumulativeTokenBPerShare": 912.1600016744314, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 150334.68355653159, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.014721984495616632 + }, + { + "binId": 10, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 1, + "originalLowerTick": 1, + "reserveA": 73282.62392635278, + "reserveB": 0, + "cumulativeTokenAPerShare": 992.1791604897556, + "cumulativeTokenBPerShare": 990.8594072833087, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 70466.3060404752, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.016302757538062273 + }, + { + "binId": 26, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -5, + "originalLowerTick": -5, + "reserveA": 4467.583938441541, + "reserveB": 0, + "cumulativeTokenAPerShare": 717.5472114571389, + "cumulativeTokenBPerShare": 718.1789214655598, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 4342.934585985483, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925925926 + }, + { + "binId": 27, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 2, + "originalLowerTick": 2, + "reserveA": 57865.770779943894, + "reserveB": 0, + "cumulativeTokenAPerShare": 1030.5800264565232, + "cumulativeTokenBPerShare": 1029.0451453347935, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 55549.204174081904, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.04710726670481152 + }, + { + "binId": 28, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 3, + "originalLowerTick": 3, + "reserveA": 35113.358378134384, + "reserveB": 0, + "cumulativeTokenAPerShare": 1007.1105644817275, + "cumulativeTokenBPerShare": 1005.3859616828165, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 33731.570177738344, + "timestamp": 1699221275, + "annualizedFeeGrowth": 0.0841605026382442 + }, + { + "binId": 29, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 4, + "originalLowerTick": 4, + "reserveA": 7918.014590787251, + "reserveB": 13374.872877883863, + "cumulativeTokenAPerShare": 996.2901938590836, + "cumulativeTokenBPerShare": 995.027687477932, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 20471.329914966384, + "timestamp": 1699233815, + "annualizedFeeGrowth": 0.1021039263915912 + }, + { + "binId": 40, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 5, + "originalLowerTick": 5, + "reserveA": 0, + "reserveB": 11428.069308246346, + "cumulativeTokenAPerShare": 973.0349401439623, + "cumulativeTokenBPerShare": 971.9849067499306, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 11000.385102714357, + "timestamp": 1699206299, + "annualizedFeeGrowth": 0.04498293834082653 + }, + { + "binId": 92, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 2, + "lowerTick": -8, + "originalLowerTick": -8, + "reserveA": 56.46594153637028, + "reserveB": 0, + "cumulativeTokenAPerShare": 704.5117437797314, + "cumulativeTokenBPerShare": 704.3809696624211, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 54.999944, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509259259258 + }, + { + "binId": 147, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 1, + "lowerTick": 4, + "originalLowerTick": 4, + "reserveA": 2715.726222039534, + "reserveB": 4587.323321325579, + "cumulativeTokenAPerShare": 941.9901859271693, + "cumulativeTokenBPerShare": 942.322655780659, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 7041.9237363884395, + "timestamp": 1699233815, + "annualizedFeeGrowth": 0.1000376603009731 + }, + { + "binId": 317, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -11, + "originalLowerTick": -11, + "reserveA": 77.16719247786641, + "reserveB": 0, + "cumulativeTokenAPerShare": 526.9230325526293, + "cumulativeTokenBPerShare": 528.0198036747414, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 75.57433425629291, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509259259263 + }, + { + "binId": 318, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -10, + "originalLowerTick": -10, + "reserveA": 126.22321502726892, + "reserveB": 0, + "cumulativeTokenAPerShare": 539.8689764650783, + "cumulativeTokenBPerShare": 540.8847667040528, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 123.55509918976466, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509259259261 + }, + { + "binId": 319, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -9, + "originalLowerTick": -9, + "reserveA": 215.50293295889045, + "reserveB": 0, + "cumulativeTokenAPerShare": 549.3089816827655, + "cumulativeTokenBPerShare": 550.2323018952485, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 210.86967525421676, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925925926 + }, + { + "binId": 320, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -8, + "originalLowerTick": -8, + "reserveA": 353.5067820557563, + "reserveB": 0, + "cumulativeTokenAPerShare": 568.7848902453738, + "cumulativeTokenBPerShare": 569.6269531769881, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 345.6429987255599, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925925926 + }, + { + "binId": 321, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -7, + "originalLowerTick": -7, + "reserveA": 583.2566017704041, + "reserveB": 0, + "cumulativeTokenAPerShare": 586.8434461890743, + "cumulativeTokenBPerShare": 587.5952002133256, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 569.8795159670073, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925925926 + }, + { + "binId": 322, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -6, + "originalLowerTick": -6, + "reserveA": 2800.892037074582, + "reserveB": 0, + "cumulativeTokenAPerShare": 577.7591805189553, + "cumulativeTokenBPerShare": 578.3836850261574, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 2737.625073871, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925925926 + }, + { + "binId": 323, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -16, + "originalLowerTick": -16, + "reserveA": 1.6592670135219414, + "reserveB": 0, + "cumulativeTokenAPerShare": 489.1382529875325, + "cumulativeTokenBPerShare": 490.6467132334712, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 1.627425867237734, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509259259314 + }, + { + "binId": 324, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -15, + "originalLowerTick": -15, + "reserveA": 1.6598271427322362, + "reserveB": 0, + "cumulativeTokenAPerShare": 497.76756913525327, + "cumulativeTokenBPerShare": 499.2031218977299, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 1.6274242903448781, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509259259258 + }, + { + "binId": 325, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -14, + "originalLowerTick": -14, + "reserveA": 1.6601502347491581, + "reserveB": 0, + "cumulativeTokenAPerShare": 502.7370581555517, + "cumulativeTokenBPerShare": 504.0860498327076, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 1.6274238988115568, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.0057555092592594765 + }, + { + "binId": 326, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -13, + "originalLowerTick": -13, + "reserveA": 1.660240039297983, + "reserveB": 0, + "cumulativeTokenAPerShare": 505.43087370066115, + "cumulativeTokenBPerShare": 506.6858012317236, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 1.6273400479942635, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509259259444 + }, + { + "binId": 327, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -12, + "originalLowerTick": -12, + "reserveA": 47.427214388060435, + "reserveB": 0, + "cumulativeTokenAPerShare": 511.11808620007105, + "cumulativeTokenBPerShare": 512.2846107657545, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 46.47701414242052, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925925926 + }, + { + "binId": 1187, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -32, + "originalLowerTick": -32, + "reserveA": 0.0463435701307749, + "reserveB": 0, + "cumulativeTokenAPerShare": 258.2990923039097, + "cumulativeTokenBPerShare": 259.92622969058493, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.04586965124997149, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925926569 + }, + { + "binId": 1188, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -31, + "originalLowerTick": -31, + "reserveA": 0.04634676303862378, + "reserveB": 0, + "cumulativeTokenAPerShare": 260.0456338709438, + "cumulativeTokenBPerShare": 261.6314259405612, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.04586963981492271, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925926257 + }, + { + "binId": 1189, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -30, + "originalLowerTick": -30, + "reserveA": 0.04635650980135836, + "reserveB": 0, + "cumulativeTokenAPerShare": 265.37478799429744, + "cumulativeTokenBPerShare": 266.93964328274524, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.04586960916010256, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925926161 + }, + { + "binId": 1190, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -29, + "originalLowerTick": -29, + "reserveA": 0.04635840938417238, + "reserveB": 0, + "cumulativeTokenAPerShare": 266.41481818186253, + "cumulativeTokenBPerShare": 267.9322836789809, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.0458696005860837, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00015731765745788354 + }, + { + "binId": 1191, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -28, + "originalLowerTick": -28, + "reserveA": 0.04636002244483275, + "reserveB": 0, + "cumulativeTokenAPerShare": 267.41388707336097, + "cumulativeTokenBPerShare": 268.88326265411223, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.04586938293834845, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.0057555092592642375 + }, + { + "binId": 1192, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -27, + "originalLowerTick": -27, + "reserveA": 0.046364143652935313, + "reserveB": 0, + "cumulativeTokenAPerShare": 269.7114929665209, + "cumulativeTokenBPerShare": 271.1392106824499, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.04586928965289385, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509259265558 + }, + { + "binId": 1193, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 23, + "originalLowerTick": 23, + "reserveA": 0, + "reserveB": 0.9909989177259614, + "cumulativeTokenAPerShare": 642.3354951003428, + "cumulativeTokenBPerShare": 639.3365775587359, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.9662878388905187, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009090072781343392 + }, + { + "binId": 1194, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 24, + "originalLowerTick": 24, + "reserveA": 0, + "reserveB": 0.9908769506357206, + "cumulativeTokenAPerShare": 639.2520276279813, + "cumulativeTokenBPerShare": 636.1402912004418, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.9662893731771254, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.00909007278134344 + }, + { + "binId": 1195, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 25, + "originalLowerTick": 25, + "reserveA": 0, + "reserveB": 0.9907509043666082, + "cumulativeTokenAPerShare": 636.0938716957864, + "cumulativeTokenBPerShare": 632.8708720174664, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.9662896851913185, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009090072781343495 + }, + { + "binId": 1196, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 26, + "originalLowerTick": 26, + "reserveA": 0, + "reserveB": 0.9906868132777966, + "cumulativeTokenAPerShare": 634.5481486494297, + "cumulativeTokenBPerShare": 631.2067825136984, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.9662899082639463, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.008684381499237066 + }, + { + "binId": 1197, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 27, + "originalLowerTick": 27, + "reserveA": 0, + "reserveB": 0.9905881522584051, + "cumulativeTokenAPerShare": 632.0815016584576, + "cumulativeTokenBPerShare": 628.6273564111834, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.966290919253447, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.008628032938265376 + }, + { + "binId": 1198, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 28, + "originalLowerTick": 28, + "reserveA": 0, + "reserveB": 0.9905151847838304, + "cumulativeTokenAPerShare": 630.309302897399, + "cumulativeTokenBPerShare": 626.7394732130988, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.9662909205287823, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.00776697353121794 + }, + { + "binId": 1199, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 29, + "originalLowerTick": 29, + "reserveA": 0, + "reserveB": 0.990515184900952, + "cumulativeTokenAPerShare": 630.435371104055, + "cumulativeTokenBPerShare": 626.7394732558304, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.9662909205287661, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.007766973531217892 + }, + { + "binId": 1200, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 30, + "originalLowerTick": 30, + "reserveA": 0, + "reserveB": 0.9905151847838304, + "cumulativeTokenAPerShare": 630.5614644396373, + "cumulativeTokenBPerShare": 626.7394732130989, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.9662909205287823, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.007766973531217889 + }, + { + "binId": 1201, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 31, + "originalLowerTick": 31, + "reserveA": 0, + "reserveB": 0.9905151847857459, + "cumulativeTokenAPerShare": 630.6875830384323, + "cumulativeTokenBPerShare": 626.7394732133895, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.966290920528782, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.00776697353118329 + }, + { + "binId": 1202, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 32, + "originalLowerTick": 32, + "reserveA": 0, + "reserveB": 0.8954890732129996, + "cumulativeTokenAPerShare": 630.8137494002756, + "cumulativeTokenBPerShare": 626.7394956061801, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.8735887169185576, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.006182278919417847 + }, + { + "binId": 1276, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 6, + "originalLowerTick": 6, + "reserveA": 0, + "reserveB": 6813.231767403327, + "cumulativeTokenAPerShare": 679.9301146757575, + "cumulativeTokenBPerShare": 679.0604063350629, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 6633.063536441259, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.012346911331836616 + }, + { + "binId": 1457, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 8, + "originalLowerTick": 8, + "reserveA": 0, + "reserveB": 0.0205072013221458, + "cumulativeTokenAPerShare": 10.01901729604251, + "cumulativeTokenBPerShare": 10.002200330038727, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1458, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 9, + "originalLowerTick": 9, + "reserveA": 0, + "reserveB": 0.020507201322168586, + "cumulativeTokenAPerShare": 10.021021199691889, + "cumulativeTokenBPerShare": 10.002200330038725, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1459, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 10, + "originalLowerTick": 10, + "reserveA": 0, + "reserveB": 0.02050720132216859, + "cumulativeTokenAPerShare": 10.02302550414204, + "cumulativeTokenBPerShare": 10.002200330038727, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1460, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 11, + "originalLowerTick": 11, + "reserveA": 0, + "reserveB": 0.0205072013221458, + "cumulativeTokenAPerShare": 10.025030209473124, + "cumulativeTokenBPerShare": 10.002200330038727, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1461, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 12, + "originalLowerTick": 12, + "reserveA": 0, + "reserveB": 0.020507201322168586, + "cumulativeTokenAPerShare": 10.02703531576532, + "cumulativeTokenBPerShare": 10.002200330038725, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1462, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 13, + "originalLowerTick": 13, + "reserveA": 0, + "reserveB": 0.020507201322168586, + "cumulativeTokenAPerShare": 10.029040823098825, + "cumulativeTokenBPerShare": 10.002200330038727, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1463, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 14, + "originalLowerTick": 14, + "reserveA": 0, + "reserveB": 0.020507201322145785, + "cumulativeTokenAPerShare": 10.031046731553854, + "cumulativeTokenBPerShare": 10.002200330038727, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1464, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 15, + "originalLowerTick": 15, + "reserveA": 0, + "reserveB": 0.02050720132216859, + "cumulativeTokenAPerShare": 10.033053041210632, + "cumulativeTokenBPerShare": 10.002200330038727, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1465, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 16, + "originalLowerTick": 16, + "reserveA": 0, + "reserveB": 0.020507198707935364, + "cumulativeTokenAPerShare": 10.031860841664033, + "cumulativeTokenBPerShare": 9.999012212028196, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1466, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 17, + "originalLowerTick": 17, + "reserveA": 0, + "reserveB": 0.02050638104231858, + "cumulativeTokenAPerShare": 9.033179499359571, + "cumulativeTokenBPerShare": 9.001800246026404, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1467, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 18, + "originalLowerTick": 18, + "reserveA": 0, + "reserveB": 0.020506381042295768, + "cumulativeTokenAPerShare": 9.034986225591238, + "cumulativeTokenBPerShare": 9.001800246026404, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1468, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 19, + "originalLowerTick": 19, + "reserveA": 0, + "reserveB": 0.02050638104231858, + "cumulativeTokenAPerShare": 9.036793313186218, + "cumulativeTokenBPerShare": 9.001800246026404, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1469, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 20, + "originalLowerTick": 20, + "reserveA": 0, + "reserveB": 0.02050638104231858, + "cumulativeTokenAPerShare": 9.038600762216788, + "cumulativeTokenBPerShare": 9.001800246026404, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1470, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 21, + "originalLowerTick": 21, + "reserveA": 0, + "reserveB": 0.02050638104229576, + "cumulativeTokenAPerShare": 9.040408572755238, + "cumulativeTokenBPerShare": 9.001800246026404, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1471, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 22, + "originalLowerTick": 22, + "reserveA": 0, + "reserveB": 0.02050638104231858, + "cumulativeTokenAPerShare": 9.042216744873874, + "cumulativeTokenBPerShare": 9.001800246026404, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.020499, + "timestamp": 1694794943, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1472, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 33, + "originalLowerTick": 33, + "reserveA": 0, + "reserveB": 0.03148397637545181, + "cumulativeTokenAPerShare": 562.9138098446691, + "cumulativeTokenBPerShare": 559.1662650252136, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.030795197798522824, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.007735275166424647 + }, + { + "binId": 1473, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -17, + "originalLowerTick": -17, + "reserveA": 0.000123004920147605, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000406, + "cumulativeTokenBPerShare": 1.0033253519671381, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1474, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -18, + "originalLowerTick": -18, + "reserveA": 0.000123004920147605, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000406, + "cumulativeTokenBPerShare": 1.0035260270707886, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1475, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -19, + "originalLowerTick": -19, + "reserveA": 0.000123004920147605, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000406, + "cumulativeTokenBPerShare": 1.0037267423114633, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1476, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -20, + "originalLowerTick": -20, + "reserveA": 0.000123004920147605, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000406, + "cumulativeTokenBPerShare": 1.003927497697195, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1477, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -21, + "originalLowerTick": -21, + "reserveA": 0.000123004920147605, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000406, + "cumulativeTokenBPerShare": 1.004128293236008, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1478, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -22, + "originalLowerTick": -22, + "reserveA": 0.00012300492014746914, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000488, + "cumulativeTokenBPerShare": 1.004329128935943, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1479, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -23, + "originalLowerTick": -23, + "reserveA": 0.000123004920147605, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000406, + "cumulativeTokenBPerShare": 1.0045300048050163, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1480, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -24, + "originalLowerTick": -24, + "reserveA": 0.000123004920147605, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000406, + "cumulativeTokenBPerShare": 1.0047309208512765, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1481, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -25, + "originalLowerTick": -25, + "reserveA": 0.000123004920147605, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000406, + "cumulativeTokenBPerShare": 1.004931877082756, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 1482, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -26, + "originalLowerTick": -26, + "reserveA": 0.00012300492014746806, + "reserveB": 0, + "cumulativeTokenAPerShare": 1.0000400012000406, + "cumulativeTokenBPerShare": 1.0051328735074878, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000123, + "timestamp": 1694770403, + "annualizedFeeGrowth": 0 + }, + { + "binId": 2265, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 2, + "lowerTick": 0, + "originalLowerTick": 0, + "reserveA": 1165.6424430826492, + "reserveB": 0, + "cumulativeTokenAPerShare": 158.30169180904724, + "cumulativeTokenBPerShare": 157.26992159732026, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 1158.216468, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.014721984495616632 + }, + { + "binId": 2519, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 10, + "originalLowerTick": 10, + "reserveA": 0, + "reserveB": 0.000013023942259603, + "cumulativeTokenAPerShare": 46.13913206656431, + "cumulativeTokenBPerShare": 46.04326725430354, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.012314687812829172 + }, + { + "binId": 2520, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 11, + "originalLowerTick": 11, + "reserveA": 0, + "reserveB": 0.000013023942259591525, + "cumulativeTokenAPerShare": 46.14836035437215, + "cumulativeTokenBPerShare": 46.04326725430715, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.012314687812910664 + }, + { + "binId": 2521, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 12, + "originalLowerTick": 12, + "reserveA": 0, + "reserveB": 0.000013023939032973, + "cumulativeTokenAPerShare": 46.151369662626195, + "cumulativeTokenBPerShare": 46.03706245382777, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.012309736748139547 + }, + { + "binId": 2522, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 13, + "originalLowerTick": 13, + "reserveA": 0, + "reserveB": 0.000013022900375473998, + "cumulativeTokenAPerShare": 44.157802421819, + "cumulativeTokenBPerShare": 44.03962390302123, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.01056892222591231 + }, + { + "binId": 2523, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 14, + "originalLowerTick": 14, + "reserveA": 0, + "reserveB": 0.000013022900375088519, + "cumulativeTokenAPerShare": 44.166633712654836, + "cumulativeTokenBPerShare": 44.039623193911275, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.0105689220590736 + }, + { + "binId": 2524, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 15, + "originalLowerTick": 15, + "reserveA": 0, + "reserveB": 0.00001302237946467, + "cumulativeTokenAPerShare": 43.17061659896523, + "cumulativeTokenBPerShare": 43.03786233567677, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009963171657693339 + }, + { + "binId": 2525, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 16, + "originalLowerTick": 16, + "reserveA": 0, + "reserveB": 0.000013022379464671, + "cumulativeTokenAPerShare": 43.17925115400161, + "cumulativeTokenBPerShare": 43.037862335686924, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009963171657658844 + }, + { + "binId": 2526, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 17, + "originalLowerTick": 17, + "reserveA": 0, + "reserveB": 0.000013022376322679998, + "cumulativeTokenAPerShare": 43.18182372407074, + "cumulativeTokenBPerShare": 43.031820288169364, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009958506902450632 + }, + { + "binId": 2527, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 18, + "originalLowerTick": 18, + "reserveA": 0, + "reserveB": 0.000013021858574681514, + "cumulativeTokenAPerShare": 42.19111100799577, + "cumulativeTokenBPerShare": 42.03614083839577, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009059970316406115 + }, + { + "binId": 2528, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 19, + "originalLowerTick": 19, + "reserveA": 0, + "reserveB": 0.000013021858574695, + "cumulativeTokenAPerShare": 42.199549652106924, + "cumulativeTokenBPerShare": 42.03614083839438, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009059970318713828 + }, + { + "binId": 2529, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 20, + "originalLowerTick": 20, + "reserveA": 0, + "reserveB": 0.000013021858574699998, + "cumulativeTokenAPerShare": 42.20798998403354, + "cumulativeTokenBPerShare": 42.036140838395156, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009059970323311335 + }, + { + "binId": 2530, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 21, + "originalLowerTick": 21, + "reserveA": 0, + "reserveB": 0.000013021858574686513, + "cumulativeTokenAPerShare": 42.216432004112384, + "cumulativeTokenBPerShare": 42.03614083839715, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009059970323450833 + }, + { + "binId": 2531, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 22, + "originalLowerTick": 22, + "reserveA": 0, + "reserveB": 0.000013021858574698, + "cumulativeTokenAPerShare": 42.224875712675306, + "cumulativeTokenBPerShare": 42.03614083839477, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.009059970318484493 + }, + { + "binId": 2532, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 34, + "originalLowerTick": 34, + "reserveA": 0, + "reserveB": 0.000013019775223164, + "cumulativeTokenAPerShare": 38.292188453356076, + "cumulativeTokenBPerShare": 38.029655517835074, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.007453397166951762 + }, + { + "binId": 2533, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 35, + "originalLowerTick": 35, + "reserveA": 0, + "reserveB": 0.000013019775223157002, + "cumulativeTokenAPerShare": 38.29984727396138, + "cumulativeTokenBPerShare": 38.02965551782723, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.007453397163837512 + }, + { + "binId": 2534, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 36, + "originalLowerTick": 36, + "reserveA": 0, + "reserveB": 0.000013019768042874491, + "cumulativeTokenAPerShare": 38.29359769947823, + "cumulativeTokenBPerShare": 38.01584785343465, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000013, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.007443246416021819 + }, + { + "binId": 2535, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -17, + "originalLowerTick": -17, + "reserveA": 0.000014008962957492, + "reserveB": 0, + "cumulativeTokenAPerShare": 16.005441251434856, + "cumulativeTokenBPerShare": 16.058022636808715, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509260693049 + }, + { + "binId": 2536, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -18, + "originalLowerTick": -18, + "reserveA": 0.000014008962957489, + "reserveB": 0, + "cumulativeTokenAPerShare": 16.00544125143357, + "cumulativeTokenBPerShare": 16.061234401915073, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550928123471 + }, + { + "binId": 2537, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -19, + "originalLowerTick": -19, + "reserveA": 0.000014008962957490001, + "reserveB": 0, + "cumulativeTokenAPerShare": 16.005441251433716, + "cumulativeTokenBPerShare": 16.06444680940786, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509281234399 + }, + { + "binId": 2538, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -20, + "originalLowerTick": -20, + "reserveA": 0.000014008962957488, + "reserveB": 0, + "cumulativeTokenAPerShare": 16.0054412514335, + "cumulativeTokenBPerShare": 16.067659859414, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509260694761 + }, + { + "binId": 2539, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -21, + "originalLowerTick": -21, + "reserveA": 0.000014008962957487001, + "reserveB": 0, + "cumulativeTokenAPerShare": 16.005441251432284, + "cumulativeTokenBPerShare": 16.070873552061357, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.0057555092606951345 + }, + { + "binId": 2540, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -22, + "originalLowerTick": -22, + "reserveA": 0.000014008962957472413, + "reserveB": 0, + "cumulativeTokenAPerShare": 16.005441251433215, + "cumulativeTokenBPerShare": 16.07408788748143, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509260694722 + }, + { + "binId": 2541, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -23, + "originalLowerTick": -23, + "reserveA": 0.000014008962957484, + "reserveB": 0, + "cumulativeTokenAPerShare": 16.005441251430927, + "cumulativeTokenBPerShare": 16.07730286579764, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509260696192 + }, + { + "binId": 2542, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -24, + "originalLowerTick": -24, + "reserveA": 0.000014008600294993, + "reserveB": 0, + "cumulativeTokenAPerShare": 15.357827211606201, + "cumulativeTokenBPerShare": 15.42984371462987, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.00575550925720525 + }, + { + "binId": 2543, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -25, + "originalLowerTick": -25, + "reserveA": 0.000014008402604574999, + "reserveB": 0, + "cumulativeTokenAPerShare": 15.004801040185857, + "cumulativeTokenBPerShare": 15.078199728482858, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509259766168 + }, + { + "binId": 2544, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": -26, + "originalLowerTick": -26, + "reserveA": 0.000014008402604559407, + "reserveB": 0, + "cumulativeTokenAPerShare": 15.004801040184857, + "cumulativeTokenBPerShare": 15.081215519209714, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 0.000014, + "timestamp": 1699215827, + "annualizedFeeGrowth": 0.005755509280307726 + }, + { + "binId": 2588, + "poolId": "0xd0b2f5018b5d22759724af6d4281ac0b13266360", + "kind": 0, + "lowerTick": 7, + "originalLowerTick": 7, + "reserveA": 0, + "reserveB": 17.940621721095518, + "cumulativeTokenAPerShare": 7.011488925175008, + "cumulativeTokenBPerShare": 7.001120123210753, + "mergeCumulativeTokenAPerShare": 0, + "mergeCumulativeTokenBPerShare": 0, + "mergeBinBalance": 0, + "mergeId": null, + "mergedAtTimestamp": null, + "totalSupply": 17.935599, + "timestamp": 1699160627, + "annualizedFeeGrowth": 0.006153749786658708 + } +]; + +const pool = POOLS.pools[0]; + +export default { + title: "common/PoolSelectionGraph", + component: PoolSelectionGraph, +} as Meta; + +const buttonStyles = { + width: "80px", + height: "20px", + margin: "5px 2px", + backgroundColor: "#b5cfeb" +} + +const Template: ComponentStory = args => { + const [minPrice, setMinPrice] = useState(null); + const [maxPrice, setMaxPrice] = useState(null); + const [focusTick, setFocusTick] = useState(tickToPrice(18)); + const [zoomLevel, setZoomLevel] = useState(3); + const [selectedFullRange, setSelectedFullRange] = useState(false); + const width = 600; + const height = 400; + + function zoomIn() { + if (zoomLevel < 5) { + setZoomLevel(zoomLevel + 1); + } + } + + function zoomOut() { + if (zoomLevel > 0) { + setZoomLevel(zoomLevel - 1); + } + } + + function moveFocus(move: number) { + if (focusTick) { + setFocusTick(focusTick + move); + } + } + + return ( + <> +
+ + +
+
+ + +
+ + + ); +}; + +export const Default = Template.bind({}); +Default.args = { + bins: pool.bins, + currentTick: 18, + // zoomLevel: 0 +}; \ No newline at end of file diff --git a/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.styles.ts b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.styles.ts new file mode 100644 index 000000000..b9362ac4a --- /dev/null +++ b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.styles.ts @@ -0,0 +1,104 @@ +import styled from "@emotion/styled"; +import { fonts } from "@constants/font.constant"; + +export const PoolSelectionGraphWrapper = styled.div` + position: relative; + display: flex; + flex-direction: column; + width: 100%; + height: auto; + + svg { + overflow: overlay; + } + + text { + ${fonts.p4} + color: ${({ theme }) => theme.color.text02}; + } + + .tooltip-container { + position: absolute; + pointer-events: none; + + .tooltip-wrapper { + display: flex; + flex-direction: column; + width: 390px; + background-color: ${({ theme }) => theme.color.background02}; + padding: 16px; + align-items: flex-start; + border-radius: 8px; + gap: 8px; + ${fonts.body12}; + line-height: 1em; + + .row { + display: flex; + flex-direction: row; + width: 100%; + gap: 16px; + + & > span { + display: flex; + flex-direction: row; + align-items: center; + } + } + + .header { + display: flex; + flex-direction: column; + color: ${({ theme }) => theme.color.text04}; + margin-bottom: 5px; + } + + .content { + display: flex; + flex-direction: column; + color: ${({ theme }) => theme.color.text02}; + gap: 8px; + } + + .token { + flex-shrink: 0; + width: 80px; + gap: 8px; + + img { + width: 20px; + height: 20px; + } + } + + .amount { + flex-shrink: 0; + width: 80px; + + & .hidden { + display: inline; + overflow: hidden; + text-overflow: clip; + white-space: nowrap; + word-break: break-all; + } + } + + .price-range { + width: 100%; + } + } + } + + .tick { + text { + ${fonts.p7} + color: ${({ theme }) => theme.color.text04}; + } + } + + .selection { + stroke: none; + fill-opacity: 1; + } +`; diff --git a/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx new file mode 100644 index 000000000..bbefcdf77 --- /dev/null +++ b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx @@ -0,0 +1,508 @@ +import React, { useEffect, useRef } from "react"; +import { PoolSelectionGraphWrapper } from "./PoolSelectionGraph.styles"; +import * as d3 from "d3"; +import { PoolBinModel } from "@models/pool/pool-bin-model"; +import { tickToPrice } from "@utils/swap-utils"; +import BigNumber from "bignumber.js"; + +export interface PoolSelectionGraphProps { + bins: PoolBinModel[]; + currentTick: number | null; + zoomLevel: number; + displayLabels?: number; + minPrice: number | null; + maxPrice: number | null; + setMinPrice: (tick: number | null) => void; + setMaxPrice: (tick: number | null) => void; + selectedFullRange: boolean; + setSelectedFullRange: (selected: boolean) => void; + focusTick: number | null; + width: number; + height: number; + margin?: { + left: number; + right: number; + top: number; + bottom: number; + }, +} + +function makeBadge( + refer: d3.Selection, + right = false, + reverse = false, +) { + const badge = refer.append("svg") + .attr("x", "0") + .attr("y", "0") + .attr("width", "11") + .attr("height", "32") + .style("fill", "none"); + badge.append("path") + .attr("d", "M0 2C0 0.895431 0.895431 0 2 0H11V32H2C0.895431 32 0 31.1046 0 30V2Z") + .style("fill", "#596782"); + badge.append("rect") + .attr("x", "3.5") + .attr("y", "2") + .attr("width", "1") + .attr("height", "28") + .style("fill", "#90A2C0"); + badge.append("rect") + .attr("x", "6.5") + .attr("y", "2") + .attr("width", "1") + .attr("height", "28") + .style("fill", "#90A2C0"); + + makeLabel(refer, right, reverse); + return badge; +} + +function makeLabel( + refer: d3.Selection, + right = false, + reverse = false, +) { + const id = right === false ? "start-price" : "end-price"; + const color = right === false ? "#EA3943B2" : "#16C78AB2"; + if (refer.select(`#${id}`)) { + refer.append("g") + .attr("id", id); + } + + const margin = right === reverse ? -60 : 20; + const labelWrapper = refer.select(`#${id}`); + labelWrapper.append("rect") + .attr("x", margin) + .attr("y", "0") + .attr("width", "50") + .attr("height", "23") + .attr("rx", 5) + .style("fill", color); + labelWrapper.append("text") + .attr("x", margin + 25) + .attr("y", "0") + .attr("dy", "15") + .attr("text-anchor", "middle") + .style("fill", "#FFF"); +} + +function changeLine( + selectionElement: d3.Selection, + type: "start" | "end", + x: number, + rate: number, + right = false, +) { + const linePosition = right ? 0 : -12; + const rateStr = `${Math.round(rate).toFixed(0)}%`; + const lineElement = selectionElement.select(`#${type}`) + .attr("x", x); + + lineElement.select("svg") + .attr("x", linePosition); + + const priceId = `${type}-price`; + const color = type === "start" ? "#EA3943B2" : "#16C78AB2"; + + const margin = right === false ? -70 : 20; + const labelWrapper = lineElement.select(`#${priceId}`); + labelWrapper.select("rect") + .attr("x", margin) + .attr("y", "0") + .attr("width", "50") + .attr("height", "23") + .attr("rx", 5) + .style("fill", color); + labelWrapper.select("text") + .attr("x", margin + 25) + .attr("y", "0") + .attr("dy", "15") + .attr("text-anchor", "middle") + .style("fill", "#FFF") + .html(rateStr); +} + +const PoolSelectionGraph: React.FC = ({ + bins, + currentTick = null, + displayLabels = 8, + width, + height, + minPrice, + maxPrice, + setMinPrice, + setMaxPrice, + selectedFullRange, + setSelectedFullRange, + focusTick, + zoomLevel, + margin = { + left: 0, + right: 0, + top: 0, + bottom: 0, + } +}) => { + const svgRef = useRef(null); + const chartRef = useRef(null); + const brushRef = useRef(null); + const tooltipRef = useRef(null); + const labelHeight = displayLabels > 0 ? 20 : 0; + + const paddingHeight = 20; + const boundsWidth = width - margin.right - margin.left; + const boundsHeight = height - margin.top - margin.bottom - labelHeight - paddingHeight; + const tickAmount = 10000; + + const [, maxX] = d3.extent(bins.map(bin => bin.currentTick)); + const maxXTick = tickToPrice(maxX ?? 1) * 10000; + const binRange = maxXTick / tickAmount; + const currentPrice = tickToPrice(currentTick || 0); + + const resolvedBins = () => { + const sortedBins = bins.sort((b1, b2) => b1.currentTick - b2.currentTick) + .map(bin => ({ ...bin, currentPrice: tickToPrice(bin.currentTick) })); + console.log(sortedBins); + return Array.from( + { length: tickAmount }, + (_, index) => { + const startPrice = binRange * index; + const endPrice = startPrice + binRange; + return sortedBins.filter( + bin => + bin.currentPrice < endPrice && + bin.currentPrice >= startPrice) + .reduce((a, b) => a + b.totalSupply, 0); + }, + ); + }; + + /** D3 Variables */ + const defaultScaleX = d3 + .scaleLinear() + .domain([-maxXTick, maxXTick]) + .range([margin.left, boundsWidth]); + + const scaleX = defaultScaleX.copy(); + const xAxis = d3 + .axisBottom(scaleX) + .tickArguments([displayLabels]); + const [, max] = d3.extent(resolvedBins()); + + const scaleY = d3 + .scaleLinear() + .domain([0, max || 0]) + .range([boundsHeight, 0]); + + const binData = () => { + function fillByBin(num: number, index: number) { + if (num === 0) { + return "#4c4c4c"; + } + if (currentTick && index * binRange < tickToPrice(currentTick)) { + return "url(#gradient-bar-green)"; + } + return "url(#gradient-bar-red)"; + } + + return resolvedBins().map((bin, index) => { + const x = scaleX(index * binRange); + const y = bin < 100 ? boundsHeight - 5 : scaleY(bin); + const fill = fillByBin(bin, index); + const width = scaleX(binRange) - scaleX(0) > 2 ? scaleX(binRange) - scaleX(0) - 2 : scaleX(binRange) - scaleX(0); + const height = boundsHeight - y; + + return { + x, + y, + fill, + width, + height + }; + }); + }; + + /** Brush */ + const brush = d3.brushX() + .extent([ + [scaleX(0), 0], + [boundsWidth, boundsHeight + paddingHeight] + ]) + .on("start brush end", onBrush); + + function onBrush(event: d3.D3BrushEvent) { + if (event.selection !== null) { + if (Array.isArray(event.selection)) { + if (typeof event.selection[0] !== "number" || typeof event.selection[1] !== "number") { + return; + } + + if (!brushRef.current) { + return; + } + + if (event.selection[0] === event.selection[1]) { + setMinPrice(null); + setMaxPrice(null); + const selectionElement = d3.select(brushRef.current); + selectionElement.select("#start").remove(); + selectionElement.select("#end").remove(); + return; + } + + const minPricePosition = event.selection[0]; + const minPrice = scaleX.invert(minPricePosition); + const maxPricePosition = event.selection[1]; + const maxPrice = scaleX.invert(maxPricePosition); + + setSelectedFullRange(false); + + if (event.type === "drag" || event.type === "end") { + setMinPrice(BigNumber(minPrice.toPrecision(12)).toNumber()); + setMaxPrice(BigNumber(maxPrice.toPrecision(12)).toNumber()); + } + initBrushGradient(currentPrice, minPrice, maxPrice); + } + } + } + + function initBrushGradient(currentPrice: number | null, minPrice: number | null, maxPrice: number | null) { + if (!currentPrice || !minPrice || !maxPrice) { + return; + } + + function getCurrentTickOffset(currentPrice: number, minPrice: number, maxPrice: number) { + const diffMinPrice = currentPrice - minPrice; + const diffMaxPrice = maxPrice - currentPrice; + if (diffMinPrice <= 0) { + return "0%"; + } + if (diffMaxPrice <= 0) { + return "100%"; + } + return `${(diffMinPrice / (diffMaxPrice + diffMinPrice)) * 100}%`; + } + + const currentTickOffset = getCurrentTickOffset(currentPrice, minPrice, maxPrice); + d3.select(svgRef.current) + .select("defs") + .select("#gradient-selection-current-position") + .attr("offset", currentTickOffset); + + const selectionElement = d3.select(brushRef.current); + + /** Start Line */ + if (selectionElement.selectChild("#start").empty()) { + const startLineElement = selectionElement.insert("svg") + .attr("id", "start"); + startLineElement.insert("line") + .attr("y1", 0) + .attr("y2", boundsHeight + paddingHeight) + .style("stroke", "#ff2e2e") + .attr("stroke-width", 2); + + makeBadge(startLineElement); + } + + /** End Line */ + if (selectionElement.selectChild("#end").empty()) { + const endLineElement = selectionElement.insert("svg") + .attr("id", "end"); + + endLineElement.insert("line") + .attr("y1", boundsHeight + paddingHeight) + .attr("y2", 0) + .style("stroke", "#2eff82") + .attr("stroke-width", 2); + + makeBadge(endLineElement, true); + } + + /** Draw Lines */ + const isRightStartLine = scaleX(minPrice) - 75 < 0; + const minPriceRate = currentPrice === 0 ? 0 : (minPrice - currentPrice) / currentPrice * 100; + changeLine(selectionElement, "start", scaleX(minPrice), minPriceRate, isRightStartLine); + + const isRightEndLine = scaleX(maxPrice) + 75 < boundsWidth; + const maxPriceRate = currentPrice === 0 ? 0 : (maxPrice - currentPrice) / currentPrice * 100; + changeLine(selectionElement, "end", scaleX(maxPrice), maxPriceRate, isRightEndLine); + } + + /** Zoom */ + const zoom: d3.ZoomBehavior = d3 + .zoom() + .scaleExtent([-maxXTick, maxXTick]) + .translateExtent([ + [0, 0], + [boundsWidth, boundsHeight] + ]) + .extent([ + [0, 0], + [boundsWidth, boundsHeight] + ]) + .on("zoom", onZoom); + + function onZoom(event: d3.D3ZoomEvent) { + const blocks = ["brush", "click"]; + if (event?.sourceEvent && blocks.includes(event.sourceEvent.type)) return; // ignore zoom-by-brush + const transform = event.transform; + scaleX.domain(transform.rescaleX(defaultScaleX).domain()); + } + + function initZoom() { + const svgElement = d3.select(svgRef.current); + const scaleRate = BigNumber(2).pow(zoomLevel * 3).toNumber(); + zoom.scaleTo(svgElement, scaleRate, [scaleX(focusTick || 0), 0]); + + brush.extent([ + [scaleX(0), 0], + [boundsWidth, boundsHeight + paddingHeight] + ]); + } + + function updateChart() { + d3.select(chartRef.current) + .selectChildren() + .remove(); + + const rects = d3.select(chartRef.current); + rects.attr("clip-path", "url(#clip)"); + rects.selectAll("rects") + .data(binData()) + .enter() + .append("rect") + .style("fill", bin => bin.fill) + .attr("class", "rects") + .attr("x", bin => bin.x) + .attr("y", bin => bin.y) + .attr("width", bin => bin.width) + .attr("height", bin => bin.height); + + if (displayLabels > 0) { + rects.append("g") + .attr("transform", `translate(0,${boundsHeight})`) + .call(xAxis); + } + + // Create a line of current tick. + if (currentTick) { + if (d3.select(svgRef.current).select("#current-price").empty()) { + d3.select(svgRef.current) + .append("line") + .attr("id", "current-price"); + } + d3.select(svgRef.current) + .select("#current-price") + .attr("x1", scaleX(tickToPrice(currentTick))) + .attr("x2", scaleX(tickToPrice(currentTick))) + .attr("y1", boundsHeight + paddingHeight) + .attr("y2", 0) + .attr("stroke-dasharray", 4) + .attr("stroke", "#FFFFFF") + .attr("stroke-width", 1); + } + + } + + function interactChart() { + if (focusTick) { + const svgElement = d3.select(svgRef.current); + zoom.translateTo( + svgElement, + scaleX(focusTick), + 0 + ); + } + initZoom(); + updateChart(); + + if (brushRef.current && minPrice && maxPrice) { + try { + initBrushGradient(currentPrice, minPrice, maxPrice); + brush.move( + d3.select(brushRef.current), + [scaleX(minPrice), scaleX(maxPrice)] + ); + } catch { } + } + } + + useEffect(() => { + interactChart(); + }, [zoomLevel, focusTick, minPrice, maxPrice, currentTick]); + + useEffect(() => { + if (selectedFullRange && brushRef.current) { + brush.move( + d3.select(brushRef.current), + [scaleX(0), maxXTick] + ); + } + }, [selectedFullRange]); + + useEffect(() => { + const svgElement = d3.select(svgRef.current) + .attr("width", width) + .attr("height", height) + .attr("viewBox", [0, 0, width, height]) + .attr("style", "max-width: 100%; height: auto;"); + + const defElement = svgElement.select("defs"); + const existClipPath = defElement.select("clipPath") + .empty(); + + if (existClipPath) { + defElement.append("clipPath") + .attr("id", "clip") + .append("rect") + .attr("width", width) + .attr("height", height); + } + + if (brushRef.current) { + const brushElement = d3.select(brushRef.current); + brushElement.call(brush); + const selectionElement = brushElement.select(".selection"); + selectionElement.style("fill", "url(#gradient-selection-area)"); + } + }, [scaleX, scaleY]); + + return ( + + + + + + + + + + + + + + + + + + + + +
+
+
+ ); +}; + +export default PoolSelectionGraph; \ No newline at end of file diff --git a/packages/web/src/constants/option.constant.ts b/packages/web/src/constants/option.constant.ts index b5be2c839..0df86490a 100644 --- a/packages/web/src/constants/option.constant.ts +++ b/packages/web/src/constants/option.constant.ts @@ -10,6 +10,7 @@ export type SwapFeeTierType = export interface SwapFeeTierInfo { type: SwapFeeTierType; fee: number; + tickSpacing: number; rateStr: string; description: string; } @@ -18,30 +19,35 @@ export const SwapFeeTierInfoMap: Record = { FEE_100: { type: "FEE_100", fee: 100, + tickSpacing: 2, rateStr: "0.01%", description: "Best for very stable pairs", }, FEE_500: { type: "FEE_500", fee: 500, + tickSpacing: 10, rateStr: "0.05%", description: "Best for stable pairs", }, FEE_3000: { type: "FEE_3000", fee: 3000, + tickSpacing: 60, rateStr: "0.3%", description: "Best for most pairs", }, FEE_10000: { type: "FEE_10000", fee: 10000, + tickSpacing: 200, rateStr: "1%", description: "Best for exotic pairs", }, NONE: { type: "NONE", fee: 0, + tickSpacing: 1, rateStr: "-", description: "-", },