fix: add loading state to info page (#584)

* fix: add loading state to info page * refactor: use bee-js for readiness check
2022-11-14 14:22:49 +01:00
parent 1ce4a47495
commit 02469046b0
8 changed files with 160 additions and 95 deletions
@@ -0,0 +1,48 @@
+import { useContext } from 'react'
+import { useNavigate } from 'react-router'
+import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
+import Card from '../../components/Card'
+import { Context as BeeContext } from '../../providers/Bee'
+import { ROUTES } from '../../routes'
+
+export function ChequebookInfoCard() {
+  const { chequebookBalance } = useContext(BeeContext)
+  const navigate = useNavigate()
+
+  if (
+    chequebookBalance?.availableBalance !== undefined &&
+    chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0)
+  ) {
+    return (
+      <Card
+        buttonProps={{
+          iconType: ExchangeFunds,
+          children: 'View chequebook',
+          onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
+        }}
+        icon={<ExchangeFunds />}
+        title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
+        subtitle="Current chequebook balance."
+        status="ok"
+      />
+    )
+  }
+
+  return (
+    <Card
+      buttonProps={{
+        iconType: ExchangeFunds,
+        children: 'View chequebook',
+        onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
+      }}
+      icon={<ExchangeFunds />}
+      title={
+        chequebookBalance?.availableBalance
+          ? `${chequebookBalance.availableBalance.toSignificantDigits(4)} xBZZ`
+          : 'No available balance.'
+      }
+      subtitle="Chequebook not setup."
+      status="error"
+    />
+  )
+}