packages/vechain-kit/src/languages/en.json (1)

166-166: Fix typo: "enchanced" → "enhanced"

The typo "enchanced security" should be "enhanced security" in the multiclause transaction message.

🔎 Suggested fix

-  "Good news! Multiclause transactions are now fully supported for smart accounts. You can now enjoy a better user experience, lower gas costs, and enchanced security.": "Good news! Multiclause transactions are now fully supported for smart accounts. You can now enjoy a better user experience, lower gas costs, and enchanced security.",
+  "Good news! Multiclause transactions are now fully supported for smart accounts. You can now enjoy a better user experience, lower gas costs, and enhanced security.": "Good news! Multiclause transactions are now fully supported for smart accounts. You can now enjoy a better user experience, lower gas costs, and enhanced security.",

packages/vechain-kit/src/components/AccountModal/Components/AccountSelector.tsx (3)

28-33: Remove unused props from the type definition.

The props setCurrentContent (lines 28-30) and onClose (line 33) are declared in the Props type but commented out in the component destructuring (lines 40, 43). This creates an inconsistent public API where consumers can pass these props, but they have no effect. Either restore their usage or remove them from the type definition entirely.

🔎 Suggested fix

 type Props = {
     wallet: Wallet;
-    setCurrentContent: React.Dispatch<
-        React.SetStateAction<AccountModalContentTypes>
-    >;
     size?: string;
     onClick?: () => void;
-    onClose: () => void;
     mt?: number;
     style?: StackProps;
 };

Also applies to: 40-40, 43-43

---

66-69: Remove commented-out code.

The handleLogout function is commented out. If this functionality is no longer needed, remove the commented code entirely to keep the codebase clean. If it's temporarily disabled, add a TODO comment explaining when it should be restored.

---

141-158: Remove commented-out logout button.

The entire logout button implementation is commented out. Remove this dead code to improve maintainability, or add a TODO comment if restoration is planned.

packages/vechain-kit/src/languages/es.json (2)

152-152: Consider standardizing fee terminology for consistency.

The translations use both "comisión" and "tarifa" to refer to fees:

• Line 152: "Fee" → "Comisión"
• Line 154: "Fee token" → "Token de comisión"
• Line 163: "Gas fee" → "Tarifa de gas"
• Line 162: "Gas Token Preferences" → "Preferencias de tokens de gas"
• Line 289: Uses "tarifa" for fee

For better user experience and consistency, consider standardizing to one term throughout. "Tarifa" is more commonly used in blockchain/financial contexts in Spanish.

🔎 Suggested standardization

-  "Fee": "Comisión",
+  "Fee": "Tarifa",

-  "Fee token": "Token de comisión",
+  "Fee token": "Token de tarifa",

Also applies to: 154-154, 162-163, 289-289

---

333-333: Minor: Consider plural form for "tokens".

Since "Token Priority Order" refers to ordering multiple tokens, the plural form would be more grammatically accurate.

🔎 Suggested change

-  "Token Priority Order": "Orden de prioridad de token",
+  "Token Priority Order": "Orden de prioridad de tokens",

packages/vechain-kit/src/languages/zh.json (1)

418-418: Add newline at end of file.

JSON files should end with a newline character per standard formatting conventions.

🔎 Proposed fix

 }
+

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: vechain/vechain-kit PR: 0
File: .cursor/rules/migration-guide-to-v2.mdc:0-0
Timestamp: 2025-12-01T13:01:33.771Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript `as const` assertions for method names and `as `0x${string}`` assertions for Ethereum addresses to ensure type safety in contract interactions

Learnt from: CR
Repo: vechain/vechain-kit PR: 0
File: .cursor/rules/migration-guide-to-v2.mdc:0-0
Timestamp: 2025-12-01T13:01:33.771Z
Learning: Applies to **/*.{ts,tsx} : Use the `select` option in useCallClause or transform data in queryFn to handle data transformation, particularly for converting BigInt values to strings and normalizing contract return data

Learnt from: CR
Repo: vechain/vechain-kit PR: 0
File: .cursor/rules/migration-guide-to-v2.mdc:0-0
Timestamp: 2025-12-01T13:01:33.771Z
Learning: Applies to **/*.{ts,tsx} : In VeChain Kit Version 2, use `useThor` instead of `useConnex` for contract interactions

