refactor: remove unused useEffect and clean up fee asset handling (#11397)

packages/react-hooks/src/ctx/PayWithAsset.tsx

@@ -5,7 +5,7 @@ import type { BN } from '@polkadot/util';
 import type { AssetInfoComplete } from '../types.js';
 import type { PayWithAsset } from './types.js';
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { useApi, useAssetIds, useAssetInfos } from '@polkadot/react-hooks';
 
@@ -75,10 +75,6 @@ function PayWithAssetProvider ({ children }: Props): React.ReactElement<Props> {
   [api.call.assetConversionApi, api.registry.metadata.extrinsic.signedExtensions, api.tx.assetConversion, completeAssetInfos.length]
   );
 
-  useEffect(() => {
-    return () => setSelectedFeeAsset(null);
-  });
-
   const values: PayWithAsset = useMemo(() => {
     return {
       assetOptions,

packages/react-signer/src/PayWithAsset.tsx

@@ -53,17 +53,20 @@ const PayWithAsset = ({ onChangeFeeAsset }: Props) => {
   }, [assetOptions, selectedAssetValue, nativeAsset]);
 
   useEffect(() => {
-    if (selectedFeeAsset) {
-      onChangeFeeAsset((e) =>
-        ({
-          ...e,
-          assetId: getFeeAssetLocation(api, selectedFeeAsset),
-          feeAsset: selectedFeeAsset
-        })
-      );
-    }
+    onChangeFeeAsset((e) =>
+      ({
+        ...e,
+        assetId: getFeeAssetLocation(api, selectedFeeAsset),
+        feeAsset: selectedFeeAsset
+      })
+    );
   }, [api, onChangeFeeAsset, selectedFeeAsset]);
 
+  useEffect(() => {
+    // Reselect native asset on component unmount
+    return () => onSelect(nativeAsset);
+  }, [nativeAsset, onSelect]);
+
   return (
     <Modal.Columns hint={t('By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.')}>
       <Dropdown