refactor: refactor icons

leather-io · Feb 4, 2025 · 12cdc7b · 12cdc7b
1 parent 08c46c2
commit 12cdc7b
Show file tree

Hide file tree

Showing 263 changed files with 2,317 additions and 3,324 deletions.
diff --git a/apps/mobile/src/app/(home)/recover-wallet.tsx b/apps/mobile/src/app/(home)/recover-wallet.tsx
@@ -130,7 +130,7 @@ export default function RecoverWallet() {
                   id: 'recover_wallet.paste_button',
                   message: 'Paste',
                 })}
-                icon={<NoteEmptyIcon color={theme.colors['ink.background-primary']} />}
+                icon={<NoteEmptyIcon color="ink.background-primary" />}
               />
             )}
             <TextInput
@@ -176,7 +176,7 @@ export default function RecoverWallet() {
                       bg="ink.background-secondary"
                       borderRadius="round"
                     >
-                      <LockIcon color={theme.colors['ink.text-primary']} />
+                      <LockIcon color="ink.text-primary" />
                     </Box>
                   </Cell.Icon>
                   <Cell.Content>

diff --git a/apps/mobile/src/app/(home)/settings/wallet/configure/[wallet]/index.tsx b/apps/mobile/src/app/(home)/settings/wallet/configure/[wallet]/index.tsx
@@ -23,7 +23,6 @@ import { WalletStore } from '@/store/wallets/utils';
 import { WalletLoader } from '@/store/wallets/wallets.read';
 import { userRenamesWallet } from '@/store/wallets/wallets.write';
 import { t } from '@lingui/macro';
-import { useTheme } from '@shopify/restyle';
 import dayjs from 'dayjs';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { z } from 'zod';
@@ -43,7 +42,7 @@ import {
   TrashIcon,
 } from '@leather.io/ui/native';
 
-function getUnavailableFeatures({ iconColor }: { iconColor: string }) {
+function getUnavailableFeatures({ iconColor }: { iconColor: keyof Theme['colors'] }) {
   const addressReuseTitle = t({
     id: 'configure_wallet.address_reuse.cell_title',
     message: 'Address reuse',
@@ -97,7 +96,6 @@ interface ConfigureWalletProps {
   wallet: WalletStore;
 }
 function ConfigureWallet({ wallet }: ConfigureWalletProps) {
-  const theme = useTheme<Theme>();
   const router = useRouter();
   const addWalletSheetRef = useRef<SheetRef>(null);
   const walletNameSheetRef = useRef<SheetRef>(null);
@@ -209,7 +207,7 @@ function ConfigureWallet({ wallet }: ConfigureWalletProps) {
                 id: 'configure_wallet.remove_wallet.cell_title',
                 message: 'Remove wallet',
               })}
-              icon={<TrashIcon color={theme.colors['red.action-primary-default']} />}
+              icon={<TrashIcon color="red.action-primary-default" />}
               onPress={() => {
                 removeWalletSheetRef.current?.present();
               }}
@@ -223,10 +221,8 @@ function ConfigureWallet({ wallet }: ConfigureWalletProps) {
             })}
             content={
               <SettingsList>
-                {Object.values(
-                  getUnavailableFeatures({ iconColor: theme.colors['ink.text-subdued'] })
-                ).map(feature => {
-                  return (
+                {Object.values(getUnavailableFeatures({ iconColor: 'ink.text-subdued' })).map(
+                  feature => (
                     <SettingsListItem
                       key={feature.id}
                       title={feature.title}
@@ -236,8 +232,8 @@ function ConfigureWallet({ wallet }: ConfigureWalletProps) {
                         id: feature.id,
                       })}
                     />
-                  );
-                })}
+                  )
+                )}
               </SettingsList>
             }
           />

diff --git a/apps/mobile/src/components/add-wallet/add-wallet-sheet.layout.tsx b/apps/mobile/src/components/add-wallet/add-wallet-sheet.layout.tsx
@@ -10,7 +10,6 @@ import { WaitlistIds } from '@/features/waitlist/ids';
 import { AppRoutes } from '@/routes';
 import { TestId } from '@/shared/test-id';
 import { t } from '@lingui/macro';
-import { useTheme } from '@shopify/restyle';
 import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
 
@@ -27,7 +26,6 @@ import {
   SheetRef,
   SignalIcon,
   Text,
-  Theme,
   ThemeVariant,
 } from '@leather.io/ui/native';
 
