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.
This commit is contained in:
parent
9ad792c6ee
commit
b59c696a6c
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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";
|
||||
|
|
Loading…
Reference in New Issue