Add theme option

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`
 

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",

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<OnRampAppParams, 'destinationWallets'>;
 
 export const generateOnRampURL = ({

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);

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<T> = {
   appId: string;
   host?: string;
   debug?: boolean;
+  theme?: Theme;
   onExit?: (error?: Error) => void;
   onSuccess?: () => void;
   onEvent?: (event: EventMetadata) => void;

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,13 +81,15 @@ export class CoinbasePixel {
     onReady,
     onFallbackOpen,
     debug,
+    theme,
   }: CoinbasePixelConstructorParams) {
     this.host = host;
     this.appId = appId;
     this.appParams = appParams;
     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;