Skip to content

Commit bd44ce9

Browse files
joaquim-vergesjoaquim-verges
authored
chore(thirdweb): better TSdocs + more exports (#3869)
1 parent 109575e commit bd44ce9

File tree

13 files changed

+636
-26
lines changed

13 files changed

+636
-26
lines changed

‎.changeset/odd-colts-love.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Export more wallet creation and connection types

‎packages/thirdweb/src/adapters/wallet-adapter.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,18 @@ export type AdapterWalletOptions = {
1212
};
1313

1414
/**
15-
* Creates a wallet from the given adapted account. Use this to convert a third party library wallet into a thirdweb wallet.
15+
* Creates a wallet from the given account.
16+
*
17+
* You can use this to:
18+
*
19+
* - convert a third party library wallet (wagmi, viem, ethers) into a thirdweb wallet.
20+
* - connect with a private key (for automated tests)
21+
*
22+
* Available wallet adatpers:
23+
* - [Viem](https://portal.thirdweb.com/references/typescript/v5/viemAdapter)
24+
* - [Ethers 6](https://portal.thirdweb.com/references/typescript/v5/ethers6Adapter)
25+
* - [Ethers 5](https://portal.thirdweb.com/references/typescript/v5/ethers5Adapter)
26+
*
1627
* @param options - The options for the adapter wallet.
1728
* @returns a wallet instance.
1829
*

‎packages/thirdweb/src/exports/wallets.native.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ export type {
4242
WalletCreationOptions,
4343
WalletConnectionOption,
4444
CreateWalletArgs,
45+
InjectedConnectOptions,
46+
DeepLinkSupportedWalletCreationOptions,
47+
StandaloneWCConnectOptions,
4548
} from "../wallets/wallet-types.js";
4649

4750
export type {
@@ -82,7 +85,10 @@ export type {
8285
InAppWalletSocialAuth as EmbeddedWalletSocialAuth,
8386
} from "../wallets/in-app/core/wallet/types.js";
8487

85-
export type { CoinbaseSDKWalletConnectionOptions } from "../wallets/coinbase/coinbaseWebSDK.js";
88+
export type {
89+
CoinbaseWalletCreationOptions,
90+
CoinbaseSDKWalletConnectionOptions,
91+
} from "../wallets/coinbase/coinbaseWebSDK.js";
8692

8793
export type {
8894
WalletEmitter,
@@ -94,6 +100,7 @@ export { getWalletInfo } from "../wallets/__generated__/getWalletInfo.js";
94100
export { type WalletInfo } from "../wallets/wallet-info.js";
95101

96102
export { createWalletAdapter } from "../adapters/wallet-adapter.js";
103+
export type { AdapterWalletOptions } from "../adapters/wallet-adapter.js";
97104

98105
// wallet connect
99106
export {

‎packages/thirdweb/src/exports/wallets.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ export {
1212
inAppWallet as embeddedWallet,
1313
} from "../wallets/in-app/web/in-app.js";
1414
export { ecosystemWallet } from "../wallets/in-app/web/ecosystem.js";
15+
export type {
16+
EcosystemWalletCreationOptions,
17+
EcosystemWalletConnectionOptions,
18+
EcosystemWalletAutoConnectOptions,
19+
} from "../wallets/ecosystem/types.js";
1520
export { smartWallet } from "../wallets/smart/smart-wallet.js";
1621

1722
export type { Wallet, Account } from "../wallets/interfaces/wallet.js";
@@ -49,6 +54,9 @@ export type {
4954
WalletCreationOptions,
5055
WalletConnectionOption,
5156
CreateWalletArgs,
57+
InjectedConnectOptions,
58+
DeepLinkSupportedWalletCreationOptions,
59+
StandaloneWCConnectOptions,
5260
} from "../wallets/wallet-types.js";
5361

5462
export type {
@@ -89,7 +97,10 @@ export type {
8997
InAppWalletSocialAuth as EmbeddedWalletSocialAuth,
9098
} from "../wallets/in-app/core/wallet/types.js";
9199

92-
export type { CoinbaseSDKWalletConnectionOptions } from "../wallets/coinbase/coinbaseWebSDK.js";
100+
export type {
101+
CoinbaseWalletCreationOptions,
102+
CoinbaseSDKWalletConnectionOptions,
103+
} from "../wallets/coinbase/coinbaseWebSDK.js";
93104

94105
export type {
95106
WalletEmitter,
@@ -101,6 +112,7 @@ export { getWalletInfo } from "../wallets/__generated__/getWalletInfo.js";
101112
export { type WalletInfo } from "../wallets/wallet-info.js";
102113

103114
export { createWalletAdapter } from "../adapters/wallet-adapter.js";
115+
export type { AdapterWalletOptions } from "../adapters/wallet-adapter.js";
104116

105117
// wallet connect
106118
export {

‎packages/thirdweb/src/exports/wallets/in-app.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ export {
1010
} from "../../wallets/in-app/web/lib/auth/index.js";
1111

1212
export { type GetAuthenticatedUserParams } from "../../wallets/in-app/core/authentication/type.js";
13+
export type {
14+
InAppWalletCreationOptions,
15+
InAppWalletAuth,
16+
InAppWalletSocialAuth,
17+
InAppWalletConnectionOptions,
18+
} from "../../wallets/in-app/core/wallet/types.js";
1319

1420
export { hasStoredPasskey } from "../../wallets/in-app/web/lib/auth/passkeys.js";
1521

‎packages/thirdweb/src/react/web/ui/AutoConnect/AutoConnect.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
99
* Note: If you are using `ConnectButton` or `ConnectEmbed` components, You don't need to use this component as it is already included.
1010
*
1111
* This is useful if you are manually connecting the wallets using the [`useConnect`](https://portal.thirdweb.com/references/typescript/v5/useConnect) hook and want to auto connect the last connected wallets on page reload or revisit.
12+
*
13+
* You can also use the [`useAutoConnect`](https://portal.thirdweb.com/references/typescript/v5/useAutoConnect) hook to achieve the same result.
14+
*
15+
* To check if the wallet in in the process of auto connecting, you can use the [`useIsAutoConnecting`](https://portal.thirdweb.com/references/typescript/v5/useIsAutoConnecting) hook.
16+
*
1217
* @param props - Object of type `AutoConnectProps`. Refer to [`AutoConnectProps`](https://portal.thirdweb.com/references/typescript/v5/AutoConnectProps)
1318
* @example
1419
* ```tsx

‎packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx

Lines changed: 196 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,212 @@ import { SignatureScreen } from "./screens/SignatureScreen.js";
3333
const TW_CONNECT_WALLET = "tw-connect-wallet";
3434

3535
/**
36-
* A component that allows the user to connect their wallet.
37-
* It renders a button which when clicked opens a modal to allow users to connect to wallets specified in `wallets` prop.
36+
* A fully featured wallet connection component that allows to:
37+
*
38+
* - Connect to 350+ external wallets
39+
* - Connect with email, phone, passkey or socials
40+
* - Convert any wallet to a ERC4337 smart wallet for gasless transactions
41+
* - Sign in with ethereum (Auth)
42+
*
43+
* Once connected, the component allows to:
44+
*
45+
* - Reolve ENS names and avatars
46+
* - Manage multipple connected wallets
47+
* - Send and receive native tokens and ERC20 tokens
48+
* - View ERC20 tokens and NFTs
49+
* - Onramp, bridge and swap tokens
50+
* - Switch chains
51+
* - Connect to another app with WalletConnect
52+
*
3853
* @example
54+
*
55+
* ## Default setup
56+
*
3957
* ```tsx
58+
* import { createThirdwebClient } from "thirdweb";
59+
* import { ConnectButton } from "thirdweb/react";
60+
*
61+
* const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
62+
*
4063
* <ConnectButton
4164
* client={client}
4265
* />
4366
* ```
67+
*
68+
* [View all available config options](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps)
69+
*
70+
* ## Customization options
71+
*
72+
* ### Customizing wallet options
73+
*
74+
* ```tsx
75+
* <ConnectButton
76+
* client={client}
77+
* wallets={[
78+
* createWallet("io.metamask"),
79+
* createWallet("com.coinbase.wallet"),
80+
* createWallet("me.rainbow"),
81+
* ]}
82+
* />
83+
* ```
84+
*
85+
* [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
86+
*
87+
* ### Customizing the default chain to connect to
88+
*
89+
* ```tsx
90+
* import { base } from "thirdweb/chains";
91+
*
92+
* <ConnectButton
93+
* client={client}
94+
* chain={base}
95+
* />
96+
* ```
97+
*
98+
* ### Enabling sign in with ethereum (Auth)
99+
*
100+
* ```tsx
101+
* <ConnectButton
102+
* client={client}
103+
* auth={{
104+
* isLoggedIn: async (address) => {
105+
* console.log("checking if logged in!", { address });
106+
* return await isLoggedIn();
107+
* },
108+
* doLogin: async (params) => {
109+
* console.log("logging in!");
110+
* await login(params);
111+
* },
112+
* getLoginPayload: async ({ address }) =>
113+
* generatePayload({ address }),
114+
* doLogout: async () => {
115+
* console.log("logging out!");
116+
* await logout();
117+
* },
118+
* }}
119+
* />;
120+
* ```
121+
*
122+
* ### Customizing the theme
123+
*
124+
* ```tsx
125+
* <ConnectButton
126+
* client={client}
127+
* theme="light"
128+
* />
129+
* ```
130+
*
131+
* For more granular control, you can also pass a custom theme object:
132+
*
133+
* ```tsx
134+
* <ConnectButton
135+
* client={client}
136+
* theme={lightTheme({
137+
* colors: {
138+
* modalBg: "red",
139+
* },
140+
* })}
141+
* />
142+
* ```
143+
*
144+
* [View all available themes properties](https://portal.thirdweb.com/references/typescript/v5/Theme)
145+
*
146+
* ### Changing the display language
147+
*
148+
* ```tsx
149+
* <ConnectEmbed
150+
* client={client}
151+
* locale="ja_JP"
152+
* />
153+
* ```
154+
*
155+
* [View all available locales](https://portal.thirdweb.com/references/typescript/v5/LocaleId)
156+
*
157+
* ### Customizing the connect button UI
158+
*
159+
* ```tsx
160+
* <ConnectButton
161+
* client={client}
162+
* connectButton={{
163+
* label: "Sign in to MyApp",
164+
* }}
165+
* />
166+
* ```
167+
*
168+
* ### Customizing the modal UI
169+
*
170+
* ```tsx
171+
* <ConnectButton
172+
* client={client}
173+
* connectModal={{
174+
* title: "Sign in to MyApp",
175+
* titleIcon: https://example.com/logo.png,
176+
* size: "compact",
177+
* }}
178+
* />
179+
* ```
180+
*
181+
* ### Customizing details button UI (after connecting)
182+
*
183+
* ```tsx
184+
* <ConnectButton
185+
* client={client}
186+
* detailsButton={{
187+
* displayBalanceToken: {
188+
* [sepolia.id]: "0x...", // token address to display balance for
189+
* [ethereum.id]: "0x...", // token address to display balance for
190+
* },
191+
* }}
192+
* />
193+
* ```
194+
*
195+
* [View all available auth helper functions](https://portal.thirdweb.com/references/typescript/v5/createAuth)
196+
*
197+
* ### Customizing the Auth sign in button (after connecting, but before authenticating)
198+
*
199+
* ```tsx
200+
* <ConnectButton
201+
* client={client}
202+
* auth={{ ... }}
203+
* signInButton: {
204+
* label: "Authenticate with MyApp",
205+
* },
206+
* }}
207+
* />;
208+
* ```
209+
*
210+
* ### Customizing supported Tokens and NFTs
211+
*
212+
* These tokens and NFTs will be shown in the modal when the user clicks "View Assets", as well as the send token screen.
213+
*
214+
* ```tsx
215+
* <ConnectButton
216+
* client={client}
217+
* supportedTokens={{
218+
* [ethereum.id]: [
219+
* {
220+
* address: "0x...",
221+
* name: "MyToken",
222+
* symbol: "MT",
223+
* icon: "https://example.com/icon.png",
224+
* },
225+
* ],
226+
* }}
227+
* supportedNFTs={{
228+
* [ethereum.id]: [
229+
* "0x...", // nft contract address
230+
* ],
231+
* }}
232+
* />
233+
* ```
234+
*
44235
* @param props
45236
* Props for the `ConnectButton` component
46237
*
47238
* Refer to [ConnectButtonProps](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps) to see the available props.
239+
*
240+
* @returns A JSX element that renders the <ConnectButton> component.
241+
*
48242
* @component
49243
*/
50244
export function ConnectButton(props: ConnectButtonProps) {

0 commit comments

Comments
 (0)