parent
5396bf48c5
commit
4b9c87b2e1
|
@ -12,7 +12,7 @@ import {
|
|||
import LoadingIndicator from './LoadingIndicator';
|
||||
import Collapse from '@material-ui/core/Collapse';
|
||||
import { Typography } from '@material-ui/core';
|
||||
import Link from '@material-ui/core/Link';
|
||||
import TokenInfoDialog from './TokenInfoDialog';
|
||||
import ExpandLess from '@material-ui/icons/ExpandLess';
|
||||
import ExpandMore from '@material-ui/icons/ExpandMore';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
@ -25,14 +25,12 @@ import Toolbar from '@material-ui/core/Toolbar';
|
|||
import AddIcon from '@material-ui/icons/Add';
|
||||
import RefreshIcon from '@material-ui/icons/Refresh';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import InfoIcon from '@material-ui/icons/Info';
|
||||
import Tooltip from '@material-ui/core/Tooltip';
|
||||
import AddTokenDialog from './AddTokenDialog';
|
||||
import SendDialog from './SendDialog';
|
||||
import DepositDialog from './DepositDialog';
|
||||
import {
|
||||
refreshAccountInfo,
|
||||
useSolanaExplorerUrlSuffix,
|
||||
} from '../utils/connection';
|
||||
import { refreshAccountInfo } from '../utils/connection';
|
||||
|
||||
const balanceFormat = new Intl.NumberFormat(undefined, {
|
||||
minimumFractionDigits: 4,
|
||||
|
@ -106,17 +104,17 @@ const useStyles = makeStyles((theme) => ({
|
|||
|
||||
function BalanceListItem({ publicKey }) {
|
||||
const balanceInfo = useBalanceInfo(publicKey);
|
||||
const urlSuffix = useSolanaExplorerUrlSuffix();
|
||||
const classes = useStyles();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [sendDialogOpen, setSendDialogOpen] = useState(false);
|
||||
const [depositDialogOpen, setDepositDialogOpen] = useState(false);
|
||||
const [tokenInfoDialogOpen, setTokenInfoDialogOpen] = useState(false);
|
||||
|
||||
if (!balanceInfo) {
|
||||
return <LoadingIndicator delay={0} />;
|
||||
}
|
||||
|
||||
let { amount, decimals, mint, tokenName, tokenSymbol } = balanceInfo;
|
||||
let { amount, decimals, mint, tokenName, tokenSymbol, owner } = balanceInfo;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -125,7 +123,8 @@ function BalanceListItem({ publicKey }) {
|
|||
primary={
|
||||
<>
|
||||
{balanceFormat.format(amount / Math.pow(10, decimals))}{' '}
|
||||
{tokenSymbol ?? abbreviateAddress(mint)}
|
||||
{tokenName ?? abbreviateAddress(mint)}
|
||||
{tokenSymbol ? ` (${tokenSymbol})` : null}
|
||||
</>
|
||||
}
|
||||
secondary={publicKey.toBase58()}
|
||||
|
@ -136,6 +135,16 @@ function BalanceListItem({ publicKey }) {
|
|||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<div className={classes.itemDetails}>
|
||||
<div className={classes.buttonContainer}>
|
||||
{!publicKey.equals(owner) && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
startIcon={<InfoIcon />}
|
||||
onClick={() => setTokenInfoDialogOpen(true)}
|
||||
>
|
||||
Token Info
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
|
@ -153,32 +162,6 @@ function BalanceListItem({ publicKey }) {
|
|||
Send
|
||||
</Button>
|
||||
</div>
|
||||
<Typography variant="body2" className={classes.address}>
|
||||
Deposit Address: {publicKey.toBase58()}
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
Token Name: {tokenName ?? 'Unknown'}
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
Token Symbol: {tokenSymbol ?? 'Unknown'}
|
||||
</Typography>
|
||||
{mint ? (
|
||||
<Typography variant="body2" className={classes.address}>
|
||||
Token Address: {mint.toBase58()}
|
||||
</Typography>
|
||||
) : null}
|
||||
<Typography variant="body2">
|
||||
<Link
|
||||
href={
|
||||
`https://explorer.solana.com/account/${publicKey.toBase58()}` +
|
||||
urlSuffix
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
View on Solana Explorer
|
||||
</Link>
|
||||
</Typography>
|
||||
</div>
|
||||
</Collapse>
|
||||
<SendDialog
|
||||
|
@ -193,6 +176,12 @@ function BalanceListItem({ publicKey }) {
|
|||
balanceInfo={balanceInfo}
|
||||
publicKey={publicKey}
|
||||
/>
|
||||
<TokenInfoDialog
|
||||
open={tokenInfoDialogOpen}
|
||||
onClose={() => setTokenInfoDialogOpen(false)}
|
||||
balanceInfo={balanceInfo}
|
||||
publicKey={publicKey}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -25,6 +25,7 @@ export default function CopyableDisplay({
|
|||
label,
|
||||
autoFocus,
|
||||
buttonProps,
|
||||
helperText,
|
||||
}) {
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const textareaRef = useRef();
|
||||
|
@ -34,8 +35,8 @@ export default function CopyableDisplay({
|
|||
if (textArea) {
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
enqueueSnackbar('Address copied', {
|
||||
variant: 'success',
|
||||
enqueueSnackbar(`Copied ${label}`, {
|
||||
variant: 'info',
|
||||
autoHideDuration: 2500,
|
||||
});
|
||||
}
|
||||
|
@ -52,6 +53,7 @@ export default function CopyableDisplay({
|
|||
onFocus={(e) => e.currentTarget.select()}
|
||||
className={classes.textArea}
|
||||
fullWidth
|
||||
helperText={helperText}
|
||||
label={label}
|
||||
spellCheck={false}
|
||||
/>
|
||||
|
|
|
@ -0,0 +1,77 @@
|
|||
import { Typography } from '@material-ui/core';
|
||||
import Link from '@material-ui/core/Link';
|
||||
import React from 'react';
|
||||
import { useSolanaExplorerUrlSuffix } from '../utils/connection';
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DialogForm from './DialogForm';
|
||||
import { abbreviateAddress } from '../utils/utils';
|
||||
import CopyableDisplay from './CopyableDisplay';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
explorerLink: {
|
||||
marginBottom: theme.spacing(2),
|
||||
},
|
||||
warning: {
|
||||
marginBottom: theme.spacing(2),
|
||||
},
|
||||
container: {
|
||||
minWidth: 600,
|
||||
},
|
||||
}));
|
||||
|
||||
export default function TokenInfoDialog({
|
||||
open,
|
||||
onClose,
|
||||
publicKey,
|
||||
balanceInfo,
|
||||
}) {
|
||||
let { mint, tokenName, tokenSymbol } = balanceInfo;
|
||||
const urlSuffix = useSolanaExplorerUrlSuffix();
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<DialogForm open={open} onClose={onClose}>
|
||||
<DialogTitle>
|
||||
{tokenName ?? abbreviateAddress(mint)}
|
||||
{tokenSymbol ? ` (${tokenSymbol})` : null}
|
||||
</DialogTitle>
|
||||
<DialogContent className={classes.container}>
|
||||
<Typography className={classes.warning}>
|
||||
Information about {tokenName ?? abbreviateAddress(mint)}
|
||||
</Typography>
|
||||
<Typography variant="body2" className={classes.explorerLink}>
|
||||
<Link
|
||||
href={
|
||||
`https://explorer.solana.com/account/${publicKey.toBase58()}` +
|
||||
urlSuffix
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
View on Solana Explorer
|
||||
</Link>
|
||||
</Typography>
|
||||
{!!mint && (
|
||||
<CopyableDisplay
|
||||
value={mint.toBase58()}
|
||||
label={'Token Mint Address'}
|
||||
autoFocus
|
||||
helperText={
|
||||
<>
|
||||
This is <strong>not</strong> your deposit address
|
||||
</>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{!!tokenName && (
|
||||
<CopyableDisplay value={tokenName} label={'Token Name'} />
|
||||
)}
|
||||
{!!tokenSymbol && (
|
||||
<CopyableDisplay value={tokenSymbol} label={'Token Symbol'} />
|
||||
)}
|
||||
</DialogContent>
|
||||
</DialogForm>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue