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