refactor: migrate settings list item to new version of the Cell

leather-io · Dec 9, 2024 · cf4d775 · cf4d775
1 parent 46fa026
commit cf4d775
Show file tree

Hide file tree

Showing 21 changed files with 618 additions and 573 deletions.
diff --git a/apps/mobile/src/app/(home)/hardware-wallets.tsx b/apps/mobile/src/app/(home)/hardware-wallets.tsx
@@ -1,15 +1,15 @@
 import { useRef, useState } from 'react';
 
 import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
+import { SettingsList } from '@/components/settings/settings-list';
+import { SettingsListItem } from '@/components/settings/settings-list-item';
 import {
   NotifyUserSheetData,
   NotifyUserSheetLayout,
 } from '@/components/sheets/notify-user-sheet.layout';
 import { t } from '@lingui/macro';
 
 import {
-  Box,
-  Cell,
   LogoHardwareBitkey,
   LogoHardwareFoundation,
   LogoHardwareLedger,
@@ -87,7 +87,7 @@ export default function HardwareWalletListScreen() {
           message: 'Connect device',
         })}
       >
-        <Box gap="3">
+        <SettingsList>
           {Object.entries(getUnavailableFeatures()).map(featureEntry => {
             const [featureKey, feature] = featureEntry;
             const hardwareWalletName = feature.title;
@@ -100,17 +100,15 @@ export default function HardwareWalletListScreen() {
               });
             }
             return (
-              <Cell.Root
+              <SettingsListItem
                 key={featureKey}
                 title={feature.title}
                 icon={feature.icon}
                 onPress={onPress}
-              >
-                <Cell.Chevron />
-              </Cell.Root>
+              />
             );
           })}
-        </Box>
+        </SettingsList>
       </AnimatedHeaderScreenLayout>
       <NotifyUserSheetLayout
         onCloseSheet={onCloseSheet}

diff --git a/apps/mobile/src/app/(home)/mpc-wallets.tsx b/apps/mobile/src/app/(home)/mpc-wallets.tsx
@@ -1,15 +1,15 @@
 import { useRef, useState } from 'react';
 
 import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
+import { SettingsList } from '@/components/settings/settings-list';
+import { SettingsListItem } from '@/components/settings/settings-list-item';
 import {
   NotifyUserSheetData,
   NotifyUserSheetLayout,
 } from '@/components/sheets/notify-user-sheet.layout';
 import { t } from '@lingui/macro';
 
 import {
-  Box,
-  Cell,
   LogoMpcBitgo,
   LogoMpcCapsule,
   LogoMpcCopper,
@@ -103,7 +103,7 @@ export default function MpcWalletListScreen() {
           message: 'Connect mpc wallet',
         })}
       >
-        <Box gap="3">
+        <SettingsList>
           {Object.entries(getUnavailableFeatures()).map(featureEntry => {
             const [featureKey, feature] = featureEntry;
             const mpcWalletName = feature.title;
@@ -118,17 +118,15 @@ export default function MpcWalletListScreen() {
             }
 
             return (
-              <Cell.Root
+              <SettingsListItem
                 key={featureKey}
                 onPress={onPress}
                 title={feature.title}
                 icon={feature.icon}
-              >
-                <Cell.Chevron />
-              </Cell.Root>
+              />
             );
           })}
-        </Box>
+        </SettingsList>
       </AnimatedHeaderScreenLayout>
       <NotifyUserSheetLayout
         onCloseSheet={onCloseSheet}

diff --git a/apps/mobile/src/app/(home)/settings/display/index.tsx b/apps/mobile/src/app/(home)/settings/display/index.tsx
@@ -1,6 +1,8 @@
 import { useRef } from 'react';
 
 import { AnimatedHeaderScreenLayout } from '@/components/headers/animated-header/animated-header-screen.layout';
+import { SettingsList } from '@/components/settings/settings-list';
+import { SettingsListItem } from '@/components/settings/settings-list-item';
 import { AccountIdentifierSheet } from '@/features/settings/account-identifier-sheet';
 import { BitcoinUnitSheet } from '@/features/settings/bitcoin-unit-sheet';
 import { ConversionUnitSheet } from '@/features/settings/conversion-unit-sheet';
@@ -13,7 +15,6 @@ import { useLingui } from '@lingui/react';
 
 import {
   BitcoinCircleIcon,
-  Cell,
   DollarCircleIcon,
   Eye1Icon,
   PackageSecurityIcon,
@@ -56,122 +57,104 @@ export default function SettingsDisplayScreen() {
           message: 'Display',
         })}
       >