examples/homepage/src/app/components/features/InfoSection/InfoSection.tsx (2)

78-93: Add accessibility attributes to the video element.

The autoplaying video still lacks accessibility labeling. Please add an aria-label attribute to provide context for screen reader users.

🔎 Suggested fix

                    <Box
                        as="video"
                        src={finalImageSrc || imageSrc}
                        autoPlay
                        loop
                        muted
                        playsInline
                        w={['100%', imageWidth]}
                        borderRadius="md"
+                       aria-label={imageAlt}
                        sx={{
                            backgroundColor: 'transparent',
                            background: 'transparent',
                            display: 'block',
                        }}
                    />

---

103-106: Fix malformed gradient stops in mask properties.

The gradient stops are in incorrect order: 80%, 99%, 95%. Gradient stops should be monotonically increasing. The 99% stop comes after the 95% stop, which may not render as intended.

🔎 Proposed fix

                            WebkitMaskImage:
-                               'radial-gradient(ellipse at center, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 95%)',
+                               'radial-gradient(ellipse at center, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%)',
                            maskImage:
-                               'radial-gradient(ellipse at center, rgba(0,0,0,1) 80%,rgba(0,0,0,0) 99%, rgba(0,0,0,0) 95%)',
+                               'radial-gradient(ellipse at center, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%)',

examples/homepage/src/app/languages/fr.json (1)

13-13: Remove placeholder demo text.

This placeholder was flagged in previous reviews and should be removed before production deployment.

examples/homepage/src/app/languages/it.json (1)

13-13: Remove placeholder demo text.

This placeholder was flagged in previous reviews and should be removed before production deployment.

examples/homepage/src/app/languages/zh.json (1)

13-13: Remove placeholder demo text.

This placeholder was flagged in previous reviews and should be removed before production deployment.

examples/homepage/src/app/languages/de.json (1)

13-13: Remove placeholder demo text.

This placeholder was flagged in previous reviews and should be removed before production deployment.

examples/homepage/src/app/languages/en.json (1)

13-13: Remove placeholder demo text.

This placeholder was flagged in previous reviews and should be removed before production deployment.

examples/homepage/src/app/languages/ja.json (1)

13-13: Remove placeholder demo text.

This placeholder was flagged in previous reviews and should be removed before production deployment.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

examples/playground/src/app/components/features/LoginUIControl/LoginUIControl.tsx (3)

159-163: Typo in note text.

"configuring you the VeChainKitProvider" should be "configuring your VeChainKitProvider".

🔎 Proposed fix

                     {t(
-                        'Note: The modal variant is the default login button variant. You can pass an additional description and Image to the modal when configuring you the VeChainKitProvider.',
+                        'Note: The modal variant is the default login button variant. You can pass an additional description and Image to the modal when configuring your VeChainKitProvider.',
                     )}

---

186-200: Unhandled promise rejection on OAuth initiation.

initOAuth is async and can throw (as confirmed in the hook implementation). The promise is fired without error handling, which may cause unhandled rejection warnings.

🔎 Proposed fix

                         <Button
                             onClick={() =>
-                                initOAuth({ provider: 'google' })
+                                initOAuth({ provider: 'google' }).catch(console.error)
                             }

Or wrap in a handler that provides user feedback on failure.

---

218-232: Same unhandled rejection issue for GitHub OAuth.

Apply similar error handling as suggested for the Google OAuth button.

🔎 Proposed fix

                         <Button
                             onClick={() =>
-                                initOAuth({ provider: 'github' })
+                                initOAuth({ provider: 'github' }).catch(console.error)
                             }

examples/playground/src/app/components/features/ConnectionInfo/ConnectionInfo.tsx (1)

8-22: Add a guard for disconnected state.

The component accesses connection.source.type and connection.network without checking if the wallet is connected. This is the same issue flagged in previous reviews and can cause runtime errors or display undefined values when disconnected.

