[pull] main from MetaMask:main

.eslintrc.js

@@ -117,19 +117,12 @@ module.exports = {
       },
     },
     {
-      files: ['app/components/UI/Card/**/*.{js,jsx,ts,tsx}'],
-      rules: {
-        '@metamask/design-tokens/color-no-hex': 'error',
-      },
-    },
-    {
-      files: ['app/components/Snaps/**/*.{js,jsx,ts,tsx}'],
-      rules: {
-        '@metamask/design-tokens/color-no-hex': 'error',
-      },
-    },
-    {
-      files: ['app/components/UI/Predict/**/*.{js,jsx,ts,tsx}'],
+      files: [
+        'app/components/UI/Card/**/*.{js,jsx,ts,tsx}',
+        'app/components/Snaps/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/Predict/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/Rewards/**/*.{js,jsx,ts,tsx}',
+      ],
       rules: {
         '@metamask/design-tokens/color-no-hex': 'error',
       },

app/components/UI/AssetOverview/TronEnergyBandwidthDetail/TronEnergyBandwidthDetail.test.tsx

@@ -6,8 +6,8 @@ import ResourceRing from './ResourceRing';
 import renderWithProvider from '../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../util/test/initial-root-state';
 import {
-  selectTronResourcesBySelectedAccountGroup,
-  TronResourcesMap,
+  selectTronSpecialAssetsBySelectedAccountGroup,
+  TronSpecialAssetsMap,
 } from '../../../../selectors/assets/assets-list';
 
 jest.mock('./ResourceRing', () => ({
@@ -33,21 +33,24 @@ jest.mock('../../../../../locales/i18n', () => ({
 }));
 
 jest.mock('../../../../selectors/assets/assets-list', () => ({
-  selectTronResourcesBySelectedAccountGroup: jest.fn(),
+  selectTronSpecialAssetsBySelectedAccountGroup: jest.fn(),
 }));
 
 type SelectorReturn = ReturnType<
-  typeof selectTronResourcesBySelectedAccountGroup
+  typeof selectTronSpecialAssetsBySelectedAccountGroup
 >;
 
-const createEmptyResourcesMap = (): TronResourcesMap => ({
+const createEmptySpecialAssetsMap = (): TronSpecialAssetsMap => ({
   energy: undefined,
   bandwidth: undefined,
   maxEnergy: undefined,
   maxBandwidth: undefined,
   stakedTrxForEnergy: undefined,
   stakedTrxForBandwidth: undefined,
   totalStakedTrx: 0,
+  trxReadyForWithdrawal: undefined,
+  trxStakingRewards: undefined,
+  trxInLockPeriod: undefined,
 });
 
 interface Resource {
@@ -78,7 +81,7 @@ describe('TronEnergyBandwidthDetail', () => {
   });
 
   it('renders values, coverage counts, and passes correct progress to ResourceRing', () => {
-    jest.mocked(selectTronResourcesBySelectedAccountGroup).mockReturnValue({
+    jest.mocked(selectTronSpecialAssetsBySelectedAccountGroup).mockReturnValue({
       energy: res('energy', 130000),
       bandwidth: res('bandwidth', 560),
       maxEnergy: res('max-energy', 200000),
@@ -110,7 +113,7 @@ describe('TronEnergyBandwidthDetail', () => {
   });
 
   it('parses balances and caps progress', () => {
-    jest.mocked(selectTronResourcesBySelectedAccountGroup).mockReturnValue({
+    jest.mocked(selectTronSpecialAssetsBySelectedAccountGroup).mockReturnValue({
       energy: res('energy', '1000'),
       bandwidth: res('bandwidth', '2000'),
       maxEnergy: res('max-energy', '400'),
@@ -136,8 +139,8 @@ describe('TronEnergyBandwidthDetail', () => {
 
   it('handles missing resources by showing zeros and 0 progress', () => {
     jest
-      .mocked(selectTronResourcesBySelectedAccountGroup)
-      .mockReturnValue(createEmptyResourcesMap());
+      .mocked(selectTronSpecialAssetsBySelectedAccountGroup)
+      .mockReturnValue(createEmptySpecialAssetsMap());
 
     const { getAllByText, getByText } = renderWithProvider(
       <TronEnergyBandwidthDetail />,

app/components/UI/AssetOverview/TronEnergyBandwidthDetail/useTronResources.test.ts

@@ -4,8 +4,8 @@ import { useSelector } from 'react-redux';
 
 import { useTronResources } from './useTronResources';
 import {
-  selectTronResourcesBySelectedAccountGroup,
-  TronResourcesMap,
+  selectTronSpecialAssetsBySelectedAccountGroup,
+  TronSpecialAssetsMap,
 } from '../../../../selectors/assets/assets-list';
 
 jest.mock('react-redux', () => ({
@@ -15,28 +15,31 @@ jest.mock('react-redux', () => ({
 jest.mock('../../../../selectors/assets/assets-list', () => ({
   __esModule: true,
   ...jest.requireActual('../../../../selectors/assets/assets-list'),
-  selectTronResourcesBySelectedAccountGroup: jest.fn(),
+  selectTronSpecialAssetsBySelectedAccountGroup: jest.fn(),
 }));
 
 const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
-const mockSelectTronResourcesBySelectedAccountGroup =
-  selectTronResourcesBySelectedAccountGroup as jest.MockedFunction<
-    typeof selectTronResourcesBySelectedAccountGroup
+const mockSelectTronSpecialAssetsBySelectedAccountGroup =
+  selectTronSpecialAssetsBySelectedAccountGroup as jest.MockedFunction<
+    typeof selectTronSpecialAssetsBySelectedAccountGroup
   >;
 
 interface MockTronAsset {
   symbol?: string;
   balance?: string | number;
 }
 
-const createEmptyResourcesMap = (): TronResourcesMap => ({
+const createEmptySpecialAssetsMap = (): TronSpecialAssetsMap => ({
   energy: undefined,
   bandwidth: undefined,
   maxEnergy: undefined,
   maxBandwidth: undefined,
   stakedTrxForEnergy: undefined,
   stakedTrxForBandwidth: undefined,
   totalStakedTrx: 0,
+  trxReadyForWithdrawal: undefined,
+  trxStakingRewards: undefined,
+  trxInLockPeriod: undefined,
 });
 
 const createTronAsset = (
@@ -52,24 +55,27 @@ describe('useTronResources', () => {
     jest.clearAllMocks();
 
     mockUseSelector.mockImplementation((selector: any) => selector());
-    mockSelectTronResourcesBySelectedAccountGroup.mockReturnValue(
-      createEmptyResourcesMap(),
+    mockSelectTronSpecialAssetsBySelectedAccountGroup.mockReturnValue(
+      createEmptySpecialAssetsMap(),
     );
   });
 
   it('builds energy and bandwidth resources from base max capacity', () => {
-    const tronResourcesMap: TronResourcesMap = {
+    const tronSpecialAssetsMap: TronSpecialAssetsMap = {
       energy: createTronAsset('energy', '500') as any,
       bandwidth: createTronAsset('bandwidth', '300') as any,
       maxEnergy: createTronAsset('max-energy', '1000') as any,
       maxBandwidth: createTronAsset('max-bandwidth', '600') as any,
       stakedTrxForEnergy: createTronAsset('strx-energy', '500') as any,
       stakedTrxForBandwidth: createTronAsset('strx-bandwidth', 0) as any,
       totalStakedTrx: 500,
+      trxReadyForWithdrawal: undefined,
+      trxStakingRewards: undefined,
+      trxInLockPeriod: undefined,
     };
 
-    mockSelectTronResourcesBySelectedAccountGroup.mockReturnValue(
-      tronResourcesMap,
+    mockSelectTronSpecialAssetsBySelectedAccountGroup.mockReturnValue(
+      tronSpecialAssetsMap,
     );
 
     const { result } = renderHook(() => useTronResources());
@@ -84,8 +90,8 @@ describe('useTronResources', () => {
   });
 
   it('returns zeroed resources when no Tron resources exist', () => {
-    mockSelectTronResourcesBySelectedAccountGroup.mockReturnValue(
-      createEmptyResourcesMap(),
+    mockSelectTronSpecialAssetsBySelectedAccountGroup.mockReturnValue(
+      createEmptySpecialAssetsMap(),
     );
 
     const { result } = renderHook(() => useTronResources());
@@ -106,14 +112,14 @@ describe('useTronResources', () => {
   });
 
   it('parses balances with comma separators', () => {
-    const tronResourcesMap: TronResourcesMap = {
-      ...createEmptyResourcesMap(),
+    const tronSpecialAssetsMap: TronSpecialAssetsMap = {
+      ...createEmptySpecialAssetsMap(),
       energy: createTronAsset('energy', '1,000') as any,
       maxEnergy: createTronAsset('max-energy', '2,000') as any,
     };
 
-    mockSelectTronResourcesBySelectedAccountGroup.mockReturnValue(
-      tronResourcesMap,
+    mockSelectTronSpecialAssetsBySelectedAccountGroup.mockReturnValue(
+      tronSpecialAssetsMap,
     );
 
     const { result } = renderHook(() => useTronResources());
@@ -124,14 +130,14 @@ describe('useTronResources', () => {
   });
 
   it('caps percentage at one hundred when current exceeds max', () => {
-    const tronResourcesMap: TronResourcesMap = {
-      ...createEmptyResourcesMap(),
+    const tronSpecialAssetsMap: TronSpecialAssetsMap = {
+      ...createEmptySpecialAssetsMap(),
       energy: createTronAsset('energy', 200) as any,
       maxEnergy: createTronAsset('max-energy', 100) as any,
     };
 
-    mockSelectTronResourcesBySelectedAccountGroup.mockReturnValue(
-      tronResourcesMap,
+    mockSelectTronSpecialAssetsBySelectedAccountGroup.mockReturnValue(
+      tronSpecialAssetsMap,
     );
 
     const { result } = renderHook(() => useTronResources());
@@ -141,14 +147,14 @@ describe('useTronResources', () => {
   });
 
   it('sets percentage to zero when balances cannot be parsed', () => {
-    const tronResourcesMap: TronResourcesMap = {
-      ...createEmptyResourcesMap(),
+    const tronSpecialAssetsMap: TronSpecialAssetsMap = {
+      ...createEmptySpecialAssetsMap(),
       energy: createTronAsset('energy', 'invalid') as any,
       maxEnergy: createTronAsset('max-energy', '1000') as any,
     };
 
-    mockSelectTronResourcesBySelectedAccountGroup.mockReturnValue(
-      tronResourcesMap,
+    mockSelectTronSpecialAssetsBySelectedAccountGroup.mockReturnValue(
+      tronSpecialAssetsMap,
     );
 
     const { result } = renderHook(() => useTronResources());

app/components/UI/AssetOverview/TronEnergyBandwidthDetail/useTronResources.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import BigNumber from 'bignumber.js';
 
-import { selectTronResourcesBySelectedAccountGroup } from '../../../../selectors/assets/assets-list';
+import { selectTronSpecialAssetsBySelectedAccountGroup } from '../../../../selectors/assets/assets-list';
 import { safeParseBigNumber } from '../../../../util/number/bignumber';
 
 export interface TronResource {
@@ -49,7 +49,7 @@ export const useTronResources = (): {
   bandwidth: TronResource;
 } => {
   const { energy, bandwidth, maxEnergy, maxBandwidth } = useSelector(
-    selectTronResourcesBySelectedAccountGroup,
+    selectTronSpecialAssetsBySelectedAccountGroup,
   );
 
   return useMemo(() => {

app/components/UI/Bridge/Views/BridgeView/BridgeView.styles.ts

@@ -23,14 +23,12 @@ export const createStyles = (params: { theme: Theme }) => {
       backgroundColor: theme.colors.background.default,
     },
     quoteContainer: {
-      flex: 1,
       justifyContent: 'flex-start',
     },
     destinationAccountSelectorContainer: {
       paddingBottom: 12,
     },
     dynamicContent: {
-      flex: 1,
       justifyContent: 'flex-start',
     },
     keypadContainerWithDestinationPicker: {
@@ -42,6 +40,10 @@ export const createStyles = (params: { theme: Theme }) => {
     },
     scrollViewContent: {
       flexGrow: 1,
+      paddingBottom: 16,
+    },
+    loadingContainer: {
+      paddingTop: 8,
     },
     disclaimerText: {
       textAlign: 'center',