feat(rakki): Add RAKKi to sidebar

TERITORI · Dec 31, 2024 · 79eb248 · 79eb248
1 parent 80f9ca4
commit 79eb248
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 21 deletions.
diff --git a/assets/sidebar/side-notch.svg b/assets/sidebar/side-notch.svg
diff --git a/packages/components/navigation/components/SideNotch.tsx b/packages/components/navigation/components/SideNotch.tsx
@@ -1,26 +1,33 @@
 import React from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
+import { View, ViewStyle } from "react-native";
 
 import SideNotchSVG from "../../../../assets/sidebar/side-notch.svg";
 import { SVG } from "../../SVG";
 
-export const SideNotch: React.FC<{ style?: ViewStyle }> = ({ style }) => {
+import { primaryColor, rakkiYellow } from "@/utils/style/colors";
+
+export const SideNotch: React.FC<{
+  sidebarItemId?: string;
+  style?: ViewStyle;
+}> = ({ sidebarItemId, style }) => {
   return (
-    <View style={[styles.container, style]}>
-      <SVG source={SideNotchSVG} />
+    <View
+      style={[
+        {
+          position: "absolute",
+          flex: 1,
+          flexDirection: "row",
+          left: 0,
+          top: 0,
+          bottom: 0,
+        },
+        style,
+      ]}
+    >
+      <SVG
+        source={SideNotchSVG}
+        color={sidebarItemId === "rakki" ? rakkiYellow : primaryColor}
+      />
     </View>
   );
 };
-
-// FIXME: remove StyleSheet.create
-// eslint-disable-next-line no-restricted-syntax
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    flex: 1,
-    flexDirection: "row",
-    left: 0,
-    top: 0,
-    bottom: 0,
-  },
-});
diff --git a/packages/components/navigation/components/SidebarButton.tsx b/packages/components/navigation/components/SidebarButton.tsx
@@ -16,6 +16,7 @@ import {
   neutral33,
   neutral77,
   primaryColor,
+  rakkiYellow,
   secondaryColor,
 } from "../../../utils/style/colors";
 import { fontRegular12 } from "../../../utils/style/fonts";
@@ -33,6 +34,7 @@ import { useAppRoute } from "@/hooks/navigation/useAppRoute";
 export interface SidebarButtonProps extends SidebarType {
   onPress?: (routeName: SidebarType["route"]) => void;
   iconSize?: number;
+  id: string;
 }
 
 export const SidebarButton: React.FC<SidebarButtonProps> = ({
@@ -42,6 +44,7 @@ export const SidebarButton: React.FC<SidebarButtonProps> = ({
   route,
   iconSize = 28,
   nested,
+  id,
 }) => {
   const { isSidebarExpanded } = useSidebar();
   const { name: currentRouteName } = useAppRoute();
@@ -104,11 +107,18 @@ export const SidebarButton: React.FC<SidebarButtonProps> = ({
       {({ hovered }) => (
         <View>
           <View style={titleContainerCStyle}>
-            {isSelected && <SideNotch style={{ left: -layout.spacing_x2 }} />}
+            {isSelected && (
+              <SideNotch
+                style={{ left: -layout.spacing_x2 }}
+                sidebarItemId={id}
+              />
+            )}
             <View
               style={[
                 svgContainerCStyle,
-                isSelected && { borderColor: primaryColor },
+                isSelected && {
+                  borderColor: id === "rakki" ? rakkiYellow : primaryColor,
+                },
                 isComingSoon && { opacity: 0.5 },
               ]}
             >

diff --git a/packages/dapp-root/Root.tsx b/packages/dapp-root/Root.tsx
@@ -246,6 +246,7 @@ const DappStoreApps: React.FC = () => {
         "teritori-staking",
         "teritori-explorer",
         "mintscan",
+        "rakki",
       ];
       delete dAppStoreValues.bookmarks;
       delete dAppStoreValues["coming-soon"];

diff --git a/packages/screens/DAppStore/query/getFromFile.ts b/packages/screens/DAppStore/query/getFromFile.ts
@@ -18,6 +18,7 @@ import osmosisSVG from "@/assets/icons/networks/osmosis.svg";
 import teritoriSVG from "@/assets/icons/networks/teritori.svg";
 import pathwar from "@/assets/icons/pathwar.svg";
 import projectsProgramSVG from "@/assets/icons/projects-program.svg";
+import rakki from "@/assets/icons/rakki-ticket.svg";
 import otherAppsIcon from "@/assets/icons/random-goods-icon.svg";
 import riot from "@/assets/icons/rioters-game.svg";
 import staking from "@/assets/icons/staking.svg";
@@ -239,6 +240,16 @@ export function getAvailableApps(): dAppGroup {
           selectedByDefault: true,
           alwaysOn: false,
         },
+        rakki: {
+          id: "rakki",
+          icon: rakki,
+          title: "RAKKi",
+          description: "Automated lottery",
+          route: "Rakki",
+          groupKey: "top-apps",
+          selectedByDefault: true,
+          alwaysOn: false,
+        },
       },
     },
     explorers: {