Skip to content

Commit b273ffb

Browse files
joaquim-vergesjoaquim-verges
committed
feat: respect theme accentColor for default connect UI icons
1 parent cf36a33 commit b273ffb

File tree

10 files changed

+232
-35
lines changed

10 files changed

+232
-35
lines changed

‎.changeset/few-bears-float.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Respect theme accentColor for default icons in connect UI

‎apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,34 @@ export function RightSection(props: {
115115

116116
{previewTab === "modal" &&
117117
(account && (!connectOptions.enableAuth || isLoggedIn) ? (
118-
<ConnectButton client={THIRDWEB_CLIENT} />
118+
<ConnectButton
119+
client={THIRDWEB_CLIENT}
120+
autoConnect={false}
121+
theme={themeObj}
122+
locale={connectOptions.localeId}
123+
connectButton={{
124+
label: connectOptions.buttonLabel,
125+
}}
126+
connectModal={{
127+
size: connectOptions.modalSize,
128+
title: connectOptions.modalTitle,
129+
titleIcon: connectOptions.modalTitleIcon,
130+
termsOfServiceUrl: connectOptions.termsOfServiceLink,
131+
privacyPolicyUrl: connectOptions.privacyPolicyLink,
132+
showThirdwebBranding: connectOptions.ShowThirdwebBranding,
133+
requireApproval: connectOptions.requireApproval,
134+
}}
135+
wallets={wallets}
136+
auth={connectOptions.enableAuth ? playgroundAuth : undefined}
137+
accountAbstraction={
138+
connectOptions.enableAccountAbstraction
139+
? {
140+
chain: ethereum,
141+
sponsorGas: true,
142+
}
143+
: undefined
144+
}
145+
/>
119146
) : (
120147
<div className="relative">
121148
<ConnectEmbed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
radius,
1717
spacing,
1818
} from "../../../core/design-system/index.js";
19-
import { genericWalletIcon } from "../../../core/utils/walletIcon.js";
2019
import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
2120
import { sortWallets } from "../../utils/sortWallets.js";
2221
import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
@@ -42,6 +41,7 @@ import { PoweredByThirdweb } from "./PoweredByTW.js";
4241
import { WalletButtonEl, WalletEntryButton } from "./WalletEntryButton.js";
4342
import { WalletTypeRowButton } from "./WalletTypeRowButton.js";
4443
import { compactModalMaxHeight } from "./constants.js";
44+
import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js";
4545
import type { ConnectLocale } from "./locale/types.js";
4646

4747
const InAppWalletSelectionUI = /* @__PURE__ */ lazy(
@@ -226,7 +226,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
226226
const connectAWallet = (
227227
<WalletTypeRowButton
228228
client={props.client}
229-
icon={genericWalletIcon}
229+
icon={OutlineWalletIcon}
230230
onClick={() => {
231231
setIsWalletGroupExpanded(true);
232232
}}

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

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
import type { ThirdwebClient } from "../../../../client/client.js";
2-
import {
3-
iconSize,
4-
radius,
5-
spacing,
6-
} from "../../../core/design-system/index.js";
2+
import { iconSize, spacing } from "../../../core/design-system/index.js";
73
import { Text } from "../../ui/components/text.js";
8-
import { Img } from "../components/Img.js";
94
import { Container } from "../components/basic.js";
105
import { Button } from "../components/buttons.js";
6+
import type { IconFC } from "./icons/types.js";
117

128
type WalletTypeRowProps = {
139
client: ThirdwebClient;
1410
onClick: () => void;
1511
title: string;
16-
icon: string;
12+
icon: IconFC;
1713
disabled?: boolean;
1814
};
1915

@@ -33,16 +29,7 @@ export function WalletTypeRowButton(props: WalletTypeRowProps) {
3329
disabled={props.disabled}
3430
>
3531
<Container flex="row" gap="sm" center="y" color="accentText">
36-
<Img
37-
client={props.client}
38-
src={props.icon}
39-
width={iconSize.md}
40-
height={iconSize.md}
41-
loading="eager"
42-
style={{
43-
borderRadius: radius.md,
44-
}}
45-
/>
32+
<props.icon size={iconSize.md} />
4633
<Text color="primaryText">{props.title}</Text>
4734
</Container>
4835
</Button>

‎packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { IconFC } from "./types.js";
2+
3+
/**
4+
* @internal
5+
*/
6+
export const EmailIcon: IconFC = (props) => {
7+
return (
8+
<svg
9+
width={props.size}
10+
height={props.size}
11+
viewBox="0 0 16 16"
12+
fill="none"
13+
xmlns="http://www.w3.org/2000/svg"
14+
role="presentation"
15+
>
16+
<path
17+
d="M13.3335 2.6665H2.66683C1.93045 2.6665 1.3335 3.26346 1.3335 3.99984V11.9998C1.3335 12.7362 1.93045 13.3332 2.66683 13.3332H13.3335C14.0699 13.3332 14.6668 12.7362 14.6668 11.9998V3.99984C14.6668 3.26346 14.0699 2.6665 13.3335 2.6665Z"
18+
stroke="currentColor"
19+
strokeLinecap="round"
20+
strokeLinejoin="round"
21+
/>
22+
<path
23+
d="M14.6668 4.6665L8.68683 8.4665C8.48101 8.59545 8.24304 8.66384 8.00016 8.66384C7.75728 8.66384 7.51931 8.59545 7.3135 8.4665L1.3335 4.6665"
24+
stroke="currentColor"
25+
strokeLinecap="round"
26+
strokeLinejoin="round"
27+
/>
28+
</svg>
29+
);
30+
};

‎packages/thirdweb/src/react/web/ui/ConnectWallet/icons/GuestIcon.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { IconFC } from "./types.js";
2+
3+
/**
4+
* @internal
5+
*/
6+
export const GuestIcon: IconFC = (props) => {
7+
return (
8+
<svg
9+
xmlns="http://www.w3.org/2000/svg"
10+
width={props.size}
11+
height={props.size}
12+
viewBox="0 0 24 24"
13+
fill="none"
14+
stroke="currentColor"
15+
strokeWidth="2"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
role="presentation"
19+
>
20+
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
21+
<circle cx="12" cy="7" r="4" />
22+
</svg>
23+
);
24+
};

‎packages/thirdweb/src/react/web/ui/ConnectWallet/icons/PasskeyIcon.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import type { IconFC } from "./types.js";
2+
3+
/**
4+
* @internal
5+
*/
6+
export const PasskeyIcon: IconFC = (props) => {
7+
return (
8+
<svg
9+
width={props.size}
10+
height={props.size}
11+
viewBox="0 0 16 16"
12+
fill="none"
13+
xmlns="http://www.w3.org/2000/svg"
14+
role="presentation"
15+
>
16+
<path
17+
d="M7.99971 6.6665C7.64609 6.6665 7.30695 6.80698 7.0569 7.05703C6.80685 7.30708 6.66638 7.64622 6.66638 7.99984C6.66638 8.67984 6.59971 9.67317 6.49304 10.6665"
18+
stroke="currentColor"
19+
strokeWidth="1.2549"
20+
strokeLinecap="round"
21+
strokeLinejoin="round"
22+
/>
23+
<path
24+
d="M9.33305 8.74658C9.33305 10.3332 9.33305 12.9999 8.66638 14.6666"
25+
stroke="currentColor"
26+
strokeWidth="1.2549"
27+
strokeLinecap="round"
28+
strokeLinejoin="round"
29+
/>
30+
<path
31+
d="M11.5272 14.0133C11.6072 13.6133 11.8139 12.48 11.8606 12"
32+
stroke="currentColor"
33+
strokeWidth="1.2549"
34+
strokeLinecap="round"
35+
strokeLinejoin="round"
36+
/>
37+
<path
38+
d="M1.33386 8.00016C1.33386 6.60095 1.77411 5.2372 2.59225 4.10209C3.41038 2.96699 4.56493 2.11808 5.89234 1.67561C7.21976 1.23314 8.65274 1.21954 9.98831 1.63674C11.3239 2.05394 12.4943 2.88079 13.3339 4.00016"
39+
stroke="currentColor"
40+
strokeWidth="1.2549"
41+
strokeLinecap="round"
42+
strokeLinejoin="round"
43+
/>
44+
<path
45+
d="M1.33386 10.6665H1.33902"
46+
stroke="currentColor"
47+
strokeWidth="1.2549"
48+
strokeLinecap="round"
49+
strokeLinejoin="round"
50+
/>
51+
<path
52+
d="M14.5327 10.6665C14.666 9.33317 14.62 7.09717 14.5327 6.6665"
53+
stroke="currentColor"
54+
strokeWidth="1.2549"
55+
strokeLinecap="round"
56+
strokeLinejoin="round"
57+
/>
58+
<path
59+
d="M3.33386 12.9998C3.6672 11.9998 4.00053 9.99984 4.00053 7.99984C3.99986 7.54575 4.07651 7.09486 4.2272 6.6665"
60+
stroke="currentColor"
61+
strokeWidth="1.2549"
62+
strokeLinecap="round"
63+
strokeLinejoin="round"
64+
/>
65+
<path
66+
d="M5.76709 14.6668C5.90709 14.2268 6.06709 13.7868 6.14709 13.3335"
67+
stroke="currentColor"
68+
strokeWidth="1.2549"
69+
strokeLinecap="round"
70+
strokeLinejoin="round"
71+
/>
72+
<path
73+
d="M6.00012 4.53346C6.60839 4.18228 7.2984 3.99745 8.00076 3.99756C8.70313 3.99767 9.39308 4.18272 10.0012 4.5341C10.6094 4.88548 11.1143 5.39079 11.4652 5.99923C11.8161 6.60766 12.0006 7.29776 12.0001 8.00012V9.33346"
74+
stroke="currentColor"
75+
strokeWidth="1.2549"
76+
strokeLinecap="round"
77+
strokeLinejoin="round"
78+
/>
79+
</svg>
80+
);
81+
};

‎packages/thirdweb/src/react/web/ui/ConnectWallet/icons/PhoneIcon.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { IconFC } from "./types.js";
2+
3+
/**
4+
* @internal
5+
*/
6+
export const PhoneIcon: IconFC = (props) => {
7+
return (
8+
<svg
9+
width={props.size}
10+
height={props.size}
11+
viewBox="0 0 16 16"
12+
fill="none"
13+
xmlns="http://www.w3.org/2000/svg"
14+
role="presentation"
15+
>
16+
<g clipPath="url(#clip0_5639_632)">
17+
<path
18+
d="M14.6669 11.2802V13.2802C14.6677 13.4659 14.6297 13.6497 14.5553 13.8198C14.4809 13.9899 14.3718 14.1426 14.235 14.2681C14.0982 14.3937 13.9367 14.4892 13.7608 14.5487C13.5849 14.6082 13.3985 14.6303 13.2136 14.6136C11.1622 14.3907 9.19161 13.6897 7.46028 12.5669C5.8495 11.5433 4.48384 10.1777 3.46028 8.56689C2.3336 6.8277 1.63244 4.84756 1.41361 2.78689C1.39695 2.60254 1.41886 2.41673 1.47795 2.24131C1.53703 2.06589 1.63199 1.90469 1.75679 1.76797C1.88159 1.63126 2.03348 1.52203 2.20281 1.44724C2.37213 1.37245 2.55517 1.33374 2.74028 1.33356H4.74028C5.06382 1.33038 5.37748 1.44495 5.62279 1.65592C5.8681 1.86689 6.02833 2.15986 6.07361 2.48023C6.15803 3.12027 6.31458 3.74871 6.54028 4.35356C6.62998 4.59218 6.64939 4.8515 6.59622 5.10081C6.54305 5.35012 6.41952 5.57897 6.24028 5.76023L5.39361 6.60689C6.34265 8.27592 7.72458 9.65786 9.39361 10.6069L10.2403 9.76023C10.4215 9.58099 10.6504 9.45746 10.8997 9.40429C11.149 9.35112 11.4083 9.37053 11.6469 9.46023C12.2518 9.68593 12.8802 9.84248 13.5203 9.92689C13.8441 9.97258 14.1399 10.1357 14.3513 10.3852C14.5627 10.6348 14.6751 10.9533 14.6669 11.2802Z"
19+
stroke="currentColor"
20+
strokeWidth="1.33333"
21+
strokeLinecap="round"
22+
strokeLinejoin="round"
23+
/>
24+
</g>
25+
<defs>
26+
<clipPath id="clip0_5639_632">
27+
<rect width="16" height="16" fill="white" />
28+
</clipPath>
29+
</defs>
30+
</svg>
31+
);
32+
};

‎packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,12 @@ export function WalletAuth(props: {
131131
size={props.size}
132132
meta={props.meta || {}}
133133
walletConnect={props.walletConnect}
134-
modalHeader={{ title: props.inAppLocale.linkWallet, onBack: back }}
134+
modalHeader={{
135+
title: props.isLinking
136+
? props.inAppLocale.linkWallet
137+
: props.inAppLocale.signInWithWallet,
138+
onBack: back,
139+
}}
135140
walletIdsToHide={["inApp"]}
136141
disableSelectionDataReset={true}
137142
/>
@@ -141,7 +146,14 @@ export function WalletAuth(props: {
141146
return (
142147
<Container animate="fadein" fullHeight flex="column">
143148
<Container p="lg">
144-
<ModalHeader title={props.inAppLocale.linkWallet} onBack={back} />
149+
<ModalHeader
150+
title={
151+
props.isLinking
152+
? props.inAppLocale.linkWallet
153+
: props.inAppLocale.signInWithWallet
154+
}
155+
onBack={back}
156+
/>
145157
</Container>
146158

147159
<Container

‎packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,14 @@ import {
2424
spacing,
2525
} from "../../../core/design-system/index.js";
2626
import { setLastAuthProvider } from "../../../core/utils/storage.js";
27-
import {
28-
emailIcon,
29-
getSocialIcon,
30-
passkeyIcon,
31-
phoneIcon,
32-
socialIcons,
33-
} from "../../../core/utils/walletIcon.js";
27+
import { socialIcons } from "../../../core/utils/walletIcon.js";
3428
import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
3529
import { WalletTypeRowButton } from "../../ui/ConnectWallet/WalletTypeRowButton.js";
30+
import { EmailIcon } from "../../ui/ConnectWallet/icons/EmailIcon.js";
31+
import { GuestIcon } from "../../ui/ConnectWallet/icons/GuestIcon.js";
32+
import { OutlineWalletIcon } from "../../ui/ConnectWallet/icons/OutlineWalletIcon.js";
33+
import { PasskeyIcon } from "../../ui/ConnectWallet/icons/PasskeyIcon.js";
34+
import { PhoneIcon } from "../../ui/ConnectWallet/icons/PhoneIcon.js";
3635
import { Img } from "../../ui/components/Img.js";
3736
import { Spacer } from "../../ui/components/Spacer.js";
3837
import { TextDivider } from "../../ui/components/TextDivider.js";
@@ -413,7 +412,7 @@ export const ConnectWalletSocialOptions = (
413412
) : (
414413
<WalletTypeRowButton
415414
client={props.client}
416-
icon={emailIcon}
415+
icon={EmailIcon}
417416
onClick={() => {
418417
setManualInputMode("email");
419418
}}
@@ -451,7 +450,7 @@ export const ConnectWalletSocialOptions = (
451450
) : (
452451
<WalletTypeRowButton
453452
client={props.client}
454-
icon={phoneIcon}
453+
icon={PhoneIcon}
455454
onClick={() => {
456455
setManualInputMode("phone");
457456
}}
@@ -463,7 +462,7 @@ export const ConnectWalletSocialOptions = (
463462
{passKeyEnabled && (
464463
<WalletTypeRowButton
465464
client={props.client}
466-
icon={passkeyIcon}
465+
icon={PasskeyIcon}
467466
onClick={() => {
468467
handlePassKeyLogin();
469468
}}
@@ -476,7 +475,7 @@ export const ConnectWalletSocialOptions = (
476475
{siweEnabled && (
477476
<WalletTypeRowButton
478477
client={props.client}
479-
icon={getSocialIcon("")}
478+
icon={OutlineWalletIcon}
480479
onClick={() => {
481480
handleWalletLogin();
482481
}}
@@ -488,7 +487,7 @@ export const ConnectWalletSocialOptions = (
488487
{guestEnabled && (
489488
<WalletTypeRowButton
490489
client={props.client}
491-
icon={getSocialIcon("guest")}
490+
icon={GuestIcon}
492491
onClick={() => {
493492
handleGuestLogin();
494493
}}
@@ -500,7 +499,7 @@ export const ConnectWalletSocialOptions = (
500499
{props.isLinking && (
501500
<WalletTypeRowButton
502501
client={props.client}
503-
icon={getSocialIcon("")}
502+
icon={OutlineWalletIcon}
504503
onClick={() => {
505504
handleWalletLogin();
506505
}}

0 commit comments

Comments
 (0)