diff --git a/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx b/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
index d7f5d6b5f77d..6e3ade942675 100644
--- a/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
+++ b/ui/pages/confirmations/components/confirm/info/contract-interaction/contract-interaction.tsx
@@ -30,7 +30,7 @@ const ContractInteractionInfo = () => {
         />
       </ConfirmInfoSection>
       <TransactionDetails />
-      <GasFeesSection showAdvancedDetails={showAdvancedDetails} />
+      <GasFeesSection />
       {showAdvancedDetails && <AdvancedDetails />}
     </>
   );
diff --git a/ui/pages/confirmations/components/confirm/info/info.test.tsx b/ui/pages/confirmations/components/confirm/info/info.test.tsx
index 24773ffdcccd..385c9fc3ee3d 100644
--- a/ui/pages/confirmations/components/confirm/info/info.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/info.test.tsx
@@ -16,10 +16,7 @@ describe('Info', () => {
       },
     };
     const mockStore = configureMockStore([])(state);
-    const { container } = renderWithProvider(
-      <Info showAdvancedDetails />,
-      mockStore,
-    );
+    const { container } = renderWithProvider(<Info />, mockStore);
     expect(container).toMatchSnapshot();
   });
 
@@ -31,10 +28,7 @@ describe('Info', () => {
       },
     };
     const mockStore = configureMockStore([])(state);
-    const { container } = renderWithProvider(
-      <Info showAdvancedDetails />,
-      mockStore,
-    );
+    const { container } = renderWithProvider(<Info />, mockStore);
     expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap
