ci: deploy widget-configurator for pr (#3265)

apps/cowswap-frontend/index.html

@@ -10,6 +10,7 @@
     />
 
     <script src="/emergency.js"></script>
+
     <!-- Manifest, theme & colors  -->
     <link rel="manifest" href="manifest.json" />
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />

apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 
 import {
   Dimensions,
@@ -21,6 +21,8 @@ import ReactGA from 'react-ga4'
 import { useLocation } from 'react-router-dom'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
+import { useInjectedWidgetMetaData } from 'modules/injectedWidget'
+
 import { useGetMarketDimension } from './useGetMarketDimension'
 
 export function sendTiming(timingCategory: any, timingVar: any, timingValue: any, timingLabel: any) {
@@ -58,6 +60,7 @@ export function useAnalyticsReporter() {
   const { connector } = useWeb3React()
   const { chainId, account } = useWalletInfo()
   const { walletName: _walletName } = useWalletDetails()
+  const injectedWidgetMetaData = useInjectedWidgetMetaData()
   const prevAccount = usePrevious(account)
 
   const marketDimension = useGetMarketDimension()
@@ -73,6 +76,11 @@ export function useAnalyticsReporter() {
 
   const walletName = _walletName || getConnectionName(connection.type, isMetaMask)
 
+  const injectedWidgetAppId = useMemo(
+    () => (injectedWidgetMetaData ? `${injectedWidgetMetaData.appKey}:${injectedWidgetMetaData.url}` : ''),
+    [injectedWidgetMetaData]
+  )
+
   useEffect(() => {
     // Custom dimension 2 - walletname
     googleAnalytics.setDimension(Dimensions.walletName, account ? walletName : 'Not connected')
@@ -93,6 +101,11 @@ export function useAnalyticsReporter() {
     googleAnalytics.setDimension(Dimensions.market, marketDimension)
   }, [marketDimension])
 
+  useEffect(() => {
+    // Custom dimension 6 - injected widget app id
+    googleAnalytics.setDimension(Dimensions.injectedWidgetAppId, injectedWidgetAppId)
+  }, [injectedWidgetAppId])
+
   useEffect(() => {
     googleAnalytics.pageview(`${pathname}${search}`)
   }, [pathname, search])

apps/cowswap-frontend/src/modules/appData/hooks.ts

@@ -5,19 +5,19 @@ import { DEFAULT_APP_CODE, SAFE_APP_CODE } from '@cowprotocol/common-const'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { useIsSafeApp } from '@cowprotocol/wallet'
 
+import { useInjectedWidgetMetaData } from 'modules/injectedWidget'
+
 import { addAppDataToUploadQueueAtom, appDataHooksAtom, appDataInfoAtom } from './state/atoms'
 import { AppDataInfo } from './types'
 
-import { injectedWidgetMetaDataAtom } from '../injectedWidget/state/injectedWidgetMetaDataAtom'
-
 const APP_CODE = process.env.REACT_APP_APP_CODE
 
 export function useAppData(): AppDataInfo | null {
   return useAtomValue(appDataInfoAtom)
 }
 
 export function useAppCode(): string | null {
-  const injectedWidgetMetaData = useAtomValue(injectedWidgetMetaDataAtom)
+  const injectedWidgetMetaData = useInjectedWidgetMetaData()
   const isSafeApp = useIsSafeApp()
 
   return useMemo(() => {

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

@@ -0,0 +1,7 @@
+import { useAtomValue } from 'jotai'
+
+import { InjectedWidgetMetaData, injectedWidgetMetaDataAtom } from '../state/injectedWidgetMetaDataAtom'
+
+export function useInjectedWidgetMetaData(): InjectedWidgetMetaData | null {
+  return useAtomValue(injectedWidgetMetaDataAtom)
+}

apps/cowswap-frontend/src/modules/injectedWidget/index.ts

@@ -1,2 +1,3 @@
-export * from './updaters/InjectedWidgetUpdater'
-export * from './hooks/useInjectedWidgetParams'
+export { InjectedWidgetUpdater } from './updaters/InjectedWidgetUpdater'
+export { useInjectedWidgetParams } from './hooks/useInjectedWidgetParams'
+export { useInjectedWidgetMetaData } from './hooks/useInjectedWidgetMetaData'

apps/cowswap-frontend/src/modules/injectedWidget/updaters/IframeResizer.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useLayoutEffect, useRef } from 'react'
 
 import { COW_SWAP_WIDGET_EVENT_KEY } from '../consts'
 import { useInjectedWidgetParams } from '../hooks/useInjectedWidgetParams'
@@ -9,7 +9,7 @@ export function IframeResizer() {
   const { dynamicHeightEnabled } = useInjectedWidgetParams()
   const previousHeightRef = useRef(0)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!dynamicHeightEnabled) return
 
     // Initial height calculation and message

apps/cowswap-frontend/src/modules/limitOrders/hooks/useLimitOrdersDerivedState.ts

@@ -1,6 +1,8 @@
 import { useAtomValue, useSetAtom } from 'jotai'
 import { useEffect } from 'react'
 
+import { isInjectedWidget } from '@cowprotocol/common-utils'
+
 import {
   LimitOrdersDerivedState,
   limitOrdersDerivedStateAtom,
@@ -17,7 +19,7 @@ export function useFillLimitOrdersDerivedState() {
   const rawState = useAtomValue(limitOrdersRawStateAtom)
   const updateDerivedState = useSetAtom(limitOrdersDerivedStateAtom)
 
-  const isUnlocked = rawState.isUnlocked
+  const isUnlocked = rawState.isUnlocked || isInjectedWidget()
   const derivedState = useBuildTradeDerivedState(limitOrdersRawStateAtom)
 
   useEffect(() => {

apps/widget-configurator/project.json

@@ -9,7 +9,7 @@
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
-        "outputPath": "dist/apps/widget-configurator"
+        "outputPath": "build/widget-configurator"
       },
       "configurations": {
         "development": {

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

@@ -8,10 +8,10 @@ import EventEmitter from 'events'
 
 const onDisconnect = new EventEmitter()
 
-export function useProvider(): EthereumProvider | null {
+export function useProvider(): EthereumProvider | undefined {
   const config = useConfig()
   const { isDisconnected } = useAccount()
-  const [provider, setProvider] = useState<EthereumProvider | null>(null)
+  const [provider, setProvider] = useState<EthereumProvider | undefined>(undefined)
 
   useEffect(() => {
     return config.subscribe(({ connector }) => {
@@ -38,7 +38,7 @@ function getEthereumProvider(provider: EthereumProvider, onDisconnect: EventEmit
     enable(...args) {
       return provider.enable(...args)
     },
-    on(event: string, args: unknown) {
+    on(event: string, args: never) {
       if (event === 'disconnect' || event === 'close') {
         return onDisconnect.on('disconnect', args)
       } else {

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

@@ -1,15 +1,26 @@
 import { useMemo } from 'react'
 
-import { CowSwapWidgetParams, CowSwapWidgetSettings, EthereumProvider } from '@cowprotocol/widget-lib'
+import { CowSwapWidgetEnv, CowSwapWidgetParams, CowSwapWidgetSettings, EthereumProvider } from '@cowprotocol/widget-lib'
 
+import { isDev, isLocalHost, isVercel } from '../../../env'
 import { ConfiguratorState } from '../types'
 
+const getEnv = (): CowSwapWidgetEnv => {
+  if (isLocalHost) return 'local'
+  if (isDev) return 'dev'
+  if (isVercel) return 'pr'
+
+  return 'prod'
+}
+
 export function useWidgetParamsAndSettings(
-  provider: EthereumProvider | null,
-  widgetContainer: HTMLDivElement,
+  provider: EthereumProvider | undefined,
+  widgetContainer: HTMLDivElement | null,
   configuratorState: ConfiguratorState
 ) {
   return useMemo(() => {
+    if (!widgetContainer) return null
+
     const {
       chainId,
       theme,
@@ -19,7 +30,7 @@ export function useWidgetParamsAndSettings(
       sellTokenAmount,
       buyToken,
       buyTokenAmount,
-      isDynamicHeightEnabled,
+      dynamicHeightEnabled,
     } = configuratorState
 
     const params: CowSwapWidgetParams = {
@@ -34,15 +45,15 @@ export function useWidgetParamsAndSettings(
       urlParams: {
         theme,
         chainId,
-        env: 'local',
+        env: getEnv(),
         tradeType: currentTradeType,
         tradeAssets: {
           sell: { asset: sellToken, amount: sellTokenAmount ? sellTokenAmount.toString() : undefined },
-          buy: { asset: buyToken, amount: buyTokenAmount.toString() },
+          buy: { asset: buyToken, amount: buyTokenAmount?.toString() },
         },
       },
       appParams: {
-        dynamicHeightEnabled: isDynamicHeightEnabled,
+        dynamicHeightEnabled,
         enabledTradeTypes,
       },
     }

apps/widget-configurator/src/app/configurator/index.tsx

@@ -5,10 +5,8 @@ import { cowSwapWidget, EthereumProvider, TradeType, UpdateWidgetCallback } from
 import WalletIcon from '@mui/icons-material/Wallet'
 import LoadingButton from '@mui/lab/LoadingButton'
 import Box from '@mui/material/Box'
-import Checkbox from '@mui/material/Checkbox'
 import Divider from '@mui/material/Divider'
 import Drawer from '@mui/material/Drawer'
-import FormControlLabel from '@mui/material/FormControlLabel'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 
@@ -60,8 +58,6 @@ export function Configurator({ title }: { title: string }) {
   const iframeContainerRef = useRef<HTMLDivElement>(null)
   const updateWidgetRef = useRef<UpdateWidgetCallback | null>(null)
 
-  const [isDynamicHeightEnabled, setDynamicHeightEnabled] = useState(true)
-
   const provider = useProvider()
   const providerRef = useRef<EthereumProvider | null>()
 
@@ -74,13 +70,14 @@ export function Configurator({ title }: { title: string }) {
     sellTokenAmount,
     buyToken,
     buyTokenAmount,
-    isDynamicHeightEnabled,
+    dynamicHeightEnabled: true,
   }
 
-  const { params, settings } = useWidgetParamsAndSettings(provider, iframeContainerRef.current, state)
+  const paramsAndSettings = useWidgetParamsAndSettings(provider, iframeContainerRef.current, state)
+  const { params, settings } = paramsAndSettings || {}
 
   useEffect(() => {
-    if (!params.container) return
+    if (!params?.container || !settings) return
 
     // Re-initialize widget when provider is changed
     if (provider && providerRef.current !== provider) {
@@ -146,15 +143,6 @@ export function Configurator({ title }: { title: string }) {
 
         <CurrencyInputControl label="Buy token" tokenIdState={buyTokenState} tokenAmountState={buyTokenAmountState} />
 
-        <Divider variant="middle">Advanced</Divider>
-
-        <FormControlLabel
-          control={
-            <Checkbox checked={isDynamicHeightEnabled} onChange={(e) => setDynamicHeightEnabled(e.target.checked)} />
-          }
-          label="Dynamic widget height"
-        />
-
         <Divider variant="middle" />
 
         {/* <LoadingButton loading={false} loadingPosition="start" startIcon={<SaveIcon />} variant="contained" onClick={handleWidgetRefreshClick}>
@@ -167,7 +155,7 @@ export function Configurator({ title }: { title: string }) {
       </Drawer>
 
       <Box sx={ContentStyled}>
-        <EmbedDialog params={params} settings={settings} />
+        {params && settings && <EmbedDialog params={params} settings={settings} />}
         <br />
         <div ref={iframeContainerRef}></div>
       </Box>

apps/widget-configurator/src/app/configurator/types.ts

@@ -12,5 +12,5 @@ export interface ConfiguratorState {
   sellTokenAmount: number | undefined
   buyToken: string
   buyTokenAmount: number | undefined
-  isDynamicHeightEnabled: boolean
+  dynamicHeightEnabled: boolean
 }

apps/widget-configurator/src/env.ts

@@ -0,0 +1,5 @@
+export const isLocalHost = ['localhost', '127.0.0.1'].includes(window.location.hostname)
+
+export const isVercel = window.location.hostname.includes('vercel.app')
+
+export const isDev = window.location.hostname.includes('dev.swap.cow.fi')

apps/widget-configurator/src/theme/ColorModeContext.ts

@@ -56,6 +56,9 @@ export const globalStyles = (theme: Theme, mode: PaletteMode) => ({
     background: mode === 'light' && theme.palette.cow.gradient,
     backgroundImage: mode === 'dark' && theme.palette.cow.gradient,
   },
+  'w3m-modal': {
+    zIndex: 1200,
+  },
 })
 
 export enum ThemeMode {