DIP-6 Adaptation

src/components/balance-input.tsx

@@ -2,11 +2,12 @@ import { formatBlanace } from "@/utils";
 import Image from "next/image";
 import InputLabel from "./input-label";
 import { parseUnits } from "viem";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 export default function BalanceInput({
   isReset,
   balance,
+  max,
   symbol,
   decimals,
   logoPath,
@@ -17,6 +18,7 @@ export default function BalanceInput({
 }: {
   isReset?: boolean;
   balance: bigint;
+  max?: bigint;
   symbol: string;
   decimals: number;
   logoPath?: string;
@@ -34,6 +36,14 @@ export default function BalanceInput({
     }
   }, [isReset]);
 
+  const placeholder = useMemo(() => {
+    if (typeof max === "bigint") {
+      return `Max: ${formatBlanace(max, decimals, { keepZero: false, precision: decimals })}`;
+    } else {
+      return `Balance: ${formatBlanace(balance, decimals, { keepZero: false, precision: decimals })}`;
+    }
+  }, [balance, decimals, max]);
+
   return (
     <div className={`flex flex-col gap-middle ${className}`}>
       {label && <InputLabel label={label} bold={boldLabel} />}
@@ -43,11 +53,15 @@ export default function BalanceInput({
         }`}
       >
         <input
-          placeholder={`Balance: ${formatBlanace(balance, decimals, { keepZero: false, precision: decimals })}`}
+          placeholder={placeholder}
           className="h-full w-[72%] bg-transparent text-sm font-light focus-visible:outline-none"
           onChange={(e) => {
             const _hasError = Number.isNaN(Number(e.target.value));
-            setHasError(_hasError || balance < parseUnits(e.target.value, decimals));
+            setHasError(
+              _hasError ||
+                balance < parseUnits(e.target.value, decimals) ||
+                (typeof max === "bigint" && max < parseUnits(e.target.value, decimals))
+            );
 
             if (!_hasError) {
               onChange(parseUnits(e.target.value, decimals));

src/components/bond-more-deposit-modal.tsx

@@ -1,8 +1,8 @@
-import { Key, useCallback, useState } from "react";
+import { Key, useCallback, useEffect, useState } from "react";
 import Modal from "./modal";
 import CheckboxGroup from "./checkbox-group";
 import { formatBlanace, getChainConfig, notifyTransaction } from "@/utils";
-import { useApp, useStaking } from "@/hooks";
+import { useApp, useDip6, useRateLimit, useStaking } from "@/hooks";
 import { notification } from "./notification";
 import { writeContract, waitForTransaction } from "@wagmi/core";
 
@@ -22,6 +22,14 @@ export default function BondMoreDepositModal({
   const availableDeposits = deposits.filter(({ inUse }) => !inUse);
   const { nativeToken } = getChainConfig(activeChain);
 
+  const { isDip6Implemented } = useDip6();
+  const { availableDeposit, updateRateLimit } = useRateLimit();
+  useEffect(() => {
+    if (isOpen) {
+      updateRateLimit();
+    }
+  }, [isOpen, updateRateLimit]);
+
   const handleBond = useCallback(async () => {
     setBusy(true);
     const { contract, explorer } = getChainConfig(activeChain);
@@ -37,6 +45,7 @@ export default function BondMoreDepositModal({
 
       if (receipt.status === "success") {
         setCheckedDeposits([]);
+        updateRateLimit();
         onClose();
       }
       notifyTransaction(receipt, explorer);
@@ -46,7 +55,7 @@ export default function BondMoreDepositModal({
     }
 
     setBusy(false);
-  }, [activeChain, checkedDeposits, onClose]);
+  }, [activeChain, checkedDeposits, onClose, updateRateLimit]);
 
   return (
     <Modal
@@ -63,6 +72,12 @@ export default function BondMoreDepositModal({
     >
       {availableDeposits.length ? (
         <>
+          {isDip6Implemented && (
+            <span className="text-xs font-light text-white/50">
+              Max in this session: {formatBlanace(availableDeposit, nativeToken.decimals, { keepZero: false })}{" "}
+              {nativeToken.symbol}
+            </span>
+          )}
           <CheckboxGroup
             options={availableDeposits.map(({ id, value }) => ({
               value: id,
@@ -74,6 +89,7 @@ export default function BondMoreDepositModal({
                   })} ${nativeToken.symbol}`}</span>
                 </div>
               ),
+              disabled: isDip6Implemented && availableDeposit < value,
             }))}
             checkedValues={checkedDeposits}
             onChange={setCheckedDeposits as (values: Key[]) => void}

