add DecimalNumber component

package.json

@@ -54,7 +54,7 @@
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^7.0.4",
     "lint-staged": "^11.2.6",
     "prettier": "^2.4.1",

src/components/DecimalNumber.tsx

@@ -0,0 +1,51 @@
+import { commify, formatUnits } from '@ethersproject/units';
+import { BigNumber } from 'ethers';
+import { useEffect, useState } from 'react';
+
+interface Props {
+  value: BigNumber | null | undefined;
+  decimals: number;
+  precision?: number;
+  interpolation?: {
+    sampledAt: number;
+    dailyRate: BigNumber;
+    max: BigNumber;
+  };
+}
+
+/**
+ * Render a BigNumber, optionally lerped in real time based on a sample time and
+ * daily rate
+ */
+export default ({ value, decimals, interpolation }: Props) => {
+  const [alpha, setAlpha] = useState(BigNumber.from(0));
+
+  useEffect(() => {
+    const h = setInterval(update, 100);
+    return () => clearInterval(h);
+  }, [interpolation]);
+
+  const update = () => {
+    if (interpolation == null) return;
+
+    // compute time since sample and amount to add (alpha)
+    const delta = Math.max(0, Date.now() - interpolation.sampledAt * 1000);
+    const nextAlpha = interpolation.dailyRate
+      .mul(delta)
+      .div(1000 * 60 * 60 * 24);
+
+    setAlpha(nextAlpha);
+  };
+
+  if (value == null) {
+    return '-';
+  }
+
+  // add alpha to value and clamp to max
+  let num = value.add(alpha);
+  if (interpolation != null) {
+    num = num.gt(interpolation.max) ? interpolation.max : num;
+  }
+
+  return commify(formatUnits(num, decimals));
+};

src/hypervibes/contract.ts

@@ -27,8 +27,10 @@ export interface GetTokenViewOutput {
 
 /**
  * get infusion data about a batch of (realm,nft,tokenId) tuples directly from
- * the blockchain. Will not throw if invalid token or non-infused token, view
- * will just be null. Will throw on an invalid realm id
+ * the blockchain.
+ *
+ * Will not throw if invalid token or non-infused token, view will just be null.
+ * Will throw on an invalid realm id
  */
 export const batchGetTokenView = async (
   batch: GetTokenViewInput[],

yarn.lock

@@ -4287,10 +4287,10 @@ eslint-plugin-prettier@^4.0.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-react-hooks@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
-  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
+eslint-plugin-react-hooks@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
+  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
 
 eslint-plugin-react@^7.26.1:
   version "7.26.1"