Skip to content

Commit 007770c

Browse files
authored
feat: add alias for inApp wallet, show ENS in Connect (#2748)
1 parent a92311a commit 007770c

File tree

18 files changed

+135
-23
lines changed

18 files changed

+135
-23
lines changed

.changeset/chilly-poets-tap.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
- Show ENS name and avatar in ConnectButton's Details Modal
6+
7+
- Add wallet ID alias `"embedded"` for `"inApp"` to avoid breaking change
8+
9+
```ts
10+
createWallet("embedded") // supported but deprecated
11+
12+
createWallet("inApp") // recommended
13+
````

.changeset/sour-kids-run.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@thirdweb-dev/react": patch
3+
---
4+
5+
Increase max-height for Connect Modal

.vscode/settings.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,8 @@
55
"quickfix.biome": "explicit",
66
"source.organizeImports.biome": "explicit"
77
},
8-
"typescript.preferences.importModuleSpecifier": "relative"
8+
"typescript.preferences.importModuleSpecifier": "relative",
9+
"[typescriptreact]": {
10+
"editor.defaultFormatter": "biomejs.biome"
11+
}
912
}

legacy_packages/react/src/wallet/ConnectWallet/constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const modalMaxWidthWide = wideModalWidth + "px";
1111
export const wideModalScreenThreshold = wideModalWidth + 40;
1212

1313
export const wideModalMaxHeight = "570px";
14-
export const compactModalMaxHeight = "600px";
14+
export const compactModalMaxHeight = "650px";
1515

1616
export const defaultTheme = "dark";
1717

packages/thirdweb/scripts/wallets/generate.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,10 @@ const customWalletInfos = [
100100
id: "inApp",
101101
name: "In-App Wallet",
102102
},
103+
{
104+
id: "embedded",
105+
name: "In-App Wallet",
106+
},
103107
{
104108
id: "walletConnect",
105109
name: "WalletConnect",
@@ -243,7 +247,7 @@ const walletImports = allSupportedWallets
243247
)
244248
.join("\n");
245249

246-
const customWalletImports = ["smart", "inApp", "walletConnect"]
250+
const customWalletImports = ["smart", "inApp", "walletConnect", "embedded"]
247251
.map(
248252
(walletId) =>
249253
`case "${walletId}": {

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ import { useQuery } from "@tanstack/react-query";
1212
import { useEffect, useState, useSyncExternalStore } from "react";
1313
import type { Chain } from "../../../../chains/types.js";
1414
import { getContract } from "../../../../contract/contract.js";
15+
import { ethereum } from "../../../../exports/chains.js";
16+
import { resolveAvatar } from "../../../../extensions/ens/resolve-avatar.js";
17+
import { resolveName } from "../../../../extensions/ens/resolve-name.js";
1518
import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
1619
import { getUserEmail } from "../../../../wallets/in-app/core/authentication/index.js";
1720
import {
@@ -30,6 +33,7 @@ import {
3033
import { shortenString } from "../../../core/utils/addresses.js";
3134
import { ChainIcon } from "../components/ChainIcon.js";
3235
import { CopyIcon } from "../components/CopyIcon.js";
36+
import { Img } from "../components/Img.js";
3337
import { Modal } from "../components/Modal.js";
3438
import { Skeleton } from "../components/Skeleton.js";
3539
import { Spacer } from "../components/Spacer.js";
@@ -56,6 +60,7 @@ import { NetworkSelectorContent } from "./NetworkSelector.js";
5660
import { onModalUnmount } from "./constants.js";
5761
import type { SupportedTokens } from "./defaultTokens.js";
5862
import { FundsIcon } from "./icons/FundsIcon.js";
63+
import { WalletIcon } from "./icons/WalletIcon.js";
5964
import { SwapScreen } from "./screens/Buy/SwapScreen.js";
6065
import { swapTransactionsStore } from "./screens/Buy/swap/pendingSwapTx.js";
6166
import { ReceiveFunds } from "./screens/ReceiveFunds.js";
@@ -115,7 +120,26 @@ export const ConnectedWalletDetails: React.FC<{
115120
const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
116121
const [isOpen, setIsOpen] = useState(false);
117122

118-
// const ensQuery = useENS();
123+
const ensNameQuery = useQuery({
124+
queryKey: ["ens-name", activeAccount?.address],
125+
enabled: !!activeAccount?.address,
126+
queryFn: () =>
127+
resolveName({
128+
client,
129+
address: activeAccount?.address || "",
130+
resolverChain: ethereum,
131+
}),
132+
});
133+
134+
const ensAvatarQuery = useQuery({
135+
queryKey: ["ens-avatar", ensNameQuery.data],
136+
enabled: !!ensNameQuery.data,
137+
queryFn: async () =>
138+
resolveAvatar({
139+
client,
140+
name: ensNameQuery.data || "",
141+
}),
142+
});
119143

120144
// const [overrideWalletIconUrl, setOverrideWalletIconUrl] = useState<
121145
// string | undefined
@@ -138,7 +162,7 @@ export const ConnectedWalletDetails: React.FC<{
138162
? shortenString(activeAccount.address, false)
139163
: "";
140164

141-
const addressOrENS = shortAddress;
165+
const addressOrENS = ensNameQuery.data || shortAddress;
142166

143167
useEffect(() => {
144168
if (!isOpen) {
@@ -165,9 +189,19 @@ export const ConnectedWalletDetails: React.FC<{
165189
style={props.detailsButton?.style}
166190
data-test="connected-wallet-details"
167191
>
168-
{/* TODO: render a placeholder if we don't have an active wallet? */}
169-
{activeWallet?.id && (
192+
{ensAvatarQuery.data ? (
193+
<Img
194+
src={ensAvatarQuery.data}
195+
width={iconSize.lg}
196+
height={iconSize.lg}
197+
style={{
198+
borderRadius: radius.sm,
199+
}}
200+
/>
201+
) : activeWallet?.id ? (
170202
<WalletImage size={iconSize.lg} id={activeWallet.id} />
203+
) : (
204+
<WalletIcon size={iconSize.lg} />
171205
)}
172206

173207
<Container flex="column" gap="xxs">
@@ -260,9 +294,19 @@ export const ConnectedWalletDetails: React.FC<{
260294
<div>
261295
<Spacer y="xl" />
262296
<Container px="lg" flex="column" center="x">
263-
{/* TODO: render a placeholder if we don't have an active wallet? */}
264-
{activeWallet?.id && (
265-
<WalletImage id={activeWallet.id} size={iconSize.xxl} />
297+
{ensAvatarQuery.data ? (
298+
<Img
299+
src={ensAvatarQuery.data}
300+
width={iconSize.xxl}
301+
height={iconSize.xxl}
302+
style={{
303+
borderRadius: radius.lg,
304+
}}
305+
/>
306+
) : activeWallet?.id ? (
307+
<WalletImage size={iconSize.xxl} id={activeWallet.id} />
308+
) : (
309+
<WalletIcon size={iconSize.xxl} />
266310
)}
267311

268312
<Spacer y="md" />

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export function AnyWalletConnectUI(props: {
132132
);
133133
}
134134

135-
if (props.wallet.id === "inApp") {
135+
if (props.wallet.id === "inApp" || props.wallet.id === "embedded") {
136136
return (
137137
<Suspense fallback={<LoadingScreen />}>
138138
<InAppWalletConnectUI

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/screen.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import { createContext, useContext, useEffect, useRef, useState } from "react";
22
import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
33
import { useWalletConnectionCtx } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
4-
// import type { WalletConfig } from "../../../../core/types/wallets.js";
54
import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js";
65
import { ModalConfigCtx } from "../../../providers/wallet-ui-states-provider.js";
76
import { reservedScreens } from "../constants.js";
87

98
type Screen = string | Wallet;
109

11-
const inAppWalletId = "inApp";
12-
1310
export type ScreenSetup = {
1411
screen: Screen;
1512
setScreen: (newSreen: Screen) => void;
@@ -29,7 +26,9 @@ export function useSetupScreen() {
2926

3027
let initialScreen: Screen = reservedScreens.main;
3128

32-
const socialLogin = wallets.find((w) => w.id === inAppWalletId);
29+
const socialLogin = wallets.find(
30+
(w) => w.id === "embedded" || w.id === "inApp",
31+
);
3332

3433
if (wallets.length === 1 && wallets[0]) {
3534
initialScreen = wallets[0];

packages/thirdweb/src/react/web/utils/sortWallets.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ export function sortWallets<T extends { id: string }>(
4040
})
4141
// show wallets with select ui first ( currently only in-app )
4242
.sort((a, b) => {
43-
const aIsInApp = a.id === "inApp";
44-
const bIsInApp = b.id === "inApp";
43+
const aIsInApp = a.id === "inApp" || a.id === "embedded";
44+
const bIsInApp = b.id === "inApp" || b.id === "embedded";
4545
if (aIsInApp && !bIsInApp) {
4646
return -1;
4747
}

packages/thirdweb/src/wallets/__generated__/getWalletInfo.ts

Lines changed: 9 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/thirdweb/src/wallets/__generated__/wallet-infos.ts

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/thirdweb/src/wallets/__generated__/wallet/io.ozonewallet/image.ts

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/thirdweb/src/wallets/create-wallet.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export function createWallet<const ID extends WalletId>(
5050
/**
5151
* IN-APP WALLET
5252
*/
53+
case "embedded":
5354
case "inApp": {
5455
return inAppWallet(
5556
creationOptions as CreateWalletArgs<"inApp">[1],
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export const wallet = {
2+
id: "embedded",
3+
name: "Social Login",
4+
homepage: "https://thirdweb.com",
5+
app: {
6+
browser: null,
7+
ios: null,
8+
android: null,
9+
mac: null,
10+
windows: null,
11+
linux: null,
12+
chrome: null,
13+
firefox: null,
14+
safari: null,
15+
edge: null,
16+
opera: null,
17+
},
18+
rdns: null,
19+
mobile: {
20+
native: null,
21+
universal: null,
22+
},
23+
desktop: {
24+
native: null,
25+
universal: null,
26+
},
27+
} as const;
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const image =
2+
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM1ODlfODY0OSkiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzU4OV84NjQ5KSIvPgo8cmVjdCB4PSItMSIgeT0iLTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcng9IjkuOCIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzM1ODlfODY0OSkiLz4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAxXzM1ODlfODY0OSkiPgo8cGF0aCBkPSJNMjQgMTQuMjVDMTguNjE3MiAxNC4yNSAxNC4yNSAxOC42MTcyIDE0LjI1IDI0QzE0LjI1IDI5LjM4MjggMTguNjE3MiAzMy43NSAyNCAzMy43NUMyNC44OTg4IDMzLjc1IDI1LjYyNSAzNC40NzYyIDI1LjYyNSAzNS4zNzVDMjUuNjI1IDM2LjI3MzggMjQuODk4OCAzNyAyNCAzN0MxNi44MTk1IDM3IDExIDMxLjE4MDUgMTEgMjRDMTEgMTYuODE5NSAxNi44MTk1IDExIDI0IDExQzMxLjE4MDUgMTEgMzcgMTYuODE5NSAzNyAyNFYyNS42MjVDMzcgMjguMzE2NCAzNC44MTY0IDMwLjUgMzIuMTI1IDMwLjVDMzAuNjM3MSAzMC41IDI5LjMwMTYgMjkuODI5NyAyOC40MDc4IDI4Ljc3ODVDMjcuMjUgMjkuODQ0OSAyNS43MDEyIDMwLjUgMjQgMzAuNUMyMC40MDk4IDMwLjUgMTcuNSAyNy41OTAyIDE3LjUgMjRDMTcuNSAyMC40MDk4IDIwLjQwOTggMTcuNSAyNCAxNy41QzI1LjQxNjggMTcuNSAyNi43MjcgMTcuOTUyIDI3Ljc5MzQgMTguNzIzOEMyOC4wODI4IDE4LjQ2OTkgMjguNDU4NiAxOC4zMTI1IDI4Ljg3NSAxOC4zMTI1QzI5Ljc3MzggMTguMzEyNSAzMC41IDE5LjAzODcgMzAuNSAxOS45Mzc1VjI1LjYyNUMzMC41IDI2LjUyMzggMzEuMjI2MiAyNy4yNSAzMi4xMjUgMjcuMjVDMzMuMDIzOCAyNy4yNSAzMy43NSAyNi41MjM4IDMzLjc1IDI1LjYyNVYyNEMzMy43NSAxOC42MTcyIDI5LjM4MjggMTQuMjUgMjQgMTQuMjVaTTI3LjI1IDI0QzI3LjI1IDIzLjEzOCAyNi45MDc2IDIyLjMxMTQgMjYuMjk4MSAyMS43MDE5QzI1LjY4ODYgMjEuMDkyNCAyNC44NjIgMjAuNzUgMjQgMjAuNzVDMjMuMTM4IDIwLjc1IDIyLjMxMTQgMjEuMDkyNCAyMS43MDE5IDIxLjcwMTlDMjEuMDkyNCAyMi4zMTE0IDIwLjc1IDIzLjEzOCAyMC43NSAyNEMyMC43NSAyNC44NjIgMjEuMDkyNCAyNS42ODg2IDIxLjcwMTkgMjYuMjk4MUMyMi4zMTE0IDI2LjkwNzYgMjMuMTM4IDI3LjI1IDI0IDI3LjI1QzI0Ljg2MiAyNy4yNSAyNS42ODg2IDI2LjkwNzYgMjYuMjk4MSAyNi4yOTgxQzI2LjkwNzYgMjUuNjg4NiAyNy4yNSAyNC44NjIgMjcuMjUgMjRaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8zNTg5Xzg2NDkiIHgxPSIyNS41IiB5MT0iLTYuMjk1NzJlLTA2IiB4Mj0iMzAuMjAxNiIgeTI9IjQ3LjUzNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjODM1OEJBIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdCMUNGNyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMzU4OV84NjQ5IiB4MT0iMjUuNTYyNSIgeTE9Ii0xLjAwMDAxIiB4Mj0iMzAuNDYiIHkyPSI0OC41MTU2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzU4QkEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0IxQ0Y3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzU4OV84NjQ5Ij4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiByeD0iOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMV8zNTg5Xzg2NDkiPgo8cmVjdCB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMSAxMSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K";
3+
4+
export default image;

packages/thirdweb/src/wallets/wallet-types.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import type {
2222
export type WalletId =
2323
| "walletConnect"
2424
| "inApp"
25+
| "embedded" // deprecated
2526
| "smart"
2627
| WCSupportedWalletIds
2728
| InjectedSupportedWalletIds;
@@ -67,7 +68,7 @@ export type WalletConnectionOption<T extends WalletId> =
6768
: T extends "smart"
6869
? SmartWalletConnectionOptions
6970
: // inApp wallet
70-
T extends "inApp"
71+
T extends "inApp" | "embedded"
7172
? InAppWalletConnectionOptions
7273
: // coinbase wallet (inhected + coinbaseWallet)
7374
T extends "com.coinbase.wallet"
@@ -93,7 +94,7 @@ export type WalletAutoConnectionOption<T extends WalletId> =
9394
? WCAutoConnectOptions
9495
: T extends "smart"
9596
? SmartWalletConnectionOptions
96-
: T extends "inApp"
97+
: T extends "inApp" | "embedded"
9798
? InAppWalletAutoConnectOptions
9899
: // coinbase wallet (inhected + coinbaseWallet)
99100
T extends "com.coinbase.wallet"
@@ -115,7 +116,7 @@ export type WalletAutoConnectionOption<T extends WalletId> =
115116
*/
116117
export type WalletCreationOptions<T extends WalletId> = T extends "smart"
117118
? SmartWalletOptions
118-
: T extends "inApp"
119+
: T extends "inApp" | "embedded"
119120
? InAppWalletCreationOptions
120121
: undefined;
121122

0 commit comments

Comments
 (0)