diff --git a/.github/workflows/create-release-pr-v2.yml b/.github/workflows/create-release-pr-v2.yml
index 284fa6752d8..0498d5175c8 100644
--- a/.github/workflows/create-release-pr-v2.yml
+++ b/.github/workflows/create-release-pr-v2.yml
@@ -20,7 +20,7 @@ jobs:
 
   create-release-pr:
     needs: generate-build-version
-    uses: MetaMask/github-tools/.github/workflows/create-release-pr.yml@f8467f14f7d09c5b980565f15ebc8003b0272138
+    uses: MetaMask/github-tools/.github/workflows/create-release-pr.yml@4f594ca7d90378da66b7efce987eff379934524b
     with:
       platform: mobile
       base-branch: ${{ inputs.base-branch }}
diff --git a/app/components/UI/Stake/__mocks__/mockData.ts b/app/components/UI/Stake/__mocks__/mockData.ts
index f0fcabbca3d..8cc42489a85 100644
--- a/app/components/UI/Stake/__mocks__/mockData.ts
+++ b/app/components/UI/Stake/__mocks__/mockData.ts
@@ -130,6 +130,8 @@ export const MOCK_STAKING_API_SERVICE: Partial<StakingApiService> = {
   getPooledStakes: jest.fn(),
   getVaultData: jest.fn(),
   getPooledStakingEligibility: jest.fn(),
+  getVaultDailyApys: jest.fn(),
+  getVaultApyAverages: jest.fn(),
   baseUrl: 'https://staking.api.com',
 };
 
