d-bis/js
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

react: add hideSwitchWallet param to wallet details modal (#4267)

Browse Source
This commit is contained in:
Alec Ananian
2024-08-23 13:37:51 -07:00
committed by GitHub
parent 659cb03eea
commit 7a2de70310
3 changed files with 104 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/forty-knives-reply.md
+5
View File
@@ -0,0 +1,5 @@
---
"thirdweb": patch
---
Added `hideSwitchWallet` param to wallet details modal
packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts
+13
View File
@@ -229,6 +229,19 @@ export type ConnectButton_detailsModalOptions = {
*/
networkSelector?: NetworkSelectorProps;
/**
* Hide the "Switch Wallet" button in the `ConnectButton` Details Modal.
*
* By default it is `false`
* @example
* ```tsx
* <ConnectButton detailsModal={{
* hideSwitchWallet: true
* }} />
* ```
*/
hideSwitchWallet?: boolean;
/**
* Hide the "Disconnect Wallet" button in the `ConnectButton` Details Modal.
*
packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
+86 -71
View File
@@ -374,84 +374,91 @@ function DetailsModal(props: {
</MenuButton>
);
const avatarContent = (
<Container
style={{
position: "relative",
height: `${iconSize.xl}px`,
width: `${iconSize.xl}px`,
}}
>
<Container
style={{
width: "100%",
height: "100%",
borderRadius: "100%",
overflow: "hidden",
}}
>
{ensAvatarQuery.data ? (
<img
src={ensAvatarQuery.data}
style={{
width: iconSize.xxl,
height: iconSize.xxl,
}}
alt=""
/>
) : (
activeAccount && (
<Blobbie
address={activeAccount.address}
size={Number(iconSize.xxl)}
/>
)
)}
</Container>
<Container
style={{
position: "absolute",
bottom: -2,
right: -2,
}}
>
<IconContainer
style={{
background: theme.colors.modalBg,
}}
padding="4px"
>
{activeWallet && (
<WalletImage
style={{ borderRadius: 0 }}
id={activeWallet.id}
client={client}
size="12"
/>
)}
</IconContainer>
</Container>
</Container>
);
let content = (
<div>
<Spacer y="xs" />
<Container p="lg" gap="sm" flex="row" center="y">
<ToolTip tip="Switch wallet">
<div
style={{
cursor: "pointer",
}}
onKeyDown={(e) => {
if (e.key === "w") {
setScreen("wallet-manager");
}
}}
onClick={() => {
setScreen("wallet-manager");
}}
>
<Container
{props.detailsModal?.hideSwitchWallet ? (
avatarContent
) : (
<ToolTip tip="Switch wallet">
<div
style={{
position: "relative",
height: `${iconSize.xl}px`,
width: `${iconSize.xl}px`,
cursor: "pointer",
}}
onKeyDown={(e) => {
if (e.key === "w") {
setScreen("wallet-manager");
}
}}
onClick={() => {
setScreen("wallet-manager");
}}
>
<Container
style={{
width: "100%",
height: "100%",
borderRadius: "100%",
overflow: "hidden",
}}
>
{ensAvatarQuery.data ? (
<img
src={ensAvatarQuery.data}
style={{
width: iconSize.xxl,
height: iconSize.xxl,
}}
alt=""
/>
) : (
activeAccount && (
<Blobbie
address={activeAccount.address}
size={Number(iconSize.xxl)}
/>
)
)}
</Container>
<Container
style={{
position: "absolute",
bottom: -2,
right: -2,
}}
>
<IconContainer
style={{
background: theme.colors.modalBg,
}}
padding="4px"
>
{activeWallet && (
<WalletImage
style={{ borderRadius: 0 }}
id={activeWallet.id}
client={client}
size="12"
/>
)}
</IconContainer>
</Container>
</Container>
</div>
</ToolTip>
{avatarContent}
</div>
</ToolTip>
)}
<Container flex="column" gap="3xs">
<div
style={{
@@ -1257,6 +1264,13 @@ export type UseWalletDetailsModalOptions = {
*/
hideDisconnect?: boolean;
/**
* Hide the "Switch Wallet" button in the Wallet Details Modal.
*
* By default it is `false`
*/
hideSwitchWallet?: boolean;
/**
* Callback to be called when a wallet is disconnected by clicking the "Disconnect Wallet" button in the Wallet Details Modal.
*
@@ -1363,6 +1377,7 @@ export function useWalletDetailsModal() {
detailsModal={{
footer: props.footer,
hideDisconnect: props.hideDisconnect,
hideSwitchWallet: props.hideSwitchWallet,
networkSelector: props.networkSelector,
payOptions: props.payOptions,
showTestnetFaucet: props.showTestnetFaucet,