🔎 Suggested fix: early return when disconnected

 export function ConnectionInfo() {
     const { connection } = useWallet();

+    if (!connection.isConnected) {
+        return null;
+    }
+
     const getConnectionDescription = () => {
         switch (connection.source.type) {

examples/homepage/src/app/layout.tsx (2)

55-58: Accessibility issue: maximum-scale=1.0 prevents user zooming.

This restricts zoom functionality, violating WCAG 2.1 Level AA guidelines (Success Criteria 1.4.4 and 1.4.10). Users with visual impairments need zoom capability.

🔎 Proposed fix

                 <meta
                     name="viewport"
-                    content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+                    content="width=device-width, initial-scale=1.0"
                 />

---

125-146: Static analysis flag: dangerouslySetInnerHTML usage.

The static analysis tools flag this for potential XSS, but in this case the script content is hardcoded with no user input, making the risk minimal. The purpose (clearing localStorage color mode preferences) is valid, though as noted in past reviews, this is part of redundant light mode enforcement mechanisms that could be simplified.

examples/playground/src/app/providers/VechainKitProviderWrapper.tsx (1)

168-170: Add validation for required environment variables.

Environment variables are accessed with non-null assertions (!) without validation. If these are missing at runtime, it will cause cryptic errors.

This was flagged in a past review. Consider adding early validation or fallback handling for NEXT_PUBLIC_PRIVY_APP_ID, NEXT_PUBLIC_PRIVY_CLIENT_ID, and NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID.

examples/homepage/.env.example (1)

8-8: Consider alphabetical ordering of environment variables.

The static analysis tool flags that NEXT_PUBLIC_NETWORK_TYPE (line 8) should be ordered before NEXT_PUBLIC_PRIVY_APP_ID (line 2). While the current structure groups variables logically by purpose (Privy config, Wallet Connect, Network, Translations), consider aligning with project conventions or the linter's expectations for consistency.

examples/homepage/src/app/components/features/LanguagesSection/LanguagesSection.tsx (2)

14-14: Consider using a path alias for cleaner imports.

The deep relative import path ../../../../../i18n makes the code harder to maintain and refactor. Consider configuring a path alias (e.g., @/i18n or ~/i18n) in your TypeScript/Next.js configuration for cleaner imports.

---

22-31: Add missing 'it' entry to maintain consistency.

The languageToCountryCode mapping is missing an entry for 'it' (Italian), even though supportedLanguages includes it. While the fallback in getFlagUrl prevents breakage, explicitly including all supported languages improves code clarity and maintainability.

🔎 Suggested fix

 const languageToCountryCode: Record<string, string> = {
     en: 'us',
     de: 'de',
+    it: 'it',
     fr: 'fr',
     es: 'es',
     zh: 'cn',
     ja: 'jp',
 };

examples/playground/src/app/constants.ts (2)

1-2: Consider adding type assertions for Ethereum addresses.

Per coding guidelines, use as \0x${string}`` assertions for Ethereum addresses to ensure type safety in contract interactions.

🔎 Proposed fix

-export const b3trMainnetAddress = '0x5ef79995FE8a89e0812330E4378eB2660ceDe699';
-export const b3trTestnetAddress = '0xbf64cf86894Ee0877C4e7d03936e35Ee8D8b864F';
+export const b3trMainnetAddress = '0x5ef79995FE8a89e0812330E4378eB2660ceDe699' as `0x${string}`;
+export const b3trTestnetAddress = '0xbf64cf86894Ee0877C4e7d03936e35Ee8D8b864F' as `0x${string}`;

---

3-26: Good use of as const for ABI type safety.

The comment on line 4 suggests this is a placeholder. Since this is a playground example, consider whether the actual B3TR ABI should be imported from @vechain/vechain-contract-types (as done in TransactionExamples.tsx with IB3TR__factory.abi) for consistency.

Would you like me to help consolidate the ABI usage to avoid maintaining a separate definition here?

packages/vechain-kit/src/hooks/modals/useSettingsModal.tsx (1)

23-27: Remove unused SettingsModalProvider or clarify its purpose.

The SettingsModalProvider component is a pass-through that renders children without providing any context or functionality. If it's not used elsewhere or serving a specific pattern, it should be removed to reduce code clutter.

Run the following script to verify if SettingsModalProvider is used anywhere in the codebase:

#!/bin/bash
# Description: Check if SettingsModalProvider is imported or used anywhere

# Search for imports of SettingsModalProvider
rg -n "SettingsModalProvider" --type=ts --type=tsx -C3

packages/vechain-kit/src/hooks/modals/useWalletModal.tsx (1)

38-40: Consider removing the no-op WalletModalProvider component.

This component simply renders its children without any additional functionality. If it's not used elsewhere or intended for future functionality, consider removing it to reduce code clutter.

examples/playground/src/app/components/features/FeaturesToTry/ThemeCard.tsx (1)

14-61: Consider extracting shared UI components.

A nearly identical ThemeCard component exists in examples/homepage/src/app/components/features/FeaturesToTry/ThemeCard.tsx. Consider extracting common UI components to a shared location (e.g., a shared package or monorepo workspace) to reduce duplication and improve maintainability.

examples/playground/src/app/components/layout/Header/LanguageDropdown.tsx (2)

56-69: Add error handling for flag image loading failures.

The Image components lack error handling for failed loads. If the CDN is unavailable or returns invalid content, users will see broken image icons. Consider adding an onError handler with a fallback (e.g., a generic globe icon or the language code as text).

🔎 Suggested implementation with error handling

+import { LuGlobe } from 'react-icons/lu';
+
+const FlagImage = ({ src, alt, ...props }: { src: string; alt: string; [key: string]: any }) => {
+  const [hasError, setHasError] = React.useState(false);
+  
+  if (hasError) {
+    return <Icon as={LuGlobe} boxSize="20px" />;
+  }
+  
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      onError={() => setHasError(true)}
+      {...props}
+    />
+  );
+};

Then replace both <Image ... /> instances with <FlagImage ... />.

Also applies to: 116-129

---

64-68: Consider using Chakra UI semantic tokens instead of hardcoded color values.

The component uses numerous hardcoded RGBA values for borders, backgrounds, and shadows. While the theme-aware conditionals work correctly, using Chakra's semantic tokens (e.g., borderColor="whiteAlpha.200" or bg="gray.800") would improve maintainability and ensure consistency with the global theme.

Example for border colors:

borderColor={isDarkMode ? 'whiteAlpha.200' : 'gray.200'}
// Could become:
borderColor="border.subtle"  // if defined in theme

Also applies to: 77-85, 100-111, 124-128

packages/vechain-kit/src/components/AccountModal/Contents/Profile/ProfileContent.tsx (1)

106-122: Error handling is silently implemented without user feedback.

The useSwitchWallet hook includes error handling (try-catch at lines 23-32), but catches errors silently and doesn't expose them to the component. This means if the wallet switch fails, the user sees only the loading state end with no error message or feedback. Consider exposing error information from the hook so the component can provide appropriate user feedback for failed wallet switches, network issues, or user cancellations.

examples/playground/package.json (1)

12-25: Consider standardizing dependency versioning strategy.

The dependencies use inconsistent versioning: exact versions for some packages (lines 13, 17: "2.8.2", "1.4.1") and caret ranges for others (lines 14-16, 19-20, 22-24). This inconsistency can lead to unpredictable behavior across environments.

Consider adopting a consistent strategy:

• Use exact versions for stability-critical packages
• Use caret ranges (^) for packages with stable APIs
• Document the versioning strategy in a contributing guide

examples/playground/src/app/components/features/LoginToContinueBox/LoginToContinueBox.tsx (1)

34-34: Simplify onClick handler by removing unnecessary arrow function.

The arrow function wrapper is unnecessary since open accepts no arguments and can be passed directly.

🔎 Proposed simplification

-            <Button width="full" onClick={() => open()}>
+            <Button width="full" onClick={open}>
                 {t('Click here to sign in!')}
             </Button>

examples/playground/src/app/theme/button.ts (1)

17-20: Consider renaming or removing the testVariant for production.

The variant name testVariant suggests temporary or development code. For production readiness, consider:

• Renaming it to reflect its purpose (e.g., primaryAccent, accentButton)
• Removing it if it's no longer needed
• Adding a comment explaining its intended use case

examples/playground/src/app/components/features/FeaturesToTry/LanguageCard.tsx (1)

14-14: Consider using path aliases instead of deep relative imports.

The import path ../../../../../i18n is fragile and difficult to maintain. If the file structure changes, this import will break.

🔎 Proposed improvement

Configure a path alias in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/i18n": ["./i18n"],
      "@/components/*": ["./src/app/components/*"]
    }
  }
}

