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

starknet-io · Jan 23, 2024 · 8b2132d · 8b2132d
1 parent cf6da60
commit 8b2132d
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 29 deletions.
diff --git a/frontend/components/form/create/index.tsx b/frontend/components/form/create/index.tsx
@@ -194,6 +194,7 @@ const CreateStreamForm = ({}: ICreateStream) => {
         py={{ base: "1em", md: "2em" }}
         display={{ md: "flex" }}
         height={"100%"}
+        justifyContent={'space-around'}
         // gridTemplateColumns={'1fr 1fr'}
         gap={{ base: "0.5em", md: "1em" }}
         alignContent={"baseline"}
@@ -374,9 +375,9 @@ const CreateStreamForm = ({}: ICreateStream) => {
         </Box>
       </Box>
 
-      <Box textAlign={"left"}>
+      <Box textAlign={"center"}>
         <Button
-          bg={useColorModeValue("brand.primary", "brand.complement")}
+          bg={useColorModeValue("brand.primary", "brand.primary")}
           disabled={isDisabled}
           onClick={() => {
             prepareHandleCreateStream()

diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
@@ -2,7 +2,7 @@ export const CONFIG_WEBSITE = {
   title: "Tokei Platform",
   description: "Starknet ERC20 token streaming protocol 💰⏳, inspired by Sablier.",
   page: {
-    portal:"/",
+    portal:"https://starknet-io.github.io/tokei/",
     explorer:"https://starkscan.co"
   }
 
@@ -32,6 +32,9 @@ export const CONFIG_SOCIAL = {
   youtube: {
     link: "https://www.youtube.com/@Starknet",
   },
+  github: {
+    link: "https://github.com/starknet-io/tokei",
+  },
 };
 
 

diff --git a/frontend/layout/Footer.tsx b/frontend/layout/Footer.tsx
@@ -20,15 +20,20 @@ import {
 } from "@chakra-ui/react";
 
 import { ReactNode } from "react";
-import {  FaYoutube } from "react-icons/fa";
+import { FaYoutube } from "react-icons/fa";
 import React from "react";
-import {  MdWeb } from "react-icons/md";
-import { BsFacebook, BsInstagram, BsTelegram, BsTwitter } from "react-icons/bs";
+import { MdWeb } from "react-icons/md";
+import {
+  BsFacebook,
+  BsGithub,
+  BsInstagram,
+  BsTelegram,
+  BsTwitter,
+} from "react-icons/bs";
 import { CONFIG_SOCIAL, CONFIG_WEBSITE } from "../constants";
 import { IoLogoInstagram, IoSwapHorizontal } from "react-icons/io5";
 import IconComponent from "../components/view/IconComponent";
 
-
 interface ILogoProps {
   imgSrc?: string;
   props: any;
@@ -118,21 +123,18 @@ export default function FooterLarge() {
                   alt={CONFIG_WEBSITE.title}
                   size="150px"
                 />
-
               </Box>
             </Stack>
 
             <Text textAlign={{ base: "left", md: "center" }}>
               {" "}
               {CONFIG_WEBSITE.title} - © {new Date().getFullYear()}.
             </Text>
-            <Text>
-              All rights reserved
-            </Text>
+            <Text>All rights reserved</Text>
           </Stack>
           <Box justifyContent={"center"} paddingTop={"1em"}>
             <Text textAlign={{ base: "left", md: "center" }}>
-            Socials: {CONFIG_WEBSITE.title} 
+              Socials: {CONFIG_WEBSITE.title}
             </Text>
             <Stack
               direction={"row"}
@@ -150,6 +152,14 @@ export default function FooterLarge() {
                 <MdWeb></MdWeb>
               </SocialButton>
 
+              <SocialButton
+                href={CONFIG_SOCIAL.github.link}
+                title={`${CONFIG_WEBSITE.title}  Github`}
+                label="Github Tokei Platform"
+                isExternal={true}
+              >
+                <BsGithub></BsGithub>
+              </SocialButton>
 
               <SocialButton
                 isExternal={true}
@@ -159,10 +169,9 @@ export default function FooterLarge() {
               >
                 <BsTwitter></BsTwitter>
               </SocialButton>
-              <SocialButton
+              {/* <SocialButton
                 isExternal={true}
                 title={`${CONFIG_WEBSITE.title?.toString()} Youtube Channel`}
-
                 label="Youtube"
                 href={CONFIG_SOCIAL.youtube.link}
               >
@@ -171,7 +180,6 @@ export default function FooterLarge() {
               <SocialButton
                 isExternal={true}
                 title={`${CONFIG_WEBSITE.title?.toString()} Telegram Channel`}
-
                 label="Telegram"
                 href={CONFIG_SOCIAL.telegram.community}
               >
@@ -194,7 +202,7 @@ export default function FooterLarge() {
                 href={CONFIG_SOCIAL.instagram.link}
               >
                 <IoLogoInstagram></IoLogoInstagram>
-              </SocialButton>
+              </SocialButton> */}
             </Stack>
           </Box>
         </Box>

diff --git a/frontend/layout/HeaderSidebar.tsx b/frontend/layout/HeaderSidebar.tsx
@@ -320,7 +320,7 @@ const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
               _focus={{ boxShadow: "none" }}
             >
               <HStack>
-                <Text>Profile</Text>
+                <Text>See more</Text>
                 <Box display={{ base: "none", md: "flex" }}>
                   <FiChevronDown />
                 </Box>

diff --git a/frontend/layout/sections/StreamCard.tsx b/frontend/layout/sections/StreamCard.tsx
@@ -0,0 +1,20 @@
+import {
+  Box,
+  Text,
+} from "@chakra-ui/react";
+import { LockupLinearStreamInterface } from "../../types";
+
+interface IStreamCard {
+  lockupLinear?:LockupLinearStreamInterface
+}
+/** @TODO get component view ui with call claim reward for recipient visibile */
+export const StreamCard = ({lockupLinear}:IStreamCard) => {
+  return (
+    <>
+      <Box>
+
+
+      </Box>
+    </>
+  );
+};
diff --git a/frontend/layout/sections/StreamViewContainer.tsx b/frontend/layout/sections/StreamViewContainer.tsx
@@ -0,0 +1,71 @@
+import {
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+  Box,
+  Text,
+} from "@chakra-ui/react";
+
+/** @TODO getters Cairo contracts, Indexer */
+export const StreamViewContainer = () => {
+  return (
+    <>
+      <Tabs>
+        <TabList>
+          <Tab>All streams</Tab>
+          <Tab>As recipient</Tab>
+          <Tab>As sender</Tab>
+          <Tab>Search</Tab>
+        </TabList>
+
+        <TabPanels>
+          <TabPanel>
+            <AllStreamComponent></AllStreamComponent>
+          </TabPanel>
+          <TabPanel>
+          <RecipientStreamComponent></RecipientStreamComponent>
+
+          </TabPanel>
+          <TabPanel>
+            <p>three!</p>
+          </TabPanel>
+          <TabPanel>
+            <SearchStreamComponent></SearchStreamComponent>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </>
+  );
+};
+
+/** @TODO Cairo spec to be defined. */
+const AllStreamComponent = () => {
+  return (
+    <Box>
+      <Text>Find all streams</Text>
+      <Text>Coming soon</Text>
+    </Box>
+  );
+};
+
+
+/** @TODO Cairo spec recipient component */
+const RecipientStreamComponent = () => {
+  return (
+    <Box>
+      <Text>Find here your stream</Text>
+      <Text>Coming soon</Text>
+    </Box>
+  );
+};
+
+/** @TODO add search stream components. Spec to be defined. */
+const SearchStreamComponent = () => {
+  return (
+    <Box>
+      <Text>Coming soon</Text>
+    </Box>
+  );
+};
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -11,6 +11,7 @@ import { CONFIG_WEBSITE } from "../constants";
 import ConnectModal from "../components/modal/login";
 import { ButtonLink } from "../components/button";
 import AccountView from "../components/starknet/AccountView";
+import { StreamViewContainer} from "../layout/sections/StreamViewContainer";
 
 const Home: NextPage = ({}) => {
   const color = useColorModeValue("gray.900", "gray.300");
@@ -82,6 +83,8 @@ const Home: NextPage = ({}) => {
                 </Box>
               </Box>
             </Box>
+
+            <StreamViewContainer></StreamViewContainer>
           </Box>
         </Box>
       </Box>

diff --git a/frontend/theme/index.ts b/frontend/theme/index.ts
@@ -8,9 +8,11 @@ import { mode } from "@chakra-ui/theme-tools";
 // 2. Extend the theme to include custom colors, fonts, etc
 const colors = {
   brand: {
-    primary: "#4FA89B",
+    primary: "#DDBD22",
     secondary: "#4f89a8",
-    complement: "#a84f5c",
+    complement: "#2242DD",
+    // callToAction:"#22DDBD"
+    callToAction:"#22DDBD"
   },
 
   blue: {

diff --git a/frontend/types/index.ts b/frontend/types/index.ts
@@ -1,6 +1,18 @@
 import React from "react";
 import { IconType } from "react-icons";
 
+/** UI interface */
+export interface LinkItemProps {
+  name: string;
+  title?: string;
+  icon: IconType;
+  href: string;
+  target?: string;
+  isExternal?: boolean;
+  isSubmenu?: boolean;
+  linksSubmenu?: LinkItemProps[];
+}
+
 export interface CreateRangeProps {
   sender: string;
   recipient: string;
@@ -11,6 +23,30 @@ export interface CreateRangeProps {
   broker: Broker;
 }
 
+/** Contract interface */
+
+export interface LockupLinearStreamInterface {
+  stream_id?:string;
+  sender: string;
+  recipient: string;
+  total_amount: number;
+  asset: string;
+  cancelable: boolean;
+  is_depleted:boolean;
+  was_canceled:boolean;
+  start_time?:number;
+  end_time?:number;
+  range: Range;
+  broker: Broker;
+  amounts?:LockupAmounts
+}
+
+export interface LockupAmounts {
+  deposited:number;
+  withdrawn:number;
+  refunded:number;
+}
+
 export interface Range {
   start: number; //u64
   cliff: number; //u64
@@ -23,13 +59,3 @@ export interface Broker {
 
 }
 
-export interface LinkItemProps {
-  name: string;
-  title?: string;
-  icon: IconType;
-  href: string;
-  target?: string;
-  isExternal?: boolean;
-  isSubmenu?: boolean;
-  linksSubmenu?: LinkItemProps[];
-}