fix: new connection deeplink flow (#1009)

* fix: use browser router in http mode * fix: update links to not use hash router * fix: add redirect from hash router url * fix: return nostrWalletConnectUrl in nwc connection success event and message * fix: include relay url and wallet pubkey in app created messages instead of full NWC url * chore: remove broken check
getAlby · Jan 31, 2025 · 34a5bc8 · 34a5bc8
1 parent 50cc20c
commit 34a5bc8
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 18 deletions.
diff --git a/api/api.go b/api/api.go
@@ -104,6 +104,8 @@ func (api *api) CreateApp(createAppRequest *CreateAppRequest) (*CreateAppRespons
 	responseBody.Name = createAppRequest.Name
 	responseBody.Pubkey = app.AppPubkey
 	responseBody.PairingSecret = pairingSecretKey
+	responseBody.WalletPubkey = *app.WalletPubkey
+	responseBody.RelayUrl = relayUrl
 
 	lightningAddress, err := api.albyOAuthSvc.GetLightningAddress()
 	if err != nil {

diff --git a/api/models.go b/api/models.go
@@ -153,6 +153,8 @@ type CreateAppResponse struct {
 	PairingUri    string `json:"pairingUri"`
 	PairingSecret string `json:"pairingSecretKey"`
 	Pubkey        string `json:"pairingPublicKey"`
+	RelayUrl      string `json:"relayUrl"`
+	WalletPubkey  string `json:"walletPubkey"`
 	Id            uint   `json:"id"`
 	Name          string `json:"name"`
 	ReturnTo      string `json:"returnTo"`

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,13 +1,19 @@
-import { RouterProvider, createHashRouter } from "react-router-dom";
+import {
+  RouterProvider,
+  createBrowserRouter,
+  createHashRouter,
+} from "react-router-dom";
 
 import { ThemeProvider } from "src/components/ui/theme-provider";
 
 import { Toaster } from "src/components/ui/toaster";
 import { TouchProvider } from "src/components/ui/tooltip";
 import { useInfo } from "src/hooks/useInfo";
 import routes from "src/routes.tsx";
+import { isHttpMode } from "src/utils/isHttpMode";
 
-const router = createHashRouter(routes);
+const createRouterFunc = isHttpMode() ? createBrowserRouter : createHashRouter;
+const router = createRouterFunc(routes);
 
 function App() {
   const { data: info } = useInfo();

diff --git a/frontend/src/components/SuggestedAppData.tsx b/frontend/src/components/SuggestedAppData.tsx
@@ -429,7 +429,7 @@ export const suggestedApps: SuggestedApp[] = [
             <li>
               4. Click{" "}
               <Link
-                to="/#/apps/new?app=btcpay"
+                to="/apps/new?app=btcpay"
                 className="font-medium text-foreground underline"
               >
                 Connect to BTCPay Server
@@ -506,7 +506,7 @@ export const suggestedApps: SuggestedApp[] = [
             <li>
               4. Click{" "}
               <Link
-                to="/#/apps/new?app=lnbits"
+                to="/apps/new?app=lnbits"
                 className="font-medium text-foreground underline"
               >
                 Connect to LNbits
@@ -585,7 +585,7 @@ export const suggestedApps: SuggestedApp[] = [
             <li>
               4. Click{" "}
               <Link
-                to="/#/apps/new?app=coracle"
+                to="/apps/new?app=coracle"
                 className="font-medium text-foreground underline"
               >
                 Connect to Coracle
@@ -657,7 +657,7 @@ export const suggestedApps: SuggestedApp[] = [
             <li>
               3. Click{" "}
               <Link
-                to="/#/apps/new?app=nostter"
+                to="/apps/new?app=nostter"
                 className="font-medium text-foreground underline"
               >
                 Connect to Nostter

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,11 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "src/App.tsx";
-import "src/index.css";
 import "src/fonts.css";
+import "src/index.css";
+import { isHttpMode } from "src/utils/isHttpMode";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+// redirect hash router links to browser router links
+// TODO: remove after 2026-01-01
+if (isHttpMode() && window.location.href.indexOf("/#/") > -1) {
+  window.location.href = window.location.href.replace("/#/", "/");
+} else {
+  ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
diff --git a/frontend/src/screens/apps/AppCreated.tsx b/frontend/src/screens/apps/AppCreated.tsx
@@ -56,25 +56,28 @@ function AppCreatedInternal() {
   }, [app?.lastEventAt, navigate, toast]);
 
   useEffect(() => {
-    if (appstoreApp) {
-      return;
-    }
     // dispatch a success event which can be listened to by the opener or by the app that embedded the webview
     // this gives those apps the chance to know the user has enabled the connection
-    const nwcEvent = new CustomEvent("nwc:success", { detail: {} });
+    const nwcEvent = new CustomEvent("nwc:success", {
+      detail: {
+        relayUrl: createAppResponse.relayUrl,
+        walletPubkey: createAppResponse.walletPubkey,
+      },
+    });
     window.dispatchEvent(nwcEvent);
 
     // notify the opener of the successful connection
     if (window.opener) {
       window.opener.postMessage(
         {
           type: "nwc:success",
-          payload: { success: true },
+          relayUrl: createAppResponse.relayUrl,
+          walletPubkey: createAppResponse.walletPubkey,
         },
         "*"
       );
     }
-  }, [appstoreApp]);
+  }, [createAppResponse.relayUrl, createAppResponse.walletPubkey]);
 
   if (!createAppResponse) {
     return <Navigate to="/apps/new" />;

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -201,6 +201,8 @@ export interface CreateAppResponse {
   pairingUri: string;
   pairingPublicKey: string;
   pairingSecretKey: string;
+  relayUrl: string;
+  walletPubkey: string;
   returnTo: string;
 }