feat(rn): impl list setting pages

Signed-off-by: Innei <tukon479@gmail.com>

apps/mobile/package.json

@@ -23,6 +23,7 @@
     "@follow/models": "workspace:*",
     "@follow/shared": "workspace:*",
     "@follow/utils": "workspace:*",
+    "@formatjs/intl-numberformat": "8.15.2",
     "@gorhom/portal": "1.0.14",
     "@hookform/resolvers": "3.9.1",
     "@infinite-list/data-model": "2.2.10",
@@ -36,6 +37,7 @@
     "better-auth": "1.1.9-beta.1",
     "cookie-es": "^1.2.2",
     "dayjs": "1.11.13",
+    "dnum": "^2.14.0",
     "es-toolkit": "1.29.0",
     "expo": "52.0.18",
     "expo-apple-authentication": "~7.1.2",

apps/mobile/src/components/common/Balance.tsx

@@ -0,0 +1,69 @@
+import { cn, toScientificNotation } from "@follow/utils"
+import { Text } from "react-native"
+
+export const Balance = ({
+  children,
+
+  className,
+  precision = 2,
+}: {
+  /** The token balance in wei. */
+  children: bigint
+
+  className?: string
+  precision?: number
+}) => {
+  const n = BigInt(children || 0n)
+  const formatted = format(n, { digits: precision, trailingZeros: true })
+
+  return <Text className={cn("tabular-nums", className)}>{formatted}</Text>
+}
+
+function format(
+  value: bigint,
+  options:
+    | number
+    | {
+        digits?: number
+        compact?: boolean
+        trailingZeros?: boolean
+        locale?: string
+        decimalsRounding?: "ROUND_HALF" | "ROUND_UP" | "ROUND_DOWN"
+        signDisplay?: "auto" | "always" | "exceptZero" | "negative" | "never"
+      } = {},
+): string {
+  // Normalize options
+  const opts = typeof options === "number" ? { digits: options } : options
+  const {
+    digits,
+    compact = false,
+    trailingZeros = false,
+    locale = "en-US",
+
+    signDisplay = "auto",
+  } = opts
+
+  // Convert bigint to number for formatting
+  const num = Number(value) / 1e18 // Assuming 18 decimals (wei to ether conversion)
+
+  if (compact) {
+    return new Intl.NumberFormat(locale, {
+      notation: "compact",
+      maximumFractionDigits: digits,
+      minimumFractionDigits: trailingZeros ? digits : 0,
+      signDisplay,
+    }).format(num)
+  }
+
+  // For very large or small numbers, use scientific notation
+  if (Math.abs(num) > 1e9 || (Math.abs(num) < 1e-9 && num !== 0)) {
+    return toScientificNotation(num.toString(), 10)
+  }
+
+  return new Intl.NumberFormat(locale, {
+    maximumFractionDigits: digits,
+    minimumFractionDigits: trailingZeros ? digits : 0,
+    signDisplay,
+    useGrouping: true,
+  }).format(num)
+}

apps/mobile/src/components/ui/grouped/GroupedList.tsx

@@ -5,6 +5,7 @@ import { Fragment } from "react"
 import type { ViewProps } from "react-native"
 import { Pressable, StyleSheet, Text, View } from "react-native"
 
+import { MingcuteRightLine } from "@/src/icons/mingcute_right_line"
 import { RightCuteReIcon } from "@/src/icons/right_cute_re"
 import { useColor } from "@/src/theme/colors"
 
@@ -91,7 +92,7 @@ export const GroupedInsetListNavigationLink: FC<{
               <Text className={"text-label text-[16px]"}>{label}</Text>
             </View>
             <View className="-mr-2 ml-4">
-              <RightCuteReIcon height={18} width={18} color={rightIconColor} />
+              <MingcuteRightLine height={18} width={18} color={rightIconColor} />
             </View>
           </View>
         </GroupedInsetListBaseCell>
@@ -160,3 +161,29 @@ export const GroupedInsetListActionCell: FC<{
     </Pressable>
   )
 }
+
+export const GroupedInformationCell: FC<{
+  title: string
+  description?: string
+  icon?: React.ReactNode
+  iconBackgroundColor?: string
+}> = ({ title, description, icon, iconBackgroundColor }) => {
+  return (
+    <GroupedInsetListBaseCell className="flex-1 flex-col items-center justify-center rounded-[16px] p-6">
+      {icon && (
+        <View
+          className="mb-3 size-[64px] items-center justify-center rounded-xl p-1"
+          style={{ backgroundColor: iconBackgroundColor }}
+        >
+          {icon}
+        </View>
+      )}
+      <Text className="text-3xl font-bold">{title}</Text>
+      {!!description && (
+        <Text className="text-label mt-3 text-balance text-center text-base leading-tight">
+          {description}
+        </Text>
+      )}
+    </GroupedInsetListBaseCell>
+  )
+}

apps/mobile/src/components/ui/loading/index.tsx

@@ -20,7 +20,7 @@ export const LoadingIndicator: FC<
     color?: string
     className?: string
   } & PropsWithChildren
