76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import BN from "bn.js";
|
|
import Select from "@material-ui/core/Select";
|
|
import MenuItem from "@material-ui/core/MenuItem";
|
|
import { PublicKey } from "@solana/web3.js";
|
|
import { State as StoreState } from "../../store/reducer";
|
|
import { toDisplay } from "../../utils/tokens";
|
|
|
|
type Props = {
|
|
style?: any;
|
|
mint?: PublicKey | null;
|
|
decimals?: number;
|
|
variant?: "outlined" | "standard";
|
|
onChange: (from: PublicKey, maxAmount: BN) => void;
|
|
};
|
|
|
|
export default function OwnedTokenAccountsSelect(p: Props) {
|
|
const { mint, decimals, variant, onChange, style } = p;
|
|
const ownedTokenAccounts = useSelector((state: StoreState) => {
|
|
if (!mint) {
|
|
return [];
|
|
}
|
|
return state.common.ownedTokenAccounts.filter(
|
|
(ota) => ota.account.mint.toString() === mint.toString()
|
|
);
|
|
});
|
|
|
|
const [fromAccount, setFromAccount] = useState("");
|
|
|
|
return (
|
|
<Select
|
|
style={style}
|
|
variant={variant}
|
|
fullWidth
|
|
value={fromAccount}
|
|
onChange={(e) => {
|
|
const pk = e.target.value as string;
|
|
setFromAccount(pk);
|
|
const pubkey = new PublicKey(pk);
|
|
const token = ownedTokenAccounts
|
|
.filter((ota) => ota.publicKey.equals(pubkey))
|
|
.pop();
|
|
onChange(pubkey, new BN(token!.account.amount));
|
|
}}
|
|
>
|
|
{ownedTokenAccounts.length === 0 ? (
|
|
<MenuItem value={""}>No token accounts found</MenuItem>
|
|
) : (
|
|
ownedTokenAccounts.map((ownedTokenAccount) => {
|
|
return (
|
|
<MenuItem value={ownedTokenAccount.publicKey.toString()}>
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div>{`${ownedTokenAccount.publicKey}`}</div>
|
|
{decimals && (
|
|
<div style={{ float: "right", color: "#ccc" }}>{`${toDisplay(
|
|
ownedTokenAccount.account.amount,
|
|
decimals ?? 0
|
|
)}`}</div>
|
|
)}
|
|
</div>
|
|
</MenuItem>
|
|
);
|
|
})
|
|
)}
|
|
</Select>
|
|
);
|
|
}
|