Animate fractionals in balance text

helium · Oct 17, 2024 · cb60753 · cb60753
1 parent 425b365
commit cb60753
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/src/components/BalanceText.tsx b/src/components/BalanceText.tsx
@@ -15,31 +15,31 @@ const BalanceText = () => {
   const integral = useMemo(() => Math.floor(amount || 0), [amount])
   const [realAmount, setAmount] = useState(amount || 0)
 
-  useEffect(() => {
-    if (!amount) return
-
-    setTimeout(() => {
-      setAmount(amount)
-    }, 3000)
-  }, [amount])
-
   const firstFractional = useMemo(() => {
-    if (amount === undefined) return 0
-    const decimal = amount - integral
+    if (realAmount === undefined) return 0
+    const decimal = realAmount - integral
     const fraction = decimal.toString().split('.')[1]
     // Fraction with max length of decimals
     const fractionWithMaxDecimals = fraction?.slice(0, 1)
     return fraction ? Number(fractionWithMaxDecimals) : 0
-  }, [amount, integral])
+  }, [realAmount, integral])
 
   const secondFractional = useMemo(() => {
-    if (amount === undefined) return 0
-    const decimal = amount - integral
+    if (realAmount === undefined) return 0
+    const decimal = realAmount - integral
     const fraction = decimal.toString().split('.')[1]
     // Fraction with max length of decimals
     const fractionWithMaxDecimals = fraction?.slice(1, 2)
     return fraction ? Number(fractionWithMaxDecimals) : 0
-  }, [amount, integral])
+  }, [realAmount, integral])
+
+  useEffect(() => {
+    if (!amount) return
+
+    setTimeout(() => {
+      setAmount(amount)
+    }, 3000)
+  }, [amount])
 
   return (
     <Box>

diff --git a/src/features/onboarding/import/ImportSubAccountsScreen.tsx b/src/features/onboarding/import/ImportSubAccountsScreen.tsx
@@ -219,6 +219,11 @@ export default () => {
 
   return (
     <ScrollBox
+      backgroundColor="primaryBackground"
+      contentContainerStyle={{
+        flex: 1,
+        backgroundColor: colors.primaryBackground,
+      }}
       refreshControl={
         <RefreshControl
           enabled
@@ -229,10 +234,10 @@ export default () => {
         />
       }
     >
-      <SafeAreaBox backgroundColor="secondaryBackground" flex={1}>
+      <SafeAreaBox backgroundColor="primaryBackground" flex={1}>
         <Box
           flex={1}
-          backgroundColor="secondaryBackground"
+          backgroundColor="primaryBackground"
           height="100%"
           paddingHorizontal="4"
         >