Skip to content

Commit c271ec6

Browse files
joaquim-vergesjoaquim-verges
authored
[SDK] Update WalletConnect to v2.20.1 and improve PayEmbed funnel (#6906)
1 parent bca7d30 commit c271ec6

File tree

18 files changed

+306
-260
lines changed

18 files changed

+306
-260
lines changed

‎.changeset/rich-ducks-ask.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Updated Wallet Connect to 2.20.1

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

-6
Original file line numberDiff line numberDiff line change
@@ -182,12 +182,6 @@ export function RightSection(props: {
182182
}}
183183
locale={connectOptions.localeId}
184184
auth={connectOptions.enableAuth ? playgroundAuth : undefined}
185-
chains={[
186-
sepolia,
187-
baseSepolia,
188-
optimismSepolia,
189-
arbitrumSepolia,
190-
]}
191185
accountAbstraction={
192186
connectOptions.enableAccountAbstraction
193187
? {

‎packages/thirdweb/package.json

+22-62
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.1",
196+
"@walletconnect/sign-client": "2.20.1",
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

+5-7
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

+17-17
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

+6-4
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

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useContext } from "react";
2+
import { randomBytesHex } from "../../../../utils/random.js";
23
import {
34
type SendTransactionConfig,
45
type ShowModalData,
@@ -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

+10
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

+2
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

+3
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

+12-1
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 ? (

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

+12-13
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,9 @@ function useOnRampScreenState(props: {
398398
client: props.client,
399399
walletAddress: props.payer.account.address,
400400
walletType: props.payer.wallet.id,
401+
toChainId: props.quote.onRampToken.token.chainId,
402+
toToken: props.quote.onRampToken.token.tokenAddress,
403+
amountWei: props.quote.onRampToken.amountWei,
401404
});
402405
setPopupWindow(popup);
403406
addPendingTx({
@@ -679,11 +682,10 @@ function useSwapMutation(props: {
679682
walletAddress: account.address,
680683
walletType: props.payer.wallet.id,
681684
fromToken: quote.swapDetails.fromToken.tokenAddress,
682-
fromAmount: quote.swapDetails.fromAmountWei,
683-
toToken: quote.swapDetails.toToken.tokenAddress,
684-
toAmount: quote.swapDetails.toAmountWei,
685685
chainId: quote.swapDetails.fromToken.chainId,
686-
dstChainId: quote.swapDetails.toToken.chainId,
686+
amountWei: quote.swapDetails.fromAmountWei,
687+
toToken: quote.swapDetails.toToken.tokenAddress,
688+
toChainId: quote.swapDetails.toToken.chainId,
687689
});
688690

689691
const transaction = approve({
@@ -705,11 +707,10 @@ function useSwapMutation(props: {
705707
walletAddress: account.address,
706708
walletType: props.payer.wallet.id,
707709
fromToken: quote.swapDetails.fromToken.tokenAddress,
708-
fromAmount: quote.swapDetails.fromAmountWei,
710+
amountWei: quote.swapDetails.fromAmountWei,
709711
toToken: quote.swapDetails.toToken.tokenAddress,
710-
toAmount: quote.swapDetails.toAmountWei,
711712
chainId: quote.swapDetails.fromToken.chainId,
712-
dstChainId: quote.swapDetails.toToken.chainId,
713+
toChainId: quote.swapDetails.toToken.chainId,
713714
});
714715
}
715716

@@ -719,11 +720,10 @@ function useSwapMutation(props: {
719720
walletAddress: account.address,
720721
walletType: props.payer.wallet.id,
721722
fromToken: quote.swapDetails.fromToken.tokenAddress,
722-
fromAmount: quote.swapDetails.fromAmountWei,
723+
amountWei: quote.swapDetails.fromAmountWei,
723724
toToken: quote.swapDetails.toToken.tokenAddress,
724-
toAmount: quote.swapDetails.toAmountWei,
725725
chainId: quote.swapDetails.fromToken.chainId,
726-
dstChainId: quote.swapDetails.toToken.chainId,
726+
toChainId: quote.swapDetails.toToken.chainId,
727727
});
728728
const tx = quote.transactionRequest;
729729
let _swapTx: WaitForReceiptOptions;
@@ -754,11 +754,10 @@ function useSwapMutation(props: {
754754
walletAddress: account.address,
755755
walletType: props.payer.wallet.id,
756756
fromToken: quote.swapDetails.fromToken.tokenAddress,
757-
fromAmount: quote.swapDetails.fromAmountWei,
757+
amountWei: quote.swapDetails.fromAmountWei,
758758
toToken: quote.swapDetails.toToken.tokenAddress,
759-
toAmount: quote.swapDetails.toAmountWei,
759+
toChainId: quote.swapDetails.toToken.chainId,
760760
chainId: quote.swapDetails.fromToken.chainId,
761-
dstChainId: quote.swapDetails.toToken.chainId,
762761
});
763762

764763
// do not add pending tx if the swap is part of fiat flow

0 commit comments

Comments
 (0)