src/components/bond-more-kton-modal.tsx

@@ -59,6 +59,7 @@ export default function BondMoreKtonModal({
         symbol={ktonToken.symbol}
         decimals={ktonToken.decimals}
         balance={ktonBalance?.value || 0n}
+        max={0n}
         busy={busy}
         disabled={inputAmount <= 0n}
         isReset={inputAmount <= 0}

src/components/bond-more-ring-modal.tsx

@@ -1,8 +1,8 @@
 import { getChainConfig, notifyTransaction } from "@/utils";
 import BondMoreTokenModal from "./bond-more-token-modal";
 import { useAccount, useBalance } from "wagmi";
-import { useApp } from "@/hooks";
-import { useCallback, useState } from "react";
+import { useApp, useDip6, useRateLimit } from "@/hooks";
+import { useCallback, useEffect, useState } from "react";
 import { notification } from "./notification";
 import { writeContract, waitForTransaction } from "@wagmi/core";
 
@@ -22,6 +22,14 @@ export default function BondMoreRingModal({
 
   const { nativeToken } = getChainConfig(activeChain);
 
+  const { isDip6Implemented } = useDip6();
+  const { availableDeposit, updateRateLimit } = useRateLimit();
+  useEffect(() => {
+    if (isOpen) {
+      updateRateLimit();
+    }
+  }, [isOpen, updateRateLimit]);
+
   const handleBond = useCallback(async () => {
     if ((ringBalance?.value || 0n) < inputAmount) {
       notification.warn({ description: "Your balance is insufficient." });
@@ -40,6 +48,7 @@ export default function BondMoreRingModal({
 
         if (receipt.status === "success") {
           setInputAmount(0n);
+          updateRateLimit();
           onClose();
         }
         notifyTransaction(receipt, explorer);
@@ -49,14 +58,15 @@ export default function BondMoreRingModal({
 
       setBusy(false);
     }
-  }, [activeChain, inputAmount, ringBalance?.value, onClose]);
+  }, [activeChain, inputAmount, ringBalance?.value, onClose, updateRateLimit]);
 
   return (
     <BondMoreTokenModal
       isOpen={isOpen}
       symbol={nativeToken.symbol}
       decimals={nativeToken.decimals}
       balance={ringBalance?.value || 0n}
+      max={isDip6Implemented ? availableDeposit : undefined}
       busy={busy}
       disabled={inputAmount <= 0n}
       isReset={inputAmount <= 0}

src/components/bond-more-token-modal.tsx

@@ -5,6 +5,7 @@ export default function BondMoreTokenModal({
   isOpen,
   symbol,
   decimals,
+  max,
   balance,
   busy,
   disabled,
@@ -17,6 +18,7 @@ export default function BondMoreTokenModal({
   isOpen: boolean;
   symbol: string;
   decimals: number;
+  max?: bigint;
   balance: bigint;
   busy?: boolean;
   disabled?: boolean;
@@ -60,6 +62,7 @@ export default function BondMoreTokenModal({
           decimals={decimals}
           symbol={symbol}
           balance={balance}
+          max={max}
           isReset={isReset}
           onChange={onChange}
         />

src/components/checkbox-group.tsx

@@ -3,6 +3,7 @@ import { Key, ReactElement } from "react";
 interface Props {
   options: {
     label: ReactElement;
+    disabled?: boolean;
     value: Key;
   }[];
   checkedValues: Key[];
@@ -13,7 +14,7 @@ interface Props {
 export default function CheckboxGroup({ options, checkedValues, className, onChange = () => undefined }: Props) {
   return (
     <div className={`flex flex-col gap-large ${className}`}>
-      {options.map(({ label, value }) => {
+      {options.map(({ label, value, disabled }) => {
         const idx = checkedValues.findIndex((v) => v === value);
         const checked = idx >= 0;
 
@@ -23,6 +24,7 @@ export default function CheckboxGroup({ options, checkedValues, className, onCha
               className={`relative h-4 w-4 rounded-sm border transition hover:scale-105 active:scale-95 ${
                 checked ? "border-primary bg-primary" : "border-white bg-transparent"
               }`}
+              disabled={disabled}
               onClick={() => {
                 const checkeds = [...checkedValues];
                 if (checked) {