AssetHub: Fee payment with any sufficient asset

packages/apps/public/locales/ar/translation.json

@@ -95,6 +95,7 @@
   "Bond more": "رهن المزيد",
   "Bond more funds": "زيادة رهون الأموال",
   "Bonding Preferences": "تفضيلات الرهن",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "من خلال تحديد هذا الخيار، سيتم خصم رسوم المعاملة تلقائيًا من الأصل المحدد، مما يضمن عملية دفع سلسة وفعالة.",
   "Call": "مكالمة",
   "Call a contract": "اتصل بعقد",
   "Call a method on this contract": "اتصل بطريقة على هذا العقد",
@@ -856,6 +857,7 @@
   "approval type": "نوع الاعتماد",
   "approved": "موافق عليه",
   "asset id": "تعريف الأصل",
+  "asset to pay the fee": "الأصول لدفع الرسوم",
   "auto-selected targets for nomination": "أهداف محددة تلقائيًا للترشيح",
   "available": "متوفر",
   "available signatories": "الموقعون المتاحين",

packages/apps/public/locales/en/react-components.json

@@ -2,6 +2,7 @@
   "0.1x voting balance, no lockup period": "0.1x voting balance, no lockup period",
   "<unknown>": "<unknown>",
   "Add identity judgment": "Add identity judgment",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.",
   "Cancel": "Cancel",
   "Confirm account removal": "Confirm account removal",
   "Confirm address removal": "Confirm address removal",
@@ -62,6 +63,7 @@
   "You are about to remove this contract from your list of available contracts. Once completed, should you need to access it again, you will have to manually add the contract's address in the Instantiate tab.": "You are about to remove this contract from your list of available contracts. Once completed, should you need to access it again, you will have to manually add the contract's address in the Instantiate tab.",
   "address copied": "address copied",
   "amount": "amount",
+  "asset to pay the fee": "asset to pay the fee",
   "available to be unlocked": "available to be unlocked",
   "balance": "balance",
   "beneficiary": "beneficiary",

packages/apps/public/locales/en/translation.json

@@ -138,6 +138,7 @@
   "Bonding Preferences": "",
   "Bounty approval under voting": "",
   "Bounty rejection under voting": "",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "",
   "Call a contract": "",
   "Call results": "",
   "Calls": "",
@@ -1189,6 +1190,7 @@
   "asset id or name to query": "",
   "asset name": "",
   "asset symbol": "",
+  "asset to pay the fee": "asset to pay the fee",
   "assets": "",
   "assignment": "",
   "at specific block": "",

packages/apps/public/locales/es/translation.json

@@ -73,6 +73,7 @@
   "Bond more": "Vincular más",
   "Bond more funds": "Vincular más fondos",
   "Bonding Preferences": "Preferencias de la vinculación",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "Al seleccionar esta opción, la tarifa de transacción se deducirá automáticamente del activo especificado, lo que garantiza un proceso de pago eficiente y sin inconvenientes.",
   "Call": "Llamada",
   "Call a contract": "Llamada a contrato",
   "Call a method on this contract": "Llamada a un método en este contrato",
@@ -714,6 +715,7 @@
   "approval type": "tipo de aprobación",
   "approved": "aprobado",
   "asset id": "id del activo",
+  "asset to pay the fee": "asseto para pagar la tarifa",
   "assignment": "asignación",
   "auto-selected targets for nomination": "candidatos auto seleccionados para la nominación",
   "available": "disponible",

packages/apps/public/locales/fr/translation.json

@@ -107,6 +107,7 @@
   "Bond more": "Allouer davantage",
   "Bond more funds": "Allouer plus de fonds",
   "Bonding Preferences": "Préférences d'allocation",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "En sélectionnant cette option, les frais de transaction seront automatiquement déduits de l'actif spécifié, garantissant un processus de paiement transparent et efficace.",
   "Call": "Appel",
   "Call a contract": "Appel d'un contrat",
   "Call a method on this contract": "Appel d'une méthode sur ce contrat",
@@ -976,6 +977,7 @@
   "approval type": "type d'approbation",
   "approved": "approuvé",
   "asset id": "identifiant de l'élément",
+  "asset to pay the fee": "actif pour payer les frais",
   "auto-selected targets for nomination": "cibles sélectionnées automatiquement pour la nomination",
   "available": "disponible",
   "available signatories": "signataires disponibles",

