Feature: 250 Include wormscan link (#451)

XLabs · Oct 3, 2023 · 9536d3d · 9536d3d
1 parent 3c27905
commit 9536d3d
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -48,7 +48,9 @@ export default function CreatePreview() {
       >
         {explainerString}
       </Typography>
-      {createTx ? <ShowTx chainId={targetChain} tx={createTx} /> : null}
+      {createTx ? (
+        <ShowTx chainId={targetChain} tx={createTx} showWormscanLink={false} />
+      ) : null}
       {howToAddToTokenListUrl ? (
         <Alert severity="info" variant="outlined" className={classes.alert}>
           Remember to add the token to the{" "}

diff --git 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.
           </Typography>
-          <ShowTx chainId={chainId} tx={{ id: transaction, block: 1 }} />
+          <ShowTx
+            chainId={chainId}
+            tx={{ id: transaction, block: 1 }}
+            showWormscanLink={false}
+          />
         </div>
       </div>
     );

diff --git 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.
           </Typography>
-          <ShowTx tx={{ id: transaction, block: 1 }} chainId={chainId} />
+          <ShowTx
+            tx={{ id: transaction, block: 1 }}
+            chainId={chainId}
+            showWormscanLink={false}
+          />
         </>
       ) : null}
     </>

diff --git a/src/components/NFT/RedeemPreview.tsx b/src/components/NFT/RedeemPreview.tsx
@@ -33,7 +33,9 @@ export default function RedeemPreview() {
       >
         {explainerString}
       </Typography>
-      {redeemTx ? <ShowTx chainId={targetChain} tx={redeemTx} /> : null}
+      {redeemTx ? (
+        <ShowTx chainId={targetChain} tx={redeemTx} showWormscanLink={false} />
+      ) : null}
       <ButtonWithLoader onClick={handleResetClick}>
         Transfer Another NFT!
       </ButtonWithLoader>

diff --git 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 (
     <div className={classes.tx}>
-      <Typography noWrap component="div" variant="body2">
-        {tx.id}
-      </Typography>
-      {showExplorerLink && explorerAddress ? (
-        <Button
-          href={explorerAddress}
-          target="_blank"
-          rel="noopener noreferrer"
-          size="small"
-          variant="outlined"
-          className={classes.viewButton}
-        >
-          View on {explorerName}
-        </Button>
-      ) : null}
+      <div>
+        <Typography noWrap component="div" variant="body2">
+          {tx.id}
+        </Typography>
+      </div>
+      <div className={classes.txButtons}>
+        {showExplorerLink && explorerAddress ? (
+          <Button
+            href={explorerAddress}
+            target="_blank"
+            rel="noopener noreferrer"
+            size="small"
+            variant="outlined"
+            className={classes.viewButton}
+          >
+            View on {explorerName}
+          </Button>
+        ) : null}
+        {showExplorerLink && showWormscanLink && tx.id && (
+          <div className={classes.wormscanButton}>
+            <Button
+              href={getWormholescanLink(tx.id)}
+              target="_blank"
+              rel="noopener noreferrer"
+              size="small"
+              variant="outlined"
+              className={classes.viewButton}
+            >
+              View on Wormholescan
+            </Button>
+            <Chip className={classes.newTag} label="NEW!" size="small" />
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/components/Transfer/RedeemPreview.tsx b/src/components/Transfer/RedeemPreview.tsx
@@ -44,7 +44,9 @@ export default function RedeemPreview({
       >
         {explainerString}
       </Typography>
-      {redeemTx ? <ShowTx chainId={targetChain} tx={redeemTx} /> : null}
+      {redeemTx ? (
+        <ShowTx chainId={targetChain} tx={redeemTx} showWormscanLink={false} />
+      ) : null}
       <AddToMetamask />
       <FeaturedMarkets />
       <ButtonWithLoader onClick={handleResetClick}>

diff --git 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
@@ -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"
+  }`;
+};