diff --git a/CHANGELOG.md b/CHANGELOG.md index 35a69fe..44dfc19 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ All notable changes to this project will be documented in this file. +## [2.1.0] - 2024-03-14 +- Add `theme` parameter + ## [2.0.0] - 2024-01-25 - [BREAKING CHANGE] Rename `onrampToken` parameter to `sessionToken` diff --git a/package.json b/package.json index d11b88c..14641c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cbpay-js", - "version": "2.0.0", + "version": "2.1.0", "license": "MIT", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/src/onramp/generateOnRampURL.ts b/src/onramp/generateOnRampURL.ts index 9b5268f..dbeb2a7 100644 --- a/src/onramp/generateOnRampURL.ts +++ b/src/onramp/generateOnRampURL.ts @@ -1,5 +1,6 @@ import { DEFAULT_HOST } from '../config'; import { OnRampAppParams } from '../types/onramp'; +import type { Theme } from '../types/widget'; export type GenerateOnRampURLOptions = { /** This & destinationWallets or sessionToken are required. */ @@ -8,6 +9,7 @@ export type GenerateOnRampURLOptions = { host?: string; /** This or appId & destinationWallets are required. */ sessionToken?: string; + theme?: Theme; } & Omit; export const generateOnRampURL = ({ diff --git a/src/onramp/initOnRamp.ts b/src/onramp/initOnRamp.ts index 9dd52a7..a05b2af 100644 --- a/src/onramp/initOnRamp.ts +++ b/src/onramp/initOnRamp.ts @@ -34,6 +34,7 @@ export const initOnRamp = ( const url = generateOnRampURL({ appId: options.appId, host: options.host, + theme: options.theme, ...widgetParameters, }); window.open(url); diff --git a/src/types/widget.ts b/src/types/widget.ts index 23e456f..9850deb 100644 --- a/src/types/widget.ts +++ b/src/types/widget.ts @@ -6,6 +6,8 @@ export type IntegrationType = 'direct' | 'secure_standalone'; export type Experience = 'embedded' | 'popup' | 'new_tab'; +export type Theme = 'light' | 'dark'; + export type EmbeddedContentStyles = { target?: string; width?: string; @@ -20,6 +22,7 @@ export type CBPayExperienceOptions = { appId: string; host?: string; debug?: boolean; + theme?: Theme; onExit?: (error?: Error) => void; onSuccess?: () => void; onEvent?: (event: EventMetadata) => void; diff --git a/src/utils/CoinbasePixel.ts b/src/utils/CoinbasePixel.ts index 632b0e6..e0199df 100644 --- a/src/utils/CoinbasePixel.ts +++ b/src/utils/CoinbasePixel.ts @@ -1,5 +1,5 @@ import { DEFAULT_HOST } from '../config'; -import { EmbeddedContentStyles, Experience } from 'types/widget'; +import { EmbeddedContentStyles, Experience, Theme } from 'types/widget'; import { createEmbeddedContent, EMBEDDED_IFRAME_ID } from './createEmbeddedContent'; import { JsonObject } from 'types/JsonTypes'; import { broadcastPostMessage, onBroadcastedPostMessage } from './postMessage'; @@ -37,6 +37,7 @@ export type CoinbasePixelConstructorParams = { /** Fallback open callback when the pixel failed to load */ onFallbackOpen?: () => void; debug?: boolean; + theme?: Theme; }; export type OpenExperienceOptions = { @@ -69,6 +70,7 @@ export class CoinbasePixel { /** onReady callback which should be triggered when a nonce has successfully been retrieved */ private onReadyCallback: CoinbasePixelConstructorParams['onReady']; private onFallbackOpen: CoinbasePixelConstructorParams['onFallbackOpen']; + private theme: Theme | null | undefined; public isLoggedIn = false; @@ -79,6 +81,7 @@ export class CoinbasePixel { onReady, onFallbackOpen, debug, + theme, }: CoinbasePixelConstructorParams) { this.host = host; this.appId = appId; @@ -86,6 +89,7 @@ export class CoinbasePixel { this.onReadyCallback = onReady; this.onFallbackOpen = onFallbackOpen; this.debug = debug || false; + this.theme = theme; this.addPixelReadyListener(); this.addErrorListener(); @@ -134,6 +138,10 @@ export class CoinbasePixel { widgetUrl.searchParams.append('appId', this.appId); widgetUrl.searchParams.append('type', 'secure_standalone'); + if (this.theme) { + widgetUrl.searchParams.append('theme', this.theme); + } + const experience = this.isLoggedIn ? experienceLoggedIn : experienceLoggedOut || experienceLoggedIn;