useSponsorTokenWithETH

"use client";
import { useSponsorTokenWithETH } from "@tx-kit/hooks";

const MyComponent = () => {
    const { 
        sponsorTokenWithETH,
        tokenId,
        status, 
        txHash,
        error 
    } = useSponsorTokenWithETH()

    const onClick = () => {
        sponsorTokenWithETH({ ... })
    }

    return <button onClick={onClick}>Sponsor Token</button>
}

"use client";
import { createConfig, http, WagmiProvider } from "wagmi";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { base, baseSepolia, Chain } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { coinbaseWallet, walletConnectWallet, rainbowWallet, metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'
import TxProvider from "./TxProvider";

coinbaseWallet.preference = 'all';

const queryClient = new QueryClient()

const config = getDefaultConfig({
  appName: "Uplink.wtf",
  appUrl: process.env.NEXT_PUBLIC_CLIENT_URL,
  projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
  chains: [base as Chain, baseSepolia as Chain],
  transports: {
    [base.id]: http(),
    [baseSepolia.id]: http(),
  },
  ssr: true,
  wallets: [{
    groupName: "Popular",
    wallets: [coinbaseWallet, metaMaskWallet]
  },
  {
    groupName: "More",
    wallets: [walletConnectWallet, rainbowWallet]
  }
  ],
})

export default function WalletProvider({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
            <TxProvider>
                {children}
            </TxProvider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

"use client";
import { TransmissionsProvider, useTransmissionsClient } from '@tx-kit/hooks';
import { SUPPORTED_CHAIN_IDS } from '@tx-kit/sdk';
import { useMemo } from 'react';
import { useChainId, usePublicClient, useWalletClient } from 'wagmi';

const TxProvider = ({ children }: { children: React.ReactNode }) => {
    return (
        <TransmissionsProvider>
            <TransmissionsClientProvider>
                {children}
            </TransmissionsClientProvider>
        </TransmissionsProvider>
    )
}

const TransmissionsClientProvider = ({ children }: { children: React.ReactNode }) => {
    const chainId = useChainId();
    const { data: walletClient, status } = useWalletClient();
    const publicClient = usePublicClient();

    const transmissionsClientConfig = useMemo(() => ({
        chainId: SUPPORTED_CHAIN_IDS.includes(chainId) ? chainId : 8453,
        walletClient: walletClient,
        publicClient: publicClient,
        paymasterConfig: {
            paymasterUrl: process.env.NODE_ENV === "production" ? `${process.env.NEXT_PUBLIC_HUB_URL}/v2/paymaster_proxy` : 'https://paymaster.base.org',
        }
    }), [chainId, walletClient, publicClient]);

    useTransmissionsClient(transmissionsClientConfig);

    return <>{children}</>;
};


export default TxProvider;