diff --git a/src/renderer/App.css b/src/renderer/App.css
index 785a84e73..22274a350 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -61,3 +61,16 @@ a:hover {
align-items: center;
margin: 20px 0;
}
+
+@keyframes spin {
+ from {
+ transform: scale(1) rotate(0deg);
+ }
+ to {
+ transform: scale(1) rotate(360deg);
+ }
+}
+
+.spin {
+ animation: spin 10s infinite linear;
+}
diff --git a/src/renderer/Footer.tsx b/src/renderer/Footer.tsx
index 24ec412b7..cc85d7edd 100644
--- a/src/renderer/Footer.tsx
+++ b/src/renderer/Footer.tsx
@@ -145,6 +145,7 @@ const Footer = () => {
theme="monokai"
displayDataTypes={false}
enableClipboard={false}
+ style={{ overflow: 'auto' }}
/>
Geth Error Logs
{
+ const [sIsSyncing, setIsSyncing] = useState();
const [sSyncPercent, setSyncPercent] = useState('');
const [sPeers, setPeers] = useState();
const qExeuctionIsSyncing = useGetExecutionIsSyncingQuery(null, {
@@ -26,19 +27,29 @@ const Header = () => {
});
useEffect(() => {
- console.log('qExeuctionIsSyncing.data: ', qExeuctionIsSyncing.data);
+ console.log('qExeuctionIsSyncing: ', qExeuctionIsSyncing);
+ if (qExeuctionIsSyncing.isError) {
+ setSyncPercent('');
+ setIsSyncing(false);
+ return;
+ }
const syncingData = qExeuctionIsSyncing.data;
- console.log('curr sync: ', syncingData);
if (typeof syncingData === 'object') {
const syncRatio = syncingData.currentBlock / syncingData.highestBlock;
setSyncPercent((syncRatio * 100).toFixed(1));
+ setIsSyncing(true);
} else {
setSyncPercent('');
+ setIsSyncing(false);
}
}, [qExeuctionIsSyncing]);
useEffect(() => {
- console.log('qExecutionPeers.data: ', qExecutionPeers.data);
+ console.log('qExecutionPeers: ', qExecutionPeers);
+ if (qExecutionPeers.isError) {
+ setPeers(undefined);
+ return;
+ }
if (typeof qExecutionPeers.data === 'string') {
setPeers(hexToDecimal(qExecutionPeers.data));
} else {
@@ -89,7 +100,7 @@ const Header = () => {
alignContent: 'center',
}}
>
-
+
{sSyncPercent}% synced