add ios banner on mobile safari

src/assets/icons/black-close.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m14 14 20 20m-20 0 20-20" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/IOSbanner.tsx

@@ -0,0 +1,50 @@
+import { Show } from "solid-js";
+
+import close from "~/assets/icons/black-close.svg";
+import { ButtonLink } from "~/components";
+import { useMegaStore } from "~/state/megaStore";
+
+export function IOSbanner() {
+    const [state, actions] = useMegaStore();
+
+    function closeBanner() {
+        actions.setTestFlightPromptDismissed();
+    }
+
+    return (
+        <>
+            <Show when={true}>
+                <div class="grid grid-cols-[auto_minmax(0,_1fr)_auto] gap-4 rounded-xl bg-white p-4">
+                    <div class="self-center">
+                        <span class="h-8 w-8 text-3xl text-black"></span>
+                    </div>
+                    <div class="flex flex-col justify-center text-black">
+                        <header class={`text-sm font-semibold`}>
+                            iOS TESTFLIGHT FOR MUTINY
+                            <span class="text-m-red">+</span> USERS
+                        </header>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <ButtonLink
+                            intent="green"
+                            layout="xs"
+                            href={
+                                state.mutiny_plus
+                                    ? "https://testflight.apple.com/join/9g23f0Mc"
+                                    : "/settings/plus"
+                            }
+                        >
+                            Join
+                        </ButtonLink>
+                        <button
+                            onClick={closeBanner}
+                            class="self-center justify-self-center rounded-lg hover:bg-white/10 active:bg-m-blue"
+                        >
+                            <img src={close} alt="Close" class="h-8 w-8" />
+                        </button>{" "}
+                    </div>
+                </div>
+            </Show>
+        </>
+    );
+}

src/components/index.ts

@@ -45,3 +45,4 @@ export * from "./SyncContactsForm";
 export * from "./GiftLink";
 export * from "./MutinyPlusCta";
 export * from "./ToggleHodl";
+export * from "./IOSbanner";

src/i18n/en/translations.ts

@@ -462,6 +462,7 @@ export default {
             satisfaction: "Smug satisfaction",
             gifting: "Gifting",
             multi_device: "Multi-device access",
+            ios_beta_access: "iOS beta access",
             more: "... and more to come",
             cta_description:
                 "Enjoy early access to new features and premium functionality.",

src/routes/Main.tsx

@@ -10,6 +10,7 @@ import {
     CombinedActivity,
     DecryptDialog,
     DefaultMain,
+    IOSbanner,
     LoadingIndicator,
     LoadingShimmer,
     Logo,
@@ -23,11 +24,14 @@ import {
 import { useI18n } from "~/i18n/context";
 import { FeedbackLink } from "~/routes/Feedback";
 import { useMegaStore } from "~/state/megaStore";
+import { iosNotNative } from "~/utils/platform";
 
 export function Main() {
     const i18n = useI18n();
     const [state, _actions] = useMegaStore();
 
+    const safari = iosNotNative();
+
     return (
         <SafeArea>
             <DefaultMain>
@@ -71,6 +75,9 @@ export function Main() {
                     </div>
                 </header>
                 <Show when={!state.wallet_loading}>
+                    <Show when={safari && !state.testflightPromptDismissed}>
+                        <IOSbanner />
+                    </Show>
                     <OnboardWarning />
                     <ReloadPrompt />
                 </Show>

src/routes/settings/Plus.tsx

@@ -14,6 +14,7 @@ import {
     Button,
     ConfirmDialog,
     DefaultMain,
+    ExternalLink,
     FancyCard,
     InfoBox,
     LargeHeader,
@@ -37,6 +38,16 @@ function Perks(props: { alreadySubbed?: boolean }) {
                 <li>{i18n.t("settings.plus.satisfaction")}</li>
             </Show>
             <li>{i18n.t("settings.plus.gifting")} </li>
+            <li>
+                <Show
+                    when={props.alreadySubbed}
+                    fallback={i18n.t("settings.plus.ios_beta_access")}
+                >
+                    <ExternalLink href="https://testflight.apple.com/join/9g23f0Mc">
+                        {i18n.t("settings.plus.ios_beta_access")}
+                    </ExternalLink>
+                </Show>
+            </li>
             <li>
                 {i18n.t("redshift.title")}{" "}
                 <em>{i18n.t("common.coming_soon")}</em>

src/state/megaStore.tsx

@@ -67,6 +67,7 @@ export type MegaStore = [
         npub?: string;
         preferredInvoiceType: "unified" | "lightning" | "onchain";
         betaWarned: boolean;
+        testflightPromptDismissed: boolean;
         should_zap_hodl: boolean;
     },
     {
@@ -89,6 +90,7 @@ export type MegaStore = [
             onSuccess: (value: ParsedParams) => void
         ): void;
         setBetaWarned(): void;
+        setTestFlightPromptDismissed(): void;
         toggleHodl(): void;
     }
 ];
@@ -126,7 +128,9 @@ export const Provider: ParentComponent = (props) => {
         npub: localStorage.getItem("npub") || undefined,
         preferredInvoiceType: "unified" as "unified" | "lightning" | "onchain",
         betaWarned: localStorage.getItem("betaWarned") === "true",
-        should_zap_hodl: localStorage.getItem("should_zap_hodl") === "true"
+        should_zap_hodl: localStorage.getItem("should_zap_hodl") === "true",
+        testflightPromptDismissed:
+            localStorage.getItem("testflightPromptDismissed") === "true"
     });
 
     const actions = {
@@ -365,6 +369,10 @@ export const Provider: ParentComponent = (props) => {
             localStorage.setItem("betaWarned", "true");
             setState({ betaWarned: true });
         },
+        setTestFlightPromptDismissed() {
+            localStorage.setItem("testflightPromptDismissed", "true");
+            setState({ testflightPromptDismissed: true });
+        },
         toggleHodl() {
             const should_zap_hodl = !state.should_zap_hodl;
             localStorage.setItem("should_zap_hodl", should_zap_hodl.toString());

src/utils/platform.ts

@@ -0,0 +1,21 @@
+// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
+
+import { Capacitor } from "@capacitor/core";
+
+export function iosNotNative() {
+    if (Capacitor.isNativePlatform() || Capacitor.getPlatform() === "ios") {
+        return false;
+    }
+    return (
+        [
+            "iPad Simulator",
+            "iPhone Simulator",
+            "iPod Simulator",
+            "iPad",
+            "iPhone",
+            "iPod"
+        ].includes(navigator.platform) ||
+        // iPad on iOS 13 detection
+        (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+    );
+}