darwinia-network · hackfisher · Apr 23, 2024 · Apr 19, 2024 · Apr 21, 2024 · Apr 21, 2024
diff --git a/src/components/balance-input.tsx b/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));

diff --git a/src/components/bond-more-deposit-modal.tsx b/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: availableDeposit < value,
             }))}
             checkedValues={checkedDeposits}
             onChange={setCheckedDeposits as (values: Key[]) => void}

diff --git a/src/components/bond-more-kton-modal.tsx b/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}

diff --git a/src/components/bond-more-ring-modal.tsx b/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, useRateLimit } from "@/hooks";
+import { useCallback, useEffect, useState } from "react";
 import { notification } from "./notification";
 import { writeContract, waitForTransaction } from "@wagmi/core";
 
@@ -22,6 +22,13 @@ export default function BondMoreRingModal({
 
   const { nativeToken } = getChainConfig(activeChain);
 
+  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 +47,7 @@ export default function BondMoreRingModal({
 
         if (receipt.status === "success") {
           setInputAmount(0n);
+          updateRateLimit();
           onClose();
         }
         notifyTransaction(receipt, explorer);
@@ -49,14 +57,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={availableDeposit}
       busy={busy}
       disabled={inputAmount <= 0n}
       isReset={inputAmount <= 0}

diff --git a/src/components/bond-more-token-modal.tsx b/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}
         />

diff --git a/src/components/checkbox-group.tsx b/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) {

diff --git a/src/components/collator-select-modal.tsx b/src/components/collator-select-modal.tsx
@@ -69,32 +69,6 @@ const columns: ColumnType<DataSource>[] = [
     title: (
       <div className="inline-flex items-center gap-small">
         <span className="text-xs font-bold text-white">Total-staked</span>
-        <Tooltip
-          content={
-            <div className="inline-block text-xs font-light text-white">
-              {`The Collator's total-staked is a dynamic value, inversely proportional to the commission set by
-                the Collator. Higher commission results in lower total-staked and vice versa. `}
-              <a
-                rel="noopener noreferrer"
-                target="_blank"
-                className="text-primary hover:underline"
-                href="https://github.com/darwinia-network/DIPs/blob/main/DIPs/dip-1.md"
-              >
-                Learn More
-              </a>
-            </div>
-          }
-          enabledSafePolygon
-          contentClassName="w-80"
-        >
-          <Image
-            width={15}
-            height={14}
-            alt="Info"
-            src="/images/help.svg"
-            className="opacity-60 transition-opacity hover:opacity-100"
-          />
-        </Tooltip>
       </div>
     ),
     render: (row) => <span>{prettyNumber(row.power)}</span>,

diff --git a/src/components/records-bonded-tokens.tsx b/src/components/records-bonded-tokens.tsx
@@ -1,4 +1,4 @@
-import { useApp } from "@/hooks";
+import { useApp, useDip6 } from "@/hooks";
 import { StakingRecordsDataSource } from "@/types";
 import { formatBlanace, getChainConfig, notifyTransaction } from "@/utils";
 import UnbondingTokenTooltip from "./unbonding-token-tooltip";
@@ -21,6 +21,7 @@ export default function RecordsBondedTokens({ row }: { row: StakingRecordsDataSo
   const [ktonBusy, setKtonBusy] = useState(false);
 
   const { activeChain } = useApp();
+  const { isDip6Implemented } = useDip6();
   const { nativeToken, ktonToken } = getChainConfig(activeChain);
 
   const handleCancelUnbonding = useCallback(
@@ -103,7 +104,7 @@ export default function RecordsBondedTokens({ row }: { row: StakingRecordsDataSo
     <div className="flex flex-col">
       {/* ring */}
       <div className="flex items-center gap-small">
-        {row.bondedTokens.unbondingRing.length > 0 ? (
+        {row.bondedTokens.unbondingRing.length > 0 && !isDip6Implemented ? (
           ringBusy ? (
             <BusyIcon />
           ) : (
@@ -131,7 +132,7 @@ export default function RecordsBondedTokens({ row }: { row: StakingRecordsDataSo
       </div>
       {/* deposit */}
       <div className="flex items-center gap-small">
-        {row.bondedTokens.unbondingDeposits.length > 0 ? (
+        {row.bondedTokens.unbondingDeposits.length > 0 && !isDip6Implemented ? (
           depositBusy ? (
             <BusyIcon />
           ) : (
@@ -160,7 +161,7 @@ export default function RecordsBondedTokens({ row }: { row: StakingRecordsDataSo
       </div>
       {/* kton */}
       <div className="flex items-center gap-small">
-        {row.bondedTokens.unbondingKton.length > 0 ? (
+        {row.bondedTokens.unbondingKton.length > 0 && !isDip6Implemented ? (
           ktonBusy ? (
             <BusyIcon />
           ) : (

diff --git a/src/components/unbond-deposit-modal.tsx b/src/components/unbond-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 UnbondDepositModal({
   const availableDeposits = deposits.filter(({ id }) => stakedDeposits.includes(id));
   const { nativeToken } = getChainConfig(activeChain);
 
+  const { isDip6Implemented } = useDip6();
+  const { availableWithdraw, updateRateLimit } = useRateLimit();
+  useEffect(() => {
+    if (isOpen) {
+      updateRateLimit();
+    }
+  }, [isOpen, updateRateLimit]);
+
   const handleUnbond = useCallback(async () => {
     setBusy(true);
     const { contract, explorer } = getChainConfig(activeChain);
@@ -37,6 +45,7 @@ export default function UnbondDepositModal({
 
       if (receipt.status === "success") {
         setCheckedDeposits([]);
+        updateRateLimit();
         onClose();
       }
       notifyTransaction(receipt, explorer);
@@ -46,7 +55,7 @@ export default function UnbondDepositModal({
     }
 
     setBusy(false);
-  }, [activeChain, checkedDeposits, onClose]);
+  }, [activeChain, checkedDeposits, onClose, updateRateLimit]);
 
   return (
     <Modal
@@ -63,6 +72,12 @@ export default function UnbondDepositModal({
     >
       {availableDeposits.length ? (
         <>
+          {isDip6Implemented && (
+            <span className="text-xs font-light text-white/50">
+              Max in this session: {formatBlanace(availableWithdraw, nativeToken.decimals, { keepZero: false })}{" "}
+              {nativeToken.symbol}
+            </span>
+          )}
           <CheckboxGroup
             options={availableDeposits.map(({ id, value }) => ({
               value: id,
@@ -74,6 +89,7 @@ export default function UnbondDepositModal({
                   })} ${nativeToken.symbol}`}</span>
                 </div>
               ),
+              disabled: availableWithdraw < value,
             }))}
             checkedValues={checkedDeposits}
             onChange={setCheckedDeposits as (values: Key[]) => void}

diff --git a/src/components/unbond-kton-modal.tsx b/src/components/unbond-kton-modal.tsx
@@ -62,6 +62,7 @@ export default function UnbondKtonModal({
         symbol={ktonToken.symbol}
         decimals={ktonToken.decimals}
         balance={stakedKton}
+        max={0n}
         busy={busy}
         disabled={inputAmount <= 0n}
         isReset={inputAmount <= 0}