Then update the import:

-import { languageNames, supportedLanguages } from '../../../../../i18n';
+import { languageNames, supportedLanguages } from '@/i18n';

examples/playground/src/app/components/features/LanguageSelector/LanguageSelector.tsx (1)

5-5: Simplify deeply nested import path.

The import path ../../../../../i18n is fragile and error-prone during refactoring. Consider using a path alias or moving the i18n configuration to a more accessible location.

💡 Suggested approach

Configure a path alias in your TypeScript config:

{
  "compilerOptions": {
    "paths": {
      "@/i18n": ["./i18n.ts"]
    }
  }
}

Then import as:

import { languageNames, supportedLanguages } from '@/i18n';

examples/playground/src/app/components/features/DaoInfo/DaoInfo.tsx (1)

12-52: Handle loading and error states for better UX.

The component displays contract data without handling loading or error states from the useCurrentAllocationsRoundId and useIsPerson hooks. During data fetching, users will see empty or undefined values, which degrades the user experience.

💡 Suggested enhancement

 export function DaoInfo() {
     const { account } = useWallet();
-    const { data: currentAllocationsRoundId } = useCurrentAllocationsRoundId();
-    const { data: isValidPassport } = useIsPerson(account?.address);
+    const { data: currentAllocationsRoundId, isLoading: isLoadingRound } = useCurrentAllocationsRoundId();
+    const { data: isValidPassport, isLoading: isLoadingPassport } = useIsPerson(account?.address);

     return (
         <CollapsibleCard
             title="Contract Interactions"
             icon={LuBuilding2}
             style={{ bg: 'whiteAlpha.100' }}
         >
             <VStack spacing={6} align="stretch">
                 <Text textAlign="center">
                     VeChain Kit provides hooks to easily interact with popular
                     VeChain contracts. Here's how to use them in your
                     application.
                 </Text>

                 <SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
                     {/* Current Implementation */}
                     <VStack
                         spacing={4}
                         p={6}
                         borderRadius="md"
                         bg="whiteAlpha.50"
                     >
                         <Text fontWeight="bold">Live VeBetterDAO Data</Text>
                         <VStack spacing={3} align="start" w="full">
                             <Text>
                                 <Text as="span" fontWeight="bold">
                                     Current Round ID:{' '}
                                 </Text>
-                                {currentAllocationsRoundId}
+                                {isLoadingRound ? 'Loading...' : currentAllocationsRoundId}
                             </Text>
                             <Text>
                                 <Text as="span" fontWeight="bold">
                                     Valid Passport:{' '}
                                 </Text>
-                                {isValidPassport?.toString()}
+                                {isLoadingPassport ? 'Loading...' : isValidPassport?.toString()}
                             </Text>
                         </VStack>
                     </VStack>
                 </SimpleGrid>
             </VStack>
         </CollapsibleCard>
     );
 }

