add link warning interstitial

src/components/dialogs/LinkWarning.tsx

@@ -27,6 +27,21 @@ export function LinkWarningDialog() {
   )
 }
 
+export function CustomLinkWarningDialog({
+  control,
+  link,
+}: {
+  control: Dialog.DialogControlProps
+  link?: {href: string; displayText: string; share?: boolean}
+}) {
+  return (
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
+      <Dialog.Handle />
+      <LinkWarningDialogInner link={link} />
+    </Dialog.Outer>
+  )
+}
+
 function LinkWarningDialogInner({
   link,
 }: {

src/screens/Profile/components/GermButton.tsx

@@ -17,6 +17,7 @@ import {useAgent, useSession} from '#/state/session'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {CustomLinkWarningDialog} from '#/components/dialogs/LinkWarning'
 import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRightIcon} from '#/components/icons/Arrow'
 import {Link} from '#/components/Link'
 import {Loader} from '#/components/Loader'
@@ -34,6 +35,7 @@ export function GermButton({
   const {_} = useLingui()
   const t = useTheme()
   const {currentAccount} = useSession()
+  const linkWarningControl = Dialog.useDialogControl()
 
   // exclude `none` and all unknown values
   if (
@@ -57,23 +59,40 @@ export function GermButton({
   }
 
   return (
-    <Link
+    <>
-      to={url}
+      <Link
-      label={_(msg`Open Germ DM`)}
+        to={url}
-      overridePresentation={false}
+        onPress={evt => {
-      shouldProxy={false}
+          if (isCustomGermDomain(url)) {
-      style={[
+            evt.preventDefault()
-        t.atoms.bg_contrast_50,
+            linkWarningControl.open()
-        a.rounded_full,
+            return false
-        a.self_start,
+          }
-        {padding: 6},
+        }}
-      ]}>
+        label={_(msg`Open Germ DM`)}
-      <GermLogo size="small" />
+        overridePresentation={false}
-      <Text style={[a.text_sm, a.font_medium, a.ml_xs]}>
+        shouldProxy={false}
-        <Trans>Germ DM</Trans>
+        style={[
-      </Text>
+          t.atoms.bg_contrast_50,
-      <ArrowTopRightIcon style={[t.atoms.text, a.mx_2xs]} width={14} />
+          a.rounded_full,
-    </Link>
+          a.self_start,
+          {padding: 6},
+        ]}>
+        <GermLogo size="small" />
+        <Text style={[a.text_sm, a.font_medium, a.ml_xs]}>
+          <Trans>Germ DM</Trans>
+        </Text>
+        <ArrowTopRightIcon style={[t.atoms.text, a.mx_2xs]} width={14} />
+      </Link>
+      <CustomLinkWarningDialog
+        control={linkWarningControl}
+        link={{
+          href: url,
+          displayText: '',
+          share: false,
+        }}
+      />
+    </>
   )
 }
 
@@ -251,6 +270,15 @@ function constructGermUrl(
   }
 }
 
+function isCustomGermDomain(url: string) {
+  try {
+    const urlp = new URL(url)
+    return urlp.hostname !== 'landing.ger.mx'
+  } catch {
+    return false
+  }
+}
+
 function platform() {
   switch (Platform.OS) {
     case 'ios':