Skip to content

[SDK] Feature: ConnectedWalletDetails to use headless UI #5429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 20, 2024
Merged

[SDK] Feature: ConnectedWalletDetails to use headless UI #5429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/thirdweb/src/react/core/utils/wallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ export function useEnsAvatar(options: {
}

/**
* @internal
* @internal This hook is only being used in our react-native package
* It can be removed once we migrate the RN UI code to our headless components (AccountProvider, AccountName etc.)
*/
export function useConnectedWalletDetails(
client: ThirdwebClient,
Expand Down
65 changes: 34 additions & 31 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { Spinner } from "../components/Spinner.js";
import { Container } from "../components/basic.js";
import { Button } from "../components/buttons.js";
import { fadeInAnimation } from "../design-system/animations.js";
import { AccountProvider } from "../prebuilt/Account/provider.js";
import { ConnectedWalletDetails } from "./Details.js";
import ConnectModal from "./Modal/ConnectModal.js";
import { LockIcon } from "./icons/LockIcon.js";
Expand Down Expand Up @@ -532,37 +533,39 @@ function ConnectButtonInner(
}

return (
<ConnectedWalletDetails
theme={theme}
detailsButton={props.detailsButton}
detailsModal={props.detailsModal}
supportedTokens={supportedTokens}
supportedNFTs={props.supportedNFTs}
onDisconnect={(info) => {
// logout on explicit disconnect!
if (siweAuth.requiresAuth) {
siweAuth.doLogout();
}
props.onDisconnect?.(info);
}}
chains={props?.chains || []}
chain={props.chain}
switchButton={props.switchButton}
client={props.client}
connectLocale={locale}
connectOptions={{
accountAbstraction: props.accountAbstraction,
appMetadata: props.appMetadata,
chain: props.chain,
chains: props.chains,
connectModal: props.connectModal,
recommendedWallets: props.recommendedWallets,
showAllWallets: props.showAllWallets,
walletConnect: props.walletConnect,
wallets: props.wallets,
hiddenWallets: props.detailsModal?.hiddenWallets,
}}
/>
<AccountProvider address={activeAccount.address} client={props.client}>
<ConnectedWalletDetails
theme={theme}
detailsButton={props.detailsButton}
detailsModal={props.detailsModal}
supportedTokens={supportedTokens}
supportedNFTs={props.supportedNFTs}
onDisconnect={(info) => {
// logout on explicit disconnect!
if (siweAuth.requiresAuth) {
siweAuth.doLogout();
}
props.onDisconnect?.(info);
}}
chains={props?.chains || []}
chain={props.chain}
switchButton={props.switchButton}
client={props.client}
connectLocale={locale}
connectOptions={{
accountAbstraction: props.accountAbstraction,
appMetadata: props.appMetadata,
chain: props.chain,
chains: props.chains,
connectModal: props.connectModal,
recommendedWallets: props.recommendedWallets,
showAllWallets: props.showAllWallets,
walletConnect: props.walletConnect,
wallets: props.wallets,
hiddenWallets: props.detailsModal?.hiddenWallets,
}}
/>
</AccountProvider>
);
}

