certusone
/
wormhole
mirror of https://github.com/certusone/wormhole.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

explorer: auto chart scale, chain type fix

This commit is contained in:
Evan Gray 2022-03-09 20:16:15 -05:00 committed by Justin Schuldt
parent c6f2338488
commit fc1c8d28a3
5 changed files with 23 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
explorer/src/components/ExplorerStats/ChainOverviewCard.tsx
View File

@ -112,13 +112,14 @@ const ChainOverviewCard: React.FC<ChainOverviewCardProps> = ({
</div> </div>
) : ( ) : (
<div style={centerStyles}> <div style={centerStyles}>
<div style={{ marginTop: -10 }}> <div>
<Typography variant="body1"> <Typography variant="h5">
amount sent <span style={{ fontSize: "75%", verticalAlign: 'middle' }}>Coming Soon</span>
<br />
coming soon
</Typography> </Typography>
</div> </div>
<div style={{ marginTop: -10 }}>
<Typography variant="caption">sent</Typography>
</div>
</div> </div>
)} )}
{!!totalCount && ( {!!totalCount && (

2
explorer/src/components/ExplorerStats/DailyCountBarChart.tsx
View File

@ -50,7 +50,7 @@ const DailyCountBarChart = (props: DailyCountProps) => {
return ( return (
<div style={{ height: 400, minWidth: 360, flex: "1", marginBottom: 40 }}> <div style={{ height: 400, minWidth: 360, flex: "1", marginBottom: 40 }}>
<Typography variant="subtitle1">Messages/Day</Typography> <Typography variant="subtitle1" gutterBottom>Messages/Day</Typography>
<ResponsiveBar <ResponsiveBar
theme={{ textColor: "rgba(255, 255, 255, 0.85)" }} theme={{ textColor: "rgba(255, 255, 255, 0.85)" }}
data={data} data={data}

4
explorer/src/components/ExplorerStats/DailyNotionalBarChart.tsx
View File

@ -79,7 +79,7 @@ const DailyNotionalBarChart = (props: DailyCountProps) => {
return ( return (
<div style={{ height: 400, minWidth: 360, flex: '1', marginBottom: 40 }}> <div style={{ height: 400, minWidth: 360, flex: '1', marginBottom: 40 }}>
<Typography variant="h4" style={{ marginLeft: 20 }}>value received (USD)</Typography> <Typography variant="subtitle1" gutterBottom>Value Received (USD)</Typography>
<ResponsiveBar <ResponsiveBar
theme={{ textColor: "rgba(255, 255, 255, 0.85)" }} theme={{ textColor: "rgba(255, 255, 255, 0.85)" }}
@ -96,7 +96,7 @@ const DailyNotionalBarChart = (props: DailyCountProps) => {
left: 40, left: 40,
}} }}
padding={0.3} padding={0.3}
valueScale={{ type: 'linear', max }} valueScale={{ type: 'linear' }}
indexScale={{ type: 'band', round: true }} indexScale={{ type: 'band', round: true }}
borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }} borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
axisTop={null} axisTop={null}

20
explorer/src/components/ExplorerStats/PastWeekCard.tsx
View File

@ -1,16 +1,14 @@
import React from "react";
import { Box, Card, Typography } from "@mui/material"; import { Box, Card, Typography } from "@mui/material";
import React from "react";
import { chainEnums, chainIDs } from "../../utils/consts";
import { chainColors } from "../../utils/explorer";
import DailyCountBarChart from "./DailyCountBarChart";
import DailyNotionalBarChart from "./DailyNotionalBarChart";
import { import {
NotionalTransferred, NotionalTransferred,
NotionalTransferredTo, NotionalTransferredTo,
Totals, Totals,
} from "./ExplorerStats"; } from "./ExplorerStats";
import { chainColors } from "../../utils/explorer";
import DailyNotionalBarChart from "./DailyNotionalBarChart";
import DailyCountBarChart from "./DailyCountBarChart";
import { chainEnums } from "../../utils/consts";
interface PastWeekCardProps { interface PastWeekCardProps {
title: string; title: string;
@ -87,20 +85,20 @@ const PastWeekCard: React.FC<PastWeekCardProps> = ({
width: "100%", width: "100%",
}} }}
> >
{chainEnums.slice(1).map((chain, index) => ( {Object.values(chainIDs).map((chainId) => (
<Box <Box
key={chain} key={chainId}
sx={{ display: "flex", alignItems: "center", mx: 1 }} sx={{ display: "flex", alignItems: "center", mx: 1 }}
> >
<div <div
style={{ style={{
background: chainColors[String(index + 1)], background: chainColors[String(chainId)],
height: 12, height: 12,
width: 12, width: 12,
display: "inline-block", display: "inline-block",
}} }}
/> />
<div>&nbsp;{chain}</div> <div>&nbsp;{chainEnums[chainId]}</div>
</Box> </Box>
))} ))}
</div> </div>

19
explorer/src/utils/consts.ts
View File

@ -1,4 +1,5 @@
import { import {
ChainId,
getEmitterAddressEth, getEmitterAddressEth,
getEmitterAddressSolana, getEmitterAddressSolana,
getEmitterAddressTerra, getEmitterAddressTerra,
@ -21,19 +22,9 @@ export const chainEnums = [
]; ];
export interface ChainIDs { export interface ChainIDs {
solana: 1; [index: string]: ChainId;
ethereum: 2;
terra: 3;
bsc: 4;
polygon: 5;
avalanche: 6;
oasis: 7;
algorand: 8,
aurora: 9,
fantom: 10,
karura: 11,
acala: 12,
} }
export const chainIDs: ChainIDs = { export const chainIDs: ChainIDs = {
solana: 1, solana: 1,
ethereum: 2, ethereum: 2,
@ -49,6 +40,7 @@ export const chainIDs: ChainIDs = {
// kurura: 11, // kurura: 11,
// acala: 12, // acala: 12,
}; };
export const chainIDStrings: { [chainIDString: string]: string } = { export const chainIDStrings: { [chainIDString: string]: string } = {
"1": "solana", "1": "solana",
"2": "ethereum", "2": "ethereum",
@ -125,8 +117,7 @@ const envVarMap: { [name: string]: string | undefined } = {
process.env.GATSBY_DEVNET_FANTOM_CORE_BRIDGE, process.env.GATSBY_DEVNET_FANTOM_CORE_BRIDGE,
GATSBY_DEVNET_FANTOM_TOKEN_BRIDGE: GATSBY_DEVNET_FANTOM_TOKEN_BRIDGE:
process.env.GATSBY_DEVNET_FANTOM_TOKEN_BRIDGE, process.env.GATSBY_DEVNET_FANTOM_TOKEN_BRIDGE,
GATSBY_DEVNET_FANTOM_NFT_BRIDGE: GATSBY_DEVNET_FANTOM_NFT_BRIDGE: process.env.GATSBY_DEVNET_FANTOM_NFT_BRIDGE,
process.env.GATSBY_DEVNET_FANTOM_NFT_BRIDGE,
GATSBY_TESTNET_SOLANA_CORE_BRIDGE: GATSBY_TESTNET_SOLANA_CORE_BRIDGE:
process.env.GATSBY_TESTNET_SOLANA_CORE_BRIDGE, process.env.GATSBY_TESTNET_SOLANA_CORE_BRIDGE,