@@ -57,7 +55,6 @@ export function AddWalletSheetLayout({
 }: AddWalletSheetLayoutProps) {
   const [moreOptionsVisible, setMoreOptionsVisible] = useState(!!opensFully);
   const animatedIndex = useSharedValue<number>(CLOSED_ANIMATED_SHARED_VALUE);
-  const theme = useTheme<Theme>();
   const router = useRouter();
 
   function openOptions() {
@@ -142,7 +139,7 @@ export function AddWalletSheetLayout({
                     id: 'add_wallet.connect_wallet.cell_caption',
                     message: 'Ledger, Trezor, Ryder and more',
                   })}
-                  icon={<SignalIcon color={theme.colors['ink.text-subdued']} />}
+                  icon={<SignalIcon color="ink.text-subdued" />}
                   onPress={() => {
                     router.navigate(AppRoutes.HardwareWallets);
                     addWalletSheetRef.current?.close();
@@ -157,7 +154,7 @@ export function AddWalletSheetLayout({
                     id: 'add_wallet.email_wallet.cell_caption',
                     message: 'Access custodial wallet',
                   })}
-                  icon={<EmailIcon color={theme.colors['ink.text-subdued']} />}
+                  icon={<EmailIcon color="ink.text-subdued" />}
                   onPress={() => {
                     onOpenSheet({
                       title: t({
@@ -177,7 +174,7 @@ export function AddWalletSheetLayout({
                     id: 'add_wallet.mpc_wallet.cell_caption',
                     message: 'Import existing accounts',
                   })}
-                  icon={<PaletteIcon color={theme.colors['ink.text-subdued']} />}
+                  icon={<PaletteIcon color="ink.text-subdued" />}
                   onPress={() => {
                     router.navigate(AppRoutes.MpcWallets);
                     addWalletSheetRef.current?.close();
@@ -192,7 +189,7 @@ export function AddWalletSheetLayout({
                     id: 'add_wallet.watch_only_wallet.cell_caption',
                     message: 'No key needed',
                   })}
-                  icon={<Eye2Icon color={theme.colors['ink.text-subdued']} />}
+                  icon={<Eye2Icon color="ink.text-subdued" />}
                   onPress={() => {
                     onOpenSheet({
                       title: t({

diff --git a/apps/mobile/src/components/amount-field/amount-field-secondary-value.tsx b/apps/mobile/src/components/amount-field/amount-field-secondary-value.tsx
@@ -1,6 +1,4 @@
-import { useTheme } from '@shopify/restyle';
-
-import { ArrowTopBottomIcon, Box, Pressable, Text, Theme } from '@leather.io/ui/native';
+import { ArrowTopBottomIcon, Box, Pressable, Text } from '@leather.io/ui/native';
 
 interface AmountFieldSecondaryValueProps {
   children: string;
@@ -11,15 +9,13 @@ export function AmountFieldSecondaryValue({
   children,
   onToggleCurrencyMode,
 }: AmountFieldSecondaryValueProps) {
-  const theme = useTheme<Theme>();
-
   return (
     <Pressable hitSlop={16} onPress={onToggleCurrencyMode}>
       <Box flexDirection="row" gap="1" alignItems="center">
         <Text variant="label02" color="ink.text-subdued" numberOfLines={1} ellipsizeMode="clip">
           {children}
         </Text>
-        <ArrowTopBottomIcon color={theme.colors['ink.text-subdued']} variant="small" />
+        <ArrowTopBottomIcon color="ink.text-subdued" variant="small" />
       </Box>
     </Pressable>
   );

diff --git a/apps/mobile/src/components/sheets/warning-sheet.layout.tsx b/apps/mobile/src/components/sheets/warning-sheet.layout.tsx
@@ -2,7 +2,6 @@ import { RefObject } from 'react';
 
 import { useSettings } from '@/store/settings/settings';
 import { t } from '@lingui/macro';
-import { useTheme } from '@shopify/restyle';
 
 import {
   Box,
@@ -12,7 +11,6 @@ import {
   SheetHeader,
   SheetRef,
   Text,
-  Theme,
 } from '@leather.io/ui/native';
 
 export type WarningSheetVariant = 'normal' | 'critical';
@@ -34,7 +32,6 @@ export function WarningSheetLayout({
   onPressSupport,
 }: WarningSheetLayoutProps) {
   const { themeDerivedFromThemePreference } = useSettings();
-  const theme = useTheme<Theme>();
   return (
     <Sheet ref={sheetRef} themeVariant={themeDerivedFromThemePreference}>
       <Box p="5" justifyContent="space-between" gap="5">
@@ -54,9 +51,7 @@ export function WarningSheetLayout({
                 >
                   <ErrorTriangleIcon
                     color={
-                      theme.colors[
-                        variant === 'critical' ? 'red.action-primary-default' : 'ink.text-primary'
-                      ]
+                      variant === 'critical' ? 'red.action-primary-default' : 'ink.text-primary'
                     }
                   />
                 </Box>

diff --git a/apps/mobile/src/components/toast/index.tsx b/apps/mobile/src/components/toast/index.tsx
@@ -3,15 +3,13 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import { TestId } from '@/shared/test-id';
-import { useTheme } from '@shopify/restyle';
 
 import {
   Box,
   CheckmarkCircleIcon,
   ErrorTriangleIcon,
   InfoCircleIcon,
   Text,
-  Theme,
 } from '@leather.io/ui/native';
 
 import { ToastData, ToastMethods, ToastProps, ToastType } from './types';
@@ -25,21 +23,20 @@ const TOP_POSITION = {
 
 const TOAST_OPEN_DURATION = 3000;
 
-function getIcon(type: ToastType, theme: Theme) {
+function getIcon(type: ToastType) {
   switch (type) {
     case 'error':
-      return <ErrorTriangleIcon color={theme.colors['red.action-primary-default']} />;
+      return <ErrorTriangleIcon color="red.action-primary-default" />;
     case 'info':
-      return <InfoCircleIcon color={theme.colors['ink.background-primary']} />;
+      return <InfoCircleIcon color="ink.background-primary" />;
     case 'success':
-      return <CheckmarkCircleIcon color={theme.colors['green.action-primary-default']} />;
+      return <CheckmarkCircleIcon color="green.action-primary-default" />;
     default:
-      return <InfoCircleIcon color={theme.colors['ink.background-primary']} />;
+      return <InfoCircleIcon color="ink.background-primary" />;
   }
 }
 
 export function Toast({ toastRef }: ToastProps) {
-  const theme = useTheme<Theme>();
   const [toastData, setToastData] = useState<ToastData | null>(null);
   const top = useSharedValue<number>(TOP_POSITION.closed);
   const timeout = useRef<NodeJS.Timeout>();
@@ -94,7 +91,7 @@ export function Toast({ toastRef }: ToastProps) {
         alignItems="center"
         testID={TestId.toastContainer}
       >
-        {getIcon(toastData.type, theme)}
+        {getIcon(toastData.type)}
         <Text variant="label02" color="ink.background-primary">
           {toastData.title}
         </Text>

diff --git a/apps/mobile/src/components/widgets/components/widget/widget-title.tsx b/apps/mobile/src/components/widgets/components/widget/widget-title.tsx
@@ -1,7 +1,5 @@
-import { useTheme } from '@shopify/restyle';
-
 import { Money } from '@leather.io/models';
-import { Box, ChevronRightIcon, Text, Theme } from '@leather.io/ui/native';
+import { Box, ChevronRightIcon, Text } from '@leather.io/ui/native';
 
 import { Balance } from '../../../balance/balance';
 
@@ -11,11 +9,10 @@ interface WidgetTitleProps {
 }
 
 export function WidgetTitle({ title, totalBalance }: WidgetTitleProps) {
-  const theme = useTheme<Theme>();
   return (
     <>
       <Text variant="label01">{title}</Text>
-      <ChevronRightIcon variant="small" color={theme.colors['ink.text-subdued']} />
+      <ChevronRightIcon variant="small" color="ink.text-subdued" />
       {totalBalance && (
         <Box flex={1} justifyContent="flex-end" alignItems="flex-end">
           <Balance balance={totalBalance} color="ink.text-subdued" />

diff --git a/apps/mobile/src/features/approver/components/approver-buttons.tsx b/apps/mobile/src/features/approver/components/approver-buttons.tsx
@@ -1,8 +1,7 @@
 import { SpinnerIcon } from '@/components/spinner-icon';
 import { t } from '@lingui/macro';
-import { useTheme } from '@shopify/restyle';
 
-import { Button, CheckmarkCircleIcon, Theme } from '@leather.io/ui/native';
+import { Button, CheckmarkCircleIcon } from '@leather.io/ui/native';
 import { assertUnreachable } from '@leather.io/utils';
 
 import { ApproverState } from '../utils';
@@ -14,7 +13,6 @@ interface ApproverButtonsProps {
 }
 
 export function ApproverButtons({ approverState, onEdit, onApprove }: ApproverButtonsProps) {
-  const theme = useTheme<Theme>();
   switch (approverState) {
     case 'start':
       return (
@@ -61,7 +59,7 @@ export function ApproverButtons({ approverState, onEdit, onApprove }: ApproverBu
             id: 'approver.button.submitted',
             message: 'Submitted',
           })}
-          icon={<CheckmarkCircleIcon color={theme.colors['ink.background-primary']} />}
+          icon={<CheckmarkCircleIcon color="ink.background-primary" />}
         />
       );
     default:

diff --git a/apps/mobile/src/features/approver/components/utxo-row.tsx b/apps/mobile/src/features/approver/components/utxo-row.tsx
@@ -13,7 +13,7 @@ interface UtxoRowProps {
 }
 
 export function UtxoRow({ isLocked, address, btcBalance, usdBalance, txid }: UtxoRowProps) {
-  const icon = isLocked ? <LockIcon /> : <UnlockIcon color="red" />;
+  const icon = isLocked ? <LockIcon /> : <UnlockIcon color="red.action-primary-default" />;
 
   return (
     <Cell.Root pressable={false}>

diff --git a/apps/mobile/src/features/settings/wallet-and-accounts/components/empty-wallets-screen.tsx b/apps/mobile/src/features/settings/wallet-and-accounts/components/empty-wallets-screen.tsx
@@ -1,15 +1,13 @@
 import { t } from '@lingui/macro';
-import { useTheme } from '@shopify/restyle';
 import { Image } from 'expo-image';
 
-import { Box, Button, PlusIcon, Text, Theme } from '@leather.io/ui/native';
+import { Box, Button, PlusIcon, Text } from '@leather.io/ui/native';
 
 interface EmptyWalletsScreenProps {
   onPressCreateWallet: () => void;
 }
 
 export function EmptyWalletsScreen({ onPressCreateWallet }: EmptyWalletsScreenProps) {
-  const theme = useTheme<Theme>();
   return (
     <Box width="100%" alignItems="center" justifyContent="center" gap="4">
       <Image
@@ -24,7 +22,7 @@ export function EmptyWalletsScreen({ onPressCreateWallet }: EmptyWalletsScreenPr
       </Text>
       <Button
         onPress={onPressCreateWallet}
-        icon={<PlusIcon color={theme.colors['ink.background-primary']} />}
+        icon={<PlusIcon color="ink.background-primary" />}
         buttonState="default"
         title={t({
           id: 'add_or_create_new_wallet.button',

diff --git a/apps/mobile/src/features/settings/wallet-and-accounts/wallet-card.tsx b/apps/mobile/src/features/settings/wallet-and-accounts/wallet-card.tsx
@@ -13,7 +13,6 @@ import { useAccountsByFingerprint } from '@/store/accounts/accounts.read';
 import { useKeyStore } from '@/store/key-store';
 import { defaultIconTestId } from '@/utils/testing-utils';
 import { t } from '@lingui/macro';
-import { useTheme } from '@shopify/restyle';
 import { useRouter } from 'expo-router';
 
 import {
@@ -25,7 +24,6 @@ import {
   Pressable,
   SettingsGearIcon,
   Text,
-  Theme,
   legacyTouchablePressEffect,
 } from '@leather.io/ui/native';
 
@@ -39,7 +37,6 @@ export function WalletCard({ fingerprint, variant, name }: WalletCardProps) {
   const { list: accounts } = useAccountsByFingerprint(fingerprint, variant);
   const hasAccounts = accounts.length > 0;
   const [expanded, setExpanded] = useState(true);
-  const theme = useTheme<Theme>();
   const keys = useKeyStore();
   const { displayToast } = useToastContext();
   const router = useRouter();
@@ -69,9 +66,9 @@ export function WalletCard({ fingerprint, variant, name }: WalletCardProps) {
           >
             <Text variant="label02">{name}</Text>
             {expanded ? (
-              <ChevronUpIcon color={theme.colors['ink.text-primary']} variant="small" />
+              <ChevronUpIcon color="ink.text-primary" variant="small" />
             ) : (
-              <ChevronDownIcon color={theme.colors['ink.text-primary']} variant="small" />
+              <ChevronDownIcon color="ink.text-primary" variant="small" />
             )}
           </Pressable>
           {variant === 'active' && (
@@ -88,7 +85,7 @@ export function WalletCard({ fingerprint, variant, name }: WalletCardProps) {
               testID={TestId.walletListSettingsButton}
               pressEffects={legacyTouchablePressEffect}
             >
-              <SettingsGearIcon color={theme.colors['ink.text-primary']} />
+              <SettingsGearIcon color="ink.text-primary" />
             </Pressable>
           )}
         </Box>

diff --git a/packages/ui/global.d.ts b/packages/ui/global.d.ts
@@ -2,10 +2,4 @@ declare module '*.png';
 declare module '*.jpg';
 declare module '*.jpeg';
 declare module '*.webp';
-
-declare module '*.svg' {
-  import React from 'react';
-  import { SvgProps } from 'react-native-svg';
-  const content: React.FC<React.SVGProps<SVGSVGElement> | SvgProps>;
-  export default content;
-}
+declare module '*.svg';
diff --git a/packages/ui/native.ts b/packages/ui/native.ts
@@ -29,7 +29,6 @@ export {
 export { generateTheme, ThemeProvider } from './src/theme-native';
 export { TouchableOpacity } from './src/components/button/touchable-opacity.native';
 export type { Theme, ThemeVariant } from './src/theme-native';
-export { Icon } from './src/icons/icon/icon.native';
 export * from './src/icons/index.native';
 export { Flag } from './src/components/flag/flag.native';
 export { ItemLayout } from './src/components/item-layout/item-layout.native';