diff --git a/packages/react-hooks/src/ctx/PayWithAsset.tsx b/packages/react-hooks/src/ctx/PayWithAsset.tsx
index c2aaba46eb5..a588cc9ad01 100644
--- a/packages/react-hooks/src/ctx/PayWithAsset.tsx
+++ b/packages/react-hooks/src/ctx/PayWithAsset.tsx
@@ -69,8 +69,10 @@ function PayWithAssetProvider ({ children }: Props): React.ReactElement<Props> {
     api.registry.metadata.extrinsic.signedExtensions.some(
       (a) => a.identifier.toString() === 'ChargeAssetTxPayment'
     ) &&
-    api.tx.assetConversion && completeAssetInfos.length > 0,
-  [api.registry.metadata.extrinsic.signedExtensions, api.tx.assetConversion, completeAssetInfos.length]
+    !!api.tx.assetConversion &&
+    !!api.call.assetConversionApi &&
+    completeAssetInfos.length > 0,
+  [api.call.assetConversionApi, api.registry.metadata.extrinsic.signedExtensions, api.tx.assetConversion, completeAssetInfos.length]
   );
 
   useEffect(() => {
diff --git a/packages/react-signer/src/PayWithAsset.tsx b/packages/react-signer/src/PayWithAsset.tsx
index e7f5e8ffab6..d823dc86553 100644
--- a/packages/react-signer/src/PayWithAsset.tsx
+++ b/packages/react-signer/src/PayWithAsset.tsx
@@ -20,7 +20,7 @@ interface Props {
 const PayWithAsset = ({ onChangeFeeAsset }: Props) => {
   const { t } = useTranslation();
   const { api } = useApi();
-  const [selectedAssetValue, setSelectedAssetValue] = useState('0');
+  const [selectedAssetValue, setSelectedAssetValue] = useState('-1');
 
   const { assetOptions, isDisabled, onChange, selectedFeeAsset } = usePayWithAsset();
 
@@ -55,7 +55,6 @@ const PayWithAsset = ({ onChangeFeeAsset }: Props) => {
   useEffect(() => {
     if (selectedFeeAsset) {
       onChangeFeeAsset((e) =>
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         ({
           ...e,
           assetId: getFeeAssetLocation(api, selectedFeeAsset),