-        <Cell.Root
-          title={t({
-            id: 'display.theme.cell_title',
-            message: 'Theme',
-          })}
-          caption={i18n._({
-            id: 'display.theme.cell_caption',
-            message: '{theme}',
-            values: { theme: capitalize(themePreference) },
-          })}
-          icon={<SunInCloudIcon />}
-          onPress={() => {
-            themeSheetRef.current?.present();
-          }}
-        >
-          <Cell.Chevron />
-        </Cell.Root>
-        {isFeatureEnabled() && (
-          <>
-            <Cell.Root
+        <SettingsList>
+          <SettingsListItem
+            title={t({
+              id: 'display.theme.cell_title',
+              message: 'Theme',
+            })}
+            caption={i18n._({
+              id: 'display.theme.cell_caption',
+              message: '{theme}',
+              values: { theme: capitalize(themePreference) },
+            })}
+            icon={<SunInCloudIcon />}
+            onPress={() => {
+              themeSheetRef.current?.present();
+            }}
+          />
+          {isFeatureEnabled() && (
+            <>
+              <SettingsListItem
+                title={t({
+                  id: 'display.bitcoin_unit.cell_title',
+                  message: 'Bitcoin unit',
+                })}
+                caption={i18n._({
+                  id: 'display.bitcoin_unit.cell_caption',
+                  message: '{symbol}',
+                  values: { symbol: bitcoinUnitPreference.symbol },
+                })}
+                icon={<BitcoinCircleIcon />}
+                onPress={() => {
+                  bitcoinUnitSheetRef.current?.present();
+                }}
+              />
+              <SettingsListItem
+                title={t({
+                  id: 'display.conversion_unit.cell_title',
+                  message: 'Conversion unit',
+                })}
+                caption={i18n._({
+                  id: 'display.conversion_unit.cell_caption',
+                  message: '{currency}',
+                  values: { currency: fiatCurrencyPreference },
+                })}
+                icon={<DollarCircleIcon />}
+                onPress={() => {
+                  conversionUnitSheetRef.current?.present();
+                }}
+              />
+            </>
+          )}
+          <SettingsListItem
+            title={t({
+              id: 'display.account_identifier.cell_title',
+              message: 'Account identifier',
+            })}
+            caption={i18n._({
+              id: 'display.account_identifier.cell_caption',
+              message: '{name}',
+              values: { name: accountDisplayPreference.name },
+            })}
+            icon={<PackageSecurityIcon />}
+            onPress={() => {
+              accountIdentifierSheetRef.current?.present();
+            }}
+          />
+          {isFeatureEnabled() && (
+            <SettingsListItem
               title={t({
-                id: 'display.bitcoin_unit.cell_title',
-                message: 'Bitcoin unit',
+                id: 'display.privacy_mode.cell_title',
+                message: 'Hide home balance',
               })}
-              caption={i18n._({
-                id: 'display.bitcoin_unit.cell_caption',
-                message: '{symbol}',
-                values: { symbol: bitcoinUnitPreference.symbol },
+              caption={t({
+                id: 'display.privacy_mode.cell_caption',
+                message: 'Tap your balance to quickly toggle this setting',
               })}
-              icon={<BitcoinCircleIcon />}
-              onPress={() => {
-                bitcoinUnitSheetRef.current?.present();
-              }}
-            >
-              <Cell.Chevron />
-            </Cell.Root>
-            <Cell.Root
+              icon={<Eye1Icon />}
+              type="switch"
+              onSwitchValueChange={() => onUpdatePrivacyMode()}
+              switchValue={privacyModePreference === 'hidden'}
+            />
+          )}
+          {isFeatureEnabled() && (
+            <SettingsListItem
               title={t({
-                id: 'display.conversion_unit.cell_title',
-                message: 'Conversion unit',
+                id: 'display.haptics.cell_title',
+                message: 'Haptics',
               })}
-              caption={i18n._({
-                id: 'display.conversion_unit.cell_caption',
-                message: '{currency}',
-                values: { currency: fiatCurrencyPreference },
+              caption={t({
+                id: 'display.haptics.cell_caption',
+                message: 'Toggle tactile feedback for touch interactions',
               })}
-              icon={<DollarCircleIcon />}
-              onPress={() => {
-                conversionUnitSheetRef.current?.present();
-              }}
-            >
-              <Cell.Chevron />
-            </Cell.Root>
-          </>
-        )}
-
-        <Cell.Root
-          title={t({
-            id: 'display.account_identifier.cell_title',
-            message: 'Account identifier',
-          })}
-          caption={i18n._({
-            id: 'display.account_identifier.cell_caption',
-            message: '{name}',
-            values: { name: accountDisplayPreference.name },
-          })}
-          icon={<PackageSecurityIcon />}
-          onPress={() => {
-            accountIdentifierSheetRef.current?.present();
-          }}
-        >
-          <Cell.Chevron />
-        </Cell.Root>
-
-        {isFeatureEnabled() && (
-          <Cell.Root
-            title={t({
-              id: 'display.privacy_mode.cell_title',
-              message: 'Hide home balance',
-            })}
-            caption={t({
-              id: 'display.privacy_mode.cell_caption',
-              message: 'Tap your balance to quickly toggle this setting',
-            })}
-            icon={<Eye1Icon />}
-            onPress={() => onUpdatePrivacyMode()}
-          >
-            <Cell.Switch
-              onValueChange={() => onUpdatePrivacyMode()}
-              value={privacyModePreference === 'hidden'}
+              icon={<Eye1Icon />}
+              type="switch"
+              onSwitchValueChange={() => onUpdateHapticsPreference()}
+              switchValue={hapticsPreference === 'enabled'}
             />
-          </Cell.Root>
-        )}
-        <Cell.Root
-          // title={t({
-          //   id: 'display.haptics.cell_title',
-          //   message: 'Haptics',
-          // })}
-          // caption={t({
-          //   id: 'display.haptics.cell_caption',
-          //   message: 'Toggle tactile feedback for touch interactions',
-          // })}
-          // FIXME: LEA-1780 Re-enable this when Crowdin issues solved
-          // eslint-disable-next-line no-console, lingui/no-unlocalized-strings
-          title="Haptics"
-          // FIXME: LEA-1780 Re-enable this when Crowdin issues solved
-          // eslint-disable-next-line no-console, lingui/no-unlocalized-strings
-          caption="Toggle tactile feedback for touch interactions"
-          icon={<Eye1Icon />}
-          onPress={() => onUpdatePrivacyMode()}
-        >
-          <Cell.Switch
-            onValueChange={() => onUpdateHapticsPreference()}
-            value={hapticsPreference === 'enabled'}
-          />
-        </Cell.Root>
+          )}
+        </SettingsList>
       </AnimatedHeaderScreenLayout>
       <ThemeSheet sheetRef={themeSheetRef} />
       <BitcoinUnitSheet sheetRef={bitcoinUnitSheetRef} />