packages/apps/public/locales/id/translation.json

@@ -112,6 +112,7 @@
   "Bond more": "Tambah obligasi",
   "Bond more funds": "Tambah dana obligasi",
   "Bonding Preferences": "Preferensi obligasi",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "Dengan memilih opsi ini, biaya transaksi akan secara otomatis dipotong dari aset yang ditentukan, memastikan proses pembayaran yang lancar dan efisien",
   "Call": "Panggil",
   "Call a contract": "Panggil kontrak",
   "Call a method on this contract": "Panggile metode dalam kontrak ini",
@@ -1014,6 +1015,7 @@
   "approval type": "tipe persetujuan",
   "approved": "Disetujui",
   "asset id": "id aset",
+  "asset to pay the fee": "aset untuk membayar biayanya",
   "auto-selected targets for nomination": "target yang dipilih secara otomatis untuk nominasi",
   "available": "Tersedia",
   "available signatories": "penandatangan yang tersedia",

packages/apps/public/locales/it/translation.json

@@ -134,6 +134,7 @@
   "Bounties": "Bounties",
   "Bounty approval under voting": "Approvazione del bounty in votazione",
   "Bounty rejection under voting": "Sospensione / Rifiuto del bounty in votazione",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "Selezionando questa opzione, la commissione di transazione verrà automaticamente detratta dall'asset specificato, garantendo un processo di pagamento fluido ed efficiente",
   "Call": "Chiama",
   "Call a contract": "Richiama un contratto",
   "Call a method on this contract": "Richiama un metodo su questo contratto",
@@ -1266,6 +1267,7 @@
   "asset id": "asset id",
   "asset name": "nome asset",
   "asset symbol": "simbolo asset",
+  "asset to pay the fee": "bene per pagare la tassa",
   "assets": "assets",
   "auctions": "aste",
   "auto-selected targets for nomination": "target auto-selezionati per la nomina",

packages/apps/public/locales/ja/translation.json

@@ -45,6 +45,7 @@
   "Aye, I approve": "はい、承認します",
   "Backup account": "バックアップアカウント",
   "Block details": "ブロックの詳細",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "このオプションを選択すると、取引手数料が指定された資産から自動的に差し引かれ、シームレスで効率的な支払いプロセスが保証されます。",
   "Call": "コール",
   "Call a contract": "コントラクトをコールする",
   "Call a method on this contract": "このコントラクトのメソッドをコールする",
@@ -362,6 +363,7 @@
   "amount": "量",
   "approval type": "承認のタイプ",
   "asset id": "アセットid",
+  "asset to pay the fee": "料金を支払うための資産",
   "available signatories": "利用可能な署名",
   "available social recovery helpers": "利用可能なソーシャルリカバリーヘルパー",
   "aye: bool": "はい: bool",

packages/apps/public/locales/ko/translation.json

@@ -104,6 +104,7 @@
   "Bond more": "본드를 더하다",
   "Bond more funds": "추가적인 펀드를 본드하다",
   "Bonding Preferences": "선호하는 본딍",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "이 옵션을 선택하면 거래 수수료가 지정된 자산에서 자동으로 공제되어 원활하고 효율적인 결제 프로세스가 보장됩니다.",
   "Call a contract": "계약서를 콜하다",
   "Call results": "결과를 콜하다",
   "Cancel": "취소",
@@ -948,6 +949,7 @@
   "approval type": "승인 형식",
   "approved": "승인된",
   "asset id": "자산 id",
+  "asset to pay the fee": "수수료를 지불할 자산",
   "available": "가용",
   "available signatories": "현재 서명이 가능한 서명인",
   "available social recovery helpers": "현재 도움을 줄 수 있는 \"계정 복구 도우미\"",

packages/apps/public/locales/pt/translation.json

@@ -70,6 +70,7 @@
   "Bond more": "Vincular mais",
   "Bond more funds": "Vincular mais fundos",
   "Bonding Preferences": "Preferências de vínculação",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "Ao selecionar esta opção, as taxas de transação serão automaticamente deduzidas dos ativos especificados, garantindo um processo de pagamento contínuo e eficiente.",
   "Call": "Chamar",
   "Call a contract": "Chamar um contrato",
   "Call a method on this contract": "Chamar um método neste contrato",
@@ -712,6 +713,7 @@
   "approval type": "tipo de aprovação",
   "approved": "aprovado",
   "asset id": "ID do recurso",
