feat(widget): display embed code (#3264)

apps/widget-configurator/src/app/configurator/controls/NetworkControl.tsx

@@ -13,6 +13,7 @@ export type NetworkOption = {
 export const NetworkOptions: NetworkOption[] = [
   { chainId: SupportedChainId.MAINNET, label: 'Ethereum' },
   { chainId: SupportedChainId.GNOSIS_CHAIN, label: 'Gnosis Chain' },
+  { chainId: SupportedChainId.GOERLI, label: 'Goerli' },
 ]
 
 export function NetworkControl({ state }: { state: [NetworkOption, Dispatch<SetStateAction<NetworkOption>>] }) {

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

@@ -1,13 +1,25 @@
 import { useEffect, useRef, useState } from 'react'
 
+import { CowSwapWidgetParams, CowSwapWidgetSettings } from '@cowprotocol/widget-lib'
+
 import Button from '@mui/material/Button'
 import Dialog, { DialogProps } from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import DialogTitle from '@mui/material/DialogTitle'
 
-export function EmbedDialog({ iframeUrl }: { iframeUrl: string }) {
+const CodeStyles = {
+  whiteSpace: 'break-spaces',
+  fontSize: '13px',
+}
+
+export interface EmbedDialogProps {
+  params: CowSwapWidgetParams
+  settings: CowSwapWidgetSettings
+}
+
+export function EmbedDialog({ params, settings }: EmbedDialogProps) {
   const [open, setOpen] = useState(false)
   const [scroll, setScroll] = useState<DialogProps['scroll']>('paper')
 
@@ -31,7 +43,25 @@ export function EmbedDialog({ iframeUrl }: { iframeUrl: string }) {
     }
   }, [open])
 
-  const code = `<iframe src="${iframeUrl}"/>`
+  const paramsSanitized = {
+    ...params,
+    container: `<YOUR_CONTAINER>`,
+    provider: `<eip-1193 provider>`,
+  }
+
+  const code = `
+import { CowSwapWidgetParams, CowSwapWidgetSettings, cowSwapWidget } from '@cowprotocol/widget-lib'
+
+const params: CowSwapWidgetParams = ${JSON.stringify(paramsSanitized, null, 4)}
+
+const settings: CowSwapWidgetSettings = ${JSON.stringify(settings, null, 4)}
+
+const updateWidget = cowSwapWidget(params, settings)
+  `
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code)
+  }
 
   return (
     <div>
@@ -47,12 +77,12 @@ export function EmbedDialog({ iframeUrl }: { iframeUrl: string }) {
         <DialogTitle id="scroll-dialog-title">CoW Widget Embed</DialogTitle>
         <DialogContent dividers={scroll === 'paper'}>
           <DialogContentText id="scroll-dialog-description" ref={descriptionElementRef} tabIndex={-1}>
-            <code>{code}</code>
+            <code style={CodeStyles}>{code}</code>
           </DialogContentText>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleClose}>Copy</Button>
+          <Button onClick={handleCopy}>Copy</Button>
         </DialogActions>
       </Dialog>
     </div>

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

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+
+import { CowSwapWidgetParams, CowSwapWidgetSettings, EthereumProvider } from '@cowprotocol/widget-lib'
+
+import { ConfiguratorState } from '../types'
+
+export function useWidgetParamsAndSettings(
+  provider: EthereumProvider | null,
+  widgetContainer: HTMLDivElement,
+  configuratorState: ConfiguratorState
+) {
+  return useMemo(() => {
+    const {
+      chainId,
+      theme,
+      currentTradeType,
+      enabledTradeTypes,
+      sellToken,
+      sellTokenAmount,
+      buyToken,
+      buyTokenAmount,
+      isDynamicHeightEnabled,
+    } = configuratorState
+
+    const params: CowSwapWidgetParams = {
+      container: widgetContainer,
+      metaData: { appKey: '<YOUR_APP_ID>', url: '<https://YOUR_APP_URL>' },
+      width: 400,
+      height: 640,
+      provider,
+    }
+
+    const settings: CowSwapWidgetSettings = {
+      urlParams: {
+        theme,
+        chainId,
+        env: 'local',
+        tradeType: currentTradeType,
+        tradeAssets: {
+          sell: { asset: sellToken, amount: sellTokenAmount ? sellTokenAmount.toString() : undefined },
+          buy: { asset: buyToken, amount: buyTokenAmount.toString() },
+        },
+      },
+      appParams: {
+        dynamicHeightEnabled: isDynamicHeightEnabled,
+        enabledTradeTypes,
+      },
+    }
+
+    return { params, settings }
+  }, [provider, widgetContainer, configuratorState])
+}

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

@@ -1,13 +1,6 @@
 import { useContext, useEffect, useRef, useState } from 'react'
 
-import {
-  cowSwapWidget,
-  CowSwapWidgetParams,
-  CowSwapWidgetSettings,
-  EthereumProvider,
-  TradeType,
-  UpdateWidgetCallback,
-} from '@cowprotocol/widget-lib'
+import { cowSwapWidget, EthereumProvider, TradeType, UpdateWidgetCallback } from '@cowprotocol/widget-lib'
 
 import WalletIcon from '@mui/icons-material/Wallet'
 import LoadingButton from '@mui/lab/LoadingButton'
@@ -25,8 +18,11 @@ import { CurrentTradeTypeControl } from './controls/CurrentTradeTypeControl'
 import { NetworkControl, NetworkOption, NetworkOptions } from './controls/NetworkControl'
 import { ThemeControl } from './controls/ThemeControl'
 import { TradeModesControl } from './controls/TradeModesControl'
+import { EmbedDialog } from './embedDialog'
 import { useProvider } from './hooks/useProvider'
+import { useWidgetParamsAndSettings } from './hooks/useWidgetParamsAndSettings'
 import { DrawerStyled, WrapperStyled, ContentStyled } from './styled'
+import { ConfiguratorState } from './types'
 
 import { ColorModeContext } from '../../theme/ColorModeContext'
 
@@ -69,35 +65,22 @@ export function Configurator({ title }: { title: string }) {
   const provider = useProvider()
   const providerRef = useRef<EthereumProvider | null>()
 
-  useEffect(() => {
-    const widgetContainer = iframeContainerRef.current
-
-    if (!widgetContainer) return
+  const state: ConfiguratorState = {
+    chainId,
+    theme: mode,
+    currentTradeType,
+    enabledTradeTypes,
+    sellToken,
+    sellTokenAmount,
+    buyToken,
+    buyTokenAmount,
+    isDynamicHeightEnabled,
+  }
 
-    const params: CowSwapWidgetParams = {
-      container: widgetContainer,
-      metaData: { appKey: 'YOUR_APP_ID', url: 'https://YOUR_APP_URL' },
-      width: 400,
-      height: 640,
-      provider: provider,
-    }
+  const { params, settings } = useWidgetParamsAndSettings(provider, iframeContainerRef.current, state)
 
-    const settings: CowSwapWidgetSettings = {
-      urlParams: {
-        theme: mode,
-        chainId,
-        env: 'local',
-        tradeType: currentTradeType,
-        tradeAssets: {
-          sell: { asset: sellToken, amount: sellTokenAmount ? sellTokenAmount.toString() : undefined },
-          buy: { asset: buyToken, amount: buyTokenAmount.toString() },
-        },
-      },
-      appParams: {
-        dynamicHeightEnabled: isDynamicHeightEnabled,
-        enabledTradeTypes,
-      },
-    }
+  useEffect(() => {
+    if (!params.container) return
 
     // Re-initialize widget when provider is changed
     if (provider && providerRef.current !== provider) {
@@ -109,18 +92,7 @@ export function Configurator({ title }: { title: string }) {
     } else {
       updateWidgetRef.current = cowSwapWidget(params, settings)
     }
-  }, [
-    provider,
-    chainId,
-    enabledTradeTypes,
-    sellToken,
-    sellTokenAmount,
-    buyToken,
-    buyTokenAmount,
-    mode,
-    currentTradeType,
-    isDynamicHeightEnabled,
-  ])
+  }, [provider, params, settings])
 
   useEffect(() => {
     providerRef.current = provider
@@ -195,6 +167,8 @@ export function Configurator({ title }: { title: string }) {
       </Drawer>
 
       <Box sx={ContentStyled}>
+        <EmbedDialog params={params} settings={settings} />
+        <br />
         <div ref={iframeContainerRef}></div>
       </Box>
     </Box>

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

@@ -0,0 +1,16 @@
+import type { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { TradeType } from '@cowprotocol/widget-lib'
+
+import { PaletteMode } from '@mui/material'
+
+export interface ConfiguratorState {
+  chainId: SupportedChainId
+  theme: PaletteMode
+  currentTradeType: TradeType
+  enabledTradeTypes: TradeType[]
+  sellToken: string
+  sellTokenAmount: number | undefined
+  buyToken: string
+  buyTokenAmount: number | undefined
+  isDynamicHeightEnabled: boolean
+}