Merge remote-tracking branch 'origin/webapp' into koni/dev/issue-2086

Koniverse · Nov 1, 2023 · 2b9306c · 2b9306c
2 parents f73ff8d + 790119b
commit 2b9306c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/packages/extension-base/src/koni/background/handlers/State.ts b/packages/extension-base/src/koni/background/handlers/State.ts
@@ -510,7 +510,9 @@ export default class KoniState {
   }
 
   public subscribeNftCollection () {
-    return this.dbService.stores.nftCollection.subscribeNftCollection(this.activeChainSlugs);
+    const getChains = () => this.activeChainSlugs;
+
+    return this.dbService.stores.nftCollection.subscribeNftCollection(getChains);
   }
 
   resetNft (newAddress: string): void {

diff --git a/packages/extension-base/src/services/storage-service/db-stores/NftCollection.ts b/packages/extension-base/src/services/storage-service/db-stores/NftCollection.ts
@@ -7,8 +7,8 @@ import { liveQuery } from 'dexie';
 import BaseStoreWithChain from './BaseStoreWithChain';
 
 export default class NftCollectionStore extends BaseStoreWithChain<NftCollection> {
-  subscribeNftCollection (chains?: string[]) {
-    return liveQuery(() => this.getNftCollection(chains));
+  subscribeNftCollection (getChains: () => string[] | undefined) {
+    return liveQuery(() => this.getNftCollection(getChains()));
   }
 
   getNftCollection (chainList?: string[]) {

diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
@@ -5,14 +5,15 @@ import { NftCollection, NftItem } from '@subwallet/extension-base/background/Kon
 import { EmptyList, Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
 import { BaseModal } from '@subwallet/extension-koni-ui/components/Modal/BaseModal';
 import NoContent, { PAGE_TYPE } from '@subwallet/extension-koni-ui/components/NoContent';
+import { IMPORT_NFT_MODAL } from '@subwallet/extension-koni-ui/constants';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import { ScreenContext } from '@subwallet/extension-koni-ui/contexts/ScreenContext';
 import { useGetNftByAccount, useNotification, useSetCurrentPage, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { reloadCron } from '@subwallet/extension-koni-ui/messaging';
 import { NftGalleryWrapper } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/component/NftGalleryWrapper';
 import { INftCollectionDetail } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { ActivityIndicator, Button, ButtonProps, Icon, ModalContext, SwList } from '@subwallet/react-ui';
+import { ActivityIndicator, Button, ButtonProps, Icon, ModalContext, SwList, useExcludeModal } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { ArrowClockwise, Image, Plus, PlusCircle } from 'phosphor-react';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
@@ -39,7 +40,7 @@ const rightIcon = (
   />
 );
 
-const IMPORT_NFT_MODAL = 'import-nft-modal';
+const modalId = IMPORT_NFT_MODAL;
 
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
   useSetCurrentPage('/home/nfts/collections');
@@ -56,6 +57,9 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
   const dataContext = useContext(DataContext);
   const { isWebUI } = useContext(ScreenContext);
+
+  useExcludeModal(modalId);
+
   const { nftCollections, nftItems } = useGetNftByAccount();
   const [loading, setLoading] = React.useState<boolean>(false);
   const notify = useNotification();
@@ -189,11 +193,11 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   }, [emptyButtonProps, isWebUI, t]);
 
   const openImportModal = useCallback(() => {
-    activeModal(IMPORT_NFT_MODAL);
+    activeModal(modalId);
   }, [activeModal]);
 
   const closeImportModal = useCallback(() => {
-    inactiveModal(IMPORT_NFT_MODAL);
+    inactiveModal(modalId);
     setImportNftKey(`importNftKey-${Date.now()}`);
   }, [inactiveModal]);
 
@@ -283,7 +287,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
       <BaseModal
         className={CN('import-nft-modal', className)}
-        id={IMPORT_NFT_MODAL}
+        id={modalId}
         onCancel={closeImportModal}
         title={t('Import NFT')}
       >

diff --git a/packages/extension-koni-ui/src/constants/modal.ts b/packages/extension-koni-ui/src/constants/modal.ts
@@ -42,12 +42,18 @@ export const WALLET_CONNECT_LIST_MODAL = 'wallet-connect-list-modal';
 export const CONFIRMATION_MODAL = 'confirmation-modal';
 export const BUY_TOKEN_MODAL = 'buy-token-modal';
 
+/* Token */
+
+export const IMPORT_NFT_MODAL = 'import-nft-modal';
+
+/* Token */
+
 /* Extension */
 
 export const DISCONNECT_EXTENSION_MODAL = 'disconnect-extension-modal';
 export const SELECT_EXTENSION_MODAL = 'select-extension-modal';
 
-/*  */
+/* Extension  */
 
 /* Earning */