feat: enhance TrainLogoSymbol and Menu components for improved theming and functionality

- Updated TrainLogoSymbol to use currentColor for better theme adaptability.
- Introduced SelectorItem component in Menu for theme selection, allowing users to switch between light, dark, and system themes.
- Adjusted MenuList to utilize SelectorItem for theme management, enhancing user experience.
- Modified LoadingConnect styles to align with new theme settings.
- Updated global styles for loader color consistency.

Author: arentant

apps/app/components/Icons/TrainLogoSymbol.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 
 const TrainLogoSymbol = (props) => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="60" viewBox="0 0 50 60" fill="none" {...props}>
-        <path fillRule="evenodd" clipRule="evenodd" d="M9.17871 14.3067C9.17871 11.6925 10.8726 9.37808 13.369 8.58142L22.5472 5.65211C24.072 5.16544 25.711 5.16544 27.2357 5.65211L36.414 8.58142C38.9104 9.37808 40.6043 11.6925 40.6043 14.3067C40.6043 14.3067 40.6043 31.6634 40.6043 33.1123C40.6043 34.5611 40.6043 35.9168 38.7296 37.7865C36.855 39.6562 34.811 42.515 31.7269 42.515H18.0561C14.972 42.515 12.928 39.6562 11.0534 37.7865C9.17871 35.9168 9.17871 34.6167 9.17871 33.1123C9.17871 31.6078 9.17871 14.3067 9.17871 14.3067ZM12.6984 17.8171C12.6984 16.7092 13.5988 15.8111 14.7096 15.8111H35.0734C36.1841 15.8111 37.0846 16.7092 37.0846 17.8171V23.6333C37.0846 24.4394 36.6008 25.1672 35.8564 25.4809L27.8279 28.8655C25.9507 29.6569 23.8323 29.6569 21.9551 28.8655L13.9266 25.4809C13.1822 25.1672 12.6984 24.4394 12.6984 23.6333V17.8171Z" fill="#E6E6E6" />
-        <path fillRule="evenodd" clipRule="evenodd" d="M7 52.1591L15.508 43.6465H19.2412L17.6068 45.2817H31.9327L30.2988 43.647H34.032L42.9167 52.5365L41.0502 54.4041L38.4691 51.8216H11.0704L8.86658 54.0267L7 52.1591ZM13.8359 49.0547H35.7036L33.4411 46.791H16.0984L13.8359 49.0547Z" fill="#E6E6E6" />
+    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="60" viewBox="0 0 50 60" fill="currentColor" {...props}>
+        <path fillRule="evenodd" clipRule="evenodd" d="M9.17871 14.3067C9.17871 11.6925 10.8726 9.37808 13.369 8.58142L22.5472 5.65211C24.072 5.16544 25.711 5.16544 27.2357 5.65211L36.414 8.58142C38.9104 9.37808 40.6043 11.6925 40.6043 14.3067C40.6043 14.3067 40.6043 31.6634 40.6043 33.1123C40.6043 34.5611 40.6043 35.9168 38.7296 37.7865C36.855 39.6562 34.811 42.515 31.7269 42.515H18.0561C14.972 42.515 12.928 39.6562 11.0534 37.7865C9.17871 35.9168 9.17871 34.6167 9.17871 33.1123C9.17871 31.6078 9.17871 14.3067 9.17871 14.3067ZM12.6984 17.8171C12.6984 16.7092 13.5988 15.8111 14.7096 15.8111H35.0734C36.1841 15.8111 37.0846 16.7092 37.0846 17.8171V23.6333C37.0846 24.4394 36.6008 25.1672 35.8564 25.4809L27.8279 28.8655C25.9507 29.6569 23.8323 29.6569 21.9551 28.8655L13.9266 25.4809C13.1822 25.1672 12.6984 24.4394 12.6984 23.6333V17.8171Z" fill="currentColor" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M7 52.1591L15.508 43.6465H19.2412L17.6068 45.2817H31.9327L30.2988 43.647H34.032L42.9167 52.5365L41.0502 54.4041L38.4691 51.8216H11.0704L8.86658 54.0267L7 52.1591ZM13.8359 49.0547H35.7036L33.4411 46.791H16.0984L13.8359 49.0547Z" fill="currentColor" />
     </svg>
 )
 

apps/app/components/Swap/AtomicChat/Actions/UserActions.tsx

