2021-05-14 14:29:49 -07:00
|
|
|
import {
|
|
|
|
makeStyles,
|
|
|
|
Typography,
|
|
|
|
Link,
|
|
|
|
Popover,
|
|
|
|
IconButton,
|
|
|
|
} from "@material-ui/core";
|
2021-05-14 11:30:21 -07:00
|
|
|
import { Info } from "@material-ui/icons";
|
|
|
|
import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
|
2021-05-14 14:29:49 -07:00
|
|
|
import { PublicKey } from "@solana/web3.js";
|
2021-05-17 11:33:35 -07:00
|
|
|
import { useTokenMap } from "../context/TokenList";
|
|
|
|
import { useSwapContext, useSwapFair } from "../context/Swap";
|
2021-05-17 17:21:25 -07:00
|
|
|
import { useMint } from "../context/Token";
|
2021-05-19 18:59:29 -07:00
|
|
|
import { useRoute, useMarketName, useBbo } from "../context/Dex";
|
2021-05-14 11:30:21 -07:00
|
|
|
|
2021-05-26 09:47:53 -07:00
|
|
|
const useStyles = makeStyles(() => ({
|
2021-05-14 11:30:21 -07:00
|
|
|
infoLabel: {
|
2021-05-26 09:47:53 -07:00
|
|
|
marginTop: "20px",
|
|
|
|
marginBottom: "20px",
|
2021-05-14 11:30:21 -07:00
|
|
|
display: "flex",
|
2021-05-26 09:47:53 -07:00
|
|
|
justifyContent: "flex-end",
|
|
|
|
alignItems: "center",
|
2021-05-14 11:30:21 -07:00
|
|
|
},
|
2021-05-14 14:29:49 -07:00
|
|
|
infoButton: {
|
2021-05-26 09:47:53 -07:00
|
|
|
marginLeft: "5px",
|
2021-05-14 14:29:49 -07:00
|
|
|
padding: 0,
|
2021-05-26 09:47:53 -07:00
|
|
|
fontSize: "14px",
|
2021-05-14 14:29:49 -07:00
|
|
|
},
|
2021-05-14 11:30:21 -07:00
|
|
|
}));
|
|
|
|
|
|
|
|
export function InfoLabel() {
|
|
|
|
const styles = useStyles();
|
|
|
|
|
|
|
|
const { fromMint, toMint } = useSwapContext();
|
|
|
|
const fromMintInfo = useMint(fromMint);
|
2021-05-15 00:27:13 -07:00
|
|
|
const fair = useSwapFair();
|
2021-05-14 11:30:21 -07:00
|
|
|
|
2021-05-15 16:16:28 -07:00
|
|
|
const tokenMap = useTokenMap();
|
|
|
|
let fromTokenInfo = tokenMap.get(fromMint.toString());
|
|
|
|
let toTokenInfo = tokenMap.get(toMint.toString());
|
2021-05-14 11:30:21 -07:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={styles.infoLabel}>
|
2021-05-26 09:47:53 -07:00
|
|
|
<Typography color="textSecondary" style={{ fontSize: "14px" }}>
|
|
|
|
{fair !== undefined && toTokenInfo && fromTokenInfo
|
|
|
|
? `1 ${toTokenInfo.symbol} = ${fair.toFixed(
|
|
|
|
fromMintInfo?.decimals
|
|
|
|
)} ${fromTokenInfo.symbol}`
|
|
|
|
: `-`}
|
|
|
|
</Typography>
|
|
|
|
<InfoButton />
|
2021-05-14 11:30:21 -07:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-05-14 14:29:49 -07:00
|
|
|
function InfoButton() {
|
|
|
|
const styles = useStyles();
|
2021-05-14 11:30:21 -07:00
|
|
|
return (
|
|
|
|
<PopupState variant="popover">
|
|
|
|
{
|
|
|
|
//@ts-ignore
|
|
|
|
(popupState) => (
|
|
|
|
<div style={{ display: "flex" }}>
|
2021-05-14 14:29:49 -07:00
|
|
|
<IconButton
|
|
|
|
{...bindTrigger(popupState)}
|
|
|
|
className={styles.infoButton}
|
|
|
|
>
|
2021-05-26 09:47:53 -07:00
|
|
|
<Info fontSize="small" />
|
2021-05-14 14:29:49 -07:00
|
|
|
</IconButton>
|
2021-05-14 11:30:21 -07:00
|
|
|
<Popover
|
|
|
|
{...bindPopover(popupState)}
|
|
|
|
anchorOrigin={{
|
|
|
|
vertical: "bottom",
|
|
|
|
horizontal: "left",
|
|
|
|
}}
|
|
|
|
transformOrigin={{
|
|
|
|
vertical: "top",
|
|
|
|
horizontal: "right",
|
|
|
|
}}
|
|
|
|
PaperProps={{ style: { borderRadius: "10px" } }}
|
|
|
|
disableRestoreFocus
|
|
|
|
>
|
2021-05-14 14:29:49 -07:00
|
|
|
<InfoDetails />
|
2021-05-14 11:30:21 -07:00
|
|
|
</Popover>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
</PopupState>
|
|
|
|
);
|
|
|
|
}
|
2021-05-14 14:29:49 -07:00
|
|
|
|
|
|
|
function InfoDetails() {
|
|
|
|
const { fromMint, toMint } = useSwapContext();
|
2021-05-16 01:02:33 -07:00
|
|
|
const route = useRoute(fromMint, toMint);
|
2021-05-15 16:16:28 -07:00
|
|
|
const tokenMap = useTokenMap();
|
|
|
|
const fromMintTicker = tokenMap.get(fromMint.toString())?.symbol;
|
|
|
|
const toMintTicker = tokenMap.get(toMint.toString())?.symbol;
|
2021-05-14 14:29:49 -07:00
|
|
|
const addresses = [
|
|
|
|
{ ticker: fromMintTicker, mint: fromMint },
|
|
|
|
{ ticker: toMintTicker, mint: toMint },
|
|
|
|
];
|
2021-05-16 01:02:33 -07:00
|
|
|
|
2021-05-14 14:29:49 -07:00
|
|
|
return (
|
|
|
|
<div style={{ padding: "15px", width: "250px" }}>
|
|
|
|
<div>
|
|
|
|
<Typography
|
|
|
|
color="textSecondary"
|
|
|
|
style={{ fontWeight: "bold", marginBottom: "5px" }}
|
|
|
|
>
|
|
|
|
Trade Route
|
|
|
|
</Typography>
|
2021-05-15 19:54:25 -07:00
|
|
|
{route ? (
|
|
|
|
route.map((market: PublicKey) => {
|
|
|
|
return <MarketRoute key={market.toString()} market={market} />;
|
|
|
|
})
|
|
|
|
) : (
|
|
|
|
<Typography color="textSecondary">Route not found</Typography>
|
|
|
|
)}
|
2021-05-14 14:29:49 -07:00
|
|
|
</div>
|
|
|
|
<div style={{ marginTop: "15px" }}>
|
|
|
|
<Typography
|
|
|
|
color="textSecondary"
|
|
|
|
style={{ fontWeight: "bold", marginBottom: "5px" }}
|
|
|
|
>
|
|
|
|
Tokens
|
|
|
|
</Typography>
|
|
|
|
{addresses.map((address) => {
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
key={address.mint.toString()}
|
|
|
|
style={{
|
|
|
|
marginTop: "5px",
|
|
|
|
display: "flex",
|
|
|
|
justifyContent: "space-between",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Link
|
|
|
|
href={`https://explorer.solana.com/address/${address.mint.toString()}`}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener"
|
|
|
|
>
|
|
|
|
{address.ticker}
|
|
|
|
</Link>
|
|
|
|
<code style={{ width: "128px", overflow: "hidden" }}>
|
|
|
|
{address.mint.toString()}
|
|
|
|
</code>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function MarketRoute({ market }: { market: PublicKey }) {
|
|
|
|
const marketName = useMarketName(market);
|
2021-05-19 18:59:29 -07:00
|
|
|
const bbo = useBbo(market);
|
2021-05-14 14:29:49 -07:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: "flex",
|
|
|
|
justifyContent: "space-between",
|
|
|
|
marginTop: "5px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Link
|
|
|
|
href={`https://dex.projectserum.com/#/market/${market.toString()}`}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener"
|
|
|
|
>
|
|
|
|
{marketName}
|
|
|
|
</Link>
|
2021-05-19 18:59:29 -07:00
|
|
|
<code style={{ marginLeft: "10px" }}>
|
|
|
|
{bbo && bbo.mid ? bbo.mid.toFixed(6) : "-"}
|
|
|
|
</code>
|
2021-05-14 14:29:49 -07:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|