Merge pull request xch-dev#650 from dkackman/theme-lib

switch to lib

Author: Rigidity

package.json

@@ -74,6 +74,7 @@
     "tailwindcss-animate": "^1.0.7",
     "tauri-plugin-safe-area-insets": "^0.1.0",
     "tauri-plugin-sage": "file:./tauri-plugin-sage",
+    "theme-o-rama": "0.1.0-beta.9",
     "usehooks-ts": "^3.1.0",
     "zod": "^3.23.8",
     "zustand": "^4.5.5"

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import { discoverThemes, resolveThemeImage } from '@/lib/themes';
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
 import { useEffect, useState } from 'react';
@@ -9,6 +10,7 @@ import {
 } from 'react-router-dom';
 import { Slide, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { ThemeProvider, useTheme } from 'theme-o-rama';
 import { useLocalStorage } from 'usehooks-ts';
 import { BiometricProvider } from './contexts/BiometricContext';
 import { ErrorProvider } from './contexts/ErrorContext';
@@ -21,7 +23,6 @@ import {
 import { PeerProvider } from './contexts/PeerContext';
 import { PriceProvider } from './contexts/PriceContext';
 import { SafeAreaProvider } from './contexts/SafeAreaContext';
-import { ThemeProvider, useTheme } from './contexts/ThemeContext';
 import { WalletConnectProvider } from './contexts/WalletConnectContext';
 import { WalletProvider } from './contexts/WalletContext';
 import useInitialization from './hooks/useInitialization';
@@ -151,7 +152,10 @@ export default function App() {
 
   return (
     <LanguageProvider locale={locale} setLocale={setLocale}>
-      <ThemeProvider>
+      <ThemeProvider
+        discoverThemes={discoverThemes}
+        imageResolver={resolveThemeImage}
+      >
         <SafeAreaProvider>
           <ErrorProvider>
             <BiometricProvider>

src/App.tsx

@@ -1,5 +1,4 @@
 import { useInsets } from '@/contexts/SafeAreaContext';
-import { useTheme } from '@/contexts/ThemeContext';
 import { useWallet } from '@/contexts/WalletContext';
 import iconDark from '@/icon-dark.png';
 import iconLight from '@/icon-light.png';
@@ -10,6 +9,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { ChevronLeft, Menu } from 'lucide-react';
 import { PropsWithChildren, ReactNode } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useTheme } from 'theme-o-rama';
 import { BottomNav, TopNav } from './Nav';
 import { Button } from './ui/button';
 import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';

src/components/Header.tsx

@@ -6,14 +6,14 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useInsets } from '@/contexts/SafeAreaContext';
-import { useTheme } from '@/contexts/ThemeContext';
 import { useWallet } from '@/contexts/WalletContext';
 import iconDark from '@/icon-dark.png';
 import iconLight from '@/icon-light.png';
 import { t } from '@lingui/core/macro';
 import { PanelLeft, PanelLeftClose } from 'lucide-react';
 import { PropsWithChildren } from 'react';
 import { Link, useLocation } from 'react-router-dom';
+import { useTheme } from 'theme-o-rama';
 import { useLocalStorage } from 'usehooks-ts';
 import { BottomNav, TopNav } from './Nav';
 

src/components/Layout.tsx

@@ -1,13 +1,12 @@
 import { commands } from '@/bindings';
-import { useTheme } from '@/contexts/ThemeContext';
 import { useErrors } from '@/hooks/useErrors';
-import { applyThemeIsolated, isUserTheme } from '@/lib/theme';
-import { Theme } from '@/lib/theme.type';
+import { hasTag } from '@/lib/themes';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { Check, Trash2 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
+import { applyThemeIsolated, Theme, useTheme } from 'theme-o-rama';
 import { Button } from './ui/button';
 import {
   Dialog,
@@ -47,7 +46,7 @@ export function ThemeCard({
   };
 
   const handleDeleteTheme = async () => {
-    if (isUserTheme(theme)) {
+    if (hasTag(theme, 'user')) {
       setIsDeleting(true);
       try {
         await commands.deleteUserTheme({ nft_id: theme.name });
@@ -96,7 +95,7 @@ export function ThemeCard({
           </h3>
           <div className='flex items-center gap-2'>
             {isSelected && <Check className='h-4 w-4' style={checkStyles} />}
-            {isUserTheme(theme) && (
+            {hasTag(theme, 'user') && (
               <Button
                 onClick={handleDeleteClick}
                 disabled={isDeleting}
@@ -155,7 +154,7 @@ export function ThemeCard({
                 aria-label={t`Theme selected`}
               />
             )}
-            {isUserTheme(theme) && (
+            {hasTag(theme, 'user') && (
               <Button
                 onClick={handleDeleteClick}
                 disabled={isDeleting}

src/components/ThemeCard.tsx

@@ -1,8 +1,7 @@
-import { useTheme } from '@/contexts/ThemeContext';
-import { isFeaturedTheme, isUserTheme } from '@/lib/theme';
-import { Theme } from '@/lib/theme.type';
+import { hasTag } from '@/lib/themes';
 import { Trans } from '@lingui/react/macro';
 import { Loader2 } from 'lucide-react';
+import { Theme, useTheme } from 'theme-o-rama';
 import { ThemeCard } from './ThemeCard';
 
 export function ThemeSelector() {
@@ -40,15 +39,20 @@ export function ThemeSelector() {
 
   // Group themes by isUserTheme and isFeatured, sort alphabetically within each group
   const featuredThemes: Theme[] = availableThemes
-    .filter((theme) => !isUserTheme(theme) && isFeaturedTheme(theme))
+    .filter((theme) => !hasTag(theme, 'user') && hasTag(theme, 'featured'))
     .sort((a, b) => a.displayName.localeCompare(b.displayName));
 
   const defaultThemes = availableThemes
-    .filter((theme) => !isUserTheme(theme) && !isFeaturedTheme(theme))
+    .filter(
+      (theme) =>
+        !hasTag(theme, 'user') &&
+        !hasTag(theme, 'featured') &&
+        !hasTag(theme, 'hidden'),
+    )
     .sort((a, b) => a.displayName.localeCompare(b.displayName));
 
   const userThemes = availableThemes
-    .filter((theme) => isUserTheme(theme))
+    .filter((theme) => hasTag(theme, 'user'))
     .sort((a, b) => a.displayName.localeCompare(b.displayName));
 
   return (

src/components/ThemeSelector.tsx

@@ -19,7 +19,6 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useTheme } from '@/contexts/ThemeContext';
 import { useBiometric } from '@/hooks/useBiometric';
 import { useErrors } from '@/hooks/useErrors';
 import { useSortable } from '@dnd-kit/sortable';
@@ -44,6 +43,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Spoiler } from 'spoiled';
+import { useTheme } from 'theme-o-rama';
 import { commands, KeyInfo, SecretKeyInfo } from '../bindings';
 import { CustomError } from '../contexts/ErrorContext';
 import { useWallet } from '../contexts/WalletContext';

src/components/WalletCard.tsx

@@ -2,8 +2,8 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import * as React from 'react';
 
-import { useTheme } from '@/contexts/ThemeContext';
 import { cn } from '@/lib/utils';
+import { useTheme } from 'theme-o-rama';
 
 const Dialog = DialogPrimitive.Root;