feat: updated banner

package.json

@@ -105,6 +105,7 @@
     "@paraswap/sdk": "^5.6.0-alpha.6",
     "@soulsolidity/soul-zap-trpc-client": "^1.0.0-beta.0",
     "@soulsolidity/soulzap-v1": "0.1.0",
+    "@spindl-xyz/embed-react": "^1.0.0",
     "@tanstack/react-query": "^4.32.0",
     "@trpc/client": "^10.45.2",
     "@trpc/react-query": "^10.45.2",

src/components/HypeLabAds/HypeLabAds.tsx

@@ -1,15 +1,29 @@
 import React from 'react';
 import { useMediaQuery, useTheme } from '@material-ui/core';
 import { Banner } from '@hypelab/sdk-react';
+import { BannerEmbed } from '@spindl-xyz/embed-react';
+import { useActiveWeb3React } from 'hooks';
 
 const HypeLabAds: React.FC = () => {
+  const { isActive } = useActiveWeb3React();
   const { breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
 
   return (
     <div className='flex justify-center'>
-      {isMobile && <Banner placement='4177d327af' />}
-      {!isMobile && <Banner placement='f70b3ef021' />}
+      {isActive && (
+        <BannerEmbed
+          publisherId='quickswap' // required (get from Spindl team)
+          placementId='quickswap_web_iframe' // required (get from Spindl team)
+          style={{
+            maxWidth: '728px',
+            width: '100%',
+            height: '90px',
+          }} // recommended to add desired width/height
+        />
+      )}
+      {!isActive && isMobile && <Banner placement='4177d327af' />}
+      {!isActive && !isMobile && <Banner placement='f70b3ef021' />}
     </div>
   );
 };