Synce

packages/renderer/src/components/molecules/Synce/Synce.stories.tsx

@@ -0,0 +1,35 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+import { Stack } from "@mantine/core";
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Synce } from ".";
+
+export default {
+  title: "molecules/Synce",
+  component: Synce,
+} as ComponentMeta<typeof Synce>;
+
+const Template: ComponentStory<typeof Synce> = () => {
+  return (
+    <Stack>
+      <Synce />
+    </Stack>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};

packages/renderer/src/components/molecules/Synce/Synce.test.tsx

@@ -0,0 +1,31 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { AppProviders } from "@atoms/AppProviders";
+import { Synce } from ".";
+
+describe("molecules::Synce", () => {
+  it("renders without exploding", () => {
+    const { asFragment } = render(
+      <AppProviders>
+        <Synce />
+      </AppProviders>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

packages/renderer/src/components/molecules/Synce/Synce.tsx

@@ -0,0 +1,74 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+import { useState } from "react";
+import { createStyles, Stack, Text } from "@mantine/core";
+
+export function Synce() {
+  const [isOpen, setOpen] = useState(false);
+  const { classes } = useStyles({ isOpen });
+  const [isSynce, setSynec] = useState("false");
+  return (
+    <Stack>
+      <span className={isSynce ? classes.syncedot : classes.notSyncedot}></span>
+      <Text className={isSynce ? classes.synced : classes.notSynced}>
+        {isSynce ? "Fully Synced" : "Not Synced"}
+      </Text>
+    </Stack>
+  );
+}
+
+const useStyles = createStyles<string, { isOpen: boolean }>(
+  (theme, params) => ({
+    synced: {
+      bottom: 5,
+      display: "block",
+      fontSize: "0.725rem",
+      fontWeight: 600,
+      marginBottom: 5,
+      marginLeft: 40,
+      position: "absolute",
+    },
+    notSynced: {
+      bottom: 5,
+      color: theme.colors.gray[9],
+      display: "block",
+      fontSize: "0.725rem",
+      fontWeight: 600,
+      marginBottom: 5,
+      marginLeft: 40,
+      position: "absolute",
+    },
+    syncedot: {
+      backgroundColor: theme.colors.green[4],
+      borderRadius: 50,
+      bottom: 16,
+      height: 8,
+      marginLeft: 20,
+      position: "absolute",
+      width: 8,
+    },
+    notSyncedot: {
+      backgroundColor: theme.colors.red[4],
+      borderRadius: 50,
+      bottom: 16,
+      height: 8,
+      marginLeft: 20,
+      position: "absolute",
+      width: 8,
+    },
+  })
+);

packages/renderer/src/components/molecules/Synce/__snapshots__/Synce.test.tsx.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1
+
+exports[`molecules::Synce > renders without exploding 1`] = `
+<DocumentFragment>
+  <div
+    class="mantine-Stack-root mantine-lfk3cq"
+  >
+    <span
+      class="mantine-dpd0wv"
+    />
+    <div
+      class="mantine-Text-root mantine-1xeon27"
+    >
+      Fully Synced
+    </div>
+  </div>
+</DocumentFragment>
+`;

packages/renderer/src/components/molecules/Synce/index.ts

@@ -0,0 +1,17 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+export * from "./Synce";

packages/renderer/src/components/organisms/Sidebar/Sidebar.tsx

@@ -19,7 +19,7 @@ import { WalletBalance } from "@molecules/WalletBalance";
 import { ReactComponent as Logo } from "@assets/logo-icon.svg";
 import { NavLink } from "./_NavLink";
 import { NAV_LINKS, WIDTH } from "./_constants";
-
+import { Synce } from "@molecules/Synce";
 export function Sidebar() {
   const { classes } = useStyles();
   return (
@@ -38,6 +38,11 @@ export function Sidebar() {
             <WalletBalance />
           </Box>
         </Navbar.Section>
+        <Navbar.Section>
+          <Box>
+            <Synce/>
+          </Box>
+        </Navbar.Section>
       </Navbar>
     </Stack>
   );
@@ -50,5 +55,6 @@ const useStyles = createStyles((theme) => ({
   },
   container: {
     width: WIDTH,
+    position: "relative",
   },
 }));

packages/renderer/src/components/organisms/Sidebar/__snapshots__/Sidebar.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`molecules::Sidebar > renders without exploding 1`] = `
 <DocumentFragment>
   <div
-    class="mantine-Stack-root mantine-dczm8e"
+    class="mantine-Stack-root mantine-10645ii"
   >
     <nav
       class="mantine-Navbar-root mantine-pjloqa"
@@ -342,6 +342,26 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
           </button>
         </div>
       </div>
+      <div
+        class="mantine-khtkeg"
+      >
+        <div
+          class="mantine-1avyp1d"
+        >
+          <div
+            class="mantine-Stack-root mantine-lfk3cq"
+          >
+            <span
+              class="mantine-dpd0wv"
+            />
+            <div
+              class="mantine-Text-root mantine-1xeon27"
+            >
+              Fully Synced
+            </div>
+          </div>
+        </div>
+      </div>
     </nav>
   </div>
 </DocumentFragment>

packages/renderer/src/components/templates/NavbarLayout/index.tsx

@@ -17,7 +17,7 @@
 import type { FC } from "react";
 import { Box, createStyles, Group } from "@mantine/core";
 import { Sidebar } from "@organisms/Sidebar";
-
+import { Synce } from "@molecules/Synce";
 export const NavbarLayout: FC = (props) => {
   const { children } = props;
   const { classes } = useStyles();