Expand Down
149 changes: 91 additions & 58 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import type { Chain } from "../../../../chains/types.js";
import type { ThirdwebClient } from "../../../../client/client.js";
import { getContract } from "../../../../contract/contract.js";
import { getLastAuthProvider } from "../../../../react/core/utils/storage.js";
import { shortenAddress } from "../../../../utils/address.js";
import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
import { formatNumber } from "../../../../utils/formatNumber.js";
import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
Expand Down Expand Up @@ -67,10 +68,7 @@ import type {
SupportedTokens,
} from "../../../core/utils/defaultTokens.js";
import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
import {
useConnectedWalletDetails,
useWalletInfo,
} from "../../../core/utils/wallet.js";
import { useWalletInfo } from "../../../core/utils/wallet.js";
import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
import { ChainIcon } from "../components/ChainIcon.js";
import { CopyIcon } from "../components/CopyIcon.js";
Expand All @@ -86,8 +84,13 @@ import { Button, IconButton } from "../components/buttons.js";
import { Link, Text } from "../components/text.js";
import { fadeInAnimation } from "../design-system/animations.js";
import { StyledButton } from "../design-system/elements.js";
import { AccountAddress } from "../prebuilt/Account/address.js";
import { AccountAvatar } from "../prebuilt/Account/avatar.js";
import { AccountBalance } from "../prebuilt/Account/balance.js";
import { AccountBlobbie } from "../prebuilt/Account/blobbie.js";
import { AccountName } from "../prebuilt/Account/name.js";
import { AccountProvider } from "../prebuilt/Account/provider.js";
import type { LocaleId } from "../types.js";
import { Blobbie } from "./Blobbie.js";
import { MenuButton, MenuLink } from "./MenuButton.js";
import { ScreenSetupContext, useSetupScreen } from "./Modal/screen.js";
import {
Expand Down Expand Up @@ -140,18 +143,10 @@ export const ConnectedWalletDetails: React.FC<{
connectOptions: DetailsModalConnectOptions | undefined;
}> = (props) => {
const { connectLocale: locale, client } = props;

const setRootEl = useContext(SetRootElementContext);
const activeAccount = useActiveAccount();
const walletChain = useActiveWalletChain();

const { pfp, name, balanceQuery } = useConnectedWalletDetails(
client,
walletChain,
activeAccount,
props.detailsButton?.displayBalanceToken,
);

function closeModal() {
setRootEl(null);
}
Expand Down Expand Up @@ -199,8 +194,6 @@ export const ConnectedWalletDetails: React.FC<{
);
}

const avatarSrc = props.detailsButton?.connectedAccountAvatarUrl || pfp;

const combinedClassName = `${TW_CONNECTED_WALLET} ${props.detailsButton?.className || ""}`;

return (
Expand All @@ -219,18 +212,27 @@ export const ConnectedWalletDetails: React.FC<{
height: "35px",
}}
>
{avatarSrc ? (
{props.detailsButton?.connectedAccountAvatarUrl ? (
<img
alt=""
src={avatarSrc}
src={props.detailsButton.connectedAccountAvatarUrl}
style={{
height: "100%",
width: "100%",
objectFit: "cover",
}}
/>
) : (
activeAccount && <Blobbie address={activeAccount.address} size={35} />
activeAccount && (
<AccountAvatar
loadingComponent={<AccountBlobbie size={35} />}
fallbackComponent={<AccountBlobbie size={35} />}
queryOptions={{
refetchOnWindowFocus: false,
refetchOnMount: false,
}}
/>
)
)}
</Container>
<Container
Expand All @@ -243,29 +245,47 @@ export const ConnectedWalletDetails: React.FC<{
}}
>
{/* Address */}
<Text
size="xs"
color="primaryText"
weight={500}
className={`${TW_CONNECTED_WALLET}__address`}
>
{props.detailsButton?.connectedAccountName ?? name}
</Text>

{/* Balance */}
{balanceQuery.data ? (
{props.detailsButton?.connectedAccountName ? (
<Text
className={`${TW_CONNECTED_WALLET}__balance`}
size="xs"
color="secondaryText"
weight={400}
color="primaryText"
weight={500}
className={`${TW_CONNECTED_WALLET}__address`}
>
{formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
{balanceQuery.data.symbol}
{props.detailsButton.connectedAccountName}
</Text>
) : (
<Skeleton height={fontSize.xs} width="70px" />
<Text
size="xs"
color="primaryText"
weight={500}
className={`${TW_CONNECTED_WALLET}__address`}
>
<AccountName
loadingComponent={<AccountAddress formatFn={shortenAddress} />}
fallbackComponent={<AccountAddress formatFn={shortenAddress} />}
/>
</Text>
)}

<Text
className={`${TW_CONNECTED_WALLET}__balance`}
size="xs"
color="secondaryText"
weight={400}
>
<AccountBalance
chain={walletChain}
loadingComponent={<Skeleton height={fontSize.xs} width="70px" />}
fallbackComponent={<Skeleton height={fontSize.xs} width="70px" />}
formatFn={formatBalanceOnButton}
tokenAddress={
props.detailsButton?.displayBalanceToken?.[
Number(walletChain?.id)
]
}
/>
</Text>
</Container>
</WalletInfoButton>
);
Expand Down Expand Up @@ -295,12 +315,6 @@ function DetailsModal(props: {
const { client, locale } = props;
const walletChain = useActiveWalletChain();
const activeAccount = useActiveAccount();
const { pfp, name, balanceQuery } = useConnectedWalletDetails(
client,
walletChain,
activeAccount,
props.displayBalanceToken,
);
const theme = parseTheme(props.theme);

const activeWallet = useActiveWallet();
Expand Down Expand Up @@ -363,12 +377,15 @@ function DetailsModal(props: {
<Text color="primaryText" size="md" multiline>
{chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
<Text color="secondaryText" size="xs">
{balanceQuery.data ? (
formatNumber(Number(balanceQuery.data.displayValue), 9)
) : (
<Skeleton height="1em" width="100px" />
)}{" "}
{balanceQuery.data?.symbol}
<AccountBalance
fallbackComponent={<Skeleton height="1em" width="100px" />}
loadingComponent={<Skeleton height="1em" width="100px" />}
formatFn={(num: number) => formatNumber(num, 9)}
chain={walletChain}
tokenAddress={
props.displayBalanceToken?.[Number(walletChain?.id)]
}
/>
</Text>
</Text>
)}
Expand All @@ -384,8 +401,6 @@ function DetailsModal(props: {
</MenuButton>
);

const avatarSrc = props.detailsModal?.connectedAccountAvatarUrl ?? pfp;

const { hideSendFunds, hideReceiveFunds, hideBuyFunds } =
props.detailsModal || {};

Expand All @@ -407,9 +422,9 @@ function DetailsModal(props: {
overflow: "hidden",
}}
>
{avatarSrc ? (
{props.detailsModal?.connectedAccountAvatarUrl ? (
<img
src={avatarSrc}
src={props.detailsModal.connectedAccountAvatarUrl}
style={{
height: "100%",
width: "100%",
Expand All @@ -419,9 +434,9 @@ function DetailsModal(props: {
/>
) : (
activeAccount && (
<Blobbie
address={activeAccount.address}
size={Number(iconSize.xxl)}
<AccountAvatar
loadingComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
fallbackComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
/>
)
)}
Expand Down Expand Up @@ -496,9 +511,22 @@ function DetailsModal(props: {
alignItems: "center",
}}
>
<Text color="primaryText" weight={500} size="md">
{props.detailsModal?.connectedAccountName ?? name}
</Text>
{props.detailsModal?.connectedAccountName ? (
<Text color="primaryText" weight={500} size="md">
{props.detailsModal.connectedAccountName}
</Text>
) : (
<Text color="primaryText" weight={500} size="md">
<AccountName
loadingComponent={
<AccountAddress formatFn={shortenAddress} />
}
fallbackComponent={
<AccountAddress formatFn={shortenAddress} />
}
/>
</Text>
)}
<IconButton>
<CopyIcon
text={activeAccount?.address || ""}
Expand Down Expand Up @@ -964,7 +992,12 @@ function DetailsModal(props: {
}
}}
>
{content}
<AccountProvider
address={activeAccount?.address || ""}
client={client}
>
{content}
</AccountProvider>
</Modal>
</ScreenSetupContext.Provider>
</WalletUIStatesProvider>
Expand Down
Loading