Merge pull request #79 from darwinia-network/jay/adapt-staking-upgrade

Adapt staking upgrade
darwinia-network · Mar 15, 2024 · a47dfd3 · a47dfd3
2 parents be17fa2 + de81198
commit a47dfd3
Show file tree

Hide file tree

Showing 49 changed files with 23,222 additions and 9,505 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,18 +14,19 @@
   "dependencies": {
     "@apollo/client": "^3.8.0",
     "@floating-ui/react": "^0.24.5",
-    "@polkadot/api": "^10.9.1",
-    "@rainbow-me/rainbowkit": "^1.3.3",
+    "@polkadot/api": "^10.12.2",
+    "@rainbow-me/rainbowkit": "^2.0.2",
+    "@tanstack/react-query": "^5.27.5",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "graphql": "^16.7.1",
-    "next": "13.4.8",
+    "next": "^13.5.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-jazzicon": "^1.0.4",
     "react-transition-group": "^4.4.5",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13"
+    "viem": "^2.8.5",
+    "wagmi": "^2.5.7"
   },
   "devDependencies": {
     "@types/node": "^20.4.0",

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,5 @@
+{
+  "name": "Darwinia Staking",
+  "description": "Darwinia and Crab network staking apps",
+  "icons": [{ "src": "icon.svg", "sizes": "any" }]
+}
diff --git a/src/app/icon.svg b/src/app/icon.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,7 +9,8 @@ const fontJetBrainsMono = JetBrains_Mono({ subsets: ["latin", "latin-ext"] });
 
 export const metadata = {
   title: "Darwinia Staking",
-  description: "Darwinia and Crab network staking app",
+  description: "Darwinia and Crab network staking apps",
+  manifest: "/manifest.json",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

diff --git a/src/components/balance-input.tsx b/src/components/balance-input.tsx
@@ -71,10 +71,18 @@ export default function BalanceInput({
   );
 }
 
-export function ExtraPower({ power, powerChanges = "more" }: { power: bigint; powerChanges?: PowerChanges }) {
+export function ExtraPower({
+  power,
+  className,
+  powerChanges = "more",
+}: {
+  power: bigint;
+  className?: string;
+  powerChanges?: PowerChanges;
+}) {
   return (
-    <span className="text-xs font-bold text-primary">{`${powerChanges === "more" ? "+" : "-"}${prettyNumber(
-      power
-    )} Power`}</span>
+    <span className={`text-xs font-bold text-primary ${className}`}>{`${
+      powerChanges === "more" ? "+" : "-"
+    }${prettyNumber(power)} Power`}</span>
   );
 }
diff --git a/src/components/bond-more-deposit-modal.tsx b/src/components/bond-more-deposit-modal.tsx
@@ -5,8 +5,7 @@ import { commissionWeightedPower, formatBlanace, getChainConfig, notifyTransacti
 import { ExtraPower } from "./balance-input";
 import { useApp, useStaking } from "@/hooks";
 import { notification } from "./notification";
-import { writeContract, waitForTransaction } from "@wagmi/core";
-import { ChainID } from "@/types";
+import { usePublicClient, useWalletClient } from "wagmi";
 
 export default function BondMoreDepositModal({
   commission,
@@ -17,9 +16,12 @@ export default function BondMoreDepositModal({
   isOpen: boolean;
   onClose?: () => void;
 }) {
-  const { deposits, calcExtraPower } = useStaking();
+  const { deposits, isStakingV2, calcExtraPower } = useStaking();
   const { activeChain } = useApp();
 
+  const { data: walletClient } = useWalletClient();
+  const publicClient = usePublicClient();
+
   const [checkedDeposits, setCheckedDeposits] = useState<number[]>([]);
   const [busy, setBusy] = useState(false);
 
@@ -39,35 +41,36 @@ export default function BondMoreDepositModal({
   const { nativeToken } = getChainConfig(activeChain);
 
   const handleBond = useCallback(async () => {
-    setBusy(true);
-    const { contract, explorer } = getChainConfig(activeChain);
+    if (walletClient && publicClient) {
+      setBusy(true);
+      const { contract, explorer } = getChainConfig(activeChain);
 
-    try {
-      const abi =
-        activeChain === ChainID.CRAB
+      try {
+        const abi = isStakingV2
           ? (await import("@/config/abi/staking-v2.json")).default
-          : (await import(`@/config/abi/${contract.staking.abiFile}`)).default;
+          : (await import("@/config/abi/staking.json")).default;
 
-      const { hash } = await writeContract({
-        address: contract.staking.address,
-        abi,
-        functionName: "stake",
-        args: [0n, 0n, checkedDeposits],
-      });
-      const receipt = await waitForTransaction({ hash });
+        const hash = await walletClient.writeContract({
+          address: contract.staking.address,
+          abi,
+          functionName: "stake",
+          args: [0n, 0n, checkedDeposits],
+        });
+        const receipt = await publicClient?.waitForTransactionReceipt({ hash });
 
-      if (receipt.status === "success") {
-        setCheckedDeposits([]);
-        onClose();
+        if (receipt.status === "success") {
+          setCheckedDeposits([]);
+          onClose();
+        }
+        notifyTransaction(receipt, explorer);
+      } catch (err) {
+        console.error(err);
+        notification.error({ description: (err as Error).message });
       }
-      notifyTransaction(receipt, explorer);
-    } catch (err) {
-      console.error(err);
-      notification.error({ description: (err as Error).message });
-    }
 
-    setBusy(false);
-  }, [activeChain, checkedDeposits, onClose]);
+      setBusy(false);
+    }
+  }, [activeChain, isStakingV2, checkedDeposits, walletClient, publicClient, onClose]);
 
   return (
     <Modal

diff --git a/src/components/bond-more-kton-modal.tsx b/src/components/bond-more-kton-modal.tsx
@@ -1,11 +1,9 @@
 import { commissionWeightedPower, getChainConfig, notifyTransaction } from "@/utils";
 import BondMoreTokenModal from "./bond-more-token-modal";
 import { useApp, useStaking } from "@/hooks";
-import { useAccount, useBalance } from "wagmi";
+import { useAccount, useBalance, usePublicClient, useWalletClient } from "wagmi";
 import { useCallback, useState } from "react";
 import { notification } from "./notification";
-import { writeContract, waitForTransaction } from "@wagmi/core";
-import { ChainID } from "@/types";
 
 export default function BondMoreKtonModal({
   commission,
@@ -18,34 +16,36 @@ export default function BondMoreKtonModal({
 }) {
   const { activeChain } = useApp();
   const { address } = useAccount();
-  const { calcExtraPower } = useStaking();
+  const { isStakingV2, calcExtraPower } = useStaking();
+
+  const { data: walletClient } = useWalletClient();
+  const publicClient = usePublicClient();
 
   const [inputAmount, setInputAmount] = useState(0n);
   const [busy, setBusy] = useState(false);
 
-  const { ktonToken, contract, explorer } = getChainConfig(activeChain);
-  const { data: ktonBalance } = useBalance({ address, token: ktonToken?.address, watch: true });
+  const { ktonToken } = getChainConfig(activeChain);
+  const { data: ktonBalance } = useBalance({ address, token: ktonToken?.address, query: { refetchInterval: 3000 } });
 
   const handleBond = useCallback(async () => {
     if ((ktonBalance?.value || 0n) < inputAmount) {
       notification.warn({ description: "Your balance is insufficient." });
-    } else {
+    } else if (walletClient && publicClient) {
       setBusy(true);
       const { contract, explorer } = getChainConfig(activeChain);
 
       try {
-        const abi =
-          activeChain === ChainID.CRAB
-            ? (await import("@/config/abi/staking-v2.json")).default
-            : (await import(`@/config/abi/${contract.staking.abiFile}`)).default;
+        const abi = isStakingV2
+          ? (await import("@/config/abi/staking-v2.json")).default
+          : (await import("@/config/abi/staking.json")).default;
 
-        const { hash } = await writeContract({
+        const hash = await walletClient.writeContract({
           address: contract.staking.address,
           abi,
           functionName: "stake",
           args: [0n, inputAmount, []],
         });
-        const receipt = await waitForTransaction({ hash });
+        const receipt = await publicClient.waitForTransactionReceipt({ hash });
 
         if (receipt.status === "success") {
           setInputAmount(0n);
@@ -59,7 +59,7 @@ export default function BondMoreKtonModal({
 
       setBusy(false);
     }
-  }, [activeChain, inputAmount, ktonBalance?.value, onClose]);
+  }, [activeChain, inputAmount, ktonBalance?.value, isStakingV2, walletClient, publicClient, onClose]);
 
   return (
     ktonToken && (

diff --git a/src/components/bond-more-ring-modal.tsx b/src/components/bond-more-ring-modal.tsx
@@ -1,11 +1,9 @@
 import { commissionWeightedPower, getChainConfig, notifyTransaction } from "@/utils";
 import BondMoreTokenModal from "./bond-more-token-modal";
-import { useAccount, useBalance } from "wagmi";
+import { useAccount, useBalance, usePublicClient, useWalletClient } from "wagmi";
 import { useApp, useStaking } from "@/hooks";
 import { useCallback, useState } from "react";
 import { notification } from "./notification";
-import { writeContract, waitForTransaction } from "@wagmi/core";
-import { ChainID } from "@/types";
 
 export default function BondMoreRingModal({
   commission,
@@ -18,8 +16,11 @@ export default function BondMoreRingModal({
 }) {
   const { activeChain } = useApp();
   const { address } = useAccount();
-  const { data: ringBalance } = useBalance({ address, watch: true });
-  const { calcExtraPower } = useStaking();
+  const { data: ringBalance } = useBalance({ address, query: { refetchInterval: 3000 } });
+  const { isStakingV2, calcExtraPower } = useStaking();
+
+  const { data: walletClient } = useWalletClient();
+  const publicClient = usePublicClient();
 
   const [inputAmount, setInputAmount] = useState(0n);
   const [busy, setBusy] = useState(false);
@@ -29,23 +30,22 @@ export default function BondMoreRingModal({
   const handleBond = useCallback(async () => {
     if ((ringBalance?.value || 0n) < inputAmount) {
       notification.warn({ description: "Your balance is insufficient." });
-    } else {
+    } else if (walletClient && publicClient) {
       setBusy(true);
       const { contract, explorer } = getChainConfig(activeChain);
 
       try {
-        const abi =
-          activeChain === ChainID.CRAB
-            ? (await import("@/config/abi/staking-v2.json")).default
-            : (await import(`@/config/abi/${contract.staking.abiFile}`)).default;
+        const abi = isStakingV2
+          ? (await import("@/config/abi/staking-v2.json")).default
+          : (await import("@/config/abi/staking.json")).default;
 
-        const { hash } = await writeContract({
+        const hash = await walletClient.writeContract({
           address: contract.staking.address,
           abi,
           functionName: "stake",
           args: [inputAmount, 0n, []],
         });
-        const receipt = await waitForTransaction({ hash });
+        const receipt = await publicClient.waitForTransactionReceipt({ hash });
 
         if (receipt.status === "success") {
           setInputAmount(0n);
@@ -58,7 +58,7 @@ export default function BondMoreRingModal({
 
       setBusy(false);
     }
-  }, [activeChain, inputAmount, ringBalance?.value, onClose]);
+  }, [activeChain, inputAmount, ringBalance?.value, isStakingV2, walletClient, publicClient, onClose]);
 
   return (
     <BondMoreTokenModal

diff --git a/src/components/bond-more-token-modal.tsx b/src/components/bond-more-token-modal.tsx
@@ -1,3 +1,4 @@
+import { useStaking } from "@/hooks";
 import BalanceInput from "./balance-input";
 import Modal from "./modal";
 
@@ -28,29 +29,44 @@ export default function BondMoreTokenModal({
   onClose?: () => void;
   onChange?: (amount: bigint) => void;
 }) {
+  const { isStakingV2 } = useStaking();
   return (
     <Modal
       title={`Bond More ${symbol}`}
       isOpen={isOpen}
       onCancel={onCancel}
       onClose={onClose}
-      onOk={onBond}
+      onOk={isStakingV2 ? undefined : onBond}
       maskClosable={false}
       okText="Bond"
       className="lg:w-[25rem]"
       busy={busy}
       disabled={disabled}
     >
-      <BalanceInput
-        label="Amount"
-        boldLabel
-        decimals={decimals}
-        symbol={symbol}
-        balance={balance}
-        power={power}
-        isReset={isReset}
-        onChange={onChange}
-      />
+      {isStakingV2 ? (
+        <div className="flex flex-col gap-small text-xs font-bold lg:text-sm lg:font-light">
+          <span className="text-white">{`Please stake ${symbol} in`}</span>
+          <a
+            href="https://kton-staking.darwinia.network/"
+            rel="noopener noreferrer"
+            target="_blank"
+            className="text-primary underline transition-opacity hover:opacity-80"
+          >
+            https://kton-staking.darwinia.network
+          </a>
+        </div>
+      ) : (
+        <BalanceInput
+          label="Amount"
+          boldLabel
+          decimals={decimals}
+          symbol={symbol}
+          balance={balance}
+          power={power}
+          isReset={isReset}
+          onChange={onChange}
+        />
+      )}
     </Modal>
   );
 }