improve deeplink interstitial page

Author: steven-tey

apps/web/app/deeplink/[domain]/[key]/action-buttons.tsx

@@ -11,13 +11,13 @@ export function DeepLinkActionButtons({ link }: { link: EdgeLinkProps }) {
       copyToClipboard(link.shortLink);
     }
 
-    window.location.href = link.ios || link.url;
+    window.location.href = link.shortLink;
   };
 
   return (
     <div className="flex flex-col items-center gap-4">
       <Button
-        text="Get the App"
+        text="Open in the app"
         className="h-12 w-full rounded-xl bg-neutral-900 text-white"
         variant="primary"
         onClick={() => handleClick({ withCopy: true })}
@@ -28,7 +28,7 @@ export function DeepLinkActionButtons({ link }: { link: EdgeLinkProps }) {
         onClick={() => handleClick()}
         className="text-sm text-neutral-500"
       >
-        Get the App without copying
+        Open in the app without copying
       </button>
     </div>
   );

apps/web/app/deeplink/[domain]/[key]/brand-logo-badge.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { EdgeLinkProps } from "@/lib/planetscale";
+import { useCopyToClipboard } from "@dub/ui";
+import { getApexDomain, GOOGLE_FAVICON_URL } from "@dub/utils";
+
+export function BrandLogoBadge({ link }: { link: EdgeLinkProps }) {
+  const [_copied, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <button
+      onClick={() => {
+        copyToClipboard(link.shortLink);
+        window.location.href = link.shortLink;
+      }}
+      className="inline-flex items-center gap-2 rounded-full bg-white px-3 py-1.5 shadow-lg shadow-black/10 ring-1 ring-neutral-200"
+    >
+      <img
+        src={`${GOOGLE_FAVICON_URL}${getApexDomain(link.url)}`}
+        className="size-8 shrink-0 overflow-visible rounded-full p-px"
+      />
+      <div className="pr-1.5 text-lg font-semibold text-neutral-900">
+        {getApexDomain(link.url)}
+      </div>
+    </button>
+  );
+}

apps/web/app/deeplink/[domain]/[key]/page.tsx

@@ -1,10 +1,11 @@
 import { getLinkViaEdge } from "@/lib/planetscale";
 import { Grid, Wordmark } from "@dub/ui";
 import { ArrowRight, Copy, IOSAppStore, MobilePhone } from "@dub/ui/icons";
-import { cn, getApexDomain, GOOGLE_FAVICON_URL } from "@dub/utils";
+import { cn } from "@dub/utils";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { DeepLinkActionButtons } from "./action-buttons";
+import { BrandLogoBadge } from "./brand-logo-badge";
 
 export const runtime = "edge";
 
@@ -72,20 +73,11 @@ export default async function DeepLinkPage({
 
         <div className="flex flex-1 flex-col justify-center gap-12">
           <div className="flex flex-col items-center gap-y-6">
-            <div className="inline-flex items-center gap-2 rounded-full bg-white p-1.5 shadow-lg shadow-black/10 ring-1 ring-neutral-200">
-              <img
-                src={`${GOOGLE_FAVICON_URL}${getApexDomain(link.url)}`}
-                className="size-8 shrink-0 overflow-visible rounded-full p-px"
-              />
-              <div className="pr-1.5 text-lg font-semibold text-neutral-900">
-                {getApexDomain(link.url)}
-              </div>
-            </div>
+            <BrandLogoBadge link={link} />
 
             <div className="flex h-40 w-full max-w-xs flex-col gap-6 rounded-xl border border-neutral-300 px-10 py-8">
               <p className="text-center text-sm font-normal leading-5 text-neutral-700">
-                Clicking below will copy this page and open it after you install
-                the app.
+                Clicking below will copy this page and open it in the app.
               </p>
 
               <div className="flex items-center justify-center gap-3">