A-1207235404867093 (#171)

* feat: add icons

* feat: add update button component

* feat: update network provider

* feat: add new button to header

* feat: remove loader fetching data

* fix: timeout

src/components/basic/Tooltip/Tooltip.css

@@ -12,6 +12,7 @@
   color: rgb(var(--color-white));
   font-size: 0.8rem;
   transition: opacity 0.7s ease;
+  z-index: 100000;
 }
 
 .top {

src/components/composed/Header/Header.js

@@ -8,6 +8,7 @@ import { ReactComponent as ExpandImg } from '@Assets/images/icon-expand.svg'
 import { ReactComponent as SettingsImg } from '@Assets/images/settings.svg'
 
 import { Button, Logo, Tooltip } from '@BasicComponents'
+import { UpdateButton } from '@ComposedComponents'
 import { AccountContext } from '@Contexts'
 
 import './Header.css'
@@ -154,6 +155,7 @@ const Header = ({ customBackAction }) => {
         </>
       )}
       <Logo unlocked={unlocked} />
+      {unlocked && <UpdateButton />}
     </header>
   )
 }

src/components/composed/UpdateButton/UpdateButton.css

@@ -0,0 +1,33 @@
+.update-button {
+  position: absolute;
+  top: 17px;
+  right: 216px;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+}
+
+.update-button svg {
+  width: 100%;
+  height: 100%;
+  fill: rgb(var(--color-green));
+}
+
+.update-button svg path {
+  fill: rgb(var(--color-green));
+}
+
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-animated {
+  animation: spin 2s linear infinite;
+}

src/components/composed/UpdateButton/UpdateButton.js

@@ -0,0 +1,53 @@
+import { useState, useContext, useEffect } from 'react'
+
+import { Button } from '@BasicComponents'
+import { ReactComponent as SuccessImg } from '@Assets/images/icon-success.svg'
+import { ReactComponent as LoadingImg } from '@Assets/images/icon-loading.svg'
+
+import { NetworkContext } from '@Contexts'
+
+import './UpdateButton.css'
+
+
+const UpdateButton = () => {
+  const { fetchAllData, fetchDelegations } =
+    useContext(NetworkContext)
+  const [loading, setLoading] = useState(false)
+  const [showSuccess, setShowSuccess] = useState(false)
+
+  const handleClick = async () => {
+    try {
+      setLoading(true)
+      await fetchAllData()
+      await fetchDelegations()
+      setLoading(false)
+      setShowSuccess(true)
+    }
+    catch (error) {
+      console.error(error)
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setShowSuccess(false)
+    }, 3000)
+    return () => clearTimeout(timeout)
+  }, [showSuccess])
+
+  return (
+    <Button
+      onClickHandle={handleClick}
+      className="update-button"
+      alternate
+      extraStyleClasses={['update-button']}
+    >
+      {loading && <LoadingImg className="loading-animated" />}
+      {!loading && showSuccess && <SuccessImg />}
+      {!loading && !showSuccess && <LoadingImg />}
+    </Button>
+  )
+}
+
+export default UpdateButton

src/components/composed/index.js

@@ -19,6 +19,7 @@ import AddWallet from './AddWallet/AddWallet'
 import CurrentStaking from './CurrentStaking/CurrentStaking'
 import HelpTooltip from './HelpTooltip/HelpTooltip'
 import RestoreSeedField from './RestoreSeedField/RestoreSeedField'
+import UpdateButton from './UpdateButton/UpdateButton'
 
 export {
   Balance,
@@ -42,4 +43,5 @@ export {
   CurrentStaking,
   HelpTooltip,
   RestoreSeedField,
+  UpdateButton,
 }