From 17aebb614710520163d5c9d224f719dd0db63ebb Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Mon, 5 Feb 2024 18:46:19 +0530 Subject: [PATCH] Add coinbase injected wallet --- .../react/wallets/coinbase/coinbaseConfig.tsx | 44 +++++++++++++++++++ .../src/react/wallets/defaultWallets.ts | 4 +- packages/thirdweb/src/wallets/index.ts | 8 ++++ .../thirdweb/src/wallets/injected/types.ts | 2 +- .../src/wallets/injected/wallets/coinbase.ts | 40 +++++++++++++++++ 5 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 packages/thirdweb/src/react/wallets/coinbase/coinbaseConfig.tsx create mode 100644 packages/thirdweb/src/wallets/injected/wallets/coinbase.ts diff --git a/packages/thirdweb/src/react/wallets/coinbase/coinbaseConfig.tsx b/packages/thirdweb/src/react/wallets/coinbase/coinbaseConfig.tsx new file mode 100644 index 00000000000..15a61261e32 --- /dev/null +++ b/packages/thirdweb/src/react/wallets/coinbase/coinbaseConfig.tsx @@ -0,0 +1,44 @@ +import { + injectedCoinbaseProvider, + coinbaseMetadata, + coinbaseWallet, +} from "../../../wallets/index.js"; +import type { WalletConfig } from "../../types/wallets.js"; +import { InjectedConnectUI } from "../shared/InjectedConnectUI.js"; + +/** + * Integrate Coinbase wallet connection into your app. + * @example + * ```tsx + * + * wallets={[ coinbaseConfig() ]} + * + * + * ``` + * @returns WalletConfig object to be passed into `ThirdwebProvider` + */ +export const coinbaseConfig = (): WalletConfig => { + return { + metadata: coinbaseMetadata, + create() { + return coinbaseWallet(); + }, + connectUI(props) { + return ( + + ); + }, + isInstalled() { + return !!injectedCoinbaseProvider(); + }, + }; +}; diff --git a/packages/thirdweb/src/react/wallets/defaultWallets.ts b/packages/thirdweb/src/react/wallets/defaultWallets.ts index 177a8d3ab1c..eacee8c12cb 100644 --- a/packages/thirdweb/src/react/wallets/defaultWallets.ts +++ b/packages/thirdweb/src/react/wallets/defaultWallets.ts @@ -1,10 +1,12 @@ import type { WalletConfig } from "../types/wallets.js"; +import { coinbaseConfig } from "./coinbase/coinbaseConfig.js"; import { metamaskConfig } from "./metamask/metamaskConfig.js"; import { rainbowConfig } from "./rainbow/rainbowConfig.js"; import { zerionConfig } from "./zerion/zerionConfig.js"; export const defaultWallets: WalletConfig[] = [ /* @__PURE__ */ metamaskConfig(), - /* @__PURE__ */ zerionConfig(), + /* @__PURE__ */ coinbaseConfig(), /* @__PURE__ */ rainbowConfig(), + /* @__PURE__ */ zerionConfig(), ]; diff --git a/packages/thirdweb/src/wallets/index.ts b/packages/thirdweb/src/wallets/index.ts index 1634fea00c9..86e4df537bd 100644 --- a/packages/thirdweb/src/wallets/index.ts +++ b/packages/thirdweb/src/wallets/index.ts @@ -14,6 +14,8 @@ export { // injected export { injectedWallet } from "./injected/index.js"; +export { getMIPDStore } from "./injected/mipdStore.js"; + export type { WalletRDNS, InjectedWalletOptions, @@ -27,6 +29,12 @@ export { metamaskMetadata, } from "./injected/wallets/metamask.js"; +export { + injectedCoinbaseProvider, + coinbaseMetadata, + coinbaseWallet, +} from "./injected/wallets/coinbase.js"; + export { rainbowWallet, rainbowWalletMetadata, diff --git a/packages/thirdweb/src/wallets/injected/types.ts b/packages/thirdweb/src/wallets/injected/types.ts index 79b9241b304..fe72fbdb791 100644 --- a/packages/thirdweb/src/wallets/injected/types.ts +++ b/packages/thirdweb/src/wallets/injected/types.ts @@ -3,7 +3,7 @@ import type { WalletMetadata } from "../types.js"; export type WalletRDNS = | "io.metamask" - | "com.coinbase" + | "com.coinbase.wallet" | "io.zerion.wallet" | "me.rainbow" // eslint-disable-next-line @typescript-eslint/ban-types diff --git a/packages/thirdweb/src/wallets/injected/wallets/coinbase.ts b/packages/thirdweb/src/wallets/injected/wallets/coinbase.ts new file mode 100644 index 00000000000..02b2c4ccb70 --- /dev/null +++ b/packages/thirdweb/src/wallets/injected/wallets/coinbase.ts @@ -0,0 +1,40 @@ +import type { WalletMetadata } from "../../types.js"; +import { InjectedWallet } from "../index.js"; +import { injectedProvider } from "../mipdStore.js"; +import type { SpecificInjectedWalletOptions } from "../types.js"; + +export const coinbaseMetadata: WalletMetadata = { + id: "com.coinbase.wallet", + name: "Coinbase Wallet", + iconUrl: + "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiByeD0iOCIgZmlsbD0iIzA1NTVGRiIvPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMzMwM184NjM0KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuMzMxMiA0SDM1LjY2NzJDNDAuMjcwNCA0IDQ0IDguMDEyOCA0NCAxMi45NjMyVjM1LjAzNjhDNDQgMzkuOTg3MiA0MC4yNzA0IDQ0IDM1LjY2ODggNDRIMTIuMzMxMkM3LjcyOTYgNDQgNCAzOS45ODcyIDQgMzUuMDM2OFYxMi45NjMyQzQgOC4wMTI4IDcuNzI5NiA0IDEyLjMzMTIgNFoiIGZpbGw9IiMwMDUyRkYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wMDAzIDkuNzkzNDZDMzEuODQ2NyA5Ljc5MzQ2IDM4LjIwNjcgMTYuMTUzNSAzOC4yMDY3IDIzLjk5OTlDMzguMjA2NyAzMS44NDYzIDMxLjg0NjcgMzguMjA2MyAyNC4wMDAzIDM4LjIwNjNDMTYuMTUzOSAzOC4yMDYzIDkuNzkzOTUgMzEuODQ2MyA5Ljc5Mzk1IDIzLjk5OTlDOS43OTM5NSAxNi4xNTM1IDE2LjE1MzkgOS43OTM0NiAyNC4wMDAzIDkuNzkzNDZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIwLjUwMDYgMTkuNDU5SDI3LjQ5NzRDMjguMDczNCAxOS40NTkgMjguNTM5IDE5Ljk2MTQgMjguNTM5IDIwLjU3OVYyNy40MTlDMjguNTM5IDI4LjAzODIgMjguMDcxOCAyOC41MzkgMjcuNDk3NCAyOC41MzlIMjAuNTAwNkMxOS45MjQ2IDI4LjUzOSAxOS40NTkgMjguMDM2NiAxOS40NTkgMjcuNDE5VjIwLjU3OUMxOS40NTkgMTkuOTYxNCAxOS45MjYyIDE5LjQ1OSAyMC41MDA2IDE5LjQ1OVoiIGZpbGw9IiMwMDUyRkYiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8zMzAzXzg2MzQiPgo8cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==", +}; + +/** + * Connect to Injected Coinbase Wallet Provider + * @param options - The options for connecting to the Injected Coinbase Wallet Provider. + * @example + * ```ts + * const wallet = await coinbaseWallet(); + * ``` + * @returns A Promise that resolves to a Wallet instance. + */ +export function coinbaseWallet(options?: SpecificInjectedWalletOptions) { + return new InjectedWallet({ + ...options, + walletId: coinbaseMetadata.id, + metadata: coinbaseMetadata, + }); +} + +/** + * Get the injected Coinbase wallet provider + * @example + * ```ts + * const provider = injectedCoinbaseProvider(); + * ``` + * @returns The injected coinbase wallet provider + */ +export function injectedCoinbaseProvider() { + return injectedProvider(coinbaseMetadata.id); +}