diff --git a/src/containers/portal/PasportMoonCitizenship.tsx b/src/containers/portal/PasportMoonCitizenship.tsx index 2bd7f7934..f2b447670 100644 --- a/src/containers/portal/PasportMoonCitizenship.tsx +++ b/src/containers/portal/PasportMoonCitizenship.tsx @@ -21,8 +21,11 @@ import { Button } from '../../components'; import { routes } from 'src/routes'; import { useAppSelector } from 'src/redux/hooks'; import { selectCurrentPassport } from 'src/features/passport/passports.redux'; -import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress'; import { useAdviser } from 'src/features/adviser/context'; +import { selectAccountsPassports } from 'src/features/passport/passports.redux'; +import usePassportContract from 'src/features/passport/usePassportContract'; +import PassportLoader from 'src/features/passport/PassportLoader'; +import convertPassportToCitizenship from './convertPassportToCitizenship'; const portalAmbient = require('../../sounds/portalAmbient112.mp3'); @@ -46,6 +49,7 @@ const stopPortalAmbient = () => { function PassportMoonCitizenship() { const { isMobile: mobile } = useDevice(); const defaultAccount = useAppSelector((state) => state.pocket.defaultAccount); + const accountsPassports = useAppSelector(selectAccountsPassports); const citizenship = useAppSelector(selectCurrentPassport); // FIXME: backward compatibility @@ -126,20 +130,40 @@ function PassportMoonCitizenship() { setTxHash(data); }; + const passportIds = usePassportContract<{ tokens: string[] }>({ + query: { + tokens: { + owner: addressActive?.bech32, + }, + }, + }); + return ( <> {!mobile && } - + {passportIds.data?.tokens.map((tokenId) => ( + ( + + )} + /> + ))} {Math.floor(appStep) === STEP_INFO.STATE_INIT && ( diff --git a/src/containers/portal/citizenship/Info.tsx b/src/containers/portal/citizenship/Info.tsx index 5984bbf53..53e3242fb 100644 --- a/src/containers/portal/citizenship/Info.tsx +++ b/src/containers/portal/citizenship/Info.tsx @@ -53,7 +53,7 @@ function Info({ let content; switch (stepCurrent) { - case STEP_INIT: + /* case STEP_INIT: content = (
); - break; + break; */ case STEP_NICKNAME_CHOSE: content = ( diff --git a/src/containers/portal/convertPassportToCitizenship.ts b/src/containers/portal/convertPassportToCitizenship.ts new file mode 100644 index 000000000..5947dcfcb --- /dev/null +++ b/src/containers/portal/convertPassportToCitizenship.ts @@ -0,0 +1,17 @@ +import { Citizenship } from 'src/types/citizenship'; + +const convertPassportToCitizenship = ( + passport: any, + owner: string +): Citizenship => { + return { + owner: owner, + extension: { + nickname: passport.extension?.nickname, + avatar: passport.extension?.avatar, + addresses: passport.extension?.addresses, + }, + }; +}; + +export default convertPassportToCitizenship; diff --git a/src/containers/portal/mainPortal.jsx b/src/containers/portal/mainPortal.jsx index c72ec6ff6..03a2ce277 100644 --- a/src/containers/portal/mainPortal.jsx +++ b/src/containers/portal/mainPortal.jsx @@ -66,7 +66,7 @@ function MainPartal({ defaultAccount }) { if (responseActivePassport !== null) { const { addresses } = responseActivePassport.extension; if (addresses !== null) { - setStagePortal(STAGE_RELEASE); + setStagePortal(STAGE_INIT); } else { setStagePortal(STAGE_PROVE); } @@ -83,6 +83,7 @@ function MainPartal({ defaultAccount }) { }; getPasport(); }, [queryClient, defaultAccount, stagePortal]); + console.debug('stagePortal', stagePortal); const { setAdviser } = useAdviser(); diff --git a/src/features/passport/PassportLoader.ts b/src/features/passport/PassportLoader.ts new file mode 100644 index 000000000..dfc8de4a2 --- /dev/null +++ b/src/features/passport/PassportLoader.ts @@ -0,0 +1,25 @@ +import { Citizenship } from 'src/types/citizenship'; +import usePassportContract from './usePassportContract'; + +function PassportLoader({ + tokenId, + render, +}: { + tokenId: string; + render: (passport: Citizenship) => JSX.Element | null; +}) { + const { data: passport } = usePassportContract({ + query: { + nft_info: { + token_id: tokenId, + }, + }, + }); + + if (!passport) { + return null; + } + return render(passport); +} + +export default PassportLoader; diff --git a/src/pages/Keys/KeyItem/KeyItem.tsx b/src/pages/Keys/KeyItem/KeyItem.tsx index d7db3693b..241def861 100644 --- a/src/pages/Keys/KeyItem/KeyItem.tsx +++ b/src/pages/Keys/KeyItem/KeyItem.tsx @@ -13,33 +13,12 @@ import cx from 'classnames'; import { useSelector } from 'react-redux'; import { RootState } from 'src/redux/store'; import MusicalAddress from 'src/components/MusicalAddress/MusicalAddress'; +import PassportLoader from 'src/features/passport/PassportLoader'; type Props = { account: AccountValue; }; -function PassportLoader({ - tokenId, - render, -}: { - tokenId: string; - render: (passport: Citizenship) => JSX.Element | null; -}) { - const { data: passport } = usePassportContract({ - query: { - nft_info: { - token_id: tokenId, - }, - }, - }); - - if (!passport) { - return null; - } - - return render(passport); -} - function KeyItem({ account, selected, selectKey }: Props) { const { name, bech32, keys, path } = account;