From 17f5bbb0704001f9eca72785412f593f5ca45250 Mon Sep 17 00:00:00 2001 From: OggyKUN Date: Sun, 1 Sep 2024 13:47:32 +0300 Subject: [PATCH 1/4] feat(portal): ability to create new avatar --- src/containers/portal/index.tsx | 6 +- src/containers/portal/mainPortal.jsx | 129 +++++++++++++-------------- 2 files changed, 65 insertions(+), 70 deletions(-) diff --git a/src/containers/portal/index.tsx b/src/containers/portal/index.tsx index a33dfc79b..fd00aed16 100644 --- a/src/containers/portal/index.tsx +++ b/src/containers/portal/index.tsx @@ -23,11 +23,7 @@ function PortalCitizenship() { if (loading) { return null; } - - if (!passport) { - return ; - } - return ; + return ; } export default PortalCitizenship; diff --git a/src/containers/portal/mainPortal.jsx b/src/containers/portal/mainPortal.jsx index c72ec6ff6..1e1f00486 100644 --- a/src/containers/portal/mainPortal.jsx +++ b/src/containers/portal/mainPortal.jsx @@ -23,10 +23,10 @@ const playAudioClick = () => { audioBtnObg.play(); }; -const STAGE_LOADING = 0; +/* const STAGE_LOADING = 0; const STAGE_INIT = 1; const STAGE_PROVE = 2; -const STAGE_RELEASE = 3; +const STAGE_RELEASE = 3; */ const getActiveAddress = (address) => { const { account } = address; @@ -48,41 +48,41 @@ const scaleInitValue = 0.9; function MainPartal({ defaultAccount }) { const navigate = useNavigate(); - const queryClient = useQueryClient(); - const [stagePortal, setStagePortal] = useState(STAGE_LOADING); + // const queryClient = useQueryClient(); + // const [stagePortal, setStagePortal] = useState(STAGE_INIT); const [scale, setScale] = useState(scaleInitValue); - useEffect(() => { - const getPasport = async () => { - if (stagePortal === STAGE_LOADING) { - setStagePortal(STAGE_LOADING); - if (queryClient) { - const addressActive = getActiveAddress(defaultAccount); - if (addressActive !== null) { - const responseActivePassport = await activePassport( - queryClient, - addressActive.bech32 - ); - if (responseActivePassport !== null) { - const { addresses } = responseActivePassport.extension; - if (addresses !== null) { - setStagePortal(STAGE_RELEASE); + /* useEffect(() => { + const getPasport = async () => { + if (stagePortal === STAGE_LOADING) { + setStagePortal(STAGE_LOADING); + if (queryClient) { + const addressActive = getActiveAddress(defaultAccount); + if (addressActive !== null) { + const responseActivePassport = await activePassport( + queryClient, + addressActive.bech32 + ); + if (responseActivePassport !== null) { + const { addresses } = responseActivePassport.extension; + if (addresses !== null) { + setStagePortal(STAGE_RELEASE); + } else { + setStagePortal(STAGE_PROVE); + } } else { - setStagePortal(STAGE_PROVE); + setStagePortal(STAGE_INIT); } } else { setStagePortal(STAGE_INIT); } } else { - setStagePortal(STAGE_INIT); + setStagePortal(STAGE_LOADING); } - } else { - setStagePortal(STAGE_LOADING); } - } - }; - getPasport(); - }, [queryClient, defaultAccount, stagePortal]); + }; + getPasport(); + }, [queryClient, defaultAccount, stagePortal]); */ const { setAdviser } = useAdviser(); @@ -111,7 +111,7 @@ function MainPartal({ defaultAccount }) { playAudioClick(); }; - if (stagePortal === STAGE_LOADING) { + /* if (stagePortal === STAGE_LOADING) { return (
); - } + } */ - if (stagePortal === STAGE_INIT) { - return ( - - - -
+ + +
+ spacePussy +
+ {/* arrowSpacePussy */} - - -
- - ); - } - - if (stagePortal === STAGE_PROVE) { - return ; - } + + + + + ); + /*} + if (stagePortal === STAGE_PROVE) { + return ; + } - if (stagePortal === STAGE_RELEASE) { - return ; - } + if (stagePortal === STAGE_RELEASE) { + return ; + } - return null; + return null; */ } const mapStateToProps = (store) => { From 4f0fa4c49f360bba6b7ebc069083cb95fed48819 Mon Sep 17 00:00:00 2001 From: OggyKUN Date: Thu, 5 Sep 2024 05:28:58 +0300 Subject: [PATCH 2/4] feat(citizenship): add user avatars display --- .../portal/PasportMoonCitizenship.tsx | 24 ++++++++++++------- src/containers/portal/citizenship/index.tsx | 7 +++--- src/containers/portal/index.tsx | 1 - 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/containers/portal/PasportMoonCitizenship.tsx b/src/containers/portal/PasportMoonCitizenship.tsx index 2bd7f7934..f3a80d8bd 100644 --- a/src/containers/portal/PasportMoonCitizenship.tsx +++ b/src/containers/portal/PasportMoonCitizenship.tsx @@ -23,6 +23,7 @@ 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'; const portalAmbient = require('../../sounds/portalAmbient112.mp3'); @@ -46,6 +47,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 @@ -132,14 +134,20 @@ function PassportMoonCitizenship() { {!mobile && } - + {Object.entries(accountsPassports.accounts).map( + ([address, passport]) => ( + + ) + )} {Math.floor(appStep) === STEP_INFO.STATE_INIT && ( diff --git a/src/containers/portal/citizenship/index.tsx b/src/containers/portal/citizenship/index.tsx index 8fcfe816f..2aaf372b3 100644 --- a/src/containers/portal/citizenship/index.tsx +++ b/src/containers/portal/citizenship/index.tsx @@ -8,6 +8,7 @@ import { useSigningClient } from 'src/contexts/signerClient'; import { getKeplr } from 'src/utils/keplrUtils'; import { useDevice } from 'src/contexts/device'; import { Nullable } from 'src/types'; +import PassportMoonCitizenship from 'src/containers/portal/PasportMoonCitizenship'; import { useAdviser } from 'src/features/adviser/context'; import { useBackend } from 'src/contexts/backend/backend'; @@ -616,10 +617,10 @@ function GetCitizenship({ defaultAccount }) { <> - - {(step === STEP_INIT || !mobile) && ( + {(step === STEP_INIT || !mobile) && } + {/* {(step === STEP_INIT || !mobile) && ( - )} + )} */} {step !== STEP_INIT && step !== STEP_CHECK_GIFT && ( Date: Wed, 6 Nov 2024 20:47:22 +0300 Subject: [PATCH 3/4] feat(portal): avatar list display --- .../portal/PasportMoonCitizenship.tsx | 86 ++++++++++++++++--- src/containers/portal/citizenship/Info.tsx | 4 +- 2 files changed, 74 insertions(+), 16 deletions(-) diff --git a/src/containers/portal/PasportMoonCitizenship.tsx b/src/containers/portal/PasportMoonCitizenship.tsx index f3a80d8bd..08c61a6f4 100644 --- a/src/containers/portal/PasportMoonCitizenship.tsx +++ b/src/containers/portal/PasportMoonCitizenship.tsx @@ -24,6 +24,8 @@ 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 { Citizenship } from 'src/types/citizenship'; const portalAmbient = require('../../sounds/portalAmbient112.mp3'); @@ -128,26 +130,82 @@ function PassportMoonCitizenship() { setTxHash(data); }; + const convertPassportToCitizenship = (passport: any): Citizenship => { + return { + owner: addressActive?.bech32, + extension: { + nickname: passport.extension?.nickname, + avatar: passport.extension?.avatar, + addresses: passport.extension?.addresses, + }, + }; + }; + + const activePassport = usePassportContract({ + query: { + active_passport: { + address: addressActive?.bech32, + }, + }, + }); + + const passportIds = usePassportContract<{ tokens: string[] }>({ + query: { + tokens: { + owner: addressActive?.bech32, + }, + }, + }); + + 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; + } + console.debug('passport', passport); + console.debug( + 'convertPassportToCitizenship(passport)', + convertPassportToCitizenship(passport) + ); + return render(passport); + } + return ( <> {!mobile && } - {Object.entries(accountsPassports.accounts).map( - ([address, passport]) => ( - - ) - )} + {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 = ( From 2e573066e2bf9a085e550b83de4df099159b2912 Mon Sep 17 00:00:00 2001 From: OggyKUN Date: Thu, 7 Nov 2024 07:40:26 +0300 Subject: [PATCH 4/4] fix(portal): fix avatars list display --- .../portal/PasportMoonCitizenship.tsx | 56 +------- src/containers/portal/citizenship/index.tsx | 7 +- .../portal/convertPassportToCitizenship.ts | 17 +++ src/containers/portal/index.tsx | 7 +- src/containers/portal/mainPortal.jsx | 130 +++++++++--------- src/features/passport/PassportLoader.ts | 25 ++++ src/pages/Keys/KeyItem/KeyItem.tsx | 23 +--- 7 files changed, 125 insertions(+), 140 deletions(-) create mode 100644 src/containers/portal/convertPassportToCitizenship.ts create mode 100644 src/features/passport/PassportLoader.ts diff --git a/src/containers/portal/PasportMoonCitizenship.tsx b/src/containers/portal/PasportMoonCitizenship.tsx index 08c61a6f4..f2b447670 100644 --- a/src/containers/portal/PasportMoonCitizenship.tsx +++ b/src/containers/portal/PasportMoonCitizenship.tsx @@ -21,11 +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 { Citizenship } from 'src/types/citizenship'; +import PassportLoader from 'src/features/passport/PassportLoader'; +import convertPassportToCitizenship from './convertPassportToCitizenship'; const portalAmbient = require('../../sounds/portalAmbient112.mp3'); @@ -130,25 +130,6 @@ function PassportMoonCitizenship() { setTxHash(data); }; - const convertPassportToCitizenship = (passport: any): Citizenship => { - return { - owner: addressActive?.bech32, - extension: { - nickname: passport.extension?.nickname, - avatar: passport.extension?.avatar, - addresses: passport.extension?.addresses, - }, - }; - }; - - const activePassport = usePassportContract({ - query: { - active_passport: { - address: addressActive?.bech32, - }, - }, - }); - const passportIds = usePassportContract<{ tokens: string[] }>({ query: { tokens: { @@ -157,32 +138,6 @@ function PassportMoonCitizenship() { }, }); - 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; - } - console.debug('passport', passport); - console.debug( - 'convertPassportToCitizenship(passport)', - convertPassportToCitizenship(passport) - ); - return render(passport); - } - return ( <> @@ -195,13 +150,16 @@ function PassportMoonCitizenship() { tokenId={tokenId} render={(passport) => ( )} /> diff --git a/src/containers/portal/citizenship/index.tsx b/src/containers/portal/citizenship/index.tsx index 2aaf372b3..8fcfe816f 100644 --- a/src/containers/portal/citizenship/index.tsx +++ b/src/containers/portal/citizenship/index.tsx @@ -8,7 +8,6 @@ import { useSigningClient } from 'src/contexts/signerClient'; import { getKeplr } from 'src/utils/keplrUtils'; import { useDevice } from 'src/contexts/device'; import { Nullable } from 'src/types'; -import PassportMoonCitizenship from 'src/containers/portal/PasportMoonCitizenship'; import { useAdviser } from 'src/features/adviser/context'; import { useBackend } from 'src/contexts/backend/backend'; @@ -617,10 +616,10 @@ function GetCitizenship({ defaultAccount }) { <> - {(step === STEP_INIT || !mobile) && } - {/* {(step === STEP_INIT || !mobile) && ( + + {(step === STEP_INIT || !mobile) && ( - )} */} + )} {step !== STEP_INIT && step !== STEP_CHECK_GIFT && ( { + 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/index.tsx b/src/containers/portal/index.tsx index b6fdd0d10..a33dfc79b 100644 --- a/src/containers/portal/index.tsx +++ b/src/containers/portal/index.tsx @@ -1,5 +1,6 @@ import { useEffect } from 'react'; import GetCitizenship from './citizenship'; +import PassportMoonCitizenship from './PasportMoonCitizenship'; import { useAppSelector } from 'src/redux/hooks'; import { selectCurrentAddress } from 'src/redux/features/pocket'; import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress'; @@ -22,7 +23,11 @@ function PortalCitizenship() { if (loading) { return null; } - return ; + + if (!passport) { + return ; + } + return ; } export default PortalCitizenship; diff --git a/src/containers/portal/mainPortal.jsx b/src/containers/portal/mainPortal.jsx index 1e1f00486..03a2ce277 100644 --- a/src/containers/portal/mainPortal.jsx +++ b/src/containers/portal/mainPortal.jsx @@ -23,10 +23,10 @@ const playAudioClick = () => { audioBtnObg.play(); }; -/* const STAGE_LOADING = 0; +const STAGE_LOADING = 0; const STAGE_INIT = 1; const STAGE_PROVE = 2; -const STAGE_RELEASE = 3; */ +const STAGE_RELEASE = 3; const getActiveAddress = (address) => { const { account } = address; @@ -48,41 +48,42 @@ const scaleInitValue = 0.9; function MainPartal({ defaultAccount }) { const navigate = useNavigate(); - // const queryClient = useQueryClient(); - // const [stagePortal, setStagePortal] = useState(STAGE_INIT); + const queryClient = useQueryClient(); + const [stagePortal, setStagePortal] = useState(STAGE_LOADING); const [scale, setScale] = useState(scaleInitValue); - /* useEffect(() => { - const getPasport = async () => { - if (stagePortal === STAGE_LOADING) { - setStagePortal(STAGE_LOADING); - if (queryClient) { - const addressActive = getActiveAddress(defaultAccount); - if (addressActive !== null) { - const responseActivePassport = await activePassport( - queryClient, - addressActive.bech32 - ); - if (responseActivePassport !== null) { - const { addresses } = responseActivePassport.extension; - if (addresses !== null) { - setStagePortal(STAGE_RELEASE); - } else { - setStagePortal(STAGE_PROVE); - } - } else { + useEffect(() => { + const getPasport = async () => { + if (stagePortal === STAGE_LOADING) { + setStagePortal(STAGE_LOADING); + if (queryClient) { + const addressActive = getActiveAddress(defaultAccount); + if (addressActive !== null) { + const responseActivePassport = await activePassport( + queryClient, + addressActive.bech32 + ); + if (responseActivePassport !== null) { + const { addresses } = responseActivePassport.extension; + if (addresses !== null) { setStagePortal(STAGE_INIT); + } else { + setStagePortal(STAGE_PROVE); } } else { setStagePortal(STAGE_INIT); } } else { - setStagePortal(STAGE_LOADING); + setStagePortal(STAGE_INIT); } + } else { + setStagePortal(STAGE_LOADING); } - }; - getPasport(); - }, [queryClient, defaultAccount, stagePortal]); */ + } + }; + getPasport(); + }, [queryClient, defaultAccount, stagePortal]); + console.debug('stagePortal', stagePortal); const { setAdviser } = useAdviser(); @@ -111,7 +112,7 @@ function MainPartal({ defaultAccount }) { playAudioClick(); }; - /* if (stagePortal === STAGE_LOADING) { + if (stagePortal === STAGE_LOADING) { return (
); - } */ - - //if (stagePortal === STAGE_INIT) { - return ( - - + } -
- spacePussy - -
- - ); - /*} - if (stagePortal === STAGE_PROVE) { - return ; - } + + +
+ + ); + } - if (stagePortal === STAGE_RELEASE) { - return ; - } + if (stagePortal === STAGE_PROVE) { + return ; + } + + if (stagePortal === STAGE_RELEASE) { + return ; + } - return null; */ + return null; } const mapStateToProps = (store) => { 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;