peter

src/App.tsx

@@ -31,6 +31,7 @@ function App() {
     const randomIndex = Math.floor(Math.random() * (allNodes.length - 1))
     setRandomSolanaRPC(allNodes[randomIndex])
   }
+
   useEffect(() => {
     const handlePassport = async () => {
       if (!CoNET_Data?.profiles[0]?.keyID) return
@@ -123,7 +124,9 @@ function App() {
         setServerPort('3002');
 		setIsLocalProxy(true)
       } catch (ex) {
-		setIsIOS(true)
+		if (window?.webkit) {
+			setIsIOS(true)
+		}
 		setIsLocalProxy(false)
       }
     };

src/components/AccountList/index.tsx

@@ -117,8 +117,8 @@ export default function AccountList({ showMainWallet = true, simplifiedView = fa
               simplifiedView && (
                 <div className="copy">
                   {
-                    profiles?.[0].keyID ? (
-                      <p>{profiles?.[0]?.keyID?.slice(0, 5)}...{profiles?.[0]?.keyID?.slice(-5)}</p>
+                    profiles[0]?.keyID?.slice ? (
+                      <p>{profiles[0].keyID?.slice(0, 5)}...{profiles?.[0]?.keyID?.slice(-5)}</p>
                     ) : (
                       <Skeleton width="100%" height="20px" />
                     )
@@ -223,8 +223,8 @@ export default function AccountList({ showMainWallet = true, simplifiedView = fa
             simplifiedView && (
               <div className="copy">
                 {
-                  profiles?.[1].keyID ? (
-                    <p>{profiles?.[1]?.keyID?.slice(0, 5)}...{profiles?.[1]?.keyID?.slice(-5)}</p>
+                  profiles[1]?.keyID?.slice ? (
+                    <p>{profiles[1].keyID.slice(0, 5)}...{profiles[1].keyID.slice(-5)}</p>
                   ) : (
                     <Skeleton width="100%" height="20px" />
                   )

src/components/AffiliateOptions/index.css

@@ -0,0 +1,64 @@
+.affiliate-options {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  flex: 1;
+}
+
+.affiliate-options button {
+  width: 100%;
+  height: 60px;
+  border-radius: 16px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+
+  font-weight: 700;
+  font-size: 18px;
+
+  cursor: pointer;
+}
+
+.affiliate-options button:disabled {
+	color: #5B5B5B!important;
+	background: #262626!important;
+	cursor: not-allowed!important;
+}
+
+
+.affiliate-options .sp-buy-button {
+  color: #FFFFFF;
+  background: #4E72B6;
+}
+
+.affiliate-options .paypal-buy-button {
+  color: #FFFFFF;
+  background: #253B80;
+}
+
+.affiliate-options .stripe-buy-button {
+  color: #FFFFFF;
+  background: #635BFF;
+}
+
+.affiliate-options .stripe-buy-button img {
+  width: initial;
+  height: 30px;
+}
+
+.affiliate-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.affiliate-footer > p {
+  font-size: 12px;
+  color: #989899;
+}
+p{
+	width: initial;
+}

src/components/AffiliateOptions/index.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import './index.css'
+import { useDaemonContext } from '../../providers/DaemonProvider';
+import { useNavigate } from 'react-router-dom';
+import ChoosePlan from '../ChoosePlan';
+
+import { ReactComponent as PaypalIcon } from './assets/paypal.svg';
+import StripeIcon from './assets/stripe.png';
+
+
+
+export default function AffiliateOptions() {
+  const navigate = useNavigate();
+  const { purchasingPlan, profiles, setPaymentKind } = useDaemonContext();
+
+  function subscribe(val: number) {
+	setPaymentKind(val)
+  }
+
+  function subscribePaypal() {}
+
+  return (
+    <div className="affiliate-options">
+      <ChoosePlan />
+
+      <div className="affiliate-footer">
+        <button onClick={() => subscribe(0)} disabled={true} className="sp-buy-button">
+          <p>Pay with $SP</p>
+        </button>
+        <button onClick={subscribePaypal} disabled={true} className="paypal-buy-button">
+          <p>Pay with</p>
+          <PaypalIcon />
+        </button>
+        <button onClick={() => subscribe(1)} disabled={!profiles?.[0]?.keyID} className="stripe-buy-button">
+          <p style={{"width": "none"}}>Pay with</p>
+          <img src={StripeIcon} alt="Stripe" />
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/ChoosePlan/index.css

@@ -0,0 +1,79 @@
+.choose-plan-container {
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+  }
+
+  .choose-plan-container h2 {
+	text-align: left;
+  }
+
+  .choose-plan-options {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+  }
+
+  .plan-option {
+	display: flex;
+	justify-content: space-between;
+
+	background: #191919;
+	padding: 16px;
+	border-radius: 16px;
+  }
+
+  .plan-option {
+	text-align: left;
+  }
+
+  .plan-option div p {
+	color: #FFFFFF;
+	font-size: 24px;
+  }
+
+  .plan-option div span {
+	color: #989899;
+	font-size: 14px;
+  }
+
+  .plan-option div:nth-child(1) {
+	width: 90px;
+  }
+
+  .plan-option div:nth-child(3) {
+	width: 65px;
+  }
+
+  .plan-option div:nth-child(2) {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+  }
+
+  .plan-option div:nth-child(2) button {
+	border-radius: 4px;
+
+	color: #FFFFFF;
+	background: #9FBFE5FE;
+
+	width: 32px;
+	height: 32px;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	font-size: 18px;
+	font-weight: 700;
+
+	cursor: pointer;
+  }
+
+  .plan-option div:nth-child(2) button:disabled {
+	color: #5B5B5B;
+	background: #262626;
+	cursor: not-allowed!important;
+  }

src/components/ChoosePlan/index.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import { useDaemonContext } from '../../providers/DaemonProvider';
+
+export default function ChoosePlan() {
+  const { purchasingPlan, setPurchasingPlan, purchasingPlanPaymentTime, setPurchasingPlanPaymentTime } = useDaemonContext();
+
+  const [standard, setStandard] = useState(0);
+  const [premium, setPremium] = useState(0);
+
+  const [standardPrice, setStandardPrice] = useState('2.49');
+  const [premiumPrice, setPremiumPrice] = useState('9.99');
+
+  useEffect(() => {
+    if (purchasingPlanPaymentTime === 'monthly') {
+      setStandardPrice('2.99');
+      setPremiumPrice('24.99');
+    } else {
+      setStandardPrice('24.99');
+      setPremiumPrice('99.99');
+    }
+
+  }, [purchasingPlanPaymentTime]);
+
+  return (
+    <div className="buy-more">
+      <h3>Choose plan</h3>
+      {/* <div className="plan-options">
+        <button onClick={() => setPurchasingPlanPaymentTime('monthly')} className={purchasingPlanPaymentTime === 'monthly' ? 'active' : ''}>Monthly</button>
+        <button onClick={() => setPurchasingPlanPaymentTime('yearly')} className={purchasingPlanPaymentTime === 'yearly' ? 'active' : ''}>Yearly</button>
+      </div> */}
+      <div className="plan-cards">
+        <div className={`plan ${purchasingPlan === 'standard' ? 'active' : ''}`} onClick={() => setPurchasingPlan('standard')}>
+          <div>
+            <p>Monthly</p>
+            <span>1 device</span>
+          </div>
+          <div>
+            {/* <button onClick={() => setStandard((prev) => prev === 0 ? 0 : prev - 1)} disabled={standard === 0}>-</button>
+            <div>{standard}</div>
+            <button onClick={() => setStandard((prev) => prev + 1)}>+</button> */}
+          </div>
+          <div>
+            <span>$USD</span>
+            <p>{standardPrice}</p>
+            {/* <span className="pay-type">paid {purchasingPlanPaymentTime}</span> */}
+          </div>
+        </div>
+        <div className={`plan ${purchasingPlan === 'premium' ? 'active' : ''}`} onClick={() => setPurchasingPlan('premium')}>
+          <div>
+            <p>Annual</p>
+            <span>1 devices</span>
+          </div>
+          <div>
+            {/* <button onClick={() => setPremium((prev) => prev === 0 ? 0 : prev - 1)} disabled={premium === 0}>-</button>
+            <div>{premium}</div>
+            <button onClick={() => setPremium((prev) => prev + 1)}>+</button> */}
+          </div>
+          <div>
+            <span>$USD</span>
+            <p>{premiumPrice}</p>
+            {/* <span className="pay-type">Annual</span> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}