@@ -151,7 +153,6 @@ const MOCK_POOLED_STAKING_CONTRACT_SERVICE = {
 
 export const MOCK_POOL_STAKING_SDK: Stake = {
   stakingContract: MOCK_POOLED_STAKING_CONTRACT_SERVICE,
-  stakingApiService: MOCK_STAKING_API_SERVICE as StakingApiService,
   sdkType: StakingType.POOLED,
   setSdkType: jest.fn(),
 };
diff --git a/app/components/UI/Stake/components/EarnTokenListItem/__snapshots__/EarnTokenListItem.test.tsx.snap b/app/components/UI/Stake/components/EarnTokenListItem/__snapshots__/EarnTokenListItem.test.tsx.snap
index c23dc7fe98c..d9a0bc8a542 100644
--- a/app/components/UI/Stake/components/EarnTokenListItem/__snapshots__/EarnTokenListItem.test.tsx.snap
+++ b/app/components/UI/Stake/components/EarnTokenListItem/__snapshots__/EarnTokenListItem.test.tsx.snap
@@ -178,7 +178,7 @@ exports[`EarnTokenListItem render matches snapshot 1`] = `
         }
       }
     >
-      3.0% [missing "en.stake.apr" translation]
+      3.0% APR
     </Text>
     <Text
       accessibilityRole="text"
diff --git a/app/components/UI/Stake/components/LearnMoreModal/LearnMoreModal.styles.ts b/app/components/UI/Stake/components/LearnMoreModal/LearnMoreModal.styles.ts
deleted file mode 100644
index bb2ca5c6278..00000000000
--- a/app/components/UI/Stake/components/LearnMoreModal/LearnMoreModal.styles.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-const createLearnMoreModalStyles = () =>
-  StyleSheet.create({
-    container: {
-      paddingHorizontal: 24,
-      paddingTop: 24,
-    },
-    imageContainer: {
-      alignItems: 'center',
-      paddingBottom: 16,
-    },
-    bannerImage: {
-      width: '100%',
-      height: 200,
-      borderRadius: 12,
-    },
-    textContainer: {
-      paddingVertical: 8,
-    },
-    buttonContainer: {
-      flexDirection: 'row',
-      gap: 16,
-      paddingHorizontal: 16,
-      paddingTop: 16,
-    },
-    button: {
-      flex: 1,
-    },
-    italicText: {
-      fontStyle: 'italic',
-    },
-  });
-
-export default createLearnMoreModalStyles;
diff --git a/app/components/UI/Stake/components/LearnMoreModal/LearnMoreModal.test.tsx b/app/components/UI/Stake/components/LearnMoreModal/LearnMoreModal.test.tsx
deleted file mode 100644
index e290bea31e5..00000000000
--- a/app/components/UI/Stake/components/LearnMoreModal/LearnMoreModal.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react-native';
-import LearnMoreModal from '.';
-import { POOLED_STAKING_FAQ_URL } from '../../constants';
-import Routes from '../../../../../constants/navigation/Routes';
-import { renderScreen } from '../../../../../util/test/renderWithProvider';
-import { strings } from '../../../../../../locales/i18n';
-
-const renderLearnMoreModal = () =>
-  renderScreen(LearnMoreModal, { name: Routes.STAKING.MODALS.LEARN_MORE });
-
-const mockNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  const actualReactNavigation = jest.requireActual('@react-navigation/native');
-  return {
-    ...actualReactNavigation,
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
-describe('LearnMoreModal', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('render matches snapshot', () => {
-    const { toJSON } = renderLearnMoreModal();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('navigates to FAQ page when "Learn More" button is pressed', () => {
-    renderLearnMoreModal();
-    // Simulate pressing the "Learn More" button
-    fireEvent.press(screen.getByText(strings('stake.learn_more')));
-
-    // Assert that navigate is called with the correct parameters
-    expect(mockNavigate).toHaveBeenCalledWith('Webview', {
-      screen: 'SimpleWebview',
-      params: { url: POOLED_STAKING_FAQ_URL },
-    });
-  });
-});
diff --git a/app/components/UI/Stake/components/LearnMoreModal/__snapshots__/LearnMoreModal.test.tsx.snap b/app/components/UI/Stake/components/LearnMoreModal/__snapshots__/LearnMoreModal.test.tsx.snap
deleted file mode 100644
index 283a6ed9dc9..00000000000
--- a/app/components/UI/Stake/components/LearnMoreModal/__snapshots__/LearnMoreModal.test.tsx.snap
+++ /dev/null
@@ -1,722 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LearnMoreModal render matches snapshot 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "rgb(255, 255, 255)",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                LearnMore
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <RNSScreenContainer
-      onLayout={[Function]}
-      style={
-        {
-          "flex": 1,
-        }
-      }
-    >
-      <RNSScreen
-        activityState={2}
-        collapsable={false}
-        gestureResponseDistance={
-          {
-            "bottom": -1,
-            "end": -1,
-            "start": -1,
-            "top": -1,
-          }
-        }
-        pointerEvents="box-none"
-        style={
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            [
-              {
-                "overflow": undefined,
-              },
-              {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            {
-              "close": {
-                "animation": "spring",
-                "config": {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": {
-                "animation": "spring",
-                "config": {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                {
-                  "flex": 1,
-                  "transform": [
-                    {
-                      "translateX": 0,
-                    },
-                    {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  {
-                    "backgroundColor": "rgb(242, 242, 242)",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  [
-                    {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    [
-                      {
-                        "backgroundColor": "rgb(242, 242, 242)",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      onLayout={[Function]}
-                      style={
-                        [
-                          {
-                            "bottom": 0,
-                            "justifyContent": "flex-end",
-                            "left": 0,
-                            "position": "absolute",
-                            "right": 0,
-                            "top": 0,
-                          },
-                          {
-                            "paddingBottom": 0,
-                          },
-                        ]
-                      }
-                    >
-                      <View
-                        style={
-                          [
-                            {
-                              "backgroundColor": "#00000099",
-                              "bottom": 0,
-                              "left": 0,
-                              "position": "absolute",
-                              "right": 0,
-                              "top": 0,
-                            },
-                            {
-                              "opacity": 0,
-                            },
-                          ]
-                        }
-                      >
-                        <TouchableOpacity
-                          onPress={[Function]}
-                          style={
-                            {
-                              "flex": 1,
-                            }
-                          }
-                        />
-                      </View>
-                      <View
-                        onLayout={[Function]}
-                        style={
-                          [
-                            {
-                              "bottom": 0,
-                              "left": 0,
-                              "position": "absolute",
-                              "right": 0,
-                            },
-                            {
-                              "paddingBottom": 0,
-                            },
-                          ]
-                        }
-                      >
-                        <View
-                          collapsable={false}
-                          onGestureHandlerEvent={[Function]}
-                          onGestureHandlerStateChange={[Function]}
-                          onLayout={[Function]}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "#ffffff",
-                                "borderColor": "#BBC0C566",
-                                "borderTopLeftRadius": 8,
-                                "borderTopRightRadius": 8,
-                                "borderWidth": 1,
-                                "maxHeight": 1314,
-                                "overflow": "hidden",
-                                "paddingBottom": 0,
-                                "shadowColor": "#0000001A",
-                                "shadowOffset": {
-                                  "height": 2,
-                                  "width": 0,
-                                },
-                                "shadowOpacity": 1,
-                                "shadowRadius": 40,
-                              },
-                              {
-                                "transform": [
-                                  {
-                                    "translateY": 1334,
-                                  },
-                                ],
-                              },
-                            ]
-                          }
-                        >
-                          <View
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "stretch",
-                                "padding": 4,
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                {
-                                  "backgroundColor": "#BBC0C566",
-                                  "borderRadius": 2,
-                                  "height": 4,
-                                  "width": 40,
-                                }
-                              }
-                            />
-                          </View>
-                          <View
-                            style={
-                              {
-                                "paddingHorizontal": 24,
-                                "paddingTop": 24,
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "paddingBottom": 16,
-                                }
-                              }
-                            >
-                              <Image
-                                source={1}
-                                style={
-                                  {
-                                    "borderRadius": 12,
-                                    "height": 200,
-                                    "width": "100%",
-                                  }
-                                }
-                              />
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "paddingVertical": 8,
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityRole="text"
-                                style={
-                                  {
-                                    "color": "#141618",
-                                    "fontFamily": "EuclidCircularB-Bold",
-                                    "fontSize": 24,
-                                    "fontWeight": "700",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 32,
-                                  }
-                                }
-                              >
-                                Stake ETH and earn
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "paddingVertical": 8,
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityRole="text"
-                                style={
-                                  {
-                                    "color": "#141618",
-                                    "fontFamily": "EuclidCircularB-Medium",
-                                    "fontSize": 14,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 22,
-                                  }
-                                }
-                              >
-                                Stake any amount of ETH
-                              </Text>
-                              <Text
-                                accessibilityRole="text"
-                                style={
-                                  {
-                                    "color": "#6a737d",
-                                    "fontFamily": "EuclidCircularB-Regular",
-                                    "fontSize": 14,
-                                    "fontWeight": "400",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 22,
-                                  }
-                                }
-                              >
-                                No minimum required.
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "paddingVertical": 8,
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityRole="text"
-                                style={
-                                  {
-                                    "color": "#141618",
-                                    "fontFamily": "EuclidCircularB-Medium",
-                                    "fontSize": 14,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 22,
-                                  }
-                                }
-                              >
-                                Earn ETH rewards
-                              </Text>
-                              <Text
-                                accessibilityRole="text"
-                                style={
-                                  {
-                                    "color": "#6a737d",
-                                    "fontFamily": "EuclidCircularB-Regular",
-                                    "fontSize": 14,
-                                    "fontWeight": "400",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 22,
-                                  }
-                                }
-                              >
-                                Start earning as soon as you stake. Rewards compound automatically.
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "paddingVertical": 8,
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityRole="text"
-                                style={
-                                  {
-                                    "color": "#141618",
-                                    "fontFamily": "EuclidCircularB-Medium",
-                                    "fontSize": 14,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 22,
-                                  }
-                                }
-                              >
-                                Flexible unstaking
-                              </Text>
-                              <Text
-                                accessibilityRole="text"
-                                style={
-                                  {
-                                    "color": "#6a737d",
-                                    "fontFamily": "EuclidCircularB-Regular",
-                                    "fontSize": 14,
-                                    "fontWeight": "400",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 22,
-                                  }
-                                }
-                              >
-                                Unstake anytime. Typically takes less than 3 days, but can take up to 11 days to process.
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "paddingVertical": 8,
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityRole="text"
-                                style={
-                                  {
-                                    "color": "#6a737d",
-                                    "fontFamily": "EuclidCircularB-RegularItalic",
-                                    "fontSize": 12,
-                                    "fontStyle": "italic",
-                                    "fontWeight": "400",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 20,
-                                  }
-                                }
-                              >
-                                Staking does not guarantee rewards, and involves risks including a loss of funds.
-                              </Text>
-                            </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "flexDirection": "row",
-                                "gap": 16,
-                                "paddingHorizontal": 16,
-                                "paddingTop": 16,
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                {
-                                  "flex": 1,
-                                }
-                              }
-                            >
-                              <TouchableOpacity
-                                accessibilityRole="button"
-                                accessible={true}
-                                activeOpacity={1}
-                                onPress={[Function]}
-                                onPressIn={[Function]}
-                                onPressOut={[Function]}
-                                style={
-                                  {
-                                    "alignItems": "center",
-                                    "alignSelf": "stretch",
-                                    "backgroundColor": "transparent",
-                                    "borderColor": "#0376c9",
-                                    "borderRadius": 24,
-                                    "borderWidth": 1,
-                                    "flexDirection": "row",
-                                    "height": 48,
-                                    "justifyContent": "center",
-                                    "paddingHorizontal": 16,
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#0376c9",
-                                      "fontFamily": "EuclidCircularB-Medium",
-                                      "fontSize": 14,
-                                      "fontWeight": "500",
-                                      "letterSpacing": 0,
-                                      "lineHeight": 22,
-                                    }
-                                  }
-                                >
-                                  Learn more
-                                </Text>
-                              </TouchableOpacity>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "flex": 1,
-                                }
-                              }
-                            >
-                              <TouchableOpacity
-                                accessibilityRole="button"
-                                accessible={true}
-                                activeOpacity={1}
-                                onPress={[Function]}
-                                onPressIn={[Function]}
-                                onPressOut={[Function]}
-                                style={
-                                  {
-                                    "alignItems": "center",
-                                    "alignSelf": "stretch",
-                                    "backgroundColor": "#0376c9",
-                                    "borderRadius": 24,
-                                    "flexDirection": "row",
-                                    "height": 48,
-                                    "justifyContent": "center",
-                                    "paddingHorizontal": 16,
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#ffffff",
-                                      "fontFamily": "EuclidCircularB-Medium",
-                                      "fontSize": 14,
-                                      "fontWeight": "500",
-                                      "letterSpacing": 0,
-                                      "lineHeight": 22,
-                                    }
-                                  }
-                                >
-                                  Got it
-                                </Text>
-                              </TouchableOpacity>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RNSScreen>
-    </RNSScreenContainer>
-  </RNCSafeAreaProvider>
-</View>
-`;
diff --git a/app/components/UI/Stake/components/LearnMoreModal/index.tsx b/app/components/UI/Stake/components/LearnMoreModal/index.tsx
deleted file mode 100644
index 5d6d4b6677d..00000000000
--- a/app/components/UI/Stake/components/LearnMoreModal/index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { useRef } from 'react';
-import { View, Image } from 'react-native';
-import BottomSheet, {
-  type BottomSheetRef,
-} from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
-import LearnMoreImage from '../images/LearnMoreEthBanner.png';
-import Button, {
-  ButtonSize,
-  ButtonVariants,
-  ButtonWidthTypes,
-} from '../../../../../component-library/components/Buttons/Button';
-import { useNavigation } from '@react-navigation/native';
-import { strings } from '../../../../../../locales/i18n';
-import { POOLED_STAKING_FAQ_URL } from '../../constants';
-import createLearnMoreModalStyles from './LearnMoreModal.styles';
-import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
-import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
-import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
-
-const styles = createLearnMoreModalStyles();
-
-const ModalTextBlock = ({
-  heading,
-  body,
-  bodyColor = TextColor.Alternative,
-}: {
-  heading: string;
-  body: string;
-  bodyColor?: TextColor;
-}) => (
-  <View style={styles.textContainer}>
-    <Text variant={TextVariant.BodyMDMedium}>{heading}</Text>
-    <Text variant={TextVariant.BodyMD} color={bodyColor}>
-      {body}
-    </Text>
-  </View>
-);
-
-const LearnMoreModal = () => {
-  const sheetRef = useRef<BottomSheetRef>(null);
-
-  const navigation = useNavigation();
-
-  const handleClose = () => {
-    sheetRef.current?.onCloseBottomSheet();
-  };
-
-  const handleLearnMoreBrowserRedirect = () => {
-    // Take to the faq page
-    navigation.navigate('Webview', {
-      screen: 'SimpleWebview',
-      params: {
-        url: POOLED_STAKING_FAQ_URL,
-      },
-    });
-  };
-
-  return (
-    <BottomSheet ref={sheetRef}>
-      <View style={styles.container}>
-        <View style={styles.imageContainer}>
-          <Image source={LearnMoreImage} style={styles.bannerImage} />
-        </View>
-
-        <View style={styles.textContainer}>
-          <Text variant={TextVariant.HeadingLG}>
-            {strings('stake.stake_eth_and_earn')}
-          </Text>
-        </View>
-
-        <ModalTextBlock
-          heading={strings('stake.stake_any_amount_of_eth')}
-          body={strings('stake.no_minimum_required')}
-        />
-        <ModalTextBlock
-          heading={strings('stake.earn_eth_rewards')}
-          body={strings('stake.earn_eth_rewards_description')}
-        />
-        <ModalTextBlock
-          heading={strings('stake.flexible_unstaking')}
-          body={strings('stake.flexible_unstaking_description')}
-        />
-        <View style={styles.textContainer}>
-          <Text
-            variant={TextVariant.BodySM}
-            color={TextColor.Alternative}
-            style={styles.italicText}
-          >
-            {strings('stake.disclaimer')}
-          </Text>
-        </View>
-      </View>
-      <View style={styles.buttonContainer}>
-        <View style={styles.button}>
-          <Button
-            onPress={withMetaMetrics(handleLearnMoreBrowserRedirect, {
-              event: MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED,
-              properties: {
-                selected_provider: EVENT_PROVIDERS.CONSENSYS,
-                text: 'Learn More',
-                location: EVENT_LOCATIONS.LEARN_MORE_MODAL,
-              },
-            })}
-            label={strings('stake.learn_more')}
-            variant={ButtonVariants.Secondary}
-            width={ButtonWidthTypes.Full}
-            size={ButtonSize.Lg}
-          />
-        </View>
-        <View style={styles.button}>
-          <Button
-            onPress={handleClose}
-            label={strings('stake.got_it')}
-            variant={ButtonVariants.Primary}
-            width={ButtonWidthTypes.Full}
-            size={ButtonSize.Lg}
-          />
-        </View>
-      </View>
-    </BottomSheet>
-  );
-};
-
-export default LearnMoreModal;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.styles.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.styles.ts
new file mode 100644
index 00000000000..205866f0c70
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.styles.ts
@@ -0,0 +1,47 @@
+import type { Theme } from '@metamask/design-tokens';
+import { StyleSheet } from 'react-native';
+
+const styleSheet = (params: {
+  theme: Theme;
+  vars: { isSelected: boolean };
+}) => {
+  const { theme, vars } = params;
+  const { isSelected } = vars;
+  const { colors } = theme;
+
+  const baseStyles = StyleSheet.create({
+    chartTimespanButton: {
+      borderRadius: 32,
+      paddingHorizontal: 16,
+      paddingVertical: 7,
+      height: 36,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: isSelected
+        ? colors.background.muted
+        : colors.background.default,
+    },
+  });
+
+  return StyleSheet.create({
+    chartTimespanButtonGroup: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginTop: 24,
+      paddingBottom: 16,
+      flexWrap: 'wrap',
+      gap: 12,
+    },
+    chartTimespanButtonGroupSkeleton: {
+      flexDirection: 'row',
+      gap: 12,
+    },
+    chartTimespanButton: baseStyles.chartTimespanButton,
+    chartTimespanButtonSkeleton: {
+      ...baseStyles.chartTimespanButton,
+      minWidth: 49,
+    },
+  });
+};
+
+export default styleSheet;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.test.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.test.tsx
new file mode 100644
index 00000000000..ec4959c879d
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+import ChartTimespanButtonGroup, { ChartTimespanButtonGroupProps } from '.';
+import { CHART_BUTTONS } from '../InteractiveTimespanChart.constants';
+import { noop } from 'lodash';
+import { strings } from '../../../../../../../../locales/i18n';
+import { act, fireEvent } from '@testing-library/react-native';
+
+describe('ChartTimespanButtonGroup', () => {
+  it('render matches snapshot', () => {
+    const props: ChartTimespanButtonGroupProps = {
+      buttons: CHART_BUTTONS,
+      onPress: noop,
+    };
+
+    const { toJSON } = renderWithProvider(
+      <ChartTimespanButtonGroup {...props} />,
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('updates active timespan button onPress', async () => {
+    const props: ChartTimespanButtonGroupProps = {
+      buttons: CHART_BUTTONS,
+      onPress: noop,
+    };
+
+    const { getByText } = renderWithProvider(
+      <ChartTimespanButtonGroup {...props} />,
+    );
+
+    const oneMonthButton = getByText(
+      strings('stake.interactive_chart.timespan_buttons.1M'),
+      // Component hierarchy: ChartTimespanButton < Text < Text < RCTText
+    )?.parent?.parent?.parent;
+
+    const INACTIVE_COLOR = '#ffffff';
+    const ACTIVE_COLOR = '#f2f4f6';
+
+    // Inactive before press
+    expect(oneMonthButton.props.style.backgroundColor).toBe(INACTIVE_COLOR);
+
+    await act(() => {
+      fireEvent.press(oneMonthButton);
+    });
+
+    // Active after press
+    expect(oneMonthButton.props.style.backgroundColor).toBe(ACTIVE_COLOR);
+  });
+});
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.types.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.types.ts
new file mode 100644
index 00000000000..bc4a03f865b
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.types.ts
@@ -0,0 +1,4 @@
+export interface ChartButton {
+  label: string;
+  value: number;
+}
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/__snapshots__/ChartTimespanButtonGroup.test.tsx.snap b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/__snapshots__/ChartTimespanButtonGroup.test.tsx.snap
new file mode 100644
index 00000000000..f628d40ee23
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/__snapshots__/ChartTimespanButtonGroup.test.tsx.snap
@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChartTimespanButtonGroup render matches snapshot 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "gap": 12,
+      "justifyContent": "center",
+      "marginTop": 24,
+      "paddingBottom": 16,
+    }
+  }
+>
+  <TouchableOpacity
+    onPress={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#f2f4f6",
+        "borderRadius": 32,
+        "height": 36,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 7,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      7D
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 32,
+        "height": 36,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 7,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      1M
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 32,
+        "height": 36,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 7,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      3M
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 32,
+        "height": 36,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 7,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      6M
+    </Text>
+  </TouchableOpacity>
+</View>
+`;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/index.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/index.tsx
new file mode 100644
index 00000000000..8a14740a97d
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/index.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../../hooks/useStyles';
+import styleSheet from './ChartTimespanButtonGroup.styles';
+import { ChartButton } from './ChartTimespanButtonGroup.types';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+
+interface ChartTimespanButtonProps {
+  onPress: () => void;
+  label: string;
+  isSelected: boolean;
+}
+const ChartTimespanButton = ({
+  onPress,
+  label,
+  isSelected = false,
+}: ChartTimespanButtonProps) => {
+  const { styles } = useStyles(styleSheet, { isSelected });
+
+  return (
+    <TouchableOpacity style={styles.chartTimespanButton} onPress={onPress}>
+      <Text variant={TextVariant.BodyMDMedium} color={TextColor.Alternative}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export interface ChartTimespanButtonGroupProps {
+  buttons: ChartButton[];
+  onPress: (numDaysToDisplay: number) => void;
+  isLoading?: boolean;
+}
+
+const ChartTimespanButtonGroup = ({
+  buttons,
+  onPress,
+  isLoading = false,
+}: ChartTimespanButtonGroupProps) => {
+  const { styles } = useStyles(styleSheet, { isSelected: false });
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const handlePress = (index: number) => {
+    setSelectedIndex(index);
+    onPress?.(buttons?.[index]?.value);
+  };
+
+  if (isLoading) {
+    return (
+      <View style={styles.chartTimespanButtonGroup}>
+        <SkeletonPlaceholder>
+          <SkeletonPlaceholder.Item
+            {...styles.chartTimespanButtonGroupSkeleton}
+          >
+            <SkeletonPlaceholder.Item {...styles.chartTimespanButtonSkeleton} />
+            <SkeletonPlaceholder.Item {...styles.chartTimespanButtonSkeleton} />
+            <SkeletonPlaceholder.Item {...styles.chartTimespanButtonSkeleton} />
+            <SkeletonPlaceholder.Item {...styles.chartTimespanButtonSkeleton} />
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.chartTimespanButtonGroup}>
+      {buttons?.map(({ label }, index) => (
+        <ChartTimespanButton
+          key={`${label}-${index}`}
+          label={label}
+          isSelected={index === selectedIndex}
+          onPress={() => handlePress(index)}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default ChartTimespanButtonGroup;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/DataGradient.test.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/DataGradient.test.tsx
new file mode 100644
index 00000000000..7ea921d14d1
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/DataGradient.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+import DataGradient, { DataGradientProps } from '.';
+
+const MOCK_DATA_POINTS = [
+  2.6293099000355724, 2.8917589155691483, 2.7419089818104134, 3.539389365276984,
+  2.4752501611359663, 2.7702575807540017, 2.646738155404836,
+];
+
+describe('DataGradient', () => {
+  it('render matches snapshot', () => {
+    const props: DataGradientProps = {
+      dataPoints: MOCK_DATA_POINTS,
+    };
+
+    const { toJSON } = renderWithProvider(<DataGradient {...props} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/__snapshots__/DataGradient.test.tsx.snap b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/__snapshots__/DataGradient.test.tsx.snap
new file mode 100644
index 00000000000..14edfed581d
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/__snapshots__/DataGradient.test.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataGradient render matches snapshot 1`] = `
+<RNSVGDefs>
+  <RNSVGLinearGradient
+    gradient={
+      [
+        0,
+        857506356,
+        1,
+        872415231,
+      ]
+    }
+    gradientTransform={null}
+    gradientUnits={0}
+    name="dataGradient"
+    x1={0}
+    x2={0}
+    y1={0}
+    y2="100%"
+  />
+</RNSVGDefs>
+`;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/index.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/index.tsx
new file mode 100644
index 00000000000..7317e34574d
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/DataGradient/index.tsx
@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import { Defs, LinearGradient, Stop } from 'react-native-svg';
+import { useTheme } from '../../../../../../../util/theme';
+
+export interface DataGradientProps {
+  dataPoints: number[];
+  color?: string;
+}
+
+const getGradientOpacityByDataSetSize = (dataSetSize: number) => {
+  let opacityTop, opacityBottom;
+
+  if (dataSetSize <= 30) {
+    opacityTop = 0.2;
+    opacityBottom = 0.2;
+  } else {
+    opacityTop = 0.4;
+    opacityBottom = 0.2;
+  }
+
+  return { opacityTop, opacityBottom };
+};
+
+const DataGradient = ({ dataPoints, color }: DataGradientProps) => {
+  const { colors } = useTheme();
+
+  const defaultColor = colors.success.default;
+
+  // Dynamic gradient based on size of dataset
+  const dataSize = dataPoints.length;
+  const { opacityTop, opacityBottom } = useMemo(
+    () => getGradientOpacityByDataSetSize(dataSize),
+    [dataSize],
+  );
+
+  return (
+    <Defs key="dataGradient">
+      <LinearGradient id="dataGradient" x1={0} y1={0} x2={0} y2={'100%'}>
+        <Stop stopColor={color ?? defaultColor} stopOpacity={opacityTop} />
+        <Stop
+          offset={1}
+          stopColor={colors.background.default}
+          stopOpacity={opacityBottom}
+        />
+      </LinearGradient>
+    </Defs>
+  );
+};
+
+export default DataGradient;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx
new file mode 100644
index 00000000000..c35c55d8fa3
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+import GraphCursor, { GraphCursorProps } from '.';
+
+describe('GraphCursor', () => {
+  const MOCK_DATA = [
+    2.6293099000355724, 2.8917589155691483, 2.7419089818104134,
+    3.539389365276984, 2.4752501611359663, 2.7702575807540017,
+    2.646738155404836,
+  ];
+  const MOCK_CURRENT_X = 2;
+  const MOCK_X = () => 73;
+  const MOCK_Y = () => 33.17441726994484;
+  const MOCK_COLOR = '#1c8234';
+
+  it('render matches snapshot', () => {
+    const props: GraphCursorProps = {
+      data: MOCK_DATA,
+      currentX: MOCK_CURRENT_X,
+      x: MOCK_X,
+      y: MOCK_Y,
+      color: MOCK_COLOR,
+    };
+
+    const { toJSON } = renderWithProvider(<GraphCursor {...props} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/__snapshots__/GraphCursor.test.tsx.snap b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/__snapshots__/GraphCursor.test.tsx.snap
new file mode 100644
index 00000000000..ee5c6e75f9b
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/__snapshots__/GraphCursor.test.tsx.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GraphCursor render matches snapshot 1`] = `
+<RNSVGGroup
+  fill={
+    {
+      "payload": 4278190080,
+      "type": 0,
+    }
+  }
+  matrix={
+    [
+      1,
+      0,
+      -0,
+      1,
+      73,
+      0,
+    ]
+  }
+>
+  <RNSVGGroup
+    fill={
+      {
+        "payload": 4278190080,
+        "type": 0,
+      }
+    }
+  >
+    <RNSVGLine
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+      propList={
+        [
+          "stroke",
+          "strokeWidth",
+        ]
+      }
+      stroke={
+        {
+          "payload": 4280058420,
+          "type": 0,
+        }
+      }
+      strokeWidth={1}
+      x1={0}
+      x2={0}
+      y1={1}
+      y2="100%"
+    />
+    <RNSVGCircle
+      cx={0}
+      cy={33.17441726994484}
+      fill={
+        {
+          "payload": 4280058420,
+          "type": 0,
+        }
+      }
+      propList={
+        [
+          "fill",
+          "stroke",
+          "strokeWidth",
+        ]
+      }
+      r={5}
+      stroke={
+        {
+          "payload": 4280058420,
+          "type": 0,
+        }
+      }
+      strokeWidth={1}
+    />
+  </RNSVGGroup>
+</RNSVGGroup>
+`;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/index.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/index.tsx
new file mode 100644
index 00000000000..e54d9350a16
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { G, Circle, Line } from 'react-native-svg';
+import { useTheme } from '../../../../../../../util/theme';
+
+export interface GraphCursorProps {
+  data: number[];
+  currentX: number;
+  color?: string;
+  // Props below are passed in implicitly by <AreaChart/> from react-native-svg-charts
+  // src: https://github.com/JesperLekland/react-native-svg-charts
+  x?: (index: number) => number;
+  y?: (value: number) => number;
+  ticks?: number[];
+}
+
+const GraphCursor = ({ data, currentX, x, y, color }: GraphCursorProps) => {
+  const { colors } = useTheme();
+
+  const defaultColor = colors.success.default;
+
+  if ((currentX && currentX < 0) || !data) return null;
+
+  const selectedDailyApr = data[currentX];
+
+  return (
+    <G x={x?.(currentX)} key="tooltip">
+      <G>
+        <Line
+          y1={1}
+          y2={'100%'}
+          stroke={color ?? defaultColor}
+          strokeWidth={1}
+        />
+        <Circle
+          cy={y?.(selectedDailyApr)}
+          r={5}
+          stroke={color ?? defaultColor}
+          strokeWidth={1}
+          fill={color ?? defaultColor}
+        />
+      </G>
+    </G>
+  );
+};
+
+export default GraphCursor;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/GraphTooltip.styles.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/GraphTooltip.styles.ts
new file mode 100644
index 00000000000..11784a611ae
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/GraphTooltip.styles.ts
@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () => {
+  const baseStyles = StyleSheet.create({
+    container: {
+      gap: 4,
+      alignItems: 'center',
+    },
+  });
+
+  return StyleSheet.create({
+    container: {
+      ...baseStyles.container,
+      paddingVertical: 16,
+    },
+    containerSkeleton: baseStyles.container,
+  });
+};
+
+export default styleSheet;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/GraphTooltip.test.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/GraphTooltip.test.tsx
new file mode 100644
index 00000000000..0590cf48236
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/GraphTooltip.test.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import GraphTooltip, { GraphTooltipProps } from '.';
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+
+describe('GraphTooltip', () => {
+  it('render matches snapshot', () => {
+    const props: GraphTooltipProps = {
+      title: 'Sample Title',
+      subtitle: 'Sample Subtitle',
+      color: 'blue',
+    };
+
+    const { toJSON } = renderWithProvider(<GraphTooltip {...props} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/__snapshots__/GraphTooltip.test.tsx.snap b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/__snapshots__/GraphTooltip.test.tsx.snap
new file mode 100644
index 00000000000..2810aee3689
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/__snapshots__/GraphTooltip.test.tsx.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GraphTooltip render matches snapshot 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "gap": 4,
+      "paddingVertical": 16,
+    }
+  }
+>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "blue",
+        "fontFamily": "EuclidCircularB-Bold",
+        "fontSize": 24,
+        "fontWeight": "700",
+        "letterSpacing": 0,
+        "lineHeight": 32,
+      }
+    }
+  >
+    Sample Title
+  </Text>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#6a737d",
+        "fontFamily": "EuclidCircularB-Medium",
+        "fontSize": 14,
+        "fontWeight": "500",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+      }
+    }
+  >
+    Sample Subtitle
+  </Text>
+</View>
+`;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/index.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/index.tsx
new file mode 100644
index 00000000000..57e4d9af748
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphTooltip/index.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { View } from 'react-native';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../../hooks/useStyles';
+import styleSheet from './GraphTooltip.styles';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+
+export interface GraphTooltipProps {
+  title: string;
+  subtitle: string;
+  color?: string;
+  isLoading?: boolean;
+}
+
+const GraphTooltip = ({
+  title,
+  subtitle,
+  color,
+  isLoading = false,
+}: GraphTooltipProps) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  if (isLoading) {
+    return (
+      <View style={styles.container}>
+        <SkeletonPlaceholder>
+          <SkeletonPlaceholder.Item {...styles.containerSkeleton}>
+            <SkeletonPlaceholder.Item
+              width={126}
+              height={32}
+              borderRadius={8}
+            />
+            <SkeletonPlaceholder.Item
+              width={102}
+              height={22}
+              borderRadius={8}
+            />
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text variant={TextVariant.HeadingLG} color={color ?? TextColor.Success}>
+        {title}
+      </Text>
+      <Text variant={TextVariant.BodyMDMedium} color={TextColor.Alternative}>
+        {subtitle}
+      </Text>
+    </View>
+  );
+};
+
+export default GraphTooltip;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.constants.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.constants.ts
new file mode 100644
index 00000000000..f33ff8b84cc
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.constants.ts
@@ -0,0 +1,28 @@
+import { colors } from '@metamask/design-tokens';
+import { GraphOptions } from './InteractiveTimespanChart.types';
+import { ChartButton } from './ChartTimespanButtonGroup/ChartTimespanButtonGroup.types';
+import { strings } from '../../../../../../../locales/i18n';
+
+// Small dataset ~10 points or less
+export const SMALL_DATASET_THRESHOLD = 10;
+export const SMALL_DATASET_SNAP_RATIO = 0.5;
+export const SMALL_DATASET_GRAPH_INSET = 20;
+export const STANDARD_DATASET_GRAPH_INSET = 10;
+
+export const CHART_BUTTONS: ChartButton[] = [
+  { label: strings('stake.interactive_chart.timespan_buttons.7D'), value: 7 },
+  { label: strings('stake.interactive_chart.timespan_buttons.1M'), value: 30 },
+  { label: strings('stake.interactive_chart.timespan_buttons.3M'), value: 90 },
+  { label: strings('stake.interactive_chart.timespan_buttons.6M'), value: 180 },
+];
+
+const DEFAULT_INSET = 0;
+
+export const DEFAULT_GRAPH_OPTIONS: GraphOptions = {
+  insetTop: DEFAULT_INSET,
+  insetRight: DEFAULT_INSET,
+  insetBottom: DEFAULT_INSET,
+  insetLeft: DEFAULT_INSET,
+  timespanButtons: CHART_BUTTONS,
+  color: colors.light.success.default,
+};
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.styles.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.styles.ts
new file mode 100644
index 00000000000..011750b314d
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.styles.ts
@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    chartContainer: {
+      paddingVertical: 16,
+    },
+    chart: {
+      height: 112,
+    },
+  });
+
+export default styleSheet;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.test.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.test.tsx
new file mode 100644
index 00000000000..405fe910302
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.test.tsx
@@ -0,0 +1,224 @@
+import React from 'react';
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
+import InteractiveTimespanChart, {
+  INTERACTIVE_TIMESPAN_CHART_DEFAULT_TEST_ID,
+  InteractiveTimespanChartProps,
+} from '.';
+import { strings } from '../../../../../../../locales/i18n';
+import { fireEvent, screen } from '@testing-library/react-native';
+import { MOCK_VAULT_APYS_ONE_YEAR } from '../mockVaultRewards';
+import BigNumber from 'bignumber.js';
+import { noop } from 'lodash';
+import { ChartButton } from './ChartTimespanButtonGroup/ChartTimespanButtonGroup.types';
+import { fireLayoutEvent } from '../../../../../../util/testUtils/react-native-svg-charts';
+import { DEFAULT_GRAPH_OPTIONS } from './InteractiveTimespanChart.constants';
+
+const buttons: ChartButton[] = [
+  { label: 'Label 1', value: 1 },
+  { label: 'Label 2', value: 2 },
+  { label: 'Label 3', value: 3 },
+];
+
+const DEFAULT_PROPS = {
+  NUMBER_ARRAY: {
+    title: 'Graph with number[] title',
+    subtitle: 'Graph with number[] subtitle',
+  },
+  OBJECT_ARRAY: {
+    title: 'Graph with object[] title',
+    subtitle: 'Graph with object[] subtitle',
+  },
+};
+
+const getProps = (dataPointsType: 'number' | 'object') => {
+  if (dataPointsType === 'number') {
+    return {
+      dataPoints: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      defaultTitle: DEFAULT_PROPS.NUMBER_ARRAY.title,
+      defaultSubtitle: DEFAULT_PROPS.NUMBER_ARRAY.subtitle,
+      onTimespanPressed: noop,
+      isLoading: false,
+      graphOptions: {
+        timespanButtons: buttons,
+      },
+    } as InteractiveTimespanChartProps<number>;
+  }
+  return {
+    dataPoints: MOCK_VAULT_APYS_ONE_YEAR,
+    defaultTitle: DEFAULT_PROPS.OBJECT_ARRAY.title,
+    defaultSubtitle: DEFAULT_PROPS.OBJECT_ARRAY.subtitle,
+    onTimespanPressed: noop,
+    yAccessor: (point) => new BigNumber(point.daily_apy).toNumber(),
+    isLoading: false,
+    graphOptions: {
+      timespanButtons: buttons,
+    },
+  } as InteractiveTimespanChartProps<(typeof MOCK_VAULT_APYS_ONE_YEAR)[number]>;
+};
+
+const renderGraph = (
+  dataType: 'number' | 'object',
+  propOverride?: Partial<
+    InteractiveTimespanChartProps<
+      number | (typeof MOCK_VAULT_APYS_ONE_YEAR)[number]
+    >
+  >,
+) => {
+  const baseProps = getProps(dataType) as InteractiveTimespanChartProps<
+    number | (typeof MOCK_VAULT_APYS_ONE_YEAR)[number]
+  >;
+
+  const props = { ...baseProps, ...propOverride };
+
+  const renderResult = renderWithProvider(
+    <InteractiveTimespanChart {...props} />,
+  );
+
+  /**
+   * react-native-svg-charts components listen for onLayout changes before they render any data.
+   * You need to trigger these event handlers for each component in your tests.
+   */
+  fireLayoutEvent(
+    screen.getByTestId(INTERACTIVE_TIMESPAN_CHART_DEFAULT_TEST_ID),
+  );
+
+  return renderResult;
+};
+
+describe('InteractiveTimespanChart', () => {
+  it('render matches snapshot', () => {
+    const { toJSON } = renderGraph('object');
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('supports dataPoints as number[]', () => {
+    const { toJSON, getByText } = renderGraph('number');
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Timespan buttons rendering
+    buttons.forEach(({ label }) => expect(getByText(label)).toBeDefined());
+
+    // GraphTooltip
+    expect(getByText(DEFAULT_PROPS.NUMBER_ARRAY.title)).toBeDefined();
+    expect(getByText(DEFAULT_PROPS.NUMBER_ARRAY.subtitle)).toBeDefined();
+  });
+
+  it('supports dataPoints as object[]', () => {
+    const { toJSON, getByText } = renderGraph('object');
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Timespan buttons rendering
+    buttons.forEach(({ label }) => expect(getByText(label)).toBeDefined());
+
+    // GraphTooltip
+    expect(getByText(DEFAULT_PROPS.OBJECT_ARRAY.title)).toBeDefined();
+    expect(getByText(DEFAULT_PROPS.OBJECT_ARRAY.subtitle)).toBeDefined();
+  });
+
+  it('renders no title or subtitle when defaultTitle, defaultSubtitle, titleAccessor, and subtitleAccessor are not defined', () => {
+    const { toJSON, getByText, queryByText } = renderGraph('object', {
+      defaultTitle: '',
+      defaultSubtitle: '',
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Timespan buttons rendering
+    buttons.forEach(({ label }) => expect(getByText(label)).toBeDefined());
+
+    // GraphTooltip
+    expect(queryByText(DEFAULT_PROPS.OBJECT_ARRAY.title)).toBeNull();
+    expect(queryByText(DEFAULT_PROPS.OBJECT_ARRAY.subtitle)).toBeNull();
+  });
+
+  it('renders only the title when subtitle props are not defined', () => {
+    const { toJSON, getByText, queryByText } = renderGraph('object', {
+      defaultSubtitle: '',
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Timespan buttons rendering
+    buttons.forEach(({ label }) => expect(getByText(label)).toBeDefined());
+
+    // GraphTooltip
+    expect(getByText(DEFAULT_PROPS.OBJECT_ARRAY.title)).toBeDefined();
+    expect(queryByText(DEFAULT_PROPS.OBJECT_ARRAY.subtitle)).toBeNull();
+  });
+
+  it('renders only the subtitle when title props are not defined', () => {
+    const { toJSON, getByText, queryByText } = renderGraph('object', {
+      defaultTitle: '',
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Timespan buttons rendering
+    buttons.forEach(({ label }) => expect(getByText(label)).toBeDefined());
+
+    // GraphTooltip
+    expect(queryByText(DEFAULT_PROPS.OBJECT_ARRAY.title)).toBeNull();
+    expect(getByText(DEFAULT_PROPS.OBJECT_ARRAY.subtitle)).toBeDefined();
+  });
+
+  it('supports customizing color', async () => {
+    const customColor = 'red';
+
+    const { findByText, getByTestId } = renderGraph('object', {
+      graphOptions: { ...DEFAULT_GRAPH_OPTIONS, color: customColor },
+    });
+
+    const titleText = await findByText(DEFAULT_PROPS.OBJECT_ARRAY.title);
+    const plotLine = getByTestId('InteractiveChartPlotLine');
+
+    const redColorARGB = 4294901760;
+
+    expect(titleText?.props?.style?.color).toBe(customColor);
+    expect(plotLine?.props?.stroke?.payload).toBe(redColorARGB);
+  });
+
+  it('supports toggling between different timespans', () => {
+    const { getByText, getByTestId } = renderGraph('object', {
+      graphOptions: DEFAULT_GRAPH_OPTIONS,
+    });
+
+    const oneMonthButton = getByText(
+      strings('stake.interactive_chart.timespan_buttons.1M'),
+    ).parent;
+
+    const interactiveTimespanChart = getByTestId(
+      INTERACTIVE_TIMESPAN_CHART_DEFAULT_TEST_ID,
+    );
+    const areaChartComponent =
+      interactiveTimespanChart.children[2].children[0].children[0];
+
+    // Chart defaults to 7 data points shown (1 week).
+    expect(areaChartComponent.props.data.length).toEqual(7);
+
+    // Display 30 data points (1 month).
+    fireEvent.press(oneMonthButton);
+
+    expect(areaChartComponent.props.data.length).toEqual(30);
+
+    // Display 90 data points (3 months).
+    const threeMonthButton = getByText(
+      strings('stake.interactive_chart.timespan_buttons.3M'),
+    ).parent;
+
+    fireEvent.press(threeMonthButton);
+
+    expect(areaChartComponent.props.data.length).toEqual(90);
+
+    // Display 180 data points (6 months).
+    const sixMonthButton = getByText(
+      strings('stake.interactive_chart.timespan_buttons.6M'),
+    ).parent;
+
+    fireEvent.press(sixMonthButton);
+
+    expect(areaChartComponent.props.data.length).toEqual(180);
+  });
+});
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.types.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.types.ts
new file mode 100644
index 00000000000..7b17acaf7a0
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.types.ts
@@ -0,0 +1,14 @@
+import { ChartButton } from './ChartTimespanButtonGroup/ChartTimespanButtonGroup.types';
+
+export type DataPoint = Record<string, unknown> | number;
+
+export type Accessor<T, R> = (point: T) => R;
+
+export interface GraphOptions {
+  insetTop: number;
+  insetBottom: number;
+  insetLeft: number;
+  insetRight: number;
+  timespanButtons: ChartButton[];
+  color: string;
+}
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.utils.test.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.utils.test.ts
new file mode 100644
index 00000000000..dc360b7197c
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.utils.test.ts
@@ -0,0 +1,185 @@
+import {
+  SMALL_DATASET_GRAPH_INSET,
+  STANDARD_DATASET_GRAPH_INSET,
+} from './InteractiveTimespanChart.constants';
+import {
+  getChartSegmentWidth,
+  calculateSegmentCenters,
+  formatChartDate,
+  getGraphInsetsByDataPointLength,
+  findClosestPointIndex,
+  calculateSnapThreshold,
+} from './InteractiveTimespanChart.utils';
+
+const CHART_WIDTH = 100;
+
+describe('InteractiveTimespanChart Utils', () => {
+  describe('calculateSegmentCenter', () => {
+    it('calculates center of each segment', () => {
+      const MOCK_DATAPOINTS_1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+      const chartSegmentWidth1 = getChartSegmentWidth(
+        CHART_WIDTH,
+        MOCK_DATAPOINTS_1,
+      );
+
+      const result1 = calculateSegmentCenters(
+        MOCK_DATAPOINTS_1,
+        chartSegmentWidth1,
+      );
+
+      expect(result1).toEqual([5, 15, 25, 35, 45, 55, 65, 75, 85, 95]);
+
+      const MOCK_DATAPOINTS_2 = [
+        Number.MIN_VALUE,
+        1.75,
+        3.1,
+        0,
+        7.453,
+        100,
+        100000,
+        2.5,
+        75648293.123,
+        1000000.230021,
+        60.0,
+        2.0001,
+        99.99999,
+        Number.MAX_VALUE,
+      ];
+      const chartSegmentWidth2 = getChartSegmentWidth(
+        CHART_WIDTH,
+        MOCK_DATAPOINTS_2,
+      );
+
+      const result2 = calculateSegmentCenters(
+        MOCK_DATAPOINTS_2,
+        chartSegmentWidth2,
+      );
+
+      expect(result2).toEqual([
+        3.5714285, 10.7142855, 17.857142500000002, 24.9999995, 32.1428565,
+        39.28571350000001, 46.428570500000006, 53.571427500000006,
+        60.714284500000005, 67.8571415, 74.9999985, 82.1428555, 89.2857125,
+        96.4285695,
+      ]);
+    });
+
+    it('safely handles empty array', () => {
+      const segmentWidth = getChartSegmentWidth(CHART_WIDTH, []);
+      const result = calculateSegmentCenters([], segmentWidth);
+
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('formatChartDate', () => {
+    it('formats chart date', () => {
+      const iso8601Timestamp = '2024-11-30T00:00:00.000Z';
+
+      const result = formatChartDate(iso8601Timestamp.toString());
+
+      expect(result).toEqual('Sat, 30 Nov 2024');
+    });
+
+    it('handles invalid timestamp argument format', () => {
+      const timestampInMs = 1736531527123;
+
+      const result = formatChartDate(timestampInMs.toString());
+
+      expect(result).toEqual('Invalid Date');
+    });
+  });
+
+  describe('getGraphInsetsByDataPointLength', () => {
+    it('calculates standard dataset graph inset', () => {
+      const result = getGraphInsetsByDataPointLength(100);
+
+      expect(result).toEqual({
+        insetTop: STANDARD_DATASET_GRAPH_INSET,
+        insetBottom: STANDARD_DATASET_GRAPH_INSET,
+      });
+    });
+
+    it('calculates small dataset graph insets', () => {
+      const result = getGraphInsetsByDataPointLength(0);
+
+      expect(result).toEqual({
+        insetTop: SMALL_DATASET_GRAPH_INSET,
+        insetBottom: SMALL_DATASET_GRAPH_INSET,
+      });
+    });
+  });
+
+  describe('calculateSnapThreshold', () => {
+    it('calculates the snap threshold for a small dataset (10 or less points)', () => {
+      const dataPoints = [1, 2, 3, 4, 5];
+      const segmentWidth = getChartSegmentWidth(CHART_WIDTH, dataPoints);
+
+      const result = calculateSnapThreshold(segmentWidth, dataPoints.length);
+
+      expect(result).toEqual(10);
+    });
+
+    it('outputs a snap threshold of 0 for standard sized datasets (more than 10 points)', () => {
+      const dataPoints = [
+        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
+      ];
+      const segmentWidth = getChartSegmentWidth(CHART_WIDTH, dataPoints);
+
+      const result = calculateSnapThreshold(segmentWidth, dataPoints.length);
+
+      expect(result).toEqual(0);
+    });
+  });
+
+  describe('findClosestPointIndex', () => {
+    const dataPoints = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    const segmentWidth = getChartSegmentWidth(CHART_WIDTH, dataPoints);
+    const snapThreshold = calculateSnapThreshold(
+      segmentWidth,
+      dataPoints.length,
+    );
+    const segmentCenters = calculateSegmentCenters(dataPoints, segmentWidth);
+
+    it('calculates closes point index for given x coordinate', () => {
+      const xCoordinate = 25;
+
+      const result = findClosestPointIndex(
+        xCoordinate,
+        segmentCenters,
+        snapThreshold,
+        dataPoints.length,
+      );
+
+      expect(result).toEqual(2);
+    });
+
+    it('return -1 when x coordinate is outside the bounds of the graph', () => {
+      const xCoordinate = 1000;
+
+      const result = findClosestPointIndex(
+        xCoordinate,
+        segmentCenters,
+        snapThreshold,
+        dataPoints.length,
+      );
+
+      expect(result).toEqual(-1);
+    });
+
+    // x coordinate value "-1" is what we use to convey a raised finger.
+    // When we receive x coordinate "-1" we simply passthrough.
+    it('allows -1  coordinate passthrough', () => {
+      const xCoordinate = -1;
+
+      const result = findClosestPointIndex(
+        xCoordinate,
+        segmentCenters,
+        snapThreshold,
+        dataPoints.length,
+      );
+
+      expect(result).toEqual(-1);
+    });
+  });
+});
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.utils.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.utils.ts
new file mode 100644
index 00000000000..959dcf8b51c
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/InteractiveTimespanChart.utils.ts
@@ -0,0 +1,87 @@
+import {
+  SMALL_DATASET_GRAPH_INSET,
+  SMALL_DATASET_SNAP_RATIO,
+  SMALL_DATASET_THRESHOLD,
+  STANDARD_DATASET_GRAPH_INSET,
+} from './InteractiveTimespanChart.constants';
+
+export const getChartSegmentWidth = (
+  chartWidth: number,
+  dataPoints: number[],
+) => parseFloat((chartWidth / dataPoints.length).toFixed(6));
+
+export const calculateSegmentCenters = (
+  dataPoints: number[] | string[],
+  segmentWidth: number,
+) =>
+  dataPoints.map((_, index) => {
+    /**
+     * Ex. If each segment is 30px wide:
+     * The start position of first segment (index: 0) = 0 * segmentWidth OR 0 * 30px = 0
+     * The center position of the first segment (index: 0) = startPosition + segmentWidth / 2 OR 0 + 30 / 2 = 15
+     */
+    const startOfSegment = index * segmentWidth;
+    const centerOfSegment = startOfSegment + segmentWidth / 2;
+    return centerOfSegment;
+  });
+
+// Example ISO 8601 timestamp: '2024-11-30T00:00:00.000Z'
+export const formatChartDate = (iso8601Timestamp: string) =>
+  new Date(iso8601Timestamp).toUTCString().split(' ').slice(0, 4).join(' ');
+
+export const getGraphInsetsByDataPointLength = (numDataPoints: number) => {
+  const graphInsets = {
+    insetTop: STANDARD_DATASET_GRAPH_INSET,
+    insetBottom: STANDARD_DATASET_GRAPH_INSET,
+  };
+
+  if (numDataPoints <= 10) {
+    graphInsets.insetTop = SMALL_DATASET_GRAPH_INSET;
+    graphInsets.insetBottom = SMALL_DATASET_GRAPH_INSET;
+    return graphInsets;
+  }
+
+  return graphInsets;
+};
+
+export const calculateSnapThreshold = (
+  chartSegmentWidth: number,
+  numDataPoints: number,
+) =>
+  chartSegmentWidth *
+  // We only enable snapping for small datasets.
+  (numDataPoints <= SMALL_DATASET_THRESHOLD ? SMALL_DATASET_SNAP_RATIO : 0);
+
+export const findClosestPointIndex = (
+  x: number,
+  segmentCenters: number[],
+  snapThreshold: number,
+  numDataPoints: number,
+) => {
+  // Deselect point when finger raised
+  if (x === -1) {
+    return -1;
+  }
+
+  // Find the closest segment center to the current touch position
+  let closestIndex = 0;
+  let minDistance = Infinity;
+
+  segmentCenters.forEach((center, index) => {
+    const distance = Math.abs(x - center);
+    if (distance < minDistance) {
+      closestIndex = index;
+      minDistance = distance;
+    }
+  });
+
+  /**
+   * Ensure that small datasets respect snap threshold
+   * Larger datasets can always update.
+   */
+  if (minDistance <= snapThreshold || numDataPoints > SMALL_DATASET_THRESHOLD) {
+    return closestIndex;
+  }
+
+  return -1;
+};
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/PlotLine.test.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/PlotLine.test.tsx
new file mode 100644
index 00000000000..a1236343e06
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/PlotLine.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import PlotLine from '.';
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+
+const MOCK_LINE =
+  'M0,38.513284280113034L73,33.17441726994484L146,36.22273835506641L219,20L292,41.6472432928151L365,35.64605720662807L438,38.158750133941524';
+
+describe('PlotLine', () => {
+  it('render matches snapshot', () => {
+    const { toJSON } = renderWithProvider(
+      <PlotLine line={MOCK_LINE} color={'blue'} />,
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/__snapshots__/PlotLine.test.tsx.snap b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/__snapshots__/PlotLine.test.tsx.snap
new file mode 100644
index 00000000000..75c0b7232c4
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/__snapshots__/PlotLine.test.tsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PlotLine render matches snapshot 1`] = `
+<RNSVGPath
+  d="M0,38.513284280113034L73,33.17441726994484L146,36.22273835506641L219,20L292,41.6472432928151L365,35.64605720662807L438,38.158750133941524"
+  fill={null}
+  opacity={0.85}
+  propList={
+    [
+      "fill",
+      "stroke",
+      "strokeWidth",
+    ]
+  }
+  stroke={
+    {
+      "payload": 4285166461,
+      "type": 0,
+    }
+  }
+  strokeWidth={1.75}
+  testID="InteractiveChartPlotLine"
+/>
+`;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/index.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/index.tsx
new file mode 100644
index 00000000000..27b7ec67332
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/PlotLine/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { useTheme } from '../../../../../../../util/theme';
+
+interface LineProps {
+  line: string;
+  doesChartHaveData: boolean;
+  color?: string;
+  testID?: string;
+}
+
+const PlotLine = ({
+  line,
+  doesChartHaveData,
+  color,
+  testID = 'InteractiveChartPlotLine',
+}: Partial<LineProps>) => {
+  const { colors: themeColors } = useTheme();
+
+  const defaultColor = themeColors.success.default;
+
+  const lineColor = color ?? defaultColor;
+
+  return (
+    <Path
+      key="line"
+      d={line}
+      stroke={doesChartHaveData ? lineColor : themeColors.text.alternative}
+      strokeWidth={1.75}
+      fill="none"
+      opacity={doesChartHaveData ? 1 : 0.85}
+      testID={testID}
+    />
+  );
+};
+
+export default PlotLine;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/__snapshots__/InteractiveTimespanChart.test.tsx.snap b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/__snapshots__/InteractiveTimespanChart.test.tsx.snap
new file mode 100644
index 00000000000..14f48a2e26b
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/__snapshots__/InteractiveTimespanChart.test.tsx.snap
@@ -0,0 +1,1625 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InteractiveTimespanChart render matches snapshot 1`] = `
+<View
+  testID="InteractiveTimespanChart"
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 12,
+        "justifyContent": "center",
+        "marginTop": 24,
+        "paddingBottom": 16,
+      }
+    }
+  >
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#f2f4f6",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 1
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 2
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 3
+      </Text>
+    </TouchableOpacity>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "gap": 4,
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#1c8234",
+          "fontFamily": "EuclidCircularB-Bold",
+          "fontSize": 24,
+          "fontWeight": "700",
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        }
+      }
+    >
+      Graph with object[] title
+    </Text>
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      Graph with object[] subtitle
+    </Text>
+  </View>
+  <View
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    style={
+      {
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "height": 112,
+        }
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSVGSvgView
+          bbHeight={100}
+          bbWidth={300}
+          focusable={false}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "height": 100,
+                "width": 300,
+              },
+              {
+                "flex": 0,
+                "height": 100,
+                "width": 300,
+              },
+            ]
+          }
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGPath
+              d="M0,0L0,100Z"
+              fill={
+                {
+                  "brushRef": "dataGradient",
+                  "type": 1,
+                }
+              }
+              propList={
+                [
+                  "fill",
+                ]
+              }
+            />
+            <RNSVGPath
+              d="M0,0Z"
+              fill={null}
+              opacity={1}
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4280058420,
+                  "type": 0,
+                }
+              }
+              strokeWidth={1.75}
+              testID="InteractiveChartPlotLine"
+            />
+            <RNSVGDefs>
+              <RNSVGLinearGradient
+                gradient={
+                  [
+                    0,
+                    857506356,
+                    1,
+                    872415231,
+                  ]
+                }
+                gradientTransform={null}
+                gradientUnits={0}
+                name="dataGradient"
+                x1={0}
+                x2={0}
+                y1={0}
+                y2="100%"
+              />
+            </RNSVGDefs>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`InteractiveTimespanChart renders no title or subtitle when defaultTitle, defaultSubtitle, titleAccessor, and subtitleAccessor are not defined 1`] = `
+<View
+  testID="InteractiveTimespanChart"
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 12,
+        "justifyContent": "center",
+        "marginTop": 24,
+        "paddingBottom": 16,
+      }
+    }
+  >
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#f2f4f6",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 1
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 2
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 3
+      </Text>
+    </TouchableOpacity>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "gap": 4,
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#1c8234",
+          "fontFamily": "EuclidCircularB-Bold",
+          "fontSize": 24,
+          "fontWeight": "700",
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        }
+      }
+    />
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    />
+  </View>
+  <View
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    style={
+      {
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "height": 112,
+        }
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSVGSvgView
+          bbHeight={100}
+          bbWidth={300}
+          focusable={false}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "height": 100,
+                "width": 300,
+              },
+              {
+                "flex": 0,
+                "height": 100,
+                "width": 300,
+              },
+            ]
+          }
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGPath
+              d="M0,0L0,100Z"
+              fill={
+                {
+                  "brushRef": "dataGradient",
+                  "type": 1,
+                }
+              }
+              propList={
+                [
+                  "fill",
+                ]
+              }
+            />
+            <RNSVGPath
+              d="M0,0Z"
+              fill={null}
+              opacity={1}
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4280058420,
+                  "type": 0,
+                }
+              }
+              strokeWidth={1.75}
+              testID="InteractiveChartPlotLine"
+            />
+            <RNSVGDefs>
+              <RNSVGLinearGradient
+                gradient={
+                  [
+                    0,
+                    857506356,
+                    1,
+                    872415231,
+                  ]
+                }
+                gradientTransform={null}
+                gradientUnits={0}
+                name="dataGradient"
+                x1={0}
+                x2={0}
+                y1={0}
+                y2="100%"
+              />
+            </RNSVGDefs>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`InteractiveTimespanChart renders only the subtitle when title props are not defined 1`] = `
+<View
+  testID="InteractiveTimespanChart"
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 12,
+        "justifyContent": "center",
+        "marginTop": 24,
+        "paddingBottom": 16,
+      }
+    }
+  >
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#f2f4f6",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 1
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 2
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 3
+      </Text>
+    </TouchableOpacity>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "gap": 4,
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#1c8234",
+          "fontFamily": "EuclidCircularB-Bold",
+          "fontSize": 24,
+          "fontWeight": "700",
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        }
+      }
+    />
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      Graph with object[] subtitle
+    </Text>
+  </View>
+  <View
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    style={
+      {
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "height": 112,
+        }
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSVGSvgView
+          bbHeight={100}
+          bbWidth={300}
+          focusable={false}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "height": 100,
+                "width": 300,
+              },
+              {
+                "flex": 0,
+                "height": 100,
+                "width": 300,
+              },
+            ]
+          }
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGPath
+              d="M0,0L0,100Z"
+              fill={
+                {
+                  "brushRef": "dataGradient",
+                  "type": 1,
+                }
+              }
+              propList={
+                [
+                  "fill",
+                ]
+              }
+            />
+            <RNSVGPath
+              d="M0,0Z"
+              fill={null}
+              opacity={1}
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4280058420,
+                  "type": 0,
+                }
+              }
+              strokeWidth={1.75}
+              testID="InteractiveChartPlotLine"
+            />
+            <RNSVGDefs>
+              <RNSVGLinearGradient
+                gradient={
+                  [
+                    0,
+                    857506356,
+                    1,
+                    872415231,
+                  ]
+                }
+                gradientTransform={null}
+                gradientUnits={0}
+                name="dataGradient"
+                x1={0}
+                x2={0}
+                y1={0}
+                y2="100%"
+              />
+            </RNSVGDefs>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`InteractiveTimespanChart renders only the title when subtitle props are not defined 1`] = `
+<View
+  testID="InteractiveTimespanChart"
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 12,
+        "justifyContent": "center",
+        "marginTop": 24,
+        "paddingBottom": 16,
+      }
+    }
+  >
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#f2f4f6",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 1
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 2
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 3
+      </Text>
+    </TouchableOpacity>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "gap": 4,
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#1c8234",
+          "fontFamily": "EuclidCircularB-Bold",
+          "fontSize": 24,
+          "fontWeight": "700",
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        }
+      }
+    >
+      Graph with object[] title
+    </Text>
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    />
+  </View>
+  <View
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    style={
+      {
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "height": 112,
+        }
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSVGSvgView
+          bbHeight={100}
+          bbWidth={300}
+          focusable={false}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "height": 100,
+                "width": 300,
+              },
+              {
+                "flex": 0,
+                "height": 100,
+                "width": 300,
+              },
+            ]
+          }
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGPath
+              d="M0,0L0,100Z"
+              fill={
+                {
+                  "brushRef": "dataGradient",
+                  "type": 1,
+                }
+              }
+              propList={
+                [
+                  "fill",
+                ]
+              }
+            />
+            <RNSVGPath
+              d="M0,0Z"
+              fill={null}
+              opacity={1}
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4280058420,
+                  "type": 0,
+                }
+              }
+              strokeWidth={1.75}
+              testID="InteractiveChartPlotLine"
+            />
+            <RNSVGDefs>
+              <RNSVGLinearGradient
+                gradient={
+                  [
+                    0,
+                    857506356,
+                    1,
+                    872415231,
+                  ]
+                }
+                gradientTransform={null}
+                gradientUnits={0}
+                name="dataGradient"
+                x1={0}
+                x2={0}
+                y1={0}
+                y2="100%"
+              />
+            </RNSVGDefs>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`InteractiveTimespanChart supports dataPoints as number[] 1`] = `
+<View
+  testID="InteractiveTimespanChart"
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 12,
+        "justifyContent": "center",
+        "marginTop": 24,
+        "paddingBottom": 16,
+      }
+    }
+  >
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#f2f4f6",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 1
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 2
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 3
+      </Text>
+    </TouchableOpacity>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "gap": 4,
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#1c8234",
+          "fontFamily": "EuclidCircularB-Bold",
+          "fontSize": 24,
+          "fontWeight": "700",
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        }
+      }
+    >
+      Graph with number[] title
+    </Text>
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      Graph with number[] subtitle
+    </Text>
+  </View>
+  <View
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    style={
+      {
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "height": 112,
+        }
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSVGSvgView
+          bbHeight={100}
+          bbWidth={300}
+          focusable={false}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "height": 100,
+                "width": 300,
+              },
+              {
+                "flex": 0,
+                "height": 100,
+                "width": 300,
+              },
+            ]
+          }
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGPath
+              d="M0,0L0,100Z"
+              fill={
+                {
+                  "brushRef": "dataGradient",
+                  "type": 1,
+                }
+              }
+              propList={
+                [
+                  "fill",
+                ]
+              }
+            />
+            <RNSVGPath
+              d="M0,0Z"
+              fill={null}
+              opacity={1}
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4280058420,
+                  "type": 0,
+                }
+              }
+              strokeWidth={1.75}
+              testID="InteractiveChartPlotLine"
+            />
+            <RNSVGDefs>
+              <RNSVGLinearGradient
+                gradient={
+                  [
+                    0,
+                    857506356,
+                    1,
+                    872415231,
+                  ]
+                }
+                gradientTransform={null}
+                gradientUnits={0}
+                name="dataGradient"
+                x1={0}
+                x2={0}
+                y1={0}
+                y2="100%"
+              />
+            </RNSVGDefs>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`InteractiveTimespanChart supports dataPoints as object[] 1`] = `
+<View
+  testID="InteractiveTimespanChart"
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": 12,
+        "justifyContent": "center",
+        "marginTop": 24,
+        "paddingBottom": 16,
+      }
+    }
+  >
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#f2f4f6",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 1
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 2
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      onPress={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 7,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#6a737d",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Label 3
+      </Text>
+    </TouchableOpacity>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "gap": 4,
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#1c8234",
+          "fontFamily": "EuclidCircularB-Bold",
+          "fontSize": 24,
+          "fontWeight": "700",
+          "letterSpacing": 0,
+          "lineHeight": 32,
+        }
+      }
+    >
+      Graph with object[] title
+    </Text>
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 14,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      Graph with object[] subtitle
+    </Text>
+  </View>
+  <View
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    style={
+      {
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "height": 112,
+        }
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSVGSvgView
+          bbHeight={100}
+          bbWidth={300}
+          focusable={false}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "height": 100,
+                "width": 300,
+              },
+              {
+                "flex": 0,
+                "height": 100,
+                "width": 300,
+              },
+            ]
+          }
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGPath
+              d="M0,0L0,100Z"
+              fill={
+                {
+                  "brushRef": "dataGradient",
+                  "type": 1,
+                }
+              }
+              propList={
+                [
+                  "fill",
+                ]
+              }
+            />
+            <RNSVGPath
+              d="M0,0Z"
+              fill={null}
+              opacity={1}
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4280058420,
+                  "type": 0,
+                }
+              }
+              strokeWidth={1.75}
+              testID="InteractiveChartPlotLine"
+            />
+            <RNSVGDefs>
+              <RNSVGLinearGradient
+                gradient={
+                  [
+                    0,
+                    857506356,
+                    1,
+                    872415231,
+                  ]
+                }
+                gradientTransform={null}
+                gradientUnits={0}
+                name="dataGradient"
+                x1={0}
+                x2={0}
+                y1={0}
+                y2="100%"
+              />
+            </RNSVGDefs>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+</View>
+`;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/index.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/index.tsx
new file mode 100644
index 00000000000..366fc414901
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/index.tsx
@@ -0,0 +1,283 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Dimensions,
+  GestureResponderEvent,
+  PanResponder,
+  View,
+} from 'react-native';
+import { AreaChart } from 'react-native-svg-charts';
+import ChartTimespanButtonGroup from './ChartTimespanButtonGroup';
+import DataGradient from './DataGradient';
+import PlotLine from './PlotLine';
+import styleSheet from './InteractiveTimespanChart.styles';
+import { useStyles } from '../../../../../hooks/useStyles';
+import {
+  calculateSegmentCenters,
+  calculateSnapThreshold,
+  findClosestPointIndex,
+} from './InteractiveTimespanChart.utils';
+import GraphCursor from './GraphCursor';
+import {
+  DataPoint,
+  Accessor,
+  GraphOptions,
+} from './InteractiveTimespanChart.types';
+import GraphTooltip from './GraphTooltip';
+import { DEFAULT_GRAPH_OPTIONS } from './InteractiveTimespanChart.constants';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+
+export interface InteractiveTimespanChartProps<T extends DataPoint> {
+  dataPoints: T[];
+  /**
+   * The yAccessor prop informs the graph of which object key to parse Y values from.
+   * This allows for greater flexibility with the dataPoints passed into the graph.
+   *
+   * Example Usage:
+   * <InteractiveTimespanChart
+   * dataPoints={[{ daily_apy: number, vaultAddress: string, timestamp: string }]}
+   * yAccessor={(point: DataPoint) => point.daily_apy}
+   * />
+   *
+   * In the above example, the yAccessor informs the graph that we'd like to extract
+   * the daily_apy values and use them as the y-axis data points.
+   */
+  yAccessor?: Accessor<T, number>;
+  titleAccessor?: Accessor<T, string>;
+  defaultTitle?: string;
+  subtitleAccessor?: Accessor<T, string>;
+  defaultSubtitle?: string;
+  onTimespanPressed?: (numDataPointsToDisplay: number) => void;
+  graphOptions?: Partial<GraphOptions>;
+  testID?: string;
+  isLoading?: boolean;
+}
+
+/**
+ * Interactive Graph Guide
+ *
+ * The graph takes an array of number or objects to serve as data points.
+ *
+ * When data points are of type number[]
+ * 1. No need to define the yAccessor prop.
+ * 2. Defining the titleAccessor property is recommended. This allows the title to update dynamically when a user selects a point.
+ * If you just want to show the value you can use the following titleAccessor={(point) => point.toString()}
+ *
+ * When data points are of type object[]
+ * 1. The yAccessor prop must be defined to tell the graph which object key to use for the y-axis values.
+ * 2. Defining the titleAccessor property is recommended. This allows the title to update dynamically when a user selects a point.
+ *
+ * How the graph works
+ * 1. Using the data points values, the graph is divided into equal-width segments, one for each data point. This is done by dividing the chart width by the number of data points.
+ * 2. Using the array of segments, we calculate the center of each segment. This is used for "snapping" with small datasets.
+ * A small dataset is one that has 10 or less data points. A dataset with more than 10 points is considered standard.
+ *
+ * Snapping Mechanism (small datasets only)
+ * This chart uses a snapping mechanism to feel more intuitive while dragging horizontally with small datasets.
+ * The chart uses a snap threshold that provides some "give" before transitioning to the next data point.
+ * This "give" is based on the distance from the center of a segment/data point.
+ */
+
+export const INTERACTIVE_TIMESPAN_CHART_DEFAULT_TEST_ID =
+  'InteractiveTimespanChart';
+
+const InteractiveTimespanChart = <T extends DataPoint>({
+  dataPoints,
+  graphOptions,
+  yAccessor,
+  defaultTitle,
+  defaultSubtitle,
+  titleAccessor,
+  subtitleAccessor,
+  onTimespanPressed,
+  testID = INTERACTIVE_TIMESPAN_CHART_DEFAULT_TEST_ID,
+  isLoading = false,
+}: InteractiveTimespanChartProps<T>) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const {
+    insetTop,
+    insetRight,
+    insetBottom,
+    insetLeft,
+    timespanButtons,
+    color,
+  } = {
+    ...DEFAULT_GRAPH_OPTIONS,
+    ...graphOptions,
+  };
+
+  const [dataPointsToShow, setDataPointsToShow] = useState(
+    dataPoints.slice(-timespanButtons[0].value),
+  );
+
+  /**
+   * Parse the dataPoints using accessor props to create array of values, titles, and subtitles.
+   * - values array: The point on the graph.
+   * - titles array: The available titles for each point on the graph for use in the GraphTooltip.
+   * - subtitles array: The available subtitles for each point on the graph for use in the GraphTooltip.
+   *
+   * When a user selects a point on the graph, the index of this point is used to select the correct value, title, and subtitle.
+   *
+   */
+  const { parsedDataPointValues, parsedSubtitleValues, parsedTitleValues } =
+    useMemo(() => {
+      const values: number[] = [];
+      const titles: string[] = [];
+      const subtitles: string[] = [];
+
+      dataPointsToShow.forEach((point) => {
+        if (typeof point === 'number') {
+          values.push(point);
+        }
+
+        if (typeof point === 'object' && yAccessor) {
+          values.push(yAccessor?.(point));
+        }
+
+        if (titleAccessor) {
+          titles.push(titleAccessor(point));
+        }
+        if (subtitleAccessor) {
+          subtitles.push(subtitleAccessor(point));
+        }
+      });
+
+      return {
+        parsedDataPointValues: values,
+        parsedTitleValues: titles,
+        parsedSubtitleValues: subtitles,
+      };
+    }, [dataPointsToShow, subtitleAccessor, titleAccessor, yAccessor]);
+
+  const [selectedPointIndex, setSelectedPointIndex] = useState(-1);
+
+  const doesChartHaveData = useMemo(
+    () => dataPointsToShow.length > 0,
+    [dataPointsToShow],
+  );
+
+  const chartWidth = Dimensions.get('window').width;
+
+  const chartSegmentWidth = useMemo(() => {
+    const calculatedSegmentWidth = chartWidth / dataPointsToShow.length;
+    return parseFloat(calculatedSegmentWidth.toFixed(6));
+  }, [chartWidth, dataPointsToShow.length]);
+
+  const segmentCenters = useMemo(
+    () => calculateSegmentCenters(parsedDataPointValues, chartSegmentWidth),
+    [chartSegmentWidth, parsedDataPointValues],
+  );
+
+  const handleTimespanPressed = (numDataPointsToDisplay: number) => {
+    setDataPointsToShow(dataPoints.slice(-numDataPointsToDisplay));
+    // Remove graph selection when switching between timespans.
+    setSelectedPointIndex(-1);
+    onTimespanPressed?.(numDataPointsToDisplay);
+  };
+
+  // Determines when the cursor should "snap" (or jump) to the next point.
+  const snapThreshold = useMemo(
+    () => calculateSnapThreshold(chartSegmentWidth, dataPointsToShow.length),
+    [chartSegmentWidth, dataPointsToShow.length],
+  );
+
+  const updateSelectedGraphPosition = useCallback(
+    (x: number) => {
+      const newIndex = findClosestPointIndex(
+        x,
+        segmentCenters,
+        snapThreshold,
+        dataPointsToShow.length,
+      );
+      setSelectedPointIndex(newIndex);
+    },
+    [dataPointsToShow.length, segmentCenters, snapThreshold],
+  );
+
+  /**
+   * PanResponder captures the dragging on the graph
+   * src: https://reactnative.dev/docs/panresponder
+   */
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onStartShouldSetPanResponderCapture: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponderCapture: () => true,
+        onPanResponderTerminationRequest: () => true,
+        onPanResponderGrant: (evt: GestureResponderEvent) => {
+          updateSelectedGraphPosition(evt.nativeEvent.locationX);
+        },
+        onPanResponderMove: (evt: GestureResponderEvent) => {
+          updateSelectedGraphPosition(evt.nativeEvent.locationX);
+        },
+        onPanResponderRelease: () => {
+          updateSelectedGraphPosition(-1);
+        },
+      }),
+    [updateSelectedGraphPosition],
+  );
+
+  const renderChart = () => {
+    if (isLoading) {
+      return (
+        <View style={styles.chartContainer}>
+          <SkeletonPlaceholder>
+            <SkeletonPlaceholder.Item height={112} />
+          </SkeletonPlaceholder>
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.chartContainer} {...panResponder.panHandlers}>
+        <AreaChart
+          style={styles.chart}
+          data={parsedDataPointValues}
+          contentInset={{
+            top: insetTop,
+            right: insetRight,
+            bottom: insetBottom,
+            left: insetLeft,
+          }}
+          svg={doesChartHaveData ? { fill: `url(#dataGradient)` } : undefined}
+          yMin={0}
+        >
+          <PlotLine doesChartHaveData color={color} />
+          {doesChartHaveData && (
+            <DataGradient dataPoints={parsedDataPointValues} color={color} />
+          )}
+          <GraphCursor
+            currentX={selectedPointIndex}
+            data={parsedDataPointValues}
+            color={color}
+          />
+        </AreaChart>
+      </View>
+    );
+  };
+
+  return (
+    <View testID={testID}>
+      <ChartTimespanButtonGroup
+        buttons={timespanButtons}
+        onPress={handleTimespanPressed}
+        isLoading={isLoading}
+      />
+      {Boolean(parsedDataPointValues.length) && (
+        <GraphTooltip
+          title={parsedTitleValues[selectedPointIndex] ?? defaultTitle ?? ''}
+          subtitle={
+            parsedSubtitleValues[selectedPointIndex] ?? defaultSubtitle ?? ''
+          }
+          color={color}
+          isLoading={isLoading}
+        />
+      )}
+      {renderChart()}
+    </View>
+  );
+};
+
+export default InteractiveTimespanChart;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.styles.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.styles.ts
new file mode 100644
index 00000000000..2ecad00d77f
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.styles.ts
@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    bodyTextContainer: {
+      gap: 16,
+      padding: 16,
+    },
+    italicText: {
+      fontStyle: 'italic',
+    },
+    footer: {
+      paddingVertical: 16,
+      paddingHorizontal: 16,
+    },
+  });
+
+export default styleSheet;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.test.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.test.tsx
new file mode 100644
index 00000000000..939fee5f9b8
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.test.tsx
@@ -0,0 +1,78 @@
+import React, { ReactElement } from 'react';
+import PoolStakingLearnMoreModal from '.';
+import renderWithProvider from '../../../../../util/test/renderWithProvider';
+import { MOCK_POOL_STAKING_SDK } from '../../__mocks__/mockData';
+import { Metrics, SafeAreaProvider } from 'react-native-safe-area-context';
+import {
+  MOCK_VAULT_APY_AVERAGES,
+  MOCK_VAULT_DAILY_APYS,
+} from './mockVaultRewards';
+import { AreaChart } from 'react-native-svg-charts';
+import { fireLayoutEvent } from '../../../../../util/testUtils/react-native-svg-charts';
+import { screen } from '@testing-library/react-native';
+import { INTERACTIVE_TIMESPAN_CHART_DEFAULT_TEST_ID } from './InteractiveTimespanChart';
+
+jest.mock('@react-navigation/native', () => {
+  const actualReactNavigation = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualReactNavigation,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+    }),
+  };
+});
+
+jest.mock('../../hooks/useStakeContext', () => ({
+  __esModule: true,
+  useStakeContext: jest.fn(() => MOCK_POOL_STAKING_SDK),
+}));
+
+jest.mock('../../hooks/useVaultApyAverages', () => ({
+  __esModule: true,
+  default: () => ({
+    vaultApyAverages: MOCK_VAULT_APY_AVERAGES,
+    isLoadingVaultApyAverages: false,
+    refreshVaultApyAverages: jest.fn(),
+  }),
+}));
+
+jest.mock('../../hooks/useVaultApys', () => ({
+  __esModule: true,
+  default: () => ({
+    vaultApys: MOCK_VAULT_DAILY_APYS,
+    isLoadingVaultApys: false,
+    refreshVaultApys: jest.fn(),
+  }),
+}));
+
+const initialMetrics: Metrics = {
+  frame: { x: 0, y: 0, width: 320, height: 640 },
+  insets: { top: 0, left: 0, right: 0, bottom: 0 },
+};
+
+describe('PoolStakingLearnMoreModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('render matches snapshot', async () => {
+    const { toJSON, getByTestId } = renderWithProvider(
+      <SafeAreaProvider initialMetrics={initialMetrics}>
+        <PoolStakingLearnMoreModal />
+      </SafeAreaProvider>,
+    );
+
+    const chartContainer = getByTestId(
+      INTERACTIVE_TIMESPAN_CHART_DEFAULT_TEST_ID,
+    );
+    const areaChart = chartContainer.find(
+      (child: ReactElement) => child.type === AreaChart,
+    );
+
+    fireLayoutEvent(areaChart);
+
+    screen.debug();
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.utils.test.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.utils.test.ts
new file mode 100644
index 00000000000..762d78a2a63
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.utils.test.ts
@@ -0,0 +1,44 @@
+import { strings } from '../../../../../../locales/i18n';
+import { MOCK_VAULT_APY_AVERAGES } from './mockVaultRewards';
+import { parseVaultApyAveragesResponse } from './PoolStakingLearnMoreModal.utils';
+
+describe('PoolStakingLearnMoreModal Utils', () => {
+  describe('parseVaultApyAveragesResponse', () => {
+    it('parses the VaultApyAverageResponse', () => {
+      const result = parseVaultApyAveragesResponse(MOCK_VAULT_APY_AVERAGES);
+
+      expect(result).toEqual({
+        '1': {
+          apyAverage: '3.047713358665092375',
+          numDays: 1,
+          label: strings('stake.today'),
+        },
+        '7': {
+          apyAverage: '3.25756026351317301786',
+          numDays: 7,
+          label: strings('stake.one_week_average'),
+        },
+        '30': {
+          apyAverage: '3.25616054301749304217',
+          numDays: 30,
+          label: strings('stake.one_month_average'),
+        },
+        '90': {
+          apyAverage: '3.31863306662107446672',
+          numDays: 90,
+          label: strings('stake.three_month_average'),
+        },
+        '180': {
+          apyAverage: '3.05557344496273894133',
+          numDays: 180,
+          label: strings('stake.six_month_average'),
+        },
+        '365': {
+          apyAverage: '0',
+          numDays: 365,
+          label: strings('stake.one_year_average'),
+        },
+      });
+    });
+  });
+});
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.utils.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.utils.ts
new file mode 100644
index 00000000000..be08eab9947
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/PoolStakingLearnMoreModal.utils.ts
@@ -0,0 +1,26 @@
+import { VaultApyAverages } from '@metamask/stake-sdk';
+import { strings } from '../../../../../../locales/i18n';
+
+export const parseVaultApyAveragesResponse = (
+  vaultTimespanAprs: VaultApyAverages,
+) => {
+  const numDaysMap: Record<
+    keyof VaultApyAverages,
+    { numDays: number; label: string }
+  > = {
+    oneDay: { numDays: 1, label: strings('stake.today') },
+    oneWeek: { numDays: 7, label: strings('stake.one_week_average') },
+    oneMonth: { numDays: 30, label: strings('stake.one_month_average') },
+    threeMonths: { numDays: 90, label: strings('stake.three_month_average') },
+    sixMonths: { numDays: 180, label: strings('stake.six_month_average') },
+    oneYear: { numDays: 365, label: strings('stake.one_year_average') },
+  };
+
+  return Object.entries(vaultTimespanAprs).reduce<
+    Record<number, { apyAverage: string; numDays: number; label: string }>
+  >((map, [key, value]) => {
+    const numDaysMapEntry = numDaysMap[key as keyof typeof numDaysMap];
+    map[numDaysMapEntry.numDays] = { apyAverage: value, ...numDaysMapEntry };
+    return map;
+  }, {});
+};
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/__snapshots__/PoolStakingLearnMoreModal.test.tsx.snap b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/__snapshots__/PoolStakingLearnMoreModal.test.tsx.snap
new file mode 100644
index 00000000000..b5523c5cb34
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/__snapshots__/PoolStakingLearnMoreModal.test.tsx.snap
@@ -0,0 +1,714 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PoolStakingLearnMoreModal render matches snapshot 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "bottom": 0,
+          "justifyContent": "flex-end",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "paddingBottom": 0,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "#00000099",
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 0,
+          },
+        ]
+      }
+    >
+      <TouchableOpacity
+        onPress={[Function]}
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+          },
+          {
+            "paddingBottom": 0,
+          },
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onLayout={[Function]}
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "borderColor": "#BBC0C566",
+              "borderTopLeftRadius": 8,
+              "borderTopRightRadius": 8,
+              "borderWidth": 1,
+              "maxHeight": 1334,
+              "overflow": "hidden",
+              "paddingBottom": 0,
+              "shadowColor": "#0000001A",
+              "shadowOffset": {
+                "height": 2,
+                "width": 0,
+              },
+              "shadowOpacity": 1,
+              "shadowRadius": 40,
+            },
+            {
+              "transform": [
+                {
+                  "translateY": 1334,
+                },
+              ],
+            },
+          ]
+        }
+      >
+        <View>
+          <View
+            style={
+              {
+                "backgroundColor": "#ffffff",
+                "flexDirection": "row",
+                "padding": 16,
+              }
+            }
+            testID="header"
+          >
+            <View
+              style={
+                {
+                  "width": undefined,
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
+              />
+            </View>
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "marginHorizontal": 16,
+                }
+              }
+            >
+              <Text
+                accessibilityRole="text"
+                style={
+                  {
+                    "color": "#141618",
+                    "fontFamily": "EuclidCircularB-Bold",
+                    "fontSize": 16,
+                    "fontWeight": "700",
+                    "letterSpacing": 0,
+                    "lineHeight": 24,
+                  }
+                }
+              >
+                Stake ETH and earn
+              </Text>
+            </View>
+            <View
+              style={
+                {
+                  "width": undefined,
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
+              >
+                <TouchableOpacity
+                  accessible={true}
+                  activeOpacity={1}
+                  disabled={false}
+                  onPress={[Function]}
+                  onPressIn={[Function]}
+                  onPressOut={[Function]}
+                  style={
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 8,
+                      "height": 24,
+                      "justifyContent": "center",
+                      "opacity": 1,
+                      "width": 24,
+                    }
+                  }
+                >
+                  <SvgMock
+                    color="#141618"
+                    height={16}
+                    name="Close"
+                    style={
+                      {
+                        "height": 16,
+                        "width": 16,
+                      }
+                    }
+                    width={16}
+                  />
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+          <View
+            testID="InteractiveTimespanChart"
+          >
+            <View
+              style={
+                {
+                  "flexDirection": "row",
+                  "flexWrap": "wrap",
+                  "gap": 12,
+                  "justifyContent": "center",
+                  "marginTop": 24,
+                  "paddingBottom": 16,
+                }
+              }
+            >
+              <TouchableOpacity
+                onPress={[Function]}
+                style={
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#f2f4f6",
+                    "borderRadius": 32,
+                    "height": 36,
+                    "justifyContent": "center",
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 7,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="text"
+                  style={
+                    {
+                      "color": "#6a737d",
+                      "fontFamily": "EuclidCircularB-Medium",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0,
+                      "lineHeight": 22,
+                    }
+                  }
+                >
+                  7D
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={[Function]}
+                style={
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#ffffff",
+                    "borderRadius": 32,
+                    "height": 36,
+                    "justifyContent": "center",
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 7,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="text"
+                  style={
+                    {
+                      "color": "#6a737d",
+                      "fontFamily": "EuclidCircularB-Medium",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0,
+                      "lineHeight": 22,
+                    }
+                  }
+                >
+                  1M
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={[Function]}
+                style={
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#ffffff",
+                    "borderRadius": 32,
+                    "height": 36,
+                    "justifyContent": "center",
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 7,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="text"
+                  style={
+                    {
+                      "color": "#6a737d",
+                      "fontFamily": "EuclidCircularB-Medium",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0,
+                      "lineHeight": 22,
+                    }
+                  }
+                >
+                  3M
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={[Function]}
+                style={
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#ffffff",
+                    "borderRadius": 32,
+                    "height": 36,
+                    "justifyContent": "center",
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 7,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="text"
+                  style={
+                    {
+                      "color": "#6a737d",
+                      "fontFamily": "EuclidCircularB-Medium",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0,
+                      "lineHeight": 22,
+                    }
+                  }
+                >
+                  6M
+                </Text>
+              </TouchableOpacity>
+            </View>
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "gap": 4,
+                  "paddingVertical": 16,
+                }
+              }
+            >
+              <Text
+                accessibilityRole="text"
+                style={
+                  {
+                    "color": "#1c8234",
+                    "fontFamily": "EuclidCircularB-Bold",
+                    "fontSize": 24,
+                    "fontWeight": "700",
+                    "letterSpacing": 0,
+                    "lineHeight": 32,
+                  }
+                }
+              >
+                3.25% APR
+              </Text>
+              <Text
+                accessibilityRole="text"
+                style={
+                  {
+                    "color": "#6a737d",
+                    "fontFamily": "EuclidCircularB-Medium",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0,
+                    "lineHeight": 22,
+                  }
+                }
+              >
+                1 week average
+              </Text>
+            </View>
+            <View
+              onMoveShouldSetResponder={[Function]}
+              onMoveShouldSetResponderCapture={[Function]}
+              onResponderEnd={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderReject={[Function]}
+              onResponderRelease={[Function]}
+              onResponderStart={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              onStartShouldSetResponderCapture={[Function]}
+              style={
+                {
+                  "paddingVertical": 16,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "height": 112,
+                  }
+                }
+              >
+                <View
+                  onLayout={[Function]}
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <RNSVGSvgView
+                    bbHeight={100}
+                    bbWidth={300}
+                    focusable={false}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "height": 100,
+                          "width": 300,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 100,
+                          "width": 300,
+                        },
+                      ]
+                    }
+                  >
+                    <RNSVGGroup
+                      fill={
+                        {
+                          "payload": 4278190080,
+                          "type": 0,
+                        }
+                      }
+                    >
+                      <RNSVGPath
+                        d="M0,44.85025249125118L50,35.255971425324546L100,20L150,31.229371496223877L200,45.39613604488909L250,49.50466282315335L300,40.850895011093414L300,80L250,80L200,80L150,80L100,80L50,80L0,80Z"
+                        fill={
+                          {
+                            "brushRef": "dataGradient",
+                            "type": 1,
+                          }
+                        }
+                        propList={
+                          [
+                            "fill",
+                          ]
+                        }
+                      />
+                      <RNSVGPath
+                        d="M0,44.85025249125118L50,35.255971425324546L100,20L150,31.229371496223877L200,45.39613604488909L250,49.50466282315335L300,40.850895011093414"
+                        fill={null}
+                        opacity={1}
+                        propList={
+                          [
+                            "fill",
+                            "stroke",
+                            "strokeWidth",
+                          ]
+                        }
+                        stroke={
+                          {
+                            "payload": 4280058420,
+                            "type": 0,
+                          }
+                        }
+                        strokeWidth={1.75}
+                        testID="InteractiveChartPlotLine"
+                      />
+                      <RNSVGDefs>
+                        <RNSVGLinearGradient
+                          gradient={
+                            [
+                              0,
+                              857506356,
+                              1,
+                              872415231,
+                            ]
+                          }
+                          gradientTransform={null}
+                          gradientUnits={0}
+                          name="dataGradient"
+                          x1={0}
+                          x2={0}
+                          y1={0}
+                          y2="100%"
+                        />
+                      </RNSVGDefs>
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            style={
+              {
+                "gap": 16,
+                "padding": 16,
+              }
+            }
+          >
+            <Text
+              accessibilityRole="text"
+              style={
+                {
+                  "color": "#141618",
+                  "fontFamily": "EuclidCircularB-Medium",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0,
+                  "lineHeight": 22,
+                }
+              }
+            >
+              Stake any amount of ETH.
+               
+              <Text
+                accessibilityRole="text"
+                style={
+                  {
+                    "color": "#6a737d",
+                    "fontFamily": "EuclidCircularB-Regular",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "letterSpacing": 0,
+                    "lineHeight": 22,
+                  }
+                }
+              >
+                No minimum required.
+              </Text>
+            </Text>
+            <Text
+              accessibilityRole="text"
+              style={
+                {
+                  "color": "#141618",
+                  "fontFamily": "EuclidCircularB-Medium",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0,
+                  "lineHeight": 22,
+                }
+              }
+            >
+              Earn ETH rewards.
+               
+              <Text
+                accessibilityRole="text"
+                style={
+                  {
+                    "color": "#6a737d",
+                    "fontFamily": "EuclidCircularB-Regular",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "letterSpacing": 0,
+                    "lineHeight": 22,
+                  }
+                }
+              >
+                Start earning as soon as you stake. Rewards compound automatically.
+              </Text>
+            </Text>
+            <Text
+              accessibilityRole="text"
+              style={
+                {
+                  "color": "#141618",
+                  "fontFamily": "EuclidCircularB-Medium",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0,
+                  "lineHeight": 22,
+                }
+              }
+            >
+              Flexible unstaking.
+               
+              <Text
+                accessibilityRole="text"
+                style={
+                  {
+                    "color": "#6a737d",
+                    "fontFamily": "EuclidCircularB-Regular",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "letterSpacing": 0,
+                    "lineHeight": 22,
+                  }
+                }
+              >
+                Unstake anytime. Typically takes less than 3 days, but can take up to 11 days to process.
+              </Text>
+            </Text>
+            <Text
+              accessibilityRole="text"
+              style={
+                {
+                  "color": "#6a737d",
+                  "fontFamily": "EuclidCircularB-RegularItalic",
+                  "fontSize": 12,
+                  "fontStyle": "italic",
+                  "fontWeight": "400",
+                  "letterSpacing": 0,
+                  "lineHeight": 20,
+                }
+              }
+            >
+              Staking does not guarantee rewards, and involves risks including a loss of funds.
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            {
+              "backgroundColor": "#ffffff",
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 16,
+            }
+          }
+          testID="bottomsheetfooter"
+        >
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessible={true}
+            activeOpacity={1}
+            onPress={[Function]}
+            onPressIn={[Function]}
+            onPressOut={[Function]}
+            style={
+              {
+                "alignItems": "center",
+                "alignSelf": "flex-start",
+                "backgroundColor": "transparent",
+                "borderColor": "#0376c9",
+                "borderRadius": 24,
+                "borderWidth": 1,
+                "flex": 1,
+                "flexDirection": "row",
+                "height": 48,
+                "justifyContent": "center",
+                "paddingHorizontal": 16,
+              }
+            }
+            testID="bottomsheetfooter-button"
+          >
+            <Text
+              accessibilityRole="text"
+              style={
+                {
+                  "color": "#0376c9",
+                  "fontFamily": "EuclidCircularB-Medium",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0,
+                  "lineHeight": 22,
+                }
+              }
+            >
+              Learn more
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessible={true}
+            activeOpacity={1}
+            onPress={[Function]}
+            onPressIn={[Function]}
+            onPressOut={[Function]}
+            style={
+              {
+                "alignItems": "center",
+                "alignSelf": "flex-start",
+                "backgroundColor": "#0376c9",
+                "borderRadius": 24,
+                "flex": 1,
+                "flexDirection": "row",
+                "height": 48,
+                "justifyContent": "center",
+                "marginLeft": 16,
+                "marginTop": 0,
+                "paddingHorizontal": 16,
+              }
+            }
+            testID="bottomsheetfooter-button-subsequent"
+          >
+            <Text
+              accessibilityRole="text"
+              style={
+                {
+                  "color": "#ffffff",
+                  "fontFamily": "EuclidCircularB-Medium",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0,
+                  "lineHeight": 22,
+                }
+              }
+            >
+              Got it
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/index.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/index.tsx
new file mode 100644
index 00000000000..049cb8239c9
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/index.tsx
@@ -0,0 +1,206 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import BottomSheet, {
+  BottomSheetRef,
+} from '../../../../../component-library/components/BottomSheets/BottomSheet';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
+import { View } from 'react-native';
+import BottomSheetHeader from '../../../../../component-library/components/BottomSheets/BottomSheetHeader';
+import BottomSheetFooter, {
+  ButtonsAlignment,
+} from '../../../../../component-library/components/BottomSheets/BottomSheetFooter';
+import {
+  ButtonProps,
+  ButtonSize,
+  ButtonVariants,
+} from '../../../../../component-library/components/Buttons/Button/Button.types';
+import { useNavigation } from '@react-navigation/native';
+import { POOLED_STAKING_FAQ_URL } from '../../constants';
+import styleSheet from './PoolStakingLearnMoreModal.styles';
+import { useStyles } from '../../../../hooks/useStyles';
+import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
+import useVaultApys from '../../hooks/useVaultApys';
+import InteractiveTimespanChart from './InteractiveTimespanChart';
+import BigNumber from 'bignumber.js';
+import {
+  formatChartDate,
+  getGraphInsetsByDataPointLength,
+} from './InteractiveTimespanChart/InteractiveTimespanChart.utils';
+import { strings } from '../../../../../../locales/i18n';
+import { parseVaultApyAveragesResponse } from './PoolStakingLearnMoreModal.utils';
+import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
+import useVaultApyAverages from '../../hooks/useVaultApyAverages';
+
+const BodyText = () => {
+  const { styles } = useStyles(styleSheet, {});
+
+  return (
+    <View style={styles.bodyTextContainer}>
+      <Text variant={TextVariant.BodyMDMedium}>
+        {strings('stake.stake_any_amount_of_eth')}{' '}
+        <Text color={TextColor.Alternative}>
+          {strings('stake.no_minimum_required')}
+        </Text>
+      </Text>
+      <Text variant={TextVariant.BodyMDMedium}>
+        {strings('stake.earn_eth_rewards')}{' '}
+        <Text color={TextColor.Alternative}>
+          {strings('stake.earn_eth_rewards_description')}
+        </Text>
+      </Text>
+      <Text variant={TextVariant.BodyMDMedium}>
+        {strings('stake.flexible_unstaking')}{' '}
+        <Text color={TextColor.Alternative}>
+          {strings('stake.flexible_unstaking_description')}
+        </Text>
+      </Text>
+      <Text
+        variant={TextVariant.BodySM}
+        color={TextColor.Alternative}
+        style={styles.italicText}
+      >
+        {strings('stake.disclaimer')}
+      </Text>
+    </View>
+  );
+};
+
+const PoolStakingLearnMoreModal = () => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const { trackEvent, createEventBuilder } = useMetrics();
+
+  const { navigate } = useNavigation();
+
+  const sheetRef = useRef<BottomSheetRef>(null);
+
+  const { vaultApys, isLoadingVaultApys, refreshVaultApys } = useVaultApys();
+
+  const {
+    vaultApyAverages,
+    isLoadingVaultApyAverages,
+    refreshVaultApyAverages,
+  } = useVaultApyAverages();
+
+  // Converts VaultApyAverage for use with interactive graph timespan buttons.
+  const parsedVaultTimespanApyAverages = useMemo(() => {
+    if (isLoadingVaultApyAverages) return;
+    return parseVaultApyAveragesResponse(vaultApyAverages);
+  }, [isLoadingVaultApyAverages, vaultApyAverages]);
+
+  const [activeTimespanApyAverage, setActiveTimespanApyAverage] = useState(
+    parsedVaultTimespanApyAverages?.[7],
+  );
+
+  useEffect(() => {
+    if (parsedVaultTimespanApyAverages) {
+      setActiveTimespanApyAverage(parsedVaultTimespanApyAverages?.[7]);
+    }
+  }, [parsedVaultTimespanApyAverages]);
+
+  useEffect(() => {
+    async function refreshGraphData() {
+      await Promise.all([refreshVaultApyAverages(), refreshVaultApys()]).catch(
+        (err) =>
+          console.error(
+            'Failed to refresh Pool-Staking Learn More Modal Data: ',
+            err,
+          ),
+      );
+    }
+
+    refreshGraphData();
+  }, [refreshVaultApyAverages, refreshVaultApys]);
+
+  const handleClose = () => {
+    sheetRef.current?.onCloseBottomSheet();
+  };
+
+  const redirectToLearnMore = () => {
+    navigate('Webview', {
+      screen: 'SimpleWebview',
+      params: {
+        url: POOLED_STAKING_FAQ_URL,
+      },
+    });
+
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED)
+        .addProperties({
+          selected_provider: EVENT_PROVIDERS.CONSENSYS,
+          text: 'Learn More',
+          location: EVENT_LOCATIONS.LEARN_MORE_MODAL,
+        })
+        .build(),
+    );
+  };
+
+  const footerButtons: ButtonProps[] = [
+    {
+      variant: ButtonVariants.Secondary,
+      label: strings('stake.learn_more'),
+      size: ButtonSize.Lg,
+      labelTextVariant: TextVariant.BodyMDMedium,
+      onPress: redirectToLearnMore,
+    },
+    {
+      variant: ButtonVariants.Primary,
+      label: strings('stake.got_it'),
+      labelTextVariant: TextVariant.BodyMDMedium,
+      size: ButtonSize.Lg,
+      onPress: handleClose,
+    },
+  ];
+
+  const handleTimespanPressed = (numDataPointsToDisplay: number) => {
+    setActiveTimespanApyAverage(
+      parsedVaultTimespanApyAverages?.[numDataPointsToDisplay],
+    );
+  };
+
+  return (
+    <BottomSheet ref={sheetRef} isInteractable={false}>
+      <View>
+        <BottomSheetHeader onClose={handleClose}>
+          <Text variant={TextVariant.HeadingSM}>
+            {strings('stake.stake_eth_and_earn')}
+          </Text>
+        </BottomSheetHeader>
+        {Boolean(vaultApys.length) && activeTimespanApyAverage && (
+          <InteractiveTimespanChart
+            dataPoints={vaultApys}
+            yAccessor={(point) => new BigNumber(point.daily_apy).toNumber()}
+            defaultTitle={`${new BigNumber(
+              activeTimespanApyAverage.apyAverage,
+            ).toFixed(2, BigNumber.ROUND_DOWN)}% ${strings('stake.apr')}`}
+            titleAccessor={(point) =>
+              `${new BigNumber(point.daily_apy).toFixed(
+                2,
+                BigNumber.ROUND_DOWN,
+              )}% ${strings('stake.apr')}`
+            }
+            defaultSubtitle={activeTimespanApyAverage.label}
+            subtitleAccessor={(point) => formatChartDate(point.timestamp)}
+            onTimespanPressed={handleTimespanPressed}
+            graphOptions={{
+              ...getGraphInsetsByDataPointLength(
+                activeTimespanApyAverage.numDays,
+              ),
+            }}
+            isLoading={isLoadingVaultApyAverages || isLoadingVaultApys}
+          />
+        )}
+        <BodyText />
+      </View>
+      <BottomSheetFooter
+        buttonsAlignment={ButtonsAlignment.Horizontal}
+        buttonPropsArray={footerButtons}
+        style={styles.footer}
+      />
+    </BottomSheet>
+  );
+};
+
+export default PoolStakingLearnMoreModal;
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/mockVaultRewards.ts b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/mockVaultRewards.ts
new file mode 100644
index 00000000000..1410be9afaf
--- /dev/null
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/mockVaultRewards.ts
@@ -0,0 +1,1972 @@
+export const MOCK_VAULT_DAILY_APYS = [
+  {
+    id: 30811,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-12-01T00:00:00.000Z',
+    daily_apy: '3.047713358665092375',
+    created_at: '2024-12-03T02:24:25.394Z',
+    updated_at: '2024-12-03T02:24:25.394Z',
+  },
+  {
+    id: 30812,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-30T00:00:00.000Z',
+    daily_apy: '2.374027363261760640',
+    created_at: '2024-12-03T02:24:25.394Z',
+    updated_at: '2024-12-03T02:24:25.394Z',
+  },
+  {
+    id: 30813,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-29T00:00:00.000Z',
+    daily_apy: '2.693871506572250360',
+    created_at: '2024-12-03T02:24:25.394Z',
+    updated_at: '2024-12-03T02:24:25.394Z',
+  },
+  {
+    id: 30814,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-28T00:00:00.000Z',
+    daily_apy: '3.796738036375794450',
+    created_at: '2024-12-03T02:24:25.394Z',
+    updated_at: '2024-12-03T02:24:25.394Z',
+  },
+  {
+    id: 30815,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-27T00:00:00.000Z',
+    daily_apy: '4.670931853275371805',
+    created_at: '2024-12-03T02:24:25.394Z',
+    updated_at: '2024-12-03T02:24:25.394Z',
+  },
+  {
+    id: 30816,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-26T00:00:00.000Z',
+    daily_apy: '3.483271805221916990',
+    created_at: '2024-12-03T02:24:25.394Z',
+    updated_at: '2024-12-03T02:24:25.394Z',
+  },
+  {
+    id: 30817,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-25T00:00:00.000Z',
+    daily_apy: '2.736367921220024505',
+    created_at: '2024-12-03T02:24:25.394Z',
+    updated_at: '2024-12-03T02:24:25.394Z',
+  },
+  {
+    id: 32417,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-24T00:00:00.000Z',
+    daily_apy: '3.534495955637539800',
+    created_at: '2024-12-03T02:27:00.663Z',
+    updated_at: '2024-12-03T02:27:00.663Z',
+  },
+  {
+    id: 32418,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-23T00:00:00.000Z',
+    daily_apy: '3.618680893537944930',
+    created_at: '2024-12-03T02:27:00.663Z',
+    updated_at: '2024-12-03T02:27:00.663Z',
+  },
+  {
+    id: 32419,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-22T00:00:00.000Z',
+    daily_apy: '2.585422599246136705',
+    created_at: '2024-12-03T02:27:00.663Z',
+    updated_at: '2024-12-03T02:27:00.663Z',
+  },
+  {
+    id: 32420,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-21T00:00:00.000Z',
+    daily_apy: '2.240039054731340650',
+    created_at: '2024-12-03T02:27:00.663Z',
+    updated_at: '2024-12-03T02:27:00.663Z',
+  },
+  {
+    id: 32421,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-20T00:00:00.000Z',
+    daily_apy: '3.651052140119355455',
+    created_at: '2024-12-03T02:27:00.663Z',
+    updated_at: '2024-12-03T02:27:00.663Z',
+  },
+  {
+    id: 32422,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-19T00:00:00.000Z',
+    daily_apy: '2.506632375891806475',
+    created_at: '2024-12-03T02:27:00.663Z',
+    updated_at: '2024-12-03T02:27:00.663Z',
+  },
+  {
+    id: 32423,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-18T00:00:00.000Z',
+    daily_apy: '2.872025090448259090',
+    created_at: '2024-12-03T02:27:00.663Z',
+    updated_at: '2024-12-03T02:27:00.663Z',
+  },
+  {
+    id: 32641,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-17T00:00:00.000Z',
+    daily_apy: '3.157959704077514705',
+    created_at: '2024-12-03T02:58:41.610Z',
+    updated_at: '2024-12-03T02:58:41.610Z',
+  },
+  {
+    id: 32642,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-16T00:00:00.000Z',
+    daily_apy: '2.622634245111253455',
+    created_at: '2024-12-03T02:58:41.610Z',
+    updated_at: '2024-12-03T02:58:41.610Z',
+  },
+  {
+    id: 32643,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-15T00:00:00.000Z',
+    daily_apy: '4.828325095618376680',
+    created_at: '2024-12-03T02:58:41.610Z',
+    updated_at: '2024-12-03T02:58:41.610Z',
+  },
+  {
+    id: 30374,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-14T00:00:00.000Z',
+    daily_apy: '7.570681567721108840',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30375,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-13T00:00:00.000Z',
+    daily_apy: '3.362172827993447500',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30376,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-12T00:00:00.000Z',
+    daily_apy: '2.655301031295096130',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30377,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-11T00:00:00.000Z',
+    daily_apy: '2.291560167659580065',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30378,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-10T00:00:00.000Z',
+    daily_apy: '3.234149840498893705',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30379,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-09T00:00:00.000Z',
+    daily_apy: '2.627325624026692105',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30380,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-08T00:00:00.000Z',
+    daily_apy: '2.883003597388662250',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30381,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-07T00:00:00.000Z',
+    daily_apy: '3.539049184497994095',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30382,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-06T00:00:00.000Z',
+    daily_apy: '3.122506006011512920',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30383,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-05T00:00:00.000Z',
+    daily_apy: '2.969004267883762945',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30384,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-04T00:00:00.000Z',
+    daily_apy: '3.543391473816768735',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30385,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-03T00:00:00.000Z',
+    daily_apy: '2.614703901249170420',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30386,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-02T00:00:00.000Z',
+    daily_apy: '2.851777801470362485',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30387,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-11-01T00:00:00.000Z',
+    daily_apy: '1.362749440155165845',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30388,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-31T00:00:00.000Z',
+    daily_apy: '2.317992455458956255',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30389,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-30T00:00:00.000Z',
+    daily_apy: '4.228246080578602980',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30390,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-29T00:00:00.000Z',
+    daily_apy: '4.834650563792100440',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30391,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-28T00:00:00.000Z',
+    daily_apy: '2.294284048308392440',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30392,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-27T00:00:00.000Z',
+    daily_apy: '3.181524840097507885',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30393,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-26T00:00:00.000Z',
+    daily_apy: '2.531737997552887820',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30394,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-25T00:00:00.000Z',
+    daily_apy: '2.920907624246012040',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30395,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-24T00:00:00.000Z',
+    daily_apy: '3.487578929974390625',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30396,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-23T00:00:00.000Z',
+    daily_apy: '6.464622001613073880',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30397,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-22T00:00:00.000Z',
+    daily_apy: '2.416118435481787000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30398,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-21T00:00:00.000Z',
+    daily_apy: '2.534839202824700575',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30399,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-20T00:00:00.000Z',
+    daily_apy: '2.786900807410635305',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30400,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-19T00:00:00.000Z',
+    daily_apy: '3.329041650263329780',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30401,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-18T00:00:00.000Z',
+    daily_apy: '3.078464281045574940',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30402,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-17T00:00:00.000Z',
+    daily_apy: '3.721718136481169120',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30403,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-16T00:00:00.000Z',
+    daily_apy: '3.024877063179648550',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30404,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-15T00:00:00.000Z',
+    daily_apy: '2.588268026990254210',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30405,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-14T00:00:00.000Z',
+    daily_apy: '3.510149488431237235',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30406,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-13T00:00:00.000Z',
+    daily_apy: '4.337366463128407770',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30407,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-12T00:00:00.000Z',
+    daily_apy: '2.622541164587319365',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30408,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-11T00:00:00.000Z',
+    daily_apy: '5.087827478909440335',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30409,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-10T00:00:00.000Z',
+    daily_apy: '2.888400767069300875',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30410,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-09T00:00:00.000Z',
+    daily_apy: '2.942379322023959655',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30411,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-08T00:00:00.000Z',
+    daily_apy: '4.758321460565382260',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30412,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-07T00:00:00.000Z',
+    daily_apy: '2.870844140742744300',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30413,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-06T00:00:00.000Z',
+    daily_apy: '2.869731551484030070',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30414,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-05T00:00:00.000Z',
+    daily_apy: '3.270239518113502870',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30415,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-04T00:00:00.000Z',
+    daily_apy: '3.377047829615380755',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30416,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-03T00:00:00.000Z',
+    daily_apy: '2.680414799287292270',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30417,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-02T00:00:00.000Z',
+    daily_apy: '5.194847990413809090',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30418,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-10-01T00:00:00.000Z',
+    daily_apy: '5.359025198735055555',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30419,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-30T00:00:00.000Z',
+    daily_apy: '3.498028160103718420',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30420,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-29T00:00:00.000Z',
+    daily_apy: '3.022067375680475545',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30421,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-28T00:00:00.000Z',
+    daily_apy: '3.515232148767582560',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30422,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-27T00:00:00.000Z',
+    daily_apy: '2.747788452887955430',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30423,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-26T00:00:00.000Z',
+    daily_apy: '3.457506644076493260',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30424,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-25T00:00:00.000Z',
+    daily_apy: '3.163215337861171550',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30425,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-24T00:00:00.000Z',
+    daily_apy: '2.781449530324174490',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30426,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-23T00:00:00.000Z',
+    daily_apy: '3.444553679295769475',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30427,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-22T00:00:00.000Z',
+    daily_apy: '3.615890789268085540',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30428,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-21T00:00:00.000Z',
+    daily_apy: '3.783487027876330390',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30429,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-20T00:00:00.000Z',
+    daily_apy: '2.793962833803302975',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30430,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-19T00:00:00.000Z',
+    daily_apy: '2.336291731934608550',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30431,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-18T00:00:00.000Z',
+    daily_apy: '5.230878582188418850',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30432,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-17T00:00:00.000Z',
+    daily_apy: '4.961095154393177570',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30433,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-16T00:00:00.000Z',
+    daily_apy: '2.857234395901653520',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30434,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-15T00:00:00.000Z',
+    daily_apy: '2.554259416323348015',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30435,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-14T00:00:00.000Z',
+    daily_apy: '2.502517936499143255',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30436,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-13T00:00:00.000Z',
+    daily_apy: '2.919413472986257835',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30437,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-12T00:00:00.000Z',
+    daily_apy: '2.253695128405357685',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30438,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-11T00:00:00.000Z',
+    daily_apy: '5.025628324941498070',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30439,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-10T00:00:00.000Z',
+    daily_apy: '3.132769524752376680',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30440,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-09T00:00:00.000Z',
+    daily_apy: '2.629620582604735830',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30441,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-08T00:00:00.000Z',
+    daily_apy: '3.731372666409049255',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30442,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-07T00:00:00.000Z',
+    daily_apy: '5.828785040870107505',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30443,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-06T00:00:00.000Z',
+    daily_apy: '2.971736749821089335',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30444,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-05T00:00:00.000Z',
+    daily_apy: '2.712179768964885160',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30445,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-04T00:00:00.000Z',
+    daily_apy: '2.321398139108928040',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30446,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-03T00:00:00.000Z',
+    daily_apy: '2.326442350761163855',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30447,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-02T00:00:00.000Z',
+    daily_apy: '2.758655113631115610',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30448,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-09-01T00:00:00.000Z',
+    daily_apy: '3.099416819734417855',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30449,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-31T00:00:00.000Z',
+    daily_apy: '3.281691001470881575',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30450,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-30T00:00:00.000Z',
+    daily_apy: '3.023577966482376885',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30451,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-29T00:00:00.000Z',
+    daily_apy: '3.683348259308245445',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30452,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-28T00:00:00.000Z',
+    daily_apy: '2.586788055591379710',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30453,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-27T00:00:00.000Z',
+    daily_apy: '2.959039650647310180',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30454,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-26T00:00:00.000Z',
+    daily_apy: '2.593486057627900915',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30455,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-25T00:00:00.000Z',
+    daily_apy: '3.323775605030482850',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30456,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-24T00:00:00.000Z',
+    daily_apy: '2.197262519566287600',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30457,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-23T00:00:00.000Z',
+    daily_apy: '2.702516114239033255',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30458,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-22T00:00:00.000Z',
+    daily_apy: '2.926890836321897870',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30459,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-21T00:00:00.000Z',
+    daily_apy: '3.380765228180999895',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30460,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-20T00:00:00.000Z',
+    daily_apy: '2.689831553087454675',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30461,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-19T00:00:00.000Z',
+    daily_apy: '2.958770938479942705',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30462,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-18T00:00:00.000Z',
+    daily_apy: '5.434974140299470420',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30463,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-17T00:00:00.000Z',
+    daily_apy: '3.454110345968870185',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30464,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-16T00:00:00.000Z',
+    daily_apy: '2.777023047025403195',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30465,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-15T00:00:00.000Z',
+    daily_apy: '2.837657203837507480',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30466,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-14T00:00:00.000Z',
+    daily_apy: '2.300020372541650960',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30467,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-13T00:00:00.000Z',
+    daily_apy: '2.323147177653682930',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30468,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-12T00:00:00.000Z',
+    daily_apy: '2.331685970310938245',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30469,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-11T00:00:00.000Z',
+    daily_apy: '2.279761127014401090',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30470,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-10T00:00:00.000Z',
+    daily_apy: '2.263114267718659595',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30471,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-09T00:00:00.000Z',
+    daily_apy: '2.991068093920181045',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30472,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-08T00:00:00.000Z',
+    daily_apy: '4.533909729385242935',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30473,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-07T00:00:00.000Z',
+    daily_apy: '2.155210333922089485',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30474,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-06T00:00:00.000Z',
+    daily_apy: '2.574385000071578000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30475,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-05T00:00:00.000Z',
+    daily_apy: '3.768695915370404235',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30476,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-04T00:00:00.000Z',
+    daily_apy: '4.676043428921250930',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30477,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-03T00:00:00.000Z',
+    daily_apy: '2.249688552084926815',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30478,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-02T00:00:00.000Z',
+    daily_apy: '2.254096035265265300',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30479,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-08-01T00:00:00.000Z',
+    daily_apy: '2.778784182467609720',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30480,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-31T00:00:00.000Z',
+    daily_apy: '3.598756061847139645',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30481,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-30T00:00:00.000Z',
+    daily_apy: '2.889798307403520510',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30482,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-29T00:00:00.000Z',
+    daily_apy: '2.257755634406335615',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30483,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-28T00:00:00.000Z',
+    daily_apy: '2.903818523622759035',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30484,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-27T00:00:00.000Z',
+    daily_apy: '2.194343497321323035',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30485,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-26T00:00:00.000Z',
+    daily_apy: '2.531389392183063185',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30486,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-25T00:00:00.000Z',
+    daily_apy: '2.576564274572318530',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30487,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-24T00:00:00.000Z',
+    daily_apy: '3.361248881640692735',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30488,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-23T00:00:00.000Z',
+    daily_apy: '2.159336673466494145',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30489,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-22T00:00:00.000Z',
+    daily_apy: '3.753686378747723055',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30490,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-21T00:00:00.000Z',
+    daily_apy: '2.504556332995523375',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30491,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-20T00:00:00.000Z',
+    daily_apy: '4.458366899429292075',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30492,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-19T00:00:00.000Z',
+    daily_apy: '3.962002868625742575',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30493,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-18T00:00:00.000Z',
+    daily_apy: '2.275736267398248645',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30494,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-17T00:00:00.000Z',
+    daily_apy: '2.286214594572331580',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30495,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-16T00:00:00.000Z',
+    daily_apy: '1.126336824812119845',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30496,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-15T00:00:00.000Z',
+    daily_apy: '2.304904188157754480',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30497,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-14T00:00:00.000Z',
+    daily_apy: '3.662861269396721590',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30498,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-13T00:00:00.000Z',
+    daily_apy: '3.720636048952374355',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30499,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-12T00:00:00.000Z',
+    daily_apy: '3.463465666041776330',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30500,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-11T00:00:00.000Z',
+    daily_apy: '2.318306986717077580',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30501,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-10T00:00:00.000Z',
+    daily_apy: '2.311853000443324125',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30502,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-09T00:00:00.000Z',
+    daily_apy: '3.934771841746629310',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30503,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-08T00:00:00.000Z',
+    daily_apy: '2.351177891454405425',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30504,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-07T00:00:00.000Z',
+    daily_apy: '3.087579260734750255',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30505,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-06T00:00:00.000Z',
+    daily_apy: '5.765233307391727325',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30506,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-05T00:00:00.000Z',
+    daily_apy: '3.363953349551386355',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30507,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-04T00:00:00.000Z',
+    daily_apy: '2.280186332407832965',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30508,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-03T00:00:00.000Z',
+    daily_apy: '3.007837989716010920',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30509,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-02T00:00:00.000Z',
+    daily_apy: '2.843715061822729830',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30510,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-07-01T00:00:00.000Z',
+    daily_apy: '1.974134788910464175',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30511,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-30T00:00:00.000Z',
+    daily_apy: '1.929374405945043860',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30512,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-29T00:00:00.000Z',
+    daily_apy: '4.141896618375235450',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30513,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-28T00:00:00.000Z',
+    daily_apy: '2.778185285133067925',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30514,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-27T00:00:00.000Z',
+    daily_apy: '3.561667835195156855',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30515,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-26T00:00:00.000Z',
+    daily_apy: '4.199636691030941605',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30516,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-25T00:00:00.000Z',
+    daily_apy: '2.021887459642524845',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30517,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-24T00:00:00.000Z',
+    daily_apy: '3.707418523183212035',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30518,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-23T00:00:00.000Z',
+    daily_apy: '2.801808101333867040',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30519,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-22T00:00:00.000Z',
+    daily_apy: '2.004672119821973500',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30520,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-21T00:00:00.000Z',
+    daily_apy: '1.820692138353493235',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30521,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-20T00:00:00.000Z',
+    daily_apy: '1.559327391719814535',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30522,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-19T00:00:00.000Z',
+    daily_apy: '1.364862690606185665',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30523,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-18T00:00:00.000Z',
+    daily_apy: '0.845956118391324915',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30524,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-17T00:00:00.000Z',
+    daily_apy: '1.361314728183116150',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30525,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-16T00:00:00.000Z',
+    daily_apy: '1.391434686844762115',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30526,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-15T00:00:00.000Z',
+    daily_apy: '1.472151428581957885',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30527,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-14T00:00:00.000Z',
+    daily_apy: '1.823003454582278985',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30528,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-13T00:00:00.000Z',
+    daily_apy: '2.044203260197571665',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30529,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-12T00:00:00.000Z',
+    daily_apy: '6.705066380450656825',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30530,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-11T00:00:00.000Z',
+    daily_apy: '7.907906402459636865',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30531,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-10T00:00:00.000Z',
+    daily_apy: '2.374766931268760560',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30532,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-09T00:00:00.000Z',
+    daily_apy: '2.366007947305724535',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30533,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-08T00:00:00.000Z',
+    daily_apy: '1.523878876177998020',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30534,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-07T00:00:00.000Z',
+    daily_apy: '0.094508212685594800',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30535,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-06T00:00:00.000Z',
+    daily_apy: '0.072407848225008390',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30536,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-05T00:00:00.000Z',
+    daily_apy: '0.072489522032946980',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30537,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-04T00:00:00.000Z',
+    daily_apy: '0.070746694790166750',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30538,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-03T00:00:00.000Z',
+    daily_apy: '0.215303792393695195',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30539,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-02T00:00:00.000Z',
+    daily_apy: '2.195960866902139330',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30540,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-06-01T00:00:00.000Z',
+    daily_apy: '2.200990805504935545',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30541,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-31T00:00:00.000Z',
+    daily_apy: '2.211678281928328770',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30542,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-30T00:00:00.000Z',
+    daily_apy: '2.167548819689490420',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30543,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-29T00:00:00.000Z',
+    daily_apy: '2.177899685405083380',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30544,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-28T00:00:00.000Z',
+    daily_apy: '2.218851412828056650',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30545,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-27T00:00:00.000Z',
+    daily_apy: '1.094568892756657840',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30546,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-26T00:00:00.000Z',
+    daily_apy: '2.184920472452669405',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30547,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-25T00:00:00.000Z',
+    daily_apy: '2.202222029737560935',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30548,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-24T00:00:00.000Z',
+    daily_apy: '2.206879150349765095',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30549,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-23T00:00:00.000Z',
+    daily_apy: '2.215298661389291480',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30550,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-22T00:00:00.000Z',
+    daily_apy: '2.217233441102825000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30551,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-21T00:00:00.000Z',
+    daily_apy: '1.193527213875311720',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30552,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-20T00:00:00.000Z',
+    daily_apy: '1.124835528112627785',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30553,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-19T00:00:00.000Z',
+    daily_apy: '1.196825341296003915',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30554,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-18T00:00:00.000Z',
+    daily_apy: '1.765568877029704045',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30555,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-17T00:00:00.000Z',
+    daily_apy: '2.381201903284023180',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30556,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-16T00:00:00.000Z',
+    daily_apy: '2.195594345416939965',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30557,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-15T00:00:00.000Z',
+    daily_apy: '2.350709832262763830',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30558,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-14T00:00:00.000Z',
+    daily_apy: '2.338171617200318075',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30559,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-13T00:00:00.000Z',
+    daily_apy: '2.333871959470894345',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30560,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-12T00:00:00.000Z',
+    daily_apy: '2.345931233499345705',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30561,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-11T00:00:00.000Z',
+    daily_apy: '78.811544452454367715',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30562,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-10T00:00:00.000Z',
+    daily_apy: '2.355069455220621030',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30563,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-09T00:00:00.000Z',
+    daily_apy: '2.354385810268765990',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30564,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-08T00:00:00.000Z',
+    daily_apy: '2.361396301320085265',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30565,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-07T00:00:00.000Z',
+    daily_apy: '0.021170497701498750',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30566,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-06T00:00:00.000Z',
+    daily_apy: '0.000000000000000000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30567,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-05T00:00:00.000Z',
+    daily_apy: '0.000000000000000000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30568,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-04T00:00:00.000Z',
+    daily_apy: '0.000000000000000000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30569,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-03T00:00:00.000Z',
+    daily_apy: '0.000000000000000000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30570,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-02T00:00:00.000Z',
+    daily_apy: '0.000000000000000000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30571,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-05-01T00:00:00.000Z',
+    daily_apy: '0.000000000000000000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30572,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-04-24T00:00:00.000Z',
+    daily_apy: '0.000000000000000000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+  {
+    id: 30573,
+    chain_id: 1,
+    vault_address: '0xabc',
+    timestamp: '2024-04-23T00:00:00.000Z',
+    daily_apy: '0.000000000000000000',
+    created_at: '2024-12-03T02:23:27.557Z',
+    updated_at: '2024-12-03T02:23:27.557Z',
+  },
+].reverse();
+
+export const MOCK_VAULT_APYS_ONE_WEEK = MOCK_VAULT_DAILY_APYS.slice(-7);
+
+export const MOCK_VAULT_APYS_ONE_MONTH = MOCK_VAULT_DAILY_APYS.slice(-30);
+
+export const MOCK_VAULT_APYS_SIX_MONTHS = MOCK_VAULT_DAILY_APYS.slice(-90);
+
+export const MOCK_VAULT_APYS_ONE_YEAR = MOCK_VAULT_DAILY_APYS.slice(-365);
+
+export const MOCK_VAULT_APY_AVERAGES = {
+  oneDay: '3.047713358665092375',
+  oneWeek: '3.25756026351317301786',
+  oneMonth: '3.25616054301749304217',
+  threeMonths: '3.31863306662107446672',
+  sixMonths: '3.05557344496273894133',
+  oneYear: '0',
+} as const;
diff --git a/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx b/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
index 98c3e8fc987..ec37e504eb9 100644
--- a/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
+++ b/app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx
@@ -162,8 +162,8 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
           ? MetaMetricsEvents.STAKE_TRANSACTION_INITIATED
           : MetaMetricsEvents.UNSTAKE_TRANSACTION_INITIATED,
         location: isStaking
