diff --git a/apps/widget-configurator/.env b/apps/widget-configurator/.env new file mode 100644 index 0000000000..d6a8abc0ca --- /dev/null +++ b/apps/widget-configurator/.env @@ -0,0 +1,2 @@ +# Analytics +#REACT_APP_GOOGLE_ANALYTICS_ID= diff --git a/apps/widget-configurator/.env.production b/apps/widget-configurator/.env.production new file mode 100644 index 0000000000..f6aaf29cee --- /dev/null +++ b/apps/widget-configurator/.env.production @@ -0,0 +1,6 @@ +####################################### +# Development +####################################### + +# Enables mock mode (default = false) +REACT_APP_MOCK=false diff --git a/apps/widget-configurator/src/app/analytics.ts b/apps/widget-configurator/src/app/analytics.ts new file mode 100644 index 0000000000..6504d10783 --- /dev/null +++ b/apps/widget-configurator/src/app/analytics.ts @@ -0,0 +1,22 @@ +import { sendEvent, Category } from '@cowprotocol/analytics' + +export function connectWalletToConfigurator() { + sendEvent({ + category: Category.WIDGET_CONFIGURATOR, + action: 'Connect wallet', + }) +} + +export function viewEmbedCode() { + sendEvent({ + category: Category.WIDGET_CONFIGURATOR, + action: 'View code', + }) +} + +export function copyEmbedCode() { + sendEvent({ + category: Category.WIDGET_CONFIGURATOR, + action: 'Copy code', + }) +} diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx index d6dd016c01..a91a45f18d 100644 --- a/apps/widget-configurator/src/app/configurator/index.tsx +++ b/apps/widget-configurator/src/app/configurator/index.tsx @@ -24,6 +24,7 @@ import { ConfiguratorState } from './types' import { ColorModeContext } from '../../theme/ColorModeContext' import { web3Modal } from '../../wagmiConfig' +import { connectWalletToConfigurator } from '../analytics' import { EmbedDialog } from '../embedDialog' const DEFAULT_STATE = { @@ -57,7 +58,7 @@ export function Configurator({ title }: { title: string }) { const [buyToken] = buyTokenState const [buyTokenAmount] = buyTokenAmountState - const { isDisconnected } = useAccount() + const { isDisconnected, isConnected } = useAccount() const network = useNetwork() const walletChainId = network.chain?.id @@ -85,6 +86,13 @@ export function Configurator({ title }: { title: string }) { web3Modal.setThemeMode(mode) }, [mode]) + // Fire an event to GA when user connect a wallet + useEffect(() => { + if (isConnected) { + connectWalletToConfigurator() + } + }, [isConnected]) + return ( {!isDrawerOpen && ( diff --git a/apps/widget-configurator/src/app/embedDialog/index.tsx b/apps/widget-configurator/src/app/embedDialog/index.tsx index 57d03af8a2..af861a87bd 100644 --- a/apps/widget-configurator/src/app/embedDialog/index.tsx +++ b/apps/widget-configurator/src/app/embedDialog/index.tsx @@ -18,6 +18,8 @@ import { reactExample } from './utils/reactExample' import { vanilaNpmExample } from './utils/vanilaNpmExample' import { vanillaNoDepsExample } from './utils/vanillaNoDepsExample' +import { copyEmbedCode, viewEmbedCode } from '../analytics' + function a11yProps(index: number) { return { id: `simple-tab-${index}`, @@ -38,6 +40,7 @@ export function EmbedDialog({ params }: EmbedDialogProps) { const handleClickOpen = (scrollType: DialogProps['scroll']) => () => { setOpen(true) setScroll(scrollType) + viewEmbedCode() } const handleClose = () => { @@ -65,6 +68,7 @@ export function EmbedDialog({ params }: EmbedDialogProps) { const handleCopy = () => { navigator.clipboard.writeText(code) + copyEmbedCode() } return ( diff --git a/apps/widget-configurator/vite.config.ts b/apps/widget-configurator/vite.config.ts index 33b427dfe9..0fd3695f7e 100644 --- a/apps/widget-configurator/vite.config.ts +++ b/apps/widget-configurator/vite.config.ts @@ -1,9 +1,12 @@ /// import react from '@vitejs/plugin-react-swc' import { defineConfig } from 'vite' +import macrosPlugin from 'vite-plugin-babel-macros' import { nodePolyfills } from 'vite-plugin-node-polyfills' import viteTsConfigPaths from 'vite-tsconfig-paths' +import { getReactProcessEnv } from '../../tools/getReactProcessEnv' + const plugins = [ nodePolyfills({ include: ['stream'], @@ -14,24 +17,31 @@ const plugins = [ }, protocolImports: true, }), + macrosPlugin(), react(), viteTsConfigPaths({ root: '../../', }), ] -export default defineConfig({ - cacheDir: '../../node_modules/.vite/widget-configurator', +export default defineConfig(({ mode }) => { + return { + define: { + ...getReactProcessEnv(mode), + }, - server: { - port: 4200, - host: 'localhost', - }, + cacheDir: '../../node_modules/.vite/widget-configurator', - preview: { - port: 4300, - host: 'localhost', - }, + server: { + port: 4200, + host: 'localhost', + }, + + preview: { + port: 4300, + host: 'localhost', + }, - plugins, + plugins, + } }) diff --git a/libs/analytics/src/types.ts b/libs/analytics/src/types.ts index 4e5a388809..51e3c45c3d 100644 --- a/libs/analytics/src/types.ts +++ b/libs/analytics/src/types.ts @@ -18,6 +18,7 @@ export enum Category { SERVICE_WORKER = 'Service worker', TWAP = 'TWAP', COW_FORTUNE = 'CoWFortune', + WIDGET_CONFIGURATOR = 'Widget configurator', } export interface EventParams {