examples/playground/src/app/components/features/ThemeToggle/ThemeToggle.tsx (1)

5-15: LGTM! Component logic is clean and correct.

The ThemeToggle component correctly uses Chakra UI's useColorMode hook and provides a clear toggle interface.

💡 Optional: Remove unnecessary Box wrapper

The Box wrapper doesn't add any functionality or styling. Consider returning the Button directly:

 export function ThemeToggle() {
     const { colorMode, toggleColorMode } = useColorMode();

     return (
-        <Box>
-            <Button onClick={toggleColorMode}>
-                Toggle {colorMode === 'light' ? 'Dark' : 'Light'} Mode
-            </Button>
-        </Box>
+        <Button onClick={toggleColorMode}>
+            Toggle {colorMode === 'light' ? 'Dark' : 'Light'} Mode
+        </Button>
     );
 }

examples/playground/src/app/globals.css (2)

17-41: Consider reducing reliance on !important flags.

The extensive use of !important on background and color properties may indicate specificity conflicts. This can make future style overrides difficult and suggests the selectors might benefit from increased specificity instead.

💡 Consider alternative approaches

If these !important flags are needed to override Chakra UI's inline styles, consider:

1. Using Chakra's theme configuration to set these colors at the theme level
2. Increasing selector specificity without !important
3. Using Chakra's ColorModeProvider config to control default backgrounds

Example of increasing specificity:

html[data-chakra-ui-color-mode='dark'] body {
  background-color: #121213;
  color: #F7FAFC;
}

---

45-53: Use theme-aware border color.

The .container class uses a hardcoded black border (#000) that won't adapt to the theme. This will appear harsh in dark mode.

🔎 Suggested fix

Consider using a CSS variable or theme-aware color:

 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 1px solid #000;
+  border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 20px;
   padding: 20px;
 }
