diff --git a/package-lock.json b/package-lock.json index 23afa9ed6..6c7a01531 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@xlabs/portal-bridge-ui", - "version": "0.1.84", + "version": "0.1.85", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@xlabs/portal-bridge-ui", - "version": "0.1.84", + "version": "0.1.85", "hasInstallScript": true, "dependencies": { "@certusone/wormhole-sdk": "^0.10.4", diff --git a/package.json b/package.json index 6a887d2d2..75bcc7a23 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@xlabs/portal-bridge-ui", - "version": "0.1.84", + "version": "0.1.85", "private": true, "dependencies": { "@certusone/wormhole-sdk": "^0.10.4", diff --git a/src/components/Attest/CreatePreview.tsx b/src/components/Attest/CreatePreview.tsx index 1273d855f..499f06a6c 100644 --- a/src/components/Attest/CreatePreview.tsx +++ b/src/components/Attest/CreatePreview.tsx @@ -48,7 +48,9 @@ export default function CreatePreview() { > {explainerString} - {createTx ? : null} + {createTx ? ( + + ) : null} {howToAddToTokenListUrl ? ( Remember to add the token to the{" "} diff --git a/src/components/Migration/EvmQuickMigrate.tsx b/src/components/Migration/EvmQuickMigrate.tsx index 1dc40ae53..cef47dbf3 100644 --- a/src/components/Migration/EvmQuickMigrate.tsx +++ b/src/components/Migration/EvmQuickMigrate.tsx @@ -177,7 +177,11 @@ function EvmMigrationLineItem({ Successfully migrated your tokens. They will become available once this transaction confirms. - + ); diff --git a/src/components/Migration/EvmWorkflow.tsx b/src/components/Migration/EvmWorkflow.tsx index 6f6682d12..2172cda19 100644 --- a/src/components/Migration/EvmWorkflow.tsx +++ b/src/components/Migration/EvmWorkflow.tsx @@ -223,7 +223,11 @@ export default function EvmWorkflow({ Successfully migrated your tokens! They will be available once this transaction confirms. - + > ) : null} > diff --git a/src/components/NFT/RedeemPreview.tsx b/src/components/NFT/RedeemPreview.tsx index 08b983f04..bab515f4e 100644 --- a/src/components/NFT/RedeemPreview.tsx +++ b/src/components/NFT/RedeemPreview.tsx @@ -33,7 +33,9 @@ export default function RedeemPreview() { > {explainerString} - {redeemTx ? : null} + {redeemTx ? ( + + ) : null} Transfer Another NFT! diff --git a/src/components/ShowTx.tsx b/src/components/ShowTx.tsx index e6424a986..4d9233711 100644 --- a/src/components/ShowTx.tsx +++ b/src/components/ShowTx.tsx @@ -26,15 +26,31 @@ import { CHAIN_ID_BASE, } from "@certusone/wormhole-sdk"; import { CHAIN_ID_NEAR } from "@certusone/wormhole-sdk/lib/esm"; -import { Button, makeStyles, Typography } from "@material-ui/core"; +import { Button, makeStyles, Typography, Chip } from "@material-ui/core"; import { Transaction } from "../store/transferSlice"; -import { CLUSTER, getExplorerName } from "../utils/consts"; +import { CLUSTER, getExplorerName, getWormholescanLink } from "../utils/consts"; const useStyles = makeStyles((theme) => ({ tx: { marginTop: theme.spacing(1), textAlign: "center", }, + txButtons: { + display: "flex", + justifyContent: "center", + gap: theme.spacing(3), + marginTop: 20, + }, + wormscanButton: { + position: "relative", + }, + newTag: { + position: "absolute", + backgroundColor: theme.palette.warning.main, + color: theme.palette.background.default, + fontSize: 12, + fontWeight: 500, + }, viewButton: { marginTop: theme.spacing(1), }, @@ -43,9 +59,11 @@ const useStyles = makeStyles((theme) => ({ export default function ShowTx({ chainId, tx, + showWormscanLink = true, }: { chainId: ChainId; tx: Transaction; + showWormscanLink?: boolean; }) { const classes = useStyles(); const showExplorerLink = @@ -177,21 +195,40 @@ export default function ShowTx({ return ( - - {tx.id} - - {showExplorerLink && explorerAddress ? ( - - View on {explorerName} - - ) : null} + + + {tx.id} + + + + {showExplorerLink && explorerAddress ? ( + + View on {explorerName} + + ) : null} + {showExplorerLink && showWormscanLink && tx.id && ( + + + View on Wormholescan + + + + )} + ); } diff --git a/src/components/Transfer/RedeemPreview.tsx b/src/components/Transfer/RedeemPreview.tsx index b44009a8a..4e84185c6 100644 --- a/src/components/Transfer/RedeemPreview.tsx +++ b/src/components/Transfer/RedeemPreview.tsx @@ -44,7 +44,9 @@ export default function RedeemPreview({ > {explainerString} - {redeemTx ? : null} + {redeemTx ? ( + + ) : null} diff --git a/src/muiTheme.js b/src/muiTheme.js index 2262d22dc..021bfe803 100644 --- a/src/muiTheme.js +++ b/src/muiTheme.js @@ -16,6 +16,7 @@ export const COLORS = { darkRed: "#810612", white: "#FFFFFF", whiteWithTransparency: "rgba(255,255,255,.07)", + orange: "#F0932A", }; const suisse = { @@ -49,6 +50,9 @@ export const theme = responsiveFontSizes( error: { main: COLORS.red, }, + warning: { + main: COLORS.orange, + }, }, typography: { diff --git a/src/utils/consts.ts b/src/utils/consts.ts index 9b0d01895..9da3c2e37 100644 --- a/src/utils/consts.ts +++ b/src/utils/consts.ts @@ -2049,3 +2049,9 @@ export const getAssetAddressNative = ( } return hexToNativeAssetString(uint8ArrayToHex(address), chainId); }; + +export const getWormholescanLink = (tx: string) => { + return `https://wormholescan.io/#/tx/${tx}?network=${ + process.env.REACT_APP_CLUSTER === "mainnet" ? "MAINNET" : "TESTNET" + }`; +};