fix(widget): polish configurator (#3380)

* chore: update configurator favicon * chore: fix trade types title * chore: fix widget url * chore: fix reactExample * chore: fix theme auto mode
cowprotocol · Nov 10, 2023 · 21545b9 · 21545b9
1 parent a84e24b
commit 21545b9
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 17 deletions.
diff --git a/apps/widget-configurator/index.html b/apps/widget-configurator/index.html
@@ -5,7 +5,7 @@
     <title>CoW Swap: Widget configurator</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/favicon.png" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/widget-configurator/public/favicon.ico b/apps/widget-configurator/public/favicon.ico
diff --git a/apps/widget-configurator/public/favicon.png b/apps/widget-configurator/public/favicon.png
diff --git a/apps/widget-configurator/src/app/configurator/controls/ThemeControl.tsx b/apps/widget-configurator/src/app/configurator/controls/ThemeControl.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useState } from 'react'
 
 import FormControl from '@mui/material/FormControl'
 import InputLabel from '@mui/material/InputLabel'
@@ -7,21 +7,26 @@ import Select, { SelectChangeEvent } from '@mui/material/Select'
 
 import { ColorModeContext } from '../../../theme/ColorModeContext'
 
+const AUTO = 'auto'
+
 const ThemeOptions = [
-  { label: 'Auto', value: 'auto' },
+  { label: 'Auto', value: AUTO },
   { label: 'Light', value: 'light' },
   { label: 'Dark', value: 'dark' },
 ]
 
 export function ThemeControl() {
   const { mode, toggleColorMode, setAutoMode } = useContext(ColorModeContext)
+  const [isAutoMode, setIsAutoMode] = useState(false)
 
   const handleThemeChange = (event: SelectChangeEvent) => {
     const selectedTheme = event.target.value
-    if (selectedTheme === 'auto') {
+    if (selectedTheme === AUTO) {
       setAutoMode()
+      setIsAutoMode(true)
     } else {
       toggleColorMode()
+      setIsAutoMode(false)
     }
   }
 
@@ -31,7 +36,7 @@ export function ThemeControl() {
       <Select
         labelId="select-theme-label"
         id="select-theme"
-        value={mode}
+        value={isAutoMode ? AUTO : mode}
         onChange={handleThemeChange}
         autoWidth
         label="Theme"

diff --git a/apps/widget-configurator/src/app/configurator/controls/TradeModesControl.tsx b/apps/widget-configurator/src/app/configurator/controls/TradeModesControl.tsx
@@ -10,7 +10,7 @@ import MenuItem from '@mui/material/MenuItem'
 import OutlinedInput from '@mui/material/OutlinedInput'
 import Select, { SelectChangeEvent } from '@mui/material/Select'
 
-const LABEL = 'Trade Modes'
+const LABEL = 'Trade types'
 export function TradeModesControl({ state }: { state: [TradeType[], Dispatch<SetStateAction<TradeType[]>>] }) {
   const [tradeModes, setTradeModes] = state
   const handleTradeModeChange = (event: SelectChangeEvent<TradeType[]>) => {

diff --git a/apps/widget-configurator/src/app/embedDialog/utils/reactExample.ts b/apps/widget-configurator/src/app/embedDialog/utils/reactExample.ts
@@ -6,7 +6,7 @@ import { COMMENTS_BEFORE_PARAMS } from '../const'
 
 export function reactExample(params: CowSwapWidgetParams): string {
   return `
-import { CowSwapWidget } from '@cowprotocol/widget-react'
+import { CowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-react'
 
 // ${COMMENTS_BEFORE_PARAMS}
 const params: CowSwapWidgetParams = ${formatParameters(params)}

diff --git a/libs/widget-lib/src/urlUtils.ts b/libs/widget-lib/src/urlUtils.ts
@@ -1,6 +1,8 @@
 import { COWSWAP_URLS } from './consts'
 import { CowSwapWidgetParams, TradeType } from './types'
 
+const EMPTY_TOKEN = '_'
+
 export function buildWidgetUrl(params: CowSwapWidgetParams): string {
   const host = COWSWAP_URLS[params.env || 'prod']
   const path = buildWidgetPath(params)
@@ -12,16 +14,7 @@ export function buildWidgetUrl(params: CowSwapWidgetParams): string {
 export function buildWidgetPath(params: CowSwapWidgetParams): string {
   const { chainId = 1, sell, buy, tradeType = TradeType.SWAP } = params
 
-  const assets = []
-  if (sell?.asset) {
-    assets.push(sell.asset)
-  }
-
-  if (buy?.asset) {
-    assets.push(buy.asset)
-  }
-
-  const assetsPath = assets.map(encodeURIComponent).join('/')
+  const assetsPath = [sell?.asset || EMPTY_TOKEN, buy?.asset || EMPTY_TOKEN].map(encodeURIComponent).join('/')
 
   return `/${chainId}/widget/${tradeType}/${assetsPath}`
 }