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.

0 commit comments

Comments
 (0)