added pricing page

web-portal/frontend/components/dashboard/layout.tsx

@@ -27,7 +27,7 @@ import {
   IconSettings,
   IconX,
 } from "@tabler/icons-react";
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect } from "react";
 import Image from "next/image";
 import LogoutButton from "@frontend/components/dashboard/logout";
 import {

web-portal/frontend/components/home/common/NavLinks.tsx

@@ -10,7 +10,7 @@ export default function NavLinks({ size = 18 }: { size?: number }) {
         Home
       </Title>
 
-      <Title size={size} fw={500} onClick={() => router.push('/#pricing')} style={{
+      <Title size={size} fw={500} onClick={() => router.push('/pricing')} style={{
         cursor: "pointer"
       }}>
         Pricing

web-portal/frontend/components/login/Links.tsx

@@ -0,0 +1,24 @@
+import { IconArrowUpRight } from "@tabler/icons-react";
+import { Flex, Title,  } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { crimson } from "@frontend/utils/theme";
+export default function CommonLinks(){
+  const router = useRouter()
+  return (
+  <Flex align='center' gap={24} m={20}>
+  <Title order={2} onClick={() => router.push('/pricing')} c='carrot' style={{
+    cursor: "pointer",
+    fontFamily: crimson.style.fontFamily
+  }}>
+    Pricing
+  </Title>
+
+  <Title order={2}  onClick={() => router.push('docs.porters.xyz')} c='carrot' style={{
+    cursor: "pointer",
+    fontFamily: crimson.style.fontFamily
+  }}>
+    Docs <IconArrowUpRight size={16}/>
+  </Title>
+  </Flex>
+  )
+}

web-portal/frontend/components/pricing/Links.tsx

@@ -0,0 +1,24 @@
+import { IconArrowUpRight } from "@tabler/icons-react";
+import { Flex, Title,  } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { crimson } from "@frontend/utils/theme";
+export default function CommonLinks(){
+  const router = useRouter()
+  return (
+  <Flex align='center' gap={24} m={20}>
+  <Title order={2} onClick={() => router.push('/login')} c='carrot' style={{
+    cursor: "pointer",
+    fontFamily: crimson.style.fontFamily
+  }}>
+    Login
+  </Title>
+
+  <Title order={2}  onClick={() => router.push('docs.porters.xyz')} c='carrot' style={{
+    cursor: "pointer",
+    fontFamily: crimson.style.fontFamily
+  }}>
+    Docs <IconArrowUpRight size={16}/>
+  </Title>
+  </Flex>
+  )
+}

web-portal/frontend/pages/login/index.tsx

@@ -8,13 +8,14 @@ import { useAtomValue } from "jotai";
 import { sessionAtom } from "@frontend/utils/atoms";
 
 import { useSIWE, useModal, SIWESession } from "connectkit";
+import CommonLinks from "@frontend/components/login/Links";
 
 export default function Login() {
 
   const session = useAtomValue(sessionAtom);
 
   const { setOpen } = useModal();
-  const { data, isLoading} = useSIWE();
+  const { data, isLoading, isConnected} = useSIWE();
 
   return (
     <Box style={{ backgroundColor: "#3C2B27" }}>
@@ -31,7 +32,7 @@ export default function Login() {
           }}
         >
           <WelcomeShape>
-            <Image src={logo.src} alt="hello" width="160" height="58" />
+            <Image src={logo.src} alt="porters" width="160" height="58" />
             <Title order={2} style={{ color: "white", textAlign: "center" }}>
               Welcome to Porters. <br/> Let’s get started!
             </Title>
@@ -42,13 +43,14 @@ export default function Login() {
               loading={isLoading}
               loaderProps={{ type: 'dots' }}
             >
-              {isLoading
-                ? "Connecting"
-                : Boolean(data?.address)
-                  ? "Disconnect"
+              {Boolean(data?.address)?
+                 "Disconnect"
                   : "Connect Wallet"}
             </Button>
           </WelcomeShape>
+          <Container>
+            <CommonLinks />
+            </Container>
           <Container
             style={{
               position: "absolute",

web-portal/frontend/pages/pricing/index.tsx

@@ -0,0 +1,57 @@
+import { List, Box, Stack, Container, BackgroundImage, Title, Text, Blockquote, Center } from "@mantine/core";
+import WelcomeShape from "@frontend/components/login/welcomeshape";
+import background from "@frontend/public/background.png";
+import logo from "@frontend/public/logo.png";
+import Image from "next/image";
+import CommonLinks from "@frontend/components/pricing/Links";
+
+export default function Pricing() {
+  return (
+    <Box style={{ backgroundColor: "#3C2B27" }}>
+      <BackgroundImage src={background.src}>
+        <Stack
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8,
+            padding: '0 16px',
+          }}
+        >
+          <Box maw={600} px={60} py={32} style={{ textAlign: 'left', color: 'white', backgroundColor: '#2F201C90', gap: 10, borderRadius: 6 }}>
+            <Image src={logo.src} width={logo.width} height={logo.height} alt="Logo" style={{ marginBottom: '16px' }} />
+            <Title order={1} my={16}>
+              Pricing information
+            </Title>
+            <Text style={{fontSize: 18, opacity: 0.7}}>
+              {`PORTERS governs relays through the Gateway via our $PORTR ERC20, enabling the first natively Web3 payment solution for Blockchain RPC Services.`}
+            </Text>
+            <Title order={3} my={16}>
+              {`How do I get $PORTR?`}
+            </Title>
+            <Blockquote color='carrot.5' mt={16} py={20} pl={10}>
+              <List type="ordered">
+                <List.Item mb={10} >
+                  Swap from any ERC20 you hold on OP / Base / Gnosis / Taiko (more chains coming soon).
+                </List.Item>
+                <List.Item>
+                  Redeem $PORTR in your dashboard.
+                </List.Item>
+              </List>
+            </Blockquote>
+            <Center my={20}>
+            <Text td="line-through" pr={4} style={{fontSize: 26, textDecorationColor: `#FFA44B`}}> $4.00 </Text>
+            <Text  style={{fontSize: 26}}> {`= 1000 $PORTR = 1M Relays`}</Text>
+            </Center>
+            <Center  my={20} >
+            <Text c='carrot' pr={5} style={{fontSize: 26}}>$3.33</Text>
+            <Text style={{fontSize: 20}}>{`until June 30th 2024!`} </Text>
+            </Center>
+          </Box>
+          <CommonLinks/>
+        </Stack>
+      </BackgroundImage>
+    </Box>
+  );
+}

web-portal/frontend/utils/Web3Provider.tsx

@@ -10,13 +10,6 @@ import { connectKitTheme } from "@frontend/styles/connectkit-theme";
 export const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!;
 export const NEXT_PUBLIC_APP_URL = process.env.NEXT_PUBLIC_APP_URL!;
 
-const envVariables = { projectId, NEXT_PUBLIC_APP_URL };
-
-Object.entries(envVariables).forEach(([key, value]) => {
-  if (!value) {
-    throw new Error(`${key} is not defined`);
-  }
-});
 
 // Create wagmiConfig
 export const chains = [mainnet, optimism, base, gnosis] as const;