Skip to content

Commit

Permalink
Average fee chart
Browse files Browse the repository at this point in the history
  • Loading branch information
dmihal committed Jul 17, 2022
1 parent 30f0d1a commit a7c2169
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 14 deletions.
80 changes: 80 additions & 0 deletions components/AverageFeeChart.tsx
Original file line number Diff line number Diff line change
@@ -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;
11 changes: 8 additions & 3 deletions data/sdk.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
49 changes: 38 additions & 11 deletions pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -56,6 +58,8 @@ export const Home: NextPage<HomeProps> = ({ data }) => {

<List data={_data} />

<AverageFeeChart data={historicData} />

<style jsx>{`
main {
padding: 2rem 0 3rem;
Expand Down Expand Up @@ -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;

0 comments on commit a7c2169

Please sign in to comment.