diff --git a/components/apps/Browser/config.ts b/components/apps/Browser/config.ts index 74bfc3e7..9b17b0eb 100644 --- a/components/apps/Browser/config.ts +++ b/components/apps/Browser/config.ts @@ -1,3 +1,4 @@ +import { type ProxyState } from "components/apps/Browser/useProxyMenu"; import { FAVICON_BASE_PATH } from "utils/constants"; type Bookmark = { @@ -78,3 +79,42 @@ export const OLD_NET_SUPPORTED_YEARS = [ ]; export const WAYBACK_URL_INFO = "https://archive.org/wayback/available?url="; + +export const PROXIES: Record< + ProxyState, + ((url: string) => Promise | string) | undefined +> = { + ALL_ORIGINS: (url) => `https://api.allorigins.win/raw?url=${url}`, + CHAINFLARE: (url) => `https://x.xxlxx.co/?url=${url}`, + CORS: undefined, + WAYBACK_MACHINE: async (url) => { + try { + const urlInfoResponse = await fetch(`${WAYBACK_URL_INFO}${url}`); + const { archived_snapshots } = + (await urlInfoResponse.json()) as WaybackUrlInfo; + + if (archived_snapshots.closest.url) { + let addressUrl = archived_snapshots.closest.url; + + if ( + addressUrl.startsWith("http:") && + window.location.protocol === "https:" + ) { + addressUrl = addressUrl.replace("http:", "https:"); + } + + return addressUrl; + } + } catch { + // Ignore failure to fetch url + } + + return url; + }, + ...Object.fromEntries( + OLD_NET_SUPPORTED_YEARS.map((year) => [ + `OLD_NET_${year}`, + (url) => `${OLD_NET_PROXY.replace("", year.toString())}${url}`, + ]) + ), +}; diff --git a/components/apps/Browser/index.tsx b/components/apps/Browser/index.tsx index f4cd907b..c1382194 100644 --- a/components/apps/Browser/index.tsx +++ b/components/apps/Browser/index.tsx @@ -22,9 +22,7 @@ import { HOME_PAGE, LOCAL_HOST, NOT_FOUND, - OLD_NET_PROXY, - WAYBACK_URL_INFO, - type WaybackUrlInfo, + PROXIES, bookmarks, } from "components/apps/Browser/config"; import { type ComponentProcessProps } from "components/system/Apps/RenderComponent"; @@ -315,35 +313,9 @@ const Browser: FC = ({ id }) => { setSrcDoc(newSrcDoc); prependFileToTitle(newTitle); } else { - let addressUrl = processedUrl.href; - - if (proxyState === "WAYBACK_MACHINE") { - try { - const urlInfoResponse = await fetch( - `${WAYBACK_URL_INFO}${addressUrl}` - ); - const { archived_snapshots } = - (await urlInfoResponse.json()) as WaybackUrlInfo; - - if (archived_snapshots.closest.url) { - addressUrl = archived_snapshots.closest.url; - - if ( - addressUrl.startsWith("http:") && - window.location.protocol === "https:" - ) { - addressUrl = addressUrl.replace("http:", "https:"); - } - } - } catch { - // Ignore failure to fetch url - } - } else if (proxyState.startsWith("OLD_NET_")) { - const year = proxyState.replace("OLD_NET_", ""); - const proxyUrl = OLD_NET_PROXY.replace("", year); - - addressUrl = `${proxyUrl}${processedUrl.href}`; - } + const addressUrl = PROXIES[proxyState] + ? await PROXIES[proxyState](processedUrl.href) + : processedUrl.href; changeIframeWindowLocation(addressUrl, contentWindow); diff --git a/components/apps/Browser/useProxyMenu.ts b/components/apps/Browser/useProxyMenu.ts index ece7e762..7172e8b5 100644 --- a/components/apps/Browser/useProxyMenu.ts +++ b/components/apps/Browser/useProxyMenu.ts @@ -3,7 +3,12 @@ import { OLD_NET_SUPPORTED_YEARS } from "components/apps/Browser/config"; import { useMenu } from "contexts/menu"; import { type ContextMenuCapture } from "contexts/menu/useMenuContextState"; -export type ProxyState = `CORS` | `OLD_NET_${number}` | "WAYBACK_MACHINE"; +export type ProxyState = + | "ALL_ORIGINS" + | "CHAINFLARE" + | "CORS" + | `OLD_NET_${number}` + | "WAYBACK_MACHINE"; const useProxyMenu = ( proxyState: ProxyState, @@ -14,24 +19,34 @@ const useProxyMenu = ( return useMemo( () => contextMenu?.(() => [ + { + action: () => setProxyState("ALL_ORIGINS"), + label: "allOrigins", + toggle: proxyState === "ALL_ORIGINS", + }, + { + action: () => setProxyState("CHAINFLARE"), + label: "Chainflare", + toggle: proxyState === "CHAINFLARE", + }, { action: () => setProxyState("CORS"), - checked: proxyState === "CORS", label: "Local w/CORS", + toggle: proxyState === "CORS", }, { action: () => setProxyState("WAYBACK_MACHINE"), - checked: proxyState === "WAYBACK_MACHINE", label: "Wayback Machine", + toggle: proxyState === "WAYBACK_MACHINE", }, { - checked: proxyState.startsWith("OLD_NET_"), label: "The Old Net", menu: OLD_NET_SUPPORTED_YEARS.map((year) => ({ action: () => setProxyState(`OLD_NET_${year}`), checked: proxyState === `OLD_NET_${year}`, label: year.toString(), })), + toggle: proxyState.startsWith("OLD_NET_"), }, ]), [contextMenu, proxyState, setProxyState]