Update 7702 supported networks and details (#2014)

* Update 7702 supported networks and details

* p -> div

* edit supported networks

Author: alexandratran

src/scss/custom.scss

@@ -355,10 +355,23 @@ ol {
 /* Details */
 
 .details_lb9f > summary {
-  padding-left: 2rem !important;
+  padding-left: 2.7rem !important;
+  font-size: 1.4rem;
+  font-weight: 600;
+  letter-spacing: 0.02rem;
+  text-transform: uppercase;
 
   &::before {
     border-width: 0.8rem !important;
+    margin-left: 0.5rem !important;
+  }
+}
+
+.collapsibleContent_i85q {
+  padding-top: 0 !important;
+
+  > div {
+    font-weight: normal;
   }
 }
 

wallet/how-to/send-transactions/send-batch-transactions.md

@@ -87,17 +87,20 @@ The `atomic` capability can have a `status` of `supported` or `ready`:
 If the `atomic` capability is not `supported` or `ready` for a specified chain ID, MetaMask will not return anything for that chain ID.
 If you don't specify any chain IDs in `wallet_getCapabilities`, MetaMask will return all chains in the wallet where the `atomic` capability is `supported` or `ready`.
 
-:::info Supported networks
+<details>
+<summary>Supported networks</summary>
+<div>
 MetaMask currently supports atomic batch transactions on the following networks:
 
-- Ethereum Mainnet
-- Ethereum Sepolia
-- Gnosis Mainnet
-- Gnosis Chiado
-- BNB Smart Chain
+- Ethereum Mainnet and Sepolia
+- Gnosis Mainnet and Chiado
+- BNB Smart Chain Mainnet and Testnet
+- OP Mainnet
+- Base Mainnet and Sepolia
 
 MetaMask will support this feature on more networks as they adopt EIP-7702.
-:::
+</div>
+</details>
 
 :::note Atomic batch unsupported
 - If the user has already upgraded their account to a third-party smart contract account, MetaMask does not currently support atomic batch transactions for that account.

wallet/tutorials/react-dapp-global-state.md

@@ -498,8 +498,8 @@ will still execute.
 :::
 
 <details>
-<summary><b>Use of `useCallback`</b></summary>
-<p>
+<summary>Use of `useCallback`</summary>
+<div>
 Both of the previous functions use `useCallback`.
 It is used to memoize the `connectWallet` function, optimize performance, and prevent unnecessary re-renders.
 It ensures the function instance remains consistent between renders if its dependencies are changed.
@@ -514,8 +514,7 @@ re-renders of child components.
 Although `useCallback` is not necessary, it demonstrates best practices.
 Predicting how a context provider will be used or how the dapp might change or scale is difficult.
 Using `useCallback` can improve performance in some cases by reducing unnecessary re-renders.
-
-</p>
+</div>
 </details>
 
 Add the following code to `src/hooks/WalletProvider.tsx` to bundle the state and functions using `contextValue`: