Skip to content

Commit 5c2f5cf

Browse files
author
dschlabach
committed
Merge branch 'main' into dms/linking
2 parents 4f00bea + 880c6cc commit 5c2f5cf

39 files changed

+877
-682
lines changed

‎package.json

+2-4
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,9 @@
4141
"clsx": "^2.1.1",
4242
"graphql": "^14 || ^15 || ^16",
4343
"graphql-request": "^6.1.0",
44-
"permissionless": "^0.1.29",
4544
"tailwind-merge": "^2.3.0",
46-
"viem": "^2.17.4",
47-
"wagmi": "^2.11.0"
45+
"viem": "^2.21.33",
46+
"wagmi": "^2.12.24"
4847
},
4948
"devDependencies": {
5049
"@biomejs/biome": "1.8.3",
@@ -73,7 +72,6 @@
7372
"graphql-request": "^6.1.0",
7473
"jsdom": "^24.1.0",
7574
"packemon": "3.3.1",
76-
"permissionless": "^0.1.29",
7775
"react": "^18",
7876
"react-dom": "^18",
7977
"rimraf": "^5.0.5",

‎playground/nextjs-app-router/bun.lockb

-25.7 KB
Binary file not shown.

‎playground/nextjs-app-router/components/demo/Transaction.tsx

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { clickCalls, clickContracts } from '@/lib/transactions';
1+
import {
2+
clickCalls,
3+
clickContracts,
4+
heterogeneousClickCalls,
5+
} from '@/lib/transactions';
26
import type { Call } from '@/onchainkit/esm/transaction/types';
37
import type { LifecycleStatus } from '@/onchainkit/src/transaction';
48
import { TransactionTypes } from '@/types/onchainkit';
@@ -66,6 +70,12 @@ function TransactionDemo() {
6670
case TransactionTypes.Contracts:
6771
console.log('Playground.Transaction.contracts:', contracts);
6872
break;
73+
case TransactionTypes.ContractsAndCalls:
74+
console.log(
75+
'Playground.Transaction.contractsAndCalls:',
76+
heterogeneousClickCalls,
77+
);
78+
break;
6979
default:
7080
console.log(`Playground.Transaction.${transactionType}`);
7181
break;
@@ -75,31 +85,21 @@ function TransactionDemo() {
7585
const transactions = useMemo(() => {
7686
switch (transactionType) {
7787
case TransactionTypes.Calls:
78-
return {
79-
calls,
80-
contracts: undefined,
81-
};
88+
return calls;
8289
case TransactionTypes.Contracts:
83-
return {
84-
calls: undefined,
85-
contracts,
86-
};
90+
return contracts;
8791
case TransactionTypes.CallsPromise:
88-
return {
89-
calls: promiseCalls,
90-
contracts: undefined,
91-
};
92+
return promiseCalls;
9293
case TransactionTypes.ContractsPromise:
93-
return {
94-
contracts: promiseContracts,
95-
calls: undefined,
96-
};
94+
return promiseContracts;
9795
case TransactionTypes.CallsCallback:
98-
return { calls: callsCallback, contracts: undefined };
96+
return callsCallback;
9997
case TransactionTypes.ContractsCallback:
100-
return { calls: undefined, contracts: contractsCallback };
98+
return contractsCallback;
99+
case TransactionTypes.ContractsAndCalls:
100+
return heterogeneousClickCalls;
101101
default:
102-
return { calls, contracts: undefined };
102+
return calls;
103103
}
104104
}, [
105105
calls,
@@ -115,9 +115,9 @@ function TransactionDemo() {
115115
<div className="mx-auto grid w-1/2 gap-8">
116116
<Transaction
117117
chainId={chainId ?? 84532} // something breaks if we don't have default network?
118-
{...transactions}
119118
isSponsored={isSponsored}
120119
onStatus={handleOnStatus}
120+
calls={transactions}
121121
>
122122
<TransactionButton
123123
text="Click"

‎playground/nextjs-app-router/components/demo/TransactionDefault.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { useCapabilities } from '@/lib/hooks';
22
import { clickCalls, clickContracts } from '@/lib/transactions';
33
import { TransactionTypes } from '@/types/onchainkit';
4-
import { TransactionDefault } from '@coinbase/onchainkit/transaction';
4+
import {
5+
type LifecycleStatus,
6+
TransactionDefault,
7+
} from '@coinbase/onchainkit/transaction';
58
import { useCallback, useContext, useEffect } from 'react';
69
import { AppContext } from '../AppProvider';
710

@@ -13,7 +16,7 @@ export default function TransactionDefaultDemo() {
1316
useEffect(() => {
1417
console.log('Playground.Transaction.chainId:', chainId);
1518
}, [chainId]);
16-
const handleOnStatus = useCallback((status) => {
19+
const handleOnStatus = useCallback((status: LifecycleStatus) => {
1720
console.log('Playground.Transaction.onStatus:', status);
1821
}, []);
1922

@@ -32,7 +35,7 @@ export default function TransactionDefaultDemo() {
3235
chainId={chainId ?? 84532} // something breaks if we don't have default network?
3336
{...(transactionType === TransactionTypes.Calls
3437
? { calls }
35-
: { contracts })}
38+
: { calls: contracts })}
3639
capabilities={capabilities}
3740
onStatus={handleOnStatus}
3841
disabled={!chainId && !transactionType}

‎playground/nextjs-app-router/components/form/transaction-options.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ export function TransactionOptions() {
4040
<SelectItem value={TransactionTypes.ContractsCallback}>
4141
Contracts Callback
4242
</SelectItem>
43+
<SelectItem value={TransactionTypes.ContractsAndCalls}>
44+
Contracts and Calls
45+
</SelectItem>
4346
</SelectContent>
4447
</Select>
4548
</div>

‎playground/nextjs-app-router/lib/transactions.ts

+23
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,26 @@ export const clickCalls = [
3535
to: deployedContracts[85432].click,
3636
},
3737
];
38+
39+
export const heterogeneousClickCalls = [
40+
{
41+
data: encodeFunctionData({
42+
abi: clickAbi,
43+
functionName: 'click',
44+
args: [],
45+
}),
46+
to: deployedContracts[85432].click,
47+
},
48+
{
49+
address: deployedContracts[85432].click,
50+
abi: clickAbi,
51+
functionName: 'click',
52+
args: [],
53+
},
54+
{
55+
address: deployedContracts[85432].click,
56+
abi: clickAbi,
57+
functionName: 'click',
58+
args: [],
59+
},
60+
];

‎playground/nextjs-app-router/package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,12 @@
3535
"graphql-request": "^6.1.0",
3636
"lucide-react": "^0.416.0",
3737
"next": "^14.2.5",
38-
"permissionless": "^0.1.29",
3938
"react": "^18",
4039
"react-dom": "^18",
4140
"tailwind-merge": "^2.4.0",
4241
"tailwindcss-animate": "^1.0.7",
43-
"viem": "^2.17.4",
44-
"wagmi": "^2.11.0"
42+
"viem": "^2.21.33",
43+
"wagmi": "^2.12.24"
4544
},
4645
"devDependencies": {
4746
"@types/node": "^20",

‎playground/nextjs-app-router/types/onchainkit.ts

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export enum TransactionTypes {
2222
ContractsPromise = 'contractsPromise',
2323
CallsCallback = 'callsCallback',
2424
ContractsCallback = 'contractsCallback',
25+
ContractsAndCalls = 'contractsAndCalls',
2526
}
2627

2728
export type Paymaster = {

‎site/docs/components/landing/CheckoutDemo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const checkoutDemoCode = `
1717
</Checkout>
1818
)
1919
}
20-
`;
20+
`;
2121

2222
const GITHUB_LINK = 'https://github.com/coinbase/onchain-commerce-template';
2323

‎site/docs/components/landing/ComponentPreview.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ function PreviewContainer({
224224
</button>
225225
)}
226226
</div>
227-
<div className="flex overflow-auto py-6">
227+
<div className="flex overflow-auto">
228228
<div
229229
className={`${
230230
activeSubTab === 'preview' ? 'flex' : 'hidden'

‎site/docs/components/landing/FundDemo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const fundDemoCode = `
3434
</>
3535
)
3636
}
37-
`;
37+
`;
3838

3939
function FundDemo() {
4040
return (

‎site/docs/components/landing/IdentityDemo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const identityDemoCode = `
3030
</Identity>
3131
)
3232
}
33-
`;
33+
`;
3434

3535
function IdentityDemo() {
3636
return (

‎site/docs/components/landing/NftMintCardDemo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const nftMintCardDemoCode = `
1212
/>
1313
)
1414
}
15-
`;
15+
`;
1616

1717
export default function NftMintCardDemo() {
1818
return (

‎site/docs/components/landing/SwapDemo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const swapDemoCode = `
4343
/>
4444
);
4545
}
46-
`;
46+
`;
4747

4848
function SwapDemo() {
4949
return (

‎site/docs/components/landing/TransactionDemo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const transactionDemoCode = `
4747
</>
4848
);
4949
}
50-
`;
50+
`;
5151

5252
function TransactionDemo() {
5353
return (

‎site/docs/components/landing/WalletDemo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const walletDemoCode = `
3838
function WalletDefaultDemo() {
3939
return <WalletDefault />
4040
}
41-
`;
41+
`;
4242

4343
function WalletDemo() {
4444
return (

‎src/OnchainKitProvider.test.tsx

+52-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,38 @@ import '@testing-library/jest-dom';
22
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
33
import { render, screen, waitFor } from '@testing-library/react';
44
import { base } from 'viem/chains';
5-
import { describe, expect, it, vi } from 'vitest';
5+
import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
66
import { http, WagmiProvider, createConfig } from 'wagmi';
7+
import { useConfig } from 'wagmi';
78
import { mock } from 'wagmi/connectors';
89
import { setOnchainKitConfig } from './OnchainKitConfig';
910
import { OnchainKitProvider } from './OnchainKitProvider';
1011
import { COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID } from './identity/constants';
1112
import type { EASSchemaUid } from './identity/types';
1213
import { useOnchainKit } from './useOnchainKit';
14+
import { useProviderDependencies } from './useProviderDependencies';
15+
16+
vi.mock('wagmi', async (importOriginal) => {
17+
const actual = await importOriginal();
18+
return {
19+
...actual,
20+
useConfig: vi.fn(),
21+
};
22+
});
23+
24+
vi.mock('./useProviderDependencies', () => ({
25+
useProviderDependencies: vi.fn(() => ({
26+
providedWagmiConfig: null,
27+
providedQueryClient: null,
28+
})),
29+
}));
30+
31+
vi.mock('./useProviderDependencies', () => ({
32+
useProviderDependencies: vi.fn(() => ({
33+
providedWagmiConfig: null,
34+
providedQueryClient: null,
35+
})),
36+
}));
1337

1438
const queryClient = new QueryClient();
1539
const mockConfig = createConfig({
@@ -51,8 +75,17 @@ describe('OnchainKitProvider', () => {
5175
const apiKey = 'test-api-key';
5276
const paymasterUrl =
5377
'https://api.developer.coinbase.com/rpc/v1/base/test-api-key';
54-
const appLogo = undefined;
55-
const appName = undefined;
78+
const appLogo = '';
79+
const appName = 'Dapp';
80+
81+
beforeEach(() => {
82+
vi.clearAllMocks();
83+
(useConfig as Mock).mockReturnValue(mockConfig);
84+
(useProviderDependencies as Mock).mockReturnValue({
85+
providedWagmiConfig: mockConfig,
86+
providedQueryClient: queryClient,
87+
});
88+
});
5689

5790
it('provides the context value correctly', async () => {
5891
render(
@@ -71,6 +104,22 @@ describe('OnchainKitProvider', () => {
71104
});
72105
});
73106

107+
it('provides the context value correctly without WagmiProvider', async () => {
108+
(useProviderDependencies as Mock).mockReturnValue({
109+
providedWagmiConfig: null,
110+
providedQueryClient: null,
111+
});
112+
render(
113+
<OnchainKitProvider chain={base} schemaId={schemaId} apiKey={apiKey}>
114+
<TestComponent />
115+
</OnchainKitProvider>,
116+
);
117+
await waitFor(() => {
118+
expect(screen.getByText(schemaId)).toBeInTheDocument();
119+
expect(screen.getByText(apiKey)).toBeInTheDocument();
120+
});
121+
});
122+
74123
it('throws an error if schemaId does not meet the required length', () => {
75124
expect(() => {
76125
render(

0 commit comments

Comments
 (0)