feat(portal) new avatar creation

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() {
         <Stars />
         {!mobile && <MoonAnimation />}
 
-        <PasportCitizenship
-          citizenship={citizenship}
-          txHash={txHash}
-          onClickProveeAddress={onClickProveeAddress}
-          onClickDeleteAddress={onClickDeleteAddress}
-          onClickEditAvatar={onClickEditAvatar}
-          updateFunc={setSelectedAddress}
-        />
+        {Object.entries(accountsPassports.accounts).map(
+          ([address, passport]) => (
+            <PasportCitizenship
+              key={address}
+              citizenship={passport?.data}
+              initStateCard={false}
+              txHash={txHash}
+              onClickProveeAddress={onClickProveeAddress}
+              onClickDeleteAddress={onClickDeleteAddress}
+              onClickEditAvatar={onClickEditAvatar}
+              updateFunc={setSelectedAddress}
+            />
+          )
+        )}
       </MainContainer>
       {Math.floor(appStep) === STEP_INFO.STATE_INIT && (
         <ActionBarSteps>

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 }) {
     <>
       <MainContainer>
         <Stars />
-
-        {(step === STEP_INIT || !mobile) && (
+        {(step === STEP_INIT || !mobile) && <PassportMoonCitizenship />}
+        {/*   {(step === STEP_INIT || !mobile) && (
           <MoonAnimation stepCurrent={step} />
-        )}
+        )} */}
 
         {step !== STEP_INIT && step !== STEP_CHECK_GIFT && (
           <Carousel

src/containers/portal/index.tsx

@@ -1,6 +1,5 @@
 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';
@@ -23,11 +22,7 @@ function PortalCitizenship() {
   if (loading) {
     return null;
   }
-
-  if (!passport) {
-    return <GetCitizenship />;
-  }
-  return <PassportMoonCitizenship />;
+  return <GetCitizenship />;
 }
 
 export default PortalCitizenship;

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 (
       <div
         style={{
@@ -123,51 +123,50 @@ function MainPartal({ defaultAccount }) {
         <Dots />
       </div>
     );
-  }
+  } */
 
-  if (stagePortal === STAGE_INIT) {
-    return (
-      <MainContainer>
-        <Stars />
-
-        <div
-          style={{
-            position: 'fixed',
-            zIndex: '3',
-            left: '50%',
-            marginRight: '-50%',
-            transform: `translate(-50%, 40px) scale(${scale})`,
-            transition: 'all 2.7s cubic-bezier(0.67, 0.01, 0.37, 1.01) 0s',
-          }}
+  //if (stagePortal === STAGE_INIT) {
+  return (
+    <MainContainer>
+      <Stars />
+
+      <div
+        style={{
+          position: 'fixed',
+          zIndex: '3',
+          left: '50%',
+          marginRight: '-50%',
+          transform: `translate(-50%, 40px) scale(${scale})`,
+          transition: 'all 2.7s cubic-bezier(0.67, 0.01, 0.37, 1.01) 0s',
+        }}
+      >
+        <img style={{ width: '100%' }} src={spacePussy} alt="spacePussy" />
+        <button
+          type="button"
+          onClick={() => onClickSpacePussy()}
+          className={styles.buttonSpacePussy}
         >
-          <img style={{ width: '100%' }} src={spacePussy} alt="spacePussy" />
-          <button
-            type="button"
-            onClick={() => onClickSpacePussy()}
-            className={styles.buttonSpacePussy}
-          >
-            <div className={styles.textSpacePussy}>cyberverse</div>
-            {/* <img
+          <div className={styles.textSpacePussy}>cyberverse</div>
+          {/* <img
               className={styles.arrowSpacePussy}
               src={rocketSpacePussy}
               alt="arrowSpacePussy"
             /> */}
-            <RocketSpacePussy />
-          </button>
-        </div>
-      </MainContainer>
-    );
-  }
-
-  if (stagePortal === STAGE_PROVE) {
-    return <PortalGift />;
-  }
+          <RocketSpacePussy />
+        </button>
+      </div>
+    </MainContainer>
+  );
+  /*}
+       if (stagePortal === STAGE_PROVE) {
+      return <PortalGift />;
+    }
 
-  if (stagePortal === STAGE_RELEASE) {
-    return <Release />;
-  }
+    if (stagePortal === STAGE_RELEASE) {
+      return <Release />;
+    } 
 
-  return null;
+  return null; */
 }
 
 const mapStateToProps = (store) => {