Explorer: message summary links to top of page
Change-Id: Ib26e6bfd456af2468ceda5905297fdcde15481fe commit-id:991e92d8
This commit is contained in:
justinschuldt
Leopold Schabel
parent
2b4a76d2ea
commit
ccb7f04ac2
|
|
@ -24,6 +24,23 @@ export interface VAA {
|
|||
EmitterAddress: string,
|
||||
Payload: string // base64 encoded byte array
|
||||
}
|
||||
export interface TokenTransferPayload {
|
||||
Amount: string
|
||||
OriginAddress: string
|
||||
OriginChain: string,
|
||||
TargetAddress: string,
|
||||
TargetChain: string,
|
||||
}
|
||||
export interface TransferDetails {
|
||||
Amount: string, // "1530.000000",
|
||||
Decimals: string, // "6",
|
||||
NotionalUSDStr: string, // "1538.495460",
|
||||
TokenPriceUSDStr: string, // "1.005553",
|
||||
TransferTimestamp: string, // "2021-11-21 16:55:15 +0000 UTC",
|
||||
OriginSymbol: string,
|
||||
OriginName: string,
|
||||
OriginTokenAddress: string,
|
||||
}
|
||||
export interface BigTableMessage {
|
||||
InitiatingTxID?: string
|
||||
SignedVAABytes?: string // base64 encoded byte array
|
||||
|
|
@ -32,6 +49,8 @@ export interface BigTableMessage {
|
|||
EmitterChain: keyof ChainIDs
|
||||
EmitterAddress: string
|
||||
Sequence: string
|
||||
TokenTransferPayload?: TokenTransferPayload
|
||||
TransferDetails?: TransferDetails
|
||||
}
|
||||
|
||||
interface ExplorerQuery {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { useContext } from 'react'
|
||||
import { Bech32, fromHex } from "@cosmjs/encoding"
|
||||
import { PublicKey } from '@solana/web3.js';
|
||||
import { chainEnums, ChainID, chainIDs } from '~/utils/misc/constants';
|
||||
import { ActiveNetwork, NetworkContext } from "~/components/NetworkSelect";
|
||||
|
||||
|
|
@ -44,13 +45,17 @@ const getNativeAddress = (chainId: number, emitterAddress: string, activeNetwork
|
|||
}
|
||||
const chainName = chainEnums[chainId].toLowerCase()
|
||||
|
||||
// not sure how to do this programattically, so use the "chains" map
|
||||
// use the "chains" map of hex: nativeAdress first
|
||||
if (emitterAddress in activeNetwork.chains[chainName]) {
|
||||
let desc = activeNetwork.chains[chainName][emitterAddress]
|
||||
if (desc in activeNetwork.chains[chainName]) {
|
||||
// lookup the contract address
|
||||
nativeAddress = activeNetwork.chains[chainName][desc]
|
||||
}
|
||||
} else {
|
||||
let hex = fromHex(emitterAddress)
|
||||
let pubKey = new PublicKey(hex)
|
||||
nativeAddress = pubKey.toString()
|
||||
}
|
||||
}
|
||||
return nativeAddress
|
||||
|
|
@ -136,4 +141,4 @@ const chainColors: { [chain: string]: string } = {
|
|||
"5": "hsl(271, 100%, 61%)",
|
||||
}
|
||||
|
||||
export { makeDate, makeGroupName, chainColors, truncateAddress, contractNameFormatter, nativeExplorerContractUri, nativeExplorerTxUri }
|
||||
export { makeDate, makeGroupName, chainColors, truncateAddress, contractNameFormatter, nativeExplorerContractUri, nativeExplorerTxUri, getNativeAddress }
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ import ReactTimeAgo from 'react-time-ago'
|
|||
import { titleStyles } from '~/styles';
|
||||
import { CloseOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
import { Link } from 'gatsby';
|
||||
import { contractNameFormatter, nativeExplorerContractUri, nativeExplorerTxUri } from '../ExplorerStats/utils';
|
||||
import { contractNameFormatter, getNativeAddress, nativeExplorerContractUri, nativeExplorerTxUri, truncateAddress } from '../ExplorerStats/utils';
|
||||
import { OutboundLink } from 'gatsby-plugin-google-gtag';
|
||||
import { chainIDs } from '~/utils/misc/constants';
|
||||
import { ChainID, chainIDs } from '~/utils/misc/constants';
|
||||
import { hexToNativeString } from '@certusone/wormhole-sdk';
|
||||
|
||||
interface SummaryProps {
|
||||
|
|
@ -23,13 +23,14 @@ interface SummaryProps {
|
|||
lastFetched?: number
|
||||
refetch: () => void
|
||||
}
|
||||
const textStyles = { fontSize: 16, margin: '6px 0' }
|
||||
|
||||
const Summary = (props: SummaryProps) => {
|
||||
|
||||
const intl = useIntl()
|
||||
const { SignedVAA, ...message } = props.message
|
||||
|
||||
const { EmitterChain, EmitterAddress, InitiatingTxID } = message
|
||||
const { EmitterChain, EmitterAddress, InitiatingTxID, TokenTransferPayload, TransferDetails } = message
|
||||
// get chainId from chain name
|
||||
let chainId = chainIDs[EmitterChain]
|
||||
|
||||
|
|
@ -66,6 +67,59 @@ const Summary = (props: SummaryProps) => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', margin: "20px 0 24px 20px" }}>
|
||||
{EmitterChain && EmitterAddress && nativeExplorerContractUri(chainId, EmitterAddress) ?
|
||||
<div>
|
||||
<span style={textStyles}>This message was sent to the {ChainID[chainId]} </span>
|
||||
<OutboundLink
|
||||
href={nativeExplorerContractUri(chainId, EmitterAddress)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ ...textStyles, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
{contractNameFormatter(EmitterAddress, chainId)}
|
||||
</OutboundLink>
|
||||
<span style={textStyles}> contract</span>
|
||||
{transactionId &&
|
||||
<>
|
||||
<span style={textStyles}>, transaction </span>
|
||||
<OutboundLink
|
||||
href={nativeExplorerTxUri(chainId, transactionId)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ ...textStyles, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
{truncateAddress(transactionId)}
|
||||
</OutboundLink>
|
||||
|
||||
</>} <span style={textStyles}>.</span>
|
||||
</div> : null}
|
||||
{TokenTransferPayload &&
|
||||
TokenTransferPayload.TargetAddress &&
|
||||
TransferDetails &&
|
||||
nativeExplorerContractUri(Number(TokenTransferPayload.TargetChain), TokenTransferPayload.TargetAddress) ?
|
||||
<div>
|
||||
<span style={textStyles}>This message is a token transfer, moving {Math.round(Number(TransferDetails.Amount) * 100) / 100}{` `}
|
||||
{!["UST", "LUNA"].includes(TransferDetails.OriginSymbol) ? <OutboundLink
|
||||
href={nativeExplorerContractUri(Number(TokenTransferPayload.OriginChain), TokenTransferPayload.OriginAddress)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ ...textStyles, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
{TransferDetails.OriginSymbol}
|
||||
</OutboundLink> : TransferDetails.OriginSymbol}
|
||||
{` `}from {ChainID[chainId]}, to {ChainID[Number(TokenTransferPayload.TargetChain)]}, to address </span>
|
||||
<OutboundLink
|
||||
href={nativeExplorerContractUri(Number(TokenTransferPayload.TargetChain), TokenTransferPayload.TargetAddress)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ ...textStyles, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
{truncateAddress(getNativeAddress(Number(TokenTransferPayload.TargetChain), TokenTransferPayload.TargetAddress))}
|
||||
</OutboundLink>
|
||||
</div> : null}
|
||||
</div>
|
||||
<Title level={3} style={titleStyles}>Raw message data:</Title>
|
||||
<div className="styled-scrollbar">
|
||||
<pre
|
||||
style={{ fontSize: 14, marginBottom: 20 }}
|
||||
|
|
@ -92,26 +146,6 @@ const Summary = (props: SummaryProps) => {
|
|||
|
||||
) : null}
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', }}>
|
||||
{EmitterChain && EmitterAddress && nativeExplorerContractUri(chainId, EmitterAddress) ?
|
||||
<OutboundLink
|
||||
href={nativeExplorerContractUri(chainId, EmitterAddress)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ fontSize: 16, marginBottom: '6px 0' }}
|
||||
>
|
||||
{'View "'}{contractNameFormatter(EmitterAddress, chainId)}{'" contract on native explorer'}
|
||||
</OutboundLink> : <div />}
|
||||
{transactionId && EmitterChain ?
|
||||
<OutboundLink
|
||||
href={nativeExplorerTxUri(chainId, transactionId)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ fontSize: 16, margin: '6px 0' }}
|
||||
>
|
||||
{'View transaction "'}{transactionId}{'" on native explorer'}
|
||||
</OutboundLink> : <div />}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue