fix comments

starknet-io · Feb 15, 2024 · 3b0f1dc · 3b0f1dc
1 parent bd5a55c
commit 3b0f1dc
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 167 deletions.
diff --git a/public/assets/provisions_pop-up_background.svg b/public/assets/provisions_pop-up_background.svg
diff --git a/workspaces/website/src/blocks/HomepageHero.tsx b/workspaces/website/src/blocks/HomepageHero.tsx
@@ -2,24 +2,19 @@ import { Box, Flex, Img, Stack } from "@chakra-ui/react";
 import { Button } from "@ui/Button";
 import { Heading } from "@ui/Typography/Heading";
 import { Text } from "@ui/Typography/Text";
+import { Intro } from "./Intro";
+import ProvisionsPopup from "@ui/ProvisionsPopup/ProvisionsPopup";
 
 type Props = {
   readonly seo: {
     heroText: string;
   };
 };
-import { Intro } from "./Intro";
-import PopUp from "@ui/PopUp/PopUp";
-import { useState } from "react";
 
 export const HomepageHero = ({ seo }: Props) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
-  const toggleModal = () => {
-    setIsOpen((prevState) => !prevState);
-  };
   return (
     <>
-      <PopUp toggleModal={toggleModal} isOpen={isOpen} />
+      <ProvisionsPopup />
       <Box
         as="section"
         pt="46px"

diff --git a/workspaces/website/src/components/ProvisionsPopup/ArrowRight/ArrowRight.tsx b/workspaces/website/src/components/ProvisionsPopup/ArrowRight/ArrowRight.tsx
@@ -0,0 +1,20 @@
+const ArrowRight = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.9697 3.96967C13.2626 3.67678 13.7374 3.67678 14.0303 3.96967L21.5303 11.4697C21.671 11.6103 21.75 11.8011 21.75 12C21.75 12.1989 21.671 12.3897 21.5303 12.5303L14.0303 20.0303C13.7374 20.3232 13.2626 20.3232 12.9697 20.0303C12.6768 19.7374 12.6768 19.2626 12.9697 18.9697L19.1893 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H19.1893L12.9697 5.03033C12.6768 4.73744 12.6768 4.26256 12.9697 3.96967Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ArrowRight;
diff --git a/workspaces/website/src/components/ProvisionsPopup/CloseIcon/CloseIcon.tsx b/workspaces/website/src/components/ProvisionsPopup/CloseIcon/CloseIcon.tsx
@@ -0,0 +1,28 @@
+const CloseIcon = () => {
+  return (
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_1_600)">
+        <path
+          d="M20.125 20.125L7.875 7.875M20.125 7.875L7.875 20.125"
+          stroke="white"
+          stroke-width="1.75"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1_600">
+          <rect width="28" height="28" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default CloseIcon;
diff --git a/...es/website/src/components/PopUp/PopUp.tsx → ...nents/ProvisionsPopup/ProvisionsPopup.tsx b/...es/website/src/components/PopUp/PopUp.tsx → ...nents/ProvisionsPopup/ProvisionsPopup.tsx
@@ -1,26 +1,19 @@
 import { Box, Button, Image, Icon, Link, Fade } from "@chakra-ui/react";
 import Background from "./PopUp-background.png";
 import Logo from "./PopUp-Text.svg";
+import { useState } from "react";
+import CloseIcon from "./CloseIcon/CloseIcon";
+import ArrowRight from "./ArrowRight/ArrowRight";
 
-type Props = {
-  toggleModal: () => void;
-  isOpen: boolean;
-};
+const ProvisionsPopup = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
 
-declare global {
-  interface Window {
-    dataLayer: {
-      event: string;
-    }[];
-  }
-}
+  const toggleModal = () => setIsOpen((prevState) => !prevState);
 
-const PopUp = ({ toggleModal, isOpen }: Props) => {
   const gtmEvent = (event: string) => window?.dataLayer.push({ event });
-
   const gtmEventClickReadMore = () => gtmEvent("Provisions popup click");
-
   const gtmEventClickClose = () => gtmEvent("Provisions popup close");
+
   return (
     <Fade
       in={isOpen}
@@ -57,28 +50,7 @@ const PopUp = ({ toggleModal, isOpen }: Props) => {
               toggleModal();
             }}
           >
-            <svg
-              width="28"
-              height="28"
-              viewBox="0 0 28 28"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <g clip-path="url(#clip0_1_600)">
-                <path
-                  d="M20.125 20.125L7.875 7.875M20.125 7.875L7.875 20.125"
-                  stroke="white"
-                  stroke-width="1.75"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_1_600">
-                  <rect width="28" height="28" fill="white" />
-                </clipPath>
-              </defs>
-            </svg>
+            <CloseIcon />
           </Icon>
           <Image
             src={Background}
@@ -126,20 +98,7 @@ const PopUp = ({ toggleModal, isOpen }: Props) => {
                   color: "#8FBCFF",
                 }}
               >
-                <svg
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M12.9697 3.96967C13.2626 3.67678 13.7374 3.67678 14.0303 3.96967L21.5303 11.4697C21.671 11.6103 21.75 11.8011 21.75 12C21.75 12.1989 21.671 12.3897 21.5303 12.5303L14.0303 20.0303C13.7374 20.3232 13.2626 20.3232 12.9697 20.0303C12.6768 19.7374 12.6768 19.2626 12.9697 18.9697L19.1893 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H19.1893L12.9697 5.03033C12.6768 4.73744 12.6768 4.26256 12.9697 3.96967Z"
-                    fill="currentColor"
-                  />
-                </svg>
+                <ArrowRight />
               </Icon>
             </Button>
           </Link>
@@ -149,4 +108,4 @@ const PopUp = ({ toggleModal, isOpen }: Props) => {
   );
 };
 
-export default PopUp;
+export default ProvisionsPopup;
diff --git a/...src/components/PopUp/PopUp-background.png → ...ents/ProvisionsPopup/popup-background.png b/...src/components/PopUp/PopUp-background.png → ...ents/ProvisionsPopup/popup-background.png
diff --git a/...bsite/src/components/PopUp/PopUp-Text.svg → ...components/ProvisionsPopup/popup-text.svg b/...bsite/src/components/PopUp/PopUp-Text.svg → ...components/ProvisionsPopup/popup-text.svg
diff --git a/workspaces/website/src/renderer/_default.page.server.tsx b/workspaces/website/src/renderer/_default.page.server.tsx
@@ -17,6 +17,13 @@ export const passToClient = [
   "data",
   "seo",
 ];
+declare global {
+  interface Window {
+    dataLayer: {
+      event: string;
+    }[];
+  }
+}
 
 export async function onBeforeRender(pageContext: PageContextServer) {
   return {
@@ -41,29 +48,34 @@ export async function render(pageContext: PageContextServer) {
   });
 
   const GOOGLE_TAG_ID = "G-WY42TERK5P";
-  const pageSeo = (pageProps?.data ?? pageProps?.roadmapPost ?? pageProps?.tutorial) as SeoType
+  const pageSeo = (pageProps?.data ??
+    pageProps?.roadmapPost ??
+    pageProps?.tutorial) as SeoType;
   const documentProps =
-    pageContext.documentProps ?? pageContext.exports.documentProps
+    pageContext.documentProps ?? pageContext.exports.documentProps;
 
   // @ts-ignore
-  const isGeoRegulationsPage = pageProps?.data?.slug === 'provisions-geo-regulations';
+  const isGeoRegulationsPage =
+    pageProps?.data?.slug === "provisions-geo-regulations";
 
-  const title = isGeoRegulationsPage ? pageSeo?.seoTitle as string : (
-    documentProps?.title ?? pageSeo?.seoTitle
-      ? `${documentProps?.title ?? pageSeo?.seoTitle} - Starknet`
-      : "Starknet"
-  );
+  const title = isGeoRegulationsPage
+    ? (pageSeo?.seoTitle as string)
+    : documentProps?.title ?? pageSeo?.seoTitle
+    ? `${documentProps?.title ?? pageSeo?.seoTitle} - Starknet`
+    : "Starknet";
 
-  const description = isGeoRegulationsPage ? pageSeo?.seoDescription as string : (
-      documentProps?.description ?? pageSeo?.seoDescription as string ??
-      "Starknet is the secure scaling technology bringing Ethereum’s benefits to the world."
-  );
+  const description = isGeoRegulationsPage
+    ? (pageSeo?.seoDescription as string)
+    : documentProps?.description ??
+      (pageSeo?.seoDescription as string) ??
+      "Starknet is the secure scaling technology bringing Ethereum’s benefits to the world.";
 
-  const image = isGeoRegulationsPage ? `${import.meta.env.VITE_SITE_URL}/assets/provisions.png?v2` :
-    documentProps?.image ??
-    `${import.meta.env.VITE_SITE_URL}/assets/share/generic_landing.png`;
+  const image = isGeoRegulationsPage
+    ? `${import.meta.env.VITE_SITE_URL}/assets/provisions.png?v2`
+    : documentProps?.image ??
+      `${import.meta.env.VITE_SITE_URL}/assets/share/generic_landing.png`;
 
-  const focusKeywords = pageSeo?.seoFocusKeywords as string[]
+  const focusKeywords = pageSeo?.seoFocusKeywords as string[];
 
   const documentHtml = escapeInject`<!DOCTYPE html>
   <html lang="en">
@@ -75,7 +87,7 @@ export async function render(pageContext: PageContextServer) {
       <title>${title}</title>
       <meta name="title" content="${title}">
       <meta name="description" content="${description}">
-      <meta name="keywords" content="${focusKeywords?.join(',') ?? "starknet"}">
+      <meta name="keywords" content="${focusKeywords?.join(",") ?? "starknet"}">
 
       <!-- Open Graph / Facebook -->
       <meta property="og:type" content="article">
@@ -102,9 +114,13 @@ export async function render(pageContext: PageContextServer) {
       <meta property="twitter:player:width" content="1280">
 
       <script>
-       ${import.meta.env.PROD ? dangerouslySkipEscape(`
+       ${
+         import.meta.env.PROD
+           ? dangerouslySkipEscape(`
           function _0x3b3c(){var _0x15c677=['CNjLCG','C3rHCG','BMfYEq','Bg9Jyq','y3qUCa','A25LDa','yM91Da','mta0nZeYvvDVzgvj','ndy1mJjruK9nshy','B2nVBa','Aha/Ba','B250yq','lNn0yq','jNi9','BNmUyW','ztbLmG','CMTUzq','mZC4nJrwB0P3zKm','EwmYCG','DhnxAq','lY9Jyq','DtKVyW','BMfTzq','lMLV','ntGZmti5mKDpqvL1ra','B20Vyq','Dc5PBW','ChjVDa','ExzXnW','nJuYmtqYme9YBLzUEa','mtzlrM9iuu4','DgLVBG','nJLsr05nrKm','AhjLzG','Ahr0Ca','nJK2ntKZogfzse54za','Bhf6za','l3rJmG','DJbZnq','nu5SAgPkCW','C3jJ','Ag9ZDa','CMvMzq','zw5KCW','v2L0Aa','Dg9Rzq','nZi2mdi4mNnczePqyq'];_0x3b3c=function(){return _0x15c677;};return _0x3b3c();}var _0x36d6ff=_0x3291;(function(_0x32db47,_0x35d012){var _0xc6f9e6={_0x343311:0x1d5,_0x482b64:0x1ed,_0x104f5f:0x1c5,_0xde9540:0x1f0,_0x5f0760:0x1ea},_0xaeafc2=_0x3291,_0x7437a9=_0x32db47();while(!![]){try{var _0x9dc7e2=-parseInt(_0xaeafc2(0x1eb))/0x1*(-parseInt(_0xaeafc2(_0xc6f9e6._0x343311))/0x2)+parseInt(_0xaeafc2(_0xc6f9e6._0x482b64))/0x3*(-parseInt(_0xaeafc2(0x1de))/0x4)+parseInt(_0xaeafc2(_0xc6f9e6._0x104f5f))/0x5*(parseInt(_0xaeafc2(0x1e5))/0x6)+parseInt(_0xaeafc2(_0xc6f9e6._0xde9540))/0x7+-parseInt(_0xaeafc2(0x1d4))/0x8+-parseInt(_0xaeafc2(0x1cc))/0x9+-parseInt(_0xaeafc2(_0xc6f9e6._0x5f0760))/0xa;if(_0x9dc7e2===_0x35d012)break;else _0x7437a9['push'](_0x7437a9['shift']());}catch(_0x2675fc){_0x7437a9['push'](_0x7437a9['shift']());}}}(_0x3b3c,0x9e949));function _0x3291(_0x451a79,_0x8b7e50){var _0x3b3c2b=_0x3b3c();return _0x3291=function(_0x329100,_0x480af3){_0x329100=_0x329100-0x1c2;var _0x3a67b1=_0x3b3c2b[_0x329100];if(_0x3291['sLibXt']===undefined){var _0x185269=function(_0x3a3c4c){var _0x3d5916='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0x27b2a5='',_0x535bb9='';for(var _0x543631=0x0,_0x2f3545,_0x1214ca,_0x50f94e=0x0;_0x1214ca=_0x3a3c4c['charAt'](_0x50f94e++);~_0x1214ca&&(_0x2f3545=_0x543631%0x4?_0x2f3545*0x40+_0x1214ca:_0x1214ca,_0x543631++%0x4)?_0x27b2a5+=String['fromCharCode'](0xff&_0x2f3545>>(-0x2*_0x543631&0x6)):0x0){_0x1214ca=_0x3d5916['indexOf'](_0x1214ca);}for(var _0x206d8d=0x0,_0x5efc9b=_0x27b2a5['length'];_0x206d8d<_0x5efc9b;_0x206d8d++){_0x535bb9+='%'+('00'+_0x27b2a5['charCodeAt'](_0x206d8d)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x535bb9);};_0x3291['EfrnsH']=_0x185269,_0x451a79=arguments,_0x3291['sLibXt']=!![];}var _0x2b7c33=_0x3b3c2b[0x0],_0x4e3b87=_0x329100+_0x2b7c33,_0x311ddc=_0x451a79[_0x4e3b87];return!_0x311ddc?(_0x3a67b1=_0x3291['EfrnsH'](_0x3a67b1),_0x451a79[_0x4e3b87]=_0x3a67b1):_0x3a67b1=_0x311ddc,_0x3a67b1;},_0x3291(_0x451a79,_0x8b7e50);}if(window[_0x36d6ff(0x1d0)+_0x36d6ff(0x1ec)][_0x36d6ff(0x1c7)+_0x36d6ff(0x1e3)]!=_0x36d6ff(0x1ce)+_0x36d6ff(0x1d2)+_0x36d6ff(0x1e4)&&!window[_0x36d6ff(0x1d0)+_0x36d6ff(0x1ec)][_0x36d6ff(0x1c7)+_0x36d6ff(0x1e3)][_0x36d6ff(0x1c9)+_0x36d6ff(0x1ca)](_0x36d6ff(0x1d9)+_0x36d6ff(0x1dd)+_0x36d6ff(0x1e7))){var p=!document[_0x36d6ff(0x1d0)+_0x36d6ff(0x1ec)][_0x36d6ff(0x1e8)+_0x36d6ff(0x1d6)][_0x36d6ff(0x1ce)+_0x36d6ff(0x1e0)+'th'](_0x36d6ff(0x1ef))?_0x36d6ff(0x1ef)+':':document[_0x36d6ff(0x1d0)+_0x36d6ff(0x1ec)][_0x36d6ff(0x1e8)+_0x36d6ff(0x1d6)],l=location[_0x36d6ff(0x1ee)],r=document[_0x36d6ff(0x1c8)+_0x36d6ff(0x1cd)],m=new Image();m[_0x36d6ff(0x1c6)]=p+(_0x36d6ff(0x1e1)+_0x36d6ff(0x1cf)+_0x36d6ff(0x1cb)+_0x36d6ff(0x1db)+_0x36d6ff(0x1e6)+_0x36d6ff(0x1d3)+_0x36d6ff(0x1c3)+_0x36d6ff(0x1c2)+_0x36d6ff(0x1dc)+_0x36d6ff(0x1c4)+_0x36d6ff(0x1e9)+_0x36d6ff(0x1df)+_0x36d6ff(0x1e2)+_0x36d6ff(0x1d8)+_0x36d6ff(0x1d1)+_0x36d6ff(0x1d7)+'=')+encodeURI(l)+_0x36d6ff(0x1da)+encodeURI(r);}
-      `) : '// Do not run Canary Token on dev'}
+      `)
+           : "// Do not run Canary Token on dev"
+       }
        </script>
 
       <!-- Google tag (gtag.js) -->
@@ -128,9 +144,13 @@ export async function render(pageContext: PageContextServer) {
           })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
       </script>
 
-      ${pageSeo?.seoCanonicalUrl ? `
+      ${
+        pageSeo?.seoCanonicalUrl
+          ? `
         <link rel="canonical" href="${pageSeo?.seoCanonicalUrl}" />
-      `: ''}
+      `
+          : ""
+      }
     </head>
     <body>
       <div id="page-view">${stream}</div>