Merge pull request #920 from oraichain/refactor/remove-tabs

Separate delegated validator page

sonar-project.properties

@@ -1 +1 @@
-sonar.projectKey=oraichain_oraiscan-frontend_AYa6x_5MjQmnUOm4jDP9
+sonar.projectKey=oraichain_oraiscan-frontend_AYoDFGkVkauZkVxG9Y0Q

src/components/Wallet/DelegatedValidator/DelegatedClaim/ClaimCardList/ClaimCardList.js → src/components/DelegatedValidator/DelegatedClaim/ClaimCardList/ClaimCardList.js

@@ -12,7 +12,7 @@ import {walletStation} from "src/lib/walletStation";
 import {notification} from "antd";
 import {handleTransactionResponse} from "src/helpers/transaction";
 import LoadingOverlay from "src/components/common/LoadingOverlay";
-import {handleErrorMessage} from "../../../../../lib/scripts";
+import {handleErrorMessage} from "src/lib/scripts.js";
 import styles from "./ClaimCardList.module.scss";
 
 const cx = classNames.bind(styles);

src/components/Wallet/DelegatedValidator/DelegatedClaim/ClaimTable/ClaimRwAllBtn/ClaimRwAllBtn.js → src/components/DelegatedValidator/DelegatedClaim/ClaimTable/ClaimRwAllBtn/ClaimRwAllBtn.js

@@ -4,15 +4,14 @@ import cn from "classnames/bind";
 import {useForm} from "react-hook-form";
 import {useDispatch, useSelector} from "react-redux";
 import _ from "lodash";
-import * as yup from "yup";
 import {useHistory} from "react-router-dom";
 import {handleTransactionResponse, payloadTransaction} from "src/helpers/transaction";
 import amountConsts from "src/constants/amount";
 import DialogForm from "src/components/DialogForm";
 import {walletStation} from "src/lib/walletStation";
 import {notification} from "antd";
 import LoadingOverlay from "src/components/common/LoadingOverlay";
-import {handleErrorMessage} from "../../../../../../lib/scripts";
+import {handleErrorMessage} from "src/lib/scripts.js";
 import styles from "../ClaimRwBtn/ClaimRwBtn.module.scss";
 
 const cx = cn.bind(styles);

src/components/Wallet/DelegatedValidator/DelegatedClaim/ClaimTable/ClaimRwBtn/ClaimRwBtn.js → src/components/DelegatedValidator/DelegatedClaim/ClaimTable/ClaimRwBtn/ClaimRwBtn.js

@@ -10,12 +10,11 @@ import {showAlert} from "src/store/modules/global";
 import {useHistory} from "react-router-dom";
 import {handleTransactionResponse, payloadTransaction} from "src/helpers/transaction";
 import amountConsts from "src/constants/amount";
-import {calculateAmount} from "src/helpers/calculateAmount";
 import DialogForm from "src/components/DialogForm";
 import {walletStation} from "src/lib/walletStation";
 import {notification} from "antd";
 import LoadingOverlay from "src/components/common/LoadingOverlay";
-import {handleErrorMessage} from "../../../../../../lib/scripts";
+import {handleErrorMessage} from "src/lib/scripts.js";
 import styles from "./ClaimRwBtn.module.scss";
 
 const cx = cn.bind(styles);

src/components/Wallet/DelegatedValidator/DelegatedClaim/DelegatedClaim.js → src/components/DelegatedValidator/DelegatedClaim/DelegatedClaim.js

@@ -5,10 +5,10 @@ import cn from "classnames/bind";
 import {useTheme} from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import consts from "src/constants/consts";
-import ClaimTable from "src/components/Wallet/DelegatedValidator/DelegatedClaim/ClaimTable/ClaimTable";
-import ClaimTableSkeleton from "src/components/Wallet/DelegatedValidator/DelegatedClaim/ClaimTable/ClaimTableSkeleton";
-import ClaimCardList from "src/components/Wallet/DelegatedValidator/DelegatedClaim/ClaimCardList/ClaimCardList";
-import ClaimCardListSkeleton from "src/components/Wallet/DelegatedValidator/DelegatedClaim/ClaimCardList/ClaimCardListSkeleton";
+import ClaimTable from "src/components/DelegatedValidator/DelegatedClaim/ClaimTable/ClaimTable";
+import ClaimTableSkeleton from "src/components/DelegatedValidator/DelegatedClaim/ClaimTable/ClaimTableSkeleton";
+import ClaimCardList from "src/components/DelegatedValidator/DelegatedClaim/ClaimCardList/ClaimCardList";
+import ClaimCardListSkeleton from "src/components/DelegatedValidator/DelegatedClaim/ClaimCardList/ClaimCardListSkeleton";
 import NoResult from "src/components/common/NoResult";
 import arrowIcon from "src/assets/wallet/arrow.svg";
 import styles from "./DelegatedClaim.module.scss";
