Staking upgrade adaptation (#85)

* Add manifest * Update title and description * Adapt staking upgrade * Remove power * Improve header * Improve scrollbar * Update wallets in rainbow provider * Remove vercel.json * Revert vercel.json * Update vercel.json * Remove X-Frame-Options header * Update vercel.json * Keep token decimals to display for balance input * Dynamic import ChainSwitch with ssr disabled
darwinia-network · Mar 22, 2024 · bb6e06f · bb6e06f
1 parent 249d33e
commit bb6e06f
Show file tree

Hide file tree

Showing 44 changed files with 361 additions and 909 deletions.
diff --git a/public/images/chain/crab.png b/public/images/chain/crab.png
diff --git a/public/images/chain/darwinia.png b/public/images/chain/darwinia.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,5 @@
+{
+  "name": "Collactor Staking - Darwinia",
+  "description": "Collactor staking of Darwinia and Crab network",
+  "icons": [{ "src": "icon.svg", "sizes": "any" }]
+}
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,6 +2,17 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 5x rgba(0, 0, 0, 0.2);
+    background: hsla(0, 0%, 100%, 0.4);
+  }
+}
+
 .app-header {
   height: 70px;
   position: fixed;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,13 +3,13 @@ import "./globals.css";
 import { JetBrains_Mono } from "next/font/google";
 import Footer from "@/components/footer";
 import Header from "@/components/header";
-import WrongChainAlert from "@/components/wrong-chain-alert";
 
 const fontJetBrainsMono = JetBrains_Mono({ subsets: ["latin", "latin-ext"] });
 
 export const metadata = {
-  title: "Darwinia Staking",
-  description: "Darwinia and Crab network staking app",
+  title: "Collactor Staking - Darwinia",
+  description: "Collactor staking of Darwinia and Crab network",
+  manifest: "/manifest.json",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -25,8 +25,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 <Footer className="app-footer" />
               </StakingProvider>
             </ApiProvider>
-
-            <WrongChainAlert />
           </RainbowProvider>
         </AppProvider>
       </body>

diff --git a/src/components/balance-input.tsx b/src/components/balance-input.tsx
@@ -1,31 +1,25 @@
-import { formatBlanace, prettyNumber } from "@/utils";
+import { formatBlanace } from "@/utils";
 import Image from "next/image";
 import InputLabel from "./input-label";
 import { parseUnits } from "viem";
 import { useEffect, useRef, useState } from "react";
 
-type PowerChanges = "more" | "less";
-
 export default function BalanceInput({
   isReset,
   balance,
   symbol,
   decimals,
   logoPath,
-  power,
   label,
   boldLabel,
   className,
-  powerChanges = "more",
   onChange = () => undefined,
 }: {
   isReset?: boolean;
   balance: bigint;
   symbol: string;
   decimals: number;
   logoPath?: string;
-  power?: bigint;
-  powerChanges?: PowerChanges;
   label?: string;
   boldLabel?: boolean;
   className?: string;
@@ -49,7 +43,7 @@ export default function BalanceInput({
         }`}
       >
         <input
-          placeholder={`Balance: ${formatBlanace(balance, decimals, { keepZero: false, precision: 4 })}`}
+          placeholder={`Balance: ${formatBlanace(balance, decimals, { keepZero: false, precision: decimals })}`}
           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));
@@ -66,15 +60,6 @@ export default function BalanceInput({
           <span className="text-sm font-light text-white">{symbol}</span>
         </div>
       </div>
-      {power !== undefined && <ExtraPower power={power} powerChanges={powerChanges} />}
     </div>
   );
 }
-
-export function ExtraPower({ power, powerChanges = "more" }: { power: bigint; powerChanges?: PowerChanges }) {
-  return (
-    <span className="text-xs font-bold text-primary">{`${powerChanges === "more" ? "+" : "-"}${prettyNumber(
-      power
-    )} Power`}</span>
-  );
-}
diff --git a/src/components/bond-more-deposit-modal.tsx b/src/components/bond-more-deposit-modal.tsx
@@ -1,40 +1,24 @@
-import { Key, useCallback, useMemo, useState } from "react";
+import { Key, useCallback, useState } from "react";
 import Modal from "./modal";
 import CheckboxGroup from "./checkbox-group";
-import { commissionWeightedPower, formatBlanace, getChainConfig, notifyTransaction } from "@/utils";
-import { ExtraPower } from "./balance-input";
+import { formatBlanace, getChainConfig, notifyTransaction } from "@/utils";
 import { useApp, useStaking } from "@/hooks";
 import { notification } from "./notification";
 import { writeContract, waitForTransaction } from "@wagmi/core";
-import { ChainID } from "@/types";
 
 export default function BondMoreDepositModal({
-  commission,
   isOpen,
   onClose = () => undefined,
 }: {
-  commission: string;
   isOpen: boolean;
   onClose?: () => void;
 }) {
-  const { deposits, calcExtraPower } = useStaking();
+  const { deposits } = useStaking();
   const { activeChain } = useApp();
 
   const [checkedDeposits, setCheckedDeposits] = useState<number[]>([]);
   const [busy, setBusy] = useState(false);
 
-  const extraPower = useMemo(
-    () =>
-      commissionWeightedPower(
-        calcExtraPower(
-          deposits.filter(({ id }) => checkedDeposits.includes(id)).reduce((acc, cur) => acc + cur.value, 0n),
-          0n
-        ),
-        commission
-      ),
-    [deposits, commission, checkedDeposits, calcExtraPower]
-  );
-
   const availableDeposits = deposits.filter(({ inUse }) => !inUse);
   const { nativeToken } = getChainConfig(activeChain);
 
@@ -43,14 +27,9 @@ export default function BondMoreDepositModal({
     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 { hash } = await writeContract({
         address: contract.staking.address,
-        abi,
+        abi: (await import(`@/config/abi/${contract.staking.abiFile}`)).default,
         functionName: "stake",
         args: [0n, 0n, checkedDeposits],
       });
@@ -100,10 +79,6 @@ export default function BondMoreDepositModal({
             onChange={setCheckedDeposits as (values: Key[]) => void}
             className="max-h-80 overflow-y-auto"
           />
-
-          <div className="h-[1px] bg-white/20" />
-
-          <ExtraPower power={extraPower} />
         </>
       ) : (
         <span className="text-xs font-light text-white">No more deposits to bond</span>

diff --git a/src/components/bond-more-kton-modal.tsx b/src/components/bond-more-kton-modal.tsx
@@ -1,29 +1,25 @@
-import { commissionWeightedPower, getChainConfig, notifyTransaction } from "@/utils";
+import { getChainConfig, notifyTransaction } from "@/utils";
 import BondMoreTokenModal from "./bond-more-token-modal";
-import { useApp, useStaking } from "@/hooks";
+import { useApp } from "@/hooks";
 import { useAccount, useBalance } 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,
   isOpen,
   onClose = () => undefined,
 }: {
-  commission: string;
   isOpen: boolean;
   onClose?: () => void;
 }) {
   const { activeChain } = useApp();
   const { address } = useAccount();
-  const { calcExtraPower } = useStaking();
 
   const [inputAmount, setInputAmount] = useState(0n);
   const [busy, setBusy] = useState(false);
 
-  const { ktonToken, contract, explorer } = getChainConfig(activeChain);
+  const { ktonToken } = getChainConfig(activeChain);
   const { data: ktonBalance } = useBalance({ address, token: ktonToken?.address, watch: true });
 
   const handleBond = useCallback(async () => {
@@ -34,14 +30,9 @@ export default function BondMoreKtonModal({
       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 { hash } = await writeContract({
           address: contract.staking.address,
-          abi,
+          abi: (await import(`@/config/abi/${contract.staking.abiFile}`)).default,
           functionName: "stake",
           args: [0n, inputAmount, []],
         });
@@ -67,7 +58,6 @@ export default function BondMoreKtonModal({
         isOpen={isOpen}
         symbol={ktonToken.symbol}
         decimals={ktonToken.decimals}
-        power={commissionWeightedPower(calcExtraPower(0n, inputAmount), commission)}
         balance={ktonBalance?.value || 0n}
         busy={busy}
         disabled={inputAmount <= 0n}

diff --git a/src/components/bond-more-ring-modal.tsx b/src/components/bond-more-ring-modal.tsx
@@ -1,25 +1,21 @@
-import { commissionWeightedPower, getChainConfig, notifyTransaction } from "@/utils";
+import { getChainConfig, notifyTransaction } from "@/utils";
 import BondMoreTokenModal from "./bond-more-token-modal";
 import { useAccount, useBalance } from "wagmi";
-import { useApp, useStaking } from "@/hooks";
+import { useApp } 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,
   isOpen,
   onClose = () => undefined,
 }: {
-  commission: string;
   isOpen: boolean;
   onClose?: () => void;
 }) {
   const { activeChain } = useApp();
   const { address } = useAccount();
   const { data: ringBalance } = useBalance({ address, watch: true });
-  const { calcExtraPower } = useStaking();
 
   const [inputAmount, setInputAmount] = useState(0n);
   const [busy, setBusy] = useState(false);
@@ -34,14 +30,9 @@ export default function BondMoreRingModal({
       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 { hash } = await writeContract({
           address: contract.staking.address,
-          abi,
+          abi: (await import(`@/config/abi/${contract.staking.abiFile}`)).default,
           functionName: "stake",
           args: [inputAmount, 0n, []],
         });
@@ -65,7 +56,6 @@ export default function BondMoreRingModal({
       isOpen={isOpen}
       symbol={nativeToken.symbol}
       decimals={nativeToken.decimals}
-      power={commissionWeightedPower(calcExtraPower(inputAmount, 0n), commission)}
       balance={ringBalance?.value || 0n}
       busy={busy}
       disabled={inputAmount <= 0n}

diff --git a/src/components/bond-more-token-modal.tsx b/src/components/bond-more-token-modal.tsx
@@ -6,7 +6,6 @@ export default function BondMoreTokenModal({
   symbol,
   decimals,
   balance,
-  power,
   busy,
   disabled,
   isReset,
@@ -19,7 +18,6 @@ export default function BondMoreTokenModal({
   symbol: string;
   decimals: number;
   balance: bigint;
-  power: bigint;
   busy?: boolean;
   disabled?: boolean;
   isReset?: boolean;
@@ -28,29 +26,44 @@ export default function BondMoreTokenModal({
   onClose?: () => void;
   onChange?: (amount: bigint) => void;
 }) {
+  const isKton = symbol.endsWith("KTON");
+
   return (
     <Modal
       title={`Bond More ${symbol}`}
       isOpen={isOpen}
       onCancel={onCancel}
       onClose={onClose}
-      onOk={onBond}
+      onOk={isKton ? 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}
-      />
+      {isKton ? (
+        <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}
+          isReset={isReset}
+          onChange={onChange}
+        />
+      )}
     </Modal>
   );
 }