Support Koi Testnet (#91)

* Support Pangolin

* Support Koi and remove Pangolin

* Add rounded-full style to chain logo in ChainSwitch

* Fix tx link to explorer

* Fix subql

* Fix substrate rpc

* Fix reading undefined

src/components/header/chain-switch.tsx

@@ -62,7 +62,13 @@ export default function ChainSwitch() {
       >
         {currentChain ? (
           <>
-            <Image alt="Chain logo" width={24} height={24} src={getChainLogo(currentChain.logo)} />
+            <Image
+              alt="Chain logo"
+              width={24}
+              height={24}
+              src={getChainLogo(currentChain.logo)}
+              className="rounded-full"
+            />
             <span className="text-sm font-light">{currentChain.name}</span>
             <Image
               src="/images/caret-down.svg"
@@ -97,7 +103,13 @@ export default function ChainSwitch() {
                     setIsOpen(false);
                   }}
                 >
-                  <Image alt="Chain logo" width={24} height={24} src={getChainLogo(option.logo)} />
+                  <Image
+                    alt="Chain logo"
+                    width={24}
+                    height={24}
+                    src={getChainLogo(option.logo)}
+                    className="rounded-full"
+                  />
                   <span className="text-sm font-light">{getChainConfig(option.chainId).name}</span>
                 </button>
               ))}

src/config/chains/index.ts

@@ -1,2 +1,3 @@
 export * from "./darwinia";
 export * from "./crab";
+export * from "./koi";

src/config/chains/koi.ts

@@ -0,0 +1,46 @@
+import { ChainConfig, ChainID } from "@/types";
+
+export const koiChainConfig: ChainConfig = {
+  name: "Koi",
+  chainId: ChainID.KOI,
+  explorer: {
+    name: "Koiscan",
+    url: "https://koi-scan.darwinia.network",
+  },
+  rpcMetas: [
+    {
+      name: "Koi",
+      url: "https://koi-rpc.darwinia.network",
+    },
+  ],
+  nativeToken: {
+    symbol: "KRING",
+    decimals: 18,
+    logoPath: "/images/token/ring.svg",
+  },
+  ktonToken: {
+    address: "0x0000000000000000000000000000000000000402",
+    symbol: "PKTON",
+    decimals: 18,
+    logoPath: "/images/token/kton.svg",
+  },
+  contract: {
+    deposit: {
+      address: "0x0000000000000000000000000000000000000600",
+      abiFile: "deposit.json",
+    },
+    staking: {
+      address: "0x0000000000000000000000000000000000000601",
+      abiFile: "staking.json",
+    },
+  },
+  secondsPerBlock: 6,
+  substrate: {
+    graphql: { endpoint: "https://subql.darwinia.network/subql-apps-koi" },
+    rpc: {
+      wss: "wss://koi-rpc.darwinia.network",
+      https: "https://koi-rpc.darwinia.network",
+    },
+  },
+  logo: "koi.png",
+};

src/hooks/use-collator-power.ts

@@ -35,7 +35,11 @@ export const useCollatorPower = (
     let sub$$: Subscription | undefined;
 
     if (polkadotApi) {
-      sub$$ = from(polkadotApi.query.darwiniaStaking.exposureCacheStates())
+      sub$$ = from(
+        polkadotApi.query.darwiniaStaking.exposureCacheStates
+          ? polkadotApi.query.darwiniaStaking.exposureCacheStates()
+          : polkadotApi.query.darwiniaStaking.cacheStates()
+      )
         .pipe(
           switchMap((cacheStates) => {
             const index = (cacheStates.toJSON() as ExposureCacheState[]).findIndex((cs) => cs === "Current");

src/providers/staking-provider.tsx

@@ -125,7 +125,7 @@ export function StakingProvider({ children }: PropsWithChildren<unknown>) {
   const calcExtraPower = useCallback((stakingRing: bigint, stakingKton: bigint) => stakingRing + stakingKton, []);
 
   useEffect(() => {
-    setMinimumDeposit(BigInt(polkadotApi?.consts.deposit.minLockingAmount.toString() || 0));
+    setMinimumDeposit(BigInt(polkadotApi?.consts.deposit.minLockingAmount?.toString() || 0));
     setMaxCommission(Number(polkadotApi?.consts.darwiniaStaking.maxCommission?.toJSON() || 1000000000) / 10000000);
   }, [polkadotApi]);
 

src/types/chain.ts

@@ -1,5 +1,5 @@
 export enum ChainID {
-  // PANGOLIN = 43,
+  KOI = 701,
   CRAB = 44,
   // PANGORO = 45,
   DARWINIA = 46,

src/utils/chain.ts

@@ -1,14 +1,15 @@
-import { darwiniaChainConfig, crabChainConfig } from "@/config";
+import { darwiniaChainConfig, crabChainConfig, koiChainConfig } from "@/config";
 import { ChainConfig, ChainID } from "@/types";
 
 export function getChainConfigs() {
-  return [darwiniaChainConfig, crabChainConfig];
+  return [darwiniaChainConfig, crabChainConfig, koiChainConfig];
 }
 
 export function getChainConfig(chainId: ChainID) {
   const chains: Record<ChainID, ChainConfig> = {
     [ChainID.DARWINIA]: darwiniaChainConfig,
     [ChainID.CRAB]: crabChainConfig,
+    [ChainID.KOI]: koiChainConfig,
   };
   return chains[chainId];
 }

src/utils/tx.tsx

@@ -2,16 +2,13 @@ import { notification } from "@/components/notification";
 import { TransactionReceipt } from "viem";
 
 export function notifyTransaction(receipt: TransactionReceipt, explorer: { url: string }) {
+  const { href } = new URL(`/tx/${receipt.transactionHash}`, explorer.url);
+
   if (receipt.status === "success") {
     notification.success({
       title: "The transaction was successful",
       description: (
-        <a
-          target="_blank"
-          rel="noopener"
-          className="break-all text-primary hover:underline"
-          href={`${explorer.url}tx/${receipt.transactionHash}`}
-        >
+        <a target="_blank" rel="noopener" className="break-all text-primary hover:underline" href={href}>
           {receipt.transactionHash}
         </a>
       ),
@@ -20,12 +17,7 @@ export function notifyTransaction(receipt: TransactionReceipt, explorer: { url:
     notification.error({
       title: "The transaction failed",
       description: (
-        <a
-          target="_blank"
-          rel="noopener"
-          className="break-all text-primary hover:underline"
-          href={`${explorer.url}tx/${receipt.transactionHash}`}
-        >
+        <a target="_blank" rel="noopener" className="break-all text-primary hover:underline" href={href}>
           {receipt.transactionHash}
         </a>
       ),