diff --git a/app/components/UI/Tokens/TokenList/TokenListFooter/__snapshots__/index.test.tsx.snap b/app/components/UI/Tokens/TokenList/TokenListFooter/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000000..512895904bd
--- /dev/null
+++ b/app/components/UI/Tokens/TokenList/TokenListFooter/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TokenListFooter renders correctly 1`] = `
+[
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "marginHorizontal": 15,
+        "marginVertical": 5,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#141618",
+          "fontFamily": "EuclidCircularB-Bold",
+          "fontSize": 16,
+          "fontWeight": "700",
+          "letterSpacing": 0,
+          "lineHeight": 24,
+          "marginVertical": 5,
+          "textAlign": "center",
+        }
+      }
+    >
+      ETH is needed to continue
+    </Text>
+    <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",
+          "marginVertical": 5,
+          "paddingHorizontal": 16,
+        }
+      }
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "EuclidCircularB-Regular",
+            "fontSize": 14,
+            "fontWeight": "400",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Next
+      </Text>
+    </TouchableOpacity>
+  </View>,
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flex": 1,
+        "marginTop": 9,
+        "paddingBottom": 30,
+      }
+    }
+  >
+    <TouchableOpacity
+      disabled={false}
+      onPress={[MockFunction]}
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "center",
+        }
+      }
+      testID="import-token-footer-link"
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#141618",
+            "fontFamily": "EuclidCircularB-Regular",
+            "fontSize": 14,
+            "fontWeight": "400",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+            "textAlign": "center",
+          }
+        }
+      >
+        <Text
+          accessibilityRole="text"
+          style={
+            {
+              "color": "#6a737d",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 22,
+              "marginBottom": 8,
+            }
+          }
+        >
+          Don't see your token?
+        </Text>
+         
+        <Text
+          accessibilityRole="text"
+          style={
+            {
+              "color": "#0376c9",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 22,
+            }
+          }
+        >
+          Import tokens
+        </Text>
+      </Text>
+    </TouchableOpacity>
+  </View>,
+]
+`;
diff --git a/app/components/UI/Tokens/TokenList/TokenListFooter/index.test.tsx b/app/components/UI/Tokens/TokenList/TokenListFooter/index.test.tsx
new file mode 100644
index 00000000000..c1e2c2f4caa
--- /dev/null
+++ b/app/components/UI/Tokens/TokenList/TokenListFooter/index.test.tsx
@@ -0,0 +1,165 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import { TokenListFooter } from '.';
+import configureMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
+import { strings } from '../../../../../../locales/i18n';
+import useRampNetwork from '../../../Ramp/hooks/useRampNetwork';
+import { MetaMetricsEvents } from '../../../../../components/hooks/useMetrics';
+import { TokenI } from '../../types';
+import { mockNetworkState } from '../../../../../util/test/network';
+import { backgroundState } from '../../../../../util/test/initial-root-state';
+
+jest.mock('../../../Ramp/hooks/useRampNetwork', () => jest.fn());
+jest.mock('../../../Ramp/routes/utils', () => ({
+  createBuyNavigationDetails: jest.fn(() => ['BuyScreen']),
+}));
+jest.mock('../../../../../components/hooks/useMetrics', () => ({
+  MetaMetricsEvents: { BUY_BUTTON_CLICKED: 'BUY_BUTTON_CLICKED' },
+  useMetrics: jest.fn(() => ({
+    trackEvent: jest.fn(),
+    createEventBuilder: jest.fn(() => ({
+      addProperties: jest.fn().mockReturnThis(),
+      build: jest.fn(),
+    })),
+  })),
+}));
+
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+    }),
+  };
+});
+
+const mockStore = configureMockStore();
+const MOCK_ADDRESS_1 = '0x0';
+
+const initialState = {
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      TokensController: {
+        tokens: [],
+        detectedTokens: [],
+      },
+      NetworkController: {
+        ...mockNetworkState({
+          chainId: '0x1',
+          id: 'mainnet',
+          nickname: 'Ethereum Mainnet',
+          ticker: 'ETH',
+        }),
+      },
+      AccountsController: {
+        internalAccounts: {
+          selectedAccount: 'id',
+          accounts: {
+            id: {
+              address: MOCK_ADDRESS_1,
+            },
+          },
+        },
+      },
+      PreferencesController: {
+        preferences: {
+          useTokenDetection: true,
+        },
+        tokenNetworkFilter: [
+          {
+            '0x1': true,
+          },
+        ],
+      },
+    },
+  },
+  settings: {
+    primaryCurrency: 'usd',
+  },
+};
+
+const store = mockStore(initialState);
+
+describe('TokenListFooter', () => {
+  const mockTokens = [
+    {
+      isETH: true,
+      symbol: 'ETH',
+      balance: '0',
+    },
+  ] as TokenI[];
+
+  const mockProps = {
+    tokens: mockTokens,
+    goToAddToken: jest.fn(),
+    showDetectedTokens: jest.fn(),
+    isAddTokenEnabled: true,
+  };
+
+  beforeEach(() => {
+    (useRampNetwork as jest.Mock).mockReturnValue([true, true]);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (props = mockProps) =>
+    render(
+      <Provider store={store}>
+        <TokenListFooter {...props} />
+      </Provider>,
+    );
+
+  it('renders correctly', () => {
+    const { toJSON } = renderComponent();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders the buy button for a native token with zero balance', () => {
+    const { getByText } = renderComponent();
+
+    expect(
+      getByText(
+        strings('wallet.token_is_needed_to_continue', { tokenSymbol: 'ETH' }),
+      ),
+    ).toBeDefined();
+    expect(getByText(strings('wallet.next'))).toBeDefined();
+  });
+
+  it('tracks the BUY_BUTTON_CLICKED event when the buy button is pressed', async () => {
+    const { getByText } = renderComponent();
+
+    fireEvent.press(getByText(strings('wallet.next')));
+
+    await waitFor(() => {
+      expect(MetaMetricsEvents.BUY_BUTTON_CLICKED).toBeDefined();
+    });
+  });
+
+  it('renders the add tokens footer link and calls goToAddToken when pressed', () => {
+    const { getByTestId } = renderComponent();
+
+    fireEvent.press(
+      getByTestId(WalletViewSelectorsIDs.IMPORT_TOKEN_FOOTER_LINK),
+    );
+
+    expect(mockProps.goToAddToken).toHaveBeenCalledTimes(1);
+  });
+
+  it('disables the add tokens footer link when isAddTokenEnabled is false', () => {
+    const { getByTestId } = renderComponent({
+      ...mockProps,
+      isAddTokenEnabled: false,
+    });
+
+    expect(
+      getByTestId(WalletViewSelectorsIDs.IMPORT_TOKEN_FOOTER_LINK).props
+        .disabled,
+    ).toBe(true);
+  });
+});