@@ -43,10 +43,6 @@ export default function({setActiveTab, address}) {
 		<div className={cx("delegated-claim")}>
 			<div className={cx("delegated-claim-header")}>
 				<div className={cx("title")}>Claim Reward</div>
-				<button className={cx("button")} onClick={() => setActiveTab(1)}>
-					Withdraw
-					<img className={cx("button-icon")} src={arrowIcon} />
-				</button>
 			</div>
 			{tableSection}
 		</div>

src/components/Wallet/DelegatedValidator/DelegatedClaim/DelegatedTable/Claim/Claim.js → src/components/DelegatedValidator/DelegatedClaim/DelegatedTable/Claim/Claim.js

@@ -15,7 +15,7 @@ import BigNumber from "bignumber.js";
 import {formatOrai, amountCoinDecimal} from "src/helpers/helper";
 import consts from "src/constants/consts";
 import {useFetch, useHistory} from "src/hooks";
-import {walletStation} from "src/lib/walletStation";
+import {walletStation} from "src/lib/walletStation.js";
 import {handleTransactionResponse} from "src/helpers/transaction";
 import {notification} from "antd";
 import LoadingOverlay from "src/components/common/LoadingOverlay";

src/components/Wallet/DelegatedValidator/DelegatedClaim/DelegatedTable/DelegatedTable.js → src/components/DelegatedValidator/DelegatedClaim/DelegatedTable/DelegatedTable.js

@@ -9,7 +9,7 @@ import {formatOrai} from "src/helpers/helper";
 import {tableThemes} from "src/constants/tableThemes";
 import ThemedTable from "src/components/common/ThemedTable";
 import GiftIcon from "./Gift";
-import {walletStation} from "src/lib/walletStation";
+import {walletStation} from "src/lib/walletStation.js";
 import {handleTransactionResponse} from "src/helpers/transaction";
 import {notification} from "antd";
 import LoadingOverlay from "src/components/common/LoadingOverlay";

src/components/Wallet/DelegatedValidator/DelegatedWithdraw/DelegatedWithdraw.js → src/components/DelegatedValidator/DelegatedWithdraw/DelegatedWithdraw.js

@@ -6,10 +6,10 @@ import {useTheme} from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import consts from "src/constants/consts";
 import NoResult from "src/components/common/NoResult";
-import WithdrawTable from "src/components/Wallet/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawTable";
-import WithdrawTableSkeleton from "src/components/Wallet/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawTableSkeleton";
-import WithdrawCardList from "src/components/Wallet/DelegatedValidator/DelegatedWithdraw/WithdrawCardList/WithdrawCardList";
-import WithdrawCardListSkeleton from "src/components/Wallet/DelegatedValidator/DelegatedWithdraw/WithdrawCardList/WithdrawCardListSkeleton";
+import WithdrawTable from "src/components/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawTable";
+import WithdrawTableSkeleton from "src/components/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawTableSkeleton";
+import WithdrawCardList from "src/components/DelegatedValidator/DelegatedWithdraw/WithdrawCardList/WithdrawCardList";
+import WithdrawCardListSkeleton from "src/components/DelegatedValidator/DelegatedWithdraw/WithdrawCardList/WithdrawCardListSkeleton";
 import arrowIcon from "src/assets/wallet/arrow.svg";
 import styles from "./DelegatedWithdraw.module.scss";
 
@@ -46,10 +46,6 @@ export default function({setActiveTab, address}) {
 					<div className={cx("title")}>Withdraw tokens</div>
 					<p className={cx("note")}>Please be aware that you have to wait 14 days to complete unbonding your funds from validators.</p>
 				</div>
-				<button className={cx("button")} onClick={() => setActiveTab(0)}>
-					Claim Reward
-					<img className={cx("button-icon")} src={arrowIcon} />
-				</button>
 			</div>
 			{tableSection}
 		</div>

src/components/Wallet/DelegatedValidator/DelegatedWithdraw/WithdrawTable/RedelegateBtn/RedelegateBtn.js → src/components/DelegatedValidator/DelegatedWithdraw/WithdrawTable/RedelegateBtn/RedelegateBtn.js

@@ -16,7 +16,7 @@ import {calculateAmount} from "src/helpers/calculateAmount";
 import {walletStation} from "src/lib/walletStation";
 import {notification} from "antd";
 import LoadingOverlay from "src/components/common/LoadingOverlay";
-import {handleErrorMessage} from "../../../../../../lib/scripts";
+import {handleErrorMessage} from "src/lib/scripts.js";
 import styles from "./RedelegateBtn.module.scss";
 import { amountCoinDecimal } from 'src/helpers/helper'
 import consts from "src/constants/consts";

src/components/Wallet/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawBtn/WithdrawBtn.js → src/components/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawBtn/WithdrawBtn.js

@@ -18,7 +18,7 @@ import {calculateAmount} from "src/helpers/calculateAmount";
 import {walletStation} from "src/lib/walletStation";
 import {notification} from "antd";
 import LoadingOverlay from "src/components/common/LoadingOverlay";
-import {handleErrorMessage} from "../../../../../../lib/scripts";
+import {handleErrorMessage} from "src/lib/scripts.js";
 import styles from "./WithdrawBtn.module.scss";
 
 const cx = cn.bind(styles);

src/components/Wallet/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawTableSkeleton.js → src/components/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawTableSkeleton.js

@@ -3,7 +3,7 @@ import Skeleton from "@material-ui/lab/Skeleton";
 import classNames from "classnames/bind";
 import {tableThemes} from "src/constants/tableThemes";
 import ThemedTable from "src/components/common/ThemedTable";
-import {getHeaderRow} from "src/components/Wallet/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawTable";
+import {getHeaderRow} from "src/components/DelegatedValidator/DelegatedWithdraw/WithdrawTable/WithdrawTable";
 import styles from "./WithdrawTable.module.scss";
 
 const WithdrawTableSkeleton = memo(({rows = 5}) => {

src/components/Wallet/Tabs/Tabs.js

@@ -4,7 +4,6 @@ import cn from "classnames/bind";
 import {useGet} from "restful-react";
 import ContactIcon from "src/icons/Tabs/ProposalsTabIcon";
 import ValidatorsIcon from "src/icons/Tabs/ValidatorsTabIcon";
-import DelegatedIcon from "src/icons/Validators/ValidatorsIcon";
 import TransactionsIcon from "src/icons/Tabs/TransactionsTabIcon";
 import {getListCwToken} from "src/lib/api";
 import styles from "./Tabs.module.scss";
@@ -33,10 +32,6 @@ export default function({activeTab, setActiveTab, isBecomeValidator, address}) {
 					<div className={cx("tab-text")}>Your Delegators</div>
 				</div>
 			)}
-			<div className={cx("tab", activeTab === 2 ? "active" : "")} onClick={() => setActiveTab(2)}>
-				<DelegatedIcon className={cx("tab-icon")} />
-				<div className={cx("tab-text")}>Delegated Validator</div>
-			</div>
 			<div className={cx("tab", activeTab === 4 ? "active" : "")} onClick={() => setActiveTab(4)}>
 				<ContactIcon className={cx("tab-icon")} />
 				<div className={cx("tab-text")}>Contact</div>

src/containers/DelegatedValidator/DelegatedValidator.js

@@ -0,0 +1,32 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from "react";
+import cn from "classnames/bind";
+import {useSelector} from "react-redux";
+import {useGet} from "restful-react";
+import {_} from "src/lib/scripts";
+import consts from "src/constants/consts";
+import DelegatedClaim from "src/components/DelegatedValidator/DelegatedClaim";
+import DelegatedWithdraw from "src/components/DelegatedValidator/DelegatedWithdraw";
+import styles from "./DelegatedValidator.module.scss";
+
+const cx = cn.bind(styles);
+
+export default function(props) {
+	const [activeTab, setActiveTab] = React.useState(0);
+	const {address} = useSelector(state => state.wallet);
+	const path = consts.API.VALIDATOR + "/" + address;
+	const {data} = useGet({
+		path: path,
+	});
+
+	return (
+    <div className={cx("")}>
+        <div className={cx("DelegatedValidator")}>
+            <DelegatedClaim setActiveTab={setActiveTab} address={address} />
+        </div>
+        <div className={cx("DelegatedValidator")}>
+            <DelegatedWithdraw setActiveTab={setActiveTab} address={address} />
+        </div>
+    </div>
+	);
+}

src/components/Wallet/DelegatedValidator/DelegatedValidator.module.scss → src/containers/DelegatedValidator/DelegatedValidator.module.scss

@@ -2,11 +2,12 @@
 	padding: 0;
 	background: transparent;
 	box-shadow: none;
+	margin-bottom: 40px;
 
 	@media screen and (min-width: 1280px) {
 		padding: 20px;
 		background: var(--common-containerBackgroundColor);
 		box-shadow: 0px 2px 8px var(--common-boxShadowColor);
 		border-radius: 8px;
 	}
-}
+}

src/containers/DelegatedValidator/index.js

@@ -0,0 +1,3 @@
+import DelegatedValidator from "./DelegatedValidator1";
+
+export default DelegatedValidator;

src/containers/Router/Router.js

@@ -37,7 +37,8 @@ const OracleReportDetail = lazy(() => lazyRetry(() => import(/* webpackChunkName
 const ExportData = lazy(() => lazyRetry(() => import(/* webpackChunkName: "ExportData" */ 'src/containers/ExportData'), 'ExportData'));
 const WasmCodeDetail = lazy(() => lazyRetry(() => import(/* webpackChunkName: "WasmCodeDetail" */ 'src/containers/WasmCode'), 'WasmCodeDetail'));
 const BlockList = lazy(() => lazyRetry(() => import(/* webpackChunkName: "BlockListV2" */ 'src/containers/BlockListV2'), "BlockListV2"));
-
+const DelegatedValidator = lazy(() => lazyRetry(() => import(/* webpackChunkName: "DelegatedValidator" */ 'src/containers/DelegatedValidator/DelegatedValidator'), "DelegatedValidator"));
+
 // a function to retry loading a chunk to avoid chunk load error for out of date code
 const lazyRetry = function(componentImport, name) {
     return new Promise((resolve, reject) => {
@@ -60,7 +61,6 @@ const lazyRetry = function(componentImport, name) {
     });
 };
 
-
 export default function(props) {
 	//  preload stuff that needs preloading
 	usePreload();
@@ -97,6 +97,7 @@ export default function(props) {
 					<Route path='/ai-request/:contract/:id' component={OracleRequestDetail} />
 					<Route path='/export-data/:account' component={ExportData} />
 					<Route path='/wasm-code/:codeId' component={WasmCodeDetail} />
+					<Route path='/delegated-validator' component={DelegatedValidator}/>
 					<Route render={() => <NotFound />} />
 				</Switch>
 			</Suspense>

src/containers/Router/Router.module.scss

@@ -7,6 +7,10 @@
 	// padding: var(--heightHeader) 0 0 0;
 	min-height: calc(100vh - var(--heightFooter));
 	min-width: 360px;
+	max-width: 1280px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0 24px;
 
 	@include media("<large") {
 		padding: 0 15px 1.8rem;

src/containers/Tabs/Tabs.js

@@ -158,6 +158,11 @@ const Tabs = memo(() => {
 				title: "Accounts",
 				activePath: "/accounts",
 			},
+			{
+				pathName: "/delegated-validator",
+				title: "Delegated Validator",
+				activePath: "/delegated-validator",
+			},
 		],
 		Transactions: [
 			{

src/containers/Wallet/Wallet.js

@@ -11,10 +11,8 @@ import TitleWrapper from "src/components/common/TitleWrapper";
 import StatusBar from "src/components/Wallet/StatusBar";
 import Tabs from "src/components/Wallet/Tabs";
 import {RegisterDetail} from "src/components/Wallet/Register";
-import DelegatedValidator from "src/components/Wallet/DelegatedValidator";
 import Transaction from "src/components/Wallet/Transaction";
 import Contact from "src/components/Wallet/Contact";
-import AiServiceFee from "src/components/Wallet/AiServiceFee";
 import CwToken from "src/components/Wallet/CwToken";
 import styles from "./Wallet.module.scss";
 
@@ -43,9 +41,8 @@ export default function(props) {
 			<Tabs activeTab={activeTab} setActiveTab={setActiveTab} isBecomeValidator={isBecomeValidator} address={address} />
 			{activeTab === 0 && <Transaction account={address} />}
 			{activeTab === 6 && <CwToken address={address} />}
-			{activeTab === 2 && <DelegatedValidator address={address} />}
 			{activeTab === 3 && isBecomeValidator && <RegisterDetail address={address} validatorAddress={data?.operator_address} />}
 			{activeTab === 4 && <Contact />}
-		</Container>
+		</Container> 
 	);
 }