From b59c696a6cbcabcfe0eff96ecaaf918541025357 Mon Sep 17 00:00:00 2001
From: Kevin Peters <kpeters@jumptrading.com>
Date: Tue, 21 Dec 2021 14:51:04 +0000
Subject: [PATCH] bridge_ui: Notify user to update metadata when attesting

Warn user when attesting from solana and token has no on-chain metadata.
Remind user to update token-list when attesting to solana or terra.
---
 .../src/components/Attest/CreatePreview.tsx   | 21 ++++++++-
 bridge_ui/src/components/Attest/Send.tsx      | 43 +++++++++++++++++++
 bridge_ui/src/utils/consts.ts                 | 12 ++++++
 3 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/bridge_ui/src/components/Attest/CreatePreview.tsx b/bridge_ui/src/components/Attest/CreatePreview.tsx
index fdab6a194..1273d855f 100644
--- a/bridge_ui/src/components/Attest/CreatePreview.tsx
+++ b/bridge_ui/src/components/Attest/CreatePreview.tsx
@@ -1,4 +1,4 @@
-import { makeStyles, Typography } from "@material-ui/core";
+import { Link, makeStyles, Typography } from "@material-ui/core";
 import { useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -9,11 +9,16 @@ import { reset } from "../../store/attestSlice";
 import ButtonWithLoader from "../ButtonWithLoader";
 import ShowTx from "../ShowTx";
 import { useHistory } from "react-router";
+import { getHowToAddToTokenListUrl } from "../../utils/consts";
+import { Alert } from "@material-ui/lab";
 
 const useStyles = makeStyles((theme) => ({
   description: {
     textAlign: "center",
   },
+  alert: {
+    marginTop: theme.spacing(1),
+  },
 }));
 
 export default function CreatePreview() {
@@ -32,6 +37,7 @@ export default function CreatePreview() {
 
   const explainerString =
     "Success! The create wrapped transaction was submitted.";
+  const howToAddToTokenListUrl = getHowToAddToTokenListUrl(targetChain);
 
   return (
     <>
@@ -43,6 +49,19 @@ export default function CreatePreview() {
         {explainerString}
       </Typography>
       {createTx ? <ShowTx chainId={targetChain} tx={createTx} /> : null}
+      {howToAddToTokenListUrl ? (
+        <Alert severity="info" variant="outlined" className={classes.alert}>
+          Remember to add the token to the{" "}
+          <Link
+            href={howToAddToTokenListUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            token list
+          </Link>
+          {"."}
+        </Alert>
+      ) : null}
       <ButtonWithLoader onClick={handleResetClick}>
         Attest Another Token!
       </ButtonWithLoader>
diff --git a/bridge_ui/src/components/Attest/Send.tsx b/bridge_ui/src/components/Attest/Send.tsx
index 0fdae3789..7a753ed61 100644
--- a/bridge_ui/src/components/Attest/Send.tsx
+++ b/bridge_ui/src/components/Attest/Send.tsx
@@ -1,15 +1,57 @@
+import { CHAIN_ID_SOLANA } from "@certusone/wormhole-sdk";
+import { Alert } from "@material-ui/lab";
+import { Link, makeStyles } from "@material-ui/core";
+import { useMemo } from "react";
 import { useSelector } from "react-redux";
 import { useHandleAttest } from "../../hooks/useHandleAttest";
 import useIsWalletReady from "../../hooks/useIsWalletReady";
+import useMetaplexData from "../../hooks/useMetaplexData";
 import {
   selectAttestAttestTx,
   selectAttestIsSendComplete,
+  selectAttestSourceAsset,
   selectAttestSourceChain,
 } from "../../store/selectors";
 import ButtonWithLoader from "../ButtonWithLoader";
 import KeyAndBalance from "../KeyAndBalance";
 import TransactionProgress from "../TransactionProgress";
 import WaitingForWalletMessage from "./WaitingForWalletMessage";
+import { SOLANA_TOKEN_METADATA_PROGRAM_URL } from "../../utils/consts";
+
+const useStyles = makeStyles((theme) => ({
+  alert: {
+    marginTop: theme.spacing(1),
+  },
+}));
+
+const SolanaTokenMetadataWarning = () => {
+  const sourceAsset = useSelector(selectAttestSourceAsset);
+  const sourceAssetArrayed = useMemo(() => {
+    return [sourceAsset];
+  }, [sourceAsset]);
+  const metaplexData = useMetaplexData(sourceAssetArrayed);
+  const classes = useStyles();
+
+  const hasData =
+    !metaplexData.isFetching &&
+    !metaplexData.error &&
+    metaplexData.data?.get(sourceAsset);
+
+  return hasData ? (
+    <Alert severity="warning" variant="outlined" className={classes.alert}>
+      This token is missing on-chain (Metaplex) metadata. Without it, the
+      wrapped token's name and symbol will be empty. See the{" "}
+      <Link
+        href={SOLANA_TOKEN_METADATA_PROGRAM_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        metaplex repository
+      </Link>{" "}
+      for details.
+    </Alert>
+  ) : null;
+};
 
 function Send() {
   const { handleClick, disabled, showLoader } = useHandleAttest();
@@ -29,6 +71,7 @@ function Send() {
       >
         Attest
       </ButtonWithLoader>
+      {sourceChain === CHAIN_ID_SOLANA ? <SolanaTokenMetadataWarning /> : null}
       <WaitingForWalletMessage />
       <TransactionProgress
         chainId={sourceChain}
diff --git a/bridge_ui/src/utils/consts.ts b/bridge_ui/src/utils/consts.ts
index df937d113..adb7c4df4 100644
--- a/bridge_ui/src/utils/consts.ts
+++ b/bridge_ui/src/utils/consts.ts
@@ -829,3 +829,15 @@ export const getHowToAddTokensToWalletUrl = (chainId: ChainId) => {
   }
   return "";
 };
+
+export const getHowToAddToTokenListUrl = (chainId: ChainId) => {
+  if (chainId === CHAIN_ID_SOLANA) {
+    return "https://github.com/solana-labs/token-list";
+  } else if (chainId === CHAIN_ID_TERRA) {
+    return "https://github.com/terra-money/assets";
+  }
+  return "";
+};
+
+export const SOLANA_TOKEN_METADATA_PROGRAM_URL =
+  "https://github.com/metaplex-foundation/metaplex/tree/master/rust/token-metadata/program";