-Customized crab to use it's own icons (#19)

-Removed some test nets
darwinia-network · Mar 10, 2023 · e940ed9 · e940ed9
1 parent 5d00c07
commit e940ed9
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 8 deletions.
diff --git a/packages/app-config/src/supportedNetworks.ts b/packages/app-config/src/supportedNetworks.ts
@@ -4,4 +4,4 @@ import { darwinia } from "./chains/darwinia";
 import { pangolin } from "./chains/pangolin";
 import { pangoro } from "./chains/pangoro";
 
-export const supportedNetworks: ChainConfig[] = [crab, pangolin, pangoro];
+export const supportedNetworks: ChainConfig[] = [crab];
diff --git a/packages/app/src/assets/images/ckton.svg b/packages/app/src/assets/images/ckton.svg
diff --git a/packages/app/src/assets/images/crab.svg b/packages/app/src/assets/images/crab.svg
diff --git a/packages/app/src/components/AccountOverview/index.tsx b/packages/app/src/components/AccountOverview/index.tsx
@@ -3,6 +3,8 @@ import { localeKeys, useAppTranslation } from "@darwinia/app-locale";
 import BigNumber from "bignumber.js";
 import ringIcon from "../../assets/images/ring.svg";
 import ktonIcon from "../../assets/images/kton.svg";
+import crabIcon from "../../assets/images/crab.svg";
+import cktonIcon from "../../assets/images/ckton.svg";
 import { useStorage, useWallet } from "@darwinia/app-providers";
 import { StakingRecord } from "@darwinia/app-types";
 import { prettifyNumber, prettifyTooltipNumber, toTimeAgo } from "@darwinia/app-utils";
@@ -33,6 +35,9 @@ const AccountOverview = () => {
     },
   });
 
+  const ringTokenIcon = selectedNetwork?.name === "Crab" ? crabIcon : ringIcon;
+  const ktonTokenIcon = selectedNetwork?.name === "Crab" ? cktonIcon : ktonIcon;
+
   return (
     <div className={"flex gap-[20px] lg:gap-0 justify-between flex-col lg:flex-row"}>
       {/*Power Card*/}
@@ -104,7 +109,7 @@ const AccountOverview = () => {
             {/*RING*/}
             <div className={"divider border-b pb-[20px] gap-[20px] flex flex-col"}>
               <div className={"flex gap-[5px] items-center"}>
-                <img className={"w-[30px]"} src={ringIcon} alt="image" />
+                <img className={"w-[30px]"} src={ringTokenIcon} alt="image" />
                 <div className={"uppercase text-18-bold"}>{selectedNetwork?.ring.symbol ?? "RING"}</div>
               </div>
               <div className={"flex flex-col gap-[2px]"}>
@@ -137,7 +142,7 @@ const AccountOverview = () => {
             {/*KTON*/}
             <div className={"gap-[20px] flex flex-col"}>
               <div className={"flex gap-[5px] items-center"}>
-                <img className={"w-[30px]"} src={ktonIcon} alt="image" />
+                <img className={"w-[30px]"} src={ktonTokenIcon} alt="image" />
                 <div className={"uppercase text-18-bold"}>{selectedNetwork?.kton.symbol ?? "KTON"}</div>
               </div>
               <div className={"flex flex-col gap-[2px]"}>

diff --git a/packages/app/src/components/DepositOverview/index.tsx b/packages/app/src/components/DepositOverview/index.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, useEffect, useState } from "react";
 import { localeKeys, useAppTranslation } from "@darwinia/app-locale";
 import { Button, Input, OptionProps, Select, notification, Tooltip } from "@darwinia/ui";
 import ringIcon from "../../assets/images/ring.svg";
+import crabIcon from "../../assets/images/crab.svg";
 import { useStorage, useWallet } from "@darwinia/app-providers";
 import {
   calculateKtonFromRingDeposit,
@@ -23,6 +24,7 @@ const DepositOverview = () => {
   const [amount, setAmount] = useState<string>("");
   const [amountHasError, setAmountHasError] = useState<boolean>(false);
   const [rewardedKTON, setRewardedKTON] = useState<string>("0");
+  const ringTokenIcon = selectedNetwork?.name === "Crab" ? crabIcon : ringIcon;
 
   useEffect(() => {
     setDepositTerm("1");
@@ -159,7 +161,7 @@ const DepositOverview = () => {
                 leftIcon={null}
                 rightSlot={
                   <div className={"flex gap-[10px] items-center px-[10px]"}>
-                    <img className={"w-[20px]"} src={ringIcon} alt="image" />
+                    <img className={"w-[20px]"} src={ringTokenIcon} alt="image" />
                     <div className={"uppercase"}>{(selectedNetwork?.ring.symbol ?? "RING").toUpperCase()}</div>
                   </div>
                 }

diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx
@@ -44,8 +44,8 @@ const Header = () => {
         forceSetAccountAddress(account);
       }
     } else {
-      /* use test network by default */
-      const index = supportedNetworks.findIndex((network) => network.name === "Pangolin");
+      /* use Crab network by default */
+      const index = supportedNetworks.findIndex((network) => network.name === "Crab");
       changeConnectedNetwork(supportedNetworks[index]);
     }
   }, []);

diff --git a/packages/app/src/components/StakingOverview/index.tsx b/packages/app/src/components/StakingOverview/index.tsx
@@ -2,6 +2,8 @@ import { localeKeys, useAppTranslation } from "@darwinia/app-locale";
 import { Button, CheckboxGroup, Dropdown, Input, notification, Tooltip } from "@darwinia/ui";
 import ringIcon from "../../assets/images/ring.svg";
 import ktonIcon from "../../assets/images/kton.svg";
+import crabIcon from "../../assets/images/crab.svg";
+import cktonIcon from "../../assets/images/ckton.svg";
 import { useDispatch, useStorage, useWallet } from "@darwinia/app-providers";
 import caretDownIcon from "../../assets/images/caret-down.svg";
 import JazzIcon from "../JazzIcon";
@@ -50,6 +52,9 @@ const StakingOverview = () => {
    * for gas fee */
   const minimumRingBalance = 0;
 
+  const ringTokenIcon = selectedNetwork?.name === "Crab" ? crabIcon : ringIcon;
+  const ktonTokenIcon = selectedNetwork?.name === "Crab" ? cktonIcon : ktonIcon;
+
   const getRingValueErrorJSX = () => {
     return ringHasError ? <div /> : null;
   };
@@ -360,7 +365,7 @@ const StakingOverview = () => {
                   error={getRingValueErrorJSX()}
                   rightSlot={
                     <div className={"flex gap-[10px] items-center px-[10px]"}>
-                      <img className={"w-[20px]"} src={ringIcon} alt="image" />
+                      <img className={"w-[20px]"} src={ringTokenIcon} alt="image" />
                       <div className={"uppercase"}>{selectedNetwork?.ring.symbol ?? "RING"}</div>
                     </div>
                   }
@@ -390,7 +395,7 @@ const StakingOverview = () => {
                   error={getKtonValueErrorJSX()}
                   rightSlot={
                     <div className={"flex gap-[10px] items-center px-[10px]"}>
-                      <img className={"w-[20px]"} src={ktonIcon} alt="image" />
+                      <img className={"w-[20px]"} src={ktonTokenIcon} alt="image" />
                       <div className={"uppercase"}>{selectedNetwork?.kton.symbol ?? "RING"}</div>
                     </div>
                   }