-          ? 'StakeConfirmationView'
-          : 'UnstakeConfirmationView',
+          ? EVENT_LOCATIONS.STAKE_CONFIRMATION_VIEW
+          : EVENT_LOCATIONS.UNSTAKE_CONFIRMATION_VIEW,
       };
 
       trackEvent(
@@ -205,7 +205,9 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
       name: isStaking
         ? MetaMetricsEvents.STAKE_CANCEL_CLICKED
         : MetaMetricsEvents.UNSTAKE_CANCEL_CLICKED,
-      location: isStaking ? 'StakeConfirmationView' : 'UnstakeConfirmationView',
+      location: isStaking
+        ? EVENT_LOCATIONS.STAKE_CONFIRMATION_VIEW
+        : EVENT_LOCATIONS.UNSTAKE_CONFIRMATION_VIEW,
     };
 
     trackEvent(
diff --git a/app/components/UI/Stake/hooks/usePooledStakes.test.tsx b/app/components/UI/Stake/hooks/usePooledStakes.test.tsx
index 3145cda0f08..fbfe27321ba 100644
--- a/app/components/UI/Stake/hooks/usePooledStakes.test.tsx
+++ b/app/components/UI/Stake/hooks/usePooledStakes.test.tsx
@@ -1,10 +1,10 @@
-import { type StakingApiService } from '@metamask/stake-sdk';
+import { PooledStakeExitRequest } from '@metamask/stake-sdk';
 
 import { MOCK_GET_POOLED_STAKES_API_RESPONSE } from '../__mocks__/mockData';
 import { createMockAccountsControllerState } from '../../../../util/test/accountsControllerTestUtils';
 import { backgroundState } from '../../../../util/test/initial-root-state';
 import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
-import type { Stake } from '../sdk/stakeSdkProvider';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
 import usePooledStakes from './usePooledStakes';
 import { act, waitFor } from '@testing-library/react-native';
 
@@ -40,22 +40,9 @@ jest.mock('../../../../core/Engine', () => ({
   },
 }));
 