-> = ({ size = 60, color, children, className }) => {
+> = ({ size = 36, color, children, className }) => {
   const rotateValue = useSharedValue(0)
 
   const rotation = useDerivedValue(() => {

apps/mobile/src/icons/user_add_2_cute_fi.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface UserAdd2CuteFiIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const UserAdd2CuteFiIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: UserAdd2CuteFiIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+      <Path
+        fill={color}
+        d="M6 7a5 5 0 1 1 10 0A5 5 0 0 1 6 7M4.822 14.672C6.425 13.694 8.605 13 11 13c.447 0 .887.024 1.316.07a1 1 0 0 1 .72 1.557A5.968 5.968 0 0 0 12 18c0 .92.207 1.79.575 2.567a1 1 0 0 1-.89 1.428c-.226.003-.455.005-.685.005-2.229 0-4.335-.14-5.913-.558-.785-.208-1.524-.506-2.084-.956C2.41 20.01 2 19.345 2 18.5c0-.787.358-1.523.844-2.139.494-.625 1.177-1.2 1.978-1.69M18 14a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1"
+      />
+    </Svg>
+  )
+}

apps/mobile/src/icons/wallet_2_cute_fi.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface Wallet2CuteFiIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const Wallet2CuteFiIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: Wallet2CuteFiIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M9.06 4.647a.31.31 0 0 0-.06.069c0 .01.008.086.137.231.14.157.375.335.702.504.66.342 1.503.549 2.161.549.658 0 1.502-.207 2.161-.549.327-.169.561-.347.702-.504.129-.145.136-.22.137-.231a.309.309 0 0 0-.06-.069c-.106-.094-.31-.213-.639-.325C13.647 4.102 12.765 4 12 4c-.765 0-1.647.101-2.301.322-.33.112-.533.23-.638.325m6.63 2.214c.242-.17.469-.363.663-.58.353-.395.647-.925.647-1.567 0-.666-.317-1.188-.723-1.553-.386-.348-.872-.577-1.336-.733C14.01 2.113 12.892 2 12 2c-.892 0-2.01.113-2.941.428-.464.156-.95.385-1.336.733C7.317 3.526 7 4.048 7 4.714c0 .642.294 1.172.647 1.566.194.218.42.411.663.581C5.325 8.284 3 11.335 3 15c0 2.556 1.02 4.386 2.766 5.525C7.441 21.617 9.67 22 12 22s4.56-.383 6.234-1.475C19.98 19.386 21 17.555 21 15c0-3.665-2.325-6.716-5.31-8.139m-4.296 4.192a1 1 0 1 0-1.788.894L10.132 13H10a1 1 0 1 0 0 2h1v.5h-1a1 1 0 1 0 0 2h1v.5a1 1 0 1 0 2 0v-.5h1a1 1 0 1 0 0-2h-1V15h1a1 1 0 1 0 0-2h-.132l.526-1.053a1 1 0 1 0-1.788-.894L12 12.263z"
+        clipRule="evenodd"
+      />
+    </Svg>
+  )
+}

apps/mobile/src/modules/discover/search-tabs/hooks.tsx

@@ -15,7 +15,7 @@ export const useDataSkeleton = (isLoading: boolean, data: any) => {
       return (
         <BaseSearchPageRootView className="items-center justify-center">
           <View className="-mt-72" />
-          <LoadingIndicator color={withOpacity(textColor, 0.7)} size={32} />
+          <LoadingIndicator color={withOpacity(textColor, 0.7)} />
         </BaseSearchPageRootView>
       )
     }

apps/mobile/src/modules/feed-drawer/feed-panel.tsx

@@ -210,7 +210,7 @@ const SubscriptionItem = memo(({ id, className }: { id: string; className?: stri
   if (isLoading) {
     return (
       <View className="mt-24 flex-1 flex-row items-start justify-center">
-        <LoadingIndicator size={36} />
+        <LoadingIndicator />
       </View>
     )
   }

apps/mobile/src/modules/feed/FollowFeed.tsx

@@ -40,7 +40,7 @@ export function FollowFeed(props: { id: string }) {
   if (isLoading) {
     return (
       <View className="mt-24 flex-1 flex-row items-start justify-center">
-        <LoadingIndicator size={36} />
+        <LoadingIndicator />
       </View>
     )
   }

apps/mobile/src/modules/list/FollowList.tsx

@@ -38,7 +38,7 @@ export const FollowList = (props: { id: string }) => {
   if (isLoading) {
     return (
       <View className="mt-24 flex-1 flex-row items-start justify-center">
-        <LoadingIndicator size={36} />
+        <LoadingIndicator />
       </View>
     )
   }

apps/mobile/src/modules/settings/SettingsList.tsx

@@ -60,6 +60,7 @@ const UserGroupNavigationLinks: GroupNavigationLink[] = [
       navigation.navigate("Achievement")
     },
     iconBackgroundColor: "#6366F1",
+    todo: true,
   },
 ]
 
@@ -107,6 +108,7 @@ const DataGroupNavigationLinks: GroupNavigationLink[] = [
       navigation.navigate("Actions")
     },
     iconBackgroundColor: "#059669",
+    todo: true,
   },
 
   {
@@ -116,6 +118,7 @@ const DataGroupNavigationLinks: GroupNavigationLink[] = [
       navigation.navigate("Feeds")
     },
     iconBackgroundColor: "#10B981",
+    todo: true,
   },
   {
     label: "Lists",
@@ -124,6 +127,7 @@ const DataGroupNavigationLinks: GroupNavigationLink[] = [
       navigation.navigate("Lists")
     },
     iconBackgroundColor: "#34D399",
+    // todo: true,
   },
 ]