Skip to content

Commit d742f6c

Browse files
joaquim-vergesjoaquim-verges
committed
feat: support for enclave migration in React Native
1 parent a1a6574 commit d742f6c

29 files changed

+883
-643
lines changed

‎.changeset/chilly-mangos-decide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@thirdweb-dev/react-native-adapter": minor
3+
---
4+
5+
Updated required dependencies

‎.changeset/soft-colts-eat.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"thirdweb": minor
3+
---
4+
5+
Support for enclave wallet migration in React Native
6+
7+
this change requires the latest version of the `@thirdweb-dev/react-native-adapter` package to be installed.

‎packages/react-native-adapter/package.json‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,11 @@
2323
},
2424
"./package.json": "./package.json"
2525
},
26-
"files": [
27-
"dist/*",
28-
"src/*"
29-
],
26+
"files": ["dist/*", "src/*"],
3027
"dependencies": {
31-
"@aws-sdk/client-lambda": "3.659.0",
32-
"@aws-sdk/credential-providers": "3.658.1",
28+
"@aws-sdk/client-kms": "3.668.0",
29+
"@aws-sdk/client-lambda": "3.668.0",
30+
"@aws-sdk/credential-providers": "3.668.0",
3331
"@mobile-wallet-protocol/client": "0.0.3",
3432
"@walletconnect/react-native-compat": "2.16.3"
3533
},

‎packages/thirdweb/package.json‎

