Adapt DIP-6

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

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 />
           ) : (

src/components/unbond-token-modal.tsx

@@ -1,3 +1,4 @@
+import { useDip6 } from "@/hooks";
 import BalanceInput from "./balance-input";
 import Modal from "./modal";
 
@@ -27,6 +28,7 @@ export default function UnbondTokenModal({
   onChange?: (amount: bigint) => void;
 }) {
   const isKton = symbol.endsWith("KTON");
+  const { isDip6Implemented } = useDip6();
 
   return (
     <Modal
@@ -42,10 +44,10 @@ export default function UnbondTokenModal({
       disabled={disabled}
     >
       <>
-        <p className={`text-xs font-light text-white ${isKton ? "line-through" : ""}`}>
+        <p className={`text-xs font-light text-white ${isKton || isDip6Implemented ? "line-through" : ""}`}>
           This unbonding process will take 14 days to complete.
         </p>
-        {isKton && (
+        {(isKton || isDip6Implemented) && (
           <p className="text-xs font-light text-white">{`There is no longer a 14-day period for unbonding ${symbol}.`}</p>
         )}
         <div className="h-[1px] bg-white/20" />

src/hooks/index.ts

@@ -9,8 +9,8 @@ export * from "./use-nominator-collators";
 export * from "./use-collator-nominators";
 export * from "./use-collator-commission";
 export * from "./use-collator-power";
-export * from "./use-pool";
 export * from "./use-active-collators";
 export * from "./use-collator-last-session-blocks";
 export * from "./use-collators-session-key";
 export * from "./use-rate-limit";
+export * from "./use-dip6";

src/hooks/use-collator-power.ts

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { from, of, forkJoin, switchMap, Subscription } from "rxjs";
 import { useApi } from "./use-api";
 import { DarwiniaStakingLedger } from "@/types";
-import { commissionWeightedPower, stakingToPower } from "@/utils";
 
 interface DepositJson {
   id: number;
@@ -13,11 +12,6 @@ interface DepositJson {
 }
 
 interface ExposuresJson {
-  nominators: { who: string; value: string }[];
-  total: string;
-}
-
-interface ExposuresJsonCache {
   nominators: { who: string; vote: string }[];
   vote: string;
 }
@@ -29,26 +23,8 @@ interface DefaultValue {
 
 type ExposureCacheState = "Previous" | "Current" | "Next";
 
-function isExposuresJsonCache(data: any): data is ExposuresJsonCache {
-  return data.vote;
-}
-
-function formatExposuresData(data: unknown) {
-  if (isExposuresJsonCache(data)) {
-    return {
-      total: data.vote,
-      nominators: data.nominators.map(({ who, vote }) => ({ who, value: vote })),
-    } as ExposuresJson;
-  } else {
-    return data as ExposuresJson;
-  }
-}
-
 export const useCollatorPower = (
   collatorNominators: { [collator: string]: string[] | undefined },
-  collatorCommission: { [collator: string]: string | undefined },
-  ringPool: bigint,
-  ktonPool: bigint,
   defaultValue: DefaultValue
 ) => {
   const [collatorPower, setCollatorPower] = useState(defaultValue.collatorPower);
@@ -80,7 +56,7 @@ export const useCollatorPower = (
           next: ([exposures, ledgers, deposits]) => {
             const parsedExposures = exposures.reduce((acc, cur) => {
               const address = (cur[0].toHuman() as string[])[0];
-              const data = formatExposuresData(cur[1].toJSON() as unknown);
+              const data = cur[1].toJSON() as unknown as ExposuresJson;
               return { ...acc, [address]: data };
             }, {} as { [address: string]: ExposuresJson | undefined });
 
@@ -101,34 +77,31 @@ export const useCollatorPower = (
               collators.reduce((acc, cur) => {
                 if (parsedExposures[cur]) {
                   // active collator
-                  return { ...acc, [cur]: BigInt(parsedExposures[cur]?.total || 0) };
+                  return { ...acc, [cur]: BigInt(parsedExposures[cur]?.vote || 0) };
                 }
 
                 const nominators = collatorNominators[cur] || [];
-                const { stakedDeposit, stakedRing, stakedKton } = nominators.reduce(
+                const { stakedDeposit, stakedRing } = nominators.reduce(
                   (acc, cur) => {
                     const ledger = parsedLedgers[cur];
                     const deposits = parsedDeposits[cur] || [];
 
                     if (ledger) {
                       const stakedDeposit = deposits
-                        .filter(({ id }) => ledger.stakedDeposits?.includes(id))
+                        .filter(({ id }) => (ledger.stakedDeposits || ledger.deposits)?.includes(id))
                         .reduce((acc, cur) => acc + BigInt(cur.value), 0n);
 
                       return {
                         stakedDeposit: acc.stakedDeposit + stakedDeposit,
-                        stakedRing: acc.stakedRing + BigInt(ledger.stakedRing),
-                        stakedKton: acc.stakedKton + BigInt(ledger.stakedKton),
+                        stakedRing: acc.stakedRing + BigInt(ledger.stakedRing ?? ledger.ring ?? 0n),
                       };
                     }
                     return acc;
                   },
-                  { stakedDeposit: 0n, stakedRing: 0n, stakedKton: 0n }
+                  { stakedDeposit: 0n, stakedRing: 0n }
                 );
-                const power = stakingToPower(stakedRing + stakedDeposit, stakedKton, ringPool, ktonPool);
 
-                const commission = collatorCommission[cur] || "0.00%";
-                return { ...acc, [cur]: commissionWeightedPower(power, commission) };
+                return { ...acc, [cur]: (stakedRing + stakedDeposit) / 10n ** 18n }; // Token decimals: 18
               }, {} as { [collator: string]: bigint | undefined })
             );
           },
@@ -140,7 +113,7 @@ export const useCollatorPower = (
     }
 
     return () => sub$$?.unsubscribe();
-  }, [polkadotApi, collatorNominators, collatorCommission, ringPool, ktonPool]);
+  }, [polkadotApi, collatorNominators]);
 
   return { collatorPower, isCollatorPowerInitialized };
 };

src/hooks/use-dip6.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useApi } from "./use-api";
+import { isFunction } from "@polkadot/util";
+
+export function useDip6() {
+  const [isDip6Implemented, setIsDip6Implemented] = useState(false);
+  const { polkadotApi } = useApi();
+
+  useEffect(() => {
+    setIsDip6Implemented(isFunction(polkadotApi?.query.darwiniaStaking?.rateLimit));
+  }, [polkadotApi?.query.darwiniaStaking?.rateLimit]);
+
+  return { isDip6Implemented };
+}

src/hooks/use-ledger.ts

@@ -87,13 +87,13 @@ export const useLedger = (deposits: Deposit[], defaultValue: DefaultValue) => {
 
             setStakedDeposit(
               deposits
-                .filter(({ id }) => ledgerData.stakedDeposits?.includes(id))
+                .filter(({ id }) => (ledgerData.stakedDeposits || ledgerData.deposits)?.includes(id))
                 .reduce((acc, cur) => acc + cur.value, 0n)
             );
-            setStakedDeposits(ledgerData.stakedDeposits || []);
+            setStakedDeposits(ledgerData.stakedDeposits || ledgerData.deposits || []);
 
-            setStakedRing(BigInt(ledgerData.stakedRing));
-            setStakedKton(BigInt(ledgerData.stakedKton));
+            setStakedRing(BigInt(ledgerData.stakedRing ?? ledgerData.ring ?? 0));
+            setStakedKton(0n);
 
             setUnbondingRing(_unbondingRing);
             setUnbondingKton(_unbondingKton);

src/hooks/use-rate-limit.ts

@@ -12,7 +12,6 @@ type RateLimitState = { pos: bigint; neg?: never } | { pos?: never; neg: bigint
 export function useRateLimit() {
   const [rateLimitState, setRateLimitState] = useState<RateLimitState | null>();
   const [rateLimit, setRateLimit] = useState<bigint | null>();
-  const [isDip6Implemented, setIsDip6Implemented] = useState(false);
   const { polkadotApi } = useApi();
 
   useEffect(() => {
@@ -22,7 +21,6 @@ export function useRateLimit() {
       isFunction(polkadotApi?.query.darwiniaStaking?.rateLimitState) &&
       isFunction(polkadotApi?.query.darwiniaStaking?.rateLimit)
     ) {
-      setIsDip6Implemented(true);
       sub$$ = forkJoin([
         polkadotApi?.query.darwiniaStaking.rateLimitState() as unknown as Promise<DarwiniaStakingRateLimiter>,
         polkadotApi?.query.darwiniaStaking.rateLimit() as Promise<u128>,
@@ -38,7 +36,6 @@ export function useRateLimit() {
         },
       });
     } else {
-      setIsDip6Implemented(false);
       setRateLimitState(undefined);
       setRateLimit(undefined);
     }
@@ -48,5 +45,5 @@ export function useRateLimit() {
     };
   }, [polkadotApi?.query.darwiniaStaking]);
 
-  return { rateLimit, rateLimitState, isDip6Implemented };
+  return { rateLimit, rateLimitState };
 }