-
-
-
$CONET
+
+
+
-
{profiles?.[0]?.tokens?.conetDepin?.balance || (0.0).toFixed(6)}
-
-
-
-
-
$ETH
+
+
+
{profiles?.[0]?.tokens?.conetDepin?.balance || (0.0).toFixed(6)}
+
+
+
+
{profiles?.[0]?.tokens?.conet_eth?.balance || (0.0).toFixed(6)}
-
{profiles?.[0]?.tokens?.conet_eth?.balance || (0.0).toFixed(6)}
-
-
-
-
-
Silent Pass Passport
-
-
Freemium
- {
- profiles?.[0]?.activeFreePassport?.expires ?
-
{getRemainingTime(profiles?.[0]?.activeFreePassport?.expires)}
- :
- }
+
-
-
-
+ }
-
-
-
-
-
-
-
+
toggleAccount("123")}>
-
+
Solana Wallet
-
+
+ {
+ simplifiedView && (
+
+ {
+ profiles?.[1].keyID ? (
+
{profiles?.[1]?.keyID?.slice(0, 5)}...{profiles?.[1]?.keyID?.slice(-5)}
+ ) : (
+
+ )
+ }
+
+
+ )
+ }
-
Tokens
+
+
Token assets
+ {renderRefreshButton()}
+
-
$SP
+ {
+ simplifiedView ? (
+
+
Silent Pass
+
{profiles?.[1]?.tokens?.sp?.balance || (0.0).toFixed(6)}
+
+ ) : (
+
$SP
+ )
+ }
-
{profiles?.[1]?.tokens?.conetDepin?.balance || (0.0).toFixed(6)}
+ {
+ simplifiedView ? (
+
${(spInUsd * parseFloat(profiles?.[1]?.tokens?.sp?.balance || '0')).toFixed(2)}
+ ) : (
+
{profiles?.[1]?.tokens?.sp?.balance || (0.0).toFixed(6)}
+ )
+ }
+
-
$SOL
+ {
+ simplifiedView ? (
+
+
Solana
+
{profiles?.[1]?.tokens?.sol?.balance || (0.0).toFixed(6)}
+
+ ) : (
+
$SOL
+ )
+ }
-
{profiles?.[1]?.tokens?.conetDepin?.balance || (0.0).toFixed(6)}
+ {
+ simplifiedView ? (
+
${(solInUsd * parseFloat(profiles?.[1]?.tokens?.sol?.balance || '0')).toFixed(2)}
+ ) : (
+
{profiles?.[1]?.tokens?.sol?.balance || (0.0).toFixed(6)}
+ )
+ }
-
-
+ {
+ !simplifiedView && (
+ <>
+
+
+
+ )
+ }
diff --git a/src/components/AffiliateOptions/index.css b/src/components/AffiliateOptions/index.css
new file mode 100644
index 0000000..70639f4
--- /dev/null
+++ b/src/components/AffiliateOptions/index.css
@@ -0,0 +1,37 @@
+.affiliate-options {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ flex: 1;
+}
+
+.affiliate-options .copy-button {
+ width: 100%;
+ border-radius: 16px;
+
+ display: flex;
+ padding: 16px 8px;
+ justify-content: center;
+ align-items: center;
+ gap: 16px;
+
+ color: #FFFFFF;
+ background: #4E72B6;
+ font-weight: 700;
+
+ cursor: pointer;
+
+ margin-top: 32px;
+}
+
+.affiliate-footer {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.affiliate-footer > p {
+ font-size: 12px;
+ color: #989899;
+}
\ No newline at end of file
diff --git a/src/components/AffiliateOptions/index.tsx b/src/components/AffiliateOptions/index.tsx
new file mode 100644
index 0000000..e3c780a
--- /dev/null
+++ b/src/components/AffiliateOptions/index.tsx
@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import './index.css'
+import { useDaemonContext } from '../../providers/DaemonProvider';
+import { useNavigate } from 'react-router-dom';
+import ChoosePlan from '../ChoosePlan';
+
+interface AffiliateOptionsProps {
+ isAffiliate: boolean;
+}
+
+export default function AffiliateOptions({ isAffiliate }: AffiliateOptionsProps) {
+ const navigate = useNavigate();
+
+ const { profiles } = useDaemonContext();
+ const [isKeyCopied, setIsKeyCopied] = useState
(false);
+
+ function handleCopyKey() {
+ navigator.clipboard.writeText(profiles[0].keyID)
+ setIsKeyCopied(true)
+
+ setTimeout(() => {
+ setIsKeyCopied(false)
+ }, 2000)
+ }
+
+ function subscribe() {
+ navigate("/subscription");
+ }
+
+ return (
+
+ {
+ isAffiliate ?
:
+ }
+
+
+
+ {
+ !isAffiliate && (
+
Copy your CoNET wallet public key and submit it to the Silent Pass Team to complete your Affiliate Program registration.
+ )
+ }
+
+
+
Choose plan
+
+
+
+
+
+
{monthly}
+
+
+
+
$USD
+
{monthly !== 0 ? (9.99 * monthly).toFixed(2) : 9.99}
+
+
+
+
+
+
+
{yearly}
+
+
+
+
$USD
+
{yearly !== 0 ? (24.99 * yearly).toFixed(2) : 24.99}
+
+
+
+
+
+
+
-
-
-
)
diff --git a/src/components/MiningStatus/index.tsx b/src/components/MiningStatus/index.tsx
index 1e36e01..d378b71 100644
--- a/src/components/MiningStatus/index.tsx
+++ b/src/components/MiningStatus/index.tsx
@@ -6,7 +6,7 @@ import Skeleton from '../Skeleton';
const OneDayInSeconds = 86400;
const MiningStatus = () => {
- const { miningData, profiles, setIsPassportInfoOpen, activePassportUpdated } = useDaemonContext();
+ const { miningData, profiles, activePassportUpdated } = useDaemonContext();
const [isMiningUp, setIsMiningUp] = useState(false);
const [passportTimeLeft, setPassportTimeLeft] = useState(0);
@@ -24,9 +24,6 @@ const MiningStatus = () => {
}
}, [activePassportUpdated, profiles])
- const openPassportInfo = () => {
- setIsPassportInfoOpen(true)
- }
return (
@@ -34,12 +31,6 @@ const MiningStatus = () => {
Miners: {miningData?.online ? miningData.online : }
-
-
- Freemium
-
-
Users: {miningData?.totalUsers ? miningData.totalUsers : }
);
diff --git a/src/components/PassportInfoPopup/index.tsx b/src/components/PassportInfoPopup/index.tsx
index 08a60e7..75aa1e0 100644
--- a/src/components/PassportInfoPopup/index.tsx
+++ b/src/components/PassportInfoPopup/index.tsx
@@ -1,41 +1,10 @@
import { useDaemonContext } from "../../providers/DaemonProvider";
-import { getRemainingTime } from "../../utils/utils";
import './index.css';
-import Skeleton from "../Skeleton";
const PassportInfoPopup = () => {
- const { profiles, isPassportInfoOpen, setIsPassportInfoOpen } = useDaemonContext();
+ const { profiles } = useDaemonContext();
- return isPassportInfoOpen ? (
-
setIsPassportInfoOpen(false)}>
-
-
-
-
Silent Pass Passport
-
Freemium
-
-
-
-
Expiration date
- {
- profiles?.[0]?.activeFreePassport?.expires ?
-
{getRemainingTime(profiles?.[0]?.activeFreePassport?.expires)}
- :
- }
-
-
-
-
-
-
-
-
-
-
- ) : <>
+ return <>
};
export default PassportInfoPopup;
\ No newline at end of file
diff --git a/src/components/SimpleLoadingRing/index.css b/src/components/SimpleLoadingRing/index.css
new file mode 100644
index 0000000..3bd83bc
--- /dev/null
+++ b/src/components/SimpleLoadingRing/index.css
@@ -0,0 +1,20 @@
+@keyframes rotation {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.loading-ring-container {
+ display: flex;
+ flex-direction: row !important;
+ justify-content: center !important;
+ align-items: center !important;
+ width: 100% !important;
+}
+
+.loading-ring-container img {
+ animation: rotation 2s infinite linear !important;
+}
\ No newline at end of file
diff --git a/src/components/SimpleLoadingRing/index.tsx b/src/components/SimpleLoadingRing/index.tsx
new file mode 100644
index 0000000..ac9c8db
--- /dev/null
+++ b/src/components/SimpleLoadingRing/index.tsx
@@ -0,0 +1,9 @@
+import './index.css';
+
+export default function SimpleLoadingRing() {
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/global-steps/Declined.tsx b/src/components/global-steps/Declined.tsx
new file mode 100644
index 0000000..8b5b685
--- /dev/null
+++ b/src/components/global-steps/Declined.tsx
@@ -0,0 +1,17 @@
+export default function Declined() {
+ return (
+ <>
+
+
+
+
+
+
+
+
Purchase declined
+
Please contact us on Discord or Telegram.
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/global-steps/Loading.tsx b/src/components/global-steps/Loading.tsx
new file mode 100644
index 0000000..f30765b
--- /dev/null
+++ b/src/components/global-steps/Loading.tsx
@@ -0,0 +1,10 @@
+import LoadingRing from '../LoadingRing';
+
+export default function Loading() {
+ return (
+
+
+
Please wait, this may take a few seconds.
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Management/assets/arrow.svg b/src/pages/Management/assets/arrow.svg
new file mode 100644
index 0000000..405110d
--- /dev/null
+++ b/src/pages/Management/assets/arrow.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/pages/Management/assets/refresh-icon.svg b/src/pages/Management/assets/refresh-icon.svg
new file mode 100644
index 0000000..4af60e4
--- /dev/null
+++ b/src/pages/Management/assets/refresh-icon.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/pages/Management/assets/visibility-off.svg b/src/pages/Management/assets/visibility-off.svg
new file mode 100644
index 0000000..a70619c
--- /dev/null
+++ b/src/pages/Management/assets/visibility-off.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/pages/Management/assets/visibility-on.svg b/src/pages/Management/assets/visibility-on.svg
new file mode 100644
index 0000000..7e5c3c0
--- /dev/null
+++ b/src/pages/Management/assets/visibility-on.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/pages/Management/index.css b/src/pages/Management/index.css
new file mode 100644
index 0000000..d248e5f
--- /dev/null
+++ b/src/pages/Management/index.css
@@ -0,0 +1,276 @@
+h2 {
+ font-size: 20px;
+ font-weight: bold;
+ text-align: left;
+ margin-bottom: 10px;
+}
+
+.sub-heading {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ margin: 0 0 24px;
+
+ height: 37px;
+}
+
+.sub-heading button {
+ background: #9FBFE5FE;
+ color: #3F3F40;
+}
+
+.main-content-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ background: #191919;
+ border-radius: 16px;
+}
+
+.generate-btn {
+ background-color: #007bff;
+ padding: 10px 15px;
+ font-weight: bold;
+ font-size: 14px;
+ border-radius: 8px;
+ float: right;
+ cursor: pointer;
+}
+
+.category-switch {
+ display: flex;
+ gap: 16px;
+
+ border-radius: 16px;
+ background: #3F3F40;
+ padding: 16px;
+}
+
+.category-switch button {
+ flex: 1;
+ padding: 12px;
+ font-size: 24px;
+ border-radius: 8px;
+
+ padding: 4px 16px;
+ border-radius: 8px;
+
+ cursor: pointer;
+
+ background: #3F3F40;
+ transition: background .12s ease;
+}
+
+.category-switch button:hover {
+ background: #2F2F2F;
+}
+
+.category-switch button.active {
+ background: #191919;
+}
+
+.filters {
+ display: flex;
+ gap: 4px;
+ margin-top: 10px;
+
+ padding: 0 16px;
+}
+
+.filters button {
+ flex: 1;
+ padding: 8px;
+ border-radius: 8px;
+
+ padding: 4px 6px;
+ border-radius: 12px;
+
+ font-size: 12px;
+
+ cursor: pointer;
+
+ color: #B1B1B2;
+ background: #191919;
+ transition: background .12s ease;
+}
+
+.filters button:hover {
+ background: #2F2F2F;
+}
+
+.filters button.active {
+ background: #3F3F40;
+}
+
+.filters button, .category-switch button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.management-heading {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ margin-bottom: 32px;
+}
+
+.management-heading button {
+ gap: 8px;
+
+ border: 1px solid #9FBFE5FE;
+ padding: 4px 8px;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+.management-heading button p {
+ color: #9FBFE5FE;
+ font-weight: 700;
+}
+
+.quantity-selector {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: #1a1a1a;
+ padding: 8px;
+ border-radius: 8px;
+ margin-top: 10px;
+}
+
+.quantity-selector p {
+ font-size: 14px;
+}
+
+.quantity-selector span {
+ padding: 0 10px;
+ font-size: 18px;
+}
+
+.quantity-selector div {
+ display: flex;
+ align-items: center;
+
+ gap: 8px;
+}
+
+.quantity-selector div button {
+ border-radius: 4px;
+
+ color: #1C1B1F;
+ background: #9FBFE5FE;
+
+ width: 32px;
+ height: 32px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ font-size: 18px;
+ font-weight: 700;
+
+ cursor: pointer;
+}
+
+.quantity-selector div button:disabled {
+ color: #5B5B5B;
+ background: #262626;
+
+ cursor: not-allowed;
+}
+
+.nft-list {
+ margin-top: 15px;
+}
+
+.nft-item {
+ padding: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ border-top: 1px solid #3F3F40;
+}
+
+.nft-info {
+ text-align: left;
+
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.nft-id {
+ font-size: 14px;
+ font-weight: bold;
+}
+
+.redeem-code {
+ font-size: 12px;
+ color: #676768;
+ word-break: break-all;
+}
+
+.nft-actions {
+ display: flex;
+ gap: 8px;
+}
+
+.icon-btn {
+ background: none;
+ border: none;
+ font-size: 16px;
+ color: white;
+ cursor: pointer;
+}
+
+.icon-btn.hidden svg {
+ margin-top: 2px;
+}
+
+.icon-btn img {
+ width: 20px;
+ height: 20px;
+ filter: grayscale(.8);
+ margin-right: 4px;
+}
+
+.refresh {
+ color: #9fbfe5fe !important;
+ cursor: pointer;
+ padding-bottom: 0.5rem;
+}
+.refreshing {
+ color: #748dabfe !important;
+ padding-bottom: 0.5rem;
+}
+
+.pagination-controls {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+
+ margin: 8px 0;
+ padding: 12px;
+
+ background: #191919;
+ border-radius: 12px;
+}
+
+.pagination-controls button {
+ width: 40px;
+ height: 40px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ background: #494849;
+ border-radius: 4px;
+}
\ No newline at end of file
diff --git a/src/pages/Management/index.tsx b/src/pages/Management/index.tsx
new file mode 100644
index 0000000..396969f
--- /dev/null
+++ b/src/pages/Management/index.tsx
@@ -0,0 +1,332 @@
+import { useState, useEffect } from 'react';
+import Footer from '../../components/Footer';
+
+import { ReactComponent as VisibilityOnIcon } from "./assets/visibility-on.svg";
+import { ReactComponent as VisibilityOffIcon } from "./assets/visibility-off.svg";
+import { ReactComponent as RefreshIcon } from "./assets/refresh-icon.svg";
+import { ReactComponent as ArrowIcon } from "./assets/arrow.svg";
+
+import {NFTsProcess, getNFTs, distributorNFTItem, distributorNFTObj, redeemProcess } from '../../services/wallets'
+import './index.css';
+
+type NFTCategory = "monthly" | "yearly";
+type NFTFilter = "all" | "used" | "to be used" | "no redeem";
+
+const ITEMS_PER_PAGE = 10;
+
+
+export default function Management() {
+ const [category, setCategory] = useState
("monthly");
+ const [filter, setFilter] = useState("all");
+ const [generateQuantity, setGenerateQuantity] = useState(5);
+ const [isGetNFTs, setisGetNFTs] = useState(false);
+ const [isReflashNFTs, setisReflashNFTs] = useState(false);
+ const [allNFTs, setAllNFTs] = useState(null);
+ const [clickRedeem, setClickRedeem] = useState(false);
+ const [redeemProcessing, setRedeemProcessing] = useState(false);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [hiddenCodes, setHiddenCodes] = useState>({});
+ const [copiedStates, setCopiedStates] = useState>({});
+
+ useEffect(() => {
+ getNFTs().then(nfts => {
+ if (!nfts) return;
+
+ setAllNFTs(nfts)
+ const plainNFTIDList = [...nfts?.monthly?.nfts, ...nfts?.yearly.nfts].map((nft) => nft.id);
+ const hiddenCodesMapping: Record = {};
+
+ plainNFTIDList.forEach((nftId) => hiddenCodesMapping[nftId] = true);
+
+ setHiddenCodes(hiddenCodesMapping);
+ })
+ }, [])
+
+ useEffect(() => {
+ const doRedeem = async () => {
+ await getRedeem()
+
+ }
+ if (clickRedeem) {
+ doRedeem()
+ }
+ }, [clickRedeem])
+
+ const getRedeem = async () => {
+ if (!allNFTs||!getAvailableRedeem()) {
+ return
+ }
+
+ const _category = category
+ const allItems = allNFTs[category].nfts.filter(n => !n.code && !n.showRedeemProcess)
+
+ if (allItems.length === 0) {
+ return
+ }
+ const item = allItems[0]
+ const newItem: distributorNFTItem = {id: item.id, code: item.code, showRedeemProcess: true, used: false}
+
+ setAllNFTs(currentItems => {
+ if (!currentItems) {
+ return currentItems
+ }
+ currentItems[_category].nfts = currentItems[_category].nfts.map(n => n.id === item.id ? newItem: n)
+ return currentItems
+ })
+ setRedeemProcessing(true)
+ const code = await redeemProcess(item.id, _category === 'monthly' ? true : false)
+
+ if (code) {
+ newItem.code = code
+ newItem.showRedeemProcess = false
+ setAllNFTs(currentItems => {
+ if (!currentItems) {
+ return currentItems
+ }
+ currentItems[_category].nfts = currentItems[_category].nfts.map(n => n.id === item.id ? newItem: n)
+ return currentItems
+ })
+ }
+ setRedeemProcessing(false)
+ setClickRedeem(false)
+ }
+
+ const getAvailableRedeem = () => {
+ const items = getFilteredNFTs()
+ const availableItems = items.filter(n => !n.code && !n.showRedeemProcess)
+ return availableItems.length > 0
+ }
+
+ const newNFTsProcessUI = async () => {
+ if (isGetNFTs) {
+ return
+ }
+ setisGetNFTs(true)
+ await NFTsProcess()
+ setisGetNFTs(false)
+ }
+
+
+ const renderNewNFTsButton = () => {
+
+ if (isGetNFTs) {
+ return new NFTs...
+ }
+
+ return newNFTsProcessUI()}>get new NFTs
+ }
+
+ const reflashNftsProcess = async () => {
+ if (isReflashNFTs) {
+ return
+ }
+ setisReflashNFTs(true)
+ const result = await getNFTs ()
+
+ setAllNFTs(result)
+ setisReflashNFTs(false)
+ }
+
+ console.log("NFTS: ", allNFTs);
+
+ const getFilteredNFTs = (): distributorNFTItem[] => {
+ if (!allNFTs || !allNFTs[category].nfts) {
+ return []
+ }
+ if (filter === "all") {
+ const ret = allNFTs[category].nfts
+
+ return ret
+ }
+
+ if (filter === 'to be used') {
+ const ret = allNFTs[category].nfts.filter(n => n.code && !n.used)
+
+ return ret
+ }
+
+ if (filter === 'used') {
+ const ret = allNFTs[category].nfts.filter(n => n.used)
+
+ return ret
+ }
+
+ const ret = allNFTs[category].nfts.filter(n => !n.code)
+
+ return ret
+ }
+
+ const copyCode = (id: string, code: string) => {
+ navigator.clipboard.writeText(code);
+ setCopiedStates((prev) => ({ ...prev, [id]: true }));
+
+ setTimeout(() => {
+ setCopiedStates((prev) => ({ ...prev, [id]: false }));
+ }, 2000);
+ };
+
+ const toggleVisibility = (id: string) => {
+ setHiddenCodes((prev) => ({ ...prev, [id]: !prev[id] }));
+ };
+
+ console.log("ALL NFTS: ", allNFTs);
+
+ const filteredNFTs = getFilteredNFTs();
+ const totalPages = Math.ceil(filteredNFTs.length / ITEMS_PER_PAGE);
+ const paginatedNFTs = filteredNFTs.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
+
+ return (
+
+
+
Management
+
+
+ {/* {renderNewNFTsButton()} */}
+
+
Your NFTs
+ {
+ filter === 'no redeem' && getAvailableRedeem() && !redeemProcessing &&
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+
Select quantity
+
+
+ {generateQuantity}
+
+
+
*/}
+
+ {/*
+ {getFilteredNFTs().map((n, index) => (
+
+
+
+ {
+ n.showRedeemProcess ?
+
Redeem...
:
+
+ }
+
+ ))}
+
*/}
+
+
+ {paginatedNFTs.map((nft) => (
+
+
+
{nft.id}
+ {nft.code &&
Redeem code
}
+ {nft.code &&
{hiddenCodes[nft.id] ? "••••••••••••••••" : nft.code}
}
+
+ {
+ nft.showRedeemProcess && (
+
Redeeming code...
+ )
+ }
+ {
+ nft.code && (
+
+
+
+
+ )
+ }
+
+ ))}
+
+
+ {
+ !!totalPages && (
+
+
+
Page {currentPage} of {totalPages}
+
+
+ )
+ }
+
+
+
+
+
Recover your account
+
+
+
Write or paste your phrase to recover your account
+
Make sure you’re using the correct Secret Recovery Phrase before proceeding. You will not be able to undo this and restore your account.
+
+
+
+
+ {phrases.map((phrase, i) => (
+
+
{i + 1}
+
(inputsRef.current[i] = el)}
+ value={phrase}
+ onChange={(e) => handleWordChange(i, e.target.value)}
+ onPaste={(e) => handlePaste(e, i)}
+ />
+
+ ))}
+
+
+
+
Never lose your Secret Recovery Phrase
+
+
+
+ {errorRecovering &&
An error occurred during recover. Check the phrase or try again later.}
+
+
+
-
{step}
-
-
-
+
+ {step === 4 &&
}
- {step === 1 &&
}
- {step === 2 &&
}
+
-
)
}
\ No newline at end of file
diff --git a/src/pages/Subscription/page-components/FirstStep.tsx b/src/pages/Subscription/page-components/FirstStep.tsx
index be1d0f2..704e784 100644
--- a/src/pages/Subscription/page-components/FirstStep.tsx
+++ b/src/pages/Subscription/page-components/FirstStep.tsx
@@ -1,9 +1,11 @@
+import AccountList from '../../../components/AccountList';
import BuyMore from './BuyMore';
import CurrentSubscription from './CurrentSubscription';
-export default function FirstStep() {
+export default function FirstStep({ spInUsd, solInUsd }: any) {
return (
diff --git a/src/pages/Subscription/page-components/Footer.tsx b/src/pages/Subscription/page-components/Footer.tsx
index 135cc12..71d8a8b 100644
--- a/src/pages/Subscription/page-components/Footer.tsx
+++ b/src/pages/Subscription/page-components/Footer.tsx
@@ -1,35 +1,21 @@
-import { useNavigate } from 'react-router-dom';
-import { Step } from '..';
-
-import { ReactComponent as ProgressIcon} from "../assets/progress-activity.svg";
+import { Step } from '../';
+import { ReactComponent as ProgressIcon } from "../assets/progress-activity.svg";
interface FooterProps {
step: Step;
- nextStep: () => void;
- backToMyWallet: () => void;
+ isSubmitButtonDisabled: boolean;
+ handleButtonAction: () => void;
}
-export default function Footer({ step, nextStep, backToMyWallet }: FooterProps) {
- const navigate = useNavigate();
-
- function handleButtonAction() {
- if (step === 4 || step === 5) {
- navigate("/wallet")
- return;
- }
-
- if (step === 1 || step === 2) {
- nextStep();
- return;
- }
- }
-
+export default function Footer({ step, isSubmitButtonDisabled, handleButtonAction }: FooterProps) {
return (
{(step === 2 || step === 3) &&
Your transaction completion time may vary and can take up to 24 hours. Confirmation of Transaction Hash will display on completion.
}
-