Fix Asset Id Parsing (#11334)

* fix: correct asset supply check in PayWithAssetProvider

* refactor: improve asset display and validation in Balances and Asset components

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

@@ -35,7 +35,7 @@ function Balances ({ className, infos = [] }: Props): React.ReactElement<Props>
   const completeAssets = useMemo(
     () => infos
       .filter((i): i is AssetInfoComplete => !!(i.details && i.metadata) && !i.details.supply.isZero())
-      .sort((a, b) => a.id.cmp(b.id)),
+    ,
     [infos]
   );
 

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

@@ -5,7 +5,7 @@ import type { AssetInfo } from '@polkadot/react-hooks/types';
 
 import React, { useMemo } from 'react';
 
-import { AddressSmall, Table } from '@polkadot/react-components';
+import { AddressSmall } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 
 import Mint from './Mint/index.js';
@@ -25,8 +25,12 @@ function Asset ({ className, value: { details, id, isIssuerMe, metadata } }: Pro
 
   return (
     <tr className={className}>
-      <Table.Column.Id value={id} />
-      <td className='together'>{metadata?.name.toUtf8()}</td>
+      <td></td>
+      <td className='together'>
+        <span style={{ fontSize: 18, marginRight: 10 }}>
+          {id.toString()}
+        </span>
+        {metadata?.name.toUtf8()}</td>
       <td className='address media--1000'>{details && <AddressSmall value={details.owner} />}</td>
       <td className='address media--1300'>{details && <AddressSmall value={details.admin} />}</td>
       <td className='address media--1600'>{details && <AddressSmall value={details.issuer} />}</td>

packages/page-assets/src/index.tsx

@@ -86,7 +86,10 @@ function AssetApp ({ basePath, className }: Props): React.ReactElement<Props> {
   );
 
   const openId = useMemo(
-    () => findOpenId(api.genesisHash.toHex(), ids),
+    () => findOpenId(
+      api.genesisHash.toHex(),
+      // Check if id is valid digit
+      ids?.filter((id) => /^\d{1,3}(,\d{3})*$/.test(id.toString()))),
     [api.genesisHash, ids]
   );
 

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

@@ -44,8 +44,8 @@ function PayWithAssetProvider ({ children }: Props): React.ReactElement<Props> {
   const completeAssetInfos = useMemo(
     () => (assetInfos
       ?.filter((i): i is AssetInfoComplete =>
-        !!(i.details && i.metadata) && !i.details.supply.isZero() && !!i.details?.toJSON().isSufficient)
-      .sort((a, b) => a.id.cmp(b.id))) || [],
+        !!(i.details && i.metadata) && !i.details.supply.toHuman() && !!i.details?.toJSON().isSufficient)
+    ) || [],
     [assetInfos]
   );