diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index 9badcf6fd..8561d250c 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -21,7 +21,7 @@ export default function Advanced({ onChange: (event: ChangeEvent) => void }): ReactElement { const { appConfig } = useSiteMetadata() - const { account, balance, chainId } = useOcean() + const { account, balance, chainId, refreshBalance } = useOcean() const [error, setError] = useState() 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 (
diff --git a/src/components/molecules/Wallet/index.tsx b/src/components/molecules/Wallet/index.tsx index 5988254cf..58b36fa63 100644 --- a/src/components/molecules/Wallet/index.tsx +++ b/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,