add mixpanel event for swap button

lib/mixpanel/utils.ts

@@ -17,7 +17,8 @@ export enum EventTypes {
   PAGE_WIDGET = 'Page widget',
   TX_INTERPRETATION_INTERACTION = 'Transaction interpratetion interaction',
   EXPERIMENT_STARTED = 'Experiment started',
-  FILTERS = 'Filters'
+  FILTERS = 'Filters',
+  BUTTON_CLICK = 'Button click',
 }
 
 /* eslint-disable @typescript-eslint/indent */
@@ -107,5 +108,9 @@ Type extends EventTypes.FILTERS ? {
   'Source': 'Marketplace';
   'Filter name': string;
 } :
+Type extends EventTypes.BUTTON_CLICK ? {
+  'Content': 'Swap button';
+  'Source': string;
+} :
 undefined;
 /* eslint-enable @typescript-eslint/indent */

ui/snippets/topBar/SwapButton.tsx

 import { Button, Box } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import getPageType from 'lib/mixpanel/getPageType';
+import * as mixpanel from 'lib/mixpanel/index';
 import IconSvg from 'ui/shared/IconSvg';
 
 const feature = config.features.swapButton;
 
 const SwapButton = () => {
+  const router = useRouter();
+  const source = getPageType(router.pathname);
+
+  const handleClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Swap button', Source: source });
+  }, [ source ]);
+
   if (!feature.isEnabled) {
     return null;
   }
@@ -27,6 +37,7 @@ const SwapButton = () => {
       borderRadius="sm"
       height={ 5 }
       px={ 1.5 }
+      onClick={ handleClick }
     >
       <IconSvg name="swap" boxSize={ 3 } mr={{ base: 0, sm: 1 }}/>
       <Box display={{ base: 'none', sm: 'inline' }}>