From c65b415d65b5aa438aae08eea4b92f2e3bc8cb32 Mon Sep 17 00:00:00 2001 From: Neel Ramachandran Date: Thu, 14 Mar 2024 14:47:14 -0500 Subject: [PATCH 1/4] Add theme option --- src/onramp/generateOnRampURL.ts | 2 ++ src/onramp/initOnRamp.ts | 1 + src/types/widget.ts | 3 +++ src/utils/CoinbasePixel.ts | 10 +++++++++- 4 files changed, 15 insertions(+), 1 deletion(-) 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; From 20ca460083818da4e650bda5eb012a315fa116fb Mon Sep 17 00:00:00 2001 From: Neel Ramachandran Date: Thu, 14 Mar 2024 17:19:16 -0500 Subject: [PATCH 2/4] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d11b88c..9361186 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cbpay-js", - "version": "2.0.0", + "version": "2.0.1", "license": "MIT", "main": "dist/index.js", "module": "dist/index.mjs", From 8b94b28b2b1cde10fd8475e376db527d50641450 Mon Sep 17 00:00:00 2001 From: Neel Ramachandran Date: Thu, 14 Mar 2024 17:20:30 -0500 Subject: [PATCH 3/4] update changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35a69fe..b61080d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ All notable changes to this project will be documented in this file. +## [2.0.1] - 2024-03-14 +- Add `theme` parameter + ## [2.0.0] - 2024-01-25 - [BREAKING CHANGE] Rename `onrampToken` parameter to `sessionToken` From 7e7a2d8c4409c4eefd77ee0ebf2c1d78ac490808 Mon Sep 17 00:00:00 2001 From: Neel Ramachandran Date: Thu, 14 Mar 2024 17:24:55 -0500 Subject: [PATCH 4/4] update version --- CHANGELOG.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b61080d..44dfc19 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ All notable changes to this project will be documented in this file. -## [2.0.1] - 2024-03-14 +## [2.1.0] - 2024-03-14 - Add `theme` parameter ## [2.0.0] - 2024-01-25 diff --git a/package.json b/package.json index 9361186..14641c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coinbase/cbpay-js", - "version": "2.0.1", + "version": "2.1.0", "license": "MIT", "main": "dist/index.js", "module": "dist/index.mjs",