Add analytics for banners buttons

- fix mobile version

public/tailwind.css

@@ -606,22 +606,6 @@ video {
   top: 50%;
 }
 
-.right-0 {
-  right: 0px;
-}
-
-.top-4 {
-  top: 1rem;
-}
-
-.right-4 {
-  right: 1rem;
-}
-
-.top-2 {
-  top: 0.5rem;
-}
-
 .-z-10 {
   z-index: -10;
 }
@@ -685,6 +669,11 @@ video {
   margin-bottom: auto;
 }
 
+.\!mx-4 {
+  margin-left: 1rem !important;
+  margin-right: 1rem !important;
+}
+
 .-ml-2 {
   margin-left: -0.5rem;
 }
@@ -909,6 +898,10 @@ video {
   width: 100vw;
 }
 
+.w-\[13rem\] {
+  width: 13rem;
+}
+
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -1371,10 +1364,22 @@ video {
   background-image: url(/images/banners/staking-info-banner.png);
 }
 
+.bg-staking-info-banner-mobile {
+  background-image: url(/images/banners/staking-info-banner-mobile.png);
+}
+
 .bg-cover {
   background-size: cover;
 }
 
+.bg-center {
+  background-position: center;
+}
+
+.bg-right {
+  background-position: right;
+}
+
 .bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2256,6 +2261,14 @@ video {
     margin-bottom: 1rem;
   }
 
+  .md\:w-auto {
+    width: auto;
+  }
+
+  .md\:w-full {
+    width: 100%;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2285,6 +2298,14 @@ video {
     border-top-right-radius: 20px;
   }
 
+  .md\:bg-staking-info-banner-mobile {
+    background-image: url(/images/banners/staking-info-banner-mobile.png);
+  }
+
+  .md\:bg-staking-info-banner {
+    background-image: url(/images/banners/staking-info-banner.png);
+  }
+
   .md\:p-6 {
     padding: 1.5rem;
   }
@@ -2311,6 +2332,16 @@ video {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 910px) {

src/components/creatorsStaking/utils/StakingInfoBanner.tsx

@@ -1,49 +1,63 @@
 import clsx from 'clsx'
 import Button from '../tailwind-components/Button'
-// import { IoMdClose } from 'react-icons/io'
-// import store from 'store'
-// import { useState } from 'react'
-
-// const bannerStoreKey = 'staking-info-banner:closed'
+import { useSendEvent } from '@/components/providers/AnalyticContext'
+import { useBackerLedger } from '@/rtk/features/creatorStaking/backerLedger/backerLedgerHooks'
+import { useMyAddress } from '@/components/providers/MyExtensionAccountsContext'
+import { useGetDecimalsAndSymbolByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
+import getAmountRange from './getAmountRangeForAnalytics'
 
 const StakingInfoBanner = () => {
-  // const stakingInfoBannerClosed = store.get(bannerStoreKey)
-  // const [isBannerClosed, setIsBannerClosed] = useState(
-  //   stakingInfoBannerClosed !== undefined ? stakingInfoBannerClosed : false
-  // )
+  const myAddress = useMyAddress()
+  const sendEvent = useSendEvent()
+  const backerLedger = useBackerLedger(myAddress)
+  const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
+
+  const { loading, ledger } = backerLedger || {}
+
+  const { locked } = ledger || {}
 
-  // const onCloseClick = () => {
-  //   setIsBannerClosed(true)
-  //   store.set(bannerStoreKey, true)
-  // }
+  const onButtonClick = (eventName: string) => {
+    const amountRange = getAmountRange(decimal, locked)
 
-  // if (isBannerClosed) return null
+    sendEvent(eventName, { amountRange: amountRange })
+  }
 
   return (
     <div
       className={clsx(
-        'bg-staking-info-banner bg-cover bg-no-repeat rounded-[20px] text-white',
-        'md:!mx-4 mx-0 flex flex-col gap-4 p-6 relative'
+        'bg-staking-info-banner-mobile md:bg-staking-info-banner bg-right bg-cover bg-no-repeat',
+        '!mx-4 flex flex-col gap-4  relative rounded-[20px] text-white',
+        'md:p-6 p-4'
       )}
     >
       <div className='flex flex-col gap-2'>
-        <div className='text-4xl UnboundedFont'>Receive extra SUB tokens</div>
-        <div className='text-xl'>
+        <div className='md:text-4xl text-2xl md:w-full w-[13rem] UnboundedFont'>Receive extra SUB tokens</div>
+        <div className='md:text-xl text-lg'>
           Get rewarded based on your social activity
         </div>
       </div>
       <div className='flex items-center gap-4'>
-        <Button variant={'primary'}>Learn more</Button>
-        <Button className='text-white' variant={'whiteOutline'}>
+        <Button
+          href='https://grill.chat/creators/stakers-20132'
+          target='_blank'
+          variant={'primary'}
+          className='text-white md:w-auto w-full'
+          disabled={loading}
+          onClick={() => onButtonClick('cs_active_cs_banner_lear_more_clicked')}
+        >
+          Learn more
+        </Button>
+        <Button
+          href='https://subsocial.network/active-staking-details'
+          target='_blank'
+          className='text-white md:w-auto w-full'
+          variant={'whiteOutline'}
+          disabled={loading}
+          onClick={() => onButtonClick('cs_active_cs_banner_discuss_clicked')}
+        >
           Dicsuss
         </Button>
       </div>
-
-      {/* <div className='absolute right-2 top-2 text-xl'>
-        <Button onClick={onCloseClick} variant='transparent' size={'circle'}>
-          <IoMdClose />
-        </Button>
-      </div> */}
     </div>
   )
 }

src/components/creatorsStaking/utils/getAmountRangeForAnalytics.ts

@@ -0,0 +1,25 @@
+import { convertToBalanceWithDecimal } from '../../common/balances/utils'
+
+const getAmountRange = (decimals: number, amount?: string) => {
+  if (!amount || amount === '0') return '0'
+
+  const amountWithDecimals = convertToBalanceWithDecimal(amount, decimals)
+
+  if (amountWithDecimals.lte(2000)) {
+    return 'up to 2000'
+  } else if (amountWithDecimals.lte(10000)) {
+    return 'up to 10000'
+  } else if (amountWithDecimals.lte(50000)) {
+    return 'up to 50000'
+  } else if (amountWithDecimals.lte(100000)) {
+    return 'up to 100000'
+  } else if (amountWithDecimals.lte(500000)) {
+    return 'up to 500000'
+  } else if (amountWithDecimals.lte(1000000)) {
+    return 'up to 1000000'
+  } else {
+    return 'more than 1000000'
+  }
+}
+
+export default getAmountRange

tailwind.config.js

@@ -23,6 +23,7 @@ export const theme = {
       'staking-bg': 'url(/images/banners/staking-bg.png)',
       'staking-bg-mobile': 'url(/images/banners/staking-bg-mobile.png)',
       'staking-info-banner': 'url(/images/banners/staking-info-banner.png)',
+      'staking-info-banner-mobile': 'url(/images/banners/staking-info-banner-mobile.png)',
 
     },
     fontFamily: {