index ab052a6f316c..3cd627373743 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<GasFeesDetails /> renders component for gas fees section with advanced details toggled off 1`] = `
+exports[`<GasFeesDetails /> renders component for gas fees section 1`] = `
 <div>
   <div
     class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
@@ -98,145 +98,3 @@ exports[`<GasFeesDetails /> renders component for gas fees section with advanced
   </div>
 </div>
 `;
-
-exports[`<GasFeesDetails /> renders component for gas fees section with advanced details toggled on 1`] = `
-<div>
-  <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Estimated fee
-      </p>
-      <div>
-        <div
-          aria-describedby="tippy-tooltip-2"
-          class=""
-          data-original-title="Amount paid to process the transaction on network."
-          data-tooltipped=""
-          style="display: flex;"
-          tabindex="0"
-        >
-          <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-            style="mask-image: url('./images/icons/question.svg');"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-        data-testid="first-gas-field"
-      >
-        0.004 ETH
-      </p>
-      <p
-        class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
-      >
-        $2.20
-      </p>
-      <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-        data-testid="edit-gas-fee-icon"
-        style="text-decoration: none;"
-      >
-        <span
-          class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
-          style="mask-image: url('./images/icons/edit.svg');"
-        />
-        <span
-          class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
-        />
-      </button>
-    </div>
-  </div>
-  <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Speed
-      </p>
-    </div>
-    <div
-      class="mm-box mm-box--display-flex mm-box--align-items-center"
-    >
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-wrap-wrap"
-      >
-        <p
-          class="mm-box mm-text mm-text--body-sm mm-box--padding-inline-end-1 mm-box--color-text-muted"
-        >
-          🦊 Market
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-sm mm-box--color-success-default"
-        >
-          <span
-            data-testid="gas-timing-time"
-          >
-            ~
-            0 sec
-          </span>
-        </p>
-      </div>
-    </div>
-  </div>
-  <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-    style="overflow-wrap: anywhere; min-height: 24px;"
-  >
-    <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-      >
-        Max fee
-      </p>
-      <div>
-        <div
-          aria-describedby="tippy-tooltip-3"
-          class=""
-          data-original-title="A maximum fee provided to pay for the transaction."
-          data-tooltipped=""
-          style="display: flex;"
-          tabindex="0"
-        >
-          <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-            style="mask-image: url('./images/icons/question.svg');"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mm-box mm-box--margin-left-8 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-      >
-        0.0076 ETH
-      </p>
-      <p
-        class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
-      >
-        $4.23
-      </p>
-    </div>
-  </div>
-</div>
-`;
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.stories.tsx
index 1d19b3bcef5f..8717ace09647 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.stories.tsx
@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../../test/data/confirmations/contract-interaction';
 import mockState from '../../../../../../../../test/data/mock-state.json';
 import configureStore from '../../../../../../../store/store';
+import { AdvancedDetailsProvider } from '../../contexts/advanced-details-context';
 import { GasFeesDetails } from './gas-fees-details';
 
 function getStore() {
@@ -33,24 +34,14 @@ const Story = {
       </Provider>
     ),
   ],
-  argTypes: {
-    showAdvancedDetails: {
-      control: 'select',
-      options: [false, true],
-    },
-  },
-  args: {
-    showAdvancedDetails: false,
-  },
 };
 
 export default Story;
 
-export const DefaultStory = (args) => (
-  <GasFeesDetails
-    setShowCustomizeGasPopover={() => {}}
-    showAdvancedDetails={args.showAdvancedDetails}
-  />
+export const DefaultStory = () => (
+  <AdvancedDetailsProvider>
+    <GasFeesDetails setShowCustomizeGasPopover={() => {}} />
+  </AdvancedDetailsProvider>
 );
 
 DefaultStory.storyName = 'Default';
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.test.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.test.tsx
index 144f7c0631d0..b4b0b17c567c 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.test.tsx
@@ -6,6 +6,7 @@ import { genUnapprovedContractInteractionConfirmation } from '../../../../../../
 import mockState from '../../../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers';
 import { getGasFeeTimeEstimate } from '../../../../../../../store/actions';
+import { AdvancedDetailsProvider } from '../../contexts/advanced-details-context';
 import { GasFeesDetails } from './gas-fees-details';
 
 jest.mock('../../../../../../../store/actions', () => ({
@@ -16,7 +17,7 @@ jest.mock('../../../../../../../store/actions', () => ({
 describe('<GasFeesDetails />', () => {
   const middleware = [thunk];
 
-  it('renders component for gas fees section with advanced details toggled off', async () => {
+  it('renders component for gas fees section', async () => {
     (getGasFeeTimeEstimate as jest.Mock).mockImplementation(() =>
       Promise.resolve({ upperTimeBound: '1000' }),
     );
@@ -31,40 +32,11 @@ describe('<GasFeesDetails />', () => {
     let container;
     await act(async () => {
       const renderResult = renderWithProvider(
-        <GasFeesDetails
-          setShowCustomizeGasPopover={() => console.log('open popover')}
-          showAdvancedDetails={false}
-        />,
-        mockStore,
-      );
-      container = renderResult.container;
-
-      // Wait for any asynchronous operations to complete
-      await new Promise(setImmediate);
-    });
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders component for gas fees section with advanced details toggled on', async () => {
-    (getGasFeeTimeEstimate as jest.Mock).mockImplementation(() =>
-      Promise.resolve({ upperTimeBound: '1000' }),
-    );
-
-    const state = {
-      ...mockState,
-      confirm: {
-        currentConfirmation: genUnapprovedContractInteractionConfirmation(),
-      },
-    };
-    const mockStore = configureMockStore(middleware)(state);
-    let container;
-    await act(async () => {
-      const renderResult = renderWithProvider(
-        <GasFeesDetails
-          setShowCustomizeGasPopover={() => console.log('open popover')}
-          showAdvancedDetails={true}
-        />,
+        <AdvancedDetailsProvider>
+          <GasFeesDetails
+            setShowCustomizeGasPopover={() => console.log('open popover')}
+          />
+        </AdvancedDetailsProvider>,
         mockStore,
       );
       container = renderResult.container;
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.tsx
index 97acf7dd7ae7..4c6afa072882 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.tsx
@@ -13,6 +13,7 @@ import {
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
 import { currentConfirmationSelector } from '../../../../../../../selectors';
 import GasTiming from '../../../../gas-timing/gas-timing.component';
+import { useAdvancedDetailsHandler } from '../../contexts/advanced-details-context';
 import { useEIP1559TxFees } from '../../hooks/useEIP1559TxFees';
 import { useFeeCalculations } from '../../hooks/useFeeCalculations';
 import { useSupportsEIP1559 } from '../../hooks/useSupportsEIP1559';
@@ -21,10 +22,8 @@ import { GasFeesRow } from '../gas-fees-row/gas-fees-row';
 
 export const GasFeesDetails = ({
   setShowCustomizeGasPopover,
-  showAdvancedDetails,
 }: {
   setShowCustomizeGasPopover: Dispatch<SetStateAction<boolean>>;
-  showAdvancedDetails: boolean;
 }) => {
   const t = useI18nContext();
 
@@ -49,6 +48,8 @@ export const GasFeesDetails = ({
     maxFeeNative,
   } = useFeeCalculations(transactionMeta);
 
+  const { showAdvancedDetails } = useAdvancedDetailsHandler();
+
   if (!transactionMeta?.txParams) {
     return null;
   }
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap
index f18c9ad511dd..9665e18a7f4e 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<GasFeesSection /> does not render component for gas fees section 1`] = `<div />`;
 
