Skip to content

Commit c5c7dd0

Browse files
kien-ngokien-ngo
committed
update
1 parent cd75491 commit c5c7dd0

File tree

3 files changed

+127
-90
lines changed

3 files changed

+127
-90
lines changed

‎packages/thirdweb/src/react/core/utils/wallet.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ export function useEnsAvatar(options: {
7777
}
7878

7979
/**
80-
* @internal
80+
* @internal This hook is only being used in our react-native package
81+
* It can be removed once we migrate the RN UI code to our headless components (AccountProvider, AccountName etc.)
8182
*/
8283
export function useConnectedWalletDetails(
8384
client: ThirdwebClient,

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

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { Spinner } from "../components/Spinner.js";
2323
import { Container } from "../components/basic.js";
2424
import { Button } from "../components/buttons.js";
2525
import { fadeInAnimation } from "../design-system/animations.js";
26+
import { AccountProvider } from "../prebuilt/Account/provider.js";
2627
import { ConnectedWalletDetails } from "./Details.js";
2728
import ConnectModal from "./Modal/ConnectModal.js";
2829
import { LockIcon } from "./icons/LockIcon.js";
@@ -531,37 +532,39 @@ function ConnectButtonInner(
531532
}
532533

533534
return (
534-
<ConnectedWalletDetails
535-
theme={theme}
536-
detailsButton={props.detailsButton}
537-
detailsModal={props.detailsModal}
538-
supportedTokens={supportedTokens}
539-
supportedNFTs={props.supportedNFTs}
540-
onDisconnect={(info) => {
541-
// logout on explicit disconnect!
542-
if (siweAuth.requiresAuth) {
543-
siweAuth.doLogout();
544-
}
545-
props.onDisconnect?.(info);
546-
}}
547-
chains={props?.chains || []}
548-
chain={props.chain}
549-
switchButton={props.switchButton}
550-
client={props.client}
551-
connectLocale={locale}
552-
connectOptions={{
553-
accountAbstraction: props.accountAbstraction,
554-
appMetadata: props.appMetadata,
555-
chain: props.chain,
556-
chains: props.chains,
557-
connectModal: props.connectModal,
558-
recommendedWallets: props.recommendedWallets,
559-
showAllWallets: props.showAllWallets,
560-
walletConnect: props.walletConnect,
561-
wallets: props.wallets,
562-
hiddenWallets: props.detailsModal?.hiddenWallets,
563-
}}
564-
/>
535+
<AccountProvider address={activeAccount.address} client={props.client}>
536+
<ConnectedWalletDetails
537+
theme={theme}
538+
detailsButton={props.detailsButton}
539+
detailsModal={props.detailsModal}
540+
supportedTokens={supportedTokens}
541+
supportedNFTs={props.supportedNFTs}
542+
onDisconnect={(info) => {
543+
// logout on explicit disconnect!
544+
if (siweAuth.requiresAuth) {
545+
siweAuth.doLogout();
546+
}
547+
props.onDisconnect?.(info);
548+
}}
549+
chains={props?.chains || []}
550+
chain={props.chain}
551+
switchButton={props.switchButton}
552+
client={props.client}
553+
connectLocale={locale}
554+
connectOptions={{
555+
accountAbstraction: props.accountAbstraction,
556+
appMetadata: props.appMetadata,
557+
chain: props.chain,
558+
chains: props.chains,
559+
connectModal: props.connectModal,
560+
recommendedWallets: props.recommendedWallets,
561+
showAllWallets: props.showAllWallets,
562+
walletConnect: props.walletConnect,
563+
wallets: props.wallets,
564+
hiddenWallets: props.detailsModal?.hiddenWallets,
565+
}}
566+
/>
567+
</AccountProvider>
565568
);
566569
}
567570

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

Lines changed: 91 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type { Chain } from "../../../../chains/types.js";
1515
import type { ThirdwebClient } from "../../../../client/client.js";
1616
import { getContract } from "../../../../contract/contract.js";
1717
import { getLastAuthProvider } from "../../../../react/core/utils/storage.js";
18+
import { shortenAddress } from "../../../../utils/address.js";
1819
import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
1920
import { formatNumber } from "../../../../utils/formatNumber.js";
2021
import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
@@ -67,10 +68,7 @@ import type {
6768
SupportedTokens,
6869
} from "../../../core/utils/defaultTokens.js";
6970
import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
70-
import {
71-
useConnectedWalletDetails,
72-
useWalletInfo,
73-
} from "../../../core/utils/wallet.js";
71+
import { useWalletInfo } from "../../../core/utils/wallet.js";
7472
import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
7573
import { ChainIcon } from "../components/ChainIcon.js";
7674
import { CopyIcon } from "../components/CopyIcon.js";
@@ -86,8 +84,13 @@ import { Button, IconButton } from "../components/buttons.js";
8684
import { Link, Text } from "../components/text.js";
8785
import { fadeInAnimation } from "../design-system/animations.js";
8886
import { StyledButton } from "../design-system/elements.js";
87+
import { AccountAddress } from "../prebuilt/Account/address.js";
88+
import { AccountAvatar } from "../prebuilt/Account/avatar.js";
89+
import { AccountBalance } from "../prebuilt/Account/balance.js";
90+
import { AccountBlobbie } from "../prebuilt/Account/blobbie.js";
91+
import { AccountName } from "../prebuilt/Account/name.js";
92+
import { AccountProvider } from "../prebuilt/Account/provider.js";
8993
import type { LocaleId } from "../types.js";
90-
import { Blobbie } from "./Blobbie.js";
9194
import { MenuButton, MenuLink } from "./MenuButton.js";
9295
import { ScreenSetupContext, useSetupScreen } from "./Modal/screen.js";
9396
import {
@@ -140,18 +143,10 @@ export const ConnectedWalletDetails: React.FC<{
140143
connectOptions: DetailsModalConnectOptions | undefined;
141144
}> = (props) => {
142145
const { connectLocale: locale, client } = props;
143-
144146
const setRootEl = useContext(SetRootElementContext);
145147
const activeAccount = useActiveAccount();
146148
const walletChain = useActiveWalletChain();
147149

148-
const { pfp, name, balanceQuery } = useConnectedWalletDetails(
149-
client,
150-
walletChain,
151-
activeAccount,
152-
props.detailsButton?.displayBalanceToken,
153-
);
154-
155150
function closeModal() {
156151
setRootEl(null);
157152
}
@@ -199,8 +194,6 @@ export const ConnectedWalletDetails: React.FC<{
199194
);
200195
}
201196

202-
const avatarSrc = props.detailsButton?.connectedAccountAvatarUrl || pfp;
203-
204197
const combinedClassName = `${TW_CONNECTED_WALLET} ${props.detailsButton?.className || ""}`;
205198

206199
return (
@@ -219,17 +212,26 @@ export const ConnectedWalletDetails: React.FC<{
219212
height: "35px",
220213
}}
221214
>
222-
{avatarSrc ? (
215+
{props.detailsButton?.connectedAccountAvatarUrl ? (
223216
<img
224217
alt=""
225-
src={avatarSrc}
218+
src={props.detailsButton.connectedAccountAvatarUrl}
226219
style={{
227220
width: "100%",
228221
height: "100%",
229222
}}
230223
/>
231224
) : (
232-
activeAccount && <Blobbie address={activeAccount.address} size={35} />
225+
activeAccount && (
226+
<AccountAvatar
227+
loadingComponent={<AccountBlobbie size={35} />}
228+
fallbackComponent={<AccountBlobbie size={35} />}
229+
queryOptions={{
230+
refetchOnWindowFocus: false,
231+
refetchOnMount: false,
232+
}}
233+
/>
234+
)
233235
)}
234236
</Container>
235237
<Container
@@ -242,29 +244,47 @@ export const ConnectedWalletDetails: React.FC<{
242244
}}
243245
>
244246
{/* Address */}
245-
<Text
246-
size="xs"
247-
color="primaryText"
248-
weight={500}
249-
className={`${TW_CONNECTED_WALLET}__address`}
250-
>
251-
{props.detailsButton?.connectedAccountName ?? name}
252-
</Text>
253-
254-
{/* Balance */}
255-
{balanceQuery.data ? (
247+
{props.detailsButton?.connectedAccountName ? (
256248
<Text
257-
className={`${TW_CONNECTED_WALLET}__balance`}
258249
size="xs"
259-
color="secondaryText"
260-
weight={400}
250+
color="primaryText"
251+
weight={500}
252+
className={`${TW_CONNECTED_WALLET}__address`}
261253
>
262-
{formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
263-
{balanceQuery.data.symbol}
254+
{props.detailsButton.connectedAccountName}
264255
</Text>
265256
) : (
266-
<Skeleton height={fontSize.xs} width="70px" />
257+
<Text
258+
size="xs"
259+
color="primaryText"
260+
weight={500}
261+
className={`${TW_CONNECTED_WALLET}__address`}
262+
>
263+
<AccountName
264+
loadingComponent={<AccountAddress formatFn={shortenAddress} />}
265+
fallbackComponent={<AccountAddress formatFn={shortenAddress} />}
266+
/>
267+
</Text>
267268
)}
269+
270+
<Text
271+
className={`${TW_CONNECTED_WALLET}__balance`}
272+
size="xs"
273+
color="secondaryText"
274+
weight={400}
275+
>
276+
<AccountBalance
277+
chain={walletChain}
278+
loadingComponent={<Skeleton height={fontSize.xs} width="70px" />}
279+
fallbackComponent={<Skeleton height={fontSize.xs} width="70px" />}
280+
formatFn={formatBalanceOnButton}
281+
tokenAddress={
282+
props.detailsButton?.displayBalanceToken?.[
283+
Number(walletChain?.id)
284+
]
285+
}
286+
/>
287+
</Text>
268288
</Container>
269289
</WalletInfoButton>
270290
);
@@ -294,12 +314,6 @@ function DetailsModal(props: {
294314
const { client, locale } = props;
295315
const walletChain = useActiveWalletChain();
296316
const activeAccount = useActiveAccount();
297-
const { pfp, name, balanceQuery } = useConnectedWalletDetails(
298-
client,
299-
walletChain,
300-
activeAccount,
301-
props.displayBalanceToken,
302-
);
303317
const theme = parseTheme(props.theme);
304318

305319
const activeWallet = useActiveWallet();
@@ -362,12 +376,15 @@ function DetailsModal(props: {
362376
<Text color="primaryText" size="md" multiline>
363377
{chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
364378
<Text color="secondaryText" size="xs">
365-
{balanceQuery.data ? (
366-
formatNumber(Number(balanceQuery.data.displayValue), 9)
367-
) : (
368-
<Skeleton height="1em" width="100px" />
369-
)}{" "}
370-
{balanceQuery.data?.symbol}
379+
<AccountBalance
380+
fallbackComponent={<Skeleton height="1em" width="100px" />}
381+
loadingComponent={<Skeleton height="1em" width="100px" />}
382+
formatFn={(num: number) => formatNumber(num, 9)}
383+
chain={walletChain}
384+
tokenAddress={
385+
props.displayBalanceToken?.[Number(walletChain?.id)]
386+
}
387+
/>
371388
</Text>
372389
</Text>
373390
)}
@@ -383,8 +400,6 @@ function DetailsModal(props: {
383400
</MenuButton>
384401
);
385402

386-
const avatarSrc = props.detailsModal?.connectedAccountAvatarUrl ?? pfp;
387-
388403
const { hideSendFunds, hideReceiveFunds, hideBuyFunds } =
389404
props.detailsModal || {};
390405

@@ -406,9 +421,9 @@ function DetailsModal(props: {
406421
overflow: "hidden",
407422
}}
408423
>
409-
{avatarSrc ? (
424+
{props.detailsModal?.connectedAccountAvatarUrl ? (
410425
<img
411-
src={avatarSrc}
426+
src={props.detailsModal.connectedAccountAvatarUrl}
412427
style={{
413428
width: iconSize.xxl,
414429
height: iconSize.xxl,
@@ -417,9 +432,9 @@ function DetailsModal(props: {
417432
/>
418433
) : (
419434
activeAccount && (
420-
<Blobbie
421-
address={activeAccount.address}
422-
size={Number(iconSize.xxl)}
435+
<AccountAvatar
436+
loadingComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
437+
fallbackComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
423438
/>
424439
)
425440
)}
@@ -494,9 +509,22 @@ function DetailsModal(props: {
494509
alignItems: "center",
495510
}}
496511
>
497-
<Text color="primaryText" weight={500} size="md">
498-
{props.detailsModal?.connectedAccountName ?? name}
499-
</Text>
512+
{props.detailsModal?.connectedAccountName ? (
513+
<Text color="primaryText" weight={500} size="md">
514+
{props.detailsModal.connectedAccountName}
515+
</Text>
516+
) : (
517+
<Text color="primaryText" weight={500} size="md">
518+
<AccountName
519+
loadingComponent={
520+
<AccountAddress formatFn={shortenAddress} />
521+
}
522+
fallbackComponent={
523+
<AccountAddress formatFn={shortenAddress} />
524+
}
525+
/>
526+
</Text>
527+
)}
500528
<IconButton>
501529
<CopyIcon
502530
text={activeAccount?.address || ""}
@@ -962,7 +990,12 @@ function DetailsModal(props: {
962990
}
963991
}}
964992
>
965-
{content}
993+
<AccountProvider
994+
address={activeAccount?.address || ""}
995+
client={client}
996+
>
997+
{content}
998+
</AccountProvider>
966999
</Modal>
9671000
</ScreenSetupContext.Provider>
9681001
</WalletUIStatesProvider>

0 commit comments

Comments
 (0)