+  "asset to pay the fee": "ativo para pagar a taxa",
   "auto-selected targets for nomination": "destinos selecionados automaticamente para nomeação",
   "available": "acessível",
   "available signatories": "signatários disponíveis",

packages/apps/public/locales/ru/translation.json

@@ -101,6 +101,7 @@
   "Bonding Preferences": "Настройки депонирования",
   "Bounty approval under voting": "Утверждение награды находится в обсуждении",
   "Bounty rejection under voting": "Отмена награды в обсеждении",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "При выборе этой опции комиссия за транзакцию будет автоматически вычтена из указанного актива, обеспечивая беспрепятственный и эффективный процесс оплаты.",
   "Call": "Вызвать",
   "Call a contract": "Вызвать контракт",
   "Call a method on this contract": "Вызвать метод этого контракта",
@@ -901,6 +902,7 @@
   "asset id": "№ актива",
   "asset name": "имя средства",
   "asset symbol": "символ средства",
+  "asset to pay the fee": "актив для оплаты пошлины",
   "assets": "средства",
   "auto-selected targets for nomination": "автоматически выбранные валидаторы",
   "available": "доступный",

packages/apps/public/locales/zh/translation.json

@@ -99,6 +99,7 @@
   "Bond more": "绑定更多",
   "Bond more funds": "绑定更多资金",
   "Bonding Preferences": "绑定偏好设置",
+  "By selecting this option, the transaction fee will be automatically deducted from the specified asset, ensuring a seamless and efficient payment process.": "通过选择此选项，交易费用将从指定资产中自动扣除，确保支付流程无缝高效。",
   "Call": "调用",
   "Call a contract": "调用一个合约",
   "Call a method on this contract": "在合约上调用一个方法",
@@ -927,6 +928,7 @@
   "approved": "已赞成",
   "asset id": "资产 id",
   "asset id or name to query": "要查询的资产id或名称",
+  "asset to pay the fee": "支付費用的資產",
   "auto-selected targets for nomination": "自动选择的提名对象",
   "available": "可用的",
   "available signatories": "可用签署人",

packages/apps/src/Root.tsx

@@ -9,7 +9,7 @@ import { HashRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 
 import { ApiCtxRoot } from '@polkadot/react-api';
-import { ApiStatsCtxRoot, BlockAuthorsCtxRoot, BlockEventsCtxRoot, KeyringCtxRoot, QueueCtxRoot, WindowSizeCtxRoot } from '@polkadot/react-hooks';
+import { ApiStatsCtxRoot, BlockAuthorsCtxRoot, BlockEventsCtxRoot, KeyringCtxRoot, PayWithAssetCtxRoot, QueueCtxRoot, WindowSizeCtxRoot } from '@polkadot/react-hooks';
 import { settings } from '@polkadot/ui-settings';
 
 import Apps from './Apps.js';
@@ -53,7 +53,9 @@ function Root ({ isElectron, store }: Props): React.ReactElement<Props> {
                   <BlockEventsCtxRoot>
                     <HashRouter>
                       <WindowSizeCtxRoot>
-                        <Apps />
+                        <PayWithAssetCtxRoot>
+                          <Apps />
+                        </PayWithAssetCtxRoot>
                       </WindowSizeCtxRoot>
                     </HashRouter>
                   </BlockEventsCtxRoot>

packages/page-assets/src/Balances/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { DropdownItemProps } from 'semantic-ui-react';
-import type { AssetInfo, AssetInfoComplete } from '../types.js';
+import type { AssetInfo, AssetInfoComplete } from '@polkadot/react-hooks/types';
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 

packages/page-assets/src/Overview/Asset.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2025 @polkadot/app-assets authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AssetInfo } from '../types.js';
+import type { AssetInfo } from '@polkadot/react-hooks/types';
 
 import React, { useMemo } from 'react';
 

packages/page-assets/src/Overview/Assets.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2025 @polkadot/app-assets authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AssetInfo } from '../types.js';
+import type { AssetInfo } from '@polkadot/react-hooks/types';
 
 import React, { useRef } from 'react';
 

packages/page-assets/src/Overview/index.tsx

@@ -1,8 +1,8 @@
 // Copyright 2017-2025 @polkadot/app-assets authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { AssetInfo } from '@polkadot/react-hooks/types';
 import type { BN } from '@polkadot/util';
