Skip to content

Commit b9b185b

Browse files
joaquim-vergesjoaquim-verges
authored
Add support for cb wallet in react native (#3162)
1 parent 8b606b5 commit b9b185b

File tree

6 files changed

+113
-50
lines changed

6 files changed

+113
-50
lines changed

‎.changeset/fast-toys-remember.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@thirdweb-dev/react-native-adapter": patch
3+
"thirdweb": patch
4+
---
5+
6+
Add support for CB wallet in react native

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
},
3434
"peerDependencies": {
3535
"typescript": ">=5.0.4",
36+
"@coinbase/wallet-mobile-sdk": "^1",
3637
"@react-native-async-storage/async-storage": "^1",
3738
"@react-native-community/netinfo": "^11",
3839
"amazon-cognito-identity-js": "^6",

‎packages/thirdweb/package.json

Lines changed: 18 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -110,54 +110,22 @@
110110
},
111111
"typesVersions": {
112112
"*": {
113-
"adapters/*": [
114-
"./dist/types/exports/adapters/*.d.ts"
115-
],
116-
"auth": [
117-
"./dist/types/exports/auth.d.ts"
118-
],
119-
"chains": [
120-
"./dist/types/exports/chains.d.ts"
121-
],
122-
"contract": [
123-
"./dist/types/exports/contract.d.ts"
124-
],
125-
"deploys": [
126-
"./dist/types/exports/deploys.d.ts"
127-
],
128-
"event": [
129-
"./dist/types/exports/event.d.ts"
130-
],
131-
"extensions/*": [
132-
"./dist/types/exports/extensions/*.d.ts"
133-
],
134-
"pay": [
135-
"./dist/types/exports/pay.d.ts"
136-
],
137-
"react": [
138-
"./dist/types/exports/react.d.ts"
139-
],
140-
"react-native": [
141-
"./dist/types/exports/react-native.d.ts"
142-
],
143-
"rpc": [
144-
"./dist/types/exports/rpc.d.ts"
145-
],
146-
"storage": [
147-
"./dist/types/exports/storage.d.ts"
148-
],
149-
"transaction": [
150-
"./dist/types/exports/transaction.d.ts"
151-
],
152-
"utils": [
153-
"./dist/types/exports/utils.d.ts"
154-
],
155-
"wallets": [
156-
"./dist/types/exports/wallets.d.ts"
157-
],
158-
"wallets/*": [
159-
"./dist/types/exports/wallets/*.d.ts"
160-
]
113+
"adapters/*": ["./dist/types/exports/adapters/*.d.ts"],
114+
"auth": ["./dist/types/exports/auth.d.ts"],
115+
"chains": ["./dist/types/exports/chains.d.ts"],
116+
"contract": ["./dist/types/exports/contract.d.ts"],
117+
"deploys": ["./dist/types/exports/deploys.d.ts"],
118+
"event": ["./dist/types/exports/event.d.ts"],
119+
"extensions/*": ["./dist/types/exports/extensions/*.d.ts"],
120+
"pay": ["./dist/types/exports/pay.d.ts"],
121+
"react": ["./dist/types/exports/react.d.ts"],
122+
"react-native": ["./dist/types/exports/react-native.d.ts"],
123+
"rpc": ["./dist/types/exports/rpc.d.ts"],
124+
"storage": ["./dist/types/exports/storage.d.ts"],
125+
"transaction": ["./dist/types/exports/transaction.d.ts"],
126+
"utils": ["./dist/types/exports/utils.d.ts"],
127+
"wallets": ["./dist/types/exports/wallets.d.ts"],
128+
"wallets/*": ["./dist/types/exports/wallets/*.d.ts"]
161129
}
162130
},
163131
"browser": {
@@ -201,6 +169,7 @@
201169
"peerDependencies": {
202170
"@aws-sdk/client-lambda": "^3",
203171
"@aws-sdk/credential-providers": "^3",
172+
"@coinbase/wallet-mobile-sdk": "^1",
204173
"@react-native-async-storage/async-storage": "^1",
205174
"amazon-cognito-identity-js": "^6",
206175
"aws-amplify": "^5",
@@ -282,6 +251,7 @@
282251
"devDependencies": {
283252
"@aws-sdk/client-lambda": "3.577.0",
284253
"@aws-sdk/credential-providers": "3.577.0",
254+
"@coinbase/wallet-mobile-sdk": "1.0.13",
285255
"@react-native-async-storage/async-storage": "^1.23.1",
286256
"@testing-library/jest-dom": "^6.4.5",
287257
"@testing-library/react": "^15.0.6",

‎packages/thirdweb/src/wallets/coinbase/coinbaseMobileSDK.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { configure } from "@coinbase/wallet-mobile-sdk";
2+
import type { Chain } from "../../chains/types.js";
3+
4+
export async function initMobileProvider(args: {
5+
chain?: Chain;
6+
callbackURL?: string;
7+
hostURL?: string;
8+
hostPackageName?: string;
9+
}) {
10+
configure({
11+
callbackURL: new URL(args.callbackURL || "https://thirdweb.com/wsegue"),
12+
hostURL: new URL(args.hostURL || "https://wallet.coinbase.com/wsegue"),
13+
hostPackageName: args.hostPackageName || "org.toshi",
14+
});
15+
let CoinbaseWalletMobileSDK = (
16+
await import("@coinbase/wallet-mobile-sdk/build/WalletMobileSDKEVMProvider")
17+
).WalletMobileSDKEVMProvider;
18+
if (
19+
typeof CoinbaseWalletMobileSDK !== "function" &&
20+
// @ts-expect-error This import error is not visible to TypeScript
21+
typeof CoinbaseWalletMobileSDK.default === "function"
22+
) {
23+
CoinbaseWalletMobileSDK = (
24+
CoinbaseWalletMobileSDK as unknown as {
25+
default: typeof CoinbaseWalletMobileSDK;
26+
}
27+
).default;
28+
}
29+
return new CoinbaseWalletMobileSDK({
30+
jsonRpcUrl: args.chain?.rpc,
31+
chainId: args.chain?.id,
32+
});
33+
}

‎packages/thirdweb/src/wallets/coinbase/coinbaseSDKWallet.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
stringToHex,
2828
uint8ArrayToHex,
2929
} from "../../utils/encoding/hex.js";
30+
import { isReactNative } from "../../utils/platform.js";
3031
import { parseTypedData } from "../../utils/signatures/helpers/parseTypedData.js";
3132
import { COINBASE } from "../constants.js";
3233
import type {
@@ -87,6 +88,15 @@ export type CoinbaseWalletCreationOptions =
8788
* }
8889
*/
8990
chains?: Chain[];
91+
92+
mobileConfig?: {
93+
/**
94+
* The univeral callback URL to redirect the user to after they have completed the wallet connection with the cb wallet app.
95+
* This needs to be setup as a Universal link for iOS https://docs.cdp.coinbase.com/wallet-sdk/docs/ios-setup/
96+
* and App link on Android https://docs.cdp.coinbase.com/wallet-sdk/docs/android-setup/
97+
*/
98+
callbackURL?: string;
99+
};
90100
}
91101
| undefined;
92102

@@ -123,6 +133,16 @@ async function getCoinbaseProvider(
123133
options?: CreateWalletArgs<typeof COINBASE>[1],
124134
): Promise<ProviderInterface> {
125135
if (!_provider) {
136+
if (isReactNative()) {
137+
const { initMobileProvider } = require("./coinbaseMobileSDK.js");
138+
const mobileProvider = initMobileProvider({
139+
chain: options?.chains ? options.chains[0] : undefined,
140+
...options?.mobileConfig,
141+
});
142+
_provider = mobileProvider;
143+
return mobileProvider;
144+
}
145+
126146
const client = new CoinbaseWalletSDK({
127147
appName: options?.appMetadata?.name || getDefaultAppMetadata().name,
128148
appChainIds: options?.chains

‎pnpm-lock.yaml

Lines changed: 35 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)