Skip to content

Commit

Permalink
feat: implement ata account type
Browse files Browse the repository at this point in the history
  • Loading branch information
sohrab- committed Feb 23, 2023
1 parent 78d6042 commit 30723c0
Show file tree
Hide file tree
Showing 7 changed files with 189 additions and 17 deletions.
52 changes: 52 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"@project-serum/anchor": "^0.25.0",
"@sentry/react": "^7.38.0",
"@solana/buffer-layout": "^4.0.0",
"@solana/spl-token": "^0.3.7",
"@solana/wallet-adapter-base": "^0.9.20",
"@solana/wallet-adapter-brave": "^0.1.14",
"@solana/wallet-adapter-react": "^0.15.26",
Expand Down
8 changes: 2 additions & 6 deletions src/components/client/accounts/Account.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
Wrap,
} from "@chakra-ui/react";
import { AccountInput } from "components/client/accounts/AccountInput";
import { AtaTypeConfig } from "components/client/accounts/type-configs/AtaTypeConfig";
import { PdaTypeConfig } from "components/client/accounts/type-configs/PdaTypeConfig";
import { Description } from "components/common/Description";
import { DragHandle } from "components/common/DragHandle";
Expand Down Expand Up @@ -106,13 +107,8 @@ export const Account: React.FC<{
// TODO ignores other future tags
pt={isTypeConfigurable || metadata?.name ? "1" : undefined}
>
{/* TODO */}
{/* {type === "ata" && (
<AtaTypeConfig />
)} */}

{type === "ata" && <AtaTypeConfig />}
{type === "pda" && <PdaTypeConfig />}

{metadata?.name && <Tag size="sm">{metadata.name}</Tag>}

{/* TODO account balance */}
Expand Down
5 changes: 1 addition & 4 deletions src/components/client/accounts/AccountTypeButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ const TYPES: AccountType[] = [
"wallet",
"keypair",
"pda",
// TODO implement
// "ata",
"ata",
"program",
"sysvar",
"unspecified",
Expand Down Expand Up @@ -77,8 +76,6 @@ export const AccountTypeButton: React.FC = () => {
// only populates for account types that receieve no config,
// e.g. wallet or new key pair
allPopulate[type]();

// TODO open the config collapse thing
};

return (
Expand Down
102 changes: 102 additions & 0 deletions src/components/client/accounts/type-configs/AtaTypeConfig.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import { DeleteIcon, SearchIcon, SettingsIcon } from "@chakra-ui/icons";
import {
Button,
HStack,
Input,
Popover,
PopoverArrow,
PopoverBody,
PopoverContent,
PopoverFooter,
PopoverTrigger,
Portal,
Text,
} from "@chakra-ui/react";
import { useAccount } from "hooks/useAccount";
import { useAccountType } from "hooks/useAccountType";
import React, { useRef, useState } from "react";

export const AtaTypeConfig: React.FC = () => {
const { metadata, populate } = useAccountType();
const [error, setError] = useState("");
const { update } = useAccount();
const initialFocusRef = useRef(null);

const mint = metadata?.mint;

const generate = (onClose: () => void) => () => {
try {
setError("");
populate();
onClose();
} catch (e) {
setError((e as Error).toString());
}
};

return (
<Popover placement="right" initialFocusRef={initialFocusRef} isLazy>
{({ onClose }) => (
<>
<PopoverTrigger>
<Button size="xs" colorScheme="teal" rightIcon={<SettingsIcon />}>
{`Mint: ${mint || "Not set"}`}
</Button>
</PopoverTrigger>

{/* avoid z-index issues with it rendering before other compoents that may clash with it */}
<Portal>
<PopoverContent>
<PopoverArrow bg="chakra-body-bg" />

<PopoverBody>
<Input
ref={initialFocusRef}
size="xs"
placeholder="Mint address"
value={mint}
onChange={(e) => {
update((state) => {
state.metadata = { mint: e.target.value };
});
}}
/>
</PopoverBody>

<PopoverFooter>
<HStack>
<Button
size="xs"
colorScheme="teal"
leftIcon={<SearchIcon />}
onClick={generate(onClose)}
>
Find ATA
</Button>
<Button
size="xs"
leftIcon={<DeleteIcon />}
onClick={() => {
update((state) => {
state.pubkey = "";
state.metadata = { mint: "" };
});
onClose();
}}
>
Clear
</Button>
{error && (
<Text ml="2" color="red.500" fontSize="sm">
{error}
</Text>
)}
</HStack>
</PopoverFooter>
</PopoverContent>
</Portal>
</>
)}
</Popover>
);
};
11 changes: 5 additions & 6 deletions src/components/common/AccountAutoComplete.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -188,12 +188,11 @@ const OPTIONS: Option[] = [
value: "pda",
type: "type",
},
// TODO implement
// {
// label: "Associated token account",
// value: "ata",
// type: "type",
// },
{
label: "Associated token account (ATA)",
value: "ata",
type: "type",
},
{
label: "Program",
value: "program",
Expand Down
27 changes: 26 additions & 1 deletion src/hooks/useAccountType.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useToast } from "@chakra-ui/react";
import { getAssociatedTokenAddressSync } from "@solana/spl-token";
import { useWallet } from "@solana/wallet-adapter-react";
import { Keypair, PublicKey } from "@solana/web3.js";
import { useAccount } from "hooks/useAccount";
Expand Down Expand Up @@ -100,7 +101,31 @@ export const useAccountType = (): {
};

const ata = () => {
// TODO
const mint = metadata?.mint;
// TODO is it needed?
if (!mint) {
return;
}

if (!walletPublicKey) {
toast({
title: "Wallet not connected!",
description: "Please use the top-right button to connect one.",
status: "error",
duration: 8000,
isClosable: true,
});
return;
}

const ata = getAssociatedTokenAddressSync(
new PublicKey(mint),
walletPublicKey
);

accountUpdate((state) => {
state.pubkey = ata.toBase58();
});
};

const program = () => {
Expand Down

0 comments on commit 30723c0

Please sign in to comment.