[react-core] Add hook: useTransferNativeToken (#2008)

Author: Kien Ngo

.changeset/stupid-toes-pull.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react-core": patch
+---
+
+Add hook for transferring native token

packages/react-core/src/evm/hooks/async/token.ts

@@ -2,7 +2,7 @@ import {
   requiredParamInvariant,
   RequiredParam,
 } from "../../../core/query-utils/required-param";
-import { useSDKChainId } from "../useSDK";
+import { useSDK, useSDKChainId } from "../useSDK";
 import {
   ClaimTokenParams,
   getErc20,
@@ -13,6 +13,7 @@ import {
 } from "../../types";
 import {
   cacheKeys,
+  invalidateBalances,
   invalidateContractAndBalances,
 } from "../../utils/cache-keys";
 import { useQueryWithNetwork } from "../query-utils/useQueryWithNetwork";
@@ -323,6 +324,51 @@ export function useTransferToken(contract: RequiredParam<TokenContract>) {
   );
 }
 
+/**
+ * A hook to transfer native token (of the active chain) to another wallet
+ * 
+ * @example
+ * ```jsx
+ * const Component = () => {
+ *   const {
+ *     mutate: transferNativeToken,
+ *     isLoading,
+ *     error,
+ *   } = useTransferNativeToken();
+ *
+ *   if (error) {
+ *     console.error("failed to transfer tokens", error);
+ *   }
+ *
+ *   return (
+ *     <button
+ *       disabled={isLoading}
+ *       onClick={() => transferNativeToken({ to: "{{wallet_address}}", amount: "0.1" })}
+ *     >
+ *       Transfer
+ *     </button>
+ *   );
+ * };
+ * ```
+ * 
+ * @returns a mutation object that can be used to transfer native tokens
+ */
+export function useTransferNativeToken() {
+  const sdk = useSDK();
+  const activeChainId = useSDKChainId();
+  const queryClient = useQueryClient();
+  return useMutation(
+    (data: TokenParams) => {
+      const { to, amount } = data;
+      invariant(sdk, "SDK is not initialized");
+      return sdk.wallet.transfer(to, amount);
+    },
+    {
+      onSettled: () => invalidateBalances(queryClient, activeChainId),
+    },
+  );
+}
+
 /**
  * Airdrop tokens to a list of wallets
  *

packages/react-core/src/evm/index.ts

@@ -195,6 +195,7 @@ export {
   useTransferToken,
   useTransferBatchToken,
   useBurnToken,
+  useTransferNativeToken,
 } from "./hooks/async/token";
 
 // account factory

packages/react-core/src/evm/utils/cache-keys.ts

@@ -58,12 +58,22 @@ export function invalidateContractAndBalances(
         ),
       ),
     ),
-    queryClient.invalidateQueries(
-      enforceCachePrefix(createCacheKeyWithNetwork(["balance"], chainId)),
-    ),
+    invalidateBalances(queryClient, chainId),
   ]);
 }
 
+/**
+ * @internal
+ */
+export function invalidateBalances(
+  queryClient: QueryClient,
+  chainId: RequiredParam<SUPPORTED_CHAIN_ID>,
+) {
+  return queryClient.invalidateQueries(
+    enforceCachePrefix(createCacheKeyWithNetwork(["balance"], chainId)),
+  );
+}
+
 /**
  @internal
  */