Feat/mvp frontend (#16)

* commit starter-pack frontend nextjs

* start impl form create_with_range

* clean form + ui + refacto => go view

* basic UI. Waiting Cairo contract to be finish for get and claim_stream

frontend/.env.exemple

@@ -0,0 +1,8 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# Defaults to the local database deployed from the `docker-compose.yml` stack
+
+## BASIC ENV needed
+
+WORKFLOW=development
+NODE_ENV=development
+

frontend/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+
+};

frontend/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+/.env 
+/.env.development
+/.env.local
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env.development
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

frontend/.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies = false

frontend/README.md

@@ -0,0 +1,25 @@
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about this stack, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - Learn how to build a Next.js application.
+
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend/components/BottomMobileNavBar.tsx

@@ -0,0 +1,65 @@
+// components/MobileNavBar.tsx
+import {
+  Box,
+  Flex,
+  IconButton,
+  Link as LinkChakra,
+  Spacer,
+  Stack,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { BiConversation, BiVideo } from "react-icons/bi";
+import { BsQuestion } from "react-icons/bs";
+import { FiHome, FiSearch, FiUser } from "react-icons/fi";
+import { IoCreate } from "react-icons/io5";
+import Link from "next/link";
+import { CreateButtonFixed } from "./button/CreateButtonFixed";
+const BottomMobileNavBar: React.FC = () => {
+  let colorButton = "";
+  let bg = useColorModeValue("green.100", "green.100");
+  let bgReverted = useColorModeValue("gray.300", "gray.900");
+  let color = useColorModeValue("green.100", "green.100");
+  return (
+    <Flex
+      justify="center" // Center-align the content horizontally
+      position="fixed"
+      bottom="0"
+      left="0"
+      right="0"
+      bg={bgReverted}
+      display={{ lg: "none" }}
+      zIndex="999"
+    >
+      <Stack
+        direction="row"
+        spacing={4}
+        justify="center"
+        justifyContent={"space-around"}
+        display={"flex"}
+        p={{ base: "0.7em", md: "1em" }}
+      >
+        {" "}
+        <Link href="/">
+          <IconButton
+            aria-label="Home"
+            icon={<FiHome size={"16px"} />}
+            size="32px"
+            bg="transparent"
+            color="brand.primary"
+          />
+        </Link>
+        <Link href="/create">
+          <IconButton
+            aria-label="Create"
+            size="32px"
+            icon={<IoCreate size={"16px"} />}
+            color="brand.primary"
+          />
+        </Link>
+
+      </Stack>
+    </Flex>
+  );
+};
+
+export default BottomMobileNavBar;

frontend/components/HeaderSEO.tsx

@@ -0,0 +1,63 @@
+import Head from "next/head";
+import Script from "next/script";
+import { CONFIG_WEBSITE } from "../constants";
+
+interface IHeaderSEO {
+  title?: string;
+  description?: string;
+  isWithTitle?:boolean;
+}
+const HeaderSEO = ({ title, isWithTitle, description, }: IHeaderSEO) => {
+  return (
+    <>
+      {process.env.NODE_ENV == "production" && (
+        <>
+          <Script
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
+          />
+          <Script id="google-analytics">
+            {`
+                    window.dataLayer = window.dataLayer || [];
+                    function gtag(){dataLayer.push(arguments);}
+                    gtag('js', new Date());
+                    gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
+                    page_path: window.location.pathname,
+                    });
+                `}
+          </Script>
+        </>
+      )}
+
+      <Head>
+
+        <meta
+          name="title"
+          content={CONFIG_WEBSITE.title}
+        />
+        <meta
+          name="description"
+          content={CONFIG_WEBSITE.description}
+
+        />
+        <meta
+          name="keywords"
+          content="Starknet, Starkware, Starter-pack, Dev, SocialFi, Dashboard, Network, Tool, Bot, Community, Web3, Trade, Launchpad, Portofolio, Wallet, Multi chains, Fast, Easy, Mobile"
+        />
+        <meta name="author" content="Starknet starter-pack" />
+        <meta
+          property="og:title"
+          content={CONFIG_WEBSITE.title}
+
+        />
+        <meta
+          property="og:description"
+          content={CONFIG_WEBSITE.description}
+        />
+
+        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+      </Head>
+    </>
+  );
+};
+
+export default HeaderSEO;

frontend/components/button/AccountButton.tsx

@@ -0,0 +1,44 @@
+import {
+  Box,
+  Text,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Button,
+  Icon,
+} from "@chakra-ui/react";
+import { UsersIcon } from "@heroicons/react/solid";
+import { useAccount } from "@starknet-react/core";
+
+export const AccountButton = () => {
+  const account = useAccount();
+  const address = account.address;
+  return (
+    <Menu
+    >
+      {({ isOpen }) => (
+        <>
+          <MenuButton
+            as={Button}
+            width={{ base: "100%" }}
+          >
+            <span>
+              {isOpen ? "My profil" : "My account"}
+              <Icon
+                as={UsersIcon}
+                width={"16px"}
+                h="16px"
+              ></Icon>
+            </span>
+          </MenuButton>
+          <MenuList>
+            <MenuItem>
+              <Text> {account?.address}</Text>{" "}
+            </MenuItem>
+          </MenuList>
+        </>
+      )}
+    </Menu>
+  );
+};

frontend/components/button/ConnectWallet.tsx

@@ -0,0 +1,51 @@
+import {
+  Box,
+  Text,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Button,
+  Icon,
+} from "@chakra-ui/react";
+import { UsersIcon } from "@heroicons/react/solid";
+import { useAccount } from "@starknet-react/core";
+import Link from "next/link";
+
+export const ConnectWallet = () => {
+  const account = useAccount();
+  if (!account.address) {
+    return;
+  }
+
+  return (
+    <Box pr="1em" pl="1em">
+      <Button onClick={() => {}}></Button>
+      <Menu>
+        {({ isOpen }) => (
+          <>
+            <MenuButton
+              isActive={isOpen}
+              as={Button}
+            >
+              {isOpen ? "My profil" : "Account"}
+              <Icon
+                as={UsersIcon}
+                width={"16px"}
+                h="16px"
+              ></Icon>
+            </MenuButton>
+            <MenuList>
+              <MenuItem>
+                <Button>
+                  <Link href="/my-profil">My profil</Link>
+                </Button>
+              </MenuItem>
+              <Text> {account.address}</Text>
+            </MenuList>
+          </>
+        )}
+      </Menu>
+    </Box>
+  );
+};

frontend/components/button/CreateButtonFixed.tsx

@@ -0,0 +1,31 @@
+import { Box, IconButton, useColorMode, useColorModeValue, useDisclosure, Button } from "@chakra-ui/react";
+import { BsMoon, BsSun } from "react-icons/bs";
+import { SiLivejournal } from "react-icons/si";
+import Link from "next/link";
+interface IAdminPanelGroup {
+  modalOpen: boolean;
+  onClose: () => void;
+  onOpen: () => void;
+}
+export const CreateButtonFixed = ({ modalOpen, onClose, onOpen }: IAdminPanelGroup) => {
+  const { colorMode, toggleColorMode } = useColorMode();
+  console.log("modalOpen", modalOpen)
+  return (
+
+    <Box
+
+    >
+
+      <Button
+        position="fixed"
+        bottom={{base:"5em",lg:"1.5em"}}
+        right="7"
+        as={Link}
+        href="/create"
+        >
+        <SiLivejournal />
+      </Button>
+    </Box>
+
+  );
+};