Historic fee chart

components/AverageFeeChart.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from "recharts"
+
+interface AverageFeeChartProps {
+  data: {
+    date: number
+    [protocol: string]: number
+  }[]
+}
+
+const toNiceDate = (timestamp: number, year?: boolean) => {
+  return (new Date(timestamp * 1000)).toLocaleString([], {
+    month: 'long',
+    day: 'numeric',
+    year: year ? 'numeric' : undefined,
+    timeZone: 'UTC',
+  });
+}
+
+function getColorFromStr(stringInput: string) {
+  const stringUniqueHash = Array.from(stringInput).reduce((acc, char) => {
+      return char.charCodeAt(0) + ((acc << 5) - acc);
+  }, 0);
+  return `hsl(${stringUniqueHash % 360}, 95%, 35%)`;
+}
+
+const AverageFeeChart: React.FC<AverageFeeChartProps> = ({ data }) => {
+  return (
+    <div className="chart">
+      <ResponsiveContainer width="100%" height={200}>
+        <BarChart
+          width={500}
+          height={300}
+          data={data}
+          barCategoryGap={1}
+          barGap={0}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey="date"
+            tickFormatter={(timestamp: number) => toNiceDate(timestamp)}
+          />
+          <YAxis scale="log" domain={['auto', 'auto']} />
+          <Tooltip
+            labelFormatter={(timestamp: number) => toNiceDate(timestamp)}
+            formatter={(val: number) => '$' + val.toFixed(2)}
+          />
+          <Legend />
+          {Object.keys(data[data.length - 1]).map(key => key !== 'date' && (
+            <Bar key={key} dataKey={key} fill={getColorFromStr(key)} />
+          ))}
+        </BarChart>
+      </ResponsiveContainer>
+
+      <style jsx>{`
+        .chart {
+          max-width: 600px;
+          width: 100%;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default AverageFeeChart;

data/sdk.ts

@@ -6,11 +6,16 @@ const sdk = new CryptoStatsSDK({
   redisConnectionString: process.env.REDIS_URL,
 });
 
+const cacheQueryByParam = (cacheQuery: string) =>
+  (_id: string, query: string, params: string[]) => query === cacheQuery ? params[0] : null
+
 sdk
   .getCollection('rollup-l1-fees')
-  .setCacheKeyResolver((_id: string, query: string, params: string[]) =>
-    query === 'oneDayFeesPaidUSD' ? params[0] : null
-  );
+  .setCacheKeyResolver(cacheQueryByParam('oneDayFeesPaidUSD'));
+
+sdk
+  .getCollection('historic-l2-fees')
+  .setCacheKeyResolver(cacheQueryByParam('oneDayAverageFeeSwap'));
 
 sdk.ethers.addProvider('arbitrum-one', 'https://arb1.arbitrum.io/rpc');
 sdk.ethers.addProvider('optimism', 'https://mainnet.optimism.io');

pages/index.tsx

@@ -5,12 +5,14 @@ import List from 'components/List';
 import SocialTags from 'components/SocialTags';
 import ToggleNavBar from 'components/ToggleNavBar';
 import ToggleBar from 'components/ToggleBar';
+import AverageFeeChart from 'components/AverageFeeChart';
 
 interface HomeProps {
   data: any[];
+  historicData: any[];
 }
 
-export const Home: NextPage<HomeProps> = ({ data }) => {
+export const Home: NextPage<HomeProps> = ({ data, historicData }) => {
   const [mode, setMode] = useState('l2s');
 
   let _data = mode === 'rollups' ? data.filter((item) => item.id !== 'metisnetwork') : data;
@@ -56,6 +58,8 @@ export const Home: NextPage<HomeProps> = ({ data }) => {
 
       <List data={_data} />
 
+      <AverageFeeChart data={historicData} />
+
       <style jsx>{`
         main {
           padding: 2rem 0 3rem;
@@ -106,18 +110,41 @@ export const Home: NextPage<HomeProps> = ({ data }) => {
 export const getStaticProps: GetStaticProps<HomeProps> = async () => {
   const collection = sdk.getCollection('l2-fees');
   const l1Adapters = sdk.getCollection('l1-fees');
-  await collection.fetchAdapters();
-  await l1Adapters.fetchAdapters();
+  const historicFeeCollection = sdk.getCollection('historic-l2-fees');
+  await Promise.all([
+    collection.fetchAdapters(),
+    l1Adapters.fetchAdapters(),
+    historicFeeCollection.fetchAdapters(),
+  ]);
 
   const ethAdapter = l1Adapters.getAdapter('ethereum');
-  collection.addAdapter(ethAdapter);
-
-  const data = await collection.executeQueriesWithMetadata(
-    ['feeTransferEth', 'feeTransferERC20', 'feeSwap'],
-    { allowMissingQuery: true }
-  );
-
-  return { props: { data }, revalidate: 5 * 60 };
+  if (!collection.getAdapter('ethereum')) {
+    collection.addAdapter(ethAdapter);
+  }
+  if (!historicFeeCollection.getAdapter('ethereum')) {
+    historicFeeCollection.addAdapter(ethAdapter);
+  }
+
+  // const dateRange = sdk.date.getDateRange('2021-09-01', sdk.date.formatDate(new Date()));
+  const dateRange = sdk.date.getDateRange('2022-06-01', sdk.date.formatDate(new Date()));
+
+  const [data, historicData] = await Promise.all([
+    collection.executeQueriesWithMetadata(
+      ['feeTransferEth', 'feeTransferERC20', 'feeSwap'],
+      { allowMissingQuery: true }
+    ),
+    Promise.all(dateRange.map(async date => {
+      const dayData = await historicFeeCollection.executeQuery('oneDayAverageFeeSwap', date);
+
+      const result: any = { date: sdk.date.dateToTimestamp(date) };
+      for (const protocol of dayData) {
+        result[protocol.id] = protocol.result;
+      }
+      return result;
+    })),
+  ]);
+
+  return { props: { data, historicData }, revalidate: 5 * 60 };
 };
 
 export default Home;