From 30c6abca74c47986739ce9cf98a9fcb2de0b55a1 Mon Sep 17 00:00:00 2001 From: tinkle-community Date: Tue, 2 Jun 2026 01:49:22 +0800 Subject: [PATCH] feat(web): inline-embed vergex.trade/explore in the strategy market MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit vergex.trade now lists the NOFX origins in the enforced CSP `frame-ancestors` directive for the /explore path: frame-ancestors 'self' https://nofxos.ai https://www.nofxos.ai http://127.0.0.1:3000 http://localhost:3000 so cross-origin embedding from any NOFX deployment works. The X-Frame-Options header is still SAMEORIGIN, but modern browsers honor the CSP `frame-ancestors` directive when both are present (per CSP Level 2), and the embed verifies cleanly under Chromium. Replaces the prior fallback "open in new tab" CTA card with the same iframe pattern DataPage.tsx already uses for vergex.trade/trending — single iframe filling the AppChrome content area, full-screen and clipboard permissions enabled, strict-origin referrer. --- web/src/pages/StrategyMarketPage.tsx | 147 ++++----------------------- 1 file changed, 17 insertions(+), 130 deletions(-) diff --git a/web/src/pages/StrategyMarketPage.tsx b/web/src/pages/StrategyMarketPage.tsx index 37115ecb..588d8d34 100644 --- a/web/src/pages/StrategyMarketPage.tsx +++ b/web/src/pages/StrategyMarketPage.tsx @@ -1,141 +1,28 @@ -import { ExternalLink } from 'lucide-react' import { useLanguage } from '../contexts/LanguageContext' +import { t } from '../i18n/translations' -const VERGEX_EXPLORE_URL = 'https://vergex.trade/explore' - -// Strategy Market — proxied to vergex.trade/explore. +// Strategy Market — embedded vergex.trade/explore. // -// vergex.trade currently sets `X-Frame-Options: SAMEORIGIN` on /explore which -// makes browsers refuse cross-origin embedding and render their own "refused -// to connect" page inside the iframe. There is no reliable way to detect -// this from JavaScript (the iframe's `load` event fires for the browser -// error page, and `contentWindow.location` always throws cross-origin -// regardless of success or failure), so we don't try to be clever — we -// surface a clean external-launch CTA instead. +// vergex.trade now lists the NOFX origins in its enforced +// `Content-Security-Policy: frame-ancestors 'self' https://nofxos.ai +// https://www.nofxos.ai http://127.0.0.1:3000 http://localhost:3000` for the +// /explore path, so cross-origin embedding works. The X-Frame-Options header +// is still SAMEORIGIN, but modern browsers prioritize the CSP +// `frame-ancestors` directive when both are present (per CSP Level 2). // -// TO RE-ENABLE INLINE EMBEDDING: -// 1. Ask the vergex.trade team to add NOFX origins to the /explore -// CSP `frame-ancestors` (same as /trending: 'self' https://nofxos.ai -// https://www.nofxos.ai http://127.0.0.1:3000 http://localhost:3000) -// AND drop the `X-Frame-Options: SAMEORIGIN` header on that path. -// 2. Replace this component with the same iframe pattern used by -// DataPage.tsx (which already embeds vergex.trade/trending successfully). +// Mirrors the DataPage.tsx pattern (vergex.trade/trending). export function StrategyMarketPage() { const { language } = useLanguage() - const heading = - language === 'zh' - ? 'Vergex 策略市场' - : language === 'id' - ? 'Pasar Strategi Vergex' - : 'Vergex Strategy Market' - - const description = - language === 'zh' - ? '在 Vergex 上探索由社区创建的交易策略,一键复制到您的 NOFX 账户。当前需要在新窗口打开。' - : language === 'id' - ? 'Jelajahi strategi trading komunitas di Vergex dan salin ke akun NOFX Anda. Saat ini terbuka di tab baru.' - : 'Explore community-built trading strategies on Vergex and copy them to your NOFX account. Currently opens in a new tab.' - - const ctaLabel = - language === 'zh' - ? '在 Vergex 打开策略市场' - : language === 'id' - ? 'Buka Pasar Strategi di Vergex' - : 'Open Strategy Market on Vergex' - - const subtitle = - language === 'zh' - ? 'POWERED BY VERGEX.TRADE' - : language === 'id' - ? 'DITENAGAI OLEH VERGEX.TRADE' - : 'POWERED BY VERGEX.TRADE' - - const features = - language === 'zh' - ? [ - { label: '策略数量', value: '100+' }, - { label: '覆盖市场', value: 'CEX & DEX' }, - { label: '实时数据', value: '24/7' }, - ] - : language === 'id' - ? [ - { label: 'Total Strategi', value: '100+' }, - { label: 'Cakupan Pasar', value: 'CEX & DEX' }, - { label: 'Data Real-time', value: '24/7' }, - ] - : [ - { label: 'Strategies', value: '100+' }, - { label: 'Markets', value: 'CEX & DEX' }, - { label: 'Live Data', value: '24/7' }, - ] - return ( -
- {/* Ambient halos */} -
-
- - {/* Main card */} -
-
- {/* Top gold edge */} -
- -
- {/* Subtitle */} -
-
- - {subtitle} - -
- - {/* Heading */} -

- {heading} -

- - {/* Description */} -

- {description} -

- - {/* CTA */} - - {ctaLabel} - - - - {/* Stats row */} -
- {features.map((f) => ( -
-
- {f.value} -
-
- {f.label} -
-
- ))} -
-
-
- - {/* Footer hint */} -

- vergex.trade · {VERGEX_EXPLORE_URL} -

-
+
+