add hypervibes module

README.md

@@ -29,11 +29,19 @@ Install dependencies:
 $ yarn
 ```
 
-Generate **Ethereum** and **Rinkeby** RPC endpoints using [Infura](https://infura.io/) or [Alchemy](https://www.alchemy.com/) and add the following environment variables to a `.env.local` file:
+You'll need RPC endpoints for all networks you plan to use during local development.  You can generate private RPC endpoints with [Infura](https://infura.io/) or [Alchemy](https://www.alchemy.com/), or search for public RPC endpoints to use.
+
+Add the following environment variables to a `.env.local` file:
 
 ```
 REACT_APP_ETHEREUM_RPC_URL=???
+REACT_APP_POLYGON_RPC_URL=???
+REACT_APP_FANTOM_RPC_URL=???
+REACT_APP_ARBITRUM_RPC_URL=???
+REACT_APP_ROPSTEN_RPC_URL=???
 REACT_APP_RINKEBY_RPC_URL=???
+REACT_APP_GOERLI_RPC_URL=???
+REACT_APP_MUMBAI_RPC_URL=???
 ```
 
 Run the app in development mode:

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));
+};