+
+ );
+}
diff --git a/apps/web-embed/App.ts b/apps/web-embed/pages/PageWebEmbedApi.ts
similarity index 66%
rename from apps/web-embed/App.ts
rename to apps/web-embed/pages/PageWebEmbedApi.ts
index 30e91d80215..daf46b0c406 100644
--- a/apps/web-embed/App.ts
+++ b/apps/web-embed/pages/PageWebEmbedApi.ts
@@ -1,9 +1,19 @@
+import { memo, useEffect } from 'react';
+
import { setBgSensitiveTextEncodeKey } from '@onekeyhq/core/src/secret';
import type { IBackgroundApiWebembedCallMessage } from '@onekeyhq/kit-bg/src/apis/IBackgroundApi';
import webembedApi from '@onekeyhq/kit-bg/src/webembeds/instance/webembedApi';
import type { IJsBridgeMessagePayload } from '@onekeyfe/cross-inpage-provider-types';
+// create button which can refresh, append to body
+const refreshButton = document.createElement('button');
+refreshButton.textContent = 'Refresh';
+refreshButton.addEventListener('click', () => {
+ globalThis.location.reload();
+});
+document.body.appendChild(refreshButton);
+
function printMessageToBody(message: string) {
const p = document.createElement('p');
p.textContent = `${new Date().toTimeString().slice(0, 8)} ${message}`;
@@ -40,7 +50,19 @@ const init = (times = 0) => {
});
};
-init();
+let isInitExecuted = false;
+const PageWebEmbedApi = memo(() => {
+ useEffect(() => {
+ if (isInitExecuted) {
+ return;
+ }
+ isInitExecuted = true;
+ init();
+ printMessageToBody('web-embed init...');
+ printMessageToBody(`${globalThis.location.href}`);
+ }, []);
+ return null;
+});
+PageWebEmbedApi.displayName = 'PageWebEmbedApi';
-printMessageToBody('web-embed init...');
-printMessageToBody(`${globalThis.location.href}`);
+export default PageWebEmbedApi;
diff --git a/apps/web-embed/pages/PageWebEmbedPrimePurchase.tsx b/apps/web-embed/pages/PageWebEmbedPrimePurchase.tsx
new file mode 100644
index 00000000000..698b185f909
--- /dev/null
+++ b/apps/web-embed/pages/PageWebEmbedPrimePurchase.tsx
@@ -0,0 +1,184 @@
+/* eslint-disable unicorn/prefer-global-this */
+import { useEffect, useState } from 'react';
+
+import { useSearchParams } from 'react-router-dom';
+
+import purchasesSdk from '@onekeyhq/kit/src/views/Prime/purchasesSdk/purchasesSdk';
+
+import webEmbedAppSettings from '../utils/webEmbedAppSettings';
+
+import type { Package } from '@revenuecat/purchases-js';
+
+function PrimeSubscriptionPlansWeb({
+ packages,
+ onPackageSelected,
+}: {
+ packages: Package[];
+ onPackageSelected: (packageId: string) => void;
+}) {
+ const [selectedPackageId, setSelectedPackageId] = useState<
+ string | undefined
+ >(packages?.[0]?.identifier);
+
+ useEffect(() => {
+ if (selectedPackageId) {
+ onPackageSelected(selectedPackageId);
+ }
+ }, [onPackageSelected, selectedPackageId]);
+
+ const containerStyle = {
+ display: 'flex',
+ flexDirection: 'column' as any,
+ gap: '10px',
+ };
+
+ const itemStyle = (selected: boolean) => ({
+ display: 'flex',
+ alignItems: 'baseline',
+ padding: '20px',
+ backgroundColor: '#ffffff',
+ border: `2px solid ${selected ? '#0066ff' : '#e5e7eb'}`,
+ borderRadius: '12px',
+ cursor: 'pointer',
+ position: 'relative' as any,
+ userSelect: 'none' as const,
+ });
+
+ const titleStyle = {
+ fontSize: '24px',
+ marginRight: '8px',
+ };
+
+ const priceStyle = {
+ fontSize: '24px',
+ flex: 1,
+ };
+
+ const pricePerMonthStyle = {
+ fontSize: '14px',
+ color: '#6b7280',
+ marginLeft: '8px',
+ };
+
+ const badgeStyle = {
+ position: 'absolute' as any,
+ top: '-11px',
+ right: '16px',
+ backgroundColor: '#000000',
+ color: '#ffffff',
+ padding: '2px 8px',
+ borderRadius: '4px',
+ fontSize: '12px',
+ };
+
+ return (
+ PageIndex
+-
+
- + WebEmbedApi + +
- + PrimePurchase + +
+ {packages?.map((p) => {
+ const selected = selectedPackageId === p.identifier;
+ const price = p.rcBillingProduct.currentPrice.amountMicros / 1_000_000;
+ const periodDuration = p.rcBillingProduct?.normalPeriodDuration;
+ const pricePerMonth = periodDuration === 'P1Y' ? price / 12 : price;
+ const showSaveBadge = periodDuration === 'P1Y';
+
+ return (
+
+ );
+}
+
+export default function PageWebEmbedPrimePurchase() {
+ const [packages, setPackages] = useState setSelectedPackageId(p.identifier)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ setSelectedPackageId(p.identifier);
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ aria-pressed={selected}
+ >
+ {showSaveBadge ?
+ );
+ })}
+ Save 33%
: null}
+
+ {p.rcBillingProduct.title} ({periodDuration})
+
+ ${price.toFixed(2)}
+
+ ${pricePerMonth.toFixed(2)}/month
+
+
+
+ );
+}
diff --git a/apps/web-embed/pages/WebEmbedAppProvider.tsx b/apps/web-embed/pages/WebEmbedAppProvider.tsx
new file mode 100644
index 00000000000..4895b329e56
--- /dev/null
+++ b/apps/web-embed/pages/WebEmbedAppProvider.tsx
@@ -0,0 +1,21 @@
+import { ConfigProvider } from '@onekeyhq/components';
+
+import webEmbedAppSettings from '../utils/webEmbedAppSettings';
+
+export default function WebEmbedAppProvider({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const settings = webEmbedAppSettings.getSettings();
+
+ // TODO Toast support
+ return (
+
+ {JSON.stringify({
+ settings,
+ primeUserId,
+ primeUserEmail,
+ revenuecatApiKeySandbox: process.env.REVENUECAT_API_KEY_WEB_SANDBOX,
+ revenuecatApiKey: process.env.REVENUECAT_API_KEY_WEB,
+ })}
+
+ {window.location.href}
+
+ <% if ( platform == 'webEmbed' ) { %>
+ webEmbed index.html
+ <% } %>
+
<% if ( platform !== 'webEmbed' ) { %>
- <% } %>
+ <% } %>