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 { useCallback } from "react";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import {
|
import {
|
||||||
|
@ -9,11 +9,16 @@ import { reset } from "../../store/attestSlice";
|
||||||
import ButtonWithLoader from "../ButtonWithLoader";
|
import ButtonWithLoader from "../ButtonWithLoader";
|
||||||
import ShowTx from "../ShowTx";
|
import ShowTx from "../ShowTx";
|
||||||
import { useHistory } from "react-router";
|
import { useHistory } from "react-router";
|
||||||
|
import { getHowToAddToTokenListUrl } from "../../utils/consts";
|
||||||
|
import { Alert } from "@material-ui/lab";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
description: {
|
description: {
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
|
alert: {
|
||||||
|
marginTop: theme.spacing(1),
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export default function CreatePreview() {
|
export default function CreatePreview() {
|
||||||
|
@ -32,6 +37,7 @@ export default function CreatePreview() {
|
||||||
|
|
||||||
const explainerString =
|
const explainerString =
|
||||||
"Success! The create wrapped transaction was submitted.";
|
"Success! The create wrapped transaction was submitted.";
|
||||||
|
const howToAddToTokenListUrl = getHowToAddToTokenListUrl(targetChain);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -43,6 +49,19 @@ export default function CreatePreview() {
|
||||||
{explainerString}
|
{explainerString}
|
||||||
</Typography>
|
</Typography>
|
||||||
{createTx ? <ShowTx chainId={targetChain} tx={createTx} /> : null}
|
{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}>
|
<ButtonWithLoader onClick={handleResetClick}>
|
||||||
Attest Another Token!
|
Attest Another Token!
|
||||||
</ButtonWithLoader>
|
</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 { useSelector } from "react-redux";
|
||||||
import { useHandleAttest } from "../../hooks/useHandleAttest";
|
import { useHandleAttest } from "../../hooks/useHandleAttest";
|
||||||
import useIsWalletReady from "../../hooks/useIsWalletReady";
|
import useIsWalletReady from "../../hooks/useIsWalletReady";
|
||||||
|
import useMetaplexData from "../../hooks/useMetaplexData";
|
||||||
import {
|
import {
|
||||||
selectAttestAttestTx,
|
selectAttestAttestTx,
|
||||||
selectAttestIsSendComplete,
|
selectAttestIsSendComplete,
|
||||||
|
selectAttestSourceAsset,
|
||||||
selectAttestSourceChain,
|
selectAttestSourceChain,
|
||||||
} from "../../store/selectors";
|
} from "../../store/selectors";
|
||||||
import ButtonWithLoader from "../ButtonWithLoader";
|
import ButtonWithLoader from "../ButtonWithLoader";
|
||||||
import KeyAndBalance from "../KeyAndBalance";
|
import KeyAndBalance from "../KeyAndBalance";
|
||||||
import TransactionProgress from "../TransactionProgress";
|
import TransactionProgress from "../TransactionProgress";
|
||||||
import WaitingForWalletMessage from "./WaitingForWalletMessage";
|
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() {
|
function Send() {
|
||||||
const { handleClick, disabled, showLoader } = useHandleAttest();
|
const { handleClick, disabled, showLoader } = useHandleAttest();
|
||||||
|
@ -29,6 +71,7 @@ function Send() {
|
||||||
>
|
>
|
||||||
Attest
|
Attest
|
||||||
</ButtonWithLoader>
|
</ButtonWithLoader>
|
||||||
|
{sourceChain === CHAIN_ID_SOLANA ? <SolanaTokenMetadataWarning /> : null}
|
||||||
<WaitingForWalletMessage />
|
<WaitingForWalletMessage />
|
||||||
<TransactionProgress
|
<TransactionProgress
|
||||||
chainId={sourceChain}
|
chainId={sourceChain}
|
||||||
|
|
|
@ -829,3 +829,15 @@ export const getHowToAddTokensToWalletUrl = (chainId: ChainId) => {
|
||||||
}
|
}
|
||||||
return "";
|
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