-const mockStakingApiService: Partial<StakingApiService> = {
-  getPooledStakes: jest.fn(),
-};
-
-const mockSdkContext: Stake = {
-  stakingApiService: mockStakingApiService as StakingApiService,
-  setSdkType: jest.fn(),
-};
-
 const mockPooledStakeData = MOCK_GET_POOLED_STAKES_API_RESPONSE.accounts[0];
 const mockExchangeRate = MOCK_GET_POOLED_STAKES_API_RESPONSE.exchangeRate;
 
-jest.mock('../hooks/useStakeContext', () => ({
-  useStakeContext: () => mockSdkContext as Stake,
-}));
-
 describe('usePooledStakes', () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -67,7 +54,7 @@ describe('usePooledStakes', () => {
 
   describe('when fetching pooled stakes data', () => {
     it('fetches pooled stakes data and updates state', async () => {
-      (mockStakingApiService.getPooledStakes as jest.Mock).mockResolvedValue({
+      jest.spyOn(stakingApiService, 'getPooledStakes').mockResolvedValue({
         accounts: [mockPooledStakeData],
         exchangeRate: mockExchangeRate,
       });
@@ -86,9 +73,9 @@ describe('usePooledStakes', () => {
     });
 
     it('handles error if the API request fails', async () => {
-      (mockStakingApiService.getPooledStakes as jest.Mock).mockRejectedValue(
-        new Error('API Error'),
-      );
+      jest
+        .spyOn(stakingApiService, 'getPooledStakes')
+        .mockRejectedValue(new Error('API Error'));
 
       const { result } = renderHookWithProvider(() => usePooledStakes(), {
         state: mockInitialState,
@@ -104,7 +91,7 @@ describe('usePooledStakes', () => {
 
   describe('when handling staking statuses', () => {
     it('returns ACTIVE status when assets are greater than 0', async () => {
-      (mockStakingApiService.getPooledStakes as jest.Mock).mockResolvedValue({
+      jest.spyOn(stakingApiService, 'getPooledStakes').mockResolvedValue({
         accounts: [{ ...mockPooledStakeData, assets: '100' }],
         exchangeRate: '1.2',
       });
@@ -121,12 +108,14 @@ describe('usePooledStakes', () => {
     });
 
     it('returns INACTIVE_WITH_EXIT_REQUESTS when assets are 0 and there are exit requests', async () => {
-      (mockStakingApiService.getPooledStakes as jest.Mock).mockResolvedValue({
+      jest.spyOn(stakingApiService, 'getPooledStakes').mockResolvedValue({
         accounts: [
           {
             ...mockPooledStakeData,
             assets: '0',
-            exitRequests: [{ id: 'exit-1' }],
+            exitRequests: [
+              { id: 'exit-1' } as unknown as PooledStakeExitRequest,
+            ],
           },
         ],
         exchangeRate: '1.2',
@@ -143,7 +132,7 @@ describe('usePooledStakes', () => {
     });
 
     it('returns INACTIVE_WITH_REWARDS_ONLY when assets are 0 but has rewards', async () => {
-      (mockStakingApiService.getPooledStakes as jest.Mock).mockResolvedValue({
+      jest.spyOn(stakingApiService, 'getPooledStakes').mockResolvedValue({
         accounts: [
           {
             ...mockPooledStakeData,
@@ -166,7 +155,7 @@ describe('usePooledStakes', () => {
     });
 
     it('returns NEVER_STAKED when assets and rewards are 0', async () => {
-      (mockStakingApiService.getPooledStakes as jest.Mock).mockResolvedValue({
+      jest.spyOn(stakingApiService, 'getPooledStakes').mockResolvedValue({
         accounts: [
           {
             ...mockPooledStakeData,
@@ -191,10 +180,12 @@ describe('usePooledStakes', () => {
 
   describe('when refreshing pooled stakes', () => {
     it('refreshes pooled stakes when refreshPooledStakes is called', async () => {
-      (mockStakingApiService.getPooledStakes as jest.Mock).mockResolvedValue({
-        accounts: [mockPooledStakeData],
-        exchangeRate: mockExchangeRate,
-      });
+      const getPooledStakesSpy = jest
+        .spyOn(stakingApiService, 'getPooledStakes')
+        .mockResolvedValue({
+          accounts: [mockPooledStakeData],
+          exchangeRate: mockExchangeRate,
+        });
 
       const { result } = renderHookWithProvider(() => usePooledStakes(), {
         state: mockInitialState,
@@ -210,7 +201,7 @@ describe('usePooledStakes', () => {
       });
 
       await waitFor(() => {
-        expect(mockStakingApiService.getPooledStakes).toHaveBeenCalledTimes(2);
+        expect(getPooledStakesSpy).toHaveBeenCalledTimes(2);
       });
     });
   });
diff --git a/app/components/UI/Stake/hooks/usePooledStakes.ts b/app/components/UI/Stake/hooks/usePooledStakes.ts
index 16a838a0837..63eb1ea92ec 100644
--- a/app/components/UI/Stake/hooks/usePooledStakes.ts
+++ b/app/components/UI/Stake/hooks/usePooledStakes.ts
@@ -4,11 +4,11 @@ import { selectSelectedInternalAccountFormattedAddress } from '../../../../selec
 import { selectChainId } from '../../../../selectors/networkController';
 import { hexToNumber } from '@metamask/utils';
 import { PooledStake } from '@metamask/stake-sdk';
-import { useStakeContext } from './useStakeContext';
 import {
   selectPooledStakesData,
   setPooledStakes,
 } from '../../../../core/redux/slices/staking';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
 
 export enum StakeAccountStatus {
   // These statuses are only used internally rather than displayed to a user
@@ -26,7 +26,6 @@ const usePooledStakes = () => {
   const { pooledStakesData, exchangeRate } = useSelector(
     selectPooledStakesData,
   );
-  const { stakingApiService } = useStakeContext();
 
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -56,7 +55,7 @@ const usePooledStakes = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [chainId, selectedAddress, stakingApiService, dispatch]);
+  }, [chainId, selectedAddress, dispatch]);
 
   useEffect(() => {
     fetchData();
diff --git a/app/components/UI/Stake/hooks/useStakingEarningsHistory.ts b/app/components/UI/Stake/hooks/useStakingEarningsHistory.ts
index e911dd6eeb0..4ea77807150 100644
--- a/app/components/UI/Stake/hooks/useStakingEarningsHistory.ts
+++ b/app/components/UI/Stake/hooks/useStakingEarningsHistory.ts
@@ -3,7 +3,7 @@ import { selectSelectedInternalAccountFormattedAddress } from '../../../../selec
 import { useSelector } from 'react-redux';
 import { hexToNumber } from '@metamask/utils';
 import { ChainId } from '@metamask/controller-utils';
-import { StakingApiService } from '@metamask/stake-sdk';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
 
 export interface EarningHistory {
   sumRewards: string;
@@ -14,8 +14,6 @@ export interface EarningHistoryResponse {
   userRewards: EarningHistory[];
 }
 
-const stakingApiService = new StakingApiService();
-
 const useStakingEarningsHistory = ({
   chainId,
   limitDays = 365,
diff --git a/app/components/UI/Stake/hooks/useStakingEligibility.test.tsx b/app/components/UI/Stake/hooks/useStakingEligibility.test.tsx
index ae15901fd82..69f5d5cca8f 100644
--- a/app/components/UI/Stake/hooks/useStakingEligibility.test.tsx
+++ b/app/components/UI/Stake/hooks/useStakingEligibility.test.tsx
@@ -1,10 +1,9 @@
 import { act, waitFor } from '@testing-library/react-native';
 import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
-import { type StakingApiService } from '@metamask/stake-sdk';
 import { backgroundState } from '../../../../util/test/initial-root-state';
 import { createMockAccountsControllerState } from '../../../../util/test/accountsControllerTestUtils';
 import useStakingEligibility from './useStakingEligibility';
-import { Stake } from '../sdk/stakeSdkProvider';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
 
 // Mock initial state for the hook
 const MOCK_ADDRESS_1 = '0xAddress';
@@ -22,29 +21,7 @@ const mockInitialState = {
   },
 };
 
-// Mock Staking API Service
-const mockStakingApiService: Partial<StakingApiService> = {
-  getPooledStakingEligibility: jest.fn(),
-};
-
-const createMockStakeContext = (overrides?: Partial<Stake>) => ({
-  setSdkType: jest.fn(),
-  stakingApiService: mockStakingApiService as StakingApiService,
-  ...overrides,
-});
-
-let mockSdkContext = createMockStakeContext();
-
-// Mock the context
-jest.mock('./useStakeContext', () => ({
-  useStakeContext: () => mockSdkContext,
-}));
-
 describe('useStakingEligibility', () => {
-  beforeEach(() => {
-    mockSdkContext = createMockStakeContext();
-  });
-
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -52,11 +29,9 @@ describe('useStakingEligibility', () => {
   describe('when fetching staking eligibility', () => {
     it('fetches staking eligibility and sets the state correctly', async () => {
       // Mock API response
-      (
-        mockStakingApiService.getPooledStakingEligibility as jest.Mock
-      ).mockResolvedValue({
-        eligible: true,
-      });
+      jest
+        .spyOn(stakingApiService, 'getPooledStakingEligibility')
+        .mockResolvedValue({ eligible: true });
 
       const { result } = renderHookWithProvider(() => useStakingEligibility(), {
         state: mockInitialState,
@@ -75,9 +50,9 @@ describe('useStakingEligibility', () => {
 
     it('handles error while fetching staking eligibility', async () => {
       // Mock API error
-      (
-        mockStakingApiService.getPooledStakingEligibility as jest.Mock
-      ).mockRejectedValue(new Error('API Error'));
+      jest
+        .spyOn(stakingApiService, 'getPooledStakingEligibility')
+        .mockRejectedValue(new Error('API Error'));
 
       const { result } = renderHookWithProvider(() => useStakingEligibility(), {
         state: mockInitialState,
@@ -96,11 +71,9 @@ describe('useStakingEligibility', () => {
   describe('when refreshing staking eligibility', () => {
     it('refreshes staking eligibility successfully', async () => {
       // Mock initial API response
-      (
-        mockStakingApiService.getPooledStakingEligibility as jest.Mock
-      ).mockResolvedValueOnce({
-        eligible: false,
-      });
+      const getPooledStakingEligibilitySpy = jest
+        .spyOn(stakingApiService, 'getPooledStakingEligibility')
+        .mockResolvedValue({ eligible: false });
 
       const { result } = renderHookWithProvider(() => useStakingEligibility(), {
         state: mockInitialState,
@@ -112,11 +85,7 @@ describe('useStakingEligibility', () => {
       });
 
       // Simulate API response after refresh
-      (
-        mockStakingApiService.getPooledStakingEligibility as jest.Mock
-      ).mockResolvedValueOnce({
-        eligible: true,
-      });
+      getPooledStakingEligibilitySpy.mockResolvedValue({ eligible: true });
 
       // Trigger refresh
       await act(async () => {
@@ -126,27 +95,7 @@ describe('useStakingEligibility', () => {
       // Wait for refresh result
       await waitFor(() => {
         expect(result.current.isEligible).toBe(true); // Updated to eligible
-        expect(
-          mockStakingApiService.getPooledStakingEligibility,
-        ).toHaveBeenCalledTimes(2);
-      });
-    });
-  });
-
-  describe('when stakingApiService is undefined', () => {
-    it('handles undefined stakingApiService gracefully', async () => {
-      // Override the mock context with undefined stakingApiService
-      mockSdkContext = createMockStakeContext({
-        stakingApiService: undefined,
-      });
-
-      const { result } = renderHookWithProvider(() => useStakingEligibility(), {
-        state: mockInitialState,
-      });
-
-      await waitFor(() => {
-        expect(result.current.isLoadingEligibility).toBe(false);
-        expect(result.current.isEligible).toBe(false);
+        expect(getPooledStakingEligibilitySpy).toHaveBeenCalledTimes(2);
       });
     });
   });
diff --git a/app/components/UI/Stake/hooks/useStakingEligibility.ts b/app/components/UI/Stake/hooks/useStakingEligibility.ts
index a04f0a4f490..8305d504817 100644
--- a/app/components/UI/Stake/hooks/useStakingEligibility.ts
+++ b/app/components/UI/Stake/hooks/useStakingEligibility.ts
@@ -1,11 +1,11 @@
 import { useSelector, useDispatch } from 'react-redux';
 import { useEffect, useCallback, useState } from 'react';
 import { selectSelectedInternalAccountFormattedAddress } from '../../../../selectors/accountsController';
-import { useStakeContext } from './useStakeContext';
 import {
   selectStakingEligibility,
   setStakingEligibility,
 } from '../../../../core/redux/slices/staking';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
 
 const useStakingEligibility = () => {
   const dispatch = useDispatch();
@@ -13,8 +13,6 @@ const useStakingEligibility = () => {
     useSelector(selectSelectedInternalAccountFormattedAddress) || '';
   const { isEligible } = useSelector(selectStakingEligibility);
 
-  const { stakingApiService } = useStakeContext();
-
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -31,12 +29,13 @@ const useStakingEligibility = () => {
       dispatch(setStakingEligibility(eligible));
       return { isEligible: eligible };
     } catch (err) {
+      console.error(err);
       setError('Failed to fetch pooled staking eligibility');
       return { isEligible: false };
     } finally {
       setIsLoading(false);
     }
-  }, [selectedAddress, stakingApiService, dispatch]);
+  }, [selectedAddress, dispatch]);
 
   useEffect(() => {
     fetchStakingEligibility();
diff --git a/app/components/UI/Stake/hooks/useVaultApyAverages.test.tsx b/app/components/UI/Stake/hooks/useVaultApyAverages.test.tsx
new file mode 100644
index 00000000000..8d40519636d
--- /dev/null
+++ b/app/components/UI/Stake/hooks/useVaultApyAverages.test.tsx
@@ -0,0 +1,84 @@
+import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
+import { MOCK_VAULT_APY_AVERAGES } from '../components/PoolStakingLearnMoreModal/mockVaultRewards';
+import { act, waitFor } from '@testing-library/react-native';
+import { backgroundState } from '../../../../util/test/initial-root-state';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
+import useVaultApyAverages from './useVaultApyAverages';
+
+const mockInitialState = {
+  settings: {},
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+    },
+  },
+};
+
+describe('useVaultApyAverages', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.spyOn(stakingApiService, 'getVaultApyAverages');
+  });
+
+  describe('when fetching vaultApyAverages', () => {
+    it('fetches vaultApyAverages and updates state', async () => {
+      jest
+        .spyOn(stakingApiService, 'getVaultApyAverages')
+        .mockResolvedValue(MOCK_VAULT_APY_AVERAGES);
+
+      const { result } = renderHookWithProvider(() => useVaultApyAverages(), {
+        state: mockInitialState,
+      });
+
+      await waitFor(() => {
+        expect(result.current.vaultApyAverages).toStrictEqual(
+          MOCK_VAULT_APY_AVERAGES,
+        );
+        expect(result.current.isLoadingVaultApyAverages).toBe(false);
+        expect(result.current.error).toBeNull();
+      });
+    });
+
+    it('handles error if API request fails', async () => {
+      jest
+        .spyOn(stakingApiService, 'getVaultApyAverages')
+        .mockRejectedValue(new Error('API Error'));
+
+      const { result } = renderHookWithProvider(() => useVaultApyAverages(), {
+        state: mockInitialState,
+      });
+
+      await waitFor(async () => {
+        expect(result.current.isLoadingVaultApyAverages).toBe(false);
+        expect(result.current.error).toBe('Failed to fetch vault APY averages');
+        expect(result.current.vaultApyAverages).toStrictEqual({});
+      });
+    });
+  });
+
+  describe('when refreshing vault APY averages', () => {
+    it('refreshes vault APY averages', async () => {
+      const getVaultApyAveragesSpy = jest
+        .spyOn(stakingApiService, 'getVaultApyAverages')
+        .mockResolvedValue(MOCK_VAULT_APY_AVERAGES);
+
+      const { result } = renderHookWithProvider(() => useVaultApyAverages(), {
+        state: mockInitialState,
+      });
+
+      await waitFor(async () => {
+        expect(result.current.vaultApyAverages).toStrictEqual(
+          MOCK_VAULT_APY_AVERAGES,
+        );
+      });
+
+      await act(async () => {
+        result.current.refreshVaultApyAverages();
+      });
+
+      await waitFor(() => {
+        expect(getVaultApyAveragesSpy).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+});
diff --git a/app/components/UI/Stake/hooks/useVaultApyAverages.tsx b/app/components/UI/Stake/hooks/useVaultApyAverages.tsx
new file mode 100644
index 00000000000..b7e5508b612
--- /dev/null
+++ b/app/components/UI/Stake/hooks/useVaultApyAverages.tsx
@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react';
+import { hexToNumber } from '@metamask/utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectChainId } from '../../../../selectors/networkController';
+import {
+  selectVaultApyAverages,
+  setVaultApyAverages,
+} from '../../../../core/redux/slices/staking';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
+
+const useVaultApyAverages = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const dispatch = useDispatch();
+
+  const { vaultApyAverages } = useSelector(selectVaultApyAverages);
+  const chainId = useSelector(selectChainId);
+
+  const fetchVaultAprs = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const numericChainId = hexToNumber(chainId);
+      const vaultAprsResponse = await stakingApiService.getVaultApyAverages(
+        numericChainId,
+      );
+      dispatch(setVaultApyAverages(vaultAprsResponse));
+    } catch (err) {
+      setError('Failed to fetch vault APY averages');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [chainId, dispatch]);
+
+  useEffect(() => {
+    fetchVaultAprs();
+  }, [fetchVaultAprs]);
+
+  return {
+    vaultApyAverages,
+    refreshVaultApyAverages: fetchVaultAprs,
+    isLoadingVaultApyAverages: isLoading,
+    error,
+  };
+};
+
+export default useVaultApyAverages;
diff --git a/app/components/UI/Stake/hooks/useVaultApys.test.tsx b/app/components/UI/Stake/hooks/useVaultApys.test.tsx
new file mode 100644
index 00000000000..79f66dd0a10
--- /dev/null
+++ b/app/components/UI/Stake/hooks/useVaultApys.test.tsx
@@ -0,0 +1,79 @@
+import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
+import useVaultApys from './useVaultApys';
+import { MOCK_VAULT_DAILY_APYS } from '../components/PoolStakingLearnMoreModal/mockVaultRewards';
+import { act, waitFor } from '@testing-library/react-native';
+import { backgroundState } from '../../../../util/test/initial-root-state';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
+
+const mockInitialState = {
+  settings: {},
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+    },
+  },
+};
+
+describe('useVaultApys', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when fetching vaultApys', () => {
+    it('fetches vaultApys and updates state', async () => {
+      jest
+        .spyOn(stakingApiService, 'getVaultDailyApys')
+        .mockResolvedValue([...MOCK_VAULT_DAILY_APYS].reverse());
+
+      const { result } = renderHookWithProvider(() => useVaultApys(), {
+        state: mockInitialState,
+      });
+
+      await waitFor(() => {
+        expect(result.current.vaultApys).toStrictEqual(MOCK_VAULT_DAILY_APYS);
+        expect(result.current.isLoadingVaultApys).toBe(false);
+        expect(result.current.error).toBeNull();
+      });
+    });
+
+    it('handles error if API request fails', async () => {
+      jest
+        .spyOn(stakingApiService, 'getVaultDailyApys')
+        .mockRejectedValue(new Error('API Error'));
+
+      const { result } = renderHookWithProvider(() => useVaultApys(), {
+        state: mockInitialState,
+      });
+
+      await waitFor(async () => {
+        expect(result.current.isLoadingVaultApys).toBe(false);
+        expect(result.current.error).toBe('Failed to fetch vault APYs');
+        expect(result.current.vaultApys).toStrictEqual([]);
+      });
+    });
+  });
+
+  describe('when refreshing vault APYs', () => {
+    it('refreshes vault APYs', async () => {
+      const getVaultDailyApysSpy = jest
+        .spyOn(stakingApiService, 'getVaultDailyApys')
+        .mockResolvedValue([...MOCK_VAULT_DAILY_APYS].reverse());
+
+      const { result } = renderHookWithProvider(() => useVaultApys(), {
+        state: mockInitialState,
+      });
+
+      await waitFor(async () => {
+        expect(result.current.vaultApys).toStrictEqual(MOCK_VAULT_DAILY_APYS);
+      });
+
+      await act(async () => {
+        result.current.refreshVaultApys();
+      });
+
+      await waitFor(() => {
+        expect(getVaultDailyApysSpy).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+});
diff --git a/app/components/UI/Stake/hooks/useVaultApys.tsx b/app/components/UI/Stake/hooks/useVaultApys.tsx
new file mode 100644
index 00000000000..6b5d94d9b8d
--- /dev/null
+++ b/app/components/UI/Stake/hooks/useVaultApys.tsx
@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useState } from 'react';
+import { hexToNumber } from '@metamask/utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectChainId } from '../../../../selectors/networkController';
+import {
+  selectVaultApys,
+  setVaultApys,
+} from '../../../../core/redux/slices/staking';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
+
+const useVaultApys = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const dispatch = useDispatch();
+
+  const { vaultApys } = useSelector(selectVaultApys);
+
+  const chainId = useSelector(selectChainId);
+
+  const fetchVaultApys = useCallback(async () => {
+    setIsLoading(true);
+    dispatch(setVaultApys([]));
+    setError(null);
+
+    try {
+      const numericChainId = hexToNumber(chainId);
+
+      const vaultApysResponse = await stakingApiService.getVaultDailyApys(
+        numericChainId,
+        365,
+        'desc',
+      );
+
+      const reversedVaultApys = [...vaultApysResponse]?.reverse();
+
+      dispatch(setVaultApys(reversedVaultApys));
+    } catch (err) {
+      setError('Failed to fetch vault APYs');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [chainId, dispatch]);
+
+  useEffect(() => {
+    fetchVaultApys();
+  }, [fetchVaultApys]);
+
+  return {
+    vaultApys,
+    refreshVaultApys: fetchVaultApys,
+    isLoadingVaultApys: isLoading,
+    error,
+  };
+};
+
+export default useVaultApys;
diff --git a/app/components/UI/Stake/hooks/useVaultData.test.tsx b/app/components/UI/Stake/hooks/useVaultData.test.tsx
index 3e3cd5eab7f..fd12f4f23c7 100644
--- a/app/components/UI/Stake/hooks/useVaultData.test.tsx
+++ b/app/components/UI/Stake/hooks/useVaultData.test.tsx
@@ -1,25 +1,9 @@
 import { waitFor } from '@testing-library/react-native';
-
-import { type StakingApiService } from '@metamask/stake-sdk';
-
 import useVaultData from './useVaultData';
-import type { Stake } from '../sdk/stakeSdkProvider';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
 import { MOCK_GET_VAULT_RESPONSE } from '../__mocks__/mockData';
 import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
 
-const mockStakingApiService: Partial<StakingApiService> = {
-  getVaultData: jest.fn(),
-};
-
-const mockSdkContext: Stake = {
-  setSdkType: jest.fn(),
-  stakingApiService: mockStakingApiService as StakingApiService,
-};
-
-jest.mock('./useStakeContext', () => ({
-  useStakeContext: () => mockSdkContext,
-}));
-
 const mockVaultData = MOCK_GET_VAULT_RESPONSE;
 
 describe('useVaultData', () => {
@@ -30,9 +14,9 @@ describe('useVaultData', () => {
   describe('when fetching vault data', () => {
     it('fetches vault data and updates state', async () => {
       // Mock API response
-      (mockStakingApiService.getVaultData as jest.Mock).mockResolvedValue(
-        mockVaultData,
-      );
+      jest
+        .spyOn(stakingApiService, 'getVaultData')
+        .mockResolvedValue(mockVaultData);
 
       const { result } = renderHookWithProvider(() => useVaultData());
 
@@ -53,9 +37,9 @@ describe('useVaultData', () => {
 
     it('handles error if the API request fails', async () => {
       // Simulate API error
-      (mockStakingApiService.getVaultData as jest.Mock).mockRejectedValue(
-        new Error('API Error'),
-      );
+      jest
+        .spyOn(stakingApiService, 'getVaultData')
+        .mockRejectedValue(new Error('API Error'));
 
       const { result } = renderHookWithProvider(() => useVaultData());
 
@@ -71,9 +55,10 @@ describe('useVaultData', () => {
     it('calculates the annual reward rate correctly based on the fetched APY', async () => {
       // Mock API response with a custom APY
       const customVaultData = { ...mockVaultData, apy: '7.0' };
-      (mockStakingApiService.getVaultData as jest.Mock).mockResolvedValue(
-        customVaultData,
-      );
+
+      jest
+        .spyOn(stakingApiService, 'getVaultData')
+        .mockResolvedValue(customVaultData);
 
       const { result } = renderHookWithProvider(() => useVaultData());
 
@@ -89,9 +74,10 @@ describe('useVaultData', () => {
     it('returns "0%" when the APY is not available', async () => {
       // Mock API response with an empty APY
       const emptyApyVaultData = { ...mockVaultData, apy: '' };
-      (mockStakingApiService.getVaultData as jest.Mock).mockResolvedValue(
-        emptyApyVaultData,
-      );
+
+      jest
+        .spyOn(stakingApiService, 'getVaultData')
+        .mockResolvedValue(emptyApyVaultData);
 
       const { result } = renderHookWithProvider(() => useVaultData());
 
diff --git a/app/components/UI/Stake/hooks/useVaultData.ts b/app/components/UI/Stake/hooks/useVaultData.ts
index e66256c8dd3..46b994ed920 100644
--- a/app/components/UI/Stake/hooks/useVaultData.ts
+++ b/app/components/UI/Stake/hooks/useVaultData.ts
@@ -2,17 +2,16 @@ import { useSelector, useDispatch } from 'react-redux';
 import { useEffect, useCallback, useState } from 'react';
 import { selectChainId } from '../../../../selectors/networkController';
 import { hexToNumber } from '@metamask/utils';
-import { useStakeContext } from './useStakeContext';
 import {
   selectVaultData,
   setVaultData,
 } from '../../../../core/redux/slices/staking';
+import { stakingApiService } from '../sdk/stakeSdkProvider';
 
 const useVaultData = () => {
   const dispatch = useDispatch();
   const chainId = useSelector(selectChainId);
   const { vaultData } = useSelector(selectVaultData);
-  const { stakingApiService } = useStakeContext();
 
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -34,7 +33,7 @@ const useVaultData = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [chainId, stakingApiService, dispatch]);
+  }, [chainId, dispatch]);
 
   useEffect(() => {
     fetchVaultData();
diff --git a/app/components/UI/Stake/routes/index.tsx b/app/components/UI/Stake/routes/index.tsx
index 84c323f42d9..9357dfcdf88 100644
--- a/app/components/UI/Stake/routes/index.tsx
+++ b/app/components/UI/Stake/routes/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import StakeInputView from '../Views/StakeInputView/StakeInputView';
-import LearnMoreModal from '../components/LearnMoreModal';
 import Routes from '../../../../constants/navigation/Routes';
 import StakeConfirmationView from '../Views/StakeConfirmationView/StakeConfirmationView';
 import UnstakeInputView from '../Views/UnstakeInputView/UnstakeInputView';
@@ -10,6 +9,7 @@ import { StakeSDKProvider } from '../sdk/stakeSdkProvider';
 import MaxInputModal from '../components/MaxInputModal';
 import GasImpactModal from '../components/GasImpactModal';
 import StakeEarningsHistoryView from '../Views/StakeEarningsHistoryView/StakeEarningsHistoryView';
+import PoolStakingLearnMoreModal from '../components/PoolStakingLearnMoreModal';
 const Stack = createStackNavigator();
 const ModalStack = createStackNavigator();
 
@@ -55,7 +55,7 @@ const StakeModalStack = () => (
     >
       <ModalStack.Screen
         name={Routes.STAKING.MODALS.LEARN_MORE}
-        component={LearnMoreModal}
+        component={PoolStakingLearnMoreModal}
         options={{ headerShown: false }}
       />
       <ModalStack.Screen
diff --git a/app/components/UI/Stake/sdk/stakeSdkProvider.tsx b/app/components/UI/Stake/sdk/stakeSdkProvider.tsx
index 19faaa9d159..0aed1447591 100644
--- a/app/components/UI/Stake/sdk/stakeSdkProvider.tsx
+++ b/app/components/UI/Stake/sdk/stakeSdkProvider.tsx
@@ -2,8 +2,8 @@ import {
   StakingType,
   StakeSdk,
   PooledStakingContract,
-  type StakingApiService,
   isSupportedChain,
+  StakingApiService,
 } from '@metamask/stake-sdk';
 import React, {
   useState,
@@ -21,9 +21,10 @@ import { getDecimalChainId } from '../../../../util/networks';
 
 export const SDK = StakeSdk.create({ stakingType: StakingType.POOLED });
 
+export const stakingApiService = new StakingApiService();
+
 export interface Stake {
   stakingContract?: PooledStakingContract;
-  stakingApiService?: StakingApiService;
   sdkType?: StakingType;
   setSdkType: (stakeType: StakingType) => void;
   networkClientId?: string;
@@ -71,17 +72,11 @@ export const StakeSDKProvider: React.FC<
   const stakeContextValue = useMemo(
     (): Stake => ({
       stakingContract: sdkService?.pooledStakingContract,
-      stakingApiService: sdkService?.stakingApiService,
       sdkType,
       setSdkType,
       networkClientId,
     }),
-    [
-      sdkService?.pooledStakingContract,
-      sdkService?.stakingApiService,
-      sdkType,
-      networkClientId,
-    ],
+    [sdkService?.pooledStakingContract, sdkType, networkClientId],
   );
   return (
     <StakeContext.Provider value={stakeContextValue}>
diff --git a/app/core/ErrorHandler/ErrorHandler.test.ts b/app/core/ErrorHandler/ErrorHandler.test.ts
index 5c73a967bfb..c0d0db49c5a 100644
--- a/app/core/ErrorHandler/ErrorHandler.test.ts
+++ b/app/core/ErrorHandler/ErrorHandler.test.ts
@@ -1,4 +1,8 @@
-import { getReactNativeDefaultHandler, handleCustomError, setReactNativeDefaultHandler } from './ErrorHandler';
+import {
+  getReactNativeDefaultHandler,
+  handleCustomError,
+  setReactNativeDefaultHandler,
+} from './ErrorHandler';
 import { ErrorHandlerCallback } from 'react-native';
 
 describe('ErrorHandler', () => {
@@ -10,10 +14,16 @@ describe('ErrorHandler', () => {
   });
 
   it('handles Ledger error without crashing the app', () => {
-    const mockError = { name: 'EthAppPleaseEnableContractData', message: 'Enable contract data' };
+    const mockError = {
+      name: 'EthAppPleaseEnableContractData',
+      message: 'Enable contract data',
+    };
     console.error = jest.fn();
     handleCustomError(mockError, true);
-    expect(console.error).toHaveBeenCalledWith('Ledger error: ', 'Enable contract data');
+    expect(console.error).toHaveBeenCalledWith(
+      'Ledger error: ',
+      'Enable contract data',
+    );
   });
 
   it('passes non-Ledger error to the default handler', () => {
@@ -24,9 +34,25 @@ describe('ErrorHandler', () => {
   });
 
   it('handles TransportStatusError without crashing the app', () => {
-    const mockError = { name: 'TransportStatusError', message: 'Transport error' };
+    const mockError = {
+      name: 'TransportStatusError',
+      message: 'Transport error',
+    };
     console.error = jest.fn();
     handleCustomError(mockError, true);
-    expect(console.error).toHaveBeenCalledWith('Ledger error: ', 'Transport error');
+    expect(console.error).toHaveBeenCalledWith(
+      'Ledger error: ',
+      'Transport error',
+    );
+  });
+
+  it('handles KeystoneError#Tx_canceled without crashing the app', () => {
+    const mockError = { name: 'Error', message: 'KeystoneError#Tx_canceled' };
+    console.error = jest.fn();
+    handleCustomError(mockError, true);
+    expect(console.error).toHaveBeenCalledWith(
+      'Keystone error: ',
+      'KeystoneError#Tx_canceled',
+    );
   });
 });
diff --git a/app/core/ErrorHandler/ErrorHandler.ts b/app/core/ErrorHandler/ErrorHandler.ts
index 8d9e5d685e5..730762bfb87 100644
--- a/app/core/ErrorHandler/ErrorHandler.ts
+++ b/app/core/ErrorHandler/ErrorHandler.ts
@@ -11,15 +11,23 @@ export const setReactNativeDefaultHandler = (handler: ErrorHandlerCallback) => {
 };
 
 export const handleCustomError = (error: Error, isFatal: boolean) => {
-    // Check whether the error is from the Ledger native bluetooth errors.
-    if(error.name === 'EthAppPleaseEnableContractData' || error.name === 'TransportStatusError') {
-      // dont pass the error to react native error handler to prevent app crash
-      console.error('Ledger error: ', error.message);
-      // Handle the error
-    } else {
-      // Pass the error to react native error handler
-      reactNativeDefaultHandler(error, isFatal);
-    }
+  // Check whether the error is from the Ledger native bluetooth errors.
+  if (
+    error.name === 'EthAppPleaseEnableContractData' ||
+    error.name === 'TransportStatusError'
+  ) {
+    // dont pass the error to react native error handler to prevent app crash
+    console.error('Ledger error: ', error.message);
+    // check error message contain "KeystoneError#Tx_canceled"
+  } else if (
+    error.name === 'Error' &&
+    error.message?.includes('KeystoneError#Tx_canceled')
+  ) {
+    console.error('Keystone error: ', error.message);
+  } else {
+    // Pass the error to react native error handler
+    reactNativeDefaultHandler(error, isFatal);
+  }
 };
 
 export const getReactNativeDefaultHandler = () => reactNativeDefaultHandler;
diff --git a/app/core/redux/slices/staking/index.test.ts b/app/core/redux/slices/staking/index.test.ts
index 29a1ba0ebe7..1ff2fcfd0c6 100644
--- a/app/core/redux/slices/staking/index.test.ts
+++ b/app/core/redux/slices/staking/index.test.ts
@@ -5,13 +5,26 @@ import reducer, {
   selectPooledStakesData,
   selectVaultData,
   selectStakingEligibility,
+  setVaultApys,
+  setVaultApyAverages,
+  selectVaultApys,
+  selectVaultApyAverages,
 } from '.';
 import {
   MOCK_GET_POOLED_STAKES_API_RESPONSE,
   MOCK_GET_VAULT_RESPONSE,
 } from '../../../../components/UI/Stake/__mocks__/mockData';
-import type { PooledStake, VaultData } from '@metamask/stake-sdk';
+import type {
+  PooledStake,
+  VaultApyAverages,
+  VaultDailyApy,
+  VaultData,
+} from '@metamask/stake-sdk';
 import type { RootState } from '../../../../reducers';
+import {
+  MOCK_VAULT_APY_AVERAGES,
+  MOCK_VAULT_APYS_ONE_YEAR,
+} from '../../../../components/UI/Stake/components/PoolStakingLearnMoreModal/mockVaultRewards';
 
 describe('PooledStaking', () => {
   const initialState = {
@@ -19,6 +32,8 @@ describe('PooledStaking', () => {
     exchangeRate: '',
     vaultData: {} as VaultData,
     isEligible: false,
+    vaultApyAverages: {} as VaultApyAverages,
+    vaultApys: [] as VaultDailyApy[],
   };
 
   const mockRootState: Partial<RootState> = {
@@ -27,6 +42,8 @@ describe('PooledStaking', () => {
       exchangeRate: MOCK_GET_POOLED_STAKES_API_RESPONSE.exchangeRate,
       vaultData: MOCK_GET_VAULT_RESPONSE,
       isEligible: true,
+      vaultApyAverages: MOCK_VAULT_APY_AVERAGES,
+      vaultApys: MOCK_VAULT_APYS_ONE_YEAR,
     },
   };
 
@@ -93,6 +110,28 @@ describe('PooledStaking', () => {
     });
   });
 
+  describe('when setting vault apys', () => {
+    it('updates vaultApys', () => {
+      const state = reducer(
+        initialState,
+        setVaultApys(MOCK_VAULT_APYS_ONE_YEAR),
+      );
+
+      expect(state.vaultApys).toEqual(MOCK_VAULT_APYS_ONE_YEAR);
+    });
+  });
+
+  describe('when settings vault apy averages', () => {
+    it('updates vaultApyAverages', () => {
+      const state = reducer(
+        initialState,
+        setVaultApyAverages(MOCK_VAULT_APY_AVERAGES),
+      );
+
+      expect(state.vaultApyAverages).toEqual(MOCK_VAULT_APY_AVERAGES);
+    });
+  });
+
   describe('selectors', () => {
     describe('when selecting pooled stakes data', () => {
       it('returns pooled stakes and exchange rate', () => {
@@ -124,5 +163,25 @@ describe('PooledStaking', () => {
         });
       });
     });
+
+    describe('when selecting vault apys', () => {
+      it('return vault apys', () => {
+        const result = selectVaultApys(mockRootState as RootState);
+
+        expect(result).toEqual({
+          vaultApys: MOCK_VAULT_APYS_ONE_YEAR,
+        });
+      });
+    });
+
+    describe('when selecting vault apy averages', () => {
+      it('return vault apy averages', () => {
+        const result = selectVaultApyAverages(mockRootState as RootState);
+
+        expect(result).toEqual({
+          vaultApyAverages: MOCK_VAULT_APY_AVERAGES,
+        });
+      });
+    });
   });
 });
diff --git a/app/core/redux/slices/staking/index.ts b/app/core/redux/slices/staking/index.ts
index 99ddc1c6ae4..c57ca25b1c8 100644
--- a/app/core/redux/slices/staking/index.ts
+++ b/app/core/redux/slices/staking/index.ts
@@ -1,4 +1,9 @@
-import type { PooledStake, VaultData } from '@metamask/stake-sdk';
+import type {
+  PooledStake,
+  VaultData,
+  VaultDailyApy,
+  VaultApyAverages,
+} from '@metamask/stake-sdk';
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import { createSelector } from 'reselect';
 import type { RootState } from '../../../../reducers';
@@ -7,6 +12,8 @@ interface PooledStakingState {
   pooledStakes: PooledStake;
   exchangeRate: string;
   vaultData: VaultData;
+  vaultApys: VaultDailyApy[];
+  vaultApyAverages: VaultApyAverages;
   isEligible: boolean;
 }
 
@@ -14,6 +21,8 @@ export const initialState: PooledStakingState = {
   pooledStakes: {} as PooledStake,
   exchangeRate: '',
   vaultData: {} as VaultData,
+  vaultApys: [],
+  vaultApyAverages: {} as VaultApyAverages,
   isEligible: false,
 };
 
@@ -36,6 +45,12 @@ const slice = createSlice({
     setVaultData: (state, action: PayloadAction<VaultData>) => {
       state.vaultData = action.payload;
     },
+    setVaultApys: (state, action: PayloadAction<VaultDailyApy[]>) => {
+      state.vaultApys = action.payload;
+    },
+    setVaultApyAverages: (state, action: PayloadAction<VaultApyAverages>) => {
+      state.vaultApyAverages = action.payload;
+    },
     setStakingEligibility: (state, action: PayloadAction<boolean>) => {
       state.isEligible = action.payload;
     },
@@ -44,7 +59,13 @@ const slice = createSlice({
 
 const { actions, reducer } = slice;
 export default reducer;
-export const { setPooledStakes, setVaultData, setStakingEligibility } = actions;
+export const {
+  setPooledStakes,
+  setVaultData,
+  setVaultApys,
+  setVaultApyAverages,
+  setStakingEligibility,
+} = actions;
 
 // Selectors
 const selectPooledStakingState = (state: RootState) => state.staking;
@@ -64,6 +85,20 @@ export const selectVaultData = createSelector(
   }),
 );
 
+export const selectVaultApys = createSelector(
+  selectPooledStakingState,
+  (stakingState) => ({
+    vaultApys: stakingState.vaultApys,
+  }),
+);
+
+export const selectVaultApyAverages = createSelector(
+  selectPooledStakingState,
+  (stakingState) => ({
+    vaultApyAverages: stakingState.vaultApyAverages,
+  }),
+);
+
 export const selectStakingEligibility = createSelector(
   selectPooledStakingState,
   (stakingState) => ({
diff --git a/locales/languages/en.json b/locales/languages/en.json
index 3f93227ba9c..6db281d58fa 100644
--- a/locales/languages/en.json
+++ b/locales/languages/en.json
@@ -3455,11 +3455,11 @@
     "not_enough_eth": "Not enough ETH",
     "balance":"Balance",
     "stake_eth_and_earn":"Stake ETH and earn",
-    "stake_any_amount_of_eth":"Stake any amount of ETH",
+    "stake_any_amount_of_eth":"Stake any amount of ETH.",
     "no_minimum_required":"No minimum required.",
-    "earn_eth_rewards":"Earn ETH rewards",
+    "earn_eth_rewards":"Earn ETH rewards.",
     "earn_eth_rewards_description":"Start earning as soon as you stake. Rewards compound automatically.",
-    "flexible_unstaking":"Flexible unstaking",
+    "flexible_unstaking":"Flexible unstaking.",
     "flexible_unstaking_description":"Unstake anytime. Typically takes less than 3 days, but can take up to 11 days to process.",
     "disclaimer":"Staking does not guarantee rewards, and involves risks including a loss of funds.",
     "learn_more":"Learn more",
@@ -3521,7 +3521,22 @@
     "gas_cost_impact_warning": "Warning: the transaction gas cost will account for more than {{percentOverDeposit}}% of your deposit.",
     "view_earnings_history": "View earnings history",
     "earnings_history_title": "{{ticker}} earnings",
-    "earnings_history_list_title": "Payout history"
+    "earnings_history_list_title": "Payout history",
+    "apr": "APR",
+    "interactive_chart": {
+        "timespan_buttons": {
+            "7D": "7D",
+            "1M": "1M",
+            "3M": "3M",
+            "6M": "6M"
+        }
+    },
+    "today": "Today",
+    "one_week_average": "1 week average",
+    "one_month_average": "1 month average",
+    "three_month_average": "3 month average",
+    "six_month_average": "6 month average",
+    "one_year_average": "1 year average"
   },
   "default_settings": {
     "title": "Your Wallet is ready",
diff --git a/package.json b/package.json
index cf4b6a25602..ba6cb495a7e 100644
--- a/package.json
+++ b/package.json
@@ -207,7 +207,7 @@
     "@metamask/snaps-sdk": "^6.13.0",
     "@metamask/snaps-utils": "^8.6.1",
     "@metamask/solana-wallet-snap": "^1.2.0",
-    "@metamask/stake-sdk": "^0.6.0",
+    "@metamask/stake-sdk": "^1.0.0",
     "@metamask/swappable-obj-proxy": "^2.1.0",
     "@metamask/swaps-controller": "^12.0.0",
     "@metamask/transaction-controller": "^43.0.0",
diff --git a/yarn.lock b/yarn.lock
index dbb50f31043..ecc3322eb51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5543,10 +5543,10 @@
   resolved "https://registry.yarnpkg.com/@metamask/solana-wallet-snap/-/solana-wallet-snap-1.2.0.tgz#7d0db28a58cbd728306427144039d28f56f6d477"
   integrity sha512-XG1NzrJu2Xvo6PKr5f3Ij6ojEBNGh1H/2WJCcCMSoKZUEl8UG5i8rmZ+SVcZJ0Jhr88sbredNXlAzqGESz2VBA==
 
-"@metamask/stake-sdk@^0.6.0":
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/@metamask/stake-sdk/-/stake-sdk-0.6.0.tgz#f147debfc0179de4ff3814a406bcbc0144f432fa"
-  integrity sha512-y8NUie7yrMTqTOk4QStV2RJnRKJQ/B2I7wj/eSuH5naIivFuknunyiRKyUs5U4kPlTwCiNXaY+JytISjIxC+7w==
+"@metamask/stake-sdk@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@metamask/stake-sdk/-/stake-sdk-1.0.0.tgz#44f599a0b9a785a03c5c40a2dffd9f463045de0e"
+  integrity sha512-AjpQq2fstCpqcgMuIAW1VLaKdUmmdR5zQCJz1KgaXVkp9MFCa3GWfrgfZynN2S+h+39hst/2KNHHOeJrGWYGGw==
 
 "@metamask/superstruct@^3.1.0":
   version "3.1.0"