Explorer: misc housekeeping, visual tweaks
Change-Id: I0d9ddf1feb0a07bee1278e627bcc943f30524b4a commit-id:0f14ff2e
This commit is contained in:
justinschuldt
Leopold Schabel
parent
01d7d5675b
commit
da7927168b
|
|
@ -94,19 +94,23 @@ const DailyCountLineChart = (props: DailyCountProps) => {
|
|||
) : null}
|
||||
</div>
|
||||
<ResponsiveLine
|
||||
theme={{ textColor: "rgba(255, 255, 255, 0.85)", fontSize: 16 }}
|
||||
theme={{ textColor: "rgba(255, 255, 255, 0.85)", fontSize: 12, legends: { text: { fontSize: 16 } } }}
|
||||
colors={({ color }) => color}
|
||||
data={data}
|
||||
curve={"monotoneX"}
|
||||
margin={{ top: 10, right: 40, bottom: 160, left: 60 }}
|
||||
margin={{ top: 20, right: 40, bottom: 160, left: 60 }}
|
||||
xScale={{ type: 'point' }}
|
||||
yScale={{ type: 'linear', min: 0, max: 'auto', stacked: false, reverse: false }}
|
||||
yScale={{
|
||||
type: 'symlog',
|
||||
constant: 400,
|
||||
max: 'auto',
|
||||
min: 0,
|
||||
}}
|
||||
enableGridX={false}
|
||||
axisTop={null}
|
||||
axisRight={null}
|
||||
axisBottom={null}
|
||||
axisLeft={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ const RecentMessages = (props: RecentMessagesProps) => {
|
|||
emitterAddress={item.EmitterAddress}
|
||||
showType={true}
|
||||
showSummary={true}
|
||||
transferDetails={item.TransferDetails}
|
||||
/> : null
|
||||
},
|
||||
{
|
||||
|
|
@ -78,8 +79,7 @@ const RecentMessages = (props: RecentMessagesProps) => {
|
|||
title: "attested",
|
||||
dataIndex: "QuorumTime",
|
||||
key: "time",
|
||||
render: QuorumTime => <ReactTimeAgo date={Date.parse(formatQuorumDate(QuorumTime))} locale={intl.locale} timeStyle={!screens.md ? "twitter" : "round"} />
|
||||
|
||||
render: QuorumTime => <ReactTimeAgo date={QuorumTime ? Date.parse(formatQuorumDate(QuorumTime)) : new Date()} locale={intl.locale} timeStyle={!screens.md ? "twitter" : "round"} />
|
||||
},
|
||||
{
|
||||
title: "",
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ const Summary = (props: SummaryProps) => {
|
|||
emitterChainName={props.message.EmitterChain}
|
||||
emitterAddress={props.message.EmitterAddress}
|
||||
showPayload={true}
|
||||
transferDetails={props.message.TransferDetails}
|
||||
/>
|
||||
<div className="styled-scrollbar">
|
||||
<Title level={3} style={titleStyles}>Signed VAA</Title>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { externalLinks, linkToService, socialLinks, socialAnchorArray } from '~/
|
|||
// brand assets
|
||||
import { ReactComponent as AvatarAndName } from '~/icons/FullLogo_DarkBackground.svg';
|
||||
import { ReactComponent as Avatar } from '~/icons/Avatar_DarkBackground.svg';
|
||||
import { BRIDGE_URL, DOCS_URL, JOBS_URL } from '~/utils/misc/constants';
|
||||
|
||||
|
||||
const Toggle = styled.div`
|
||||
|
|
@ -94,7 +95,7 @@ const DefaultLayout: React.FC<{}> = ({
|
|||
|
||||
const launchBridge = <div key="bridge" style={{ ...menuItemProps.style, zIndex: 1001 }}>
|
||||
<OutboundLink
|
||||
href={"https://wormholebridge.com"}
|
||||
href={BRIDGE_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="no-external-icon"
|
||||
|
|
@ -135,7 +136,7 @@ const DefaultLayout: React.FC<{}> = ({
|
|||
</div>,
|
||||
<div key="docs" {...menuItemProps} >
|
||||
<OutboundLink
|
||||
href={"https://docs.wormholenetwork.com"}
|
||||
href={DOCS_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
|
|
@ -144,7 +145,7 @@ const DefaultLayout: React.FC<{}> = ({
|
|||
</div>,
|
||||
<div key="jobs" {...menuItemProps} >
|
||||
<OutboundLink
|
||||
href={"https://boards.greenhouse.io/wormhole"}
|
||||
href={JOBS_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -38,10 +38,6 @@ const WithNetwork = (WrappedComponent: React.FC<any>) => {
|
|||
endpoints: endpoints[network],
|
||||
chains: {
|
||||
// chains are generated async and added to state
|
||||
"solana": {} as KnownContracts,
|
||||
"ethereum": {} as KnownContracts,
|
||||
"terra": {} as KnownContracts,
|
||||
"bsc": {} as KnownContracts
|
||||
}
|
||||
},
|
||||
setActiveNetwork: this.setActiveNetwork,
|
||||
|
|
|
|||
|
|
@ -21,11 +21,7 @@ const NetworkContext = createContext<NetworkContextI>({
|
|||
name: defaultNetwork,
|
||||
endpoints: endpoints[defaultNetwork],
|
||||
chains: {
|
||||
// initalize empty objects, will be replaced async by generated data
|
||||
"solana": {} as KnownContracts,
|
||||
"ethereum": {} as KnownContracts,
|
||||
"terra": {} as KnownContracts,
|
||||
"bsc": {} as KnownContracts
|
||||
// initalize empty object, will be replaced async by generated data
|
||||
}
|
||||
},
|
||||
setActiveNetwork: (network: string) => { },
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { chainEnums, ChainIDs, chainIDs, METADATA_REPLACE } from "~/utils/misc/c
|
|||
import { Statistic, Typography } from 'antd'
|
||||
import { FormattedMessage } from "gatsby-plugin-intl";
|
||||
import { titleStyles } from "~/styles";
|
||||
import { TransferDetails } from "../ExplorerQuery/ExplorerQuery";
|
||||
|
||||
const { Title } = Typography
|
||||
|
||||
|
|
@ -183,6 +184,7 @@ interface DecodePayloadProps {
|
|||
showType?: boolean
|
||||
showSummary?: boolean
|
||||
showPayload?: boolean
|
||||
transferDetails?: TransferDetails
|
||||
}
|
||||
|
||||
const DecodePayload = (props: DecodePayloadProps) => {
|
||||
|
|
@ -262,9 +264,12 @@ const DecodePayload = (props: DecodePayloadProps) => {
|
|||
payloadBundle.type === "assetMeta" ? (<>
|
||||
{"AssetMeta:"} {chainEnums[payloadBundle.payload.tokenChain]} {payloadBundle.payload.symbol} {payloadBundle.payload.name}
|
||||
</>) :
|
||||
payloadBundle.type === "tokenTransfer" ? (<>
|
||||
{"native "}{chainEnums[payloadBundle.payload.originChain]}{' asset -> '}{chainEnums[payloadBundle.payload.targetChain]}
|
||||
</>) :
|
||||
payloadBundle.type === "tokenTransfer" ?
|
||||
props.transferDetails && props.transferDetails.OriginSymbol ? (<>
|
||||
{Math.round(Number(props.transferDetails.Amount) * 100) / 100}{' '}{props.transferDetails.OriginSymbol}{' -> '}{chainEnums[payloadBundle.payload.targetChain]}
|
||||
</>) : (<>
|
||||
{"Native "}{chainEnums[payloadBundle.payload.originChain]}{' asset -> '}{chainEnums[payloadBundle.payload.targetChain]}
|
||||
</>) :
|
||||
payloadBundle.type === "nftTransfer" ? (<>
|
||||
{payloadBundle.payload.symbol || "?"} {"-"} {chainEnums[payloadBundle.payload.originChain]}{' -> '}{chainEnums[payloadBundle.payload.targetChain]}
|
||||
</>) : null
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
},
|
||||
"networks": {
|
||||
"network": "network",
|
||||
"devnet": "devent",
|
||||
"devnet": "devnet",
|
||||
"testnet": "testnet",
|
||||
"mainnet": "mainnet"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ const Explorer: React.FC<ExplorerProps> = ({ location, navigate }) => {
|
|||
const [sequence, setSequence] = useState<ExplorerQueryValues["sequence"]>()
|
||||
const [txId, setTxId] = useState<ExplorerQueryValues["txId"]>()
|
||||
const [showQueryForm, setShowQueryForm] = useState<boolean>(false)
|
||||
const [doneReadingQueryParams, setDoneReadingQueryParams] = useState<boolean>(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (location.search) {
|
||||
|
|
@ -73,6 +74,8 @@ const Explorer: React.FC<ExplorerProps> = ({ location, navigate }) => {
|
|||
setTxId(undefined)
|
||||
setShowQueryForm(false)
|
||||
}
|
||||
// be explicit about when it is ok to render
|
||||
setDoneReadingQueryParams(true)
|
||||
}, [location.search])
|
||||
|
||||
return (
|
||||
|
|
@ -161,7 +164,7 @@ const Explorer: React.FC<ExplorerProps> = ({ location, navigate }) => {
|
|||
>clear</Button>
|
||||
</Link> : null}
|
||||
</div>
|
||||
<ExplorerStats emitterChain={emitterChain} emitterAddress={emitterAddress} />
|
||||
{doneReadingQueryParams && <ExplorerStats emitterChain={emitterChain} emitterAddress={emitterAddress} />}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const OpenForBizSection = ({ intl, smScreen, howAnchor }: { intl: IntlShape, smS
|
|||
height: '100%',
|
||||
maxWidth: 650,
|
||||
display: 'flex', flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
justifyContent: 'center', zIndex: 2,
|
||||
marginRight: 'auto'
|
||||
}}>
|
||||
<Title level={1} style={{ ...titleStyles, fontSize: 64 }}>
|
||||
|
|
@ -92,6 +92,7 @@ const AboutUsSection = ({ intl, smScreen, howAnchor }: { intl: IntlShape, smScre
|
|||
justifyContent: smScreen ? 'flex-start' : 'center',
|
||||
alignItems: 'flex-start',
|
||||
marginBlock: smScreen ? 0 : 200,
|
||||
zIndex: 2,
|
||||
}}>
|
||||
<div style={{ borderBottom: "0.5px solid #808088", width: 160, marginBottom: 60 }}>
|
||||
<Paragraph style={headingStyles} id={howAnchor}>
|
||||
|
|
@ -111,7 +112,7 @@ const AboutUsSection = ({ intl, smScreen, howAnchor }: { intl: IntlShape, smScre
|
|||
{/* background image, ternary for seperate mobile layout */}
|
||||
{smScreen ? (
|
||||
<div style={{ position: 'relative', marginTop: 60, height: 260, }}>
|
||||
<div style={{ position: 'absolute', right: 40, height: '100%', display: 'flex', alignItems: 'center', }}>
|
||||
<div style={{ position: 'absolute', right: 40, height: '100%', display: 'flex', alignItems: 'center', zIndex: 2, }}>
|
||||
<LayeredCircles style={{ height: 260 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -152,6 +153,7 @@ const NetworkSection = ({ intl, smScreen }: { intl: IntlShape, smScreen: boolean
|
|||
display: 'flex', flexDirection: 'column',
|
||||
justifyContent: smScreen ? 'flex-start' : 'center',
|
||||
paddingBlockStart: smScreen ? 100 : 0,
|
||||
zIndex: 2,
|
||||
}}>
|
||||
<div style={{ borderBottom: "0.5px solid #808088", width: 160, marginBottom: 90 }}>
|
||||
<Paragraph style={headingStyles} type="secondary">
|
||||
|
|
|
|||
|
|
@ -180,3 +180,12 @@ export const endpoints: { [network: string]: NetworkConfig } = {
|
|||
guardianRpcBase: String(process.env.GATSBY_GUARDIAN_MAINNET_RPC_URL)
|
||||
}
|
||||
}
|
||||
|
||||
export const BRIDGE_URL = "https://wormholebridge.com"
|
||||
export const DOCS_URL = "https://docs.wormholenetwork.com"
|
||||
export const DISCORD_URL = "https://discord.gg/xsT8qrHAvV"
|
||||
export const GITHUB_URL = "https://github.com/certusone/wormhole"
|
||||
export const JOBS_URL = "https://boards.greenhouse.io/wormhole"
|
||||
export const MEDIUM_URL = "http://wormholecrypto.medium.com"
|
||||
export const TELEGRAM_URL = "https://t.me/wormholecrypto"
|
||||
export const TWITTER_URL = "https://twitter.com/wormholecrypto"
|
||||
|
|
|
|||
|
|
@ -8,16 +8,17 @@ import { ReactComponent as GithubIcon } from '~/icons/Github.svg';
|
|||
import { ReactComponent as MediumIcon } from '~/icons/Medium.svg';
|
||||
import { ReactComponent as TelegramIcon } from '~/icons/Telegram.svg';
|
||||
import { ReactComponent as TwitterIcon } from '~/icons/Twitter.svg';
|
||||
import { DISCORD_URL, DOCS_URL, GITHUB_URL, MEDIUM_URL, TELEGRAM_URL, TWITTER_URL } from './constants';
|
||||
|
||||
interface KeyToElement { [service: string]: React.SFC<React.SVGProps<SVGSVGElement>> }
|
||||
|
||||
const socialLinks: { [service: string]: string } = {
|
||||
'docs': "https://docs.wormholenetwork.com",
|
||||
'discord': "https://discord.gg/xsT8qrHAvV",
|
||||
'github': "https://github.com/certusone/wormhole",
|
||||
'medium': "http://wormholecrypto.medium.com",
|
||||
'telegram': "https://t.me/wormholecrypto",
|
||||
'twitter': "https://twitter.com/wormholecrypto",
|
||||
'docs': DOCS_URL,
|
||||
'discord': DISCORD_URL,
|
||||
'github': GITHUB_URL,
|
||||
'medium': MEDIUM_URL,
|
||||
'telegram': TELEGRAM_URL,
|
||||
'twitter': TWITTER_URL,
|
||||
}
|
||||
const socialIcons: KeyToElement = {
|
||||
'docs': DocsIcon,
|
||||
|
|
|
|||
Loading…
Reference in New Issue