Handle uninstalled wallets

secretkeylabs · Mar 20, 2024 · 31595ab · 31595ab
1 parent 88c6c58
commit 31595ab
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/src/lib/WalletOption.tsx → src/lib/ProviderOption.tsx b/src/lib/WalletOption.tsx → src/lib/ProviderOption.tsx
@@ -1,14 +1,19 @@
 import { createSignal } from "solid-js";
 
-interface Props {
-  name: string;
-  icon: string;
-  onWalletSelected: (wallet: string) => void;
+import { ProviderOption } from "./utils";
+
+interface Props extends ProviderOption {
+  onWalletSelected: (walletId: string) => void;
 }
 
 export function WalletOption(props: Props) {
-  function handleWalletSelected(wallet: string) {
-    props.onWalletSelected(wallet);
+  function handleWalletSelected(walletId: string) {
+    if (props.installPrompt) {
+      window.open(props.installPrompt.url, "_blank");
+      return;
+    }
+
+    props.onWalletSelected(walletId);
   }
 
   const [isMouseOver, setIsMouseOver] = createSignal(false);
@@ -21,7 +26,7 @@ export function WalletOption(props: Props) {
 
   return (
     <div
-      role="button"
+      role={props.installPrompt ? "link" : "button"}
       tabIndex={0}
       style={{
         display: "flex",
@@ -32,7 +37,7 @@ export function WalletOption(props: Props) {
         outline: "none",
         "padding-top": "10px",
       }}
-      onClick={[handleWalletSelected, props.name]}
+      onClick={[handleWalletSelected, props.id]}
       onMouseEnter={() => setIsMouseOver(true)}
       onMouseLeave={() => setIsMouseOver(false)}
       onFocus={() => setIsFocused(true)}

diff --git a/src/lib/Selector.tsx b/src/lib/Selector.tsx
@@ -2,7 +2,7 @@ import { Dialog } from "@ark-ui/solid";
 import { For, Show, batch, createSignal, onCleanup, onMount } from "solid-js";
 
 import { CssReset } from "./CssReset";
-import { WalletOption } from "./WalletOption";
+import { WalletOption } from "./ProviderOption";
 import { XCircle } from "./XCircle";
 import { ProviderOption } from "./utils";
 
@@ -22,9 +22,9 @@ export function WalletSelector() {
     triggerFadeOut();
   }
 
-  function handleWalletSelected(wallet: string) {
+  function handleWalletSelected(walletId: string) {
     const event = new CustomEvent("sats-connect_wallet-selector_select", {
-      detail: wallet,
+      detail: walletId,
       bubbles: true,
       composed: true,
     });
@@ -208,9 +208,8 @@ export function WalletSelector() {
                   <For each={providers()}>
                     {(provider) => (
                       <WalletOption
+                        {...provider}
                         onWalletSelected={handleWalletSelected}
-                        name={provider.name}
-                        icon={provider.icon}
                       />
                     )}
                   </For>

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -23,10 +23,15 @@ export function cleanup() {
   }
 }
 
+export interface InstallPrompt {
+  url: string;
+}
+
 export interface ProviderOption {
   name: string;
   id: string;
   icon: string;
+  installPrompt?: InstallPrompt;
 }
 
 export function selectProvider(