Skip to content

Commit e079dc8

Browse files
cpcramercpcramer
committed
Add WalletModal
1 parent 766712c commit e079dc8

18 files changed

+367
-16767
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"dependencies": {
3939
"@rainbow-me/rainbowkit": "^2.1.3",
4040
"@tanstack/react-query": "^5",
41+
"@walletconnect/modal": "^2.7.0",
4142
"clsx": "^2.1.1",
4243
"graphql": "^14 || ^15 || ^16",
4344
"graphql-request": "^6.1.0",

‎playground/nextjs-app-router/components/AppProvider.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,11 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
228228
theme: componentTheme === 'none' ? undefined : componentTheme,
229229
},
230230
paymaster: paymasters?.[chainId || 8453]?.url,
231+
wallet: {
232+
display: 'modal',
233+
termsUrl: 'https://www.coinbase.com/legal/privacy', // URL to the terms of service for the wallet modal
234+
privacyUrl: 'https://www.coinbase.com/legal/cookie', // URL to the privacy policy for the wallet modal
235+
},
231236
}}
232237
projectId={ENVIRONMENT_VARIABLES[ENVIRONMENT.PROJECT_ID]}
233238
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"

‎playground/nextjs-app-router/components/OnchainProviders.tsx

+16-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { ReactNode } from 'react';
66
import { http, createConfig } from 'wagmi';
77
import { WagmiProvider } from 'wagmi';
88
import { base, baseSepolia } from 'wagmi/chains';
9-
import { coinbaseWallet } from 'wagmi/connectors';
9+
import { coinbaseWallet, walletConnect } from 'wagmi/connectors';
1010

1111
export const config = createConfig({
1212
chains: [base, baseSepolia],
@@ -24,6 +24,16 @@ export const config = createConfig({
2424
appName: 'OnchainKit',
2525
preference: 'eoaOnly',
2626
}),
27+
walletConnect({
28+
projectId: ENVIRONMENT_VARIABLES[ENVIRONMENT.WALLETCONNECT_PROJECT_ID] ?? '',
29+
showQrModal: true,
30+
metadata: {
31+
name: 'Onchainkit',
32+
description: 'build onchain',
33+
url: 'https://onchainkit.xyz/',
34+
icons: [],
35+
},
36+
}),
2737
],
2838
});
2939

@@ -43,6 +53,11 @@ function OnchainProviders({ children }: { children: ReactNode }) {
4353
mode: 'auto',
4454
theme: 'default',
4555
},
56+
wallet: {
57+
display: 'modal',
58+
termsUrl: 'https://www.coinbase.com/legal/privacy', // URL to the terms of service for the wallet modal
59+
privacyUrl: 'https://www.coinbase.com/legal/cookie', // URL to the privacy policy for the wallet modal
60+
},
4661
}}
4762
projectId={ENVIRONMENT_VARIABLES[ENVIRONMENT.PROJECT_ID]}
4863
schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"

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

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const ENVIRONMENT = {
1313
API_KEY: 'API_KEY',
1414
ENVIRONMENT: 'ENVIRONMENT',
1515
PROJECT_ID: 'PROJECT_ID',
16+
WALLETCONNECT_PROJECT_ID: 'WALLETCONNECT_PROJECT_ID',
1617
RESERVOIR_API_KEY: 'RESERVOIR_API_KEY',
1718
} as const;
1819

@@ -23,5 +24,7 @@ export const ENVIRONMENT_VARIABLES: Record<EnvironmentKey, string | undefined> =
2324
[ENVIRONMENT.API_KEY]: process.env.NEXT_PUBLIC_OCK_API_KEY,
2425
[ENVIRONMENT.ENVIRONMENT]: process.env.NEXT_PUBLIC_VERCEL_ENV,
2526
[ENVIRONMENT.PROJECT_ID]: process.env.NEXT_PUBLIC_PROJECT_ID,
27+
[ENVIRONMENT.WALLETCONNECT_PROJECT_ID]:
28+
process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
2629
[ENVIRONMENT.RESERVOIR_API_KEY]: process.env.NEXT_PUBLIC_RESERVOIR_API_KEY,
2730
};

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

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"dependencies": {
3939
"@rainbow-me/rainbowkit": "^2.1.3",
4040
"@tanstack/react-query": "^5",
41+
"@walletconnect/modal": "^2.7.0",
4142
"clsx": "^2.1.1",
4243
"graphql": "^14 || ^15 || ^16",
4344
"graphql-request": "^6.1.0",

‎src/OnchainKitConfig.ts

+6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { baseSepolia } from 'viem/chains';
2+
import { DEFAULT_PRIVACY_URL, DEFAULT_TERMS_URL } from './constants';
23
import type { OnchainKitConfig, SetOnchainKitConfig } from './types';
34

45
// The ONCHAIN_KIT_CONFIG is not exported at index.ts,
@@ -15,6 +16,11 @@ export const ONCHAIN_KIT_CONFIG: OnchainKitConfig = {
1516
theme: null,
1617
},
1718
paymaster: null,
19+
wallet: {
20+
display: null,
21+
termsUrl: DEFAULT_TERMS_URL,
22+
privacyUrl: DEFAULT_PRIVACY_URL,
23+
},
1824
},
1925
rpcUrl: null,
2026
schemaId: null,

