From 3bb02ef7457c630fdc6a5ec9f92357d423b8c97f Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Wed, 1 May 2024 10:04:51 +0300 Subject: [PATCH 01/10] add events to the app --- .../website/src/blocks/AccordionBlock.tsx | 2 + .../website/src/blocks/HomepageHero.tsx | 15 ++-- .../website/src/blocks/ListCardItems.tsx | 59 ++++++++------ .../website/src/blocks/MarkdownBlock.tsx | 76 +++++++++--------- .../website/src/components/Card/ListCard.tsx | 78 ++++++++----------- .../player-website/BottomPlaylist.tsx | 31 ++++---- .../player-website/ChaptersPlaylist.tsx | 23 ++++-- .../player-website/VideoPlayerWebsite.tsx | 20 ++--- .../website/src/pages/(components)/Navbar.tsx | 27 ++++--- workspaces/website/src/utils/utils.ts | 18 ++++- 10 files changed, 193 insertions(+), 156 deletions(-) diff --git a/workspaces/website/src/blocks/AccordionBlock.tsx b/workspaces/website/src/blocks/AccordionBlock.tsx index 9f56cb9bc2..bce3f04bde 100644 --- a/workspaces/website/src/blocks/AccordionBlock.tsx +++ b/workspaces/website/src/blocks/AccordionBlock.tsx @@ -2,6 +2,7 @@ import { Box } from "@chakra-ui/react"; import * as PageAccordion from "@ui/Accordion/PageAccordion"; import { Heading } from "@ui/Typography/Heading"; import { slugify } from "@starknet-io/cms-utils/src/index"; +import { EVENT_CATEGORY, gtmEvent } from "src/utils/utils"; type AccordionRootProps = { children: React.ReactNode; @@ -17,6 +18,7 @@ export const AccordionRoot = ({ heading, children }: AccordionRootProps) => { color="heading-navy-fg" id={`toc-${slugify(heading)}`} marginBottom="24px" + onClick={() => gtmEvent(heading || "", EVENT_CATEGORY.CLICK)} > {heading} diff --git a/workspaces/website/src/blocks/HomepageHero.tsx b/workspaces/website/src/blocks/HomepageHero.tsx index c41912a5ef..d456d22988 100644 --- a/workspaces/website/src/blocks/HomepageHero.tsx +++ b/workspaces/website/src/blocks/HomepageHero.tsx @@ -4,6 +4,7 @@ import { Heading } from "@ui/Typography/Heading"; import { Text } from "@ui/Typography/Text"; import { Intro } from "./Intro"; import ProvisionsPopup from "@ui/ProvisionsPopup/ProvisionsPopup"; +import { EVENT_CATEGORY, gtmEvent } from "src/utils/utils"; type Props = { readonly seo: { @@ -80,8 +81,6 @@ export const HomepageHero = ({ seo }: Props) => { align="flex-end" direction={{ base: "column", lg: "row" }} justify="space-between" - // paddingBottom="33px" - // mb="56px" > { size="lg" minW="210px" variant="primaryHero" + onClick={() => + gtmEvent("Build_on_Starknet", EVENT_CATEGORY.BUTTON_CLICK) + } > Build on Starknet @@ -130,16 +132,15 @@ export const HomepageHero = ({ seo }: Props) => { size="lg" variant="secondaryHero" href="/en/explore-starknet" + onClick={() => + gtmEvent("Explore_Starknet", EVENT_CATEGORY.BUTTON_CLICK) + } > Explore Starknet - + - {title && {title}} - {description && {description}} + {title && ( + + {title} + + )} + {description && ( + + {description} + + )} - {card_list_items?.map(({ - start_date_time, - type, - website_url, - ...card - }, i) => { - return ( - - ); - })} + {card_list_items?.map( + ({ start_date_time, type, website_url, ...card }, i) => { + return ( + + ); + } + )} diff --git a/workspaces/website/src/blocks/MarkdownBlock.tsx b/workspaces/website/src/blocks/MarkdownBlock.tsx index 7d67fc70a0..74009aa622 100644 --- a/workspaces/website/src/blocks/MarkdownBlock.tsx +++ b/workspaces/website/src/blocks/MarkdownBlock.tsx @@ -12,8 +12,8 @@ import { import { slugify } from "@starknet-io/cms-utils/src/index"; import { ReactMarkdownProps } from "react-markdown/lib/complex-types"; import CodeHighlight from "@ui/CodeHighlight/CodeHighlight"; -import remarkGfm from 'remark-gfm' -import '../style/table.css' +import remarkGfm from "remark-gfm"; +import "../style/table.css"; interface Props { readonly disallowH1?: boolean; readonly body: string; @@ -27,10 +27,6 @@ export function MarkdownBlock({ disallowH1, body }: Props): JSX.Element { components={{ h2: (props) => ( <> - {/* */} ( <> - {/* */} ), p: (props) => ( - + ), ul: (props) => , ol: (props) => , li: (props) => , - img: (props) => , + img: (props) => ( + + ), a: (props) => , pre: (props) => { // @ts-ignore - if(props.node.children[0]?.tagName === 'code'){ - + if (props.node.children[0]?.tagName === "code") { //@ts-ignore - const codeProps = props.children[0]?.props as (undefined | Omit, HTMLPreElement>, "ref"> & ReactMarkdownProps) + const codeProps = props.children[0]?.props as + | undefined + | (Omit< + React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLPreElement + >, + "ref" + > & + ReactMarkdownProps); - const code = typeof codeProps?.children?.[0] === 'string' ? codeProps?.children?.[0]: '' - const language = codeProps?.className?.split("-")?.[1] + const code = + typeof codeProps?.children?.[0] === "string" + ? codeProps?.children?.[0] + : ""; + const language = codeProps?.className?.split("-")?.[1]; - if(!code){ - return 
{props.children}
+ if (!code) { + return 
{props.children}
; } - - return - }else { - return 
{props.children}
+ + return ; + } else { + return 
{props.children}
; } }, table: (props) => ( - - {props.children}
+ {props.children}
 ), }} diff --git a/workspaces/website/src/components/Card/ListCard.tsx b/workspaces/website/src/components/Card/ListCard.tsx index 789c8364af..752dd81753 100644 --- a/workspaces/website/src/components/Card/ListCard.tsx +++ b/workspaces/website/src/components/Card/ListCard.tsx @@ -16,7 +16,7 @@ import { Text } from "@ui/Typography/Text"; import { HiArrowTopRightOnSquare, HiGlobeAlt } from "react-icons/hi2"; import { SiTwitter, SiDiscord } from "react-icons/si"; import { CardGradientBorder } from "@ui/Card/components/CardGradientBorder"; -import { titleCase } from "src/utils/utils"; +import { EVENT_CATEGORY, gtmEvent, titleCase } from "src/utils/utils"; import { Button } from "@ui/Button"; interface Type { @@ -47,13 +47,11 @@ type Props = { export const ListCard = (props: Props) => { const cloudflareImage = `https://www.starknet.io/cdn-cgi/image/width=80px,height=auto,format=auto${props.image}`; - const isProd = import.meta.env.VITE_ALGOLIA_INDEX === "production"; - + const isProd = import.meta.env.VITE_ALGOLIA_INDEX === "production"; + return ( - + { spacing={{ base: "3", md: "6" }} align="center" > - {props.image && - - - - } + {props.image && ( + + + + + + )} {props.startDateTime && ( { - + gtmEvent(`move to:${props.href!}`, EVENT_CATEGORY.CLICK) + } target="_blank" > {props.description} @@ -168,11 +171,7 @@ export const ListCard = (props: Props) => { {props.type_list ? ( {props.type_list.map((tag) => ( - + {tag.type !== "ios" ? titleCase(tag.type) : "iOS"} @@ -198,14 +197,11 @@ export const ListCard = (props: Props) => { ) )} - + {props.href && props.variant !== "event" && props.variant !== "job" && ( - + { )} {props.twitter && ( - + { )} {props.discord && ( - + (null); @@ -35,14 +34,14 @@ export default function BottomPlaylist({ borderColor="border.divider" borderStyle="solid" display="flex" - flexDirection={{ base: "row", lg: 'row' }} + flexDirection={{ base: "row", lg: "row" }} flexWrap="nowrap" gap={{ base: "40px", - lg: '40px', + lg: "40px", }} - marginTop={'24px'} - maxH={{ base: "auto", lg: 'auto' }} + marginTop={"24px"} + maxH={{ base: "auto", lg: "auto" }} overflowX="auto" ref={ref} sx={{ @@ -67,14 +66,14 @@ export default function BottomPlaylist({ }} minW={{ base: "151px", - md: "175px" + md: "175px", }} maxW={{ base: "151px", - md: "175px" + md: "175px", }} flexDirection={{ - base: "column" + base: "column", }} flexWrap="nowrap" padding={{ @@ -84,26 +83,26 @@ export default function BottomPlaylist({ gap="16px" _first={{ marginLeft: { - base: "auto" + base: "auto", }, }} _last={{ marginRight: { - base: "auto" + base: "auto", }, }} > {chapter.title} {chapter.durationTime} - + {chapter.title} @@ -143,7 +142,7 @@ export default function BottomPlaylist({ lineHeight="normal" flex={1} display={{ - base: "none" + base: "none", }} alignItems="flex-end" > diff --git a/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx b/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx index 1f0ea05ae8..f1b0e08d79 100644 --- a/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx +++ b/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx @@ -2,6 +2,7 @@ import { Box, Image } from "@chakra-ui/react"; import { Chapter } from "../constants"; import styled from "@emotion/styled"; import { useEffect } from "react"; +import { EVENT_CATEGORY, gtmEvent } from "src/utils/utils"; const ChaptersPlaylistWrapper = styled(Box)` ::-webkit-scrollbar { @@ -22,7 +23,6 @@ export default function ChaptersPlaylist({ currentChapter, onChapterChange, }: ChaptersPlaylistProps) { - useEffect(() => { const chapterElement = document.getElementById(currentChapter.id); const parentElement = chapterElement?.parentElement; @@ -69,12 +69,17 @@ export default function ChaptersPlaylist({ padding={{ lg: "0px 4px 0px 0px" }} height="max-content" > - + + gtmEvent(chapter.title || "", EVENT_CATEGORY.CLICK) + } + > {chapter.title} - + {chapter.durationTime} @@ -114,7 +125,7 @@ export default function ChaptersPlaylist({ lineHeight="normal" flex={1} display={{ - base: "none" + base: "none", }} alignItems="flex-end" > diff --git a/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx b/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx index 6788fa93fb..945264323e 100644 --- a/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx +++ b/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx @@ -1,4 +1,3 @@ - import { Box } from "@chakra-ui/react"; import React, { CSSProperties, useCallback, useMemo, useState } from "react"; import { useUpdateEffect } from "react-use"; @@ -47,12 +46,15 @@ export function VideoPlayerWebsite({ [setVideoContainerHeightChange] ); - const playlistProps = useMemo(() => ({ - height: videoContainerHeight, - chapters, - currentChapter, - onChapterChange, - }), [videoContainerHeight, chapters, currentChapter, onChapterChange]); + const playlistProps = useMemo( + () => ({ + height: videoContainerHeight, + chapters, + currentChapter, + onChapterChange, + }), + [videoContainerHeight, chapters, currentChapter, onChapterChange] + ); const videoWrapperStyle: CSSProperties = isFullscreen ? { position: "absolute", inset: 0, height: "100%", width: "100%" } @@ -105,9 +107,9 @@ export function VideoPlayerWebsite({ )} /> {playlistOnBottom ? ( - + ) : ( - + )} ); diff --git a/workspaces/website/src/pages/(components)/Navbar.tsx b/workspaces/website/src/pages/(components)/Navbar.tsx index 5bccfafbd5..e677e8ada6 100644 --- a/workspaces/website/src/pages/(components)/Navbar.tsx +++ b/workspaces/website/src/pages/(components)/Navbar.tsx @@ -6,7 +6,7 @@ import { NavbarContainer } from "@ui/Layout/Navbar/NavbarContainer"; import { NavBarLink } from "@ui/Layout/Navbar/NavBarLink"; import { NavbarHeading } from "@ui/Layout/Navbar/NavbarHeading"; import { Box, ButtonGroup, Flex } from "@chakra-ui/react"; -import { getComputedLinkData } from "src/utils/utils"; +import { EVENT_CATEGORY, getComputedLinkData, gtmEvent } from "src/utils/utils"; import { MainSearch } from "./MainSearch"; import React, { Fragment } from "react"; import { IconButton } from "@ui/IconButton"; @@ -53,14 +53,7 @@ export default function Navbar({ key={`${mainMenuItemIndex}-${pathname}`} label={mainMenuItem.title} > - + {mainMenuItem.columns?.length && mainMenuItem.columns?.map((column, columnIndex) => ( @@ -72,13 +65,25 @@ export default function Navbar({ ); if (!href) { - return {label}; + return ( + + gtmEvent( + label || "", + EVENT_CATEGORY.BUTTON_CLICK + ) + } + > + {label} + + ); } if (item.custom_icon) { return ( - window.gtag?.("event", target, { event_category: "engagement" }); + +export enum EVENT_CATEGORY { + CLICK = "click", + BUTTON_CLICK = "button_click", + PAGE_VIEW = "page_view", + FORM_SUBMISSION = "form_submission", + CUSTOM_EVENT = "custom_event", + USER_ENGAGEMENT = "user_engagement", + SCROLL = "scroll", + ENGAGEMENT = "engagement", +} + +export const gtmEvent = ( + target: string, + event_category = EVENT_CATEGORY.ENGAGEMENT +) => window.gtag?.("event", target, { event_category: event_category }); From 8e181b93ba52465e530b1a00dc61f7ffe8e86e66 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Wed, 1 May 2024 12:00:11 +0300 Subject: [PATCH 02/10] add some events --- workspaces/netlify-cms/src/CustomPreview.tsx | 19 +- .../src/components/Card/ImageIconCard.tsx | 255 ++++++++++++------ .../src/components/Card/NewsletterCard.tsx | 28 +- 3 files changed, 192 insertions(+), 110 deletions(-) diff --git a/workspaces/netlify-cms/src/CustomPreview.tsx b/workspaces/netlify-cms/src/CustomPreview.tsx index 102befbe01..4d7316dded 100644 --- a/workspaces/netlify-cms/src/CustomPreview.tsx +++ b/workspaces/netlify-cms/src/CustomPreview.tsx @@ -49,8 +49,8 @@ export default function CustomPreview(props: CustomPreviewProps) { const { height } = useWindowSize(); const { type, entry, getAsset } = props; - const fixImagePreview = async (_item: any, key = 'image') => { - const item = {..._item} + const fixImagePreview = async (_item: any, key = "image") => { + const item = { ..._item }; const asset = getAsset(item[key]); if (item[key] && asset.url) { if (asset.path === "empty.svg") { @@ -62,7 +62,7 @@ export default function CustomPreview(props: CustomPreviewProps) { } } - return item + return item; }; useEffect(() => { @@ -80,7 +80,7 @@ export default function CustomPreview(props: CustomPreviewProps) { _data.image = image.replace("public", ""); } } - } + }; const getDataWithBlobImage = async (blocks: TopLevelBlock[]) => { return Promise.all( @@ -95,11 +95,12 @@ export default function CustomPreview(props: CustomPreviewProps) { } else if (block.type === "card_list") { //@ts-ignore block.card_list_items = await Promise.all( - block.card_list_items.map(async (item) => await fixImagePreview(item)) + block.card_list_items.map( + async (item) => await fixImagePreview(item) + ) ); - } - else if(block.type === "image_icon_link_card") { - block = await fixImagePreview(block, 'icon') + } else if (block.type === "image_icon_link_card") { + block = await fixImagePreview(block, "icon"); } return block; @@ -108,7 +109,7 @@ export default function CustomPreview(props: CustomPreviewProps) { }; const sendDataToLivePreviewRenderer = async (_data: any) => { - fixTopLevelImagePreview(_data) + fixTopLevelImagePreview(_data); if (type === CustomPreviewType.TUTORIALS) { _data.tags = convertStringTagsToArray(_data.tags); diff --git a/workspaces/website/src/components/Card/ImageIconCard.tsx b/workspaces/website/src/components/Card/ImageIconCard.tsx index e3732f7932..0f8ec47be8 100644 --- a/workspaces/website/src/components/Card/ImageIconCard.tsx +++ b/workspaces/website/src/components/Card/ImageIconCard.tsx @@ -12,39 +12,49 @@ import { Heading } from "@ui/Typography/Heading"; import { Text } from "@ui/Typography/Text"; import "./style.css"; import { CardGradientBorder } from "@ui/Card/components/CardGradientBorder"; -import { getComputedLinkData } from "src/utils/utils"; +import { EVENT_CATEGORY, getComputedLinkData, gtmEvent } from "src/utils/utils"; import { CustomLink } from "@ui/Link/CustomLink"; import { LinkData } from "@starknet-io/cms-data/src/settings/main-menu"; import { Button } from "@ui/Button"; type Props = { - variant?: "image_icon_link_card" | "icon_link_card" | "dapp" | "large_card" | "community_card"; + variant?: + | "image_icon_link_card" + | "icon_link_card" + | "dapp" + | "large_card" + | "community_card"; title: string; link?: LinkData; icon?: string; defaultIcon?: string; description?: string; - locale: string, - size?: "large" | "small", - withIllustration?: boolean, - withBackground?: boolean, - columns?: number, + locale: string; + size?: "large" | "small"; + withIllustration?: boolean; + withBackground?: boolean; + columns?: number; color?: - | "blue-default" - | "orange" - | "blue" - | "purple" - | "peach" - | "cyan" - | "pink" - | "grey", - orientation?: "left" | "right" | "vertical" + | "blue-default" + | "orange" + | "blue" + | "purple" + | "peach" + | "cyan" + | "pink" + | "grey"; + orientation?: "left" | "right" | "vertical"; onClick?: () => void; }; type titleVariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; type linkVariantType = "cardBody" | "breadcrumbs" | "footerLink" | "textLink"; -type descriptionVariantType = "body" | "cardBody" | "breadcrumbs" | "footerLink" | "textLink"; +type descriptionVariantType = + | "body" + | "cardBody" + | "breadcrumbs" + | "footerLink" + | "textLink"; export const ImageIconCard = ({ title, @@ -59,12 +69,15 @@ export const ImageIconCard = ({ variant = "image_icon_link_card", columns = 4, orientation = "left", - onClick + onClick, }: Props) => { - const { href , label } = getComputedLinkData(locale, link ?? { - custom_title: '', - custom_internal_link: '' - }); + const { href, label } = getComputedLinkData( + locale, + link ?? { + custom_title: "", + custom_internal_link: "", + } + ); let titleVariant; let descriptionVariant; let linkVariant; @@ -82,7 +95,8 @@ export const ImageIconCard = ({ titleVariant = size === "large" ? "h3" : "h4"; linkVariant = size === "large" ? "cardLink" : "smallCardLink"; cardFooterPadding = "16px 0 0 0"; - globalPadding = columns === 4 ? "120px 40px 48px 32px" : "68px 48px 36px 48px"; + globalPadding = + columns === 4 ? "120px 40px 48px 32px" : "68px 48px 36px 48px"; break; case "dapp": titleVariant = "h3"; @@ -110,73 +124,137 @@ export const ImageIconCard = ({ } return ( - + - + - + {title} {variant !== "icon_link_card" && ( @@ -188,7 +266,7 @@ export const ImageIconCard = ({ lineHeight="24px" > {description}{" "} - {variant === "community_card" && href !== '#' && ( + {variant === "community_card" && href !== "#" && ( - )} - {link && variant !== "dapp" && variant !== "community_card" && variant !== "large_card" && ( - - - + + - {label} → - - - - )} + {label} → + + + + )} diff --git a/workspaces/website/src/components/Card/NewsletterCard.tsx b/workspaces/website/src/components/Card/NewsletterCard.tsx index d6208309d4..e8f925810a 100644 --- a/workspaces/website/src/components/Card/NewsletterCard.tsx +++ b/workspaces/website/src/components/Card/NewsletterCard.tsx @@ -6,13 +6,12 @@ import { useState } from "react"; import RoadmapSubscribeForm from "src/pages/(components)/roadmap/RoadmapSubscribeForm"; import { ImageIconCard } from "./ImageIconCard"; - /** - * `Props` type. + * `Props` type. */ type Props = { - description: string, + description: string; env: { CLOUDFLARE_RECAPTCHA_KEY: string; }; @@ -24,31 +23,22 @@ type Props = { * Export `NewsletterCard` component. */ -export const NewsletterCard = ({ - description, - env, - locale, - title -}: Props) => { +export const NewsletterCard = ({ description, env, locale, title }: Props) => { const [isOpen, setIsOpen] = useState(false); return ( <> - + - setIsOpen(true)} - orientation={'left'} - size={'large'} + orientation={"left"} + size={"large"} title={title} - variant={'community_card'} + variant={"community_card"} locale={locale} withIllustration={false} /> From d90736e6d35af1094f3d06f92bc7ba5da129a161 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Wed, 1 May 2024 13:27:33 +0300 Subject: [PATCH 03/10] add gtm events --- .../src/components/Card/ImageIconCard.tsx | 1 + .../website/src/components/Card/ListCard.tsx | 52 +++++++++++-------- workspaces/website/src/utils/utils.ts | 1 + 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/workspaces/website/src/components/Card/ImageIconCard.tsx b/workspaces/website/src/components/Card/ImageIconCard.tsx index 0f8ec47be8..b42937eea8 100644 --- a/workspaces/website/src/components/Card/ImageIconCard.tsx +++ b/workspaces/website/src/components/Card/ImageIconCard.tsx @@ -133,6 +133,7 @@ export const ImageIconCard = ({ }} > console.log("edfdfd")} overflow="hidden" borderRadius={{ base: "24px", diff --git a/workspaces/website/src/components/Card/ListCard.tsx b/workspaces/website/src/components/Card/ListCard.tsx index 752dd81753..d457e855e5 100644 --- a/workspaces/website/src/components/Card/ListCard.tsx +++ b/workspaces/website/src/components/Card/ListCard.tsx @@ -50,7 +50,12 @@ export const ListCard = (props: Props) => { const isProd = import.meta.env.VITE_ALGOLIA_INDEX === "production"; return ( - + + gtmEvent(props.title!.replace(/ /g, "_"), EVENT_CATEGORY.LINK) + } + > { {props.startDateTime && ( {props.startDateTime} {props.city && ( @@ -109,15 +111,11 @@ export const ListCard = (props: Props) => { )} - {/* {props.city} */} {props.city && ` ${props.city}, `} {props.country && props.country} @@ -127,8 +125,6 @@ export const ListCard = (props: Props) => { spacing={{ base: "1", md: "2" }} direction={{ base: "row", md: "row" }} pb="4px" - // removing until designers look at this - // borderTop={!props.startDateTime ? "none" : "1px solid red"} paddingTop="4px" > { {props.title} - {/* */} { fontSize="sm" color="list-card-lg-desc-fg" href={props.href!} - onClick={() => - gtmEvent(`move to:${props.href!}`, EVENT_CATEGORY.CLICK) - } target="_blank" > {props.description} - {/* {props.variant === "event" && ( - - - - )} */} {props.type_list ? ( {props.type_list.map((tag) => ( - + { + e.stopPropagation(); + gtmEvent( + `move_to:${tag.url.replace(/ /g, "_")}`, + EVENT_CATEGORY.LINK + ); + }} + > {tag.type !== "ios" ? titleCase(tag.type) : "iOS"} @@ -201,7 +197,17 @@ export const ListCard = (props: Props) => { {props.href && props.variant !== "event" && props.variant !== "job" && ( - + { + e.stopPropagation(); + gtmEvent( + `move_to:${props.href.replace(/ /g, "_")}`, + EVENT_CATEGORY.LINK + ); + }} + > Date: Sun, 5 May 2024 15:44:26 +0300 Subject: [PATCH 04/10] =?UTF-8?q?Update=20Page=20=E2=80=9Cfrequently-asked?= =?UTF-8?q?-questions=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _data/pages/frequently-asked-questions.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/pages/frequently-asked-questions.yml b/_data/pages/frequently-asked-questions.yml index e7ebd1852f..8627406209 100644 --- a/_data/pages/frequently-asked-questions.yml +++ b/_data/pages/frequently-asked-questions.yml @@ -713,5 +713,5 @@ blocks: forum](https://community.starknet.io/) - label: I came across a fraud attempt. How can I warn others against it? body: You can report scams and check for other reports of scams in the - [scam-report](https://discord.gg/qypnmzkhbc) channel on the [Starknet + scam-report channel on the [Starknet Discord](https://starknet.io/discord) server. From 8bbdd3db8770a3627588efb7a91dffa5bf0292ba Mon Sep 17 00:00:00 2001 From: Tal Ben Avi <91826661+TalBenAvi@users.noreply.github.com> Date: Sun, 5 May 2024 17:25:37 +0300 Subject: [PATCH 05/10] =?UTF-8?q?Update=20Page=20=E2=80=9Cgrant=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _data/pages/grant.yml | 212 ++++++++++++++++++++++++++---------------- 1 file changed, 134 insertions(+), 78 deletions(-) diff --git a/_data/pages/grant.yml b/_data/pages/grant.yml index a272b0bb02..4ddab6bb74 100644 --- a/_data/pages/grant.yml +++ b/_data/pages/grant.yml @@ -11,28 +11,6 @@ blocks: title: Seed Grant Program description: "" darkTextColor: true - - type: card_display - title: Application Process - button: Apply Now - buttonLink: https://starknet.questbook.app/proposal_form/?grantId=661667585afea0acb56c9f08&chainId=10&newTab=true - card_display_items: - - title: Application - description: "Applicants will submit proposals via an Questbook application form - provided by the Starknet Foundation team. " - - title: Internal Evaluation - description: " Each application will be assessed by members of the Starknet - Foundation and Starkware team based on criteria such as potential - impact, innovation, milestones, community engagement & track record, - and embeddedness with the Starknet ecosystem." - - title: Results - description: We plan to communicate decisions on your application within an - approximate two week timeframe. - - title: Onboarding - description: "Upon signing a grant agreement and completing KYC, the Starknet - Foundation will send funds. " - - title: Grant Deliverables - description: "After completion of the work, the Foundation will assess results - and share deliverables (blog post, video, AMA) with the team. " - type: container blocks: - type: flex_layout @@ -40,36 +18,71 @@ blocks: blocks: - type: markdown body: >- - The grants will be awarded to individuals and teams demonstrating - promising results in building applications on Starknet, using any - combination of the following criteria: + The Seed Grants Program is designed to provide teams with grants + up to $25,000 in USDC in non-dilutive funding to enhance the + growth of the Starknet ecosystem.  + + + This program has a simplified application and evaluation process, aiming to provide a decision approximately two weeks after submission.  + + + A Seed Grant is appropriate for projects and teams that meet any of the following criteria: - * Prior development experience on Starknet. - * Active involvement in the Starknet community, indicated by participation in a Starknet hackathon, builder program, or another entry-level initiative. + * Actively involved in the Starknet community and/ or participated in a Starknet hackathon, builder program, or other entry-level initiative. + + * Already developed an MVP or proof of concept. * Willing to submit a demo or links to a proof of concept or MVP. * Planning on using or building upon existing Starknet tools and integrations. + * You’re experimenting with innovative concepts aimed at pushing boundaries of what is possible on Starknet. + - **All applicants will be required to provide a clear roadmap detailing how the grant will be used within the next three months.** + All teams should present a clear plan detailing how the grant will be used within the next three months. - heading: Who Can Apply? + + We welcome applications from all industries, and there are no restrictions on the types of projects we consider. + heading: Seed Grants Program xl: 1 lg: 1 md: 1 base: 1 max_width: 1062 + - type: card_display + title: Application Process + button: Apply Now + buttonLink: https://starknet.questbook.app/proposal_form/?grantId=661667585afea0acb56c9f08&chainId=10&newTab=true + card_display_items: + - title: Application + description: "To apply, fill out the Questbook form provided. " + - title: Internal Evaluation + description: " Each application will be assessed by an experienced review + committee based on potential impact, innovation, milestones, community + engagement & track record, and embeddedness with the Starknet + ecosystem." + - title: Results + description: "We plan to communicate decisions on your application within an + approximate two week timeframe. " + - title: Onboarding + description: After successfully completing KYC and signing a grant agreement, + you will receive funds. + - title: Grant Deliverables + description: "After completion of the work, the Foundation will assess results + and share deliverables (blog post, video, AMA) with the team and + expect regular updates. " - type: container blocks: - type: flex_layout heading_variant: sm blocks: - - type: markdown - body: >- - Projects currently affiliated with the Starknet Foundation’s Developer Partnership are not eligible to participate in the Seed Grants Program. - Ineligible applications include anything related to: + - type: markdown + body: >- + Projects currently affiliated with the Starknet Foundation’s + Developer Partnership are not eligible to participate in the Seed + Grants Program. Ineligible applications include anything related + to: * Gambling @@ -82,7 +95,6 @@ blocks: * Money laundering * Any criminal activity - heading: Who is Not Eligible base: 1 md: 1 @@ -102,48 +114,92 @@ blocks: ea0acb56c9f08&chainId=10&newTab=true " - type: container blocks: - - type: accordion - heading: FAQs - blocks: - - label: What is the Seed Grants Program? - body: "* The Seed Grants Program offers teams developing on Starknet grants of - up to $25,000 to foster the growth of the Starknet ecosystem" - - label: Who can apply? - body: >- - The grants will be awarded to individuals and teams demonstrating - promising results in building applications on Starknet, using any - combination of the following criteria: - * Prior development experience on Starknet. - * Active involvement in the Starknet community, indicated by participation in a Starknet hackathon, builder program, or another entry-level initiative. - * Willing to submit a demo or links to a proof of concept or MVP. - * Planning on using or building upon existing Starknet tools and integrations. - All applicants will be required to provide an explanation detailing how the grant will be used within the next three months. - Please note that projects currently affiliated with the Starknet Foundation’s Developer Partnership are not eligible to participate in the Seed Grants Program. - - label: What currency are grants paid in? - body: Grants are paid out in USDC. - - label: How long will it take to receive a response on my application? - body: You should receive a response around \[two weeks] after submission. - - label: What types of projects do you provide grants to? - body: Any project building on Starknet can be eligible for a grant. There is no - specific industry vertical targeted and the program is open to all - types of submissions. - - label: Who is reviewing grant applications? - body: Starknet Foundation and Starkware team members will be reviewing the - applications. - - label: Is my application confidential? - body: Applications will not be made public and will only be shared amongst the - Starknet Foundation and Starkware team. - - label: Will I hear back if my request is rejected? - body: Yes — you will hear back if your application is not accepted. - - label: Are there application deadlines? - body: No – you can apply for Seed Grants on an ongoing basis. Applications will - be reviewed in rounds. - - label: How can I apply for a grant? - body: Please apply via this link, where you will be asked to fill out several - questions. - - label: How will the reviewers evaluate my application? - body: Your application will undergo evaluation by members of the Starknet - Foundation and Starkware team, focusing on factors such as impact, - innovation, community engagement, track record, and other relevant - criteria. + - type: accordion + heading: FAQs + blocks: + - label: What is the Seed Grants Program? + body: The Seed Grants Program offers teams developing on Starknet grants up to + $25,000 to foster the growth of the Starknet ecosystem. + - label: Who can apply? + body: >- + + + * The grants will be awarded to individuals and teams demonstrating promising results in building applications on Starknet, using any combination of the following criteria: + + * * Prior development experience on Starknet. + * Active involvement in the Starknet community, indicated by participation in a Starknet hackathon, builder program, or another entry-level initiative. + * Willing to submit a demo or links to a proof of concept or MVP. + * Planning on using or building upon existing Starknet tools and integrations. + * Experimenting with innovative concepts aimed at pushing boundaries on Starknet. + * All applicants will be required to provide an explanation detailing how the grant will be used within the next three months. + + * Please note that projects currently affiliated with the Starknet Foundation’s Developer Partnership are not eligible to participate in the Seed Grants Program. + - label: What currency are grants paid in? + body: Grants are paid out in USDC. + - label: How long will it take to receive a response on my application? + body: You should receive a response around two weeks after submission. + - label: What types of projects do you provide grants to? + body: Any project building on Starknet can be eligible for a grant. We welcome + applications from all industries, and there are no restrictions on + the types of projects we consider. + - label: Who is reviewing grant applications? + body: Starknet Foundation and Starkware team members will be reviewing the + applications. + - label: Is my application confidential? + body: Applications will not be made public and will only be shared amongst the + Starknet Foundation and Starkware team. + - label: Will I hear back if my request is rejected? + body: Yes — you will hear back if your application is not accepted. + - label: Are there application deadlines? + body: No – you can apply for Seed Grants on an ongoing basis. Applications will + be reviewed in rounds. + - label: How can I apply for a grant? + body: Please apply via this link, where you will be asked to fill out several + questions. + - label: How will the reviewers evaluate my application? + body: Each application will be assessed by an experienced review committee based + on potential impact, innovation, milestones, community engagement + & track record, and embeddedness with the Starknet ecosystem. + - label: Can candidates apply more than once? + body: Yes, however, you will be asked if you have previously applied to the Seed + Grants program. If you have, please include details on how your + project has evolved and improved since the last time you applied. + - label: Can candidates apply who have received other funding from Starkware or + the Starknet Foundation? + body: We encourage existing Starknet funded projects to apply and illustrate + what they will use the Seed Grant for. However, please note that + projects currently under a Developer Partnership will not be + eligible for Seed Grants. + - label: Will there be a KYC/ KYB process involved? + body: Yes, we are legally required to perform KYC/ KYB to verify identities and + ensure funds are properly distributed. Any project unwilling to + complete the required KYC/KYB procedures will not be eligible for + a grant. + - label: What are some tips for a good application? + body: When completing your application, it's crucial to provide a comprehensive + overview of your project, outlining its objectives, potential + impact, and how it aligns with the Starknet ecosystem.Clearly + articulate the unique value proposition of your project and how it + addresses existing challenges or opportunities within the + ecosystem.Additionally, detail your team's expertise, experience, + and contributions, showcasing why you're the right group to bring + this project to life.Finally, a well-thought-out plan for using + the grant money is essential, as it will demonstrate a clear + understanding of how the funds will be allocated to drive project + success. + - label: Are there any particular industries you are focused on? + body: We welcome applications from all industries, and there are no restrictions + on the types of projects we consider. + - label: What if I need more than $25,000? + body: If you require more than $25,000, we recommend considering other funding + options or discussing your specific needs with our team.While the + Seed Grants program offers grants up to $25,000, we understand + that some projects may require additional funding. Feel free to + reach out to us to discuss potential alternatives or opportunities + for further support + - label: Will you give priority to those already building and participating in + Starknet? + body: While any project can apply, your project has a much better chance of + standing out if you can show prior Starknet alignment and + participation. max_width: 1062 From fa59ed888a07da450782622c92835c3c8a2a9c1a Mon Sep 17 00:00:00 2001 From: Tal Ben Avi <91826661+TalBenAvi@users.noreply.github.com> Date: Sun, 5 May 2024 17:27:46 +0300 Subject: [PATCH 06/10] =?UTF-8?q?Update=20Page=20=E2=80=9Cgrant=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _data/pages/grant.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_data/pages/grant.yml b/_data/pages/grant.yml index 4ddab6bb74..c13e93a2b8 100644 --- a/_data/pages/grant.yml +++ b/_data/pages/grant.yml @@ -79,10 +79,10 @@ blocks: blocks: - type: markdown body: >- - Projects currently affiliated with the Starknet Foundation’s - Developer Partnership are not eligible to participate in the Seed - Grants Program. Ineligible applications include anything related - to: + If your project is currently part of the Starknet Foundation’s + Developer Partnership, you cannot apply for this grant. We do not + accept applications related to: + * Gambling From 0ddeba6c7927e9b82beb574ee440f50d76d94318 Mon Sep 17 00:00:00 2001 From: Tal Ben Avi <91826661+TalBenAvi@users.noreply.github.com> Date: Sun, 5 May 2024 17:27:57 +0300 Subject: [PATCH 07/10] =?UTF-8?q?Update=20Page=20=E2=80=9Cgrant=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _data/pages/grant.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/_data/pages/grant.yml b/_data/pages/grant.yml index c13e93a2b8..893a16e03f 100644 --- a/_data/pages/grant.yml +++ b/_data/pages/grant.yml @@ -80,8 +80,10 @@ blocks: - type: markdown body: >- If your project is currently part of the Starknet Foundation’s - Developer Partnership, you cannot apply for this grant. We do not - accept applications related to: + Developer Partnership, you cannot apply for this grant. + + + We do not accept applications related to: * Gambling From 0ab55436095576ad0f316c749f30a98d738b5171 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 6 May 2024 08:58:34 +0300 Subject: [PATCH 08/10] adding gtm on Accordion --- .../website/src/components/Accordion/PageAccordion.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/workspaces/website/src/components/Accordion/PageAccordion.tsx b/workspaces/website/src/components/Accordion/PageAccordion.tsx index c58b1e339b..9d1b3c158b 100644 --- a/workspaces/website/src/components/Accordion/PageAccordion.tsx +++ b/workspaces/website/src/components/Accordion/PageAccordion.tsx @@ -1,4 +1,3 @@ - //todo: Rewrite this component post launch import React from "react"; @@ -11,6 +10,7 @@ import { Icon, Box, } from "@chakra-ui/react"; +import { EVENT_CATEGORY, gtmEvent } from "src/utils/utils"; type RootProps = { children: React.ReactNode; @@ -29,7 +29,11 @@ type ItemProps = { }; const Item = ({ label, children }: ItemProps) => { return ( - + + gtmEvent(label.replace(/ /g, "_"), EVENT_CATEGORY.BUTTON_CLICK) + } + > {({ isExpanded }) => ( <> From ed77fd48c80d515671455f3451765d1c1a6a2913 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 6 May 2024 09:43:08 +0300 Subject: [PATCH 09/10] adding gtm to LinkList item --- workspaces/website/src/components/LinkList/LinkList.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/workspaces/website/src/components/LinkList/LinkList.tsx b/workspaces/website/src/components/LinkList/LinkList.tsx index b120dbbded..ae8c7e4160 100644 --- a/workspaces/website/src/components/LinkList/LinkList.tsx +++ b/workspaces/website/src/components/LinkList/LinkList.tsx @@ -5,6 +5,7 @@ import { Box, Icon, Flex, FlexProps, Link, Avatar } from "@chakra-ui/react"; import { slugify } from "@starknet-io/cms-utils/src/index"; import { createContext, useContext } from "react"; import { ArrowUpIcon } from "./ArrowUpIcon"; +import { EVENT_CATEGORY, gtmEvent } from "src/utils/utils"; export type ListSize = "sm" | "md" | "lg"; @@ -138,6 +139,12 @@ const Item = ({ subLabel, link, avatar, ...rest }: ItemProps) => { gap="8px" color="listLink-fg" _hover={{ textDecoration: "underline" }} + onClick={() => + gtmEvent( + (link.custom_title || "Link_list_item").replace(/ /g, "_"), + EVENT_CATEGORY.BUTTON_CLICK + ) + } > {(link.hasIcon ?? true) && ( From 54f0d88da9f8701793d63d5bc608c1e453b795f9 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 6 May 2024 09:52:11 +0300 Subject: [PATCH 10/10] adding gtm to ListCardItem and ImageIconCard --- .../website/src/components/Card/ImageIconCard.tsx | 1 - workspaces/website/src/components/Card/ListCard.tsx | 12 ++++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/workspaces/website/src/components/Card/ImageIconCard.tsx b/workspaces/website/src/components/Card/ImageIconCard.tsx index b42937eea8..0f8ec47be8 100644 --- a/workspaces/website/src/components/Card/ImageIconCard.tsx +++ b/workspaces/website/src/components/Card/ImageIconCard.tsx @@ -133,7 +133,6 @@ export const ImageIconCard = ({ }} > console.log("edfdfd")} overflow="hidden" borderRadius={{ base: "24px", diff --git a/workspaces/website/src/components/Card/ListCard.tsx b/workspaces/website/src/components/Card/ListCard.tsx index e4ac33171f..9ab8ed7fc8 100644 --- a/workspaces/website/src/components/Card/ListCard.tsx +++ b/workspaces/website/src/components/Card/ListCard.tsx @@ -71,7 +71,15 @@ export const ListCard = ({ return ( - + + gtmEvent( + (title || "List_card").replace(/ /g, "_"), + EVENT_CATEGORY.BUTTON_CLICK + ) + } + > ); -}; \ No newline at end of file +};