feat: add prefixed percentage to select range

lib/app/create/deposit/deposit_cubit.dart

@@ -108,17 +108,28 @@ class DepositCubit extends Cubit<DepositState> with KeysMixin, V3PoolConversorsM
     _selectedYieldTimeframe = yieldTimeFrame;
     _selectedYieldStreamController.add(selectedYield);
 
-    if (selectedYield != null) await getSelectedPoolTick();
+    if (selectedYield != null) {
+      _latestPoolTick = BigInt.parse(yieldDto!.latestTick);
+      _pooltickStreamController.add(_latestPoolTick);
+
+      await getSelectedPoolTick(forceRefresh: true);
+    }
   }
 
-  Future<void> getSelectedPoolTick() async {
+  Future<void> getSelectedPoolTick({bool forceRefresh = false}) async {
     if (selectedYield == null) return;
 
-    _latestPoolTick = null;
-    _pooltickStreamController.add(null);
-
     final selectedYieldBeforeCall = selectedYield;
-    BigInt tick = await _poolService.getPoolTick(selectedYieldBeforeCall!);
+
+    final tick = await _zupSingletonCache.run(
+      () => _poolService.getPoolTick(selectedYieldBeforeCall!),
+      expiration: const Duration(minutes: 1),
+      ignoreCache: forceRefresh,
+      key: poolTickCacheKey(
+        network: selectedYield!.network,
+        poolAddress: selectedYield!.poolAddress,
+      ),
+    );
 
     if (selectedYieldBeforeCall != selectedYield) return await getSelectedPoolTick();
 

lib/app/create/deposit/deposit_page.dart

@@ -98,8 +98,11 @@ class _DepositPageState extends State<DepositPage>
   bool isMaxRangeInfinity = true;
   bool isMinRangeInfinity = true;
   bool isBaseTokenAmountUserInput = false;
+  double? percentRange;
   double minPrice = 0;
   double maxPrice = 0;
+  RangeController minRangeController = RangeController();
+  RangeController maxRangeController = RangeController();
 
   late Slippage selectedSlippage = _cubit.depositSettings.slippage;
   late Duration selectedDeadline = _cubit.depositSettings.deadline;
@@ -141,13 +144,38 @@ class _DepositPageState extends State<DepositPage>
 
   void setFullRange() {
     setState(() {
+      percentRange = null;
       isMinRangeInfinity = true;
       isMaxRangeInfinity = true;
     });
 
+    minPrice = 0;
+    maxPrice = 0;
+
     calculateDepositTokensAmount();
   }
 
+  void setPercentageRange(double percentage) {
+    if (currentPrice == 0) return;
+
+    setState(() {
+      percentRange = percentage;
+      isMinRangeInfinity = false;
+      isMaxRangeInfinity = false;
+
+      final percentageDecimals = percentage / 100;
+      final percentageDifference = currentPrice * percentageDecimals;
+
+      minPrice = currentPrice - percentageDifference;
+      maxPrice = currentPrice + percentageDifference;
+
+      minRangeController.setRange(minPrice);
+      maxRangeController.setRange(maxPrice);
+
+      calculateDepositTokensAmount();
+    });
+  }
+
   void selectYield(YieldDto? yieldDto, YieldTimeFrame? yieldTimeFrame) async {
     _cubit.selectYield(yieldDto, yieldTimeFrame).then((_) => calculateDepositTokensAmount());
 
@@ -174,6 +202,7 @@ class _DepositPageState extends State<DepositPage>
     quoteTokenAmountController.text = currentBaseTokenDepositAmount;
     isBaseTokenAmountUserInput = isReversed && !isBaseTokenAmountUserInput;
 
+    if (percentRange != null) setPercentageRange(percentRange!);
     calculateDepositTokensAmount();
   }
 
@@ -328,6 +357,13 @@ class _DepositPageState extends State<DepositPage>
     super.initState();
   }
 
+  @override
+  void dispose() {
+    minRangeController.dispose();
+    maxRangeController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Padding(
@@ -703,13 +739,6 @@ class _DepositPageState extends State<DepositPage>
           children: [
             _sectionTitle(S.of(context).depositPageRangeSectionTitle),
             const SizedBox(width: 12),
-            ZupTextButton(
-              key: const Key("full-range-button"),
-              onPressed: () => setFullRange(),
-              label: S.of(context).depositPageRangeSectionFullRange,
-              icon: Assets.icons.circleDotted.svg(),
-              alignLeft: false,
-            ),
             const Spacer(),
             if (!isMobileSize(context)) tokenSwitcher
           ],
@@ -722,6 +751,7 @@ class _DepositPageState extends State<DepositPage>
         const SizedBox(height: 10),
         StreamBuilder(
             stream: _cubit.poolTickStream,
+            initialData: _cubit.latestPoolTick,
             builder: (context, poolTickSnapshot) {
               return Text(
                       "1 ${baseToken.symbol} ≈ ${() {
@@ -738,12 +768,51 @@ class _DepositPageState extends State<DepositPage>
                 enabled: poolTickSnapshot.data == null,
               );
             }),
-        const SizedBox(height: 20),
+        const SizedBox(height: 10),
+        Wrap(
+          spacing: 10,
+          runSpacing: 10,
+          children: [
+            ZupMiniButton(
+              key: const Key("full-range-button"),
+              onPressed: () => setFullRange(),
+              isSelected: isMaxRangeInfinity && isMinRangeInfinity,
+              title: S.of(context).depositPageRangeSectionFullRange,
+              icon: Assets.icons.circleDotted.svg(),
+            ),
+            ZupMiniButton(
+              key: const Key("5-percent-range-button"),
+              onPressed: () => setPercentageRange(5),
+              isSelected: percentRange == 5,
+              title: "5%",
+              icon: Assets.icons.plusminus.svg(),
+              // alignLeft: true,
+            ),
+            ZupMiniButton(
+              key: const Key("20-percent-range-button"),
+              onPressed: () => setPercentageRange(20),
+              isSelected: percentRange == 20,
+              title: "20%",
+              icon: Assets.icons.plusminus.svg(),
+              // alignLeft: true,
+            ),
+            ZupMiniButton(
+              key: const Key("50-percent-range-button"),
+              onPressed: () => setPercentageRange(50),
+              isSelected: percentRange == 50,
+              title: "50%",
+              icon: Assets.icons.plusminus.svg(),
+              // alignLeft: true,
+            ),
+          ],
+        ),
+        const SizedBox(height: 10),
         StreamBuilder(
             stream: _cubit.poolTickStream,
             builder: (context, snapshot) {
               return RangeSelector(
                 key: const Key("min-price-selector"),
+                onUserType: () => percentRange = null,
                 onPriceChanged: (price) {
                   setState(() {
                     if (price == 0) {
@@ -766,6 +835,7 @@ class _DepositPageState extends State<DepositPage>
                 tickSpacing: _cubit.selectedYield!.tickSpacing,
                 type: RangeSelectorType.minPrice,
                 isInfinity: isMinRangeInfinity,
+                rangeController: minRangeController,
                 state: () {
                   if (isOutOfRange.minPrice) {
                     return RangeSelectorState(
@@ -786,6 +856,7 @@ class _DepositPageState extends State<DepositPage>
                 key: const Key("max-price-selector"),
                 displayBaseTokenSymbol: baseToken.symbol,
                 displayQuoteTokenSymbol: quoteToken.symbol,
+                onUserType: () => percentRange = null,
                 onPriceChanged: (price) {
                   setState(() {
                     if (price == 0) {
@@ -807,6 +878,7 @@ class _DepositPageState extends State<DepositPage>
                 poolToken1: _cubit.selectedYield!.token1,
                 isReversed: areTokensReversed,
                 tickSpacing: _cubit.selectedYield!.tickSpacing,
+                rangeController: maxRangeController,
                 state: () {
                   if (isRangeInvalid) {
                     return RangeSelectorState(

lib/app/create/deposit/widgets/range_selector.dart

@@ -42,6 +42,16 @@ class RangeSelectorState {
   final String? message;
 }
 
+class RangeController extends ChangeNotifier {
+  double currentRange = 0;
+
+  void setRange(double range) {
+    currentRange = range;
+
+    notifyListeners();
+  }
+}
+
 class RangeSelector extends StatefulWidget {
   const RangeSelector({
     super.key,
@@ -53,8 +63,10 @@ class RangeSelector extends StatefulWidget {
     required this.tickSpacing,
     required this.onPriceChanged,
     required this.type,
+    this.onUserType,
     this.isInfinity = false,
     this.initialPrice,
+    this.rangeController,
     this.state = const RangeSelectorState(type: RangeSelectorStateType.regular),
   });
 
@@ -66,9 +78,11 @@ class RangeSelector extends StatefulWidget {
   final double? initialPrice;
   final int tickSpacing;
   final Function(double price) onPriceChanged;
+  final Function()? onUserType;
   final RangeSelectorState state;
   final RangeSelectorType type;
   final bool isInfinity;
+  final RangeController? rangeController;
 
   @override
   State<RangeSelector> createState() => _RangeSelectorState();
@@ -91,12 +105,12 @@ class _RangeSelectorState extends State<RangeSelector> with V3PoolConversorsMixi
     }
 
     final typedDecimals = typedPrice.decimals;
+    final nextPrice = getAdjustedPrice(typedPrice);
 
-    controller.text = Decimal.tryParse(getAdjustedPrice(typedPrice).toString())
-            ?.toStringAsFixed(typedDecimals < 4 ? 4 : typedDecimals) ??
-        "";
+    controller.text =
+        Decimal.tryParse(nextPrice.toString())?.toStringAsFixed(typedDecimals < 4 ? 4 : typedDecimals) ?? "";
 
-    widget.onPriceChanged(getAdjustedPrice(typedPrice));
+    widget.onPriceChanged(nextPrice);
   }
 
   double getAdjustedPrice(double price) {
@@ -186,6 +200,11 @@ class _RangeSelectorState extends State<RangeSelector> with V3PoolConversorsMixi
   void initState() {
     super.initState();
 
+    widget.rangeController?.addListener(() {
+      userTypedValue = widget.rangeController?.currentRange.toString();
+      adjustTypedAmountAndCallback();
+    });
+
     WidgetsBinding.instance.addPostFrameCallback((_) {
       if (widget.isInfinity) return setInfinity();
 
@@ -251,7 +270,10 @@ class _RangeSelectorState extends State<RangeSelector> with V3PoolConversorsMixi
                           keyboardType: const TextInputType.numberWithOptions(decimal: true),
                           clipBehavior: Clip.none,
                           controller: controller,
-                          onChanged: (value) => userTypedValue = value,
+                          onChanged: (value) {
+                            userTypedValue = value;
+                            widget.onUserType?.call();
+                          },
                           style: const TextStyle(fontSize: 28),
                           decoration: const InputDecoration(
                             enabledBorder: InputBorder.none,

lib/core/dtos/yield_dto.dart

@@ -49,6 +49,7 @@ class YieldDto with _$YieldDto {
     required num yield90d,
     required int chainId,
     required PoolType poolType,
+    @Default("0") String latestTick,
     @Default(0) num totalValueLockedUSD,
     @Default(EthereumConstants.zeroAddress) @JsonKey(name: "hooksAddress") String v4Hooks,
     @JsonKey(name: "poolManagerAddress") String? v4PoolManager,
@@ -68,6 +69,7 @@ class YieldDto with _$YieldDto {
         yield24h: 32.2,
         yield30d: 32.2,
         yield90d: 32.2,
+        latestTick: "1567241",
         positionManagerAddress: "0x5Df2f0aFb5b5bB2Df9D1e9C7b6f5f0DD5f9eD5e0",
         poolAddress: "0x5Df2f0aFb5b5bB2Df9D1e9C7b6f5f0DD5f9eD5e0",
         poolType: PoolType.v3,

lib/core/dtos/yields_dto.dart

@@ -33,6 +33,7 @@ class YieldsDto with _$YieldsDto {
   factory YieldsDto.fixture() => const YieldsDto(
         pools: [
           YieldDto(
+            latestTick: "637812562",
             positionManagerAddress: "0x06eFdBFf2a14a7c8E15944D1F4A48F9F95F663A4",
             poolType: PoolType.v3,
             token0: TokenDto(

pubspec.lock

@@ -1293,7 +1293,7 @@ packages:
     description:
       path: "."
       ref: main
-      resolved-ref: "42dfe9f12673e21d2bc15623a6f58a1094969f2c"
+      resolved-ref: "96c38241bbd55f27820c0fbe0e62ed53f2febed7"
       url: "https://github.com/Zup-Protocol/web3kit.git"
     source: git
     version: "0.0.1"
@@ -1351,7 +1351,7 @@ packages:
     description:
       path: "."
       ref: main
-      resolved-ref: e67c82ded372f740d5b2e7823d4bce070efdb3bb
+      resolved-ref: cd1e5f42c34c93ec91f8da476ec19cc2d2435c36
       url: "https://github.com/Zup-Protocol/zup-ui-kit.git"
     source: git
     version: "0.0.1"

pubspec.yaml

@@ -53,13 +53,13 @@ dependencies:
   firebase_analytics: ^11.4.5
   envied: ^1.1.1
 
-dependency_overrides:
-  # zup_core:
-  #   path: ../zup-core
-  # web3kit:
-  #   path: ../web3kit
-  # zup_ui_kit:
-  #   path: ../zup-ui-kit
+# dependency_overrides:
+#   zup_core:
+#     path: ../zup-core
+#   web3kit:
+#     path: ../web3kit
+#   zup_ui_kit:
+#     path: ../zup-ui-kit
 
 dev_dependencies:
   flutter_test: