feat: simplify theme config

apps/cowswap-frontend/src/modules/injectedWidget/hooks/useInjectedWidgetPalette.ts

@@ -6,5 +6,9 @@ import { useInjectedWidgetParams } from './useInjectedWidgetParams'
 export function useInjectedWidgetPalette(): CowSwapWidgetPalette | undefined {
   const state = useInjectedWidgetParams()
 
-  return state.palette
+  return isCowSwapWidgetPallet(state.theme) ? state.theme : undefined
+}
+
+function isCowSwapWidgetPallet(palette: any): palette is CowSwapWidgetPalette {
+  return palette && typeof palette === 'object'
 }

apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts

@@ -35,14 +35,15 @@ export function useWidgetParamsAndSettings(
       width: '450px',
       height: '640px',
       provider,
-      theme,
       chainId,
       env: getEnv(),
       tradeType: currentTradeType,
       sell: { asset: sellToken, amount: sellTokenAmount ? sellTokenAmount.toString() : undefined },
       buy: { asset: buyToken, amount: buyTokenAmount?.toString() },
       enabledTradeTypes,
-      // palette: {
+      theme,
+      // theme: {
+      //   baseTheme: theme,
       //   primaryColor: '#d9258e',
       //   screenBackground: '#ee00cd',
       //   widgetBackground: '#b900ff',

apps/widget-configurator/src/app/embedDialog/const.ts

@@ -8,7 +8,7 @@ export const COMMENTS_BY_PARAM_NAME: Record<string, string> = {
   provider:
     'Ethereum EIP-1193 provider. For a quick test, you can pass `window.ethereum`, but consider using something like https://web3modal.com',
   chainId: '1 (Mainnet), 5 (Goerli), 100 (Gnosis)',
-  theme: 'light or dark',
+  theme: 'light/dark or provide your own color palette',
   tradeType: 'swap, limit or advanced',
   sell: 'Sell token. Optionally add amount for sell orders',
   buy: 'Buy token. Optionally add amount for buy orders',

libs/widget-lib/src/types.ts

@@ -60,6 +60,7 @@ export enum TradeType {
 }
 
 export interface CowSwapWidgetPalette {
+  baseTheme: CowSwapTheme
   primaryColor: string
   screenBackground: string
   widgetBackground: string
@@ -111,7 +112,7 @@ interface CowSwapWidgetConfig {
   /**
    * The theme of the widget UI.
    */
-  theme: CowSwapTheme
+  theme: CowSwapTheme | CowSwapWidgetPalette
 
   /**
    * Allows to set a custom logo for the widget.
@@ -133,11 +134,6 @@ interface CowSwapWidgetConfig {
    */
   enabledTradeTypes: TradeType[]
 
-  /**
-   * Colors palette to customize the widget UI.
-   */
-  palette: CowSwapWidgetPalette
-
   /**
    * The interface fee in basis points.
    * For example: 1.5% = 150 bips

libs/widget-lib/src/urlUtils.ts

@@ -39,7 +39,7 @@ export function buildTradeAmountsQuery(params: CowSwapWidgetParams): URLSearchPa
   }
 
   if (theme) {
-    query.append('theme', theme)
+    query.append('theme', typeof theme === 'string' ? theme : theme.baseTheme)
   }
 
   return query