+
+[data-theme='dark'] .container,
+[data-chakra-ui-color-mode='dark'] .container {
+  border-color: rgba(255, 255, 255, 0.2);
+}

examples/playground/.env.example (1)

1-11: Add trailing newline to follow convention.

The file is missing a trailing newline, which is a common convention for text files.

🔎 Proposed fix

 # Translations 
 OPENAI_API_KEY=
+

examples/playground/src/app/theme/colors.ts (1)

28-38: Inconsistent key format compared to other palettes.

lightTertiary uses numeric keys (100, 200, etc.) while lightPrimary and lightSecondary use string keys ('50', '100', etc.). This inconsistency could cause issues when accessing colors programmatically if code expects consistent key types.

🔎 Proposed fix for consistency

 export const lightTertiary = {
-    100: '#e0f7fc',
-    200: '#c2eff9',
-    300: '#a3e7f6',
-    400: '#85dff3',
-    500: '#66d7f0',
-    600: '#47cfed',
-    700: '#29c7ea',
-    800: '#0abfe7',
-    900: '#00b7e0',
+    '100': '#e0f7fc',
+    '200': '#c2eff9',
+    '300': '#a3e7f6',
+    '400': '#85dff3',
+    '500': '#66d7f0',
+    '600': '#47cfed',
+    '700': '#29c7ea',
+    '800': '#0abfe7',
+    '900': '#00b7e0',
 };

examples/playground/src/app/components/features/AccountInfo/AccountInfo.tsx (1)

17-92: Potential code duplication with homepage AccountInfo component.

This component is nearly identical to examples/homepage/src/app/components/features/AccountInfo/AccountInfo.tsx (shown in relevant snippets). Consider extracting a shared component to avoid maintaining duplicate code across both example apps.

The functionality and rendering logic are correct. The conditional rendering for smart account and wallet type detection work as expected.

examples/playground/src/app/components/features/FeaturesToTry/FeaturesToTry.tsx (2)

3-38: Duplicate imports from react-icons/lu.

Icons are imported in two separate blocks (lines 4-10 and 31-37). Consolidate these into a single import statement for cleaner code.

🔎 Proposed fix

 import { VStack, Text, SimpleGrid } from '@chakra-ui/react';
 import {
     LuSquareUser,
     LuArrowLeftRight,
     LuUserCog,
     LuBell,
     LuCircleHelp,
+    LuUser,
+    LuArrowDownToLine,
+    LuRefreshCw,
+    LuSettings,
+    LuWallet,
 } from 'react-icons/lu';
-import {
-    LuUser,
-    LuArrowDownToLine,
-    LuRefreshCw,
-    LuSettings,
-    LuWallet,
-} from 'react-icons/lu';

---

86-93: "Customize Profile" duplicates "Profile" feature functionality.

Both "Profile" (line 69) and "Customize Profile" (line 92) call openProfileModal({ isolatedView: true }) with the same parameters. Consider consolidating into a single feature card or differentiating their behavior.

examples/playground/src/app/providers/VechainKitProviderWrapper.tsx (2)

24-65: Duplicate polling logic between LanguageSync and VechainKitProviderWrapper.

Both components poll localStorage every 500ms for language changes. This duplication means two intervals running simultaneously. Consider consolidating the language synchronization logic into a single location.

---

113-116: Consider memoizing playgroundTranslations.

This object is recomputed on every render. Since resources is static, memoize with useMemo to avoid unnecessary recalculations.

🔎 Proposed fix

+import { useEffect, useState, useMemo } from 'react';

     // Transform resources to match I18n type (extract translation objects)
-    const playgroundTranslations = Object.keys(resources).reduce((acc, lang) => {
+    const playgroundTranslations = useMemo(() => Object.keys(resources).reduce((acc, lang) => {
         acc[lang] = resources[lang as keyof typeof resources].translation;
         return acc;
-    }, {} as Record<string, Record<string, string>>);
+    }, {} as Record<string, Record<string, string>>), []);

examples/playground/i18n.ts (2)

13-34: Consider adding type constraints for language mappings.

The supportedLanguages, resources, and languageNames objects could benefit from a shared type to ensure consistency and catch typos at compile time.

🔎 Proposed type-safe approach

