coinbase · abcrane123 · Oct 29, 2024 · Oct 24, 2024 · Oct 25, 2024 · Oct 25, 2024
diff --git a/playground/nextjs-app-router/components/AppProvider.tsx b/playground/nextjs-app-router/components/AppProvider.tsx
@@ -78,6 +78,8 @@ type State = {
   setComponentMode: (mode: ComponentMode) => void;
   nftToken?: string;
   setNFTToken: (nftToken: string) => void;
+  setIsSponsored: (isSponsored: boolean) => void;
+  isSponsored?: boolean;
 };
 
 const defaultState: State = {
@@ -88,6 +90,7 @@ const defaultState: State = {
   componentMode: 'auto',
   setComponentMode: () => {},
   setNFTToken: () => {},
+  setIsSponsored: () => {},
 };
 
 export const AppContext = createContext(defaultState);
@@ -119,6 +122,8 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     '0x1D6b183bD47F914F9f1d3208EDCF8BefD7F84E63:1',
   );
 
+  const [isSponsored, setIsSponsoredState] = useState<boolean>(false);
+
   // Load initial values from localStorage
   // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component
   useEffect(() => {
@@ -135,6 +140,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       'componentMode',
     ) as ComponentMode;
     const storedNFTToken = localStorage.getItem('nftToken');
+    const storedIsSponsored = localStorage.getItem('isSponsored');
 
     if (storedActiveComponent) {
       setActiveComponent(storedActiveComponent as OnchainKitComponent);
@@ -163,6 +169,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     if (storedNFTToken) {
       setNFTTokenState(storedNFTToken);
     }
+    if (storedIsSponsored) {
+      setIsSponsoredState(JSON.parse(storedIsSponsored));
+    }
   }, []);
 
   // Connect to wallet if walletType changes
@@ -243,6 +252,11 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     localStorage.setItem('nftToken', nftToken);
     setNFTTokenState(nftToken);
   };
+  const setIsSponsored = (isSponsored: boolean) => {
+    console.log('Component isSponsored changed: ', isSponsored);
+    localStorage.setItem('isSponsored', JSON.stringify(isSponsored));
+    setIsSponsoredState(isSponsored);
+  };
 
   return (
     <AppContext.Provider
@@ -270,6 +284,8 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         setDefaultMaxSlippage,
         nftToken,
         setNFTToken,
+        setIsSponsored,
+        isSponsored,
       }}
     >
       <OnchainKitProvider
@@ -282,6 +298,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
             mode: componentMode,
             theme: componentTheme === 'none' ? undefined : componentTheme,
           },
+          paymaster: paymasters?.[chainId || 8453]?.url,
         }}
         projectId={ENVIRONMENT_VARIABLES[ENVIRONMENT.PROJECT_ID]}
         schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"

diff --git a/playground/nextjs-app-router/components/DemoOptions.tsx b/playground/nextjs-app-router/components/DemoOptions.tsx
@@ -5,6 +5,7 @@ import { OnchainKitComponent } from './AppProvider';
 import { ActiveComponent } from './form/active-component';
 import { Chain } from './form/chain';
 import { CheckoutOptions } from './form/checkout-options';
+import { IsSponsored } from './form/is-sponsored';
 import { NFTOptions } from './form/nft-options';
 import { SwapConfig } from './form/swap-config';
 import { TransactionOptions } from './form/transaction-options';
