From d340350e3709300945da9a123a775b6d30bafa9c Mon Sep 17 00:00:00 2001 From: Bram Borggreve Date: Sat, 6 Jan 2024 01:03:15 +0000 Subject: [PATCH] feat: clean up Solana hooks --- .../data-access/src/lib/create-transaction.ts | 4 +- .../data-access/src/lib/use-account.tsx | 192 ++++++++++-------- .../counter-program-account-provider.tsx | 12 ++ .../counter/data-access/use-counter-close.tsx | 12 +- .../data-access/use-counter-decrement.tsx | 10 +- .../counter/data-access/use-counter-fetch.tsx | 7 +- .../data-access/use-counter-increment.tsx | 12 +- .../data-access/use-counter-initialize.tsx | 12 +- .../data-access/use-counter-refresh.tsx | 14 ++ .../counter/data-access/use-counter-set.tsx | 12 +- .../lib/counter/ui/counter-value-button.tsx | 6 +- .../counter/ui/program-counter-account.tsx | 4 + .../lib/solana-ui-account-balance-button.tsx | 4 +- .../lib/solana-ui-account-balance-check.tsx | 7 +- .../ui/src/lib/solana-ui-account-balance.tsx | 4 +- .../lib/solana-ui-account-modal-airdrop.tsx | 10 +- .../src/lib/solana-ui-account-modal-send.tsx | 10 +- .../lib/solana-ui-account-token-balance.tsx | 10 +- .../ui/src/lib/solana-ui-account-tokens.tsx | 4 +- .../lib/solana-ui-account-transactions.tsx | 4 +- 20 files changed, 192 insertions(+), 158 deletions(-) create mode 100644 libs/web/solana/feature/src/lib/counter/data-access/use-counter-refresh.tsx diff --git a/libs/web/solana/data-access/src/lib/create-transaction.ts b/libs/web/solana/data-access/src/lib/create-transaction.ts index ec8ed27..648f88a 100644 --- a/libs/web/solana/data-access/src/lib/create-transaction.ts +++ b/libs/web/solana/data-access/src/lib/create-transaction.ts @@ -15,7 +15,7 @@ export async function createTransaction({ }: { publicKey: PublicKey destination: PublicKey - amount: number + amount: string connection: Connection }): Promise<{ transaction: VersionedTransaction @@ -29,7 +29,7 @@ export async function createTransaction({ SystemProgram.transfer({ fromPubkey: publicKey, toPubkey: destination, - lamports: amount * LAMPORTS_PER_SOL, + lamports: parseFloat(amount) * LAMPORTS_PER_SOL, }), ] diff --git a/libs/web/solana/data-access/src/lib/use-account.tsx b/libs/web/solana/data-access/src/lib/use-account.tsx index 8b6ff1a..fdd7545 100644 --- a/libs/web/solana/data-access/src/lib/use-account.tsx +++ b/libs/web/solana/data-access/src/lib/use-account.tsx @@ -1,108 +1,130 @@ import { toastError } from '@pubkey-ui/core' import { TOKEN_2022_PROGRAM_ID, TOKEN_PROGRAM_ID } from '@solana/spl-token' import { useConnection, useWallet } from '@solana/wallet-adapter-react' -import { LAMPORTS_PER_SOL, PublicKey, TransactionSignature } from '@solana/web3.js' -import { useMutation, useQuery } from '@tanstack/react-query' +import { Connection, LAMPORTS_PER_SOL, PublicKey, TransactionSignature } from '@solana/web3.js' +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' import { createTransaction } from './create-transaction' import { toastExplorerLink } from './toast-signature-link' import { useCluster } from './web-cluster-provider' -export function useAccount({ address }: { address: PublicKey }) { - const { cluster, getExplorerUrl } = useCluster() +export function useQueries({ address }: { address: PublicKey }) { const { connection } = useConnection() - const wallet = useWallet() + const onSuccess = useOnTransactionSuccess({ address }) - const getBalance = useQuery({ - queryKey: ['balance', { cluster, address }], - queryFn: () => connection.getBalance(address), - }) - - const getSignatures = useQuery({ - queryKey: ['signatures', { cluster, address }], - queryFn: () => connection.getConfirmedSignaturesForAddress2(address), - }) - - const getTokenAccounts = useQuery({ - queryKey: ['token-accounts', { endpoint: connection.rpcEndpoint, address: address.toString() }], - queryFn: async () => { - const [tokenAccounts, token2022Accounts] = await Promise.all([ - connection.getParsedTokenAccountsByOwner(address, { - programId: TOKEN_PROGRAM_ID, - }), - connection.getParsedTokenAccountsByOwner(address, { - programId: TOKEN_2022_PROGRAM_ID, - }), - ]) - return [...tokenAccounts.value, ...token2022Accounts.value] + return { + getBalance: { + queryKey: ['getBalance', { endpoint: connection?.rpcEndpoint, address }], + queryFn: () => connection.getBalance(address), + }, + getSignatures: { + queryKey: ['getSignatures', { endpoint: connection?.rpcEndpoint, address }], + queryFn: () => connection.getConfirmedSignaturesForAddress2(address), + }, + getTokenAccounts: { + queryKey: ['getTokenAccounts', { endpoint: connection?.rpcEndpoint, address }], + queryFn: () => getAllTokenAccounts(connection, address), + }, + getTokenBalance: { + queryKey: ['getTokenBalance', { endpoint: connection?.rpcEndpoint, account: address }], + queryFn: () => connection.getTokenAccountBalance(address), }, - }) + requestAirdrop: { + mutationKey: ['requestAirdrop', { endpoint: connection?.rpcEndpoint, address }], + mutationFn: (amount: string) => requestAndConfirmAirdrop({ address, amount, connection }), + onSuccess, + onError: (error: unknown) => { + toastError(`Requesting airdrop failed! ${error}`) + }, + }, + transferSol: { + mutationKey: ['transferSol', { endpoint: connection?.rpcEndpoint, address }], + mutationFn: async ({ amount, destination }: { amount: string; destination: PublicKey }) => { + try { + const { transaction, latestBlockhash } = await createTransaction({ + amount, + connection, + destination, + publicKey: address, + }) - const getTokenBalance = useQuery({ - queryKey: ['getTokenAccountBalance', { endpoint: connection.rpcEndpoint, account: address.toString() }], - queryFn: () => connection.getTokenAccountBalance(address), - }) + // Send transaction and await for signature + const signature: TransactionSignature = await wallet.sendTransaction(transaction, connection) - const requestAirdrop = useMutation({ - mutationKey: ['airdrop', { cluster, address }], - mutationFn: async (amount: number = 1) => { - const [latestBlockhash, signature] = await Promise.all([ - connection.getLatestBlockhash(), - connection.requestAirdrop(address, amount * LAMPORTS_PER_SOL), - ]) + // Send transaction and await for signature + await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed') - await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed') - return signature - }, - onSuccess: (signature) => { - toastExplorerLink({ link: getExplorerUrl(`tx/${signature}`), label: 'View Transaction' }) - return Promise.all([getBalance.refetch(), getSignatures.refetch()]) + return signature + } catch (error: unknown) { + console.log('error', `Transaction failed! ${error}`) + return + } + }, + onSuccess, + onError: (error: unknown) => { + toastError(`Transaction failed! ${error}`) + }, }, - }) + } +} - const transferSol = useMutation({ - mutationKey: ['transfer-sol', { cluster, address }], - mutationFn: async (input: { destination: PublicKey; amount: number }) => { - let signature: TransactionSignature = '' - try { - const { transaction, latestBlockhash } = await createTransaction({ - publicKey: address, - destination: input.destination, - amount: input.amount, - connection, - }) +export function useGetBalance({ address }: { address: PublicKey }) { + return useQuery(useQueries({ address }).getBalance) +} +export function useGetSignatures({ address }: { address: PublicKey }) { + return useQuery(useQueries({ address }).getSignatures) +} +export function useGetTokenAccounts({ address }: { address: PublicKey }) { + return useQuery(useQueries({ address }).getTokenAccounts) +} +export function useGetTokenBalance({ address }: { address: PublicKey }) { + return useQuery(useQueries({ address }).getTokenBalance) +} +export function useRequestAirdrop({ address }: { address: PublicKey }) { + return useMutation(useQueries({ address }).requestAirdrop) +} +export function useTransferSol({ address }: { address: PublicKey }) { + return useMutation(useQueries({ address }).transferSol) +} - // Send transaction and await for signature - signature = await wallet.sendTransaction(transaction, connection) +async function getAllTokenAccounts(connection: Connection, address: PublicKey) { + const [tokenAccounts, token2022Accounts] = await Promise.all([ + connection.getParsedTokenAccountsByOwner(address, { programId: TOKEN_PROGRAM_ID }), + connection.getParsedTokenAccountsByOwner(address, { programId: TOKEN_2022_PROGRAM_ID }), + ]) + return [...tokenAccounts.value, ...token2022Accounts.value] +} - // Send transaction and await for signature - await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed') +async function requestAndConfirmAirdrop({ + address, + amount, + connection, +}: { + connection: Connection + address: PublicKey + amount: string +}) { + const [latestBlockhash, signature] = await Promise.all([ + connection.getLatestBlockhash(), + connection.requestAirdrop(address, parseFloat(amount) * LAMPORTS_PER_SOL), + ]) - console.log(signature) - return signature - } catch (error: unknown) { - console.log('error', `Transaction failed! ${error}`, signature) + await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed') + return signature +} - return - } - }, - onSuccess: (signature) => { - if (signature) { - toastExplorerLink({ link: getExplorerUrl(`tx/${signature}`), label: 'View Transaction' }) - } - return Promise.all([getBalance.refetch(), getSignatures.refetch()]) - }, - onError: (error) => { - toastError(`Transaction failed! ${error}`) - }, - }) +function useOnTransactionSuccess({ address }: { address: PublicKey }) { + const { getExplorerUrl } = useCluster() + const client = useQueryClient() + const { getBalance, getSignatures } = useQueries({ address }) - return { - getBalance, - getSignatures, - getTokenAccounts, - getTokenBalance, - requestAirdrop, - transferSol, + return (signature?: TransactionSignature) => { + if (signature) { + toastExplorerLink({ link: getExplorerUrl(`tx/${signature}`), label: 'View Transaction' }) + } + return Promise.all([ + client.invalidateQueries({ queryKey: getBalance.queryKey }), + client.invalidateQueries({ queryKey: getSignatures.queryKey }), + ]) } } diff --git a/libs/web/solana/feature/src/lib/counter/data-access/counter-program-account-provider.tsx b/libs/web/solana/feature/src/lib/counter/data-access/counter-program-account-provider.tsx index 883acaf..73a52bb 100644 --- a/libs/web/solana/feature/src/lib/counter/data-access/counter-program-account-provider.tsx +++ b/libs/web/solana/feature/src/lib/counter/data-access/counter-program-account-provider.tsx @@ -2,10 +2,15 @@ import { Program, ProgramAccount } from '@coral-xyz/anchor' import { Counter } from '@pubkey-stack/anchor' import { createContext, ReactNode, useContext } from 'react' import { useCounterProgram } from './use-counter-program' +import { useCluster } from '@pubkey-stack/web-solana-data-access' +import { useCounterFetch } from './use-counter-fetch' +import { useCounterRefresh } from './use-counter-refresh' export interface CounterProgramAccountProviderContext { account: ProgramAccount<{ count: number }> program: Program + refresh: () => Promise + getExplorerUrl: (path: string) => string } const Context = createContext({} as CounterProgramAccountProviderContext) @@ -18,12 +23,19 @@ export function CounterProgramAccountProvider({ children: ReactNode }) { const program = useCounterProgram() + const { getExplorerUrl } = useCluster() + const counterRefresh = useCounterRefresh() + const counterQuery = useCounterFetch({ account: account.publicKey }) return ( { + await Promise.all([counterQuery.refetch(), counterRefresh()]) + }, + getExplorerUrl, }} > {children} diff --git a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-close.tsx b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-close.tsx index 37eadaa..4e4ef30 100644 --- a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-close.tsx +++ b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-close.tsx @@ -1,16 +1,10 @@ -import { toastExplorerLink, useAccount, useCluster } from '@pubkey-stack/web-solana-data-access' +import { toastExplorerLink } from '@pubkey-stack/web-solana-data-access' import { toastError } from '@pubkey-ui/core' -import { useWallet } from '@solana/wallet-adapter-react' import { useMutation } from '@tanstack/react-query' import { useCounterProgramAccount } from './counter-program-account-provider' -import { useCounterFetchAll } from './use-counter-fetch-all' export function useCounterClose() { - const fetchAll = useCounterFetchAll() - const { account, program } = useCounterProgramAccount() - const { publicKey } = useWallet() - const { getBalance } = useAccount({ address: publicKey! }) - const { getExplorerUrl } = useCluster() + const { account, program, refresh, getExplorerUrl } = useCounterProgramAccount() return useMutation({ mutationKey: ['counter', 'close', { account }], @@ -26,7 +20,7 @@ export function useCounterClose() { label: 'View transaction', }) } - return Promise.all([fetchAll.refetch(), getBalance.refetch()]) + return refresh() }) .catch((err) => toastError(err.message)), }) diff --git a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-decrement.tsx b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-decrement.tsx index e058786..7ba15d1 100644 --- a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-decrement.tsx +++ b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-decrement.tsx @@ -1,14 +1,10 @@ -import { toastExplorerLink, useAccount, useCluster } from '@pubkey-stack/web-solana-data-access' +import { toastExplorerLink } from '@pubkey-stack/web-solana-data-access' import { toastError } from '@pubkey-ui/core' import { useMutation } from '@tanstack/react-query' import { useCounterProgramAccount } from './counter-program-account-provider' -import { useCounterFetch } from './use-counter-fetch' export function useCounterDecrement() { - const counterQuery = useCounterFetch() - const { account, program } = useCounterProgramAccount() - const { getBalance } = useAccount({ address: account?.publicKey }) - const { getExplorerUrl } = useCluster() + const { account, program, getExplorerUrl, refresh } = useCounterProgramAccount() return useMutation({ mutationKey: ['counter', 'decrement', { account }], @@ -22,7 +18,7 @@ export function useCounterDecrement() { link: getExplorerUrl(`/tx/${signature}`), label: 'View transaction', }) - return Promise.all([counterQuery.refetch(), getBalance.refetch()]) + return refresh() }) .catch((err) => toastError(err.message)), }) diff --git a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-fetch.tsx b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-fetch.tsx index 58f907e..c04ab6a 100644 --- a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-fetch.tsx +++ b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-fetch.tsx @@ -1,14 +1,13 @@ import { toastError } from '@pubkey-ui/core' import { useQuery } from '@tanstack/react-query' -import { useCounterProgramAccount } from './counter-program-account-provider' import { useCounterProgram } from './use-counter-program' +import { PublicKey } from '@solana/web3.js' -export function useCounterFetch() { - const { account } = useCounterProgramAccount() +export function useCounterFetch({ account }: { account: PublicKey }) { const program = useCounterProgram() return useQuery({ queryKey: ['counter', 'fetch', { account }], - queryFn: () => program.account.counter.fetch(account.publicKey).catch((err) => toastError(err.message)), + queryFn: () => program.account.counter.fetch(account).catch((err) => toastError(err.message)), }) } diff --git a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-increment.tsx b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-increment.tsx index bed55f5..ae58e93 100644 --- a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-increment.tsx +++ b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-increment.tsx @@ -1,16 +1,10 @@ -import { toastExplorerLink, useAccount, useCluster } from '@pubkey-stack/web-solana-data-access' +import { toastExplorerLink } from '@pubkey-stack/web-solana-data-access' import { toastError } from '@pubkey-ui/core' -import { useWallet } from '@solana/wallet-adapter-react' import { useMutation } from '@tanstack/react-query' import { useCounterProgramAccount } from './counter-program-account-provider' -import { useCounterFetch } from './use-counter-fetch' export function useCounterIncrement() { - const { publicKey } = useWallet() - const { getBalance } = useAccount({ address: publicKey! }) - const counterQuery = useCounterFetch() - const { account, program } = useCounterProgramAccount() - const { getExplorerUrl } = useCluster() + const { account, program, refresh, getExplorerUrl } = useCounterProgramAccount() return useMutation({ mutationKey: ['counter', 'increment', { account }], @@ -24,7 +18,7 @@ export function useCounterIncrement() { link: getExplorerUrl(`/tx/${signature}`), label: 'View transaction', }) - return Promise.all([counterQuery.refetch(), getBalance.refetch()]) + return refresh() }) .catch((err) => toastError(err.message)), }) diff --git a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-initialize.tsx b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-initialize.tsx index 74a630a..09c14e9 100644 --- a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-initialize.tsx +++ b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-initialize.tsx @@ -1,16 +1,14 @@ -import { toastExplorerLink, useAccount, useCluster } from '@pubkey-stack/web-solana-data-access' +import { toastExplorerLink, useCluster } from '@pubkey-stack/web-solana-data-access' import { toastError } from '@pubkey-ui/core' -import { useWallet } from '@solana/wallet-adapter-react' import { Keypair } from '@solana/web3.js' import { useMutation } from '@tanstack/react-query' -import { useCounterFetchAll } from './use-counter-fetch-all' import { useCounterProgram } from './use-counter-program' +import { useCounterRefresh } from './use-counter-refresh' + export function useCounterInitialize() { - const { publicKey } = useWallet() - const { getBalance } = useAccount({ address: publicKey! }) const program = useCounterProgram() - const fetchAllQuery = useCounterFetchAll() + const refresh = useCounterRefresh() const { getExplorerUrl } = useCluster() return useMutation({ @@ -24,7 +22,7 @@ export function useCounterInitialize() { .then((signature) => { toastExplorerLink({ link: getExplorerUrl(`/tx/${signature}`) }) - return Promise.all([fetchAllQuery.refetch(), getBalance.refetch()]) + return refresh() }) .catch((err) => toastError(err.message)), }) diff --git a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-refresh.tsx b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-refresh.tsx new file mode 100644 index 0000000..886de25 --- /dev/null +++ b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-refresh.tsx @@ -0,0 +1,14 @@ +import { useWallet } from '@solana/wallet-adapter-react' +import { useGetBalance } from '@pubkey-stack/web-solana-data-access' +import { useCounterFetchAll } from './use-counter-fetch-all' + +export function useCounterRefresh() { + const { publicKey } = useWallet() + + const getBalance = useGetBalance({ address: publicKey! }) + const countersQuery = useCounterFetchAll() + + return async () => { + await Promise.all([countersQuery.refetch(), getBalance.refetch()]) + } +} diff --git a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-set.tsx b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-set.tsx index 37f7bc2..9ab939d 100644 --- a/libs/web/solana/feature/src/lib/counter/data-access/use-counter-set.tsx +++ b/libs/web/solana/feature/src/lib/counter/data-access/use-counter-set.tsx @@ -1,18 +1,12 @@ import { BN } from '@coral-xyz/anchor' -import { toastExplorerLink, useAccount, useCluster } from '@pubkey-stack/web-solana-data-access' +import { toastExplorerLink } from '@pubkey-stack/web-solana-data-access' import { toastError } from '@pubkey-ui/core' -import { useWallet } from '@solana/wallet-adapter-react' import { useMutation } from '@tanstack/react-query' import { useCounterProgramAccount } from './counter-program-account-provider' -import { useCounterFetch } from './use-counter-fetch' export function useCounterSet() { - const { publicKey } = useWallet() - const { getBalance } = useAccount({ address: publicKey! }) - const counterQuery = useCounterFetch() - const { account, program } = useCounterProgramAccount() + const { account, program, refresh, getExplorerUrl } = useCounterProgramAccount() - const { getExplorerUrl } = useCluster() return useMutation({ mutationKey: ['counter', 'decrement', { account }], mutationFn: (value: number) => @@ -27,7 +21,7 @@ export function useCounterSet() { label: 'View transaction', }) } - return Promise.all([counterQuery.refetch(), getBalance.refetch()]) + return refresh() }) .catch((err) => toastError(err.message)), }) diff --git a/libs/web/solana/feature/src/lib/counter/ui/counter-value-button.tsx b/libs/web/solana/feature/src/lib/counter/ui/counter-value-button.tsx index 069e6ae..5c3e632 100644 --- a/libs/web/solana/feature/src/lib/counter/ui/counter-value-button.tsx +++ b/libs/web/solana/feature/src/lib/counter/ui/counter-value-button.tsx @@ -3,9 +3,11 @@ import { toastWarning } from '@pubkey-ui/core' import { useCounterFetch } from '../data-access/use-counter-fetch' import { useCounterSet } from '../data-access/use-counter-set' +import { useCounterProgramAccount } from '../data-access/counter-program-account-provider' export function CounterValueButton() { - const counterQuery = useCounterFetch() + const { account } = useCounterProgramAccount() + const counterQuery = useCounterFetch({ account: account.publicKey }) const counterSet = useCounterSet() const value = counterQuery.data?.count.toString() ?? '0' @@ -15,7 +17,7 @@ export function CounterValueButton() { { const input = parseInt(prompt('Enter a value to set the counter to:', value) || '0') if (isNaN(input) || input < 0 || input === Number(value)) { diff --git a/libs/web/solana/feature/src/lib/counter/ui/program-counter-account.tsx b/libs/web/solana/feature/src/lib/counter/ui/program-counter-account.tsx index 743b811..5f8ef2d 100644 --- a/libs/web/solana/feature/src/lib/counter/ui/program-counter-account.tsx +++ b/libs/web/solana/feature/src/lib/counter/ui/program-counter-account.tsx @@ -11,6 +11,10 @@ import { CounterValueButton } from './counter-value-button' export function ProgramCounterAccount() { const { account } = useCounterProgramAccount() + function refresh() { + // + } + return ( : '...' diff --git a/libs/web/solana/ui/src/lib/solana-ui-account-balance-check.tsx b/libs/web/solana/ui/src/lib/solana-ui-account-balance-check.tsx index 1616f6c..ff35e69 100644 --- a/libs/web/solana/ui/src/lib/solana-ui-account-balance-check.tsx +++ b/libs/web/solana/ui/src/lib/solana-ui-account-balance-check.tsx @@ -1,12 +1,13 @@ import { Button, Group, Text } from '@mantine/core' -import { useAccount, useCluster } from '@pubkey-stack/web-solana-data-access' +import { useRequestAirdrop, useCluster, useGetBalance } from '@pubkey-stack/web-solana-data-access' import { UiWarning } from '@pubkey-ui/core' import { PublicKey } from '@solana/web3.js' import { IconUserOff } from '@tabler/icons-react' export function SolanaUiAccountBalanceCheck({ address }: { address: PublicKey }) { const { cluster } = useCluster() - const { getBalance: query, requestAirdrop } = useAccount({ address }) + const mutation = useRequestAirdrop({ address }) + const query = useGetBalance({ address }) if (query.isLoading) { return null @@ -29,7 +30,7 @@ export function SolanaUiAccountBalanceCheck({ address }: { address: PublicKey }) variant="light" color="yellow" size="xs" - onClick={() => requestAirdrop.mutateAsync(1).catch((err) => console.log(err))} + onClick={() => mutation.mutateAsync('1').catch((err) => console.log(err))} > Request Airdrop diff --git a/libs/web/solana/ui/src/lib/solana-ui-account-balance.tsx b/libs/web/solana/ui/src/lib/solana-ui-account-balance.tsx index cdcdf97..104fe03 100644 --- a/libs/web/solana/ui/src/lib/solana-ui-account-balance.tsx +++ b/libs/web/solana/ui/src/lib/solana-ui-account-balance.tsx @@ -1,10 +1,10 @@ import { Box, TitleProps } from '@mantine/core' -import { useAccount } from '@pubkey-stack/web-solana-data-access' +import { useGetBalance } from '@pubkey-stack/web-solana-data-access' import { PublicKey } from '@solana/web3.js' import { SolanaUiBalanceSol } from './solana-ui-balance-sol' export function SolanaUiAccountBalance({ address, ...props }: { address: PublicKey } & TitleProps) { - const { getBalance: query } = useAccount({ address }) + const query = useGetBalance({ address }) return ( query.refetch()} {...props}> diff --git a/libs/web/solana/ui/src/lib/solana-ui-account-modal-airdrop.tsx b/libs/web/solana/ui/src/lib/solana-ui-account-modal-airdrop.tsx index 70a2d89..1bbed72 100644 --- a/libs/web/solana/ui/src/lib/solana-ui-account-modal-airdrop.tsx +++ b/libs/web/solana/ui/src/lib/solana-ui-account-modal-airdrop.tsx @@ -1,13 +1,13 @@ import { Button, ButtonProps, Modal, TextInput } from '@mantine/core' import { useDisclosure } from '@mantine/hooks' -import { useAccount } from '@pubkey-stack/web-solana-data-access' +import { useRequestAirdrop } from '@pubkey-stack/web-solana-data-access' import { PublicKey } from '@solana/web3.js' import { useState } from 'react' export function SolanaUiAccountModalAirdrop({ address, ...props }: ButtonProps & { address: PublicKey }) { const [opened, { close, open }] = useDisclosure(false) - const { requestAirdrop: mutation } = useAccount({ address }) - const [amount, setAmount] = useState(2) + const mutation = useRequestAirdrop({ address }) + const [amount, setAmount] = useState('2') return ( <> @@ -18,9 +18,11 @@ export function SolanaUiAccountModalAirdrop({ address, ...props }: ButtonProps & setAmount(Number(e.target.value))} + onChange={(e) => setAmount(e.target.value)} />