[Spike] Update PaymentInfo to use Assets pallet for fee asset if applicable

packages/apps-config/src/settings/feeAssets.ts

@@ -0,0 +1,13 @@
+// Copyright 2017-2022 @polkadot/apps-config authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ChainSpecName, FeeAsset } from './types';
+
+// A mapping of chains to their fee asset if different to the native token
+export const feeAssets: Record<ChainSpecName, FeeAsset> = {
+  root: {
+    assetId: 2,
+    decimals: 6,
+    symbol: 'XRP'
+  }
+};

packages/apps-config/src/settings/index.ts

@@ -2,5 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './ethereumChains';
+export * from './feeAssets';
 export * from './languages';
 export * from './ss58';

packages/apps-config/src/settings/types.ts

@@ -21,3 +21,10 @@ export interface LinkOption extends Option {
   paraId?: number;
   textBy: string;
 }
+
+export type ChainSpecName = string;
+export interface FeeAsset {
+  assetId: number;
+  symbol: string;
+  decimals: number;
+}

packages/react-hooks/src/index.ts

@@ -30,6 +30,7 @@ export { useEventChanges } from './useEventChanges';
 export { useEventTrigger } from './useEventTrigger';
 export { useExtrinsicTrigger } from './useExtrinsicTrigger';
 export { useFavorites } from './useFavorites';
+export { useFeeAssetBalance } from './useFeeAssetBalance';
 export { useFormField } from './useFormField';
 export { useIncrement } from './useIncrement';
 export { useInflation } from './useInflation';

packages/react-hooks/src/useFeeAssetBalance.ts

@@ -0,0 +1,40 @@
+// Copyright 2017-2022 @polkadot/react-signer authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { FeeAsset } from '@polkadot/apps-config/settings/types';
+import type { Option } from '@polkadot/types';
+import type { PalletAssetsAssetAccount } from '@polkadot/types/lookup';
+import type { BN } from '@polkadot/util';
+
+import { useEffect, useState } from 'react';
+
+import { feeAssets } from '@polkadot/apps-config';
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+export const useFeeAssetBalance = (accountId: string | null): [
+  FeeAsset,
+  BN | null
+] => {
+  const { api } = useApi();
+  const [feeBalance, setFeeBalance] = useState<BN | null>(null);
+  const feeAsset = feeAssets[api.runtimeVersion.specName.toString()];
+  const assetsAccount = useCall<Option<PalletAssetsAssetAccount>>(api.query.assets?.account, [feeAsset?.assetId, accountId]);
+
+  useEffect(() => {
+    if (!assetsAccount) {
+      return;
+    }
+
+    if (assetsAccount.isSome) {
+      const { balance } = assetsAccount.unwrap();
+
+      setFeeBalance(balance);
+    }
+
+    if (assetsAccount.isNone) {
+      setFeeBalance(api.registry.createType('Balance', 0));
+    }
+  }, [api, assetsAccount]);
+
+  return [feeAsset, feeBalance];
+};

packages/react-signer/src/PaymentInfo.tsx

@@ -10,7 +10,7 @@ import React, { useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 
 import { Expander, MarkWarning } from '@polkadot/react-components';
-import { useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
+import { useApi, useCall, useFeeAssetBalance, useIsMountedRef } from '@polkadot/react-hooks';
 import { formatBalance, nextTick } from '@polkadot/util';
 
 import { useTranslation } from './translate';
@@ -27,6 +27,7 @@ interface Props {
 function PaymentInfo ({ accountId, className = '', extrinsic }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
+  const [feeAsset, feeAssetBalance] = useFeeAssetBalance(accountId);
   const [dispatchInfo, setDispatchInfo] = useState<RuntimeDispatchInfo | null>(null);
   const balances = useCall<DeriveBalancesAll>(api.derive.balances?.all, [accountId]);
   const mountedRef = useIsMountedRef();
@@ -48,22 +49,24 @@ function PaymentInfo ({ accountId, className = '', extrinsic }: Props): React.Re
     return null;
   }
 
-  const isFeeError = api.consts.balances && !api.tx.balances?.transfer.is(extrinsic) && balances?.accountId.eq(accountId) && (
+  const isFeeError = !feeAsset && api.consts.balances && !api.tx.balances?.transfer.is(extrinsic) && balances?.accountId.eq(accountId) && (
     balances.availableBalance.lte(dispatchInfo.partialFee) ||
     balances.freeBalance.sub(dispatchInfo.partialFee).lte(api.consts.balances.existentialDeposit)
   );
 
+  const isFeeAssetError = feeAsset && feeAssetBalance?.lte(dispatchInfo.partialFee);
+
   return (
     <>
       <Expander
         className={className}
         summary={
           <Trans i18nKey='feesForSubmission'>
-            Fees of <span className='highlight'>{formatBalance(dispatchInfo.partialFee, { withSiFull: true })}</span> will be applied to the submission
+            Fees of <span className='highlight'>{formatBalance(dispatchInfo.partialFee, { decimals: feeAsset?.decimals, withSiFull: true, withUnit: feeAsset?.symbol })}</span> will be applied to the submission
           </Trans>
         }
       />
-      {isFeeError && (
+      {(isFeeError || isFeeAssetError) && (
         <MarkWarning content={t<string>('The account does not have enough free funds (excluding locked/bonded/reserved) available to cover the transaction fees without dropping the balance below the account existential amount.')} />
       )}
     </>