Added secondaryColor

Author: xdamman

.env.example

@@ -12,7 +12,8 @@ NEXT_PUBLIC_BASE_PATH='/dashboard'
 NEXT_PUBLIC_BASE_ASSET_PATH='/dashboard/'
 NEXT_PUBLIC_SESSION_BALANCE_TRANSFER_ADDRESS='<session_balance_transfer_address>'
 NEXT_PUBLIC_IPFS_CDN_URL='https://ipfs.internal.citizenwallet.xyz'
-NEXT_PUBLIC_COMMUNITY_THEME_PRIMARY_COLOR='#9563D3'
+NEXT_PUBLIC_COMMUNITY_THEME_PRIMARY_COLOR='#1CB260'
+NEXT_PUBLIC_COMMUNITY_THEME_SECONDARY_COLOR='#01392C'
 
 # SERVER
 APP_BASE_URL='https://app.citizenwallet.xyz/#/'

src/containers/Config/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-
+import { getTextColor } from "@/lib/colors";
 import { isAddress } from "ethers";
 import { useDebouncedCallback } from "use-debounce";
 import {
@@ -71,6 +71,7 @@ export default function Container({ sponsor }: ContainerProps) {
   const logic = useConfigActions();
   const step = useConfigStore((state) => state.step);
   const primaryColor = useConfigStore((state) => state.primaryColor);
+  const secondaryColor = useConfigStore((state) => state.secondaryColor);
   const invalidUrl = useConfigStore((state) => state.invalidUrl);
   const network = useConfigStore((state) => state.network);
   const scan = useConfigStore((state) => state.scan);
@@ -141,9 +142,14 @@ export default function Container({ sponsor }: ContainerProps) {
     }
   };
 
-  const handleColorChange: ColorChangeHandler = (color: ColorResult) => {
+  const handlePrimaryColorChange: ColorChangeHandler = (color: ColorResult) => {
     logic.updatePrimaryColor(color.hex);
   };
+  const handleSecondaryColorChange: ColorChangeHandler = (
+    color: ColorResult
+  ) => {
+    logic.updateSecondaryColor(color.hex);
+  };
 
   const handleLogoSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (file) {
@@ -176,14 +182,17 @@ export default function Container({ sponsor }: ContainerProps) {
       validAddress,
       metadata,
       file,
-      primaryColor
+      primaryColor,
+      secondaryColor
     );
   };
 
   const handleValidityChange = (value: boolean) => {
     setValid(value);
   };
 
+  const textColor = getTextColor(secondaryColor);
+
   const handleDeploy = async (
     owner: string,
     factoryService: CommunityFactoryContractService,
@@ -275,7 +284,13 @@ export default function Container({ sponsor }: ContainerProps) {
             <AccordionContent>
               <Flex direction="column" justify="start" align="stretch" gap="2">
                 <Flex justify="center">
-                  <Card style={{ maxWidth: 300 }}>
+                  <Card
+                    style={{
+                      maxWidth: 300,
+                      color: textColor,
+                      backgroundColor: secondaryColor,
+                    }}
+                  >
                     <Flex gap="3" align="center" className="overflow-hidden">
                       <Avatar
                         size="3"
@@ -294,7 +309,7 @@ export default function Container({ sponsor }: ContainerProps) {
                         >
                           {name.trim() ? name : "Community Name"}
                         </Text>
-                        <Text as="div" size="2" color="gray">
+                        <Text as="div" size="2" style={{ color: textColor }}>
                           {description.trim()
                             ? description
                             : "Token Description"}
@@ -404,7 +419,28 @@ export default function Container({ sponsor }: ContainerProps) {
                       <SketchPicker
                         disableAlpha
                         color={primaryColor}
-                        onChange={handleColorChange}
+                        onChange={handlePrimaryColorChange}
+                      />
+                    </Popover.Content>
+                  </Popover.Root>
+                </Flex>
+                <Label>Secondary Color</Label>
+                <Flex justify="center" align="center">
+                  <Popover.Root>
+                    <Popover.Trigger>
+                      <Button
+                        variant="solid"
+                        style={{ backgroundColor: secondaryColor }}
+                      >
+                        <OpacityIcon height={14} width={14} />
+                        {secondaryColor}
+                      </Button>
+                    </Popover.Trigger>
+                    <Popover.Content side="bottom" size="1">
+                      <SketchPicker
+                        disableAlpha
+                        color={secondaryColor}
+                        onChange={handleSecondaryColorChange}
                       />
                     </Popover.Content>
                   </Popover.Root>

src/lib/colors.ts

@@ -0,0 +1,32 @@
+function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  hex = hex.replace(/^#/, "");
+  const bigint = parseInt(hex, 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return { r, g, b };
+}
+
+function getLuminance({
+  r,
+  g,
+  b,
+}: {
+  r: number;
+  g: number;
+  b: number;
+}): number {
+  const [R, G, B] = [r, g, b].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+
+// Returns the text color that should be used based on the luminosity of the background color
+export function getTextColor(hex: string): "black" | "white" {
+  const rgb = hexToRgb(hex);
+  const luminance = getLuminance(rgb);
+  // Use a threshold of 0.5 for luminance
+  return luminance > 0.5 ? "black" : "white";
+}

src/state/config/actions.ts

@@ -40,6 +40,9 @@ class ConfigActions {
   updatePrimaryColor(color: string) {
     this.store.setState({ primaryColor: color });
   }
+  updateSecondaryColor(color: string) {
+    this.store.setState({ secondaryColor: color });
+  }
 
   async imageUpload(logo: string): Promise<boolean> {
     try {
@@ -93,7 +96,8 @@ class ConfigActions {
       decimals: bigint;
     },
     file: string,
-    primaryColor?: string
+    primaryColor?: string,
+    secondaryColor?: string
   ) {
     const isValid = isValidUrl(url);
     if (!isValid) {
@@ -110,6 +114,11 @@ class ConfigActions {
       process.env.NEXT_PUBLIC_COMMUNITY_THEME_PRIMARY_COLOR ||
       "#000000";
 
+    const secondary =
+      secondaryColor ||
+      process.env.NEXT_PUBLIC_COMMUNITY_THEME_SECONDARY_COLOR ||
+      "#000000";
+
     const community: ConfigCommunity = {
       name,
       description,
@@ -119,6 +128,7 @@ class ConfigActions {
       logo: file,
       theme: {
         primary,
+        secondary,
       },
     };
 

src/state/config/state.ts

@@ -29,7 +29,9 @@ export enum DeployStep {
 export type ConfigStore = {
   step: ConfigStep;
   primaryColor: string;
+  secondaryColor: string;
   setPrimaryColor: (color: string) => void;
+  setSecondaryColor: (color: string) => void;
   config?: Config;
   network?: Network;
   scan?: ConfigScan;
@@ -67,6 +69,8 @@ const getInitialState = () => ({
   step: ConfigStep.Chain,
   primaryColor:
     process.env.NEXT_PUBLIC_COMMUNITY_THEME_PRIMARY_COLOR || "#000000",
+  secondaryColor:
+    process.env.NEXT_PUBLIC_COMMUNITY_THEME_SECONDARY_COLOR || "#000000",
   config: undefined,
   loading: true,
   error: false,