Adjust asset available id lookup (#5135)

* Adjust available id lookup

* Update packages/page-assets/src/index.tsx

* (now) unused import

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

@@ -1,6 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-assets authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type BN from 'bn.js';
 import type { AssetId } from '@polkadot/types/interfaces';
 import type { InfoState, TeamState } from './types';
 
@@ -17,13 +18,14 @@ interface Props {
   assetIds: AssetId[];
   className?: string;
   onClose: () => void;
+  openId: BN;
 }
 
 const BATCH_OPTIONS = {
   isBatchAll: true
 };
 
-function Create ({ assetIds, className, onClose }: Props): React.ReactElement<Props> {
+function Create ({ assetIds, className, onClose, openId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [step, nextStep, prevStep] = useStepper();
@@ -69,6 +71,7 @@ function Create ({ assetIds, className, onClose }: Props): React.ReactElement<Pr
           assetIds={assetIds}
           defaultValue={asset}
           onChange={setAsset}
+          openId={openId}
         />
       )}
       {step === 2 && asset && (

packages/page-assets/src/Overview/Create/Info.tsx

@@ -9,7 +9,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { Input, InputAddress, InputBalance, InputNumber, Modal } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
-import { BN_ONE, BN_ZERO } from '@polkadot/util';
+import { BN_ZERO } from '@polkadot/util';
 
 import { useTranslation } from '../../translate';
 
@@ -18,19 +18,14 @@ interface Props {
   className?: string;
   defaultValue: InfoState | null;
   onChange: (info: InfoState | null) => void;
+  openId: BN;
 }
 
-function findAvailbleId (assetIds: AssetId[]): BN {
-  return assetIds.length
-    ? assetIds[assetIds.length - 1].add(BN_ONE)
-    : BN_ONE;
-}
-
-function Info ({ assetIds, className = '', defaultValue, onChange }: Props): React.ReactElement<Props> {
+function Info ({ assetIds, className = '', defaultValue, onChange, openId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [initial] = useState(() => defaultValue);
-  const [initialId] = useState(() => findAvailbleId(assetIds));
+  const [initialId] = useState(() => openId);
   const [accountId, setAccountId] = useState<string | null>(null);
   const [assetId, setAssetId] = useState<BN | null>(null);
   const [assetDecimals, setAssetDecimals] = useState<BN | null>(null);

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

@@ -1,6 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-assets authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type BN from 'bn.js';
 import type { AssetId } from '@polkadot/types/interfaces';
 
 import React from 'react';
@@ -14,9 +15,10 @@ import Create from './Create';
 interface Props {
   assetIds?: AssetId[];
   className?: string;
+  openId: BN;
 }
 
-function CreateButton ({ assetIds, className }: Props): React.ReactElement<Props> {
+function CreateButton ({ assetIds, className, openId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [isOpen, toggleOpen] = useToggle();
@@ -34,6 +36,7 @@ function CreateButton ({ assetIds, className }: Props): React.ReactElement<Props
           assetIds={assetIds}
           className={className}
           onClose={toggleOpen}
+          openId={openId}
         />
       )}
     </>

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

@@ -1,6 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-assets authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type BN from 'bn.js';
 import type { AssetId } from '@polkadot/types/interfaces';
 import type { AssetInfo } from '../types';
 
@@ -16,14 +17,18 @@ interface Props {
   className?: string;
   ids?: AssetId[];
   infos?: AssetInfo[];
+  openId: BN;
 }
 
-function Overview ({ className, ids, infos }: Props): React.ReactElement<Props> {
+function Overview ({ className, ids, infos, openId }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <Summary numAssets={ids?.length} />
       <Button.Group>
-        <Create assetIds={ids} />
+        <Create
+          assetIds={ids}
+          openId={openId}
+        />
       </Button.Group>
       <Assets infos={infos} />
     </div>

packages/page-assets/src/index.tsx

@@ -1,11 +1,15 @@
 // Copyright 2017-2021 @polkadot/app-assets authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type BN from 'bn.js';
+import type { AssetId } from '@polkadot/types/interfaces';
+
 import React, { useMemo, useRef } from 'react';
 import { Route, Switch } from 'react-router';
 
 import { Tabs } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
+import { BN_ONE } from '@polkadot/util';
 
 import Balances from './Balances';
 import Overview from './Overview';
@@ -18,7 +22,23 @@ interface Props {
   className?: string;
 }
 
-function GiltApp ({ basePath, className }: Props): React.ReactElement<Props> {
+function findOpenId (ids?: AssetId[]): BN {
+  if (!ids || !ids.length) {
+    return BN_ONE;
+  }
+
+  const lastTaken = ids.find((id, index) =>
+    index === 0
+      ? !id.eq(BN_ONE)
+      : !id.sub(BN_ONE).eq(ids[index - 1])
+  );
+
+  return lastTaken
+    ? lastTaken.sub(BN_ONE)
+    : ids[ids.length - 1].add(BN_ONE);
+}
+
+function AssetApp ({ basePath, className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const ids = useAssetIds();
@@ -41,6 +61,11 @@ function GiltApp ({ basePath, className }: Props): React.ReactElement<Props> {
     [hasAccounts, infos]
   );
 
+  const openId = useMemo(
+    () => findOpenId(ids),
+    [ids]
+  );
+
   return (
     <main className={className}>
       <Tabs
@@ -56,6 +81,7 @@ function GiltApp ({ basePath, className }: Props): React.ReactElement<Props> {
           <Overview
             ids={ids}
             infos={infos}
+            openId={openId}
           />
         </Route>
       </Switch>
@@ -63,4 +89,4 @@ function GiltApp ({ basePath, className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(GiltApp);
+export default React.memo(AssetApp);