Lines changed: 24 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -127,60 +127,24 @@
127127
},
128128
"typesVersions": {
129129
"*": {
130-
"adapters/*": [
131-
"./dist/types/exports/adapters/*.d.ts"
132-
],
133-
"auth": [
134-
"./dist/types/exports/auth.d.ts"
135-
],
136-
"chains": [
137-
"./dist/types/exports/chains.d.ts"
138-
],
139-
"contract": [
140-
"./dist/types/exports/contract.d.ts"
141-
],
142-
"deploys": [
143-
"./dist/types/exports/deploys.d.ts"
144-
],
145-
"event": [
146-
"./dist/types/exports/event.d.ts"
147-
],
148-
"extensions/*": [
149-
"./dist/types/exports/extensions/*.d.ts"
150-
],
151-
"pay": [
152-
"./dist/types/exports/pay.d.ts"
153-
],
154-
"react": [
155-
"./dist/types/exports/react.d.ts"
156-
],
157-
"react-native": [
158-
"./dist/types/exports/react-native.d.ts"
159-
],
160-
"rpc": [
161-
"./dist/types/exports/rpc.d.ts"
162-
],
163-
"storage": [
164-
"./dist/types/exports/storage.d.ts"
165-
],
166-
"transaction": [
167-
"./dist/types/exports/transaction.d.ts"
168-
],
169-
"utils": [
170-
"./dist/types/exports/utils.d.ts"
171-
],
172-
"wallets": [
173-
"./dist/types/exports/wallets.d.ts"
174-
],
175-
"wallets/*": [
176-
"./dist/types/exports/wallets/*.d.ts"
177-
],
178-
"modules": [
179-
"./dist/types/exports/modules.d.ts"
180-
],
181-
"social": [
182-
"./dist/types/exports/social.d.ts"
183-
]
130+
"adapters/*": ["./dist/types/exports/adapters/*.d.ts"],
131+
"auth": ["./dist/types/exports/auth.d.ts"],
132+
"chains": ["./dist/types/exports/chains.d.ts"],
133+
"contract": ["./dist/types/exports/contract.d.ts"],
134+
"deploys": ["./dist/types/exports/deploys.d.ts"],
135+
"event": ["./dist/types/exports/event.d.ts"],
136+
"extensions/*": ["./dist/types/exports/extensions/*.d.ts"],
137+
"pay": ["./dist/types/exports/pay.d.ts"],
138+
"react": ["./dist/types/exports/react.d.ts"],
139+
"react-native": ["./dist/types/exports/react-native.d.ts"],
140+
"rpc": ["./dist/types/exports/rpc.d.ts"],
141+
"storage": ["./dist/types/exports/storage.d.ts"],
142+
"transaction": ["./dist/types/exports/transaction.d.ts"],
143+
"utils": ["./dist/types/exports/utils.d.ts"],
144+
"wallets": ["./dist/types/exports/wallets.d.ts"],
145+
"wallets/*": ["./dist/types/exports/wallets/*.d.ts"],
146+
"modules": ["./dist/types/exports/modules.d.ts"],
147+
"social": ["./dist/types/exports/social.d.ts"]
184148
}
185149
},
186150
"browser": {
@@ -270,6 +234,9 @@
270234
"@aws-sdk/client-lambda": {
271235
"optional": true
272236
},
237+
"@aws-sdk/client-kms": {
238+
"optional": true
239+
},
273240
"@aws-sdk/credential-providers": {
274241
"optional": true
275242
},
@@ -315,8 +282,9 @@
315282
"node": ">=18"
316283
},
317284
"devDependencies": {
318-
"@aws-sdk/client-lambda": "3.659.0",
319-
"@aws-sdk/credential-providers": "3.658.1",
285+
"@aws-sdk/client-kms": "3.668.0",
286+
"@aws-sdk/client-lambda": "3.668.0",
287+
"@aws-sdk/credential-providers": "3.668.0",
320288
"@biomejs/biome": "1.9.2",
321289
"@chromatic-com/storybook": "2.0.2",
322290
"@codspeed/vitest-plugin": "3.1.1",

‎packages/thirdweb/src/react/native/ui/components/WalletImage.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useQuery } from "@tanstack/react-query";
2+
import type { ThirdwebClient } from "../../../../client/client.js";
3+
import { resolveScheme } from "../../../../utils/ipfs.js";
24
import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
35
import { getWalletInfo } from "../../../../wallets/__generated__/getWalletInfo.js";
46
import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -25,10 +27,11 @@ import { RNImage } from "./RNImage.js";
2527
export const WalletImage = (props: {
2628
theme: Theme;
2729
wallet: Wallet;
30+
client: ThirdwebClient;
2831
size: number;
2932
avatar?: string | null;
3033
}) => {
31-
const { wallet, avatar, size } = props;
34+
const { wallet, avatar, size, client } = props;
3235

3336
const { data: imageData } = useQuery({
3437
queryKey: ["wallet-image", wallet.id, wallet.getAccount()?.address],
@@ -55,7 +58,7 @@ export const WalletImage = (props: {
5558
try {
5659
const externalWalletImage = await getWalletInfo(activeEOAId, true);
5760
if (externalWalletImage) {
58-
return externalWalletImage;
61+
return resolveScheme({ client, uri: externalWalletImage });
5962
}
6063
} catch {}
6164

‎packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
22
import { Platform, StyleSheet, View } from "react-native";
33
import { SvgXml } from "react-native-svg";
44
import type { Chain } from "../../../../chains/types.js";
5+
import type { ThirdwebClient } from "../../../../client/client.js";
56
import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/types.js";
67
import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/types.js";
78
import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -269,6 +270,7 @@ export function ConnectModal(
269270
<WalletLoadingView
270271
theme={theme}
271272
wallet={modalState.wallet}
273+
client={client}
272274
authProvider={modalState.authMethod}
273275
/>
274276
{containerType === "modal" ? (
@@ -328,6 +330,7 @@ export function ConnectModal(
328330
)}
329331
<SignInView
330332
theme={theme}
333+
client={client}
331334
siweAuth={siweAuth}
332335
onSignIn={() => props.onClose?.()}
333336
onError={(error) => setModalState({ screen: "error", error })}
@@ -462,10 +465,12 @@ export function ConnectModal(
462465
function WalletLoadingView({
463466
theme,
464467
wallet,
468+
client,
465469
authProvider,
466470
}: {
467471
theme: Theme;
468472
wallet: Wallet;
473+
client: ThirdwebClient;
469474
authProvider?: InAppWalletAuth;
470475
}) {
471476
const walletInfo = useWalletInfo(wallet.id);
@@ -500,7 +505,12 @@ function WalletLoadingView({
500505
/>
501506
</View>
502507
) : (
503-
<WalletImage theme={theme} size={90} wallet={wallet} />
508+
<WalletImage
509+
theme={theme}
510+
size={90}
511+
wallet={wallet}
512+
client={client}
513+
/>
504514
)}
505515
</WalletLoadingThumbnail>
506516
<Spacer size="xl" />
@@ -522,12 +532,14 @@ function WalletLoadingView({
522532
function SignInView({
523533
theme,
524534
siweAuth,
535+
client,
525536
onSignIn,
526537
onError,
527538
onDisconnect,
528539
}: {
529540
theme: Theme;
530541
siweAuth: ReturnType<typeof useSiweAuth>;
542+
client: ThirdwebClient;
531543
onSignIn: () => void;
532544
onError: (error: string) => void;
533545
onDisconnect: () => void;
@@ -552,7 +564,12 @@ function SignInView({
552564
imageSize={100}
553565
animate={isSigningIn}
554566
>
555-
<WalletImage theme={theme} size={90} wallet={wallet} />
567+
<WalletImage
568+
theme={theme}
569+
size={90}
570+
wallet={wallet}
571+
client={client}
572+
/>
556573
</WalletLoadingThumbnail>
557574
<Spacer size="xl" />
558575
<ThemedText theme={theme} type="subtitle">

‎packages/thirdweb/src/react/native/ui/connect/ConnectedButton.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function ConnectedButton(
2020
},
2121
) {
2222
const theme = parseTheme(props.theme);
23-
const { account, wallet } = props;
23+
const { account, wallet, client } = props;
2424
const walletChain = useActiveWalletChain();
2525
const { pfp, name, balanceQuery } = useConnectedWalletDetails(
2626
props.client,
@@ -40,7 +40,13 @@ export function ConnectedButton(
4040
}}
4141
>
4242
<View style={styles.row}>
43-
<WalletImage theme={theme} size={40} wallet={wallet} avatar={pfp} />
43+
<WalletImage
44+
theme={theme}
45+
size={40}
46+
wallet={wallet}
47+
avatar={pfp}
48+
client={client}
49+
/>
4450
<View style={styles.col}>
4551
<ThemedText
4652
theme={theme}

‎packages/thirdweb/src/react/native/ui/connect/ConnectedModal.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ export function ConnectedModal(props: ConnectedModalProps) {
8585
<ReceiveScreen
8686
account={props.account}
8787
wallet={props.wallet}
88+
client={props.client}
8889
theme={theme}
8990
containerType={props.containerType}
9091
onBack={() => setModalState({ screen: "account" })}
@@ -161,7 +162,7 @@ export function ConnectedModal(props: ConnectedModalProps) {
161162
}
162163

163164
const AccountHeader = (props: ConnectedModalProps) => {
164-
const { account, wallet, theme } = props;
165+
const { account, wallet, theme, client } = props;
165166
const walletChain = useActiveWalletChain();
166167
const { pfp, name, balanceQuery } = useConnectedWalletDetails(
167168
props.client,
@@ -171,7 +172,13 @@ const AccountHeader = (props: ConnectedModalProps) => {
171172
);
172173
return (
173174
<View style={styles.accountHeaderContainer}>
174-
<WalletImage theme={theme} size={70} wallet={wallet} avatar={pfp} />
175+
<WalletImage
176+
theme={theme}
177+
size={70}
178+
wallet={wallet}
179+
avatar={pfp}
180+
client={client}
181+
/>
175182
<SmartAccountBadge client={props.client} theme={theme} />
176183
<Spacer size="smd" />
177184
<Address account={account} theme={theme} addressOrENS={name} />

‎packages/thirdweb/src/react/native/ui/connect/ReceiveScreen.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { StyleSheet, View } from "react-native";
2+
import type { ThirdwebClient } from "../../../../client/client.js";
23
import { shortenAddress } from "../../../../utils/address.js";
34
import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
45
import type { Theme } from "../../../core/design-system/index.js";
@@ -16,10 +17,12 @@ type ReceiveScreenProps = {
1617
onClose?: () => void;
1718
onBack?: () => void;
1819
containerType: ContainerType;
20+
client: ThirdwebClient;
1921
};
2022

2123
export const ReceiveScreen = (props: ReceiveScreenProps) => {
22-
const { wallet, account, theme, onClose, onBack, containerType } = props;
24+
const { wallet, account, theme, onClose, onBack, containerType, client } =
25+
props;
2326

2427
return (
2528
<>
@@ -32,7 +35,7 @@ export const ReceiveScreen = (props: ReceiveScreenProps) => {
3235
/>
3336
<View style={styles.container}>
3437
{/* TODO (rn) QR code scanning */}
35-
<WalletImage theme={theme} wallet={wallet} size={80} />
38+
<WalletImage theme={theme} wallet={wallet} size={80} client={client} />
3639
<Spacer size="lg" />
3740
<View
3841
style={[

‎packages/thirdweb/src/wallets/in-app/web/lib/actions/generate-wallet.enclave.ts‎ renamed to ‎packages/thirdweb/src/wallets/in-app/core/actions/generate-wallet.enclave.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import type { ThirdwebClient } from "../../../../../client/client.js";
2-
import { getThirdwebBaseUrl } from "../../../../../utils/domains.js";
3-
import { getClientFetch } from "../../../../../utils/fetch.js";
4-
import type { Ecosystem } from "../../../core/wallet/types.js";
1+
import type { ThirdwebClient } from "../../../../client/client.js";
2+
import { getThirdwebBaseUrl } from "../../../../utils/domains.js";
3+
import { getClientFetch } from "../../../../utils/fetch.js";
4+
import type { UserWallet } from "../wallet/enclave-wallet.js";
5+
import type { Ecosystem } from "../wallet/types.js";
56

67
/**
78
* Generate a new enclave wallet using an auth token
@@ -34,10 +35,7 @@ export async function generateWallet({
3435
}
3536

3637
const { wallet } = (await response.json()) as {
37-
wallet: {
38-
address: string;
39-
type: "enclave";
40-
};
38+
wallet: UserWallet;
4139
};
4240

4341
return wallet;

0 commit comments

Comments
 (0)