-exports[`<GasFeesSection /> renders component for gas fees section with advanced details toggled off 1`] = `
+exports[`<GasFeesSection /> renders component for gas fees section 1`] = `
 <div>
   <div
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
@@ -104,149 +104,3 @@ exports[`<GasFeesSection /> renders component for gas fees section with advanced
   </div>
 </div>
 `;
-
-exports[`<GasFeesSection /> renders component for gas fees section with advanced details toggled on 1`] = `
-<div>
-  <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
-  >
-    <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-      style="overflow-wrap: anywhere; min-height: 24px;"
-    >
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-      >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-        >
-          Estimated fee
-        </p>
-        <div>
-          <div
-            aria-describedby="tippy-tooltip-2"
-            class=""
-            data-original-title="Amount paid to process the transaction on network."
-            data-tooltipped=""
-            style="display: flex;"
-            tabindex="0"
-          >
-            <span
-              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-              style="mask-image: url('./images/icons/question.svg');"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
-      >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-          data-testid="first-gas-field"
-        >
-          0.004 ETH
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
-        >
-          $2.20
-        </p>
-        <button
-          class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-          data-testid="edit-gas-fee-icon"
-          style="text-decoration: none;"
-        >
-          <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
-            style="mask-image: url('./images/icons/edit.svg');"
-          />
-          <span
-            class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-      style="overflow-wrap: anywhere; min-height: 24px;"
-    >
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-      >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-        >
-          Speed
-        </p>
-      </div>
-      <div
-        class="mm-box mm-box--display-flex mm-box--align-items-center"
-      >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-wrap-wrap"
-        >
-          <p
-            class="mm-box mm-text mm-text--body-sm mm-box--padding-inline-end-1 mm-box--color-text-muted"
-          >
-            🦊 Market
-          </p>
-          <p
-            class="mm-box mm-text mm-text--body-sm mm-box--color-success-default"
-          >
-            <span
-              data-testid="gas-timing-time"
-            >
-              ~
-              0 sec
-            </span>
-          </p>
-        </div>
-      </div>
-    </div>
-    <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-      style="overflow-wrap: anywhere; min-height: 24px;"
-    >
-      <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
-      >
-        <p
-          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-        >
-          Max fee
-        </p>
-        <div>
-          <div
-            aria-describedby="tippy-tooltip-3"
-            class=""
-            data-original-title="A maximum fee provided to pay for the transaction."
-            data-tooltipped=""
-            style="display: flex;"
-            tabindex="0"
-          >
-            <span
-              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-              style="mask-image: url('./images/icons/question.svg');"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="mm-box mm-box--margin-left-8 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
-      >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-        >
-          0.0076 ETH
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
-        >
-          $4.23
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.stories.tsx
index f684744f4ebe..694d2b50dd10 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.stories.tsx
@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../../test/data/confirmations/contract-interaction';
 import mockState from '../../../../../../../../test/data/mock-state.json';
 import configureStore from '../../../../../../../store/store';
+import { AdvancedDetailsProvider } from '../../contexts/advanced-details-context';
 import { GasFeesSection } from './gas-fees-section';
 
 function getStore() {
@@ -33,21 +34,14 @@ const Story = {
       </Provider>
     ),
   ],
-  argTypes: {
-    showAdvancedDetails: {
-      control: 'select',
-      options: [false, true],
-    },
-  },
-  args: {
-    showAdvancedDetails: false,
-  },
 };
 
 export default Story;
 
-export const DefaultStory = (args) => (
-  <GasFeesSection showAdvancedDetails={args.showAdvancedDetails} />
+export const DefaultStory = () => (
+  <AdvancedDetailsProvider>
+    <GasFeesSection />
+  </AdvancedDetailsProvider>
 );
 
 DefaultStory.storyName = 'Default';
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.test.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.test.tsx
index 9245e160f1ec..a1253dbec8dc 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.test.tsx
@@ -6,6 +6,7 @@ import { genUnapprovedContractInteractionConfirmation } from '../../../../../../
 import mockState from '../../../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers';
 import { getGasFeeTimeEstimate } from '../../../../../../../store/actions';
+import { AdvancedDetailsProvider } from '../../contexts/advanced-details-context';
 import { GasFeesSection } from './gas-fees-section';
 
 jest.mock('../../../../../../../store/actions', () => ({
@@ -20,13 +21,15 @@ describe('<GasFeesSection />', () => {
     const state = { ...mockState, confirm: { currentConfirmation: null } };
     const mockStore = configureMockStore(middleware)(state);
     const { container } = renderWithProvider(
-      <GasFeesSection showAdvancedDetails={false} />,
+      <AdvancedDetailsProvider>
+        <GasFeesSection />
+      </AdvancedDetailsProvider>,
       mockStore,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('renders component for gas fees section with advanced details toggled off', async () => {
+  it('renders component for gas fees section', async () => {
     (getGasFeeTimeEstimate as jest.Mock).mockImplementation(() =>
       Promise.resolve({ upperTimeBound: '1000' }),
     );
@@ -41,34 +44,9 @@ describe('<GasFeesSection />', () => {
     let container;
     await act(async () => {
       const renderResult = renderWithProvider(
-        <GasFeesSection showAdvancedDetails={false} />,
-        mockStore,
-      );
-      container = renderResult.container;
-
-      // Wait for any asynchronous operations to complete
-      await new Promise(setImmediate);
-    });
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders component for gas fees section with advanced details toggled on', async () => {
-    (getGasFeeTimeEstimate as jest.Mock).mockImplementation(() =>
-      Promise.resolve({ upperTimeBound: '1000' }),
-    );
-
-    const state = {
-      ...mockState,
-      confirm: {
-        currentConfirmation: genUnapprovedContractInteractionConfirmation(),
-      },
-    };
-    const mockStore = configureMockStore(middleware)(state);
-    let container;
-    await act(async () => {
-      const renderResult = renderWithProvider(
-        <GasFeesSection showAdvancedDetails={true} />,
+        <AdvancedDetailsProvider>
+          <GasFeesSection />
+        </AdvancedDetailsProvider>,
         mockStore,
       );
       container = renderResult.container;
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.tsx
index a5ca77057b22..8d782cd4b9e7 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/gas-fees-section.tsx
@@ -24,11 +24,7 @@ const LegacyTransactionGasModal = ({
   );
 };
 
-export const GasFeesSection = ({
-  showAdvancedDetails,
-}: {
-  showAdvancedDetails: boolean;
-}) => {
+export const GasFeesSection = () => {
   const transactionMeta = useSelector(
     currentConfirmationSelector,
   ) as TransactionMeta;
@@ -47,10 +43,7 @@ export const GasFeesSection = ({
 
   return (
     <ConfirmInfoSection>
-      <GasFeesDetails
-        setShowCustomizeGasPopover={setShowCustomizeGasPopover}
-        showAdvancedDetails={showAdvancedDetails}
-      />
+      <GasFeesDetails setShowCustomizeGasPopover={setShowCustomizeGasPopover} />
       {!supportsEIP1559 && showCustomizeGasPopover && (
         <LegacyTransactionGasModal
           closeCustomizeGasPopover={closeCustomizeGasPopover}