‎src/OnchainKitProvider.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ export function OnchainKitProvider({
4747
theme: config?.appearance?.theme ?? 'default',
4848
},
4949
paymaster: config?.paymaster || defaultPaymasterUrl,
50+
wallet: {
51+
display: config?.wallet?.display ?? 'classic',
52+
termsUrl: config?.wallet?.termsUrl,
53+
privacyUrl: config?.wallet?.privacyUrl,
54+
},
5055
},
5156
projectId: projectId ?? null,
5257
rpcUrl: rpcUrl ?? null,

‎src/constants.ts

+2
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@ export enum Capabilities {
44
AuxiliaryFunds = 'auxiliaryFunds',
55
PaymasterService = 'paymasterService',
66
}
7+
export const DEFAULT_PRIVACY_URL = 'https://base.org/privacy-policy';
8+
export const DEFAULT_TERMS_URL = 'https://base.org/terms-of-service';

‎src/internal/svg/closeSvg.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { icon } from '../../styles/theme';
33
export const closeSvg = (
44
<svg
55
aria-label="ock-closeSvg"
6-
width="16"
7-
height="16"
6+
width="12"
7+
height="12"
88
viewBox="0 0 16 16"
99
fill="none"
1010
xmlns="http://www.w3.org/2000/svg"

‎src/internal/svg/coinbaseWalletSvg.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export const coinbaseWalletSvg = (
2+
<svg
3+
width="100%"
4+
height="100%"
5+
viewBox="0 0 146 146"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<rect width="146" height="146" fill="#0052FF" />
10+
<path
11+
fill-rule="evenodd"
12+
clip-rule="evenodd"
13+
d="M21.9 73C21.9 102.053 45.1466 125.3 74.2 125.3C103.253 125.3 126.5 102.053 126.5 73C126.5 43.9466 103.253 20.7 74.2 20.7C45.1466 20.7 21.9 43.9466 21.9 73ZM60.5 54.75C58.5673 54.75 57 56.3173 57 58.25V87.75C57 89.6827 58.5673 91.25 60.5 91.25H87.9C89.8327 91.25 91.4 89.6827 91.4 87.75V58.25C91.4 56.3173 89.8327 54.75 87.9 54.75H60.5Z"
14+
fill="white"
15+
/>
16+
</svg>
17+
);

‎src/internal/svg/walletConnectSvg.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export const walletConnectSvg = (
2+
<svg
3+
width="16"
4+
height="16"
5+
viewBox="0 0 16 16"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<mask
10+
id="mask0_1630_9125"
11+
style={{ maskType: 'luminance' }}
12+
maskUnits="userSpaceOnUse"
13+
x="0"
14+
y="0"
15+
width="16"
16+
height="16"
17+
>
18+
<path d="M0 0H16V16H0V0Z" fill="white" />
19+
</mask>
20+
<g mask="url(#mask0_1630_9125)">
21+
<path
22+
d="M15.5195 8.02002C15.5195 12.1622 12.1617 15.52 8.01953 15.52C3.8774 15.52 0.519531 12.1622 0.519531 8.02002C0.519531 3.87788 3.8774 0.52002 8.01953 0.52002C12.1617 0.52002 15.5195 3.87788 15.5195 8.02002Z"
23+
fill="#3396FF"
24+
stroke="#66B1FF"
25+
/>
26+
<path
27+
d="M4.91197 5.97351C6.6279 4.30017 9.41005 4.30017 11.126 5.97351L11.3325 6.1749C11.4183 6.25855 11.4183 6.39421 11.3325 6.47785L10.6261 7.16678C10.5831 7.2086 10.5136 7.2086 10.4707 7.16678L10.1865 6.88964C8.9894 5.72229 7.04855 5.72229 5.85143 6.88964L5.54707 7.18643C5.50417 7.22825 5.43463 7.22825 5.39173 7.18643L4.68528 6.4975C4.59946 6.41385 4.59946 6.2782 4.68528 6.19455L4.91197 5.97351ZM12.587 7.39824L13.2158 8.01137C13.3016 8.09502 13.3016 8.23068 13.2158 8.31433L10.3807 11.079C10.2949 11.1627 10.1558 11.1627 10.07 11.079L8.05783 9.11685C8.03638 9.09592 8.00161 9.09592 7.98016 9.11685L5.96801 11.079C5.88223 11.1627 5.74312 11.1627 5.65731 11.079L2.82216 8.31429C2.73636 8.23064 2.73636 8.09498 2.82216 8.01133L3.45091 7.3982C3.53671 7.31455 3.67582 7.31455 3.76161 7.3982L5.7738 9.36038C5.79525 9.38131 5.83002 9.38131 5.85147 9.36038L7.86358 7.3982C7.94936 7.31451 8.08847 7.31451 8.17428 7.3982L10.1865 9.36038C10.2079 9.38131 10.2427 9.38131 10.2641 9.36038L12.2763 7.39824C12.3621 7.31455 12.5012 7.31455 12.587 7.39824Z"
28+
fill="white"
29+
/>
30+
</g>
31+
</svg>
32+
);

‎src/styles/theme.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const pressable = {
2121
default:
2222
'cursor-pointer ock-bg-default active:bg-[var(--ock-bg-default-active)] hover:bg-[var(--ock-bg-default-hover)]',
2323
alternate:
24-
'cursor-pointer ock-bg-alternate active:bg-[var(--ock-bg-alternate-active)] hover:[var(--ock-bg-alternate-hover)]',
24+
'cursor-pointer ock-bg-alternate active:bg-[var(--ock-bg-alternate-active)] hover:bg-[var(--ock-bg-alternate-hover)]',
2525
inverse:
2626
'cursor-pointer ock-bg-inverse active:bg-[var(--ock-bg-inverse-active)] hover:bg-[var(--ock-bg-inverse-hover)]',
2727
primary:

‎src/types.ts

+7
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ export type AppConfig = {
1313
theme?: ComponentTheme | null; // Optionally sets the visual style for components
1414
};
1515
paymaster?: string | null; // Paymaster URL for gas sponsorship
16+
wallet?: {
17+
display?: ConnectWalletDisplay | null; // Determines the display style of the wallet modal
18+
termsUrl?: string | null; // URL to the terms of service for the wallet modal
19+
privacyUrl?: string | null; // URL to the privacy policy for the wallet modal
20+
};
1621
};
1722

1823
export type CreateWagmiConfigParams = {
@@ -94,3 +99,5 @@ export type OnchainKitProviderReact = {
9499
export type UseCapabilitiesSafeParams = {
95100
chainId: number;
96101
};
102+
103+
export type ConnectWalletDisplay = 'modal' | 'classic';

‎src/wallet/components/ConnectWallet.tsx

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { ConnectButton as ConnectButtonRainbowKit } from '@rainbow-me/rainbowkit';
21
import { Children, isValidElement, useCallback, useMemo } from 'react';
32
import type { ReactNode } from 'react';
43
import { useEffect, useState } from 'react';
@@ -13,9 +12,11 @@ import {
1312
text as dsText,
1413
pressable,
1514
} from '../../styles/theme';
15+
import { useOnchainKit } from '../../useOnchainKit';
1616
import type { ConnectWalletReact } from '../types';
1717
import { ConnectButton } from './ConnectButton';
1818
import { ConnectWalletText } from './ConnectWalletText';
19+
import { WalletModal } from './WalletModal';
1920
import { useWalletContext } from './WalletProvider';
2021

2122
export function ConnectWallet({
@@ -24,9 +25,10 @@ export function ConnectWallet({
2425
// In a few version we will officially deprecate this prop,
2526
// but for now we will keep it for backward compatibility.
2627
text = 'Connect Wallet',
27-
withWalletAggregator = false,
2828
onConnect,
2929
}: ConnectWalletReact) {
30+
const { config = { wallet: { display: undefined } } } = useOnchainKit();
31+
3032
// Core Hooks
3133
const { isOpen, setIsOpen } = useWalletContext();
3234
const { address: accountAddress, status } = useAccount();
@@ -63,6 +65,10 @@ export function ConnectWallet({
6365
setIsOpen(!isOpen);
6466
}, [isOpen, setIsOpen]);
6567

68+
const handleClose = useCallback(() => {
69+
setIsOpen(false);
70+
}, [setIsOpen]);
71+
6672
// Effects
6773
useEffect(() => {
6874
if (hasClickedConnect && status === 'connected' && onConnect) {
@@ -72,23 +78,17 @@ export function ConnectWallet({
7278
}, [status, hasClickedConnect, onConnect]);
7379

7480
if (status === 'disconnected') {
75-
if (withWalletAggregator) {
81+
if (config?.wallet?.display === 'modal') {
7682
return (
77-
<ConnectButtonRainbowKit.Custom>
78-
{({ openConnectModal }) => (
79-
<div className="flex" data-testid="ockConnectWallet_Container">
80-
<ConnectButton
81-
className={className}
82-
connectWalletText={connectWalletText}
83-
onClick={() => {
84-
openConnectModal();
85-
setHasClickedConnect(true);
86-
}}
87-
text={text}
88-
/>
89-
</div>
90-
)}
91-
</ConnectButtonRainbowKit.Custom>
83+
<div className="flex" data-testid="ockConnectWallet_Container">
84+
<ConnectButton
85+
className={className}
86+
connectWalletText={connectWalletText}
87+
onClick={() => setIsOpen(true)}
88+
text={text}
89+
/>
90+
<WalletModal isOpen={isOpen} onClose={handleClose} />
91+
</div>
9292
);
9393
}
9494
return (

0 commit comments

Comments
 (0)