-import type { AssetInfo } from '../types.js';
 
 import React, { useState } from 'react';
 

packages/page-assets/src/index.tsx

@@ -12,14 +12,12 @@ import { Route, Routes } from 'react-router';
 
 import { getGenesis } from '@polkadot/apps-config';
 import { Tabs } from '@polkadot/react-components';
-import { useAccounts, useApi } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useAssetIds, useAssetInfos } from '@polkadot/react-hooks';
 import { BN_ONE } from '@polkadot/util';
 
 import Balances from './Balances/index.js';
 import Overview from './Overview/index.js';
 import { useTranslation } from './translate.js';
-import useAssetIds from './useAssetIds.js';
-import useAssetInfos from './useAssetInfos.js';
 
 interface Props {
   basePath: string;

packages/react-components/src/AccountSidebar/JudgementTag.tsx

@@ -1,8 +1,7 @@
 // Copyright 2017-2025 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Judgement } from '@polkadot/react-hooks/types';
-import type { DisplayedJudgement } from '../types.js';
+import type { DisplayedJudgement, Judgement } from '../types.js';
 
 import React, { useMemo } from 'react';
 

packages/react-components/src/PayWithAsset.tsx

@@ -0,0 +1,61 @@
+// Copyright 2017-2025 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DropdownItemProps } from 'semantic-ui-react';
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Dropdown } from '@polkadot/react-components';
+import { useApi, usePayWithAsset } from '@polkadot/react-hooks';
+import { BN } from '@polkadot/util';
+
+import { useTranslation } from './translate.js';
+
+const PayWithAsset = () => {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const [selectedAssetValue, setSelectedAssetValue] = useState('0');
+
+  const { assetOptions, isDisabled, onChange } = usePayWithAsset();
+
+  const nativeAsset = useMemo(
+    () => api.registry.chainTokens[0],
+    [api]
+  );
+
+  const onSearch = useCallback(
+    (options: DropdownItemProps[], value: string): DropdownItemProps[] =>
+      options.filter((options) => {
+        const { text: optText, value: optValue } = options as { text: string, value: number };
+
+        return parseInt(value) === optValue || optText.includes(value);
+      }),
+    []
+  );
+
+  const onSelect = useCallback((value: string) => {
+    onChange(value === nativeAsset ? new BN(-1) : new BN(value), () => setSelectedAssetValue(value));
+  }, [nativeAsset, onChange]);
+
+  useEffect((): void => {
+    const info = assetOptions.find(({ value }) => value === selectedAssetValue);
+
+    // if no info found (usually happens on first load), select the first one automatically
+    if (!info) {
+      setSelectedAssetValue(assetOptions.at(0)?.value ?? nativeAsset);
+    }
+  }, [assetOptions, selectedAssetValue, nativeAsset]);
+
+  return (
+    <Dropdown
+      isDisabled={isDisabled}
+      label={t('asset to pay the fee')}
+      onChange={onSelect}
+      onSearch={onSearch}
+      options={assetOptions}
+      value={selectedAssetValue}
+    />
+  );
+};
+
+export default React.memo(PayWithAsset);

packages/react-components/src/Status/types.ts

@@ -3,7 +3,8 @@
 
 import type { SubmittableResult } from '@polkadot/api';
 import type { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import type { SignerResult } from '@polkadot/api/types';
+import type { SignerOptions, SignerResult } from '@polkadot/api/types';
+import type { AssetInfoComplete } from '@polkadot/react-hooks/types';
 import type { AccountId, Address } from '@polkadot/types/interfaces';
 import type { DefinitionRpcExt, Registry, SignerPayloadJSON } from '@polkadot/types/types';
 
@@ -51,6 +52,7 @@ export interface QueueTx extends AccountInfo {
   txUpdateCb?: TxCallback;
   values?: unknown[];
   status: QueueTxStatus;
+  signerOptions?: Partial<SignerOptions & { feeAsset: AssetInfoComplete | null }>;
 }
 
 export interface QueueStatus extends ActionStatus {
@@ -87,6 +89,7 @@ export interface PartialQueueTxExtrinsic extends PartialAccountInfo {
   txStartCb?: () => void;
   txUpdateCb?: TxCallback;
   isUnsigned?: boolean;
+  signerOptions?: Partial<SignerOptions & { feeAsset: AssetInfoComplete | null }>;
 }
 
 export interface PartialQueueTxRpc extends PartialAccountInfo {