@@ -31,6 +32,7 @@ export default function DemoOptions({
           {commonOptions}
           <Chain />
           <PaymasterUrl />
+          <IsSponsored />
           <CheckoutOptions />
         </>
       );
@@ -41,6 +43,7 @@ export default function DemoOptions({
           {commonOptions}
           <Chain />
           <PaymasterUrl />
+          <IsSponsored />
           <SwapConfig />
         </>
       );
@@ -51,6 +54,7 @@ export default function DemoOptions({
           {commonOptions}
           <Chain />
           <PaymasterUrl />
+          <IsSponsored />
           <TransactionOptions />
         </>
       );

diff --git a/playground/nextjs-app-router/components/demo/Checkout.tsx b/playground/nextjs-app-router/components/demo/Checkout.tsx
@@ -1,4 +1,3 @@
-import { useCapabilities } from '@/lib/hooks';
 import {
   Checkout,
   CheckoutButton,
@@ -10,8 +9,8 @@ import { useContext } from 'react';
 import { AppContext, CheckoutTypes } from '../AppProvider';
 
 export default function CheckoutDemo() {
-  const { checkoutTypes, checkoutOptions } = useContext(AppContext);
-  const capabilities = useCapabilities();
+  const { checkoutTypes, checkoutOptions, isSponsored } =
+    useContext(AppContext);
 
   const chargeIDKey = useMemo(() => {
     return `${checkoutOptions?.chargeId}`;
@@ -41,7 +40,7 @@ export default function CheckoutDemo() {
               key={productIDKey}
               productId={checkoutOptions?.productId}
               >
-              isSponsored={capabilities?.paymasterService?.url != null}
+              isSponsored={isSponsored}
             >
               <CheckoutButton
                 coinbaseBranded={true}
@@ -69,7 +68,7 @@ export default function CheckoutDemo() {
               key={chargeIDKey}
               chargeHandler={createCharge}
               >
-              isSponsored={capabilities?.paymasterService?.url != null}
+              isSponsored={isSponsored}
             >
               <CheckoutButton
                 coinbaseBranded={true}

diff --git a/playground/nextjs-app-router/components/demo/Swap.tsx b/playground/nextjs-app-router/components/demo/Swap.tsx
@@ -22,7 +22,7 @@ import { AppContext } from '../AppProvider';
 const FALLBACK_DEFAULT_MAX_SLIPPAGE = 3;
 
 function SwapComponent() {
-  const { chainId, defaultMaxSlippage, paymasters } = useContext(AppContext);
+  const { chainId, isSponsored, defaultMaxSlippage } = useContext(AppContext);
 
   const degenToken: Token = {
     name: 'DEGEN',
@@ -111,7 +111,7 @@ function SwapComponent() {
         config={{
           maxSlippage: defaultMaxSlippage || FALLBACK_DEFAULT_MAX_SLIPPAGE,
         }}
-        isSponsored={paymasters != null}
+        isSponsored={isSponsored}
       >
         <SwapSettings>
           <SwapSettingsSlippageTitle>Max. slippage</SwapSettingsSlippageTitle>

diff --git a/playground/nextjs-app-router/components/demo/Transaction.tsx b/playground/nextjs-app-router/components/demo/Transaction.tsx
@@ -1,4 +1,3 @@
-import { useCapabilities } from '@/lib/hooks';
 import { clickCalls, clickContracts } from '@/lib/transactions';
 import type { Call } from '@/onchainkit/esm/transaction/types';
 import type { LifecycleStatus } from '@/onchainkit/src/transaction';
@@ -19,8 +18,7 @@ import type { ContractFunctionParameters } from 'viem';
 import { AppContext, TransactionTypes } from '../AppProvider';
 
 function TransactionDemo() {
-  const { chainId, transactionType } = useContext(AppContext);
-  const capabilities = useCapabilities();
+  const { chainId, transactionType, isSponsored } = useContext(AppContext);
   const contracts = clickContracts as ContractFunctionParameters[];
   const calls = clickCalls as Call[];
   const promiseCalls = new Promise((resolve) => {
@@ -100,7 +98,7 @@ function TransactionDemo() {
       case TransactionTypes.ContractsCallback:
         return { calls: undefined, contracts: contractsCallback };
       default:
-        return { calls: undefined, contracts: undefined };
+        return { calls, contracts: undefined };
     }
   }, [
     calls,
@@ -117,7 +115,7 @@ function TransactionDemo() {
       <Transaction
         chainId={chainId ?? 84532} // something breaks if we don't have default network?
         {...transactions}
-        capabilities={capabilities}
+        isSponsored={isSponsored}
         >
       >
         <TransactionButton

diff --git a/playground/nextjs-app-router/components/form/is-sponsored.tsx b/playground/nextjs-app-router/components/form/is-sponsored.tsx
@@ -0,0 +1,28 @@
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { useCallback, useContext } from 'react';
+import { AppContext } from '../AppProvider';
+
+export function IsSponsored() {
+  const { isSponsored, setIsSponsored } = useContext(AppContext);
+
+  const handleChange = useCallback(() => {
+    setIsSponsored(!isSponsored);
+  }, [setIsSpon
10000
sored, isSponsored]);
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center justify-between">
+        <Label htmlFor="sponsored mr-auto">isSponsored</Label>
+        <div className="flex items-center gap-2">
+          <Switch
+            id="is-sponsored"
+            checked={isSponsored}
+            >
+          />
+          <Label htmlFor="is-sponsored text-foregroundMuted">True</Label>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx
@@ -17,6 +17,7 @@ import { formatTokenAmount } from '../../internal/utils/formatTokenAmount';
 import type { Token } from '../../token';
 import { GENERIC_ERROR_MESSAGE } from '../../transaction/constants';
 import { isUserRejectedRequestError } from '../../transaction/utils/isUserRejectedRequestError';
+import { useOnchainKit } from '../../useOnchainKit';
 import { FALLBACK_DEFAULT_MAX_SLIPPAGE } from '../constants';
 import { useAwaitCalls } from '../hooks/useAwaitCalls';
 import { useFromTo } from '../hooks/useFromTo';
@@ -49,6 +50,9 @@ export function SwapProvider({
   onStatus,
   onSuccess,
 }: SwapProviderReact) {
+  const {
+    config: { paymaster } = { paymaster: undefined },
+  } = useOnchainKit();
   const { address, chainId } = useAccount();
   const { switchChainAsync } = useSwitchChain();
   // Feature flags
@@ -287,6 +291,7 @@ export function SwapProvider({
     [from, to, lifecycleStatus, updateLifecycleStatus, useAggregator],
   );
 
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component
   const handleSubmit = useCallback(async () => {
     if (!address || !from.token || !to.token || !from.amount) {
       return;
@@ -317,6 +322,7 @@ export function SwapProvider({
         chainId,
         config: accountConfig,
         isSponsored,
+        paymaster: paymaster || '',
         sendCallsAsync,
         sendTransactionAsync,
         swapTransaction: response,
@@ -346,6 +352,7 @@ export function SwapProvider({
     from.token,
     isSponsored,
     lifecycleStatus,
+    paymaster,
     sendCallsAsync,
     sendTransactionAsync,
     switchChainAsync,

diff --git a/src/swap/types.ts b/src/swap/types.ts
@@ -21,6 +21,7 @@ import type { Call } from '../transaction/types';
 export type SendSwapTransactionParams = {
   config: Config;
   isSponsored?: boolean; // Whether the swap is sponsored (default: false)
+  paymaster?: string; // OnchainKit config paymaster RPC url
   // biome-ignore lint: cannot find module 'wagmi/experimental/query'
   sendCallsAsync: any;
   sendTransactionAsync: SendTransactionMutateAsync<Config, unknown>;
@@ -158,6 +159,7 @@ export type ProcessSwapTransactionParams = {
   chainId?: number; // The chain ID
   config: Config;
   isSponsored?: boolean; // Whether the swap is sponsored (default: false)
+  paymaster?: string; // OnchainKit config paymaster RPC url
   // biome-ignore lint: cannot find module 'wagmi/experimental/query'
   sendCallsAsync: any;
   sendTransactionAsync: SendTransactionMutateAsync<Config, unknown>;

diff --git a/src/swap/utils/processSwapTransaction.ts b/src/swap/utils/processSwapTransaction.ts
@@ -12,6 +12,7 @@ export async function processSwapTransaction({
   chainId,
   config,
   isSponsored,
+  paymaster,
   sendCallsAsync,
   sendTransactionAsync,
   swapTransaction,
@@ -85,6 +86,7 @@ export async function processSwapTransaction({
   await sendSwapTransactions({
     config,
     isSponsored,
+    paymaster,
     sendCallsAsync,
     sendTransactionAsync,
     transactions,

diff --git a/src/swap/utils/sendSwapTransactions.test.ts b/src/swap/utils/sendSwapTransactions.test.ts
@@ -5,7 +5,6 @@ import { mainnet, sepolia } from 'wagmi/chains';
 import { mock } from 'wagmi/connectors';
 import { setOnchainKitConfig } from '../../OnchainKitConfig';
 import { Capabilities } from '../../constants';
-import { getRPCUrl } from '../../network/getRPCUrl';
 import type { SwapTransaction } from '../types';
 import { sendSwapTransactions } from './sendSwapTransactions';
 
@@ -120,13 +119,14 @@ describe('sendSwapTransactions', () => {
       updateLifecycleStatus,
       walletCapabilities: { [Capabilities.AtomicBatch]: { supported: true } },
       transactions,
+      paymaster: 'paymaster-url',
     });
     expect(sendCallsAsync).toHaveBeenCalledTimes(1);
     expect(sendCallsAsync).toHaveBeenCalledWith({
       calls: transactions.map(({ transaction }) => transaction),
       capabilities: {
         paymasterService: {
-          url: getRPCUrl(),
+          url: 'paymaster-url',
         },
       },
     });

diff --git a/src/swap/utils/sendSwapTransactions.ts b/src/swap/utils/sendSwapTransactions.ts
@@ -1,11 +1,11 @@
 import { Capabilities } from '../../constants';
-import { getRPCUrl } from '../../network/getRPCUrl';
 import type { SendSwapTransactionParams } from '../types';
 import { sendSingleTransactions } from './sendSingleTransactions';
 
 export async function sendSwapTransactions({
   config,
   isSponsored,
+  paymaster,
   sendCallsAsync,
   sendTransactionAsync,
   updateLifecycleStatus,
@@ -22,7 +22,7 @@ export async function sendSwapTransactions({
       capabilities: isSponsored
         ? {
             paymasterService: {
-              url: getRPCUrl(),
+              url: paymaster,
             },
           }
         : {},

diff --git a/src/transaction/components/Transaction.tsx b/src/transaction/components/Transaction.tsx
@@ -12,6 +12,7 @@ export function Transaction({
   className,
   children,
   contracts,
+  isSponsored,
   onError,
   onStatus,
   onSuccess,
@@ -35,6 +36,7 @@ export function Transaction({
       capabilities={capabilities}
       chainId={accountChainId}
       contracts={contracts}
+      isSponsored={isSponsored}
       >
       >
       >