Tracking Users Action On Swap Page

src/components/cards/PlatformCard.tsx

@@ -13,7 +13,7 @@ const PlatformCard = ({
   route: string
 }) => {
   return (
-    <LinkBox>
+    <LinkBox data-ph-capture-attribute-swap_platform_link_click={name}>
       <Box w={{ base: '132', md: '176' }} textAlign="center">
         <Box
           h={{ base: '92', md: '122' }}

src/components/dashboard/Exchanges.tsx

@@ -7,7 +7,6 @@ import { OneInch } from '../icons/1inch'
 import { Upbit } from '../icons/Upbit'
 import ArrowIcon from '../icons/arrow'
 import { Fraxswap } from '../icons/fraxswap'
-import { usePostHog } from 'posthog-js/react'
 
 interface IconButtonProps {
   href: string
@@ -22,18 +21,11 @@ const ExchangeLink: React.FC<IconButtonProps> = ({
   icon,
   ariaLabel,
 }) => {
-  const posthog = usePostHog()
-
   return (
     <Link
       href={href}
       target="_blank"
-      onClick={() => {
-        posthog.capture('exchange_link_click', {
-          category: 'Dashboard',
-          target: logEventLabel,
-        })
-      }}
+      data-ph-capture-attribute-exchange_link_click={logEventLabel}
     >
       <IconButton
         variant="outline"
@@ -79,7 +71,7 @@ const Exchanges = () => {
       </ChakraLink>
       <Flex alignItems="center" justifyContent="center">
         <ExchangeLink
-          href="https://frax.finance/"
+          href="https://app.frax.finance/staking/fraxswap-v2-frax-iq"
           logEventLabel="Frax"
           icon={
             <Fraxswap

src/components/icons/frax-iq.tsx

@@ -5,7 +5,7 @@ export const FraxIQ = (props: IconProps) => {
   return (
     <Icon width="37" height="24" viewBox="0 0 37 24" fill="none" {...props}>
       <circle cx="12" cy="12" r="12" fill="black" />
-      <g clip-path="url(#clip0_15553_102634)">
+      <g clipPath="url(#clip0_15553_102634)">
         <path
           d="M6.75002 14.45C6.79533 14.5434 7.04783 14.7103 7.10002 14.8C7.17522 14.9313 7.11096 15.1322 7.10002 15.15C7.09182 15.1664 6.60647 15.6107 6.05002 16.2C5.49358 16.7893 5.00549 17.2377 5.00002 17.25C5.55931 17.8129 6.1728 18.4555 6.75002 19L7.80002 17.95L8.50002 16.9H8.85002C9.01837 17.0087 9.37047 17.1611 9.55002 17.25C9.66077 16.6689 9.65803 16.051 9.90002 15.5C9.16584 15.1199 8.76799 14.2422 8.50002 13.4C8.29841 13.4786 7.98702 13.6411 7.80002 13.75C7.41037 14.0139 7.12463 14.1902 6.75002 14.45ZM9.90002 7.8C9.79338 7.63867 9.66487 7.60586 9.55002 7.45C9.29544 7.38714 9.01073 6.95721 8.85002 6.75V7.1V6.75C8.57006 6.47758 8.08243 6.31989 7.80002 6.05C7.42268 5.68633 7.19162 5.0916 7.10002 5H6.75002L6.05002 6.05C5.59202 6.53672 5.00412 6.7418 5.00002 6.75C4.99592 6.7582 5.5428 7.31191 6.05002 7.8L7.10002 8.5V8.85C7.06174 8.9138 6.78466 9.13438 6.75002 9.2C7.28323 9.55137 7.94221 9.92188 8.50002 10.25C8.86096 9.57188 9.47346 8.87871 10.25 8.5C10.1633 8.37043 10.3411 8.27654 10.25 8.15C10.1817 8.0543 9.95471 7.8957 9.90002 7.8ZM16.9 8.85L17.95 7.8C18.4887 7.23125 19.0041 6.75957 19 6.75C18.9877 6.71445 17.2719 5 17.25 5C17.2364 5 16.7127 5.50449 16.2 6.05C15.6846 6.59414 15.1596 7.0959 15.15 7.1C15.1405 7.1041 15.1992 7.13418 15.15 7.1C15.053 7.03438 14.4172 7.02207 14.1 7.1C13.9223 7.49648 13.9072 8.09805 13.75 8.5C13.921 8.58895 13.9433 8.73777 14.1 8.85C14.3543 9.03184 14.9709 9.29297 15.15 9.55C15.1938 9.61289 15.4604 9.83301 15.5 9.9C16.0701 9.65938 16.6799 9.44883 17.25 9.2C17.2158 9.13438 16.9287 8.89922 16.9 8.85ZM17.25 15.5L16.9 15.15C16.941 15.0816 17.2117 14.8711 17.25 14.8C16.7633 14.3734 16.0223 13.8047 15.5 13.4C15.3114 13.9674 15.1897 14.4309 14.8 14.8C14.5963 14.9914 14.383 15.3674 14.1 15.5C14.2094 16.0195 14.5813 16.4352 14.8 16.9C14.8274 16.9574 14.7819 17.1891 14.8 17.25C14.8711 17.2108 15.0817 16.941 15.15 16.9L15.5 17.25C16.1461 17.8792 16.5973 18.3777 17.25 19C17.2678 19.0055 19.0028 17.2705 19 17.25C18.9987 17.2391 17.9528 16.1699 17.25 15.5Z"
           fill="white"
@@ -15,7 +15,7 @@ export const FraxIQ = (props: IconProps) => {
           fill="white"
         />
       </g>
-      <g clip-path="url(#clip1_15553_102634)">
+      <g clipPath="url(#clip1_15553_102634)">
         <path
           d="M35.515 14.1697C35.515 14.6303 35.4298 15.0709 35.2738 15.4771C34.7401 16.8646 33.3843 17.8501 31.7953 17.8501C30.1692 17.8501 28.7874 16.8177 28.2815 15.3789C25.2773 15.5926 23.5596 14.264 22.8453 11.7315C21.0411 11.246 19.7148 9.61354 19.7148 7.67415C19.7148 6.41986 20.2699 5.29358 21.1502 4.52369C21.8993 3.86746 22.8845 3.46936 23.9637 3.46936C25.2002 3.46936 26.3136 3.99177 27.0891 4.82682C27.6107 4.48928 28.234 4.29363 28.9035 4.29363C29.3708 4.29363 29.8161 4.3893 30.2197 4.5618C31.3873 5.06053 32.2084 6.20293 32.2266 7.53733C32.2273 7.55294 32.2273 7.56794 32.2273 7.58359L32.2266 7.63923V7.63984C32.3964 7.60295 32.5726 7.58359 32.754 7.58359C33.5636 7.58359 34.2829 7.96735 34.7363 8.56105H34.737C35.0514 8.97292 35.2378 9.486 35.2378 10.0422C35.2389 10.6191 35.0335 11.1778 34.658 11.619C34.6298 11.6531 34.6005 11.6862 34.5702 11.7184C35.1582 12.369 35.5149 13.2283 35.5149 14.1697"
           fill="#FF5CAA"

src/components/icons/okex.tsx

@@ -11,7 +11,7 @@ export const Okex = (props: IconProps) => {
       {...props}
     >
       <rect width="80" height="80" fill="black" />
-      <g clip-path="url(#clip0_295_3041)">
+      <g clipPath="url(#clip0_295_3041)">
         <path
           d="M-61.0635 13.0134H-112.999C-113.322 13.0134 -113.629 13.1392 -113.856 13.3652C-113.966 13.4733 -114.054 13.6044 -114.115 13.7502C-114.176 13.8961 -114.207 14.0536 -114.208 14.213V65.7876C-114.208 66.1052 -114.081 66.4106 -113.855 66.6353C-113.628 66.8601 -113.321 66.9871 -113.001 66.9871H-61.0635C-60.7424 66.9871 -60.4362 66.8601 -60.2083 66.6353C-60.0978 66.5273 -60.0094 66.3963 -59.9486 66.2504C-59.8878 66.1046 -59.8559 65.947 -59.8549 65.7876V14.213C-59.8549 13.8954 -59.9815 13.59 -60.2083 13.3652C-60.4412 13.1374 -60.7468 13.0117 -61.0635 13.0134ZM-77.9726 47.7963C-77.9726 48.1139 -78.0992 48.4193 -78.3271 48.6441C-78.5594 48.8715 -78.8641 48.9971 -79.1801 48.9959H-94.8828C-95.2028 48.9959 -95.5102 48.8689 -95.7369 48.6441C-95.8475 48.5361 -95.936 48.4051 -95.9968 48.2592C-96.0576 48.1134 -96.0894 47.9558 -96.0903 47.7963V32.2042C-96.0903 31.8866 -95.9637 31.5812 -95.7369 31.3565C-95.5102 31.1305 -95.2028 31.0047 -94.8828 31.0047H-79.1801C-78.8601 31.0047 -78.5527 31.1305 -78.3271 31.3565C-78.2163 31.4643 -78.1276 31.5953 -78.0666 31.7411C-78.0056 31.887 -77.9736 32.0447 -77.9726 32.2042V47.7963ZM47.6657 31.0071H31.9629C31.2953 31.0071 30.7543 31.5446 30.7543 32.2067V47.7988C30.7543 48.4609 31.2953 48.9983 31.9629 48.9983H47.6645C48.3321 48.9983 48.8731 48.4609 48.8731 47.7988V32.2067C48.8731 31.5434 48.3321 31.0071 47.6645 31.0071H47.6657ZM29.5514 13.0134H13.8498C13.1822 13.0134 12.6412 13.5509 12.6412 14.2142V29.8063C12.6412 30.4684 13.1822 31.0059 13.8498 31.0059H29.5503C30.2179 31.0059 30.7589 30.4684 30.7589 29.8063V14.2142C30.7589 13.5509 30.2179 13.0146 29.5503 13.0146L29.5514 13.0134ZM65.7926 13.0134H50.0898C49.4233 13.0134 48.8823 13.5509 48.8823 14.2142V29.8063C48.8823 30.4684 49.4233 31.0059 50.091 31.0059H65.7914C66.459 31.0059 67 30.4684 67 29.8063V14.2142C67 13.5509 66.459 13.0146 65.7914 13.0146L65.7926 13.0134ZM29.5514 48.9971H13.8498C13.1822 48.9971 12.6412 49.5346 12.6412 50.1967V65.79C12.6412 66.4521 13.1822 66.9884 13.8498 66.9884H29.5503C30.2179 66.9884 30.7589 66.4509 30.7589 65.79V50.1967C30.7589 49.5346 30.219 48.9971 29.5514 48.9971ZM65.7926 48.9971H50.0898C49.4233 48.9971 48.8823 49.5346 48.8823 50.1967V65.79C48.8823 66.4521 49.4233 66.9884 50.091 66.9884H65.7914C66.459 66.9884 67 66.4509 67 65.79V50.1967C67 49.5346 66.459 48.9971 65.7914 48.9971H65.7926ZM2.353 13.0134H-13.3475C-14.0151 13.0134 -14.5561 13.5509 -14.5561 14.2142V29.8063C-14.5561 30.4684 -14.0151 31.0059 -13.3475 31.0059H2.353C3.02062 31.0059 3.56162 30.4684 3.56162 29.8063V14.2142C3.56162 13.5509 3.02062 13.0146 2.353 13.0146V13.0134ZM2.353 48.9971H-13.3475C-14.0151 48.9971 -14.5561 49.5346 -14.5561 50.1967V65.79C-14.5561 66.4521 -14.0151 66.9884 -13.3475 66.9884H2.353C3.02062 66.9884 3.56162 66.4509 3.56162 65.79V50.1967C3.56162 49.5346 3.02062 48.9971 2.353 48.9971ZM-14.5607 32.1908C-14.5607 31.8732 -14.6896 31.5678 -14.9152 31.3418C-15.1479 31.1146 -15.4531 30.9893 -15.7693 30.9912H-32.6795V14.213C-32.6795 13.8954 -32.8061 13.59 -33.0329 13.3652C-33.2654 13.1376 -33.5706 13.0119 -33.887 13.0134H-49.5886C-49.9098 13.0134 -50.2171 13.1392 -50.4438 13.3652C-50.5544 13.4732 -50.6429 13.6042 -50.7037 13.7501C-50.7645 13.8959 -50.7963 14.0535 -50.7972 14.213V65.7607C-50.7972 66.0783 -50.6706 66.3837 -50.4438 66.6085C-50.2171 66.8332 -49.9098 66.9603 -49.5886 66.9603H-33.8881C-33.567 66.9603 -33.2597 66.8332 -33.0329 66.6085C-32.8061 66.3837 -32.6795 66.0783 -32.6795 65.7607V48.9825H-15.7704C-15.4493 48.9825 -15.142 48.8554 -14.9152 48.6307C-14.8047 48.5226 -14.7163 48.3916 -14.6555 48.2458C-14.5947 48.0999 -14.5628 47.9424 -14.5618 47.7829L-14.5607 32.1908Z"
           fill="white"

src/components/icons/polygon-frax.tsx

@@ -4,7 +4,7 @@ import { Icon, IconProps } from '@chakra-ui/react'
 export const PolygonFrax = (props: IconProps) => {
   return (
     <Icon width="25" height="24" viewBox="0 0 25 24" fill="none" {...props}>
-      <g clip-path="url(#clip0_15553_103171)">
+      <g clipPath="url(#clip0_15553_103171)">
         <path
           d="M12 24C13.6197 24 15.1911 23.6825 16.6711 23.0568C18.1003 22.4523 19.3831 21.587 20.4854 20.4854C21.587 19.3839 22.4523 18.1003 23.0568 16.6711C23.6825 15.1911 24 13.6197 24 12C24 10.3803 23.6825 8.80886 23.0568 7.32886C22.4523 5.89967 21.587 4.61695 20.4854 3.51457C19.3831 2.41304 18.1003 1.54773 16.6711 0.943202C15.1911 0.317505 13.6197 0 12 0C10.3803 0 8.80886 0.317505 7.32886 0.943202C5.89967 1.54773 4.61695 2.41304 3.51457 3.51457C2.41304 4.6161 1.54773 5.89967 0.943201 7.32886C0.317504 8.80886 1.38909e-07 10.3803 1.38909e-07 12C1.38909e-07 13.6197 0.317504 15.1911 0.943201 16.6711C1.54773 18.1003 2.41304 19.3831 3.51457 20.4854C4.6161 21.587 5.89967 22.4523 7.32886 23.0568C8.80886 23.6833 10.3803 24 12 24Z"
           fill="white"
@@ -19,7 +19,7 @@ export const PolygonFrax = (props: IconProps) => {
         />
       </g>
       <circle cx="21" cy="20" r="4" fill="white" />
-      <g clip-path="url(#clip1_15553_103171)">
+      <g clipPath="url(#clip1_15553_103171)">
         <path
           d="M22.3284 19.5222C22.2239 19.4625 22.0896 19.4625 21.9701 19.5222L21.1343 20.0147L20.5672 20.3281L19.7463 20.8207C19.6418 20.8804 19.5075 20.8804 19.3881 20.8207L18.7463 20.4326C18.6418 20.3729 18.5672 20.2535 18.5672 20.1192V19.3729C18.5672 19.2535 18.6269 19.1341 18.7463 19.0595L19.3881 18.6864C19.4925 18.6267 19.6269 18.6267 19.7463 18.6864L20.3881 19.0744C20.4925 19.1341 20.5672 19.2535 20.5672 19.3878V19.8804L21.1343 19.552V19.0446C21.1343 18.9252 21.0746 18.8058 20.9552 18.7311L19.7612 18.0296C19.6567 17.9699 19.5224 17.9699 19.403 18.0296L18.1791 18.7461C18.0597 18.8058 18 18.9252 18 19.0446V20.4476C18 20.567 18.0597 20.6864 18.1791 20.761L19.3881 21.4625C19.4925 21.5222 19.6269 21.5222 19.7463 21.4625L20.5672 20.9849L21.1343 20.6565L21.9552 20.1789C22.0597 20.1192 22.194 20.1192 22.3134 20.1789L22.9552 20.552C23.0597 20.6117 23.1343 20.7311 23.1343 20.8655V21.6117C23.1343 21.7311 23.0746 21.8505 22.9552 21.9252L22.3284 22.2983C22.2239 22.358 22.0896 22.358 21.9701 22.2983L21.3284 21.9252C21.2239 21.8655 21.1493 21.7461 21.1493 21.6117V21.1341L20.5821 21.4625V21.955C20.5821 22.0744 20.6418 22.1938 20.7612 22.2684L21.9701 22.9699C22.0746 23.0296 22.209 23.0296 22.3284 22.9699L23.5373 22.2684C23.6418 22.2087 23.7164 22.0893 23.7164 21.955V20.5371C23.7164 20.4177 23.6567 20.2983 23.5373 20.2237L22.3284 19.5222Z"
           fill="#8247E5"