import React, { useState, useContext } from "react";
import { BN } from "@project-serum/anchor";
import { PublicKey } from "@solana/web3.js";
import { TokenListContainer } from "@solana/spl-token-registry";
import { Provider } from "@project-serum/anchor";
import { Swap as SwapClient } from "@project-serum/swap";
import {
makeStyles,
Card,
Button,
Tabs,
Tab,
IconButton,
Paper,
Typography,
TextField,
} from "@material-ui/core";
import { Settings, Info, ExpandMore } from "@material-ui/icons";
import {
SwapContextProvider,
TokenListContextProvider,
useSwapContext,
useTokenList,
useOwnedTokenAccount,
useMintAccount,
} from "./Context";
const useStyles = makeStyles((theme) => ({
card: {
width: "450px",
borderRadius: "10px",
},
cardContent: {
marginLeft: "6px",
marginRight: "6px",
marginBottom: "6px",
},
tab: {
width: "50%",
},
settings: {
display: "flex",
flexDirection: "row-reverse",
},
settingsButton: {
padding: 0,
},
swapButton: {
width: "100%",
borderRadius: "15px",
},
swapToFromButton: {
display: "block",
marginLeft: "auto",
marginRight: "auto",
},
auxilliaryLabel: {
marginTop: "10px",
marginBottom: "10px",
display: "flex",
justifyContent: "space-between",
marginLeft: "5px",
marginRight: "5px",
},
}));
export default function Swap({
style,
provider,
tokenList,
}: {
style?: any;
provider: Provider;
tokenList: TokenListContainer;
}) {
const swapClient = new SwapClient(provider, tokenList);
return (
);
}
function SwapInner({ style }: { style?: any }) {
const styles = useStyles();
return (
);
}
function SwapHeader() {
return (
Swap
);
}
function AuxilliaryLabel() {
const styles = useStyles();
const { fromMint, toMint, fromAmount, toAmount } = useSwapContext();
const toPrice = (fromAmount / toAmount).toFixed(6); // TODO: decimals per mint type.
const tokenList = useTokenList();
let fromTokenInfo = tokenList.filter(
(t) => t.address === fromMint.toString()
)[0];
let toTokenInfo = tokenList.filter((t) => t.address === toMint.toString())[0];
return (
Serum
{fromAmount !== 0 && toAmount !== 0
? `1 ${toTokenInfo.symbol} = ${toPrice} ${fromTokenInfo.symbol}`
: `-`}
);
}
function TabSelector() {
const styles = useStyles();
return (
);
}
export function SwapToFromButton() {
const styles = useStyles();
const { swapToFromMints } = useSwapContext();
return (
);
}
function SettingsButton() {
const styles = useStyles();
return (
);
}
function SwapFromForm() {
const { fromMint, setFromMint, fromAmount, setFromAmount } = useSwapContext();
return (
);
}
function SwapToForm() {
const { toMint, setToMint, toAmount, setToAmount } = useSwapContext();
return (
);
}
function SwapTokenForm({
isEstimate,
mint,
setMint,
amount,
setAmount,
}: {
isEstimate: boolean;
mint: PublicKey;
setMint: (m: PublicKey) => void;
amount: number;
setAmount: (a: number) => void;
}) {
const tokenAccount = useOwnedTokenAccount(mint);
const mintAccount = useMintAccount(mint);
return (
setAmount(parseFloat(e.target.value))}
style={{
display: "flex",
justifyContent: "center",
flexDirection: "column",
}}
/>
{tokenAccount && mintAccount
? `Balance: ${(
tokenAccount.account.amount.toNumber() /
10 ** mintAccount.decimals
).toFixed(mintAccount.decimals)}`
: `-`}
);
}
function TokenButton({ mint }: { mint: PublicKey }) {
return (
);
}
function TokenIcon({ mint }: { mint: PublicKey }) {
const tokenList = useTokenList();
let tokenInfo = tokenList.filter((t) => t.address === mint.toString())[0];
return (
);
}
function TokenName({ mint }: { mint: PublicKey }) {
const tokenList = useTokenList();
let tokenInfo = tokenList.filter((t) => t.address === mint.toString())[0];
return (
{tokenInfo.symbol}
);
}
function SwapButton() {
const styles = useStyles();
const { fromMint, toMint, fromAmount, minExpectedAmount } = useSwapContext();
const sendSwapTransaction = async () => {
console.log("sending swap");
};
return (
);
}
function TokenSelector() {
return ;
}