chore: remove address prop and update sponsor txn check (#1114)

Co-authored-by: Alissa Crane <[email protected]>
coinbase · Aug 20, 2024 · 886d974 · 886d974
1 parent 0c2ec95
commit 886d974
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 52 deletions.
diff --git a/.changeset/brave-icons-fix.md b/.changeset/brave-icons-fix.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **patch**: Remove unneccessary address prop from Transaction component and fix issue where Sponsor component isn't visible. By @abcrane123 #1114
diff --git a/site/docs/pages/transaction/transaction.mdx b/site/docs/pages/transaction/transaction.mdx
@@ -72,7 +72,6 @@ export default function TransactionComponents() {
 
   return address ? (
     <Transaction // [!code focus]
-      address={address} // [!code focus]
       chainId={BASE_SEPOLIA_CHAIN_ID} // [!code focus]
       contracts={contracts} // [!code focus]
     > // [!code focus]
@@ -104,7 +103,6 @@ export default function TransactionComponents() {
       if (address) {
         return (
           <Transaction
-            address={address}
             capabilities={capabilities}
             chainId={BASE_SEPOLIA_CHAIN_ID}
             contracts={contracts}
@@ -139,7 +137,6 @@ export default function TransactionComponents() {
 // ommited for brevity
 
 <Transaction  // [!code focus]
-  address={address} // [!code focus]
   contracts={contracts} // [!code focus]
 >  // [!code focus]
   <TransactionButton /> // [!code focus]
@@ -158,7 +155,6 @@ export default function TransactionComponents() {
       if (address) {
         return (
           <Transaction
-            address={address}
             capabilities={{
               paymasterService: {
                 url: PAYMASTER_AND_BUNDLER_ENDPOINT,
@@ -204,7 +200,6 @@ export default function TransactionComponents() {
 ```tsx
 // ommited for brevity
 <Transaction
-  address={address}
   capabilities={{ // [!code focus]
     paymasterService: { // [!code focus]
       url: process.env.PAYMASTER_AND_BUNDLER_ENDPOINT, // [!code focus]
@@ -221,8 +216,7 @@ export default function TransactionComponents() {
     {({ address, contracts, onError }) => {
       if (address) {
         return (
-          <Transaction 
-            address={address} 
+          <Transaction  
             capabilities={{
               paymasterService: {
                 url: PAYMASTER_AND_BUNDLER_ENDPOINT,

diff --git a/site/docs/pages/transaction/types.mdx b/site/docs/pages/transaction/types.mdx
@@ -27,7 +27,6 @@ type TransactionError = {
 
 ```ts
 type TransactionReact = {
-  address: Address; // The wallet address involved in the transaction.
   children: ReactNode; // The child components to be rendered within the transaction component.
   className?: string; // An optional CSS class name for styling the component.
   contracts: ContractFunctionParameters[]; // An array of contract function parameters for the transaction.

diff --git a/src/transaction/components/Transaction.tsx b/src/transaction/components/Transaction.tsx
@@ -3,7 +3,6 @@ import type { TransactionReact } from '../types';
 import { TransactionProvider } from './TransactionProvider';
 
 export function Transaction({
-  address,
   capabilities,
   chainId,
   className,
@@ -15,7 +14,6 @@ export function Transaction({
 }: TransactionReact) {
   return (
     <TransactionProvider
-      address={address}
       capabilities={capabilities}
       chainId={chainId}
       contracts={contracts}

diff --git a/src/transaction/components/TransactionButton.test.tsx b/src/transaction/components/TransactionButton.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useChainId } from 'wagmi';
+import { useAccount, useChainId } from 'wagmi';
 import { useShowCallsStatus } from 'wagmi/experimental';
 import { getChainExplorer } from '../../network/getChainExplorer';
 import { TransactionButton } from './TransactionButton';
@@ -12,6 +12,7 @@ vi.mock('./TransactionProvider', () => ({
 
 vi.mock('wagmi', () => ({
   useChainId: vi.fn(),
+  useAccount: vi.fn(),
 }));
 
 vi.mock('wagmi/experimental', () => ({
@@ -25,6 +26,7 @@ vi.mock('../../network/getChainExplorer', () => ({
 describe('TransactionButton', () => {
   beforeEach(() => {
     (useChainId as vi.Mock).mockReturnValue(123);
+    (useAccount as vi.Mock).mockReturnValue({ address: '123' });
     (useShowCallsStatus as vi.Mock).mockReturnValue({
       showCallsStatus: vi.fn(),
     });
@@ -116,7 +118,6 @@ describe('TransactionButton', () => {
 
   it('should enable button when not in progress, not missing props, and not waiting for receipt', () => {
     (useTransactionContext as vi.Mock).mockReturnValue({
-      address: '0x123',
       contracts: {},
       isLoading: false,
       lifeCycleStatus: { statusName: 'init', statusData: null },

diff --git a/src/transaction/components/TransactionButton.tsx b/src/transaction/components/TransactionButton.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { useChainId } from 'wagmi';
+import { useAccount, useChainId } from 'wagmi';
 import { useShowCallsStatus } from 'wagmi/experimental';
 import { Spinner } from '../../internal/components/Spinner';
 import { getChainExplorer } from '../../network/getChainExplorer';
@@ -14,7 +14,6 @@ export function TransactionButton({
   text: buttonText = 'Transact',
 }: TransactionButtonReact) {
   const {
-    address,
     contracts,
     chainId,
     errorMessage,
@@ -26,6 +25,8 @@ export function TransactionButton({
     transactionId,
   } = useTransactionContext();
 
+  const { address } = useAccount();
+
   const accountChainId = chainId ?? useChainId();
   const { showCallsStatus } = useShowCallsStatus();
 

diff --git a/src/transaction/components/TransactionProvider.test.tsx b/src/transaction/components/TransactionProvider.test.tsx
@@ -104,7 +104,7 @@ describe('TransactionProvider', () => {
   it('should emit onError when setLifeCycleStatus is called with error', async () => {
     const onErrorMock = vi.fn();
     render(
-      <TransactionProvider address="0x123" contracts={[]} onError={onErrorMock}>
+      <TransactionProvider contracts={[]} onError={onErrorMock}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -116,11 +116,7 @@ describe('TransactionProvider', () => {
   it('should emit onStatus when setLifeCycleStatus is called with transactionLegacyExecuted', async () => {
     const onStatusMock = vi.fn();
     render(
-      <TransactionProvider
-        address="0x123"
-        contracts={[]}
-        onStatus={onStatusMock}
-      >
+      <TransactionProvider contracts={[]} onStatus={onStatusMock}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -139,11 +135,7 @@ describe('TransactionProvider', () => {
   it('should emit onStatus when setLifeCycleStatus is called', async () => {
     const onStatusMock = vi.fn();
     render(
-      <TransactionProvider
-        address="0x123"
-        contracts={[]}
-        onStatus={onStatusMock}
-      >
+      <TransactionProvider contracts={[]} onStatus={onStatusMock}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -162,7 +154,6 @@ describe('TransactionProvider', () => {
     });
     render(
       <TransactionProvider
-        address="0x123"
         contracts={[{ address: '0x123', method: 'method' }]}
         onSuccess={onSuccessMock}
       >
@@ -186,7 +177,7 @@ describe('TransactionProvider', () => {
       writeContractsAsync: writeContractsAsyncMock,
     });
     render(
-      <TransactionProvider address="0x123" contracts={[]}>
+      <TransactionProvider contracts={[]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -207,7 +198,7 @@ describe('TransactionProvider', () => {
       writeContractsAsync: writeContractsAsyncMock,
     });
     render(
-      <TransactionProvider address="0x123" contracts={[]}>
+      <TransactionProvider contracts={[]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -228,7 +219,7 @@ describe('TransactionProvider', () => {
       writeContractsAsync: writeContractsAsyncMock,
     });
     render(
-      <TransactionProvider address="0x123" contracts={[]}>
+      <TransactionProvider contracts={[]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -248,7 +239,7 @@ describe('TransactionProvider', () => {
       writeContractsAsync: writeContractsAsyncMock,
     });
     render(
-      <TransactionProvider address="0x123" contracts={[]}>
+      <TransactionProvider contracts={[]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -270,7 +261,7 @@ describe('TransactionProvider', () => {
       switchChainAsync: switchChainAsyncMock,
     });
     render(
-      <TransactionProvider address="0x123" chainId={2} contracts={[]}>
+      <TransactionProvider chainId={2} contracts={[]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -287,7 +278,7 @@ describe('TransactionProvider', () => {
       writeContractsAsync: vi.fn().mockRejectedValue(new Error('Test error')),
     });
     render(
-      <TransactionProvider address="0x123" contracts={[]}>
+      <TransactionProvider contracts={[]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -302,7 +293,7 @@ describe('TransactionProvider', () => {
   it('should not fetch receipts if contract list is empty', async () => {
     const waitForTransactionReceiptMock = vi.fn();
     render(
-      <TransactionProvider address="0x123" contracts={[]}>
+      <TransactionProvider contracts={[]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -322,7 +313,7 @@ describe('TransactionProvider', () => {
       writeContractsAsync: writeContractsAsyncMock,
     });
     render(
-      <TransactionProvider address="0x123" contracts={[]}>
+      <TransactionProvider contracts={[]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -341,7 +332,7 @@ describe('TransactionProvider', () => {
     });
     (useAccount as ReturnType<typeof vi.fn>).mockReturnValue({ chainId: 1 });
     render(
-      <TransactionProvider address="0x123" chainId={2} contracts={[]}>
+      <TransactionProvider chainId={2} contracts={[]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -362,11 +353,11 @@ describe('TransactionProvider', () => {
       writeContractsAsync: writeContractsAsyncMock,
     });
     (useWriteContract as ReturnType<typeof vi.fn>).mockReturnValue({
-      status: 'IDLE',
+      status: 'idle',
       writeContractAsync: writeContractAsyncMock,
     });
     render(
-      <TransactionProvider address="0x123" contracts={[{}]}>
+      <TransactionProvider contracts={[{}]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -389,11 +380,11 @@ describe('TransactionProvider', () => {
       writeContractsAsync: writeContractsAsyncMock,
     });
     (useWriteContract as ReturnType<typeof vi.fn>).mockReturnValue({
-      status: 'IDLE',
+      status: 'idle',
       writeContractAsync: writeContractAsyncMock,
     });
     render(
-      <TransactionProvider address="0x123" contracts={[{}]}>
+      <TransactionProvider contracts={[{}]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -421,11 +412,11 @@ describe('TransactionProvider', () => {
       writeContractsAsync: writeContractsAsyncMock,
     });
     (useWriteContract as ReturnType<typeof vi.fn>).mockReturnValue({
-      status: 'IDLE',
+      status: 'idle',
       writeContractAsync: writeContractAsyncMock,
     });
     render(
-      <TransactionProvider address="0x123" contracts={[{}]}>
+      <TransactionProvider contracts={[{}]}>
         <TestComponent />
       </TransactionProvider>,
     );
@@ -440,6 +431,38 @@ describe('TransactionProvider', () => {
       );
     });
   });
+
+  it('should call setLifeCycleStatus when calling fallbackToWriteContract when user rejects request', async () => {
+    const writeContractsAsyncMock = vi
+      .fn()
+      .mockRejectedValue(new Error(METHOD_NOT_SUPPORTED_ERROR_SUBSTRING));
+    const writeContractAsyncMock = vi
+      .fn()
+      .mockRejectedValue({ cause: { name: 'UserRejectedRequestError' } });
+    (useWriteContracts as ReturnType<typeof vi.fn>).mockReturnValue({
+      status: 'idle',
+      writeContractsAsync: writeContractsAsyncMock,
+    });
+    (useWriteContract as ReturnType<typeof vi.fn>).mockReturnValue({
+      status: 'idle',
+      writeContractAsync: writeContractAsyncMock,
+    });
+    render(
+      <TransactionProvider contracts={[{}]}>
+        <TestComponent />
+      </TransactionProvider>,
+    );
+    const button = screen.getByText('Submit');
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(screen.getByTestId('context-value-errorCode').textContent).toBe(
+        'TmTPc02',
+      );
+      expect(screen.getByTestId('context-value-errorMessage').textContent).toBe(
+        'Request denied.',
+      );
+    });
+  });
 });
 
 describe('useTransactionContext', () => {

diff --git a/src/transaction/components/TransactionProvider.tsx b/src/transaction/components/TransactionProvider.tsx
@@ -43,7 +43,6 @@ export function useTransactionContext() {
 }
 
 export function TransactionProvider({
-  address,
   capabilities,
   chainId,
   children,
@@ -256,7 +255,6 @@ export function TransactionProvider({
   ]);
 
   const value = useValue({
-    address,
     chainId,
     contracts,
     errorCode,