@@ -42,7 +42,7 @@ export const UserLockAction: FC<UserCommitActionProps> = ({ quote, type }) => {
 
             if (!sourceClient) throw new Error("No source client")
 
-                const result = await sourceClient.userLock({
+            const result = await sourceClient.userLock({
                 ...resolveQuote(quote),
                 sourceAddress: sourceWallet.address,
                 destinationAddress: address,
@@ -77,6 +77,7 @@ export const UserLockAction: FC<UserCommitActionProps> = ({ quote, type }) => {
             }
         }
         catch (e) {
+            debugger
             console.error('[UserLock] failed', e?.message ?? String(e), ...(e?.logs ? [e.logs] : []))
             setError({ message: e?.details || e?.message || e?.code || e?.name || 'Unknown error' })
         }

apps/app/components/TrainMenu/Menu.tsx

@@ -3,6 +3,7 @@ import LinkWrapper from "../LinkWraapper"
 import { ReactNode } from "react"
 import { motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/shadcn/select"
 
 const Menu = ({ children }: { children: ReactNode }) => {
     return <div className="flex flex-col gap-3">
@@ -179,9 +180,54 @@ const ToggleItem = ({ children, icon, checked, onChange }: ToggleItemProps) => {
     )
 }
 
+type SelectOption = {
+    value: string;
+    label: string;
+    icon?: React.ComponentType<{ className?: string }>;
+};
+
+type SelectorItemProps = {
+    label: string;
+    icon?: JSX.Element;
+    value: string;
+    onValueChange: (value: string) => void;
+    options: SelectOption[];
+};
+
+const SelectorItem = ({ label, icon, value, onValueChange, options }: SelectorItemProps) => {
+    const current = options.find(o => o.value === value) ?? options[0]
+    const CurrentIcon = current.icon
+
+    return (
+        <div className="gap-4 flex relative select-none items-center px-4 py-1.5 w-full text-primary-text">
+            {icon && <div>{icon}</div>}
+            <p className="text-primary-text">{label}</p>
+            <div className="ml-auto">
+                <Select value={value} onValueChange={onValueChange}>
+                    <SelectTrigger>
+                        <SelectValue>
+                            {CurrentIcon && <CurrentIcon className="h-4 w-4" />}
+                            {current.label}
+                        </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                        {options.map(({ value: val, icon: Icon, label: optLabel }) => (
+                            <SelectItem key={val} value={val}>
+                                {Icon && <Icon className="h-4 w-4" />}
+                                {optLabel}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    )
+}
+
 Menu.Group = Group
 Menu.Item = Item
 Menu.Footer = Footer
 Menu.ToggleItem = ToggleItem
+Menu.SelectorItem = SelectorItem
 
 export default Menu

apps/app/components/TrainMenu/MenuList.tsx

@@ -1,4 +1,4 @@
-import { BookOpen, Home, LibraryIcon, Shield, MessageSquarePlus, CircleHelp, Info, Settings2, Zap, RotateCcw, ScrollText, Sun } from "lucide-react";
+import { BookOpen, Home, LibraryIcon, Shield, MessageSquarePlus, CircleHelp, Info, Settings2, Zap, RotateCcw, ScrollText, Sun, Moon, Monitor } from "lucide-react";
 import { useSwapPreferencesStore } from "@/stores/swapPreferencesStore";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
@@ -73,13 +73,17 @@ const MenuList: FC<{ goToStep: (step: MenuStep, path?: string) => void }> = ({ g
                         Auto Reveal Secret
                     </Menu.ToggleItem>
 
-                    <Menu.ToggleItem
+                    <Menu.SelectorItem
+                        label="Theme"
                         icon={<Sun className="h-5 w-5" />}
-                        checked={theme === "light"}
-                        onChange={(checked) => setTheme(checked ? "light" : "default")}
-                    >
-                        Light Mode
-                    </Menu.ToggleItem>
+                        value={theme ?? "system"}
+                        onValueChange={setTheme}
+                        options={[
+                            { value: "system", icon: Monitor, label: "System" },
+                            { value: "light", icon: Sun, label: "Light" },
+                            { value: "default", icon: Moon, label: "Dark" },
+                        ]}
+                    />
 
                 </>
             </Menu.Group>

apps/app/components/WalletModal/LoadingConnect.tsx

@@ -25,16 +25,16 @@ export const LoadingConnect: FC<{ onRetry: () => void, selectedConnector: Wallet
                     <div className="flex flex-col gap-3 items-center justify-end row-start-2 row-span-1">
                         <div className="flex-col flex items-center">
                             <div className="grid grid-cols-3 items-center gap-2">
-                                <div className="p-3 bg-secondary-700 rounded-lg z-10">
-                                    <TrainLogoSymbol className="w-11 h-11" />
+                                <div className="p-3 bg-secondary-500 rounded-lg z-10">
+                                    <TrainLogoSymbol className="w-11 h-11 text-primary-logoColor" />
                                 </div>
                                 {
                                     connectionError ?
                                         <Link2Off className="w-auto h-auto place-self-center" />
                                         :
                                         <div className="loader text-[3px]! place-self-center" />
                                 }
-                                <div className="p-3 bg-secondary-700 rounded-lg z-10">
+                                <div className="p-3 bg-secondary-500 rounded-lg z-10">
                                     <ConnectorIcon className="w-11 h-auto" />
                                 </div>
                             </div>

apps/app/pages/_app.js

@@ -73,11 +73,12 @@ function App({ Component, pageProps }) {
       >
         <ThemeProvider
           attribute="data-theme"
-          defaultTheme="default"
+          defaultTheme="system"
           themes={["default", "light"]}
           storageKey="theme"
           disableTransitionOnChange
-          enableSystem={false}
+          enableSystem={true}
+          value={{ light: "light", dark: "default" }}
         >
           <IntercomProvider appId={INTERCOM_APP_ID} initializeDelay={2500}>
             <Component key={router.asPath} {...pageProps} />

apps/app/styles/globals.css

@@ -446,7 +446,7 @@ textarea:disabled::placeholder {
   animation: bblFadInOut 1.8s infinite ease-in-out;
 }
 .loader {
-  color: #FFF;
+  color: rgb(var(--ls-colors-primary-text));
   font-size: 7px;
   position: relative;
   text-indent: -9999em;

packages/blockchains/starknet/src/client.ts

@@ -1,4 +1,4 @@
-import { cairo, Contract, hash, num, addAddressPadding, ProviderOrAccount, RpcProvider, type Call } from 'starknet'
+import { cairo, CallData, Contract, hash, num, addAddressPadding, ProviderOrAccount, RpcProvider, type Call, byteArray } from 'starknet'
 import {
     UserLockParams,
     LockParams,
@@ -44,31 +44,34 @@ export class StarknetHTLCClient extends HTLCClient {
         const approveCall: Call = erc20.populate("approve", [params.atomicContract, cairo.uint256(parsedAmount)])
 
         // Build user_lock call
-        const htlcContract = this.createContract(params.atomicContract, signer.account)
-        const userLockCall: Call = htlcContract.populate('user_lock', [
-            {
-                hashlock: cairo.uint256(BigInt(params.hashlock)),
-                amount: cairo.uint256(parsedAmount),
-                reward_amount: cairo.uint256(params.rewardAmount ? BigInt(params.rewardAmount) : 0n),
-                timelock_delta: params.timelockDelta ?? 150,
-                reward_timelock_delta: params.rewardTimelockDelta ?? 0,
-                quote_expiry: params.quoteExpiry,
-                sender: params.sourceAddress,
-                recipient: params.srcLpAddress,
-                token: tokenAddress,
-                reward_token: params.rewardToken ?? '',
-                reward_recipient: params.rewardRecipient ?? '',
-                src_chain: params.sourceChain || '',
-            },
-            {
-                dst_chain: params.destinationChain,
-                dst_address: params.destinationAddress,
-                dst_amount: cairo.uint256(BigInt(params.destinationAmount)),
-                dst_token: params.destinationAsset,
-            },
-            String(params.nonce),  // userData — nonce timestamp for recovery
-            params.solverData || '',
-        ])
+        const userLockCall: Call = {
+            contractAddress: params.atomicContract,
+            entrypoint: 'user_lock',
+            calldata: CallData.compile([
+                {
+                    hashlock: cairo.uint256(BigInt(params.hashlock)),
+                    amount: cairo.uint256(parsedAmount),
+                    reward_amount: cairo.uint256(params.rewardAmount ? BigInt(params.rewardAmount) : 0n),
+                    timelock_delta: params.timelockDelta ?? 150,
+                    reward_timelock_delta: params.rewardTimelockDelta ?? 0,
+                    quote_expiry: params.quoteExpiry,
+                    sender: params.sourceAddress,
+                    recipient: params.srcLpAddress,
+                    token: tokenAddress,
+                    reward_token: byteArray.byteArrayFromString(params.rewardToken ?? ''),
+                    reward_recipient: byteArray.byteArrayFromString(params.rewardRecipient ?? ''),
+                    src_chain: byteArray.byteArrayFromString(params.sourceChain || ''),
+                },
+                {
+                    dst_chain: byteArray.byteArrayFromString(params.destinationChain),
+                    dst_address: byteArray.byteArrayFromString(params.destinationAddress),
+                    dst_amount: cairo.uint256(BigInt(params.destinationAmount)),
+                    dst_token: byteArray.byteArrayFromString(params.destinationAsset),
+                },
+                byteArray.byteArrayFromString(String(params.nonce)),  // userData — nonce timestamp for recovery
+                byteArray.byteArrayFromString(params.solverData || ''),
+            ]),
+        }
 
         try {
             const { transaction_hash } = await signer.account.execute([approveCall, userLockCall])