From 4ee9662a1cf77e40ddcae3b987d0a872cfde2117 Mon Sep 17 00:00:00 2001 From: S2kael Date: Thu, 26 Oct 2023 20:31:58 +0700 Subject: [PATCH 1/2] [Issue-1978] Fix not show NFT after import --- packages/extension-base/src/koni/background/handlers/State.ts | 4 +++- .../src/services/storage-service/db-stores/NftCollection.ts | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/extension-base/src/koni/background/handlers/State.ts b/packages/extension-base/src/koni/background/handlers/State.ts index 00e93959b0..a386be6117 100644 --- 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 index de1bed283d..9c30b6ccfb 100644 --- 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 { - subscribeNftCollection (chains?: string[]) { - return liveQuery(() => this.getNftCollection(chains)); + subscribeNftCollection (getChains: () => string[] | undefined) { + return liveQuery(() => this.getNftCollection(getChains())); } getNftCollection (chainList?: string[]) { From 8436c6b119a3eca021ed02ffd376872a4b001a26 Mon Sep 17 00:00:00 2001 From: S2kael Date: Thu, 26 Oct 2023 20:34:10 +0700 Subject: [PATCH 2/2] [Issue-1978] Fix UI for modal when import NFT --- .../src/Popup/Home/Nfts/NftCollections.tsx | 14 +++++++++----- packages/extension-koni-ui/src/constants/modal.ts | 8 +++++++- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx index f61685e161..8fee3a6edb 100644 --- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx @@ -5,6 +5,7 @@ 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'; @@ -12,7 +13,7 @@ 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 { useSetCurrentPage('/home/nfts/collections'); @@ -56,6 +57,9 @@ function Component ({ className = '' }: Props): React.ReactElement { const dataContext = useContext(DataContext); const { isWebUI } = useContext(ScreenContext); + + useExcludeModal(modalId); + const { nftCollections, nftItems } = useGetNftByAccount(); const [loading, setLoading] = React.useState(false); const notify = useNotification(); @@ -189,11 +193,11 @@ function Component ({ className = '' }: Props): React.ReactElement { }, [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]); @@ -282,7 +286,7 @@ function Component ({ className = '' }: Props): React.ReactElement { diff --git a/packages/extension-koni-ui/src/constants/modal.ts b/packages/extension-koni-ui/src/constants/modal.ts index 4436d045d3..f3c19a099c 100644 --- 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 */