-// Define supported languages
-export const supportedLanguages = ['en', 'de', 'it', 'fr', 'es', 'zh', 'ja'];
+// Define supported languages
+export const supportedLanguages = ['en', 'de', 'it', 'fr', 'es', 'zh', 'ja'] as const;
+export type SupportedLanguage = (typeof supportedLanguages)[number];

-export const resources = {
+export const resources: Record<SupportedLanguage, { translation: typeof en }> = {
     en: { translation: en },
     // ...
 };

-export const languageNames = {
+export const languageNames: Record<SupportedLanguage, string> = {
     en: 'English',
     // ...
 };

---

39-57: Consider consolidating the window checks.

The two typeof window !== 'undefined' checks can be simplified since the second check is always true if the first one passed.

🔎 Simplified lookup function

     lookup: () => {
-        // Check localStorage first (for persistence across page refreshes)
         if (typeof window !== 'undefined') {
+            // Check localStorage first (for persistence across page refreshes)
             const storedLanguage = localStorage.getItem('i18nextLng');
             if (storedLanguage && supportedLanguages.includes(storedLanguage)) {
                 return storedLanguage;
             }
-        }
 
-        // Check if we're in a browser environment
-        if (typeof window !== 'undefined') {
             // Get browser language
             const browserLang = navigator.language.split('-')[0];
             if (browserLang && supportedLanguages.includes(browserLang)) {
                 return browserLang;
             }
         }

         return 'en'; // fallback
     },

examples/playground/src/app/components/features/FeaturesToTry/FeatureCard.tsx (3)

37-43: Unnecessary e.preventDefault() call.

The preventDefault() call has no effect on a <div> (which Box renders to) since divs don't have default click behavior. You can simplify the handler.

🔎 Simplified click handler

             onClick={(e) => {
-                if (disabled) {
-                    e.preventDefault();
-                    return;
-                }
-                content();
+                if (!disabled) {
+                    content();
+                }
             }}

---

102-102: Hardcoded string should use i18n.

Since the playground app has i18n support, "Click me!" should be translated. The same applies to the disabled message on line 117.

🔎 Use translations

+import { useTranslation } from 'react-i18next';
+
 export function FeatureCard({
     // ...
 }: FeatureCardProps) {
     const { colorMode } = useColorMode();
+    const { t } = useTranslation();
 
     // In the JSX:
-                            <Text ...>
-                                Click me!
-                            </Text>
+                            <Text ...>
+                                {t('featureCard.clickMe')}
+                            </Text>

-                    <Text fontSize="xs" opacity={0.5}>
-                        Only available for social login users.
-                    </Text>
+                    <Text fontSize="xs" opacity={0.5}>
+                        {t('featureCard.socialLoginOnly')}
+                    </Text>

---

36-57: Add accessibility attributes for the clickable card.

The interactive Box lacks keyboard support and ARIA semantics. Consider adding role, tabIndex, and keyboard handling for accessibility compliance.

🔎 Accessibility improvements

         <Box
             onClick={(e) => {
                 if (!disabled) {
                     content();
                 }
             }}
+            onKeyDown={(e) => {
+                if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+                    e.preventDefault();
+                    content();
+                }
+            }}
+            role="button"
+            tabIndex={disabled ? -1 : 0}
+            aria-disabled={disabled}
             p={4}
             // ...

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: vechain/vechain-kit PR: 0
File: .cursor/rules/migration-guide-to-v2.mdc:0-0
Timestamp: 2025-12-01T13:01:33.771Z
Learning: Applies to **/*.{ts,tsx} : In VeChain Kit Version 2, use `useThor` instead of `useConnex` for contract interactions

Learnt from: CR
Repo: vechain/vechain-kit PR: 0
File: .cursor/rules/migration-guide-to-v2.mdc:0-0
Timestamp: 2025-12-01T13:01:33.771Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript `as const` assertions for method names and `as `0x${string}`` assertions for Ethereum addresses to ensure type safety in contract interactions

Learnt from: CR
Repo: vechain/vechain-kit PR: 0
File: .cursor/rules/migration-guide-to-v2.mdc:0-0
Timestamp: 2025-12-01T13:01:33.771Z
Learning: Applies to **/*.{ts,tsx} : For transaction building and sending, use the `useBuildTransaction` hook with a clauseBuilder function that returns an array of clauses with optional comment fields describing the transaction action