Skip to content

Commit 7ecfcb9

Browse files
[SDK] Add thirdweb branding to PayEmbed (#6760)
1 parent 4cf15a2 commit 7ecfcb9

File tree

10 files changed

+57
-11
lines changed

10 files changed

+57
-11
lines changed

.changeset/free-pandas-reply.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+
Add thirdweb branding to PayEmbed

packages/thirdweb/src/exports/react.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export type {
136136
PaymentInfo,
137137
DirectPaymentOptions,
138138
FundWalletOptions,
139-
TranasctionOptions,
139+
TransactionOptions,
140140
} from "../react/core/hooks/connection/ConnectButtonProps.js";
141141

142142
export {

packages/thirdweb/src/insight/get-nfts.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ async function transformNFTModel(
292292
client: client,
293293
}),
294294
id: BigInt(token_id),
295-
});
295+
}).catch(() => 0n);
296296

297297
parsedNft = parseNFT(metadata, {
298298
tokenId: BigInt(token_id),

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,14 @@ export type PayUIOptions = Prettify<
134134
name?: string;
135135
image?: string;
136136
};
137-
} & (FundWalletOptions | DirectPaymentOptions | TranasctionOptions)
137+
138+
/**
139+
* Show the "Powered by Thirdweb" branding at the bottom of the PayEmbed UI.
140+
*
141+
* By default it is `true`.
142+
*/
143+
showThirdwebBranding?: boolean;
144+
} & (FundWalletOptions | DirectPaymentOptions | TransactionOptions)
138145
>;
139146

140147
export type FundWalletOptions = {
@@ -168,7 +175,7 @@ export type DirectPaymentOptions = {
168175
paymentInfo: PaymentInfo;
169176
};
170177

171-
export type TranasctionOptions = {
178+
export type TransactionOptions = {
172179
mode: "transaction";
173180
/**
174181
* The transaction to be executed.

packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export type SendTransactionPayModalConfig =
8383
transactionHash: Hex;
8484
},
8585
) => void;
86+
showThirdwebBranding?: boolean;
8687
}
8788
| false;
8889

packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
127127
transaction: data.tx,
128128
metadata: payModal?.metadata,
129129
onPurchaseSuccess: payModal?.onPurchaseSuccess,
130+
showThirdwebBranding: payModal?.showThirdwebBranding,
130131
}}
131132
/>,
132133
);

packages/thirdweb/src/react/web/ui/ConnectWallet/PoweredByTW.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,18 @@ import { ThirdwebTextIcon } from "./icons/ThirdwebTextIcon.js";
66
/**
77
* @internal
88
*/
9-
export function PoweredByThirdweb() {
9+
export function PoweredByThirdweb(props: {
10+
link?: string;
11+
}) {
12+
const link =
13+
props.link ||
14+
"https://playground.thirdweb.com/connect/sign-in/button?utm_source=cw_text";
1015
return (
1116
<Link
1217
color="secondaryText"
1318
hoverColor="primaryText"
1419
target="_blank"
15-
href="https://thirdweb.com/connect?utm_source=cw_text"
20+
href={link}
1621
>
1722
<Container
1823
flex="row"
@@ -23,15 +28,15 @@ export function PoweredByThirdweb() {
2328
}}
2429
>
2530
<Text
26-
size="sm"
31+
size="xs"
2732
weight={600}
2833
style={{
2934
color: "currentColor",
3035
}}
3136
>
3237
Powered by
3338
</Text>
34-
<ThirdwebTextIcon height={13} />
39+
<ThirdwebTextIcon height={11} />
3540
</Container>
3641
</Link>
3742
);

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { Input } from "../../../components/formElements.js";
3232
import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
3333
import { ConnectButton } from "../../ConnectButton.js";
3434
import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
35+
import { PoweredByThirdweb } from "../../PoweredByTW.js";
3536
import type { ConnectLocale } from "../../locale/types.js";
3637
import { TokenSelector } from "../TokenSelector.js";
3738
import { WalletSwitcherConnectionScreen } from "../WalletSwitcherConnectionScreen.js";
@@ -833,7 +834,8 @@ function MainScreen(props: {
833834
}
834835
default: {
835836
return (
836-
<Container p="lg">
837+
<Container px="lg">
838+
<Spacer y="lg" />
837839
<ModalHeader title={props.title} onBack={props.onBack} />
838840

839841
<Spacer y="xl" />
@@ -899,6 +901,13 @@ function MainScreen(props: {
899901
</Button>
900902
)}
901903
</Container>
904+
<Spacer y="lg" />
905+
{payOptions.showThirdwebBranding !== false && (
906+
<>
907+
<PoweredByThirdweb link="https://playground.thirdweb.com/connect/pay?utm_source=ub_text" />
908+
<Spacer y="sm" />
909+
</>
910+
)}
902911
</Container>
903912
);
904913
}

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/DirectPaymentModeScreen.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { Container, Line, ModalHeader } from "../../../components/basic.js";
2727
import { Button } from "../../../components/buttons.js";
2828
import { Text } from "../../../components/text.js";
2929
import { ConnectButton } from "../../ConnectButton.js";
30+
import { PoweredByThirdweb } from "../../PoweredByTW.js";
3031
import { type ERC20OrNativeToken, isNativeToken } from "../nativeToken.js";
3132
import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
3233

@@ -108,7 +109,8 @@ export function DirectPaymentModeScreen(props: {
108109
};
109110

110111
return (
111-
<Container p="lg">
112+
<Container px="lg">
113+
<Spacer y="lg" />
112114
<ModalHeader title={metadata?.name || "Payment Details"} />
113115

114116
<Spacer y="lg" />
@@ -268,6 +270,13 @@ export function DirectPaymentModeScreen(props: {
268270
/>
269271
</div>
270272
)}
273+
<Spacer y="lg" />
274+
{payUiOptions.showThirdwebBranding !== false && (
275+
<>
276+
<PoweredByThirdweb link="https://playground.thirdweb.com/connect/pay?utm_source=ub_text" />
277+
<Spacer y="sm" />
278+
</>
279+
)}
271280
</Container>
272281
);
273282
}

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { Button } from "../../../components/buttons.js";
3030
import { Text } from "../../../components/text.js";
3131
import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
3232
import { ConnectButton } from "../../ConnectButton.js";
33+
import { PoweredByThirdweb } from "../../PoweredByTW.js";
3334
import { OutlineWalletIcon } from "../../icons/OutlineWalletIcon.js";
3435
import { formatTokenBalance } from "../formatTokenBalance.js";
3536
import {
@@ -167,7 +168,8 @@ export function TransactionModeScreen(props: {
167168
balanceQuery.data.value < transactionCostAndData.transactionValueWei;
168169

169170
return (
170-
<Container p="lg">
171+
<Container px="lg">
172+
<Spacer y="lg" />
171173
<ModalHeader title={metadata?.name || "Transaction"} />
172174

173175
<Spacer y="lg" />
@@ -378,6 +380,13 @@ export function TransactionModeScreen(props: {
378380
/>
379381
</div>
380382
)}
383+
<Spacer y="lg" />
384+
{payUiOptions.showThirdwebBranding !== false && (
385+
<>
386+
<PoweredByThirdweb link="https://playground.thirdweb.com/connect/pay?utm_source=ub_text" />
387+
<Spacer y="sm" />
388+
</>
389+
)}
381390
</Container>
382391
);
383392
}

0 commit comments

Comments
 (0)