Explorer: misc housekeeping, visual tweaks

Change-Id: I0d9ddf1feb0a07bee1278e627bcc943f30524b4a

commit-id:0f14ff2e

explorer/src/components/ExplorerStats/DailyCountLineChart.tsx

@@ -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,
                 }}

explorer/src/components/ExplorerStats/RecentMessages.tsx

@@ -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: "",

explorer/src/components/ExplorerSummary/ExplorerSummary.tsx

@@ -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>

explorer/src/components/Layout/DefaultLayout.tsx

@@ -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"
       >

explorer/src/components/NetworkSelect/WithNetwork.tsx

@@ -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,

explorer/src/components/NetworkSelect/network-context.ts

@@ -21,11 +21,7 @@ const NetworkContext = createContext<NetworkContextI>({
         name: defaultNetwork,
         endpoints: endpoints[defaultNetwork],
         chains: {
-            // initalize empty objects, will be replaced async by generated data
+            // initalize empty object, will be replaced async by generated data
-            "solana": {} as KnownContracts,
-            "ethereum": {} as KnownContracts,
-            "terra": {} as KnownContracts,
-            "bsc": {} as KnownContracts
         }
     },
     setActiveNetwork: (network: string) => { },

explorer/src/components/Payload/DecodePayload.tsx

@@ -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:"}&nbsp;{chainEnums[payloadBundle.payload.tokenChain]}&nbsp; {payloadBundle.payload.symbol} {payloadBundle.payload.name}
                         </>) :
-                            payloadBundle.type === "tokenTransfer" ? (<>
+                            payloadBundle.type === "tokenTransfer" ?
-                                {"native "}{chainEnums[payloadBundle.payload.originChain]}{' asset -> '}{chainEnums[payloadBundle.payload.targetChain]}
+                                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 || "?"}&nbsp;{"-"}&nbsp;{chainEnums[payloadBundle.payload.originChain]}{' -> '}{chainEnums[payloadBundle.payload.targetChain]}
                                 </>) : null

explorer/src/locales/en.json

@@ -144,7 +144,7 @@
   },
   "networks": {
     "network": "network",
-    "devnet": "devent",
+    "devnet": "devnet",
     "testnet": "testnet",
     "mainnet": "mainnet"
   }

explorer/src/pages/explorer.tsx

@@ -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>

explorer/src/pages/index.tsx

@@ -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">

explorer/src/utils/misc/constants.ts

@@ -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"

explorer/src/utils/misc/socials.tsx

@@ -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",
+    'docs': DOCS_URL,
-    'discord': "https://discord.gg/xsT8qrHAvV",
+    'discord': DISCORD_URL,
-    'github': "https://github.com/certusone/wormhole",
+    'github': GITHUB_URL,
-    'medium': "http://wormholecrypto.medium.com",
+    'medium': MEDIUM_URL,
-    'telegram': "https://t.me/wormholecrypto",
+    'telegram': TELEGRAM_URL,
-    'twitter': "https://twitter.com/wormholecrypto",
+    'twitter': TWITTER_URL,
 }
 const socialIcons: KeyToElement = {
     'docs': DocsIcon,