handle balance refetching

* refresh balance when account popup is opened
* refresh balance periodically when advanced price widget is visible

src/components/molecules/FormFields/Price/Advanced.tsx

@@ -21,7 +21,7 @@ export default function Advanced({
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
-  const { account, balance, chainId } = useOcean()
+  const { account, balance, chainId, refreshBalance } = useOcean()
 
   const [error, setError] = useState<string>()
   const correctNetwork = isCorrectNetwork(chainId)
@@ -42,6 +42,17 @@ export default function Advanced({
     }
   }, [ocean])
 
+  // refetch balance periodically
+  useEffect(() => {
+    if (!account) return
+
+    const balanceInterval = setInterval(() => refreshBalance(), 10000) // 10 sec.
+
+    return () => {
+      clearInterval(balanceInterval)
+    }
+  }, [])
+
   return (
     <div className={stylesIndex.content}>
       <div className={styles.advanced}>

src/components/molecules/Wallet/index.tsx

@@ -14,10 +14,13 @@ const animation = {
 }
 
 export default function Wallet(): ReactElement {
-  const { accountId } = useOcean()
+  const { accountId, refreshBalance } = useOcean()
   const [props, setSpring] = useSpring(() => animation.from)
 
+  // always refetch balance when popover is opened
   function onMount() {
+    accountId && refreshBalance()
+
     setSpring({
       transform: 'scale(1) translateY(0)',
       onRest: (): void => null,