Skip to content

Commit 5c6e67e

Browse files
joaquim-vergesjoaquim-verges
committed
[SDK] Improve PayEmbed funnel
1 parent bca7d30 commit 5c6e67e

File tree

17 files changed

+306
-254
lines changed

17 files changed

+306
-254
lines changed

‎.changeset/rich-ducks-ask.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+
Improved PayEmbed funnel

‎packages/thirdweb/package.json‎

Lines changed: 22 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -142,66 +142,26 @@
142142
},
143143
"typesVersions": {
144144
"*": {
145-
"adapters/*": [
146-
"./dist/types/exports/adapters/*.d.ts"
147-
],
148-
"auth": [
149-
"./dist/types/exports/auth.d.ts"
150-
],
151-
"chains": [
152-
"./dist/types/exports/chains.d.ts"
153-
],
154-
"contract": [
155-
"./dist/types/exports/contract.d.ts"
156-
],
157-
"deploys": [
158-
"./dist/types/exports/deploys.d.ts"
159-
],
160-
"event": [
161-
"./dist/types/exports/event.d.ts"
162-
],
163-
"extensions/*": [
164-
"./dist/types/exports/extensions/*.d.ts"
165-
],
166-
"pay": [
167-
"./dist/types/exports/pay.d.ts"
168-
],
169-
"react": [
170-
"./dist/types/exports/react.d.ts"
171-
],
172-
"react-native": [
173-
"./dist/types/exports/react-native.d.ts"
174-
],
175-
"rpc": [
176-
"./dist/types/exports/rpc.d.ts"
177-
],
178-
"storage": [
179-
"./dist/types/exports/storage.d.ts"
180-
],
181-
"transaction": [
182-
"./dist/types/exports/transaction.d.ts"
183-
],
184-
"utils": [
185-
"./dist/types/exports/utils.d.ts"
186-
],
187-
"wallets": [
188-
"./dist/types/exports/wallets.d.ts"
189-
],
190-
"wallets/*": [
191-
"./dist/types/exports/wallets/*.d.ts"
192-
],
193-
"modules": [
194-
"./dist/types/exports/modules.d.ts"
195-
],
196-
"social": [
197-
"./dist/types/exports/social.d.ts"
198-
],
199-
"ai": [
200-
"./dist/types/exports/ai.d.ts"
201-
],
202-
"bridge": [
203-
"./dist/types/exports/bridge.d.ts"
204-
]
145+
"adapters/*": ["./dist/types/exports/adapters/*.d.ts"],
146+
"auth": ["./dist/types/exports/auth.d.ts"],
147+
"chains": ["./dist/types/exports/chains.d.ts"],
148+
"contract": ["./dist/types/exports/contract.d.ts"],
149+
"deploys": ["./dist/types/exports/deploys.d.ts"],
150+
"event": ["./dist/types/exports/event.d.ts"],
151+
"extensions/*": ["./dist/types/exports/extensions/*.d.ts"],
152+
"pay": ["./dist/types/exports/pay.d.ts"],
153+
"react": ["./dist/types/exports/react.d.ts"],
154+
"react-native": ["./dist/types/exports/react-native.d.ts"],
155+
"rpc": ["./dist/types/exports/rpc.d.ts"],
156+
"storage": ["./dist/types/exports/storage.d.ts"],
157+
"transaction": ["./dist/types/exports/transaction.d.ts"],
158+
"utils": ["./dist/types/exports/utils.d.ts"],
159+
"wallets": ["./dist/types/exports/wallets.d.ts"],
160+
"wallets/*": ["./dist/types/exports/wallets/*.d.ts"],
161+
"modules": ["./dist/types/exports/modules.d.ts"],
162+
"social": ["./dist/types/exports/social.d.ts"],
163+
"ai": ["./dist/types/exports/ai.d.ts"],
164+
"bridge": ["./dist/types/exports/bridge.d.ts"]
205165
}
206166
},
207167
"browser": {
@@ -232,8 +192,8 @@
232192
"@radix-ui/react-tooltip": "1.2.3",
233193
"@tanstack/react-query": "5.74.4",
234194
"@thirdweb-dev/insight": "workspace:*",
235-
"@walletconnect/ethereum-provider": "2.19.1",
236-
"@walletconnect/sign-client": "2.19.1",
195+
"@walletconnect/ethereum-provider": "2.20.0",
196+
"@walletconnect/sign-client": "2.20.0",
237197
"abitype": "1.0.8",
238198
"cross-spawn": "7.0.6",
239199
"fuse.js": "7.1.0",

‎packages/thirdweb/src/analytics/track/pay.test.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,10 @@ describe("trackPayEvent", () => {
3535
walletAddress: "0x1234567890123456789012345678901234567890",
3636
walletType: "io.metamask",
3737
fromToken: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
38-
fromAmount: "1000000",
38+
amountWei: "1000000",
3939
toToken: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
40-
toAmount: "1000000",
40+
toChainId: 137,
4141
chainId: 1,
42-
dstChainId: 137,
4342
});
4443

4544
expect(requestBody).toEqual({
@@ -52,7 +51,7 @@ describe("trackPayEvent", () => {
5251
tokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
5352
amountWei: "1000000",
5453
dstTokenAddress: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
55-
dstChainId: 1,
54+
dstChainId: 137,
5655
});
5756
});
5857

@@ -80,11 +79,10 @@ describe("trackPayEvent", () => {
8079
walletAddress: "0x1234567890123456789012345678901234567890",
8180
walletType: "io.metamask",
8281
fromToken: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
83-
fromAmount: "1000000",
82+
amountWei: "1000000",
8483
toToken: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
85-
toAmount: "1000000",
84+
toChainId: 137,
8685
chainId: 1,
87-
dstChainId: 137,
8886
});
8987

9088
expect(requestHeaders?.get("x-client-id")).toEqual("test-client-id");

‎packages/thirdweb/src/analytics/track/pay.ts‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,28 @@ export async function trackPayEvent(args: {
1212
walletAddress?: string;
1313
walletType?: string;
1414
fromToken?: string;
15-
fromAmount?: string;
16-
toToken?: string;
17-
toAmount?: string;
15+
amountWei?: string;
1816
chainId?: number;
19-
dstChainId?: number;
17+
toToken?: string;
18+
toChainId?: number;
2019
error?: string;
2120
}) {
21+
const data = {
22+
source: "pay",
23+
action: args.event,
24+
clientId: args.client.clientId,
25+
chainId: args.chainId,
26+
walletAddress: args.walletAddress,
27+
walletType: args.walletType,
28+
tokenAddress: args.fromToken,
29+
amountWei: args.amountWei,
30+
dstTokenAddress: args.toToken,
31+
dstChainId: args.toChainId,
32+
errorCode: args.error,
33+
};
2234
return track({
2335
client: args.client,
2436
ecosystem: args.ecosystem,
25-
data: {
26-
source: "pay",
27-
action: args.event,
28-
clientId: args.client.clientId,
29-
chainId: args.chainId,
30-
walletAddress: args.walletAddress,
31-
walletType: args.walletType,
32-
tokenAddress: args.fromToken,
33-
amountWei: args.fromAmount,
34-
dstTokenAddress: args.toToken,
35-
dstChainId: args.chainId,
36-
errorCode: args.error,
37-
},
37+
data,
3838
});
3939
}

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export function useSendTransactionCore(args: {
152152
client: tx.client,
153153
walletAddress: account.address,
154154
walletType: wallet?.id,
155-
dstChainId: tx.chain.id,
155+
chainId: tx.chain.id,
156156
event: "pay_transaction_modal_disabled",
157157
});
158158
return sendTransaction({
@@ -188,7 +188,7 @@ export function useSendTransactionCore(args: {
188188
client: tx.client,
189189
walletAddress: account.address,
190190
walletType: wallet?.id,
191-
dstChainId: tx.chain.id,
191+
toChainId: tx.chain.id,
192192
event: "pay_transaction_modal_pay_api_error",
193193
error: err?.message,
194194
});
@@ -221,7 +221,8 @@ export function useSendTransactionCore(args: {
221221
client: tx.client,
222222
walletAddress: account.address,
223223
walletType: wallet?.id,
224-
dstChainId: tx.chain.id,
224+
toChainId: tx.chain.id,
225+
toToken: _erc20Value?.tokenAddress || undefined,
225226
event: "pay_transaction_modal_chain_token_not_supported",
226227
error: `chain ${tx.chain.id} ${_erc20Value ? `/ token ${_erc20Value?.tokenAddress}` : ""} not supported`,
227228
});
@@ -272,7 +273,8 @@ export function useSendTransactionCore(args: {
272273
client: tx.client,
273274
walletAddress: account.address,
274275
walletType: wallet?.id,
275-
dstChainId: tx.chain.id,
276+
toChainId: tx.chain.id,
277+
toToken: _erc20Value?.tokenAddress || undefined,
276278
event: "pay_transaction_modal_has_enough_funds",
277279
});
278280
sendTx();

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js"
88
import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
99
import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
1010
import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js";
11+
import { randomBytesHex } from "../../../../utils/random.js";
1112

1213
/**
1314
* A hook to send a transaction with from the user's connected wallet.
@@ -106,6 +107,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
106107
setRootEl(
107108
<TransactionModal
108109
title={payModal?.metadata?.name || "Transaction"}
110+
txId={randomBytesHex()}
109111
tx={data.tx}
110112
onComplete={data.sendTx}
111113
onClose={() => {

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useQueryClient } from "@tanstack/react-query";
22
import { useCallback, useMemo, useState } from "react";
3+
import { trackPayEvent } from "../../../../../../analytics/track/pay.js";
34
import type { Chain } from "../../../../../../chains/types.js";
45
import { getCachedChain } from "../../../../../../chains/utils.js";
56
import type { ThirdwebClient } from "../../../../../../client/client.js";
@@ -895,6 +896,15 @@ function MainScreen(props: {
895896
backScreen: { id: "main" },
896897
});
897898
}
899+
trackPayEvent({
900+
event: "choose_payment_method_fund_wallet_mode",
901+
client,
902+
walletAddress: payerAccount.address,
903+
toChainId: toChain.id,
904+
toToken: isNativeToken(toToken)
905+
? undefined
906+
: toToken.address,
907+
});
898908
}}
899909
>
900910
Continue

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,8 @@ export function DirectPaymentModeScreen(props: {
250250
client,
251251
walletAddress: payerAccount.address,
252252
walletType: activeWallet?.id,
253+
toChainId: paymentInfo.chain.id,
254+
toToken: paymentInfo.token?.address,
253255
});
254256
onContinue(totalCost, paymentInfo.chain, token);
255257
}}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -356,6 +356,9 @@ export function TransactionModeScreen(props: {
356356
client,
357357
walletAddress: payerAccount.address,
358358
walletType: activeWallet?.id,
359+
toChainId: payUiOptions.transaction.chain.id,
360+
toToken: transactionCostAndData.token.address,
361+
amountWei: totalCostWei.toString(),
359362
});
360363
onContinue(
361364
toTokens(totalCostWei, transactionCostAndData.decimals),

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ChevronDownIcon } from "@radix-ui/react-icons";
22
import { useState } from "react";
3+
import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
34
import type { Chain } from "../../../../../../../chains/types.js";
45
import type { ThirdwebClient } from "../../../../../../../client/client.js";
56
import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
@@ -274,7 +275,17 @@ export function FiatScreenContent(props: {
274275
data-disabled={disableSubmit}
275276
disabled={disableSubmit}
276277
fullWidth
277-
onClick={handleSubmit}
278+
onClick={() => {
279+
trackPayEvent({
280+
event: "confirm_onramp_quote",
281+
client: client,
282+
walletAddress: payer.account.address,
283+
walletType: payer.wallet.id,
284+
toChainId: toChain.id,
285+
toToken: isNativeToken(toToken) ? undefined : toToken.address,
286+
});
287+
handleSubmit();
288+
}}
278289
gap="xs"
279290
>
280291
{fiatQuoteQuery.isLoading ? (

0 commit comments

Comments
 (0)