Merge pull request #442 from NodeFactoryIo/beroburny/ui-improvments

UI improvements
ChainSafe · Jan 20, 2021 · 9956d93 · 9956d93
2 parents 392fefb + 469f5d7
commit 9956d93
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 23 deletions.
diff --git a/src/renderer/components/Button/ButtonAction.tsx b/src/renderer/components/Button/ButtonAction.tsx
@@ -4,6 +4,8 @@ import add from "../../assets/img/buttons/Add.svg";
 import copyDefault from "../../assets/img/buttons/CopyDefault.svg";
 import ReactTooltip from "react-tooltip";
 import {getRandomInt} from "../../services/mnemonic/utils/random";
+import {faPen} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 export interface IActionButtonProps {
     onClick?: () => void;
@@ -74,6 +76,14 @@ export const AddButton: React.FunctionComponent<IActionButtonProps> = ({onClick}
     );
 };
 
+export const EditButton: React.FunctionComponent<IActionButtonProps> = ({onClick}) => {
+    return (
+        <button className='add-button' onClick={onClick}>
+            <FontAwesomeIcon className='icon' icon={faPen} size='lg' transform={{x: 1}} />
+        </button>
+    );
+};
+
 export const BackButton: React.FunctionComponent<IActionButtonProps> = ({onClick}) => {
     return (
         <button className={"back-button"} onClick={onClick}>

diff --git a/src/renderer/components/Button/buttons.scss b/src/renderer/components/Button/buttons.scss
@@ -55,8 +55,9 @@
     }
 }
 .icon{
- margin: auto;
- display: block;
+    margin: auto;
+    display: block;
+    color: $primary-blue-100;
 }
 
 .div-large {

diff --git a/src/renderer/containers/Validator/Validator.tsx b/src/renderer/containers/Validator/Validator.tsx
@@ -3,7 +3,7 @@ import {useDispatch, useSelector} from "react-redux";
 import {PasswordPrompt} from "../../components/Prompt/PasswordPrompt";
 import {Routes} from "../../constants/routes";
 import {calculateROI} from "../../services/utils/math";
-import {AddButton} from "../../components/Button/ButtonAction";
+import {EditButton} from "../../components/Button/ButtonAction";
 import {ButtonDestructive, ButtonPrimary} from "../../components/Button/ButtonStandard";
 import {ValidatorStat} from "../../components/Cards/ValidatorStat";
 import {PrivateKeyField} from "../../components/PrivateKeyField/PrivateKeyField";
@@ -76,7 +76,7 @@ export const Validator: React.FunctionComponent<IValidatorSimpleProps> = (props:
                     </div>
 
                     <Link to={Routes.ASSIGN_BEACON_NODE.replace(":validatorKey", props.publicKey)}>
-                        <AddButton />
+                        <EditButton />
                     </Link>
                 </div>
             </div>

diff --git a/src/renderer/containers/ValidatorDetails/ValidatorStats/ValidatorStats.tsx b/src/renderer/containers/ValidatorDetails/ValidatorStats/ValidatorStats.tsx
@@ -1,36 +1,24 @@
 import React, {ReactElement, useEffect, useState} from "react";
-import {useHistory} from "react-router";
-import {useDispatch} from "react-redux";
 import {ButtonSecondary} from "../../../components/Button/ButtonStandard";
-import {exportKeystore} from "../../../services/utils/account";
 import {IValidator} from "../../../ducks/validator/slice";
-import {createNotification} from "../../../ducks/notification/actions";
 import {SimpleLineChart, SimpleLineChartRecord} from "../../../components/SimpleLineChart/SimpleLineChart";
 import {ResponsiveContainer} from "recharts";
 import database from "../../../services/db/api/database";
 import {utils} from "ethers";
+import {shell} from "electron";
+import ReactTooltip from "react-tooltip";
 
 interface IValidatorStatsProps {
     validator: IValidator;
 }
 
 export const ValidatorStats = ({validator}: IValidatorStatsProps): ReactElement => {
-    const history = useHistory();
-    const dispatch = useDispatch();
     const [data, setData] = useState<SimpleLineChartRecord[]>([]);
 
-    const onExportValidator = (): void => {
-        const result = exportKeystore(validator);
-        // show notification only if success or error, not on cancel
-        if (result) {
-            dispatch(
-                createNotification({
-                    source: history.location.pathname,
-                    title: result.message,
-                    level: result.level,
-                }),
-            );
-        }
+    const onBeaconChainClick = (): void => {
+        const network = validator.network !== "mainet" ? validator.network + "." : "";
+        const validatorId = validator.publicKey.substr(2);
+        shell.openExternal(`https://${network}beaconcha.in/validator/${validatorId}`);
     };
 
     useEffect(() => {
@@ -56,7 +44,10 @@ export const ValidatorStats = ({validator}: IValidatorStatsProps): ReactElement
         <div className='validator-details-stats'>
             <div className='row space-between'>
                 <h2>{validator.name}</h2>
-                <ButtonSecondary onClick={onExportValidator}>EXPORT</ButtonSecondary>
+                <ReactTooltip />
+                <ButtonSecondary onClick={onBeaconChainClick} data-tip='Ethereum 2.0 Beacon Chain Explorer'>
+                    Explorer
+                </ButtonSecondary>
             </div>
 
             <div className='node-graph-container' style={{width: "100%"}}>