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

@@ -15,7 +15,9 @@
     "@ethersproject/contracts": "^5.4.1",
     "@ethersproject/providers": "^5.4.5",
     "@hookform/devtools": "^4.0.1",
+    "dataloader": "^2.0.0",
     "ethers": "^5.5.1",
+    "ethers-multicall": "0.2.1",
     "get-ens": "^2.0.1",
     "graphql": "^15.7.0",
     "graphql-request": "^3.6.1",
@@ -53,7 +55,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,61 @@
+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 | undefined>();
+
+  useEffect(() => {
+    const h = setInterval(update, 100);
+    return () => clearInterval(h);
+  }, [interpolation]);
+
+  const update = () => {
+    if (interpolation == null) {
+      setAlpha(BigNumber.from(0));
+      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 <>-</>;
+  }
+
+  // un-inited state
+  if (alpha == null) {
+    return null;
+  }
+
+  // add alpha to value and clamp to max
+  let num = value.add(alpha);
+  if (interpolation != null) {
+    num = num.gt(interpolation.max) ? interpolation.max : num;
+  }
+
+  const truncated = Number(formatUnits(num, decimals)).toFixed(3);
+
+  return <>{truncated}</>;
+};

src/components/InfusionTicker.tsx

@@ -0,0 +1,67 @@
+import { BigNumber } from 'ethers';
+import { useQuery } from 'react-query';
+import { getLoaders } from '../hypervibes/dataloaders';
+import DecimalNumber from './DecimalNumber';
+
+interface Props {
+  chainId: number;
+  collection: string;
+  tokenId: BigNumber;
+  realmId: BigNumber;
+}
+
+export default ({ chainId, realmId, collection, tokenId }: Props) => {
+  const loaders = getLoaders(chainId);
+
+  // fetch data from the chain and the graph simul
+  const { data, isError } = useQuery([realmId, collection, tokenId], async () =>
+    Promise.all([
+      loaders.tokenData.load({
+        realmId,
+        collection: collection,
+        tokenId,
+      }),
+      loaders.indexedInfusion.load({ collection: collection, tokenId }),
+    ])
+  );
+
+  if (isError) {
+    return null;
+  } else if (data === undefined) {
+    return null;
+  }
+
+  const [tokenData, infusionData] = data;
+
+  if (tokenData.view === null) {
+    return null;
+  }
+
+  const infusion = infusionData.infusions.find(i => i.realm.id.eq(realmId));
+
+  if (!infusion) {
+    return null;
+  }
+
+  const { realm } = infusion;
+
+  return (
+    <>
+      <DecimalNumber
+        value={BigNumber.from(0)}
+        decimals={realm.token.decimals}
+        interpolation={{
+          dailyRate: realm.dailyRate,
+          sampledAt: tokenData.view.lastClaimAt,
+          max: tokenData.view.balance,
+        }}
+      />{' '}
+      /{' '}
+      <DecimalNumber
+        value={tokenData.view.balance}
+        decimals={realm.token.decimals}
+      />{' '}
+      {realm.token.symbol}
+    </>
+  );
+};

src/hooks/useMetadata.ts

@@ -1,5 +1,5 @@
 import { useQuery } from 'react-query';
-import { Metadata, resolveMetadata } from '../lib/nft';
+import { Metadata, resolveMetadata } from '../hypervibes/nft';
 
 export default (tokenUri: string | undefined | null) => {
   const query = useQuery<Metadata | undefined, Error>(