feat: transfer passport nft

Author: caiolima-stage

src/components/AccountList/index.tsx

@@ -13,6 +13,7 @@ import PassportInfo from '../PassportInfo';
 import SelectActivePassportPopup from '../SelectActivePassportPopup';
 import { refreshSolanaBalances, storeSystemData } from '../../services/wallets';
 import { CoNET_Data } from '../../utils/globals';
+import { useNavigate } from 'react-router-dom';
 
 interface AccountListProps {
   showMainWallet?: boolean;
@@ -32,6 +33,8 @@ export default function AccountList({ showMainWallet = true, simplifiedView = fa
 
   const { isSelectPassportPopupOpen, setIsSelectPassportPopupOpen } = useDaemonContext();
 
+  const navigate = useNavigate();
+
   function toggleAccount(accountAddress: string) {
     setOpenAccountList((prev) => (
       prev.includes(accountAddress) ? prev.filter((item) => item !== accountAddress) : [...prev, accountAddress]
@@ -206,7 +209,7 @@ export default function AccountList({ showMainWallet = true, simplifiedView = fa
         !simplifiedView && (
           <div className="cta-buttons" style={{ marginBottom: "0px" }}>
             <div className="highlight-1">
-              <button className='disabled'>
+              <button onClick={() => navigate('/transfer')}>
                 <p>Transfer Silent Pass Passport</p>
               </button>
             </div>

src/pages/Subscription/page-components/FifthStep.tsx renamed to src/components/global-steps/Declined.tsx

@@ -1,4 +1,4 @@
-export default function FifthStep() {
+export default function Declined() {
   return (
     <>
       <span style={{ display: 'block' }}></span>

src/pages/Subscription/page-components/ThirdStep.tsx renamed to src/components/global-steps/Loading.tsx

@@ -1,6 +1,6 @@
-import LoadingRing from '../../../components/LoadingRing';
+import LoadingRing from '../LoadingRing';
 
-export default function ThirdStep() {
+export default function Loading() {
   return (
     <div className="step-container">
       <LoadingRing />

src/pages/Subscription/index.tsx

@@ -5,15 +5,14 @@ import FirstStep from './page-components/FirstStep';
 import Header from './page-components/Header';
 import PageFooter from './page-components/Footer';
 import SecondStep from './page-components/SecondStep';
-import ThirdStep from './page-components/ThirdStep';
-import FifthStep from './page-components/FifthStep';
 import FourthStep from './page-components/FourthStep';
 
 import './index.css';
 import { getOracle, purchasePassport } from '../../services/passportPurchase';
 import { useDaemonContext } from '../../providers/DaemonProvider';
-
-export type Step = 1 | 2 | 3 | 4 | 5;
+import Loading from '../../components/global-steps/Loading';
+import Declined from '../../components/global-steps/Declined';
+import { Step } from '../../types/global-types';
 
 export default function Subscription() {
   const [step, setStep] = useState<Step>(1);
@@ -142,9 +141,9 @@ export default function Subscription() {
 
       {step === 1 && <FirstStep spInUsd={spInUsd} solInUsd={solInUsd} />} {/* Purchase payment */}
       {step === 2 && <SecondStep price={price} gasfee={gasfee} updateCounter={updateCounter} spInUsd={spInUsd} solInUsd={solInUsd} />} {/* Purchase confirmation */}
-      {step === 3 && <ThirdStep />} {/* Purchase loading */}
+      {step === 3 && <Loading />} {/* Purchase loading */}
       {step === 4 && <FourthStep price={price} gasfee={gasfee} />} {/* Purchase successful */}
-      {step === 5 && <FifthStep />} {/* Purchase declined */}
+      {step === 5 && <Declined />} {/* Purchase declined */}
 
       <PageFooter step={step} handleButtonAction={handleButtonAction} isSubmitButtonDisabled={isSubmitButtonDisabled} />
     </div>

src/pages/Subscription/page-components/Footer.tsx

@@ -1,10 +1,7 @@
-import { useNavigate } from 'react-router-dom';
-import { Step } from '..';
 
+
+import { Step } from '../../../types/global-types';
 import { ReactComponent as ProgressIcon } from "../assets/progress-activity.svg";
-import { useDaemonContext } from '../../../providers/DaemonProvider';
-import { useEffect, useState } from 'react';
-import { purchasePassport } from '../../../services/passportPurchase';
 
 interface FooterProps {
   step: Step;
@@ -13,7 +10,6 @@ interface FooterProps {
 }
 
 export default function Footer({ step, isSubmitButtonDisabled, handleButtonAction }: FooterProps) {
-
   return (
     <div className="subscription-footer">
       {(step === 2 || step === 3) && <p>Your transaction completion time may vary and can take up to 24 hours. Confirmation of Transaction Hash will display on completion.</p>}

src/pages/Subscription/page-components/Header.tsx

@@ -1,5 +1,5 @@
 import BackButton from '../../../components/BackButton';
-import { Step } from '..';
+import { Step } from '../../../types/global-types';
 
 export default function Header({ step, setStep }: { step: Step, setStep: (step: Step) => void }) {
   return (