feat: home screen transaction filter

__tests__/screens/transaction-history-screen.spec.tsx

@@ -7,8 +7,10 @@ import { TransactionHistoryScreen } from "@app/screens/transaction-history"
 
 import { ContextForScreen } from "./helper"
 
-const mockRoute: RouteProp<RootStackParamList, "transactionHistory"> = {
-  key: "transactionHistory-test",
+const mockRouteWithCurrencyFilter = (
+  currency?: "BTC" | "USD",
+): RouteProp<RootStackParamList, "transactionHistory"> => ({
+  key: `transactionHistory-test`,
   name: "transactionHistory",
   params: {
     wallets: [
@@ -21,16 +23,17 @@ const mockRoute: RouteProp<RootStackParamList, "transactionHistory"> = {
         walletCurrency: "USD",
       },
     ],
+    ...(currency ? { currencyFilter: currency } : {}),
   },
-}
+})
 
 describe("TransactionHistoryScreen", () => {
   afterEach(cleanup)
 
   it("shows all transactions by default", async () => {
     const { findByTestId } = render(
       <ContextForScreen>
-        <TransactionHistoryScreen route={mockRoute} />
+        <TransactionHistoryScreen route={mockRouteWithCurrencyFilter()} />
       </ContextForScreen>,
     )
 
@@ -40,7 +43,7 @@ describe("TransactionHistoryScreen", () => {
   it("filters only BTC transactions", async () => {
     const screen = render(
       <ContextForScreen>
-        <TransactionHistoryScreen route={mockRoute} />
+        <TransactionHistoryScreen route={mockRouteWithCurrencyFilter()} />
       </ContextForScreen>,
     )
 
@@ -60,4 +63,19 @@ describe("TransactionHistoryScreen", () => {
       expect(screen.queryByText("user_usd")).toBeNull()
     })
   })
+
+  it("filters only BTC by route param", async () => {
+    const screen = render(
+      <ContextForScreen>
+        <TransactionHistoryScreen route={mockRouteWithCurrencyFilter("BTC")} />
+      </ContextForScreen>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByTestId("transaction-by-index-0")).toBeTruthy()
+    })
+
+    expect(screen.queryByText("user_btc")).toBeTruthy()
+    expect(screen.queryByText("user_usd")).toBeNull()
+  })
 })

app/components/animations/bounce-in-animation.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useRef, useState } from "react"
+import {
+  withSequence,
+  withTiming,
+  withSpring,
+  Easing,
+  type SharedValue,
+} from "react-native-reanimated"
+
+export const bounceInAnimation = ({
+  scale,
+  duration,
+}: {
+  scale: SharedValue<number>
+  duration: number
+}) => {
+  scale.value = 0.88
+  scale.value = withSequence(
+    withTiming(1.22, { duration, easing: Easing.out(Easing.quad) }),
+    withSpring(1, { damping: 12, stiffness: 200 }),
+  )
+}
+
+export const useBounceInAnimation = ({
+  isFocused,
+  visible,
+  scale,
+  delay,
+  duration,
+}: {
+  isFocused: boolean
+  visible: boolean
+  scale: SharedValue<number>
+  delay: number
+  duration: number
+}) => {
+  const [rendered, setRendered] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const prevFocused = useRef(false)
+  const prevVisible = useRef(false)
+
+  useEffect(() => {
+    const screenJustFocused = !prevFocused.current && isFocused
+    const visibilityJustEnabled = !prevVisible.current && visible
+    const shouldStartBounce =
+      isFocused && visible && (screenJustFocused || visibilityJustEnabled)
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+
+    if (!isFocused || !visible) {
+      setRendered(false)
+      scale.value = 1
+    }
+
+    if (shouldStartBounce) {
+      setRendered(false)
+      timerRef.current = setTimeout(() => {
+        setRendered(true)
+        bounceInAnimation({ scale, duration })
+      }, delay)
+    }
+
+    prevFocused.current = isFocused
+    prevVisible.current = visible
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [delay, duration, isFocused, scale, visible])
+
+  return rendered
+}

app/components/animations/drop-in-animation.ts

@@ -0,0 +1,84 @@
+import { useEffect, useRef } from "react"
+import { Animated, Easing } from "react-native"
+
+type DropInAnimationParams = {
+  visible?: boolean
+  delay?: number
+  distance?: number
+  durationIn?: number
+  overshoot?: number
+  springStiffness?: number
+  springDamping?: number
+  springVelocity?: number
+}
+
+export const useDropInAnimation = ({
+  visible = true,
+  delay = 0,
+  distance = 56,
+  durationIn = 180,
+  overshoot = 5,
+  springStiffness = 200,
+  springDamping = 18,
+  springVelocity = 0.4,
+}: DropInAnimationParams = {}) => {
+  const opacity = useRef(new Animated.Value(0)).current
+  const translateY = useRef(new Animated.Value(-distance)).current
+
+  useEffect(() => {
+    opacity.stopAnimation()
+    translateY.stopAnimation()
+
+    if (!visible) {
+      opacity.setValue(0)
+      translateY.setValue(-distance)
+      return
+    }
+
+    opacity.setValue(0)
+    translateY.setValue(-distance)
+
+    const anim = Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: Math.round(durationIn * 0.8),
+        delay,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.sequence([
+        Animated.timing(translateY, {
+          toValue: overshoot,
+          duration: durationIn,
+          delay,
+          easing: Easing.in(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.spring(translateY, {
+          toValue: 0,
+          stiffness: springStiffness,
+          damping: springDamping,
+          mass: 0.6,
+          velocity: springVelocity,
+          useNativeDriver: true,
+        }),
+      ]),
+    ])
+
+    anim.start()
+    return () => anim.stop()
+  }, [
+    visible,
+    delay,
+    distance,
+    durationIn,
+    overshoot,
+    springStiffness,
+    springDamping,
+    springVelocity,
+    opacity,
+    translateY,
+  ])
+
+  return { opacity, translateY }
+}

app/components/animations/index.ts

@@ -0,0 +1,2 @@
+export * from "./bounce-in-animation"
+export * from "./drop-in-animation"

app/components/atomic/galoy-currency-bubble-text/galoy-currency-bubble-text.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+
+import { WalletCurrency } from "@app/graphql/generated"
+
+import { GaloyCurrencyBubbleText } from "./galoy-currency-bubble-text"
+import { Story, UseCase } from "../../../../.storybook/views"
+
+const UseCaseWrapper = ({ children, text, style }) => (
+  <UseCase style={style} text={text}>
+    {children}
+  </UseCase>
+)
+
+const styles = {
+  wrapper: { flexDirection: "row", gap: 12 },
+}
+
+export default {
+  title: "Galoy Currency Bubble",
+  component: GaloyCurrencyBubbleText,
+}
+
+export const Default = () => (
+  <Story>
+    <UseCaseWrapper style={styles.wrapper} text="Text Size: p2 (medium)">
+      <GaloyCurrencyBubbleText textSize="p2" currency={WalletCurrency.Btc} />
+      <GaloyCurrencyBubbleText textSize="p2" currency={WalletCurrency.Usd} />
+    </UseCaseWrapper>
+    <UseCaseWrapper style={styles.wrapper} text="Text Size: p1 (large)">
+      <GaloyCurrencyBubbleText textSize="p1" currency={WalletCurrency.Btc} />
+      <GaloyCurrencyBubbleText textSize="p1" currency={WalletCurrency.Usd} />
+    </UseCaseWrapper>
+  </Story>
+)